Hallo, Gast! (Registrieren)

Wir wünschen allen Besuchern frohe Ostern!

Letzte Ankündigung: MyBB 1.8.37 veröffentlicht (04.11.23)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Header über ganze Forenbreite
#1
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...
MfG
GreJan
Notebookforum24
#2
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).
MyBBoard.de jetzt auf YouTube!
Fehlender Plan wird durch Wahnsinn ersetzt!!Toungue
Gruß Krafdi    www.krafdi.de
#3
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.
MfG
GreJan
Notebookforum24
#4
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.
#5
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 ?
MfG
GreJan
Notebookforum24
#6
Hallo GreJan,

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

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...


Angehängte Dateien Thumbnail(s)
   
#7
Hat super hingehauen, vielen herzlichen Dank Wink

Ergenzung:

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


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Ganze Seite im Portal zeigen Plexxart 10 3.763 04.04.2008, 16:21
Letzter Beitrag: Plexxart
  Das ganze Forum im Portal. FischI 2 2.004 27.02.2006, 23:14
Letzter Beitrag: FischI