[GreJan]

Nabend,

ich habe das Default-Theme ein wenig abgeändert von Style her, jetzt würde ich gerne den ganzen Header-Bereich mit einer bestimmten Farbkombination gestallten, aber über die ganze breite des Browsers, oder zuminderstens der Forenbreite machen und passend für alle Bildschirmauflösungen.

Beispiel, so wie Ihr das habt, wobei die Navigation so bleiben kann wie es Standard ist.

Könnt Ihr mir da irgend wie helfen, habe schon einiges selbst ausprobiert, aber es haut nicht so richtig hin.

Danke vorab...

[krafdi]

Hier wurde mit einer Header Grafik welche links ist gearbeitet und zusätzlich wurde noch eine Hintergrund Grafik angelegt welche sich über den ganzen Bildschirm wiederholt. ( So passt das für jede Auflösung).

[GreJan]

Naja, ehrlich gesagt würde mir die genaue Vorgehensweise mehr helfen, da ich kein Designer bin, also wie muß der Code aussehen, wo kommt der rein (ich denke Template Header) wie groß müßen die Grafiken sein und wie wird die CSS definiert und wo muß diese rein.
Ihr sieht, ich habe keine Ahnung, möchte es aber Lehrnen.

[linwinman]

Hallo GreJan,

du kannst das in "Admin-CP > Themes > Dein_Theme > Zusätzliches CSS" mit

Code:

.logo {
    background-repeat: repeat-x;
    background-position: top left;
    background-color: #nnnnnn;
    width: n%;
    height: npx;
}

erreichen ("n" ersetzen).

Evtl. musst/kannst du in ""Admin-CP > Templates > Default Templates > Dein_Theme > header" den

Code:

<div id="container">

"verschieben", um die Formatierung zu bestimmen.

Probiere es einfach und passe das Ganze deinen Vorstellungen an.

Ich hoffe, dies hilft dir weiter.

[GreJan]

Ich habe es jetzt mal gemacht und komme der Sache näher, aber irgend wie noch nicht ganz, siehe Bild:

[Bild: http://img7.myimg.de/MagicalSnap20071116..._thumb.jpg]

Solte eigendlich durchgehend sein und wie definiere ich das Logo da rein ?

[linwinman]

Hallo GreJan,

ab jetzt ohne Erfolgsgarantie! - ich bin leider auch nicht der CSS-Guru .

Bevor du dich an die Änderungen durchführst, siehe im Anhang, was sich aus diesen Änderungen ergibt und ob es deinen Vorstellungen entspricht.

• In "Admin-CP > Themes > Dein_Theme":
  
  • in "Body" ändere in "Extra-CSS-Attribute"
    Code:

    /*text-align: center; IE 5 fix */
line-height: 1.4;
  • in "Zusätzliches CSS" ersetze
    Code:

    .logo {
    url(images/(dein_theme)/logo.gif);
    background-repeat: repeat-x;
    background-position: top left;
    background-color: #nnn;
    width: nnn%;
    height: nnnpx;
}

• In "Admin-CP > Templates > Default Templates > Dein_Theme > header" ersetze den kompletten Inhalt mit
  Code:

      <a name="top" id="top"></a>
        <div id="header">
            <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a></div>
    <div id="container">
            <div class="menu">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/search.gif" alt="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/memberlist.gif" alt="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/calendar.gif" alt="" />{$lang->toplinks_calendar}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/help.gif" alt="" />{$lang->toplinks_help}</a></li>
                </ul>
            </div>
            <hr class="hidden" />
            <div id="panel">
                {$welcomeblock}
            </div>
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
        <div id="container">
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            <navigation>
            <br class="clear" />

Diese Anpassungen stammen aus dem Original-Template und sollen nur die Struktur wiedergeben!
Anpassungen, die du bereits in diesem Template vorgenommen hast, musst du bitte berücksichtigen.

Das Ganze kann man sicherlich noch schlanker machen; aber wie gesagt: ich bin kein Guru.

Noch eine Empfehlung: siehe dir einmal die Seiten von "css4you.de" an. Hier findest du weitere gute Erklärungen und Hilfe.

Viel Erfolg...

[GreJan]

Hat super hingehauen, vielen herzlichen Dank

Ergenzung:

Im Body fehlte noch ein: "margin: 0;" um es auf die gesammte Seite zu strecken.