Buttons verändern

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Post Reply
User avatar
ChH
Forum Members
Forum Members
Posts: 18
Joined: Tue Dec 02, 2008 3:56 pm

Buttons verändern

Post by ChH »

Mahlzeit zusammen,

ich sitz gerade darüber, sämtliche Buttons in einer meiner CMSms-Installation zu verändern. Bisher bin ich relativ zufrieden mit dem Ergebnis:

Code: Select all

hr, input, select, textarea {
        border-color: #e7ab0b;
        border-style: solid;
}
Das tut ja schon einiges. Jetzt hab ich nur noch das Problem, den Buttons einen eigenen Hintergrund zu geben. Scheint zunächst auch nur ein CSS-Problem zu sein, denn eigentlich würde ein

Code: Select all

input.button {
        border-color: #e7ab0b;
        background-color: #fce39f;
        border-style: solid;
}
ja reichen - nur: Wie bring ich den einzelnen Buttons (z.B. Suche) dazu, auf class="button" zu hören? In den Templates werden die Buttons nicht eingetragen, sondern durch Tags generiert. Das heißt für mich: eigentlich wäre eine Quellcode-Änderung nötig, um einem Button beizubringen, anders auszusehen...

Nun dacht ich mir: Irgendwie muss das doch auch anders gehen... Gibts evtl. jemanden, der das schon bewerkstelligt hat? Irgendwie muss es ja gehen, auf dieser Seite hier wurde der Button schließlich ganz ausgetauscht gegen einen Link...
nockenfell
Power Poster
Power Poster
Posts: 751
Joined: Fri Sep 12, 2008 2:34 pm
Location: Schweiz / Switzerland

Re: Buttons verändern

Post by nockenfell »

Du kannst einen Button auch über den CSS Selektor ansteuern:

Code: Select all

input[type="submit"] {
        border-color: #e7ab0b;
        background-color: #fce39f;
        border-style: solid;
}
Allerdings unterstützt der IE dies nicht. Hier könnte man mit etwas jquery eine Class hinzufügen.
[this message is written with 100% recycled bits]
User avatar
ChH
Forum Members
Forum Members
Posts: 18
Joined: Tue Dec 02, 2008 3:56 pm

Re: Buttons verändern

Post by ChH »

Über Selektoren hatte ich auch schon nachgedacht, aber solang sich der IE nicht an W3C hält, brauchts wohl ne andere Lösung.

Weiß jemand, wie das auf cmsmadesimple.org gemacht wurde? Da ist der Search-Button ja eine Grafik, und nicht wie normalerweise ein Button...
mike-r

Re: Buttons verändern

Post by mike-r »

Die Suche ist meines Wissens in CMSMS standardmässig immer via
#search input und
#search #cntnt01searchinput
zu erreichen. Das ist nicht ganz optimal, aber zum Anfassen aller Elemente trotzdem zielführend.

Wenn Du das genau machen möchtest, wie hier auf der Seite, dann bleibt Dir ein Eingriff in den Quellcode nicht erspart, da hier eine Grafik verlinkt ist. Diese Grafik könntest Du auch via CSS als Background verwenden
Aus usability-gründen ist von beiden Vorgehensweisen allerdings dringend abzuraten (skaliert nur in bestimmten Browsern und dort nur bei bestimmten Einstellungen).

Ein gangbarer Weg wäre hier mit border-radius und sich wiederholenden Hintergrundgrafiken zu arbeiten. (IE6 zeigt dann eben eckige Border, was kein Beinbruch ist).
Der Königsweg für alle Browser wäre, ein bisschen in die Trickkiste zu greifen und mit dieser Methode zu arbeiten: http://www.andreas-kalt.de/webdesign/tu ... unde-ecken
cyberman

Re: Buttons verändern

Post by cyberman »

ChH wrote: Wie bring ich den einzelnen Buttons (z.B. Suche) dazu, auf class="button" zu hören? In den Templates werden die Buttons nicht eingetragen, sondern durch Tags generiert.
Ähmm, hast du schon versucht, im Such-Template den -Tags eine Klasse zu verpassen?
User avatar
ChH
Forum Members
Forum Members
Posts: 18
Joined: Tue Dec 02, 2008 3:56 pm

Re: Buttons verändern

Post by ChH »

Versucht schon, da aber über das ACP unter Templates kein Such-Template zu finden ist, ist dieser Versuch mangels Durchführbarkeit gescheitert.

Außerdem geht es ja um ALLE Buttons, das mit der Suche ist ja nur ein Beispiel. FEU z.B. hat ebenfalls unerreichbare Buttons. Das Forum hat dafür keine, sollte aber welche haben... Im Prinzip suche ich also nach einer Methode, an alle jemals auftretenden , und ein class="button" ranzuhängen...
NaN

Re: Buttons verändern

Post by NaN »

Hatte vor einer Weile mal ein Modul angefangen zu programmieren, was genau das machen soll.
Hab's aber leider aus Zeitgründen aufgegeben.
(Könnte man übrigens auch als UDT realisieren)
Mein Idee war im Prinzip folgende: Das CMS sendet ja ständig Ereignisse. So z.B. auch, wenn der komplette Inhalt, den der Browser anzeigen soll, zum Abmarsch an den Browser bereit ist (ContentPostRender). Auf dieses Event sollte ein Script reagieren welches den kompletten Inhalt nach mit Hilfe des Moduls eingestellten Tags durchsuchen sollte und ebenfalls durch das Modul angegebene IDs oder Klassen erweitern sollte.
Da ich nun nicht unbedingt der Beste in Sachen reguläre Ausdrücke bin, bin ich da leider nicht sonderlich weit gekommen.
cyberman

Re: Buttons verändern

Post by cyberman »

ChH wrote: Versucht schon, da aber über das ACP unter Templates kein Such-Template zu finden ist, ist dieser Versuch mangels Durchführbarkeit gescheitert.
??? ::) ???

Administration, Menü "Erweiterungen > Suche", Registerkarte "Such-Template"
cyberman

Re: Buttons verändern

Post by cyberman »

NaN wrote: Mein Idee war im Prinzip folgende: Das CMS sendet ja ständig Ereignisse. So z.B. auch, wenn der komplette Inhalt, den der Browser anzeigen soll, zum Abmarsch an den Browser bereit ist (ContentPostRender). Auf dieses Event sollte ein Script reagieren welches den kompletten Inhalt nach mit Hilfe des Moduls eingestellten Tags durchsuchen sollte und ebenfalls durch das Modul angegebene IDs oder Klassen erweitern sollte.
Die Idee ist nicht schlecht - allerdings würde ich dies eine Ebene "drunter" versuchen ... bei Smarty. Könnte zum Beispiel mit einem Prefilter funktionieren

http://www.smarty.net/manual/de/advance ... ilters.php
NaN

Re: Buttons verändern

Post by NaN »

cyberman wrote: Die Idee ist nicht schlecht - allerdings würde ich dies eine Ebene "drunter" versuchen ... bei Smarty. Könnte zum Beispiel mit einem Prefilter funktionieren
Problem bei Prefilter ist, dass dort noch nicht alle Templates und Modulausgaben verarbeitet wurden.
Aber bei Smarty gibts ja auch eine Postfilter-Funktion :)
User avatar
ChH
Forum Members
Forum Members
Posts: 18
Joined: Tue Dec 02, 2008 3:56 pm

Re: Buttons verändern

Post by ChH »

Ich glaub ich bin zu verwöhnt von Typo 3 oder wBB: Templates gehören meiner Meinung nach zu den Templates, nicht zu den Modulen... kein Wunder, dass ich das nicht gefunden habe.

Bei dem Prefilter bin ich mir nicht so ganz sicher, ob das auch wirklich alle Buttons erschlägt: Es scheint einige Module zu geben, wie z.B. das Forum, die die Buttons irgendwo im Source haben, und per {}-Tag einbinden. Könnt passieren, dass der Prefilter die nicht mitnimmt... Also eher Postfilter, [EDIT] wie NaN schon kurz vor mir schrieb...
cyberman

Re: Buttons verändern

Post by cyberman »

ChH wrote: Ich glaub ich bin zu verwöhnt von Typo 3 oder wBB: Templates gehören meiner Meinung nach zu den Templates, nicht zu den Modulen...
Hmm, naja ... hat beides Vor- und Nachteile, bin aufgrund der Vielzahl der Template manchmal ganz froh, dass es in den Modulen untergebracht ist  - allerdings soll es lt.. Roadmap in der Version 2.0 eine zentralisierte Template-Verwaltung geben.
Also eher Postfilter, [EDIT] wie NaN schon kurz vor mir schrieb...
Oder eben einen Outputfilter  :D

http://www.smarty.net/manual/de/plugins ... ilters.php
Post Reply

Return to “Layout und Design”