Pirate Theme ( Work in Progress )

Started by wtf, February 11, 2014, 05:51:13 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

wtf

#14
November 02, 2014, 08:46:49 AM
There are some fixes to be made in order to work on your source,like Sawyer did.It's not just copy/paste are there you go,a pirate theme.Cheers!

cm27

#12
April 23, 2014, 03:39:32 AM
Do you have the template or do I need to add it to the main config?
Never fall to those that just sit there.. Always look for the way to the top even if you have to code it your self and mistakes and all... quote from BonZO...

Sawyer

#11
April 23, 2014, 02:43:26 AM
http://img835.imageshack.us/img835/7936/rqoy.png
It looks like this how i did it on a simple u232

So, this is the header with logo, menu and statusbar:
Code (php) Select
    $htmlout = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
    \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <!-- ************************************************************************** -->
    <!--       THIS WEBSITE IS POWERED BY TBDEV.NET 2009 (FINAL) SOURCECODE         -->
    <!--  DESIGN IS MADE UNIQUE FOR THIS TRACKER, BY KIDVISION FROM TBDEV.NET TEAM  -->
    <!--             HTTP://WWW.KIDVISION.ME  |  HTTP://WWW.TBDEV.NET               -->
    <!-- ************************************************************************** -->
    <head>
    <meta name='generator' content='TBDev.net' />
    <meta http-equiv='Content-Language' content='en-us' />
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <meta name='MSSmartTagsPreventParsing' content='TRUE' />
    <title>{$title}</title>
    <link rel='alternate' type='application/rss+xml' title='Latest Torrents' href='./rss.php?passkey={$CURUSER['passkey']}' />
    <link rel='stylesheet' href='templates/1/1.css' type='text/css' />
    <link rel='stylesheet' href='templates/1/bbcode.css' type='text/css' />
    <script type='text/javascript' src='scripts/jquery.js'></script>
    <script type='text/javascript' src='image-resize/core-resize.js'></script>
    <link type='text/css' rel='stylesheet' href='image-resize/resize.css'  />
    ".$js_incl."
    </head>
    <body>";
    if ($CURUSER)
    {
    $htmlout .= "
<div id='container' class='container'>
<div id='logo'><!-- Css - Change logo @ css --></div>
<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='usercp.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><a href='faq.php'><b><font color=#555555>F.A.Q</font></b></a></li>
</ul>";
    }
    $htmlout .= StatusBar();
    $htmlout .="
    <!-- Main content -->
    <table class='mainouter' width='100%' align='center' border='0' cellspacing='0' cellpadding='0'>
    <tr><td align='center' class='outer' style='padding-top: 20px; padding-bottom: 5px'>";

The footer:
Code (php) Select
    $htmlfoot = "
    </td></tr></table></div>
    <div id='footer'>
    <div width='710px' align='center' id='footer-tb'>
    <a href='http://tbdev.net'><img src='templates/6/gfx/footer/tbdev.jpg' alt='Tbdev.net powered' title='Tbdev.net powered' style='opacity:0.4;filter:alpha(opacity=40)' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40'/></a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='http://validator.w3.org'><img src='templates/6/gfx/footer/xhtml.jpg' alt='Xhtml valid' title='Xhtml valid' style='opacity:0.4;filter:alpha(opacity=40)' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40'/></a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='http://kidvision.me'><img src='templates/6/gfx/footer/design.jpg' alt='Designed by kidvision' title='Designed by kidvision' style='opacity:0.4;filter:alpha(opacity=40)' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40'/></a>";   
    $htmlfoot .="</div></div>\n";

And this would be the statusbar:

Code (php) Select
$StatusBar =
"".
"<div align='center' style='float:left; width:600px;'>
<div class='topbar'>
        {$lang['gl_msg_welcome']},
".format_username($CURUSER)."&nbsp;{$usrclass}&nbsp;&nbsp;|&nbsp;&nbsp;
        Ratio:&nbsp$ratio"."&nbsp;&nbsp;|&nbsp;&nbsp;Upload:&nbsp;$upped"."&nbsp;|&nbsp;
        Bonus:&nbsp;<a href='./mybonus.php'>{$CURUSER['seedbonus']}</a>&nbsp;&nbsp;|&nbsp;&nbsp;Invites:&nbsp;<a href='./invite.php'>{$CURUSER['invites']}</a>&nbsp;&nbsp;|&nbsp;&nbsp;
Mailbox: <a href='./messages.php'>$inbox</a></div></div>";

This would be the CSS:
Code (html5) Select
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
background-attachment: fixed;
    background-image: url(pic/bg.png);
    background-repeat: repeat-x;
    background-color: #060402;
    background-position: top;
    color: #cccccc;
    margin-top: 5px;
    margin-bottom: 0px;
    }
table {
    border-collapse: collapse;
    background-color: #101010;
    text-align: left;

    }
table.mainouter {
    background: #212121 url(pic/middle.png) repeat-x;
    opacity:0.8;
background-color: #0A0805;
}

table.main {
border: solid #000000 1px;
background-color: transparent;
     //background: #212121 url(pic/middle.png);

}
#container {
    width: 710px; 
    border:none; margin:0 auto;
    min-height:100%; position:relative;
}

#logo {
    height: 73px; width: 710px;
    display: inline; float: left;
    background: transparent url(pic/banner.png) left no-repeat;}

#footer-tb {
    padding-top: 16px;
background: transparent;
border: hidden;}

#footer {
    width: 100%;
    height:51px;
    left:0px; bottom:0px;z-index: 9999;
float: left;
    }
#footer-top {
    padding-top: 16px;
text-align: center;
width:100%;
}
#menu {
padding-bottom: 147px;
margin-bottom: -73px;
    list-style:none;
    width:710px;
    text-shadow: 1px 1px #111111;
    height: 67px;
    background: transparent url(pic/menu.png) left no-repeat;
    z-index:500;
    font-family: "Tahoma", "Verdana", "Arial", "Sans-serif";
    font-size: 10px;
    //font-weight: bold;
    color: #555555;
text-align: center;
    -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:10px; margin-top:7px;}
#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.4; background-color:#ffffff;margin-top:-5px;}
#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 {
   

}

.colhead {
    position: relative;
    padding: 7px;
    margin: -3px -1px -3px -1px;
    border-bottom: none;
    background-image: url(pic/colhead.png);
    font-family: Tahoma, Verdana, Arial, Sans-serif;
    font-size: 10.4px;
    font-weight: bold;
    color: #CCCCCC;
text-align: left;
}

.forumhead {
    position: relative;
    padding: 7px;
    margin: -3px -1px -3px -1px;
    border-bottom: none;
    background-image: url(pic/forumhead.png);
    font-family: Tahoma, Verdana, Arial, Sans-serif;
    font-size: 10.4px;
    font-weight: bold;
    color: #CCCCCC;
text-align: left;
}

.forumhead2 {
    position: relative;
    padding: 7px;
    margin: -3px -1px -3px -1px;
    border-bottom: none;
    background-image: url(pic/bg_th.gif);
    font-family: Tahoma, Verdana, Arial, Sans-serif;
    font-size: 10.4px;
    font-weight: bold;
    color: #CCCCCC;
text-align: left;
}

.newsdate {
    position: relative;
    padding: 7px;
    border: solid #202020 1px;
    border-bottom: hidden;
    font-family: Tahoma, Verdana, Arial, Sans-serif;
    font-size: 10.4px;
    font-weight: bold;
    color: #636161;
text-align: left;
}

.pad {
    padding: 1em;
font-size: 8pt;
border: solid #202020 1px;
text-align: left;
}

td {
font-size: 8pt;
border: solid #202020 1px;
 
}

td.text {padding: 10pt;text-align: left;background-color: transparent;}
td.embedded {border: hidden;padding: 10px;text-align: left;margin-left: auto;margin-right: auto;}
td.bottom {border: none;}
td.heading {font-weight: bold;}
td.text {padding: 10pt;text-align: left;background-color: transparent;}
td.post {padding: 10pt;text-align: left;background-color: transparent;padding-bottom:330px;}
td.comment {padding: 10pt;font-size: 8pt; text-align: left; }
td.colhead2 {height: 30px;font-weight: bold;color: #000;border-bottom: 1px dashed #9d9d9d; text-align: center; background: #FFF;}
td.rowhead {font-weight: bold;text-align: right;vertical-align: top;background-color: transparent;}
td.login {font-weight: bold;text-align: center;vertical-align: top;background-color: transparent; width:100%;}
td.title {font-size: 14pt;}
td.navigation {font-weight: bold;font-size: 10pt;border: none;}
td.clear {padding: 0px;border: 0px;background: transparent;}
form {display: inline;margin-top: 0;margin-bottom: 0;padding: 0;}
td.clearalt6 {background: #004E98;padding: 5px;border: 0px;border: hidden;}
td.clearalt7 {padding: 5px;background: #777777;border: 0px;border: hidden;}

a {
text-decoration: none;
color: #ffffff;
}

/* Topbar */

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;
}

.main_column {
margin: 0px 0px 10px 10px;
width: 440px;
float:left;
}

.sidebar {
float: right;
height: 100%;
width: 230px;
padding-right: 10px;
}

.thin {
margin: 0px auto;
padding-top: 13px;
width: 710px;
}

.box {
font-size: 8pt;
border: solid #202020 0px;
}

#statusbar {
font-family: tahoma, sans-serif;
font-size: 10px;
margin: 0px 0px 5px 0px;
padding-left: 40px;
width: 710px;
height: 22px;
line-height:18px;
}

#sb_left {
margin: 0px 0px;
width: 64%;
height: 22px;
float: left;
text-align: left;
}

#sb_right {
margin: 0px 0px;
width: 35%;
height: 22px;
float: left;
text-align: right;
margin-left: -80px;
}

#statusbar ul {
position: relative;
display: inline;
margin: 0 auto;
padding: 0px;
text-align: center;
}

#statusbar ul li {
display: inline;
margin: 0px 5px;
position: relative;
vertical-align: middle;
}

#statusbar a {
font-weight: bold;
text-decoration: none;
}

#stats {
    padding:0;   
    margin:0;
    list-style:none;
}

You can find the images in wtf's post!

cm27

#10
April 20, 2014, 02:12:45 PM
So I was messing with this and it seem a mess. Can you give better layout instructions as what you posted here is pure HTML witch it need to be converted over to work on the php side. A bit more info or the template file reworked would be nice .

Thanks
Never fall to those that just sit there.. Always look for the way to the top even if you have to code it your self and mistakes and all... quote from BonZO...

Sawyer

#9
April 18, 2014, 07:44:34 PM
Looks good. I installed it and it's ok, i just have to make some upgrades in CSS and it'll look so much better.

BamBam0077

#6
February 13, 2014, 12:36:52 PM
Thank You, for this wonderful share :)
"When Darkness Shadows Your Doubts, Deep Within Us Is Our Key, Not Success But Everything" ~ Anonymous

Seeder

#5
February 13, 2014, 11:09:06 AM
Quote from: wtf on February 13, 2014, 06:40:22 AM
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 Select
<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 Select
#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 Select
<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 Select
/* 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 Select
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 Select
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 :)

Nice work and all but why not put them into they're files and then rar them up and upload it as a rar to here like the rest has done so far, would be thankful by the members here
Want help? post in the forums and help will be give, but please remember to search the forums to make sure it hasn't already been covered! Please post all things in correct areas of our forums, thankyou.

wtf

#4
February 13, 2014, 06:40:22 AM
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 Select
<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 Select
#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 Select
<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 Select
/* 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 Select
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 Select
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 :)



[attachment deleted by admin]

Seeder

#3
February 12, 2014, 08:46:12 PM
Quote from: wtf on February 11, 2014, 05:51:13 PM
Heya.Long time no see.I have some free time and started working on a pirate theme for ya.I have used many css and html lines so once released do not ask me for help installing it.Still in progress :)

Are you going to share this time for free?
Want help? post in the forums and help will be give, but please remember to search the forums to make sure it hasn't already been covered! Please post all things in correct areas of our forums, thankyou.

xe84

#2
February 12, 2014, 04:15:12 PM
Serious how did you get the poll block and the stats block to the right and the rest to the left. Iam looking to do the same but cant figure it out =(
The BEST programming language in the world is the one you are currently using !!

wtf

#1
February 11, 2014, 05:51:13 PM Last Edit: February 11, 2014, 06:04:16 PM by wtf
Heya.Long time no see.I have some free time and started working on a pirate theme for ya.I have used many css and html lines so once released do not ask me for help installing it.Still in progress :)


[attachment deleted by admin]
Print
Go Up Pages1
User actions