Thread: Pirate Theme
View Single Post
  #5  
Old 12th February 2014, 15:07
Krypto Krypto is offline
Retired from BVList
 
Join Date: Jan 2008
P2P
Posts: 510
Default
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

Code:
<ul id="menu">

    <li><a href="index.php"><font color=#555555>HOME</font></a></li>

    <li class="sub"><a class="sub" href="browse.php"><b><font color=#555555>BROWSE</font></b><!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

    </li>

    <li class="sub"><a class="sub" href="upload.php"><b><font color=#555555>UPLOAD</font></b><!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->   

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

    </li>

    <li class="sub"><a class="sub" href="my.php"><b><font color=#555555>PROFILE</font></b><!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

    </li>

    <li class="sub"><a class="sub" href="forums.php"><b><font color=#555555>FORUMS</font></b><!--[if gte IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

    </li>

    <li><a href="rules.php"><b><font color=#555555>RULES</font></b></a></li>

    </li>

        <li><a href="faq.php"><b><font color=#555555>F.A.Q</font></b></a></li>

</ul>
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:
<div align="center">
<div class='topbar'><div class='topvanster'></div><div class='tophoger'</div>
Your statusbar goes here
</div>
</div>
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 :)
Attached Images
File Type: psd logo.psd (185.6 KB, 50 views)
Attached Files
File Type: rar images.rar (226.7 KB, 120 views)
Reply With Quote
The Following 3 Users Say Thank You to Krypto For This Useful Post:
Fynnon (16th February 2014), WhyMe (28th December 2014), z3ro (1st June 2014)