MyBB Forum - Anpassung

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • MyBB Forum - Anpassung

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

    1. .header {
    2. background: #070707 url(images/darkfusion/style/header_bg.png) bottom left repeat;
    3. text-align: center;
    4. width: 100%;
    5. height: 144px;
    6. }
    8. .header_right {
    9. background: url(images/darkfusion/style/header_right.png) top left no-repeat;
    10. height: 96px;
    11. width: 530px;
    12. padding-top: 50px;
    13. padding-right: 20px;
    14. float: right;
    15. }
    17. .header_in {
    18. margin: auto auto;
    19. }
    21. .logo {
    22. float: left;
    23. margin-top: 40px;
    24. margin-left: 20px;
    25. }
    Alles anzeigen


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

    Ich hoffe auf antworten.

  • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

  • Quellcode

    1. .header_right {
    2. background: url(images/darkfusion/style/header_right.png) top left no-repeat;
    3. height: 96px;
    4. width: 530px;
    5. padding-top: 50px;
    6. padding-right: 20px;
    7. float: right;
    8. }

    kopierst du und machst daraus

    Quellcode

    1. .header_left {
    2. background: url(images/darkfusion/style/header_left.png) top left no-repeat;
    3. height: 96px;
    4. width: 530px;
    5. padding-top: 50px;
    6. padding-left: 20px;
    7. float:left;
    8. }


    Dann baust du das so auf:

    Quellcode

    1. ...
    2. <div class="header_left"></div>
    3. <div class="header_mittig"></div>
    4. <div class="header_right"></div>
    5. ...


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

  • Okey, habe gefunden wo es rein kommt.

    PHP-Quellcode

    1. <a name="top" id="top"></a>
    2. <div id="panel">{$welcomeblock}</div>
    3. <br><br>
    4. <div class="header_left"></div>
    5. <div class="header"></div>
    6. <div class="header_right">
    7. <div class="menu">
    8. <ul>
    9. <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>
    10. <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>
    11. <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>
    12. <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>
    13. <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>
    14. <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>
    15. </ul>
    16. </div>
    17. </div>
    18. </div>
    Alles anzeigen

    So habe ich es im Moment.

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

    PHP-Quellcode

    1. <a name="top" id="top"></a>
    2. <div id="panel">{$welcomeblock}</div>
    3. <br><br>
    4. <div class="header_left"></div>
    5. <div class="header_right">
    6. <div class="menu">
    7. <ul>
    8. <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>
    9. <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>
    10. <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>
    11. <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>
    12. <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>
    13. <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>
    14. </ul>
    15. </div>
    16. </div>
    18. <div class="header"></div>
    19. <div class="header_in"></div>
    21. </div>
    22. </div>
    23. </div>
    Alles anzeigen


    der CSS so:

    PHP-Quellcode

    1. .header {
    2. background: #070707 url(images/darkfusion/style/header_bg.png) repeat;
    3. text-align: center;
    4. width: 100%;
    5. height: 140px;
    6. }
    8. .header_right {
    9. background: url(images/darkfusion/style/header_right.png) right no-repeat;
    10. height: 96px;
    11. width: 530px;
    12. padding-top: 50px;
    13. padding-right: 20px;
    14. float: right;
    15. }
    17. .header_left {
    18. background: url(images/darkfusion/style/header_left.png) left no-repeat;
    19. height: 96px;
    20. width: 530px;
    21. padding-top: 50px;
    22. padding-left: 20px;
    23. float:left;
    24. }
    26. .header_in {
    27. margin: auto auto;
    28. }
    30. .logo {
    31. float: left;
    32. margin-top: 40px;
    33. margin-left: 20px;
    34. }
    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-Quellcode

    1. .menu {
    2. width: 540px;
    3. padding-right: 400px;
    4. }
    6. .menu ul {
    7. width: 540px;
    8. float: right;
    9. color: #fff;
    10. font-weight: bold;
    11. text-align: right;
    12. }
    14. .menu ul a:link, .menu a:visited {
    15. background: url(images/darkfusion/style/menu_bg.png) top left repeat-x;
    16. width: 90px;
    17. padding: 9px 7px 8px;
    18. -moz-border-radius: 4px;
    19. -webkit-border-radius: 4px;
    20. color: #fff;
    21. text-decoration: none;
    22. text-shadow: 0 -1px 0 #202020;
    23. }
    25. .menu ul a:hover, .menu ul a:active {
    26. background: url(images/darkfusion/style/menu_active.png) top left repeat-x;
    27. width: 90px;
    28. padding: 9px 7px 8px;
    29. -moz-border-radius: 4px;
    30. -webkit-border-radius: 4px;
    31. color: #fff;
    32. text-decoration: none;
    33. text-shadow: 0 -1px 0 #202020;
    34. }
    36. #calendar .calendar, #portal .portal, #index .index, #search .search, #members .members, #help .help {
    37. background: url(images/darkfusion/style/menu_active.png) top left repeat-x;
    38. padding: 9px 7px 8px;
    39. color: #000;
    40. text-decoration: none;
    41. text-shadow: 0 1px 0 #33adff;
    42. -moz-border-radius: 4px;
    43. -webkit-border-radius: 4px;
    44. }
    Alles anzeigen


    Vielleicht weißt du das auch noch?

  • PHP-Quellcode

    1. .menu {
    2. width: 540px;
    3. padding-right: 400px;
    4. margin: 0 auto;
    5. }
    7. .menu ul {
    8. width: 540px;
    9. float: right;
    10. color: #fff;
    11. font-weight: bold;
    12. text-align: right;
    13. }
    15. .menu ul a:link, .menu a:visited {
    16. background: url(images/darkfusion/style/menu_bg.png) top left repeat-x;
    17. width: 90px;
    18. padding: 9px 7px 8px;
    19. -moz-border-radius: 4px;
    20. -webkit-border-radius: 4px;
    21. color: #fff;
    22. text-decoration: none;
    23. text-shadow: 0 -1px 0 #202020;
    24. }
    26. .menu ul a:hover, .menu ul a:active {
    27. background: url(images/darkfusion/style/menu_active.png) top left repeat-x;
    28. width: 90px;
    29. padding: 9px 7px 8px;
    30. -moz-border-radius: 4px;
    31. -webkit-border-radius: 4px;
    32. color: #fff;
    33. text-decoration: none;
    34. text-shadow: 0 -1px 0 #202020;
    35. }
    37. #calendar .calendar, #portal .portal, #index .index, #search .search, #members .members, #help .help {
    38. background: url(images/darkfusion/style/menu_active.png) top left repeat-x;
    39. padding: 9px 7px 8px;
    40. color: #000;
    41. text-decoration: none;
    42. text-shadow: 0 1px 0 #33adff;
    43. -moz-border-radius: 4px;
    44. -webkit-border-radius: 4px;
    45. }
    Alles anzeigen


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

  • PHP-Quellcode

    1. }
    3. .menu {
    4. margin: 0px auto;
    5. width: 530px;
    6. }
    8. .menu ul {
    9. width: 540px;
    10. color: #fff;
    11. font-weight: bold;
    12. text-align: right;
    13. }
    15. .menu ul a:link, .menu a:visited {
    16. background: url(images/darkfusion/style/menu_bg.png) top left repeat-x;
    17. width: 90px;
    18. padding: 9px 7px 8px;
    19. -moz-border-radius: 4px;
    20. -webkit-border-radius: 4px;
    21. color: #fff;
    22. text-decoration: none;
    23. text-shadow: 0 -1px 0 #202020;
    24. }
    26. .menu ul a:hover, .menu ul a:active {
    27. background: url(images/darkfusion/style/menu_active.png) top left repeat-x;
    28. width: 90px;
    29. padding: 9px 7px 8px;
    30. -moz-border-radius: 4px;
    31. -webkit-border-radius: 4px;
    32. color: #fff;
    33. text-decoration: none;
    34. text-shadow: 0 -1px 0 #202020;
    35. }
    Alles anzeigen


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