HTML Klötze jeweils unterschiedlich darstellen

[B.E.A.]

Ihr Lieben,

ich möchte gerne einzelne 5 HTML Klötze (nennen wir sie Testklotz-1, Testklotz-2 etc.) und ihren jeweiligen Titel farblich anders bzw. mit einem Hintergrundbild darstellen. Natürlich habe ich im Forum gesucht und vielleicht auch das Nötige dafür gefunden. http://board.s9y.org/viewtopic.php?p=52392#52392

Leider habe ich noch nie so einen Code umgewandelt und würde mich freuen, wenn ihr mir das (vielleicht farblich verändert) zeigen würdet. Mein Original Code der sidebar.tpl

Code: Select all

{if $is_raw_mode}
<div id="serendipity{$pluginside}SideBar">
{/if}
{foreach from=$plugindata item=item}
   {if $item.class == "serendipity_quicksearch_plugin" and $template_option.sitenav_quicksearch == 'true' and ($template_option.sitenavpos == 'above' or $template_option.sitenavpos == 'below')}
<!-- do nothing thereby supressing quicksearch in the sidebar when enabled in  -->
<!-- navigation menu bar and ONLY when navigation bar is above or below header -->
   {else}
      <div class="serendipitySideBarItem container_{$item.class}">
         {if $item.title != ""}
            <h3 class="serendipitySideBarTitle {$item.class}">{$item.title}</h3>
         {else}
            <div class="serendipitySideBarTitleEmpty"></div>
         {/if}
         <div class="serendipitySideBarContent">{$item.content}</div>
         <div class="serendipitySideBarFooter"></div>
      </div>
   {/if}
{/foreach}
{if $is_raw_mode}
</div>
{/if}

[/code]

Wenn ich den Code verändert habe, sollte ich sicher noch in der CSS etwas einfügen. Kann mir das bitte auch noch einer sagen.

Euch einen schönen Sonntag.
Liebe Grüße Bea

[garvinhicking]

Hi!

Du änderst:

Code: Select all

      <div class="serendipitySideBarItem container_{$item.class}">

in

Code: Select all

      <div class="serendipitySideBarItem container_{$item.class}" id="{$item.class}_{$item.title|@makeFilename}">

(also genauso wie von YellowLED in dem Posting beschrieben).

Gesetzt den Fall die Überschrift von Testklotz 1 ist "Testklotz 1" dann hättest du jetzt eine HTML ID "serendipity_html_nugget_Testklotz-1" (glaube ich).

D.h. du kannst dann im CSS folgendes nutzen:

Code: Select all

#serendipity_html_nugget_Testklotz-1 {
background-color: red;
}

Grüße,
Garvin

[B.E.A.]

Hallo Garvin,

danke für die prompte Antwort. Noch tut es das nicht, was ich möchte. Die TPL habe ich so verändert wie du es geschrieben hast. Nicht mehr und nicht weniger. Dann habe ich in der CSS vom Bulletproff meine eigene CSS verändert so wie du das auch geschrieben hast. Doch ich sehe keine rote Farbe

Und wo finde ich die HTML ID "serendipity_html_nugget_Testklotz-1" von der du geschrieben hast. Oder habe ich das falsche CSS verändert?

Was habe ich falsch gemacht?

Grüße Bea

[garvinhicking]

Hi!

Hast du denn mal in den HTML-Quelltext geschaut, ob dort die ins .tpl geschriebene <div> ID dort in dem seitenleistenbereich auftaucht?

Um welche URL geht es?

Grüße,
Garvin

[B.E.A.]

Hätte ich in der tpl auch noch den Namen des HTML Klotzes (in diesem Fall "Bitte") angeben müssen? Dann müsste ich das doch mehrmals machen, oder verstehe ich das jetzt falsch?

TPL sieht jetzt so aus.

Code: Select all

{if $is_raw_mode}
<div id="serendipity{$pluginside}SideBar">
{/if}
{foreach from=$plugindata item=item}
   {if $item.class == "serendipity_quicksearch_plugin" and $template_option.sitenav_quicksearch == 'true' and ($template_option.sitenavpos == 'above' or $template_option.sitenavpos == 'below')}
<!-- do nothing thereby supressing quicksearch in the sidebar when enabled in  -->
<!-- navigation menu bar and ONLY when navigation bar is above or below header -->
   {else}
  <div class="serendipitySideBarItem container_{$item.class}" id="{$item.class}_{$item.title|@makeFilename}"> 
         {if $item.title != ""}
            <h3 class="serendipitySideBarTitle {$item.class}">{$item.title}</h3>
         {else}
            <div class="serendipitySideBarTitleEmpty"></div>
         {/if}
         <div class="serendipitySideBarContent">{$item.content}</div>
         <div class="serendipitySideBarFooter"></div>
      </div>
   {/if}
{/foreach}
{if $is_raw_mode}
</div>
{/if}

Liebe Grüße Bea

[garvinhicking]

Hi!

Wenn du in den Quelltext deines HTML guckst siehst du dass es Divs mit den IDs wie folgt gibt:

serendipity_html_nugget_plugin_Einmal
serendipity_html_nugget_plugin_Anders
serendipity_syndication_plugin_Blog-abonnieren

die kannst du alle separat stylen, .z.b

Code: Select all

#serendipity_html_nugget_plugin_Einmal,
#serendipity_syndication_plugin_Blog-abonnieren {
color: red;
font-size: 5em;
}

Grüße,
Garvin

[B.E.A.]

Danke Garvin für die Erklärung. Habe jetzt im CSS die Klötze angelegt. Seltsamerweise nimmt er den Befehl für die Schriftfarbe und setzt das um, alles andere aber nicht. Gibt es da noch einen Hierarchie Konflikt? Ich versteh das jetzt echt nicht.

So sieht es aus

Code: Select all

#serendipity_html_nugget_plugin_Bitte{
	color: #AB180D;
	background-color: #D01001;
	background-image: url(http://www.bitte-einmal-anders.de/online/uploads/layout/logo/001-hg-o.jpg); 
} 

LG Bea

[yellowled]

Seltsamerweise nimmt er den Befehl für die Schriftfarbe und setzt das um, alles andere aber nicht. Gibt es da noch einen Hierarchie Konflikt?

Firebug zufolge nicht. Versuch mal,

Code: Select all

#serendipity_html_nugget_plugin_Bitte{
	color: #AB180D;
	background-color: #D01001;
	background-image: url(http://www.bitte-einmal-anders.de/online/uploads/layout/logo/001-hg-o.jpg); 
}

durch

Code: Select all

#serendipity_html_nugget_plugin_Bitte{
        background: #d01001 url(http://www.bitte-einmal-anders.de/online/uploads/layout/logo/001-hg-o.jpg) top left;
	color: #AB180D;
}

zu ersetzen.

YL

[yellowled]

Vergiß es. Das Problem ist denkbar einfach: Den Containern innerhalb des HTML-Klotzes sind ebenfalls background-colors zu gewiesen:

Code: Select all

.serendipitySideBarTitle {
    background-color:#FFFFFF;
    [...]
}
.serendipitySideBarContent {
    background-color:#F2F0F0;
    [...]
}

Da diese den Container #serendipity_html_nugget_plugin_Bitte vollständig ausfüllen, werden die entsprechenden Anweisungen für diesen zwar theoretisch korrekt angewendet, aber von diesen in dem Container sitzenden Containern überlagert.

YL

[B.E.A.]

Also ich seh im Firefox und im IE nichts von Hintergrundfarbe oder Bild.
Wie kommt es das du das im Firbug siehst?

Liebe Grüße Bea

[B.E.A.]

Wir haben wohl fast zeitgleich geschrieben )

Aber was heißt das nun? Lässt sich das irgendwie lösen??
Könnte man 3 Stück separat ansprechen?

LG Bea

[yellowled]

Aber was heißt das nun? Lässt sich das irgendwie lösen??

Natürlich. Die Frage ist: Wie soll es denn eigentlich aussehen? Hintergrundbild für den HTML-Klotz, aber kein Hintergrundbild für dessen Überschrift- und Inhaltscontainer, oder wie?

Könnte man 3 Stück separat ansprechen?

Ja, natürlich. Dafür hast Du ja ids zugewiesen. Du kannst sogar die Überschriften- und Inhaltscontainer jeweils seperat ansprechen.

Die Code-Struktur ist so: In einem div-Container sitzen die Überschrift und ein weiterer div-Container, der der eigentlichen Inhalt des HTML-Klotzes enthält. Dazu kommt noch ein inhaltsleeres div, womit man den HTML-Klotz dann in Kopf (Überschrift), Inhalt und Fuß (leeres div) unterteilen könnte.

YL

[B.E.A.]

Guten Morgen,

Die Frage ist: Wie soll es denn eigentlich aussehen?

Die Überschrift soll eine Hintergrund-Grafik bekommen und der HTML Klotz soll ein Hintergrundbild enthalten. Ich habe mal einen Screenshort gemacht.



Danke für die Hilfe!
Bea

[yellowled]

Die Überschrift soll eine Hintergrund-Grafik bekommen und der HTML Klotz soll ein Hintergrundbild enthalten. Ich habe mal einen Screenshort gemacht.

Das sieht mir eher so aus, als solle a) die Überschrift eines HTML-Klotzes ein Hintergrundbild erhalten und b) der Inhalt eines HTML-Klotzes ein Hintergrundbild erhalten, aber c) der HTML-Klotz selbst (Container) kein Hintergrundbild erhalten.

(Im Übrigen solltest Du für die eigentlichen Inhalt, die ja auch Grafiken sind, passende alt-Texte einbauen oder Dich ggf. sogar mit Simple Image Replacement befassen, aber das ist eine andere Baustelle.)

Ich nehme mal als Beispiel den HTML-Klotz "Bitte". Zunächst einmal kannst Du dem Klotz selber Hintergrund- und Vordergrundfarbe zuweisen:

Code: Select all

#serendipity_html_nugget_plugin_Bitte {
    background: #fff; /* Oder was halt passt */
    color: #000; /* Oder was halt passt */
    /* ... weitere Styles ... */
}

So. Überschrift:

Code: Select all

#serendipity_html_nugget_plugin_Bitte .serendipitySideBarTitle {
    background: #fff url(/pfad/zum/bild.jpg) top left no-repeat;
    /* ggf. Farbe und Positionierung des sowie Pfad zum Bild anpassen */
    color: #f00; /* Oder was halt passt */
}

Analog für den Inhalt:

Code: Select all

#serendipity_html_nugget_plugin_Bitte .serendipitySideBarContent {
    background: ...;
    color: ...;
}

Für die anderen HTML-Klötze ersetzt Du jeweils das "Bitte" mit derem individuellem Titel.

YL

[B.E.A.]

Herzlichen Dank Matthias

Liebe Grüße Bea