menu help

[shadowsnake]

probably the last bit of help im gonna need for navigation menu's

i cant change the background of menu ? i tried everything but it dont work

Code: [Select]

#bodybg {
   background: #000000 url(../images/custom/body-bg.jpg) repeat-x;
}
#topbar {
   background: #252525;
}
#topbar span {
   padding-left: 15px;
   color: #fff;
   line-height: 30px;
}
#mainarea {
   border-top: solid 1px #333;
   background: #1a1a1a;
   padding: 0 4px 10px;
}
}
#toolbar {
   background: url(../images/custom/toolbar-bg.png) no-repeat;
   height: 46px;
}
#topnav {
   position: relative;
   height: 46px;
   z-index: 1000;
   padding: 0;
   margin: 0;
}
#topnav ul {
   margin: 0;
   padding: 0;
}
#topnav li {
   float: left;
   margin: 0;
   padding: 0 0 0 2px;
   position: relative;
   list-style: none;
}
#topnav li a {
   display: block;
   line-height: 46px;
   padding: 0 16px;
   color: #7c7c7c;
   font-size: 12px;
}
#topnav li a.active {
   background: url(../images/custom/active.png) 50% 0 no-repeat;
   color: #fff;
   font-weight: bold;
}
#topnav li a:hover, #topnav li:hover a, #topnav li.sfhover a {
   background: url(../images/custom/active.png) 50% 0  no-repeat;
   color: #ddd;
   text-decoration: none;
}
#topnav li:hover li a, #topnav li ul li a:hover {
   color: #ddd;
   background: #020293;
}
#topnav li li {
   width: 200px;
   height: auto;
   padding: 0;
}
#topnav li li a, #topnav li li a:hover, #topnav li li a, #topnav a.active li a, #topnav li:hover li a, #topnav li.sfhover li a {
   background: #020202;
   height: 30px;
   line-height: 30px;
   margin: 0;
   font-weight: normal;
   text-transform: none;
   font-size: 12px;
   color: #777;
}
#topnav li ul {
   background: #020202;
   position: absolute;
   width: 200px;
   left: -999em;
   margin-left: -1px;
}
#topnav li ul ul {
   margin: -27px 0 0 195px;
}
#topnav ul li li:hover, #topnav ul li li.hover {
   position: static;
}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li.sfhover ul ul, #topnav li.sfhover ul ul ul {
   left: -999em;
}
#topnav li:hover ul, #topnav li.sfhover ul {
   left: 3px;
}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li.sfhover ul, #topnav li li li.sfhover ul {
   left: 0;
}
#main_body {
   background: #dedede url(../images/custom/toolbar-bg.jpg) 0 0 no-repeat fixed;   
}
#main_body .wrapper {
   background: #ffffff url(../images/custom/toolbar-bg.png) 0 0 no-repeat;
   padding: 10px 0;
}can you tell me what i need to correct?
toolbar-bg.png is my navigation bar i created its a full one so i dont want it to be repeated.
if anyone can also help with moving away the search bar can you please tell i dont like it there and the background of it also ruins everything.
thank you i hope i get an awnser soon so i can fix the menu problems.

[ARG]

If you are using a full length image for the toolbar and do not want it to repeat then you may have to change the wrapper width in index.css to accommodate. Play around a bit with the 990px in both instances below until you get the toolbar image to fit correctly. If using a taller toolbar image you may also need to adjust the 46px as well.

First find this:

Code: [Select]

#toolbar {
   background: url(../images/custom/toolbar-bg.png) no-repeat;
   height: 46px;
}
change to this:

Code: [Select]

#toolbar {
   background: url(../images/custom/toolbar-bg.png) no-repeat;
   height: 46px;
   width: 990px;
}

Code: [Select]

div#wrapper {
    border-left: 1px solid #252525;
    border-right: 1px solid #252525;
    border-top: 1px solid #252525;
    margin: 0 auto;
    width: 990px;
}

 

[ARG]

Oh yea, sorry. If you want to remove the Search area look for this in index.template.php:

Code: [Select]

echo '
</div>
<div id="userinfo">
<b>', $context['common_stats']['total_posts'], '</b> ', $txt['posts'], ' ', $txt['in'], ' <b>', $context['common_stats']['total_topics'], '</b> ', $txt['topics'], ' - ', $txt['by'], ' <span style="white-space: nowrap;"><b>', $context['common_stats']['total_members'], '</b> ', $txt['members'], '</span> -
', $txt['latest_member'], ': <b> ', $context['common_stats']['latest_member']['link'], '</b>';
echo '</div>
<div id="searchfield">
<form action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '" style="margin: 0;">
<a href="', $scripturl, '?action=search;advanced"><img src="'.$settings['images_url'].'/filter.gif" align="middle" style="margin: 0 1ex;" alt="" /></a>
<input class="biginput" type="text" name="search" value="', $txt['search'], '..." onfocus="this.value = \'\';" onblur="if(this.value==\'\') this.value=\'', $txt['search'], '...\';" style="width: 170px;" /> ';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '
</form><br />
</div>';
echo '
<div id="mainarea">';
and change to this:

Code: [Select]

echo '
</div>
<div id="userinfo">
<b>', $context['common_stats']['total_posts'], '</b> ', $txt['posts'], ' ', $txt['in'], ' <b>', $context['common_stats']['total_topics'], '</b> ', $txt['topics'], ' - ', $txt['by'], ' <span style="white-space: nowrap;"><b>', $context['common_stats']['total_members'], '</b> ', $txt['members'], '</span> -
', $txt['latest_member'], ': <b> ', $context['common_stats']['latest_member']['link'], '</b>';
echo '</div>

<div id="mainarea">';
Then in index.css look for this:

Code: [Select]

#userinfo {
background: #1a1a1a url(../images/custom/userinfo.png) 0 0 repeat-x;
color: #cdcdcd;
width: 450px;
float: left;
padding: 20px 0 10px 25px;
}
change to this:

Code: [Select]

#userinfo {
background: #1a1a1a url(../images/custom/userinfo.png) 0 0 repeat-x;
color: #cdcdcd;
width: 100%;
float: left;
padding: 20px 0 10px 25px;
}
Remember, keep a backup copy of your files before making any changes. 

[shadowsnake]

Thanks ! the first part helped and now it has finally changed to what i wanted, but now the second part for the search thing it messed up the menu and made it go back, i used my backups but its not changing back? and i has no such thing with userinfo in my index.css. very confused.!!

[ARG]

Thanks ! the first part helped and now it has finally changed to what i wanted, but now the second part for the search thing it messed up the menu and made it go back, i used my backups but its not changing back? and i has no such thing with userinfo in my index.css. very confused.!!

If you did it right it will work. I did it on a test site and it worked fine. userinfo is in index.css around line 3546.

Working Example