Suche

[breakdancer]

Hi mal wieder,

auf der Home von Pragmamx.org sind die Blocküberschriften mit einem schönen, grünen Balken hinterlegt.

Sowas hätte ich natürlich auch gerne, wenn auch in einer anderen Farbe.

Wie habt ihr das denn gemacht ? Ich komm zwar über den Quelltext an die entsprechende Passage ran, aber in welcher Datei muss ich dafür denn nun was genau ändern ? Und was evtl. in der .css ?

Liebe Grüße

Markus

[FrankySZ]

Hi Markus

der schnellste Weg wäre imho das editieren der theme.html ...

suche nach {BLOCK_TITLE} und gebe dem dortigen Tabellenfeld eine Hintergrundgrafik

zB so:

Code Auswählen Erweitern


<td class="boxtitle" style="background-image: url(images/bild.gif); background-repeat: no-repeat;">
{BLOCK_TITLE}
</td>


natürlich kannst du das auch gleich in der style.css machen ...

[breakdancer]

Hi Franky,

das funkioniert bei leider nicht... Den Blocktitle gibt es ja gleich mehrmals, hab den entsprechenden Abschnitt jedesmal abgeändert, das wird irgendwie nix...

Wenn ich jetzt die style.css abändere muss ich doch einfach den block_title dort definieren... Würde heissen:

Code Auswählen Erweitern

#BLOCK_TITLE {
color: #3F89C3;
font-size: 16px;
font-weight: bold;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
letter-spacing: 3px;
text-decoration: none;
background-color: #FFC05F;
background-image: url(http://www.kirmes-und-volksfest.de/images/iupload/pfadzumbild.jpg);
background-repeat: no-repeat;
}


Hm, besser ich lasse die Textformatierung weg, denn sonst wird die von der theme.html wieder mal überschrieben und die passt ja ganz gut...

Nur funktionieren tut das nicht, denn an den Titeln ändert sich nichts. Ich schätze mal, ich definiere BLOCK_TITLE da falsch ?

Lieben Gruss

Markus

[JoergK]

Markus 

<td class="boxtitle" style="background-image: url(images/bild.gif); background-repeat: no-repeat;">

Wennste in die style.css guckst, findeste dort die Deklaration der CSS-Klasse boxtitle

.boxtitle {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 2px;
   color: #999966;
}

Diese erweiterst Du einfach um den/die gewünschten Eigenschaften. 

.boxtitle {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #999966;
    background-image: url(http://www.kirmes-und-volksfest.de/images/iupload/pfadzumbild.jpg);
    background-repeat: no-repeat;
}

Wenn Du die bestehende CSS-Klasse nicht ändern möchtest, da sie ja noch, je nach Modul, anderweitig zur Anwendung kommen kann, dann kannste auch einfach ne neue dazuschreiben, z.B.

.my_boxtitle {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #999966;
    background-image: url(http://www.kirmes-und-volksfest.de/images/iupload/pfadzumbild.jpg);
    background-repeat: no-repeat;
}

Entsprechend muß Du natürlich auch den Klassennamen in der theme.html ändern:

<td class="my_boxtitle">

[breakdancer]

Hi Franky,

und genau das hatte ich vorhin auch schon ausprobiert, das passt aber nicht.

Was da definiert wird in der theme.html ist ja der block_title, nicht der boxtitle... Ich bin da vorhin auch in meinem Post total durcheinander gekommen, gottseidank konnte ich es noch editieren...

Wenn ich die von Dir angegebenen Änderungen durchführe werden die Kategorieüberschriften vom Sommaire-Block mit dem Bild hinterlegt, sonst aber leider nix...

Liebe Grüße

Markus

[Andi]

Hi

guggst du da:
http://www.kirmes-und-volksfest.de/themes/mx-rainbow/theme.html
Das ist dein linker Block im Theme:

Code Auswählen Erweitern

            <!-- START block_left -->
            <table border="0" cellpadding="2" cellspacing="2" width="150">
              <tbody><tr>
                <td style="font-size: 14px; font-weight: bold; letter-spacing: 2px;">{BLOCK_TITLE}</td>
              </tr>
              <tr>
                <td class="boxcontent" valign="top">{BLOCK_CONTENT}</td>

              </tr>
            </tbody></table>
            <!-- END block_left -->

und diese Zeile ist darin die Blocküberschrift:

Code Auswählen Erweitern

<td style="font-size: 14px; font-weight: bold; letter-spacing: 2px;">{BLOCK_TITLE}</td>

Es bleibt dir überlassen, ob du einfach den vorhandenen style Parameter des tabellentags erweiterst,

Code Auswählen Erweitern

<td style="font-size: 14px; font-weight: bold; letter-spacing: 2px; background-image: url(url-zum-bild);">{BLOCK_TITLE}</td>

oder einfach eine Klasse hinzufügst, z.B. so:

Code Auswählen Erweitern

<td style="font-size: 14px; font-weight: bold; letter-spacing: 2px;" class="myHuddelDiKnuddel">{BLOCK_TITLE}</td>

[breakdancer]

Hi Andi, 

mein Gott, das war trotzdem ganz schön ne Frickelei - und vor allem erstmal ne Grafik zu finden, die erstens randlos und zweitens passend zum Seitenlayout ist... Aber es hat geklappt.

Was mir gar nicht gefällt: Ich würde schon ganz gerne die Grafik in einer festen Höhe von z. B. 22 px haben, das lässt sich aber wohl nicht definieren. Jedenfalls ist die einzige Möglichkeit, mit der ich derzeit die Grafikhöhe ändern kann, die Schrifthöhe hochzusetzen, dann wächst die Hintergrundgrafik nämlich mit... Das ist eher etwas... hm... suboptimal...Aber so viel ich weiss kann ich da die Grafik HTML-mäßig nicht formatieren. Schade.

Aber gut, es hat geklappt, jetzt muss ich halt mal schauen, wie ich das weiter hinfrickel... 

Danke ! *Schallplatteabspiel*

Liebe Grüße

Markus

[FrankySZ]

Hi Markus

festen Höhe von z. B. 22 px

dann verstehe ich nicht wirklich warum du eine Grafik mit 130x30 verwendest 

verkleinere dir die Grafik auf die gewünschte Höhe mit deinem Lieblingsgrafikprogramm auf 22px

desweiteren hast du in deinem code nun stehen:

Code Auswählen Erweitern

w/images/blocktitlehintergrund.jpg); background-repeat: repeat;">

das repeat bewirkt hierbei dass die Grafik in alle Richtungen wiederholt wird ... sobald der text mehr Platz braucht ...

da du ja, nehm ich mal an, nur eine Wiederholung in der Breite haben möchtest wäre der richtige Eintrag:

Code Auswählen Erweitern

background-repeat: repeat-x;

und da du die Grafik ja auch in den Centerbloecken verwendest, würde ich dir empfehlen die jetzige Grafik zunächst in die korrekte Höhe zu ändern und dann schneidest du dir aus dieser eine 2px x 22px  (besser noch 1x22) Grafik aus die du dann anstelle der jetzigen nimmst und in der styleanweisung repeat-x verwendest ...

dann sollte eigentlich alles passen

[breakdancer]

Hi Franky,

sorry, das war mein Fehler, natürlich soll die Grafik nicht in 22px dastehen (das kam noch von einer früheren Grafik, die eingefügt war) sondern in voller Höhe...  Ich werde alt...

Also von der Höhe her kann ich es dann doch lassen, nur sie wird halt nicht in 30 px angezeigt sondern lediglich in der Höhe, in der die Schriftgröße derzeit ist + ein paar px...

Das "repeat-repeat" änder ich grad noch ab, danke schön für den Hinweis, es ist mir durchgerutscht.

Und welchen Unterschied macht es denn, ob ich eine 130 x 30 er Grafik verwendet, die sich nur 4 oder 5 mal wiederholt oder eben eine 1 x 30er Grafik, die sich dafür z. B. 450 x wiederholt, ausser dass ich ein bisschen Ladezeit spare ?

Liebe Grüße an Dich

Markus

[FrankySZ]

Hi Markus

der Vorteil an den 1px breiten Grafiken ist außer dem von dir erwähnten Grund, dass wenn du mal die Blockbreite änderst du nicht mehr die Grafikbreite ändern musst und sie sofort passt, bzw dein "Blocktitelgrafiken" nicht unterschiedlich breit sind  ...

[breakdancer]

Hi Franky,

klingt logisch, ist es wahrscheinlich auch 

Okay, dann werde ich jetzt die Grafiken austauschen und damit solle es dann gut sein...

Ach ja, wegen der Grafikhöhe... Ich denke mal, dass es so gut ist, wie es jetzt ausschaut, aber wenn mir nochmal jemand den Kniff verraten würde, warum die Grafikhöhe mit der Fonthöhe verknüpft ist und wie man das entkuppeln könnte wäre ich sehr happy.

Ansonsten herzlichen Dank an alle, die sich hier mal wieder verausgabt haben. "schallplatteaufleg"

Grüße

Markus

[FrankySZ]

Hi Markus

füge in der styleanweisung noch das hier,

Code Auswählen Erweitern

height:22px;

natürlich mit deiner gewünschten Höhe, ein ...

[breakdancer]

Jop, passt ! 

Danke schön !

Was bin ich Dir schuldig ? 

Liebe Grüße

Markus

[FrankySZ]

prima

nix ... ist doch immer schön wenn was funktioniert