| Krypto |
12th February 2014 15:07 |
2 Attachment(s)
Title Changed :)
I'll also add the contents of your pastebin link and images here in-case it ever goes down!
I made this to work with any source code but some coding skills are required.Not for noobs.
1) Let's start with the menu first,add the following code in bittorrent/stdhead/template or whatever your source code is,you know what i mean
2) now add the following to your default.css/style.css etc
Code:
#menu {
padding:0;
margin:0;
list-style:none;
width:710px;
//opacity:0.5;
text-shadow: 1px 1px #111111;
background-image: url('/pic/menu.png'); background-repeat: repeat;
height:67px;
position:relative;
z-index:500;
font-family: "Tahoma", "Verdana", "Arial", "Sans-serif";
font-size: 10px;
//font-weight: bold;
color: #555555;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
}
#menu li {float:left; margin-right:0px; margin-left:20px;}
#menu li a {display:block; float:left; height:50px; line-height:50px; text-align:center; color:#ffffff; text-decoration:none; font-weight:bold; padding:0 20px 0 20px;}
#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
#menu li a:hover {z-index:200; position:relative;color:#fff; opacity:0.1; background-color:#ffffff;}
#menu li:hover {position:relative; z-index:200;}
#menu li:hover > a {color:#fff; background:#0d0d0d;}
#menu li:hover > a.sub {color:#fff; background-color:#0d0d0d;}
#menu li.current a {color:#fff; background:#0d0d0d;}
#menu li a.sub {background: url(down-arrow.gif) no-repeat right center;}
#menu li.current a.sub {color:#fff; background: url(down-arrow.gif) no-repeat right center;;}
#menu :hover ul {left:0; top:40px; width:120px; background:#e76319;}
/* keep the 'next' level invisible by placing it off screen. */
#menu ul,
#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#menu :hover ul :hover ul {left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}
#menu :hover ul li {margin:0; border-top:0px solid #000;}
#menu :hover ul li a {width:120px; padding:0; background:#0d0d0d; color:#fff; height:30px; line-height:30px;}
#menu :hover ul li a.fly {background:#0d0d0d url(right-arrow.gif) no-repeat right center;}
#menu :hover ul :hover {background-color:#e76319; color:#fff;}
#menu :hover ul :hover a.fly {background-color:#c60; color:#fff;}
#menu :hover ul li.currentsub a {background:#840; color:#fff;}
#menu :hover ul li.currentsub a.fly {background:#840 url(right-arrow.gif) no-repeat right center; color:#fff;}
#menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#fff;}
#menu :hover ul :hover ul :hover {background-color:#d70; color:#fff;}
#menu :hover ul :hover ul li.currentfly a,
#menu :hover ul :hover ul li.currentfly a:hover {background:#840; color:#fff;}
.main {
}
3) Done with the menu now let's start with the statusbar
Code:
4) now the css part
Code:
/* Topbar */
div.topfalt {
width: 1060px;
margin-left: auto;
margin-right: auto;
height: 26px;
line-height: 36px;
}
div.topbar {
background-color: transparent;
background-image: url(pic/topbarbg.png);
background-repeat: repeat-x;
height: 20px;
font-size: 10px;
//font-weight: bold;
color: #ffffff;
text-align: center;
opacity:0.6;
text-shadow: 1px 0px #000000;
line-height: 15px;
width: 710px;
float: center;
}
span.topspacer {
//background-image: url(pic/topspacer.png);
background-repeat: no-repeat;
height: 45px;
width: 45px;
color: #eeeeee;
//margin: 0px 5px 0px 5px;
display: inline-block;
}
5) Next step includes the main site structure.Add to your .css
Code:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
background-attachment: fixed;
background-image: url('/pic/bg.png');
//background-color: #3a3d3d;
//background-repeat: no-repeat;
background-position: top;
color: #cccccc;
margin-top: 5px;
margin-bottom: 0px;
}
table {
border-collapse: collapse;
//border: solid #303030 1px;
//border-color: #3a3d3d;
//background: #212121 url("pic/middle.png");
background-color: #101010;
text-align: left;
}
table.mainouter {
background: #212121 url("pic/middle.png");
opacity:0.8;
background-color: transparent;
}
table.main {
//border: solid #000000 1px;
background-color: transparent;
//background: #212121 url("pic/middle.png");
}
and...
Code:
td.colhead {
font-family: "Tahoma", "Verdana", "Arial", "Sans-serif";
font-size: 10.4px;
font-weight: bold;
color: #CCCCCC;
background-image: url("pic/colhead.png");
height:25px;
border-left: 0px;
border-bottom: 2px;
border-right: 2px;
border-top: 0px;
border-style: solid;
border-color: #202020;
}
td { font-size: 8pt;
border: solid #202020 1px;
}
Tips:
1) Site width to 710px
2) Download images.rar attached bellow
3) Edit the .psd logo with your site's one
4) Credits for my work would be appreciated you can reffer to my bvlist account
5) Good Luck and enjoy,hope i didn't missed anything so let me know :)
|
