Customizing SMF > SMF Coding Discussion

Few problems with modifying a theme

(1/1)

wildfirex:
First problem is with the navbar, if i try moving it down it just screws everything up, and i don't know how to fix it.
Before and after


Second problem
I need the background image to always be on top of the regular background. I tried experimenting with it but no success.


here is the code for the problems, based of lagusta theme, posted more lines, so easier to understand

--- Code: ---/* laGusta Styles */

a { outline: none;}
span, p, form { margin: 0; padding: 0;}
#topbar { background: url(../images/custom/top_overlay.png) 0 0 repeat-x; line-height: 20px; padding: 0px 0; overflow: hidden;}
#toplinks { float: right;}
#toplinks ul { float: left; margin: 0px; padding: 0;}
#toplinks ul li { float: left;  padding: 0 10px; list-style: none;}
#toplinks ul li a { font-weight: bold; color: #ccc;}
#toplinks a.rss_icon { background: url(../images/custom/rss_icon.png) no-repeat; height: 20px; width: 20px; display: block;}
#modlinks, #modlinks a { color: #f3f707;}

#toolbar { background: #222 url(../images/custom/toolbar.png) repeat-x; height: 0px;}
#topnav { float: left; margin: 0px; padding: 0; position: relative; z-index: 1000;} <--------this is the line for whole navbar
#topnav li { float: left; margin: 0; padding: 0; position: relative; list-style: none;}
#topnav li a { float: left; display: block; height: 30px; line-height: 0px; padding: 0 6px; color: #787878; text-decoration: none; }
#topnav li a.active { background: url(../images/custom/active.png) 50% 100% no-repeat; font-weight: bold;}
#topnav li a.active, #topnav li a:hover { color: #d96500;}
#topnav li:hover > a { color: #d96500;}
#topnav li ul { position: absolute; width: 200px; top: -999em; left: auto; padding: 5px 0; background: #242424; border: 1px solid #a99877; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.6); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.6);}
#topnav li ul ul { margin: 0;}
#topnav li li { width: 200px; height: auto; padding: 0; margin: 0;}
#topnav li li a { display: block; width: 170px; margin: 0 5px; padding: 0 10px; height: auto; float: none; line-height:30px; font-size: 90%;}
#topnav li li a:hover, #topnav ul li:hover > a { background: #a99877; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: none;}
#topnav li:hover ul { left: 0; top: 10px;}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul { top: -999em; left: auto;}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul { left: 200px; top: 0;}
#button_login, #button_logout, #button_register { display: none;}

#mainbody { background: url(../images/custom/body_overlay.jpg) no-repeat scroll center top;} <--------this is the line for background image which i'd need to be on top
#header { padding: 34px 0;}
--- End code ---

phantomm:
If this is related to laGusta theme then I doubt that you will receive here help, because it is paid theme, and any support is given only at http://www.dzinerstudio.com for Club Members..

kachan64:
well, it's a simple fix lol
in the css try add/editing the margin-top:.

Navigation

[0] Message Index