CSS Border-Radius einfach entfernen?

Hallo, gibt es eine einfache Möglichkeit, den CSS Border-Radius (Button, Tabellen etc.) im Responsive Template zu entfernen? Gruß Albertus

Dazu müsstest du die entsprechenden Templates bearbeiten, da die Elemente die Class „.is–rounded“ haben. Alternativ kannst du auch eine eigene Less Datei anlegen mit folgendem Inhalt. .is--rounded { border-radius:0!important; } Oder weitere Alternative: Du könntest du die Class auch mittels jQuery global entfernen: $('.is--rounded').removeClass('is--rounded'); Lege die Datei frontend/index/index.tpl in deinem Theme an mit folgendem Inhalt: {extends file='frontend/index/index.tpl'} {block name="frontend\_index\_header\_javascript" append}<script> $('.is--rounded').removeClass('is--rounded'); </script>{/block}

Hallo, vielen Dank für die SUPER schnelle Antwort. Nachdem ich die Datei erstellt habe, erscheint folgende Fehlermeldung: Fatal error: Uncaught exception ‘SmartyCompilerException’ with message ‘Syntax Error in template “/var/www/vhosts/atavio.pl/httpdocs/themes/Frontend/Atavio/frontend/index/index.tpl” on line 2 “” illegal recursive call of “frontend/index/index.tpl”’ in /var/www/vhosts/atavio.pl/httpdocs/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php:657 Stack trace: #0 /var/www/vhosts/atavio.pl/httpdocs/engine/Library/Smarty/sysplugins/smarty_internal_compile_extends.php(82): Smarty_Internal_TemplateCompilerBase->trigger_template_error(‘illegal recursi…’, 2) #1 /var/www/vhosts/atavio.pl/httpdocs/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php(465): Smarty_Internal_Compile_Extends->compile(Array, Object(Smarty_Internal_SmartyTemplateCompiler), Array, NULL, NULL) #2 /var/www/vhosts/atavio.pl/httpdocs/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php(249): Smarty_Internal_TemplateCompilerBase->callTagCompiler(‘extends’, Array, Array) in /var/www/vhosts/atavio.pl/httpdocs/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php on line 657 503 Service Unavailable Habe ich etwas falsch gemacht? DANKE Gruss Albertus

Hast du das neue Template im Backend auch vorher angelegt ? Poste auch mal den Code 1zu1 welchen du in die index.tpl reingehauen hast. Alternativ kannst du mir auch gern die FTP & Backend Daten mal per PN schicken, dann schaue ich mal drüber.

@kayyy: Fehlt da nicht ein parent: in deiner extends-Anweisung? @Albertus007: Du könntest in deinem Template im Ordner frontend/_public/src/less/ eine Datei “all.less” anlegen (sofern noch nicht vorhanden) und dort folgendes rein schreiben: .border-radius() { .reset-border-radius(); } Achtung: Dadurch werden ALLE border-radius Anweisungen die den Standard von 3px benutzen (sprich in less das mixin .border-radius ohne Parameter aufrufen) zusätzlich durch ein border-raidus: 0; ergänzt. Alle Elemente die einen Parameter übergeben (einen anderen border-radius als 3px haben) sind davon nicht betroffen. Ich habe das nicht ausführlich getestet, kann sein, dass du dadurch zu viele border-radius entfernst bzw überschreibst. Edit: Wenn du zusätzlich noch das hier dazu schreibst werden auch alle anderen border-radius Anweisungen auf die gleiche Weise überschrieben: .border-radius(@value: 0) { .reset-border-radius(); } .border-radius-multi(@leftTop: 0, @rightTop:0, @rightBottom: 0, @leftBottom: 0) { .reset-border-radius(); } Dann sind aber soweit ich bisher gesehen habe wirklich alle Elemente eckig. Auch Ladeicons, Badges und so.

3 „Gefällt mir“

@t2oh4e Ja das hatte ich vergessen und hatte es bereits behoben. Da ich von SASS komme, kenne ich mich noch nicht perfekt in Less aus, aber deine Lösung scheint schlüssug. Er wollte eben wirklich alle border-radius entfernen.

@t2oh4e schrieb:

@kayyy: Fehlt da nicht ein parent: in deiner extends-Anweisung?

@Albertus007: Du könntest in deinem Template im Ordner frontend/_public/src/less/ eine Datei „all.less“ anlegen (sofern noch nicht vorhanden) und dort folgendes rein schreiben:

.border-radius() { .reset-border-radius(); }

Achtung: Dadurch werden ALLE border-radius Anweisungen die den Standard von 3px benutzen (sprich in less das mixin .border-radius ohne Parameter aufrufen) zusätzlich durch ein border-raidus: 0; ergänzt. Alle Elemente die einen Parameter übergeben (einen anderen border-radius als 3px haben) sind davon nicht betroffen. Ich habe das nicht ausführlich getestet, kann sein, dass du dadurch zu viele border-radius entfernst bzw überschreibst.

Edit: Wenn du zusätzlich noch das hier dazu schreibst werden auch alle anderen border-radius Anweisungen auf die gleiche Weise überschrieben:

.border-radius(@value: 0) { .reset-border-radius(); } .border-radius-multi(@leftBottom: 0) { .reset-border-radius(); }

Dann sind aber soweit ich bisher gesehen habe wirklich alle Elemente eckig. Auch Ladeicons, Badges und so.

sehr guter Tipp und hat mir viel zeit gespart. Nun die Frage ob die Anweisung „.reset“ adaptierbar ist für andere Anweisungen und wenn ja gibts da eine dokumentation dazu? Kann man das auf standard styles anwenden. Z.B. ùm komplett alle borders zu entfernen oder alles was weiß ist schwarz zu machen? Formularfelder zu vereinheitlichen usw. das wäre super. Das thema less ist mir total neu… momentan schreibe ich meine eigene style.css und muss daher nicht ständig kompilen. 

Gruß Ron

 

sehr guter Tipp und hat mir viel zeit gespart. Nun die Frage ob die Anweisung „.reset“ adaptierbar ist für andere Anweisungen und wenn ja gibts da eine dokumentation dazu? Kann man das auf standard styles anwenden. Z.B. ùm komplett alle borders zu entfernen oder alles was weiß ist schwarz zu machen? Formularfelder zu vereinheitlichen usw. das wäre super. Das thema less ist mir total neu… momentan schreibe ich meine eigene style.css und muss daher nicht ständig kompilen. 

Gruß Ron

Nein, reset ist nicht universell für alle Less-Definitionen adaptierbar. reset-border-radius ist ein Mixin, das Showare erstellt hat. Es gibt ein analog funktionierendes Mixin  z. B. auch für box-shadow. Alle mixins befinden sich in _public/src/less/_mixin, falls dort jeweils ein reset-Mixin vorhanden ist, kann man das analog verwenden.  Falls dies nicht vorhanden ist, kann man anstatt von z. B. reset-border-radius (); einfach die gewünschte CSS-Eigenschaft schreiben.  

Die allgemeine Dokumentation zur Syntax und den Anwendungsmöglichkeiten von Mixins ist auf der Website des Less-Projekts einsehbar:  Features In-Depth | Less.js