Designänderungen nur über css-Dateien möglich?

[Matze]

Moin,

ich ändere auf meiner Webseite in unregelmäßigen Abständen den Header. Genauer gesagt betrifft es die Hintergrundgrafik und die Schrift, die darüber liegt. Das Problem ist, dass ich die Schrift nicht immer an der gleichen Position anzeigen lassen kann, sondern je nach Hintergrundbild unterschiedlich platziert werden muss. Grund ist der, dass ich keine "wichtigen" Bildausschnitte überdecken möchte. Um einen guten Kontrast zu haben, darf ich die Schriftfarbe natürlich auch nicht gleich lassen. Momentan löse ich das über verschiedene css-Dateien, doch das ist irgendwie nicht so das Wahre. Der neue Header lässt sich zwar relativ flott hinzufügen, aber diese ganzen css-Dateien stören, da es immer mehr werden.

Die css-Dateien sind so aufgebaut:

css_header_1.css:

Code:

.header {
   height: 200px;
   padding-bottom: 0px;
   background-image: url('images/header_top_1.jpg');
}

h1.sitetitle {
   padding-left: 30px;
   padding-top: 57px;
}

h1.sitetitle a {
   color: #000000;
}

.site_subtitle {
   padding-left: 30px;
   padding-top: 8px;
   padding-bottom: 68px;
   color: #000000;
}

Geht das irgendwie eleganter?

[Angel4585]

ich würd die schrift jetz in ein div packen und das per position:absolute positionieren

[alcaeus]

Zitat:

Zitat von Angel4585

ich würd die schrift jetz in ein div packen und das per position:absolute positionieren

Gnarf....und wo liegt da der Unterschied? Die CSS-Datei brauchst du immer noch :wall:

@Matze: du koenntest hoechstens die Elemente im HTML-Code stylen, aber ansonsten hast du keine andere Wahl. Also entweder du setzt den CSS-Code in die style-Property des jeweiligen Tags, oder du lieferst einen Style-Block im head-Bereich fuer den jeweiligen Header mit. Nachdem du eine Template-Engine verwendest, duerfte das kein Problem sein.

Greetz
alcaeus

[Matze]

Zitat:

Zitat von alcaeus

@Matze: du koenntest hoechstens die Elemente im HTML-Code stylen, aber ansonsten hast du keine andere Wahl.

Wenn ich dich richtig verstanden habe, benötge ich dann aber verschiedene Template-Dateien, oder?

Meine Header-Datei sieht momentan so aus:

Code:

<div class="header">
   <h1 class="sitetitle">[url="{U_HOME}"]{SITENAME}[/url]</h1>
   <h4 class="site_subtitle">{L_STUFF_SITE_SUBTITLE}</h4>
   <div class="navigation">
      <ul>
         
         <li class="btn {navi_links.BTN_CLASS}">
            [url="{navi_links.BTN_LINK}"]{navi_links.BTN_TITLE}[/url]
         
         
         <li class="float_none">
      [/list]         
      <div class="clear_both"></div>
   </div>
</div>

[S2B]

Wenn du es ganz einfach willst (ok, zuerst mal komplex und dann einfach *g*), könntest du die Variablen, die bei jedem Theme verändert werden müssen, in die Datenbank werfen und dann bei jedem neuen Theme einfach einen neuen Datensatz erstellen.

[Matze]

Also das finde ich auch nicht unbedingt einfacher. :stupid:

[Angel4585]

warum machst nicht einfach den Text aufs Banner drauf, also nicht als Text sondern direkt ins Bild?

[Matze]

Zitat:

Zitat von Angel4585

warum machst nicht einfach den Text aufs Banner drauf, also nicht als Text sondern direkt ins Bild?

Dann benötige ich pro auszuwählender Sprache ein eigenes Bild und nachträglich kann ich den Text dann auch nicht mehr ohne weiteres ändern.

[Phoenix]

Also Andy hat die Lösung eigentlich schon genannt.

CSS muss nicht zwingend in Dateien, sondern kann auch in der HTML-Seite selber ausgeliefert werden.
Dabei überschreiben die Angaben in der HTML-Seite die Angaben aus dem CSS-File, so sie denn die gleichen Attribute setzen.

Ergo: Die Image-URL kommt ja wohl aus deinem CMS.
Du packst in Dein Seiten-Template noch die CSS-Angaben für die Position und Farbe des Headers mit rein und nimmst das aus dem CSS-File raus.

Dann lässt Du Dein CMS neben der Image-URL auch noch die Position und Farbe in den CSS-Angaben innerhalb Deiner HTML-Seite ersetzen und that's it.

[Matze]

Hi Sebastian,

irgendwas scheine ich nicht ganz zu verstehen. ich habe es nun so aufgefasst, dass ich direkt in der Template-Datei den Style-Code mitgeben (style="..."), aber irgendwoher muss ich diesen ja nehmen. Ich habe es zwar nicht explizit gesagt, aber ich dachte, es wäre klar: Ich möchte es so haben, dass ich auch jederzeit wieder ein altes Headerbild einstellen kann. Ich möchte also nichts ersetzen müssen, was css anbelangt.

[Phoenix]

Hrm?

Wenn Du nichts am Style Deiner Seite ersetzen willst, kannst Du auch die Image-URL des Headerbildes nicht ersetzen.

Ob Du nun ein Attribut (Image-URL), oder vier Attribute (Image-Url, xPos Text, yPos Text, Farbe Text) in Deinem Template ersetzen lässt sieht für mich ehrlich gesagt nach Makulatur aus.

Zitat:

Zitat von Matze

ich habe es nun so aufgefasst, dass ich direkt in der Template-Datei den Style-Code mitgeben (style="..."), aber irgendwoher muss ich diesen ja nehmen.

Erm.. und woher Nimmst Du die Image-url? Ich würde sagen, Du nimmst die restlichen Informationen aus der gleichen Quelle.

[Matze]

Bisher habe ich das so gemacht, dass ich das Bild und den zugehörigen Stylesheet hochgeladen und in der Konfigurationsdatei die neue css-Datei zugewiesen habe. Ich habe noch nicht ganz verstanden, wie du das meinst, was die Umsetzung betrifft. Wo soll ich die angeben einstellen? In der Konfig-Datei?

[Phoenix]

Wenn Du nicht sagst was Du für ein CMS benutzt kann ich Dir auch nicht sagen was für Deines der einfachste Weg wäre.

Eine andere Idee wäre es, nur die 4 Angaben in einer separaten Stylesheet-Datei zu machen und diese dann im Haupt-CSS zu deklarieren. Das bewahrt Dich zwar nicht vor zig unterschiedlichen Style-Dateien (zu jedem Bild eine), aber um dann ein Bild gegen ein altes auszutauschen reicht es dann, entweder eine der Dateien umzubennen oder aber in der Haupt-CSS-Datei den Include umzubiegen.

Edit: Ah, eine Eigenkreation.
Na, dann ersetz die CSS-Angaben doch durch Variablen im Template und erstell eine eigene PHP-Include-Datei für Header mit einem Array eben dieser Daten.

Neuer Header:
Bild hochladen, Array-Datei um die Angaben für eben dieses Bild erweitern, Array-index in der Konfigdatei auf den Wert des anzuzeigenden Bildes ändern.

[Matze]

Hm, das mit dem Array ist vielleicht gar nicht mal so übel. Dann müsste ich in der Konfig-Datei den Array-Index angeben. Nur ob das wirklich besser ist, ist die Frage, denn im Laufe der Zeit wird die PHP-Datei halt immer größer, auf der anderen Seite fallen die vielen css-Dateien weg.
Das muss ich mir nochmals durch den Kopf gehen lassen, danke.

[Phoenix]

Na, irgendwo wirst Du diese Informationen ablegen müssen wenn Du sie mehr oder weniger dynamisch und auch später wieder verfügbar haben willst.

Andere Idee wäre: Ab in die Datenbank damit.
Tabelle Headerinformationen, da die Werte rein die sonst aus dem Array kämen, und irgendwo wirst Du sicher ne Konfig-Tabelle haben wo Du dann reinschreibst welcher Header gerade aktuell ist. Hat noch den Vorteil dass Du mit einem kleinen Admin-Interface sogar vom Rechner aus das Bild hochladen kannst und nicht mehr in irgendwelchen Dateien rumpfriemeln musst.

[Matze]

Das ins Adminpanel zu packen wäre ein Kinderspiel. Doch per FTP geht das so fix, das wäre also kein Problem. Aber du hast recht, ich könnte es in die Datenbank packen und cachen, doch das habe ich momentan nicht vor, da ich das über's ACP nicht ändern können muss.