Nachdem ich mir das Theme installiert und meine Anweisungen befolgt habe sieht es wie folgt aus (siehe Anhang).
Jetzt nocheinmal der Reihe nach.
Teil 1
AdminCP -> Templates & Style -> Templates -> Dark Fusion (1.6.x) -> Seitenkopf Templates -> header
Sieht bei mir jetzt so aus:
Code:
<a name="top" id="top"></a>
<div id="panel">{$welcomeblock}</div>
<br><br>
<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 class="menu2">
<ul>
<li><img src="[PFAD ZUM TEAMSPEAK-BILD]" alt="Teamspeak" /> <a href="[TEAMSPEAK-LINK]">Teamspeak</a></li>
<li><img src="[PFAD ZUM STEAM-BILD]" alt="Steam" /> <a href="[STEAM-LINK]">Steam</a></li>
<li><img src="[PFAD ZUM FACEBOOK-BILD]" alt="Facebook" /> <a href="[FACEBOOK-LINK]">Facebook</a></li>
<li><img src="[PFAD ZUM TWITTER-BILD]" alt="Twitter" /> <a href="[TWITTER-LINK]">Twitter</a></li>
</ul>
</div>
</div>
</div>
<div class="header">
<div class="header_in">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
</div>
</div>
</div>
<br>
<br>
<div id="container">
<div id="content">
<navigation>
<hr class="hidden" />
<br class="clear" />
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
{$pm_notice}
<br />
Die Angaben in den eckigen Klammern "[ ]" musst du durch eigene Links ersetzen. Zum einen durch die Links zu Twitter, Facebook, Steam und Teamspeak, zum anderen duch die Links zu den passenden Bildern. Andernfalls werden sie wie in meinem Screenshot nicht angezeigt.
Wenn du die Bilder direkt in den Ordner "/images/darkfusion/" kopierst würde der Link zum Twitterbild etwa so aussehen:
Code:
<img src="images/darkfusion/twitter.gif" alt="Twitter" />
Teil 2
AdminCP -> Templates & Style -> Themes -> Dark Fusion (1.6.x) -> global.css -> Stylesheet bearbeiten: Fortgeschrittene Methode
Sieht bei mir jetzt so aus:
Code:
body {
background: #1a1a1a url(images/darkfusion/style/body_bg.png) top left repeat;
line-height: 1.4;
margin: auto auto;
padding-bottom: 20px;
color: #000;
text-align: center;
font-family: tahoma;
font-size: 11px;
}
a:link {
color: #0e79ca;
text-decoration: none;
}
a:visited {
color: #0e79ca;
text-decoration: none;
}
a:hover, a:active {
color: #1399ff;
text-decoration: none;
}
a:focus {
outline: none;
}
.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;
}
#container {
background: #101010;
border: 1px solid #2a2a2a;
width: 95%;
color: #808080;
margin: auto auto;
padding: 20px;
text-align: left;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#content {
width: auto !important;
}
#footer {
width: 95%;
color: #fff;
margin: auto auto;
padding: 10px 20px 20px 20px;
text-align: left;
text-shadow: 0 1px 0 #000;
}
.menu {
width: 540px;
padding-right: 20px;
}
.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_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;
}
.menu2 {
position: relative;
margin-top: 65px;
margin-right: 10px;
text.-align: right;
}
.menu2 ul, .menu2 li {
list-style: none;
margin: 0;
padding: 0;
}
.menu2 li {
float: right;
margin-right: 5px;
}
.menu2 img {
vertical-align: bottom;
}
#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;
}
#panel {
background: url(images/darkfusion/style/panel_bg.png) top left repeat-x;
width: 100%;
padding: 8px 0px 8px 0px;
position: fixed;
z-index: 9999;
top: 0;
color: #000;
font-family: tahoma;
font-size: 11px;
text-shadow: 0 1px 0 #fff;
}
#panel .remember_me input {
vertical-align: middle;
margin-top: 2px;
}
table {
color: #808080;
font-family: tahoma, arial;
font-size: 11px;
text-shadow: 0 -1px 0px #101010;
}
.tborder {
background: #111111;
width: 100%;
margin: auto auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.thead {
background: #0256d8 url(images/darkfusion/style/thead_bg.png) top left repeat-x;
color: #ffffff;
padding: 5px 10px 5px 10px;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
text-shadow: 0 -1px 0 #003c98;
}
.thead a:link {
color: #ffffff;
text-decoration: none;
}
.thead a:visited {
color: #ffffff;
text-decoration: none;
}
.thead a:hover, .thead a:active {
color: #ffffff;
text-decoration: underline;
}
.tcat {
background: #151515;
color: #808080;
font-size: 11px;
padding: 3px 10px 3px 10px;
border-left: 1px solid #252525;
}
.tcat a:link {
color: #808080;
}
.tcat a:visited {
color: #808080;
}
.tcat a:hover, .tcat a:active {
color: #909090;
}
.trow1 {
background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
border-top: 1px solid #292929;
border-left: 1px solid #292929;
}
.trow2 {
background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
border-top: 1px solid #292929;
border-left: 1px solid #292929;
}
.trow_h {
background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
border-top: 1px solid #292929;
border-left: 1px solid #292929;
}
.trow_h:hover {
background: #252525 url(images/darkfusion/style/trow_hover_bg.png) top left repeat-x;
border-top: 1px solid #292929;
border-left: 1px solid #292929;
}
.trow_plain {
background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
}
.trow_shaded {
background: #303030;
}
.trow_selected td {
background: #000;
}
.trow_sep {
background: #2a2a2a;
padding: 5px 10px 5px 10px;
color: #808080;
font-size: 11px;
font-weight: bold;
}
.tfoot {
background: #0256d8 url(images/darkfusion/style/thead_bg.png) top left repeat-x;
color: #ffffff;
padding: 5px 10px 5px 10px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
text-shadow: 0 -1px 0 #003c98;
}
.tfoot a:link {
color: #ffffff;
text-decoration: none;
}
.tfoot a:visited {
color: #ffffff;
text-decoration: none;
}
.tfoot a:hover, .tfoot a:active {
color: #ffffff;
text-decoration: underline;
}
#bottommenu {
margin: auto;
padding: 10px;
color: #303030;
font-size: 11px;
font-weight: bold;
text-align: middle;
}
#bottommenu img {
padding-right: 5px;
vertical-align: top;
}
#bottommenu a:link, #bottommenu a:visited {
margin: 0 5px;
}
.navigation {
background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
padding: 5px;
border: 1px solid #292929;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color: #808080;
font-size: 11px;
font-weight: bold;
}
.navigation a:link {
text-decoration: none;
color: #0e79ca;
}
.navigation a:visited {
text-decoration: none;
color: #0e79ca;
}
.navigation a:hover, .navigation a:active {
text-decoration: none;
color: #808080;
}
.navigation .active {
color: #808080;
font-weight: bold;
}
.smalltext {
font-size: 11px;
}
.largetext {
font-size: 14px;
font-weight: bold;
font-family: arial;
}
input.textbox {
background: #fff url(images/darkfusion/style/textbox_bg.png) bottom left repeat-x;
color: #000;
border-top: 1px solid #bababa;
border-left: none;
border-bottom: none;
border-right: none;
padding: 3px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
font-family: tahoma;
font-size: 11px;
}
input.button {
background: #e0e0e0 url(images/darkfusion/style/button_bg.png) bottom left repeat-x;
color: #000;
border: 1px solid #bababa;
padding: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
font-weight: bold;
font-family: tahoma;
font-size: 11px;
text-shadow: 0 1px 0 #e0e0e0;
}
textarea {
background: #181818;
color: #808080;
border: 1px solid #121212;
padding: 2px;
font-family: Verdana, Arial, Sans-Serif;
line-height: 1.4;
font-size: 13px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 1px #404040;
-webkit-box-shadow: 0px 0px 1px #404040;
box-shadow: 0px 0px 1px #404040;
-khtml-box-shadow: 0px 0px 1px #404040;
}
select {
background: #101010;
color: #808080;
border: 1px solid #303030;
}
.editor {
background: #f1f1f1;
border: 1px solid #ccc;
}
.editor_control_bar {
background: #fff;
border: 1px solid #0f5c8e;
}
.autocomplete {
background: #fff;
border: 1px solid #000;
color: black;
}
.autocomplete_selected {
background: #adcee7;
color: #000;
}
.popup_menu {
background: #101010;
border: 1px solid #202020;
margin-top: 2px;
}
.popup_menu .popup_item {
background: #101010;
color: #808080;
}
.popup_menu .popup_item:hover {
background: #202020;
color: #fff;
}
.trow_reputation_positive {
background: #ccffcc;
}
.trow_reputation_negative {
background: #ffcccc;
}
.reputation_positive {
color: green;
}
.reputation_neutral {
color: #444;
}
.reputation_negative {
color: red;
}
.invalid_field {
border: 1px solid #f30;
color: #f30;
}
.valid_field {
border: 1px solid #0c0;
}
.validation_error {
background: url(images/invalid.gif) no-repeat center left;
color: #f30;
margin: 5px 0;
padding: 5px;
font-weight: bold;
font-size: 11px;
padding-left: 22px;
}
.validation_success {
background: url(images/valid.gif) no-repeat center left;
color: #00b200;
margin: 5px 0;
padding: 5px;
font-weight: bold;
font-size: 11px;
padding-left: 22px;
}
.validation_loading {
background: url(images/spinner.gif) no-repeat center left;
color: #555;
margin: 5px 0;
padding: 5px;
font-weight: bold;
font-size: 11px;
padding-left: 22px;
}
/* Additional CSS (Master) */
img {
border: none;
}
.clear {
clear: both;
}
.hidden {
display: none;
float: none;
width: 1%;
}
.hiddenrow {
display: none;
}
.selectall {
background-color: #FFFBD9;
font-weight: bold;
text-align: center;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.menu ul {
list-style: none;
margin: 0;
}
.menu li {
display: inline;
padding-left: 5px;
}
.menu img {
padding-right: 5px;
vertical-align: top;
}
#panel .links {
margin: 0;
float: right;
}
#panel img {
padding-right: 5px;
vertical-align: middle;
}
.panel-irt {
padding-right: 5px;
vertical-align: top;
}
.expcolimage {
float: right;
width: auto;
vertical-align: middle;
margin-top: 3px;
}
img.attachment {
border: 1px solid #E9E5D7;
padding: 2px;
}
hr {
background-color: #000000;
color: #000000;
height: 1px;
border: 0px;
}
#copyright {
font: 11px Verdana, Arial, Sans-Serif;
margin: 0;
padding: 3px 0 0 0;
}
#debug {
float: right;
text-align: right;
margin-top: 0;
}
blockquote {
border-left: 6px solid #606060;
-moz-box-shadow: 0px 0px 1px #101010;
-webkit-box-shadow: 0px 0px 1px #101010;
box-shadow: 0px 0px 1px #0098ff;
-khtml-box-shadow: 0px 0px 1px #101010;
margin: 0;
background: #404040;
padding: 5px;
color: #fff;
}
blockquote cite {
font-weight: bold;
border-bottom: 1px solid #606060;
font-style: normal;
display: block;
margin: 4px 0;
}
blockquote cite span {
float: right;
font-weight: normal;
}
blockquote cite span.highlight {
float: none;
font-weight: bold;
padding-bottom: 0;
}
.codeblock {
border-left: 6px solid #606060;
-moz-box-shadow: 0px 0px 1px #101010;
-webkit-box-shadow: 0px 0px 1px #101010;
box-shadow: 0px 0px 1px #0098ff;
-khtml-box-shadow: 0px 0px 1px #101010;
margin: 0;
background: #404040;
padding: 5px;
color: #fff;
}
.codeblock .title {
border-bottom: 1px solid #606060;
font-weight: bold;
margin: 4px 0;
}
.codeblock code {
overflow: auto;
height: auto;
max-height: 200px;
display: block;
font-family: Monaco, Consolas, Courier, monospace;
font-size: 13px;
}
.subforumicon {
border: 0;
margin-right: 5px;
vertical-align: middle;
}
.separator {
margin: 5px;
padding: 0;
height: 0px;
font-size: 1px;
list-style-type: none;
}
form {
margin: 0;
padding: 0;
}
.popup_menu .popup_item_container {
margin: 1px;
text-align: left;
}
.popup_menu .popup_item {
display: block;
padding: 3px;
text-decoration: none;
white-space: nowrap;
}
.popup_menu a.popup_item:hover {
text-decoration: none;
}
.autocomplete {
text-align: left;
}
.subject_new {
font-weight: bold;
}
.highlight {
background: #FFFFCC;
padding-top: 3px;
padding-bottom: 3px;
}
.pm_alert {
background: #FFF6BF;
border: 1px solid #FFD324;
text-align: center;
padding: 5px 20px;
margin-bottom: 15px;
font-size: 11px;
}
.red_alert {
background: #FBE3E4;
border: 1px solid #A5161A;
color: #A5161A;
text-align: center;
padding: 5px 20px;
margin-bottom: 15px;
font-size: 11px;
}
.high_warning {
color: #CC0000;
}
.moderate_warning {
color: #F3611B;
}
.low_warning {
color: #AE5700;
}
div.error {
padding: 5px 10px;
border-top: 2px solid #FFD324;
border-bottom: 2px solid #FFD324;
background: #FFF6BF;
font-size: 12px;
}
div.error p {
margin: 0;
color: #000;
font-weight: normal;
}
div.error p em {
font-style: normal;
font-weight: bold;
padding-left: 24px;
display: block;
color: #C00;
background: url(images/error.gif) no-repeat 0;
}
div.error.ul {
margin-left: 24px;
}
.online {
color: #15A018;
}
.offline {
color: #C7C7C7;
}
.pagination {
font-size: 11px;
padding-top: 10px;
margin-bottom: 5px;
}
.tfoot .pagination, .tcat .pagination {
padding-top: 0;
}
.pagination .pages {
font-weight: bold;
}
.pagination .pagination_current, .pagination a {
padding: 2px 6px;
margin-bottom: 3px;
}
.pagination a {
background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
padding: 3px 7px 4px 7px;
color: #808080;
border-top: 1px solid #292929;
-moz-border-radius:2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-shadow: 0 -1px 0 #101010;
}
.pagination .pagination_current {
background: #0256d8 url(images/darkfusion/style/thead_bg.png) top left repeat-x;
padding: 4px 7px;
color: #ffffff;
-moz-border-radius:3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-shadow: 0 -1px 0 #002661;
font-weight: bold;
}
.pagination a:hover {
background: #1a1a1a url(images/darkfusion/style/trow_bg.png) top left repeat-x;
padding: 3px 7px 4px 7px;
color: #ffffff;
border-top: 1px solid #292929;
-moz-border-radius:3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-shadow: 0 -1px 0 #101010;
}
.thread_legend, .thread_legend dd {
margin: 0;
padding: 0;
}
.thread_legend dd {
padding-bottom: 4px;
margin-right: 15px;
}
.thread_legend img {
margin-right: 4px;
vertical-align: bottom;
}
.forum_legend, .forum_legend dt, .forum_legend dd {
margin: 0;
padding: 0;
}
.forum_legend dd {
float: left;
margin-right: 10px;
}
.forum_legend dt {
margin-right: 10px;
float: left;
}
.success_message {
color: #00b200;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}
.error_message {
color: #C00;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}
.post_body {
padding: 5px;
}
.post_content {
padding: 5px 10px;
}
.quick_jump {
background: url(images/jump.gif) no-repeat 0;
width: 13px;
height: 13px;
padding-left: 13px; /* amount of padding needed for image to fully show */
vertical-align: middle;
border: none;
}
.repbox {
font-size:16px;
font-weight: bold;
padding:5px 7px 5px 7px;
}
._neutral {
background-color:#FAFAFA;
color: #999999;
border:1px solid #CCCCCC;
}
._minus {
background-color: #FDD2D1;
color: #CB0200;
border:1px solid #980201;
}
._plus {
background-color:#E8FCDC;
color: #008800;
border:1px solid #008800;
}
.pagination_breadcrumb {
background-color: #f5f5f5;
border: 1px solid #fff;
outline: 1px solid #ccc;
padding: 5px;
margin-top: 5px;
font-weight: normal;
}
.pagination_breadcrumb_link {
vertical-align: middle;
cursor: pointer;
}
.lastpost {
float: left;
text-align: left;
margin-top: 1px;
}
fieldset {
background-color: #303030;
color: #fff;
border: 1px solid #303030;
margin: 2px;
padding: 5px;
}
.qsearch {
background: url(images/darkfusion/style/search_bg.png) top left no-repeat;
height: 50px;
width: 160x;
float: right;
padding: 0;
margin: 0;
border: none;
}
.qsearch input {
background: transparent;
color: #202020;
border: none;
float: left;
font-size: 11px;
font-family: trebuchet ms, arial;
padding: 1px 5px 5px 5px;
margin: 0;
}
.qsearch .btn:hover {
background: url(images/darkfusion/style/search_icon.png) top left no-repeat;
border: none;
float: right;
margin-left: 2px;
margin-top: 1px;
padding: 0;
width: 23px;
height: 20px;
}
.topmenu {
padding: 9px 5px 0 5px;
background: #000;
text-align: left;
margin: auto auto;
height: 23px;
}
.topmenu a:link {
padding: 5px 15px 5px 15px;
color: #ccc;
text-decoration: none;
}
.topmenu a:visited {
padding: 5px 15px 5px 15px;
color: #ccc;
text-decoration: none;
}
.topmenu a:hover {
padding: 5px 15px 0px 15px;
color: #fff;
text-decoration: underline;
}
.test {
background: #151515;
display: block;
width: 120px;
margin: 3px 3px 0px 3px;
padding: 2px 3px;
border-bottom:1px solid #2a2a2a;
-moz-border-radius: 3px;
text-align: right;
font-weight: bold;
}
Habe nach dem Abschnitt...
Code:
.menu ul a:hover, .menu ul a:active {
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;
}
...meinen Code eingefügt und die Werte "65px" sowie "10px" verwendet:
Code:
.menu2 {
position: relative;
margin-top: 65px;
margin-right: 10px;
text.-align: right;
}
.menu2 ul, .menu2 li {
list-style: none;
margin: 0;
padding: 0;
}
.menu2 li {
float: right;
margin-right: 5px;
}
.menu2 img {
vertical-align: bottom;
}
Solltest du bisher keine Änderungen am Theme vorgenommen haben, kannst du die kompletten Codes, die ich hier gepostet habe 1:1 verwenden.
EDIT: Solltest du Plugins installiert haben, musst du sie vorher entweder deaktiviren oder (je nach Plugin) deinstallieren.
Speichere dir aber vorher, das was du jetzt drin stehen hast! Sicher ist sicher.
Hoffe es ist soweit alles klar. Falls nicht frage vor irgendwelchen Änderungen nochmal nach.
Helfe wie auch dir geholfen wird.