Bildschirmfoto 2012-01-11 um 10.14.40

Der InternetBaukasten hat viele verschiedene Designvorlagen und für viele Designvorlagen auch noch unterschiedliche Farbwelten, so dass eigentlich für jeden Geschmack etwas dabei ist.

Wenn man aber eine bestimmte Farbkombination benötigt, kann man die Designs durch spezielle “Tricks” anpassen.
Hierfür sollte man aber wissen, was man tut. Mindestens Grundkenntnisse in HTML und CSS sollten vorhanden sein …

Das Ziel dieses Tutorials ist, die Hintergrundfarbe des Designs “Zeitlose Eleganz” von weiß auf eine andere Farbe zu ändern. Das Design sieht am Anfang so aus:

Design mit weißem Hintergrund

Design mit weißem Hintergrund

Um die Farben zu ändern, muss man zuerst die Elemente der Seite finden, die über CSS eine andere Farbe erhalten sollen. Hierzu kann man sich den Quellcode der Seite ansehen oder z.B. FireBug (http://getfirebug.com/) für den Firefox verwenden. FireBug ist hier meine erste Wahl. Das folgende Video zeigt, wie man vorgehen kann.

Nachdem jetzt die Elemente bekannt sind, braucht man nur noch den Farbwert.
Diese findet man z.B. hier: http://www.mediaevent.de/tutorial/farbcodes.html
Benötigt wird der Wert “Hex RGB”.

Danach muss der CSS-Code geschrieben werden. Zuerst ein Beispielcode:

<style>
#element {
eigenschaft: wert;
}
</style>

Hier folgt der Code, der alle weißen Flächen in dem Design einfärbt.
Da gleich mehrere Elemente geändert werden, kann man diese mit einem Komma getrennt eintragen. Der Wert für die Farbe kann nach belieben ausgetauscht werden.

<style>
#ibk_content_container, #ibk_head_box, #ibk_navi_box ul.ibk_nav_ul, #ibk_navi_box ul.ibk_nav_ul .ibk_li_open > a {
background-color: #112233;
}
</style>

Dieser Code muss jetzt unter “google & Co -> Analytics (asyncon)” eingetragen werden. Der dort eingegebene Code wird dann im <head>-Bereich der Webseite eingefügt und überschreibt die Standardvorgaben des Designs.

Das Ergebnis

Das Ergebnis

Bei Fragen freue ich mich über Kommentare!

Sorry, the comment form is closed at this time.

© 2012 InternetBaukasten Blog Suffusion theme by Sayontan Sinha