Hintergrundbild in static pages-sidebar einbauen?

[SyN0]

ist es möglich, eine hintergrundgrafik in das sidebar-menü für static pages einzubauen?

der plan ist, einen holzwegweiser da hinzustellen und die static pages-links sind dann die aufschrift.
ich weiss jetzt nur nicht, wie ich das in welche .css einbau.

Code: Select all

background: url({TEMPLATE_PATH}img/3.png) no-repeat;

hätt ich jetzt als anfang schonmal. bzw. ich vermute, daß dies genauso gehandhabt wird wie in der style.css/user.css

[yellowled]

ich weiss jetzt nur nicht, wie ich das in welche .css einbau.

Code: Select all

background: url({TEMPLATE_PATH}img/3.png) no-repeat;

hätt ich jetzt als anfang schonmal. bzw. ich vermute, daß dies genauso gehandhabt wird wie in der style.css/user.css

Ach, wieviel einfacher das mit einem Link zum betreffenden Blog wäre …

Grundsätzlich: Ja. Und falls Du ein Template mit user.css verwendest, willst Du das in die user.css packen, damit es updatesicher ist.

Problem: Die Variable {TEMPLATE_PATH} funktioniert nur in der style.css. Also musst Du in der user.css den Pfad zur Grafik relativ zum Stylesheet (oder absolut) angeben.

Code: Select all

background: url("img/3.png") no-repeat;

sollte tun. Und dann eben die id oder Klasse des Sidebar-Menüs für statische Seiten, das ich gerade nicht im Kopf habe, als selektor. Wie gesagt: Link zum Blog wäre hilfreich.

YL

[SyN0]

der link ist http://darksyno.de/holz

oben links sieht man die static pages-menüsidebar

das mit der user.css werd ich machen, wenn die richtige seite gebaut wird. das hier ist erstmal nur eine testseite, damits dann später auf einen ruck online gehen kann auf ner anderen domain.
den absoluten pfad probier ich nachher direkt mal.

[yellowled]

Du sollstest zudem dem .staticpage_sbList noch als min-height die Größe der Grafik in Pixeln mitgeben.

Solltest Du vorhaben, die Menüpunkte so auszurichten, dass sie exakt auf den einzelnen Pfeilen sitzen: Das dürfte eher utopisch sein. Das fliegt Dir bei jeder Schriftvergrößerung um die Ohren.

YL

[SyN0]

ja das merk ich grad, daß das nicht so funktioniert. da muss ich die grafik optimieren, da ich nur die zeilengröße verändern kann.

ich dank dir erstmal für die hilfe. so komm ich direkt weiter.

[SyN0]

Du sollstest zudem dem .staticpage_sbList noch als min-height die Größe der Grafik in Pixeln mitgeben.

YL

leider scheint wohl kein standard für die variablen zu existieren in s9y. im bulletproof default_style.css existiert nur eine variable .serendipitySideBarContent für alle sidebar-objekte. folglich tauchen da überall die selben grafiken auf.

zu bewundern auf: http://zaubergarten-leipzig.de/cms/ ^^

dabei hab ich das standard-template genommen wegen der zusätzlichen backend-bedienung und weil das quermenü mit drin ist. bin halt noch kein css-profi ^^

[yellowled]

leider scheint wohl kein standard für die variablen zu existieren in s9y. im bulletproof default_style.css existiert nur eine variable .serendipitySideBarContent für alle sidebar-objekte. folglich tauchen da überall die selben grafiken auf.

Du darfst natürlich nicht nur in die style.css gucken – es mag ja Klassen im Markup geben, die vom bestehenden CSS ganz einfach nicht genutzt werden.

Grundsätzlich gibt es schon standardisierte Klassen für Sidebar-Plugins (container_<NAME_DES_PLUGINS>), aber wenn ein Template diese nicht benötigt, kann es schon mal sein, dass sie gar nicht erst ausgegeben werden, um Markup einzusparen.

YL

[SyN0]

hab schon in die dazugehörige .tpl geschaut (wie bei dem anderen template auch). aber da stand halt nicht viel. hmmmm, da bleibt mir wohl erstmal nix anderes übrig, als ein anderes template zu probieren, wo das irgendwie differenzierter ist. sonst komm ich mit meinen begrenzten kenntnissen erstmal nicht zurecht. aber man lernt ja immer dazu

[Timbalu]

Du musst dafür in den Quelltext schauen:

Code: Select all

.container_serendipity_plugin_staticpage .serendipitySideBarContent { wegweiser }

[SyN0]

ah siehste, ich wusste grad nich wie ichs reinschreibe. zumindest war die denke grad in die ähnliche richtung ^^ funktioniert sogar! \o/

[yellowled]

Moderne Webbrowser (lies: Chrome/Chromium, Firefox, Safari, Opera, aber eher nicht IE) haben mittlerweile alle sogenannte „Entwickler-Tools“ an Bord, die man nutzen kann, um das ausgegebene Markup (aber z.B. auch das CSS oder Javascript) einer Webseite zu analysieren. Sie sind alle ähnlich leistungsfähig, unterscheiden sich aber natürlich in der genauen Bedienung ein wenig.

Ich erklär's mal am Beispiel von Chrome:

1. Webseite öffnen.
2. Rechtsklick auf das, was man analysieren will, in der Webseite; in Deinem Beispiel: der Kasten „Wegweiser“ in der Seitenleiste, und im Kontextmenü „Element untersuchen“ wählen.
3. Es öffnen sich die Developer-Tools, das ausgewählte Element ist bereits vorselektiert – allerdings ist das (bedingt durch die Verschachtelung von HTML-Elementen, speziell Containern) nicht immer exakt, man muss prüfen, ob man das richtige Element ausgewählt hat und ggf. korrigieren.

Das gesuchte Element ist in Deinem Fall: <div class="serendipitySideBarItem container_serendipity_plugin_staticpage">. Die Klasse .serendipitySideBarItem wird allen von Seitenleistenplugins erzeugten Boxen in der Sidebar zugewiesen, die zweite Klasse ist individuell (kann aber auch mehrfach vergeben sein; es gibt Seitenleistenplugin, von denen sich mehrere Instanzen gleichzeitig installieren lassen, z.B. der HTML-Klotz). Das kannst Du nun in der style.css (oder einer anderen CSS-Datei, falls es eine gibt) so verwenden:

Code: Select all

.serendipitySideBarItem {
    /* Styles für ALLE Seitenleistenplugins */
}

.container_serendipity_plugin_staticpage {
    /* Styles NUR für die Liste der statischen Seiten */
}

Bei Namen der Klassen muss Groß-/Kleinschreibung beachtet werden – SideBarItem ist nicht dasselbe wie sidebaritem. Nutzt man sowohl die allgemeine als auch die spezielle Klasse, sollte die allgemeine immer zuerst im Stylesheet auftauchen, damit man Styles der allgemeinen Klasse in den speziellen überschreiben kann. (Man muss keine Styles doppelt vergeben, die Elemente bekommen immer die Styles beider Klassen zugewiesen.)

Und bitte niemals, niemals, niemals sowas schreiben, auch wenn es in alter Dokumentation und alten Stylesheets immer noch zu finden ist:

Code: Select all

div.serendipitySideBarItem {
…
}

Damit werden die Styles nur auf Elemente mit der Klasse .serendipitySideBarItem angewandt, die auch ein div sind. Das ist unnötig, nicht „vorwärtskompatibel“ und vor allem sehr schwer zu überschreiben, weil es die sogenannte „Spezifität“ des Selektors (unnötig) erhöht. Kurz gesagt würde folgendes:

Code: Select all

div.serendipitySidebarItem {
    background: black;
}

.container_serendipity_plugin_staticpage {
    background: white;
}

dazu führen, dass der Hintergrund der Box schwarz bleibt, obwohl er von der speziellen Klasse eigentlich überschrieben werden soll – aber der erste Selektor hat durch den zugefügten Elementselektor (div) mehr Gewicht.

YL

[SyN0]

ok ich werde es beachten und gleich mal deinen post abspeichern ) dankeschön!