MyBB Forum - Anpassung

Assaki

Hallo,
da ich seit kurzem bei einem Projekt mithilfe, aber jetzt nicht mehr beim Forum weiter komme, wollte ich die Coder von MMORPG Core mal fragen. ;)

Bei diesem Bild:
http://imageshack.us/photo/my-images/685/unbenanntniw.png/

ist der Forum Header zu sehen.
Zensiert = Werbung

Ich möchte diese Erhöhung die Rechts zu sehen ist auch Links haben. Dazu habe ich einfach "header_right.png" (die Erhöhung rechts) Horizontal gedreht, sodass die Erhöhung links auch ist. Das Bild heißt "header_left.png". In der Mitte soll der Streifen sein der die Verbindet und heißt "header_bg.png".
Ich hoffe ihr wisst was ich meine. Das Logo soll darüber und heißt "logo.png". Ist zur Zeit zensiert.
Hier der CSS Code:

PHP

.header {
    background: #070707 url(images/darkfusion/style/header_bg.png) bottom left repeat;
    text-align: center; 
        width: 100%;
    height: 144px;
}


.header_right {
    background: url(images/darkfusion/style/header_right.png) top left no-repeat;
    height: 96px;
        width: 530px;
        padding-top: 50px;
        padding-right: 20px;
        float: right;
}


.header_in {
    margin: auto auto;
}


.logo {
    float: left;
        margin-top: 40px;
        margin-left: 20px;
}

Alles anzeigen

Braucht ihr noch mehr als die CSS Datei? Sprich den Headerinclude oder so?

Ich hoffe auf antworten.

Tekumi

Code

.header_right {
    background: url(images/darkfusion/style/header_right.png) top left no-repeat;
    height: 96px;
        width: 530px;
        padding-top: 50px;
        padding-right: 20px;
        float: right;
}

kopierst du und machst daraus

Code

.header_left {
    background: url(images/darkfusion/style/header_left.png) top left no-repeat;
    height: 96px;
        width: 530px;
        padding-top: 50px;
        padding-left: 20px;
        float:left;
}

Dann baust du das so auf:

Code

...
<div class="header_left"></div>
<div class="header_mittig"></div>
<div class="header_right"></div>
...

Das Bild das du angehängt hast ist viel zu klein, kann also fehlerhaft sein.

Assaki

Das Bild in groß:
ImageShack® - Online Photo and Video Hosting

Verstanden hast du es aber auch ohne :)

Wo soll ich das einbauen:
<div class="header_left"></div> <div class="header_mittig"></div> <div class="header_right"></div>

Ich weiß einfach nicht wo...

Tekumi

Hast du mal kurz den Auszug wo die <div> "header_right" ist? Also aus einer HTML/PHP Datei?

Assaki

Okey, habe gefunden wo es rein kommt.

PHP

<a name="top" id="top"></a>
<div id="panel">{$welcomeblock}</div>
<br><br>
<div class="header_left"></div>
<div class="header"></div>
<div class="header_right">
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/portal.php" class="portal"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/home.png" alt="" title="" />{$lang->toplinks_portal}</a></li>
<li><a href="{$mybb->settings['bburl']}/index.php" class="index"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/forums.png" alt="" title="" />Forums</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php" class="search"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/search.png" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="members"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/memberlist.png" alt="" title="" />Members</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/calendar.png" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/help.png" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
</div>
</div>

Alles anzeigen

So habe ich es im Moment.

Tekumi

Und wie wird es momentan dargestellt?

Assaki

Nun habe es ein bisschen rumprobiert und bin auf ein gutes Ergebnis gekommen.
Der HTML/PHP Code sieht so aus:

PHP

<a name="top" id="top"></a>
<div id="panel">{$welcomeblock}</div>
<br><br>
<div class="header_left"></div>
<div class="header_right">
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/portal.php" class="portal"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/home.png" alt="" title="" />{$lang->toplinks_portal}</a></li>
<li><a href="{$mybb->settings['bburl']}/index.php" class="index"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/forums.png" alt="" title="" />Forums</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php" class="search"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/search.png" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="members"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/memberlist.png" alt="" title="" />Members</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/calendar.png" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/help.png" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
</div>


<div class="header"></div>
<div class="header_in"></div>
            
</div>
</div>
</div>

Alles anzeigen

der CSS so:

PHP

.header {
    background: #070707 url(images/darkfusion/style/header_bg.png) repeat;
    text-align: center; 
        width: 100%;
    height: 140px;
}


.header_right {
    background: url(images/darkfusion/style/header_right.png)  right no-repeat;
    height: 96px;
        width: 530px;
        padding-top: 50px;
        padding-right: 20px;
        float: right;
}


.header_left {
        background: url(images/darkfusion/style/header_left.png) left no-repeat;
        height: 96px;
        width: 530px;
        padding-top: 50px;
        padding-left: 20px;
        float:left;
}


.header_in {
    margin: auto auto;
}


.logo {
    float: left;
        margin-top: 40px;
        margin-left: 20px;
}

Alles anzeigen

Das sieht so aus:
ImageShack® - Online Photo and Video Hosting

Schon viel besser :)

Nun will ich aber das Menü immer zentriert haben, das habe ich auch schon ausprobiert, aber es hat nicht geklappt.

CSS des Menüs:

PHP

.menu {
    width: 540px;
        padding-right: 400px;
}


.menu ul {
    width: 540px;
        float: right;
    color: #fff;
    font-weight: bold;
    text-align: right;
}


.menu ul a:link, .menu a:visited {
    background: url(images/darkfusion/style/menu_bg.png) top left repeat-x;
        width: 90px;
    padding: 9px 7px 8px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #fff;
    text-decoration: none;
        text-shadow: 0 -1px 0 #202020;
}


.menu ul a:hover, .menu ul a:active {
    background: url(images/darkfusion/style/menu_active.png) top left repeat-x;
        width: 90px;
    padding: 9px 7px 8px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #fff;
    text-decoration: none;
        text-shadow: 0 -1px 0 #202020;
}


#calendar .calendar, #portal .portal, #index .index, #search .search, #members .members, #help .help {
    background: url(images/darkfusion/style/menu_active.png) top left repeat-x;
    padding: 9px 7px 8px;
    color: #000;
    text-decoration: none;
        text-shadow: 0 1px 0 #33adff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

Alles anzeigen

Vielleicht weißt du das auch noch?

Delinquenz

pack in .menu ein margin: 0 auto; rein.

Assaki

PHP

.menu {
        width: 540px;
        padding-right: 400px;
    margin: 0 auto;
}


.menu ul {
    width: 540px;
        float: right;
    color: #fff;
    font-weight: bold;
    text-align: right;
}


.menu ul a:link, .menu a:visited {
    background: url(images/darkfusion/style/menu_bg.png) top left repeat-x;
        width: 90px;
    padding: 9px 7px 8px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #fff;
    text-decoration: none;
        text-shadow: 0 -1px 0 #202020;
}


.menu ul a:hover, .menu ul a:active {
    background: url(images/darkfusion/style/menu_active.png) top left repeat-x;
        width: 90px;
    padding: 9px 7px 8px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #fff;
    text-decoration: none;
        text-shadow: 0 -1px 0 #202020;
}


#calendar .calendar, #portal .portal, #index .index, #search .search, #members .members, #help .help {
    background: url(images/darkfusion/style/menu_active.png) top left repeat-x;
    padding: 9px 7px 8px;
    color: #000;
    text-decoration: none;
        text-shadow: 0 1px 0 #33adff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

Alles anzeigen

So habe ich es jetzt, aber es ist immer noch nicht zentriert, obwohl "margin: 0 auto;" zum zentrieren dort ist.

Tommyx3

versuchs mal so : margin:0px auto;

Assaki

Bei einem Wert von Null (0) brauch man keine "px" angeben, soweit ich weiß. Ich teste es mal, trotzdem danke.

Nein, hat nichts gebracht, wie ich gesagt habe. ;)

Tommyx3

hm habs bei mir so:

Code

.divCenter {
    margin:0px auto;
    width:778px;
}

Delinquenz

Mir sticht das padding-right und das float:right erst ins auge... dreckig gecodet, raus damit! Dann müsste es klappen.

Assaki

PHP

}


.menu {
    margin: 0px auto;
        width: 530px;
}


.menu ul {
    width: 540px;
    color: #fff;
    font-weight: bold;
    text-align: right;
}


.menu ul a:link, .menu a:visited {
    background: url(images/darkfusion/style/menu_bg.png) top left repeat-x;
        width: 90px;
    padding: 9px 7px 8px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #fff;
    text-decoration: none;
        text-shadow: 0 -1px 0 #202020;
}


.menu ul a:hover, .menu ul a:active {
    background: url(images/darkfusion/style/menu_active.png) top left repeat-x;
        width: 90px;
    padding: 9px 7px 8px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #fff;
    text-decoration: none;
        text-shadow: 0 -1px 0 #202020;
}

Alles anzeigen

So ist es nun, aber bleibt genau so rechts kleben.

Tekumi

Ich weiß nicht ob es was bringen wird, aber setz das margin:0 auto; mal bei jeder class der Navigation ein.

~Kevin~

Bei .menu ul das text-align: right; rausnehmen vielleicht.

Tekumi

Das bringt nichts, das definiert ja nur die Ausrichtung des Textes in der unordered list.

Assaki

Okey, danke an alle, die mir geholfen haben.
Ich habe es zuletzt doch geschafft, aber leider nur oder der Erhöhung. Aber das ist mir jetzt relativ egal, das Theme ist scheiß gecodet und bin trotzdem zu Frieden und ich habe viel dazu gelernt.
Kann geclosed werden.

Tekumi

Eventuell könntest du noch ein Endprodukt (Screenshot) reinsetzen, anschließend schließe ich das Thema :)

Assaki

Das Endprodukt:
ImageShack® - Online Photo and Video Hosting

Noch einmal danke an alle :)

MyBB Forum - Anpassung

Jetzt mitmachen!

SCHNELLZUGRIFF

HILFE & COMMUNITY

RECHTLICHES