We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
  • Pages:
  • 1
  • 2
BGBTRC; First Theme. Also Imageless -- Black/Grey and Yellow
Topic Started: Jun 10 2012, 10:33 PM (10,140 Views)
Meta Ing-ZNR
Member Avatar
---
[ *  *  *  * ]
Updates: Added a few more rules to prevent images from breaking the layout, and also fixed an error in one of the javascript codes (to remove the space below the h3 on the search results page). Used steve's suggestions below. Fixed h2 padding for guest view. Changed top menu expand/collapse - will now transition over a period of 0.5 seconds instead of being instantaneous. (Note - this currently does not work on Internet Explorer)


Name: BGBTRC

Date Created: 6/?/12 - 6/What's the date today?/12

Preview: Posted Image


Notes - Click to view



Note: A CSS3-compatible browser is recommended to get the full effect of this theme.

Code: Theme Appearance
 
html,body{background:#151515;color:#EAEAEA;padding:0;margin:0;font:81.25% arial,sans-serif;min-height:100%}
body{background:#2C2C2C}
table{border-spacing:1px;padding:0;margin:0;empty-cells:show;width:100%;border-collapse:separate}
td,th{padding:5px}
th{text-align:left}
a{text-decoration:none;color:#E6EF69;text,transform:uppercase;font-weight:bold}
a:hover,a:active{color:#B6BF39}
label,.spoiler_toggle{cursor:pointer}
img{vertical-align:middle}
textarea{width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:pre-wrap}
input,textarea,button:active,select{background:#101010;padding:2px;margin:2px;border:1px solid #4A4A4A;border-top-color:#000;border-left-color:#000;color:#FFF}
button{background:#101010;border:1px solid #000;border-top-color:#4A4A4A;border-left-color:#4A4A4A;color:#FFF;padding:2px;margin:2px}
button:hover,button:focus{background:#1C1C1C}
input:focus,textarea:focus,button:focus,select:focus{outline:#808080 1px solid}
button img{display:block;margin:3px}

/* ----------------------------------------------------------------------------------- */

#skincopy{margin:0 10px;font-weight:normal;font-style:italic;font-size:80%}
noscript #skincopy{margin:0 0 10px;text-align:center}
#skincopy a{font-weight:bold}

#logo{background:#151515;text-align:center;clear:both;font-size:400%}
#logo a{display:block;padding:10px}
#logo a:hover,#logo a:focus{background:#1A1A1A;color:#E6EF69}
hr{border:none;border-top:1px solid #000;border-bottom:1px solid #4C4C4C;margin:5px}
hr.sep{border-bottom-color:#3A3A3A;margin:0}
#content{background:#000;border:1px solid #4C4C4C;border-radius:0 10px;padding:1px;margin:10px;overflow:auto;min-height:100%}
#copyright{text-align:center;padding:5px;clear:both;background:#151515;min-height:1em}

/* ----------------------------------------------------------------------------------- */

#top{float:right;overflow:hidden;max-width:20%;word-wrap:break-word }
#nav{background:#1A1A1A;margin:0 0 1px;font-size:110%;padding:10px 20px}
#nav li,.drop_menu li,.meta_menu li,#pm_folders li,.calendar li,#emot_list li,#avatar_gallery_sys li,#shoutbox li,.cat-pages li,.cat-topicpages li{list-style:none}
#nav li,#avatar_gallery_sys li,.cat-pages li,.cat-topicpages li{display:inline-block}
#avatar_gallery_sys li{margin:5px}
#submenu{background:#101010;border-top-right-radius:6px;text-align:center;display:table;width:100%;font-size:110%}
#submenu a{display:table-cell;padding:10px}
#submenu a:last-of-type{border-top-right-radius:10px}
#submenu a:hover,#submenu a:focus{background:#1A1A1A;color:#E6EF69}
#nav img{display:none}
#top_info{padding:20px 10px!important;font-size:90%}
#top ul{padding:0;margin:0}
#top ul ul,#shoutwrap p,tr.generic td,div.generic,.c_user,#fast-reply,td.c_topicfoot,#emot_wrap{text-align:center!important}
#top .drop_menu li a{display:block;padding:5px 10px;border-bottom:1px solid transparent}
#top .drop_menu li a:hover,.drop_menu li a:focus{background:#1C1C1C;border-color:#3C3C3C}
.drop_menu ul{-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;max-height:0;overflow:hidden}
.drop_menu li:hover ul,.drop_menu li.hover ul{-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;max-height:500px /* To be safe for additional menus/links */ }
#profile_menuwrap .drop_menu ul{position:absolute;left:-100%;background:#000;background:rgba(0,0,0,0.9);border:1px solid #202020;outline:#000 1px solid}
#profile_menuwrap .drop_menu li:hover ul,#profile_menuwrap .drop_menu li.hover ul{left:auto;}
#profile_menuwrap .drop_menu li ul li a{display:block;padding:5px;border:1px solid transparent;margin:1px;font-size:75%}
#profile_menuwrap .drop_menu li ul li a:hover,#profile_menuwrap .drop_menu li ul li a:focus{background:#202020;border-color:#303030;outline:none}
#main{padding:10px;background:#1C1C1C;border-top:1px solid #3C3C3C;border-bottom:1px solid #000}

/* ----------------------------------------------------------------------------------- */

#main>table,#main>form>table,#main>form>dl,#main>dl,.site_wrapper>table,#main>.topic,.category,.search_results,#portal_main,#portal_head,#portal_foot,#boardmeta,#blog,#acplogin{background:#101010;padding:4px;border:1px solid #2C2C2C;margin:10px 0;clear:both}
h2,thead th,#blog_head,.search_results>h3{padding:10px 15px}
.category>h2,.portal_stats h2,.portal_box h2,div.topic h2{margin:1px 1px 0}
.collapse,.uncollapse{padding:10px 15px;margin:-10px 0 -10px -15px;display:inline-block;background:#0C0C0C;color:#E6EF69;border-right:1px solid #2C2C2C 1px solid;font-family:lucida console,monospace;cursor:pointer}
.collapse a,.uncollapse a{padding:10px 15px;margin:-10px -15px}
.collapse:hover,.collapse:focus,.uncollapse:hover,.uncollapse:focus{background:#151515}
.cat_head{margin-bottom:-1px}
.cat_head td{padding:0;border:none!important}
.c_mark,.c_cat-mark{width:1%;vertical-align:middle!important}
.c_cat-starter,.c_cat-replies,.c_cat-views{vertical-align:middle!important;text-align:center}

#main td,.meta_menu,#main>form>dl>dd,#acplogin td,.search_results>div,.search_results>p,#blog_sidebar,.blog_entry{background:#2F2F2F;border:1px solid #3F3F3F;vertical-align:top}

td.c_mark,td.c_last,td.c_subforum,td#stats_legend,th,h4,td.c_head,.portal_content,td.c_user,td.c_postinfo,td.c_username,.profile td,td.c_desc,.postbtn td,#acplogin h1,.cal_inactive,.odd li,.search_results>cite,td.c_sig,#blog_sub{background:#2A2A2A!important;border:1px solid #3A3A3A!important}
.calendar td div{margin:-5px;padding:5px;background:#202020;border-bottom:1px solid #3C3C3C}
h4{margin:1px;padding:5px}
.portal_content{margin:1px;padding:5px}
td.c_foot,td.c_postfoot,th.post_sep,.blog_entry:after{background:#1A1A1A!important;border:1px solid #2A2A2A!important}
#quickcompose{margin:0}
.meta_menu img{float:right;margin-right:5px}
#quickcompose{width:100%;display:inline}
h2,#fast-reply dt,#blog_head{background:#151515;border:1px solid #252525;margin:0}
thead th,.search_results h3{background:#151515!important;border:1px solid #252525!important;margin:0;font-size:150%}
thead th h2{font-size:100%;background:transparent;border:none;margin:0;padding:0}
.cat-buttons,.topic-buttons{float:right;margin:0 20px 10px}
#emot_list{margin:0;padding:0}
#emot_list li{display:inline-block;margin:5px}
.c_forum{width:59%}
.c_info-t,.c_info-v,.c_info-r,.postbtn,#row-IGNORE-col-IGNORE,#row-IGNORE-col-IGNORE-2{text-align:center}
.meta_menu h3{padding:5px;margin:0;background:#202020;none;border-bottom:1px solid #4C4C4C;font-size:120%}
input.row1{font-size:90%!important}
.notice dt,#fast-reply dt{margin:1px;padding:5px}
.notice dd,#fast-reply dd{margin:0 1px 1px;padding:5px}
td .exclusivebutton{background:transparent;border:none;padding:0;margin:0}

.notice dt{font-size:150%;font-weight:bold}
.notice dd{text-indent:4ch;font-size:110%}

.notice.info dt{background:#152545;border:1px solid #253555}
.notice.info dd{background:#2F3F5F;border:1px solid #3F4F6F}

#error_box thead th,.notice.error dt{background:#451515!important;border:1px solid #552525!important}
#error_box td,.notice.error dd{background:#5F2F2F!important;border:1px solid #6F4F3F!important}

.search_results h3,#blog_head,#blog_sub,#blog_sidebar,#blog_main{margin:1px}
.search_results div,.search_results p,.search_results cite{padding:5px;margin:1px}
.search_results cite{display:block}

/* ----------------------------------------------------------------------------------- */

.c_user,#c_emot{width:18%}
.user_info dt,.user_profile dt{float:left;clear:left}
.user_info dd,.user_profile dd{text-indent:1ch;font-weight:bold}

#cal_current{outline:#E6EF69 1px solid;outline-offset:1px}
#profile_menuwrap ul{margin:0;padding:0}
#pm_folderlist{padding:5px;margin:0 auto}
#boardmeta{display:table;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;border-spacing:1px;table-layout:fixed}
.meta_menu{display:table-cell}
dl.user_info,dl.user_profile,#blog_about,#blog_readers,#blog_sidebar dl,#emot_wrap,.editby,.cat-pages li{background:#1C1C1C;border:1px solid #3C3C3C;outline:#000 1px solid;padding:5px;margin:5px!important;text-align:left}
#adcopy-outer td{border:none;background:transparent}
.exclusivebutton dl{margin:0}
#acplogin h1{margin:0 1px}

.meta_box{background:#101010;border:1px solid #202020;outline:#000 1px solid;padding:5px;margin:5px auto;width:80%}
.meta_box h3{margin:0;font-size:150%}

.cat-pages,.cat-topicpages{padding:0}
.cat-pages{margin:0 20px}
.cat-topicpages{float:right}
.cat-pages li{margin:1px!important}
.cat-pages li a,.cat-pages li span{display:block;margin:-5px;padding:5px}
.cat-pages li a:hover,.cat-pages li span{background:#0C0C0C}

/* ----------------------------------------------------------------------------------- */

#portal_l{width:20%;float:left}
#portal_r,#blog_sidebar{width:20%;float:right}
#portal_news,#blog,#blog_main,#blog_head{overflow:hidden!important}
#portal_head,#portal_main,#portal_foot{clear:both;overflow:hidden}
#portal_clear{display:none}
#blog_sidebar div h3,#emot_wrap h3{background:transparent;border:none}
#blog_sidebar{margin-top:0}
#blog_head div{float:right}
#blog_head h1{float:left;margin:0}
#blog_sub{clear:both;padding:5px}
#blog_sub form{text-align:right}
.blog_date{float:right;font-size:200%}
.blog_entry{margin-bottom:14px;padding:5px;position:relative /* It already is positioned relatively, IE... */}
.blog_options{padding:5px}
.blog_entry h2,.blog_entry>blockquote{background:transparent;border:none;border-bottom:1px solid #000;max-width:none;margin:0 auto;padding:5px}
.blog_entry>blockquote,.blog_options{border-top:1px solid #4C4C4C}
#blog_comments>li>blockquote{background:transparent;border:none;max-width:none;margin:5px;padding:5px}
.cornercanvas{display:none!important}
.blog_entry:after{position:absolute;bottom:-14px;height:10px;content:"";left:-1px;right:-1px}

/* ----------------------------------------------------------------------------------- */

#pmtoast{border-radius:0 10px;margin:10px;position:fixed;bottom:0;right:0;box-shadow:1px 1px 1px#000,0 0 5px#E6EF69;height:auto!important;width:220px;z-index:1;display:none}
#pmlink{border:1px solid #3C3C3C;border-bottom:1px dashed #000;border-top-right-radius:10px}
#pmtoast big,#pmtoast a{display:block;padding:5px}
#pmtoast a{background:#000;background:rgba(0,0,0,0.7)}
#pmlink big{text-align:center}
#pmclose{border:1px solid #3C3C3C;border-bottom-left-radius:10px;text-align:right;border-top:1px dashed #3C3C3C}
#pmtoast a:hover{background:#202020;background:rgba(0,0,0,1.0);color:#E6EF69}

/* ----------------------------------------------------------------------------------- */

#foot_wrap{background:#151515;border-top:1px solid #353535;border-bottom-left-radius:8px}
#foot_wrap img{vertical-align:middle}

/* ----------------------------------------------------------------------------------- */

#c_post-resize{text-align:right;font-size:250%;margin:5px;cursor:pointer;float:right}
#c_post-preview{background:#101010;border:1px solid #4C4C4C;padding:5px;margin:10px auto;clear:both}
#c_post-close{top:20px!important}
.c_post table,.search_results div table,.c_sig table,.blog_entry table,blockquote,#table_bbcode_generator,#c_post-preview table{background:#000;border:1px solid #3C3C3C}
#main .c_post tbody th,#main .c_sig tbody th,.search_results div tbody th,.blog_entry tbody th,#c_post-preview tbody th{background:#353535!important;border:1px solid #454545!important}
#main .c_post table td,#main .c_sig table td,.search_results div table td,#blog .blog_entry table td,blockquote>div,blockquote code,.spoiler,#cal_current,#shoutbox li,#table_bbcode_generator td,#c_post-preview table td{background:#3A3A3A;border:1px solid #4A4A4A}
#shoutbox li.odd{background:#363636;border:1px solid #464646}
blockquote dl,blockquote>div,blockquote code{margin:1px!important;padding:5px!important}
.spoiler,.spoiler_toggle{outline:#000 1px solid;margin:1px auto!important;padding:5px!important;max-width:700px}
code{white-space:pre-wrap}
blockquote,.c_post table,.c_sig table,.search_results table,.search_results img,.blog_entry table,.blog_entry>blockquote img,#blog_comments>li>blockquote img,#c_post-preview table,.c_post img,.topic img,.c_sig img,#c_post-preview img{margin:10px auto;max-width:700px}
.portal_content img{max-width:500px;margin:10px}
blockquote dl,.spoiler_toggle{background:#1C1C1C;border:1px solid #3C3C3C}
blockquote>div,blockquote code,.spoiler,.spoiler_toggle,.c_post table,.c_sig table,.blog-entry table{word-wrap:break-word}
blockquote>div,blockquote code{overflow:auto;max-height:300px}
blockquote code{display:block;width:auto!important}
blockquote dt,.spoiler_toggle{font-size:120%;font-weight:bold}
blockquote dd{display:none}
blockquote code{font-family:lucida console,monospace}
#shoutbox{padding:0;margin:-5px;background:#101010}
#shoutbox li{margin:1px;padding:2px}

.c_poll-answer{width:40%}
.c_poll-votes{width:10%}
.c_poll-bar{vertical-align:middle!important}
.c_poll-bar div{background:#E6EF69;border:1px solid #000;outline:#4C4C4C 1px solid;height:5px}

.calendar{table-layout:fixed}
.calendar th{text-align:center}
.calendar td{vertical-align:top;height:120px}
.calendar ul{padding:0}

.editby{width:40%;text-align:center}

/* ----------------------------------------------------------------------------------- */

.marker{width:20px;height:20px;padding:2px;margin:5px;text-align:center;vertical-align:middle;background:#1C1C1C;overflow:hidden;border:1px solid #2C2C2C;border-radius:0 10px;box-shadow:1px 1px 1px#000,0 0 3px#000;font:bold 20px/18px lucida console,monospace;color:#000;text-shadow:0 1px 1px #4C4C4C}

.marker.new{background:#101010;box-shadow:1px 1px 1px#000,0 0 3px#E6EF69}

.icon{display:inline-block;width:12px;padding:1px;margin-right:5px;height:6px;font:bold 8px/8px lucida console,monospace;background:#101010;border:1px solid #303030;box-shadow:1px 1px 1px #000,0 0 3px#000;color:#EAEAEA;border-radius:0 5px;text-align:center;overflow:hidden}
.icon.square{width:6px;border-radius:0;margin:0;line-height:6px}
.icon.square.warnbox{background:#E6EF69}

.pbutton{display:inline-block;width:60px;height:8px;padding:5px;margin:2px 2px 0;background:#101010;border:1px solid #303030;box-shadow:1px 1px 1px#000,0 0 2px#000;border-radius:0 10px;text-align:center;overflow:hidden;font:bold 10px/8px lucida console,monospace;color:#EAEAEA}

.pbutton:hover,.pbutton.pbactive{box-shadow:1px 1px 1px#000,0 0 2px#E6EF69}
.pbutton:active,.pbactive,.pblocked{background:#1C1C1C}
.pblocked{color:#8A8A8A}
.pblocked:hover,.pblocked:active{box-shadow:1px 1px 1px#000,0 0 2px#000!important}

.pbutton.pbsmall{width:8px}

.tpcicon{display:inline-block;background:#101010;border:1px solid #4C4C4C;width:5px;height:5px;font:bold 10px/8px lucida console,monospace;padding:5px;border-radius:0 5px;box-shadow:1px 1px 1px#000,0 0 4px#000;text-align:center;overflow:hidden}
.tpcicon.tinew{box-shadow:1px 1px 1px#000,0 0 4px#E6EF69}
.tpcicon.tipoll{background:#103020;border-color:#4C6C5C}
.tpcicon.tihot{background:#302010;border-color:#6C5C4C}

.pipblock{display:table-cell;width:8px;height:8px;overflow:hidden;font:5px lucida console,monospace;background:#E6EF69;border:1px solid #F6FF79}
.pip{background:#000;border:1px solid #4C4C4C;margin:10px auto;display:table;border-spacing:1px}

.avatarblock{width:50px;height:50px;font:bold 50px/50px lucida console,monospace;background:#101010;border:1px solid #303030;outline:#000 1px solid;margin:10px auto;padding:5px;color:#EAEAEA;text-align:center}


Code: Theme Layout
 
<!-- HEADER --><hr class='sep' /><!-- TOPMENU --><div id="content"><!-- SUBMENU --><!-- NAV --><!-- BOARD --></div><noscript><h6 id="skincopy"><strong>BGBTRC</strong> by <strong>Meta Ing</strong> of <a href="http://resources.zetaboards.com/" target="_blank"><abbr title="Zathyus Networks Resources">ZNR</abbr></a> and <a href="http://outlineforum.com">Outline</a></h6></noscript><hr class='sep' /><script type="text/javascript">
//<![CDATA[
var s=document.getElementById('submenu'),a=s.getElementsByTagName('a'),r;
for(i=0;i<a.length;i++){
r=new RegExp('^'+a[i]);
if(r.test(location.href)){a[i].style.background='#1A1A1A';}
}
var r=document.getElementsByClassName('search_results'),p=/\/.+?\/search/i;
if(p.test(location.pathname)){for(i=0;i<r.length;i++){r[i].getElementsByTagName('h3')[0].nextSibling.textContent='';}}
document.getElementById('main').innerHTML+=' <h6 id="skincopy"><strong>BGBTRC</strong> by <strong>Meta Ing</strong> of <a href="http://resources.zetaboards.com/" target="_blank"><abbr title="Zathyus Networks Resources">ZNR</abbr></a> and <a href="http://outlineforum.com">Outline</a></h6>';
//]]>
</script>





Theme Images Table - Click to view
Edited by Helena, Jun 16 2012, 01:10 AM.
Offline Profile Quote Post Goto Top
 
Replies:
Meta Ing-ZNR
Member Avatar
---
[ *  *  *  * ]
Thanks for all the compliments. =D

Sayf Udeen - The sidebar is (as Geoffrey pointed out) quite empty on it's own, but you can always add more content to it. Links, a "latest discussions" box and/or affilates are just a few examples that come to mind.
Offline Profile Quote Post Goto Top
 
Maad
Member Avatar
Anger
[ *  *  * ]
Thank you for this theme. Beyond wicked. :up:

Anyway, can i change or edit some graphic icons?
Edited by Maad, Jul 18 2012, 07:31 AM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Dark · Next Topic »
Add Reply
  • Pages:
  • 1
  • 2