ANLEITUNG: Pro Sprache ein eigenes Headerbild

[Tomcraft]

Da das nun auch schon mehrfach angefragt wurde und ich es selber teilweise nicht mehr gefunden habe, hier nochmal die Zusammenfassung:

Suche in der "index.html" vom Template:

Code: PHP  [Auswählen]

<div id="header">

und ersetze mit:

Code: PHP  [Auswählen]

<div id="header-{$language}">

Dann in der "stylesheet.css" suchen nach:

Code: CSS  [Auswählen]

/* HEADER WITH LOGO, SEARCH BOX AND LANGUAGE SELECTION */
#header {
        height:115px;
        background: #893769 url(img/top_logo.jpg) no-repeat;
        border-top: 10px solid #fff;
        border-bottom:1px solid #fff;
}
#header #logo {
        float:left
}
#header #search {
        width: 230px;
        height:75px;
        float:right;
        color:#fff;
        padding:30px 0px 0px 60px
}
#header #search a {
        color:#fff;
        font-size:11px;
        outline: none;
}
#header td {
        padding-top:1px;
        padding-right:4px;
}

und ersetzt es mit:

Code: CSS  [Auswählen]

/* HEADER WITH LOGO, SEARCH BOX AND LANGUAGE SELECTION */
#header-german {
        height:115px;
        background: #893769 url(img/top_logo_german.jpg) no-repeat;
        border-top: 10px solid #fff;
        border-bottom:1px solid #fff;
}
#header-german #logo {
        float:left
}
#header-german #search {
        width: 230px;
        height:75px;
        float:right;
        color:#fff;
        padding:30px 0px 0px 60px
}
#header-german #search a {
        color:#fff;
        font-size:11px;
        outline: none;
}
#header-german td {
        padding-top:1px;
        padding-right:4px;
}
#header-english {
        height:115px;
        background: #893769 url(img/top_logo_english.jpg) no-repeat;
        border-top: 10px solid #fff;
        border-bottom:1px solid #fff;
}
#header-english #logo {
        float:left
}
#header-english #search {
        width: 230px;
        height:75px;
        float:right;
        color:#fff;
        padding:30px 0px 0px 60px
}
#header-english #search a {
        color:#fff;
        font-size:11px;
        outline: none;
}
#header-english td {
        padding-top:1px;
        padding-right:4px;
}

Das lässt sich natürlich noch auf weitere Sprachen erweitern.

Grüße

Torsten

[EDIT Tomcraft 10.11.2011: Fehler in Code korrigiert, Danke an twingo für den Hinweis.]
[EDIT Tomcraft 10.11.2011: Code optimiert, Danke an h-h-h.]

Linkback: https://www.modified-shop.org/forum/index.php?topic=5575.0

[bewusst]

Hallo Torsten,

vielen Dank für das verständliche Beispiel!
 

LG
bewusst

[asra0]

Hallo Torsten,

Wirklich klasse und einwandfrei.

 

Grüße
Raymond

[Tomcraft]

Freut mich, wenn euch das geholfen hat.

Grüße

Torsten

[twingo]

@Tomcraft

Erstmal vielen Dank für die ausführliche Anleitung, habe diese heute aufgrund der Umstellung auf 2 Sprachen genutzt.

Nun hab ich aber folgendes Problem:

Die "Search Box" die sonst immer im XTC Template da oben rechts sitzt ist nun eher in der Mitte gelandet, daher meine Frage und Bitte an Dich oder jemanden der sich auskennt, was habe ich vergessen zu ändern oder woran liegt dies ?

Bin für jeden Lösungsvorschlag dankbar !!!

Hier mal der LINK zum SHOP damit man sieht wovon ich hier schreibe: http://www.shop.simframe.com

Gruß

Jan

[Tomcraft]

Suche in der "stylesheet.css":

Code: CSS  [Auswählen]

#header #search {
    color: #FFFFFF;
    float: right;
    height: 75px;
    padding: 30px 0 0 60px;
    width: 230px;
}

und ersetze mit:

Code: CSS  [Auswählen]

#header-german #search {
    color: #FFFFFF;
    float: right;
    height: 75px;
    padding: 30px 0 0 60px;
    width: 230px;
}

Für die weiteren Sprachen musst du dann natürlich darunter noch folgendes einfügen (Beispiel englisch):

Code: CSS  [Auswählen]

#header-english #search {
    color: #FFFFFF;
    float: right;
    height: 75px;
    padding: 30px 0 0 60px;
    width: 230px;
}

Grüße

Torsten

[h-h-h]

Statt

Code: XML  [Auswählen]

<div {if $language == 'german'}id="header-german"{else}id="header-english"{/if}>

kann auch

Code: XML  [Auswählen]

    <div id="header-{$language}">

genommen werden.

Nur sollten nicht mehr Sprachen zur Auswahl stehen, als in der CSS definiert sind.

Gruß h-h-h

[Tomcraft]

Danke für die Optimierung des Codes!

Das habe ich so in Beitrag 1 übernommen!

Grüße

Torsten

[twingo]

@Tomcraft

 

Nun sieht das doch gleich ordentlich aus im Shop !!! Vielen Vielen Dank für die schnelle Hilfe !!!

Hinweis: In Deinem 1. Beitrag fehlt an manchen Stellen das "h" bei "header", da steht nur "eader". 

@h-h-h

Ebenfalls Danke für die Optimierung, funktioniert alles tadellos !!! 

Gruß

Jan

[Tomcraft]

Hoppala... Danke für den Hinweis. Das korrigiere ich sofort!

Grüße

Torsten