|
Vox Conversion
|
|
Topic Started: Jun 14 2008, 10:20 PM (6,531 Views)
|
|
Nicola
|
Jun 14 2008, 10:20 PM
Post #1
|
Zatharawrus
- Posts:
- 46,441
- Group:
- Former Staff
- Member
- #34,935
- Joined:
- November 4, 2004
|
Nephos gave me permission to convert any of his IF skins to Zetaboards the other day, so I jumped at the chance to convert one of my favourite IF skins: Vox. I feel a bit iffy with this because the graphics for Vox were pretty small. Zetaboards has a more chunky feel to it in comparison to ZB, and ZB lacks the 'titlemedium' which skinners use as a nice transition from the maintitle to the rows. It also bulks up the category header a little. So I recreated the category header and stuck to it as much as possible, and make it a little bigger so that it wasn't completely swamped on the board. None of the graphics used are the originals, but Nephos definitely gets full credit for the sleek and sexy design... which IMO was the skin which started off his streak of truly spectacular skins.... I'll shut up now because I'm starting to sound as cheesy as Locke 
Anyways.
Preview
Graphics: Download here
***********NOTES*********** I've *not* done a full graphic set for two reasons: 1. No one else does full graphic sets so MEH  2. I'm lazy.
There is no banner base or anything. The one in the preview is purely for the theme preview. The banner area should work with any size banner. You may want to adjust/remove the padding for #logo depending on your personal preference.
I'm really rather tired as I post this, so if there are any defaults (which actually look silly, not because they're the same generic grey hex codes I used in the ZB default. Yay for unsucky defaults ) or browser bugs, please post them. I won't bite. IE8 users can suck it. Wait for the full version and then come to me with any errors.
There is a rendering problem in Firefox 2/3. The category headers shift off to the right by 1px, as does the category footer. If you want to fix this, and risk breaking it in other browsers, add this:
- CSS
-
html > body .h2wrap, .category .foot_left{ margin-left: -1px; }
Anywhere to the Theme Appearance. It has not been included in the CSS here since 3/4 of the most commonly used browsers are not having the same error.
Theme Layout
- Code:
-
<div id="main_content"> <div id="left"> <div id="right">
<!-- TOPMENU --> <!-- HEADER -->
<div id="submenu_wrap"> <!-- SUBMENU --> </div> <div id="wrap"> <!-- NAV --> <!-- BOARD --> </div>
</div> </div> <!-- end borders --> </div>
<script type="text/javascript" src="http://209.85.62.24/11/88/0/p32184/h2.js"></script> <script type="text/javascript"> //<![CDATA[ $(function() { ff=(navigator.userAgent.indexOf("Firefox")!=-1)?" style='position:relative;left:-1px'":""; $(".category td.c_foot").append('<div class="foot_left"'+ff+'></div><div class="foot_right"></div>'); $("#stats td.c_foot .right").prependTo("#stats .foot_right"); $("blockquote dl dt:contains('Code:')").parent("dl").addClass("code_dl"); $("ul#top_menu").wrap('<div id="top_wrap"></div>'); $("#copyright").appendTo("#wrap"); $("#foot_datetime img").removeAttr(); $("#foot_datetime img").attr("src","http://209.85.62.24/11/88/0/p31780/clock.png"); $("#copyright").append('<br />Vox by <a href="http://s2.zetaboards.com/ifskinzone"><b>Nephos</b></a>.'); }); //]]> </script>
Theme Appearance
- Code:
-
/* Theme based on 'Vox' by Nephos, Aka Da Vinci, from IFSZ/ZBTZ */ /* Converted to Zetaboards by Nicola */ /* Get this theme at 'ZB Theme Zone' or the Official Support Forums */
html,body { background: url(http://209.85.62.24/11/88/0/p31384/bg.png); color:#888; font-family:"Tahoma", "Arial", "Bitstream Vera Sans", "Verdana", sans-serif; font-size:93.3%; margin:0; padding:0; } a { text-decoration: none; color: #D1691D; font-weight: normal; }
a:hover { color: #F18535; text-decoration: none; font-weight: normal; }
hr { background-color:#000; border:0; border-top: 1px solid #000; border-bottom: 1px solid #444; clear:both; color:#000; height:1px; } table { border-collapse:collapse; border-spacing:0; clear:both; empty-cells:show; width:100%; } th,td { border:1px solid #000; } th { background:url(http://209.85.62.24/11/88/0/p31182/th.png) repeat-x top #252525; color:#777; font-weight:400; padding:1px 5px; text-align:left; font-size: 80%!important; } td { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #252525; color:#999; padding:5px 10px; } .category td { padding: 2px 5px; } th a,th a:hover { color:#888; font-weight:700; } h1 { font-size:200%; } h2,h3 { font-size:100%; } .category h2,.topic h2,#portal h2,#portal_foot h2,thead th, .calendar thead th, table thead th{ background: url(http://209.85.62.24/11/88/0/p31166/h2_center.png) repeat-x; color:#000; font-size:90%; font-weight:700; }
.calendar thead th, table thead th { padding: 3px 5px 8px 5px!important; color: #000; } thead th { border-bottom-width:1px; padding:5px; text-align:center; } h2.special { background: url(http://209.85.62.24/11/88/0/p31166/h2_center.png) repeat-x; } input,select,textarea,button,a.btn_fake { background: url(http://209.85.62.24/11/88/0/p31846/dark_cell.png) repeat-x top #1f1f1f; border:1px solid #000; color:#888; padding:3px 5px; vertical-align:middle; } textarea { font-family:"Tahoma", sans-serif; font-size:100%; margin:auto; width:98%; } input:focus,input.focus,textarea:focus,textarea.focus { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #252525; } .submit_error { background:#fff8eb; border:1px solid #e77700; } button,a.btn_fake { background:url(http://209.85.62.24/11/88/0/p31728/button.png) repeat-x top #2f3031; color:#aaa; cursor:default; margin-bottom: 2px; font-family: Arial, Helvetica, sans-serif; font-size:90%; overflow:visible; width:auto; } button:hover,a.btn_fake:hover { border-color:#D1691D; cursor: pointer } button.btn_text { background:none; border:0; cursor:pointer; font-family: "Arial", "Bitstream Vera Sans", Verdana, sans-serif; font-size:100%; } .notice { background:#fff; border:2px solid #000; color:#333; margin:10px auto; width:70%; } .notice dt { color:#8CB5E7; font-weight:700; } .notice dd { font-style:italic; } dl.info { background: #c5c5c6; border-color:#676767; color: #000; } .info dt { background: url(http://209.85.62.24/11/88/0/p31776/notice.png) repeat-x top #a4a4a4; color:#000; border-bottom: 1px solid #686868; } dl.error { background:#cc4f13; border-color:#952c09; color: #000; } .error dt { background: url(http://209.85.62.24/11/88/0/p31777/warning.png) repeat-x top #b94219; color:#000; border-bottom: 1px solid #952c09; } #top ul,#nav,ul.cat-pages,ul.cat-topicpages,table.calendar ul,div.meta_menu ul,#pm_folderlist,#profile_menuwrap ul { list-style:none; padding:0; } #profile_menuwrap ul,ul.cat-topicpages,blockquote dl,#fast-reply dd { margin:0; } #top li,#nav li,ul.cat-pages li,ul.cat-topicpages li,table.calendar li,#pm_folderlist li,#profile_menuwrap li,#ucp_gallery li { display:inline; } #top { height:26px; padding:0 0% 4px 2%; font-size: 80%; border-bottom: 1px solid #3e3f40; background: url(http://209.85.62.24/11/88/0/p31698/top.png); } #top_info { color:#999; float:left; margin-top:8px; font-size: 110%; } #top_info a { color: #ccc; font-weight: bold; } #top_menu { float:right; margin-top:0px; background: url(http://209.85.62.24/11/88/0/p31695/top_menu.png) bottom left; padding-left: 15px!important; border:0; height: 30px; }
#top_menu img { margin-right: 3px; margin-top: -2px; vertical-align: middle; }
#top_wrap { background: url(http://209.85.62.24/11/88/0/p31696/top_wrap.png) right top no-repeat; height: 30px; padding-right: 10px; }
.drop_menu { margin: 0; } .drop_menu li { float:left; margin-right:1px; text-align:center; }
.drop_menu li:hover { background: url(http://209.85.62.24/11/88/0/p31709/top_menu_a.png) no-repeat 0 4px; } .drop_menu a { color:#000; display:block; padding:7px .25em 4px .25em; position:relative; width: 105px; font-weight: 700; } .drop_menu ul { color:#fff; left:-999em; margin:0; position:absolute; width: 100px; margin-bottom:0; } .drop_menu ul li { font-size:85%; margin:0; padding:0; width: 104px; } .drop_menu ul li a { background: url(http://209.85.62.24/11/88/0/p31702/top_menu_li.png) no-repeat #222222; border:0 solid #000; border-width:0 1px 1px; display:block; padding:4px 5%; width: 97px; color: #888; } .drop_menu li ul li a:hover { color: #D1691D; } #logo { background:url(http://209.85.62.24/11/88/0/p31719/logo_bg.png) repeat-x top #252525; border-bottom: 1px solid #000; clear:both; padding: 30px 20px; text-align: center; } #submenu { background: url(http://209.85.62.24/11/88/0/p31231/submenu_right.png) no-repeat right center; color:#586eb1; font-size:80%; padding:4px 1% 6px; text-align:right; }
#submenu a { color: #000; }
#submenu_wrap { background: url(http://209.85.62.24/11/88/0/p31232/submenu.png) no-repeat left center; border-bottom: 1px solid #000; height: 23px; } #wrap { background:#1e1e1e; padding: 10px; } #nav { color:#aaa; padding: 7px 0px 6px 0px; font-size: 80%; text-transform: uppercase; } #nav a { font-weight: bold; } .meta_box { background:url(http://209.85.62.24/11/88/0/p31719/logo_bg.png) repeat-x top #252525; border:2px solid #555; font-size:85%; line-height:150%; padding:10px 25px; } .meta_menu { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x 0 24px #222; border:1px solid #000; padding:0; width:49%; } .meta_menu h3 { background: url(http://209.85.62.24/11/88/0/p31166/h2_center.png) repeat-x center; border:1px solid #000; clear:both; color:#000; padding: 0px 5px 7px 5px; font-size:90%; font-weight:700; margin:-1px; text-align:center; } .meta_menu a,.meta_menu a:hover { color:#666; } ul.cat-pages { float:left; font-size:90%; margin:15px 0; padding: 5px 1px; width:49%; } .cat-pages a,.cat-pagesjump i,.cat-topicpages a { background:#333; border:1px solid #000; color:#aaa; } .cat-pages a:hover,.cat-topicpages a:hover { background: #d1691d; color:#000; } .cat-pages span { background: #d1691d; color:#000; border:1px solid #000; cursor:default; font-weight:700; padding:2px 5px; } .cat-pages input { background:#222; color:#ccc; padding:3px 5px; vertical-align:baseline; } ul.cat-topicpages { float:right; font-size:80%; padding:1px 0; } tr.generic td,div.generic { font-size:120%; font-weight:700; padding:20px; text-align:center; } td.c_head,td.c_foot,td.c_sort { background:url(http://209.85.62.24/11/88/0/p31163/foot_back.png) repeat-x bottom #272727; color:#666; font-size:80%; } td.c_desc { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; font-weight:700; text-align:right; vertical-align:middle; width:200px; } td.c_desc small { display:block; font-weight:400; } tr.pm_new td { background:#333; font-weight:700; } tr.hidden td.c_post { background:#444; } .bday { background:url(http://209.85.62.24/static/1/s_minibday.png) no-repeat; color:#425384; font-size:90%; font-weight:700; height:16px; padding:2px 2px 2px 18px; width:20px; } .c_mark { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; text-align:center; width:1%; } .c_forum { color:#888; font-size:70%; width:60%; }
.c_forum strong a { font-size:110%; } td.c_last { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; font-size:80%; } td.c_last a { } .c_forum-desc { color:#aaa; font-size:85%; } .c_last-title { background:url(http://209.85.62.24/11/88/0/p31807/last.png) no-repeat left; display:block; line-height:16px; padding-left:10px; } td.c_info-v,td.c_info-t,td.c_info-r { font-size:80%; padding:5px; text-align:center;
} td.c_subforum { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; color:#777; font-size:80%; } .cat_head td { border:0; padding:0; }
.description { color:#888; font-size:85%; } a.member:hover { color:#888; } td#stats_events a,td#stats_events span { background:url(http://209.85.62.24/11/88/0/p31811/minical.png) no-repeat 2px; padding:4px 0 4px 20px; } td.c_username { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; padding:2px 0; text-align:center; } td.c_username a { font-size:140%; font-weight:700; } td.c_user { font-size:80%; } td.c_user dl { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; border:1px solid #000; margin:10px 0; padding:5px 7px; width:160px; } dl.user_profile { overflow:hidden; word-wrap:break-word; } dl.user_profile dd { font-style:italic; margin-left:8px; } dl.user_info dd { font-weight:700; margin-bottom:1px; }
#profile_menuwrap { padding-top: 3px; padding-bottom: 2px; }
#profile_menu ul { border-top:0; } #profile_menu a { background: url(http://209.85.62.24/11/88/0/p31703/profile_menuli.png) no-repeat #222222; border:1px solid #000; color: #888!important; padding: 1px 7px; width: 120px; } #profile_menu a:hover { color: #D1691D!important; } #profile_menu li li a { border-top:0; padding: 5px 7px; width: 120px; } #profile_menu li ul li a:hover { color: #D1691D; } td.c_poll-choice label { font-weight:700; padding-left:1em; } td.c_poll-votes { font-size:120%; text-align:center; width:15%; } td.c_poll-bar div { background:url(http://209.85.62.24/11/88/0/p31810/poll_right.png) no-repeat right; float:left; height:16px; padding-right:3px; } td.c_poll-bar span { background:url(http://209.85.62.24/11/88/0/p31809/poll_left.png) no-repeat; display:block; float:left; height:16px; width:3px; } .editby,.queued { border:1px dotted #000; color:#999; font-size:85%; font-style:italic; margin-top:1em; padding:3px 5px; } .queued { background-color:#222; border-color:#000; } blockquote { background: #2a2a2a; border:1px solid #000; margin:10px auto; width:98%; }
blockquote div { margin: 1px!important; background: #1f1f1f; } blockquote dl { background:url(http://209.85.62.24/11/88/0/p31478/quote_dl.png) repeat-x top right; border-bottom:1px solid #000; color:#888; padding-right: 30px; margin-right: -1px; }
.code_dl { background: url(http://209.85.62.24/11/88/0/p31477/code_dl.png) no-repeat right top ; margin:0; } blockquote dl dt { color:#aaa; float:left; font-size: 90%; font-weight:700; margin-top: 1px; } code { background: #1f1f1f; display:block; font-family:Monaco, Consolas, "Courier New", Courier, monospace; max-height:400px; overflow:auto; white-space:pre; margin: 1px!important; } div.spoiler { border:1px solid #000; border-top:0; background: #333; color: #ccc; padding:5px 7px; } div.spoiler_toggle { background:url(http://209.85.62.24/11/88/0/p31728/button.png) repeat-x top #2f3031; border:1px solid #000; color:#D1691D; cursor:pointer; font-weight:700; padding:5px 7px; } td.c_postinfo { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; color:#999; font-size:80%; vertical-align:middle; } td.c_postinfo input { vertical-align:middle; } td.c_sig { color:#888; font-size:80%; } td.c_sig blockquote { background:none transparent; border:0; border-left:3px solid #888; padding-left:5px; } td.c_sig blockquote dl { background:none transparent; border:0; color:#888; } td.c_sig blockquote dl dt,td.c_sig blockquote dl dd { color:#aaa; padding:0; } td.c_sig blockquote div { background:transparent; margin-left:5px; } tr.c_postfoot td { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; clear:both; } td.c_username { width:195px; } .c_next a { display:block; font-size:125%; font-weight:700; text-align:center; } td.c_view { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; color:#888; } div.c_view-list { color:#999; font-size:92.5%; } dl#fast-reply dt {
background: url(http://209.85.62.24/11/88/0/p31166/h2_center.png) repeat-x bottom; border:1px solid #000; border-bottom:0; color:#000; font-size:90%; font-weight:700; margin:0; padding: 1px 0 11px 10px; text-align: center; } dl#fast-reply dd { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #252525; border:1px solid #000; border-top:0; padding:15px 0; text-align:center; } #c_post-preview { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; border:1px solid #BFC8E3; margin:0 auto 10px; padding:5px; text-align:left; width:98%; } #c_post-resize span { color:#aaa; cursor:pointer; font-size:225%; padding:20px 5px 0; } #emot_wrap { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #252525; border:1px solid #000; } #emot_wrap h3 { background:url(http://209.85.62.24/11/88/0/p31728/button.png) repeat-x top #2f3031; border-bottom:1px solid #000; color:#999; font-size:120%; text-align:center; } #emot_end { border-top:1px solid #000; display:block; font-weight:700; padding:4px 0; text-align:center; } #pm_folders { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; border-left:1px solid #000; border-right:1px solid #000; padding-top:20px; vertical-align:top; width:150px; } #pm_folderlist { position: relative; margin-left:0; margin-top:0 } #pm_folderlist li { background:url(http://209.85.62.24/11/88/0/p31812/pmfolder.png) no-repeat 5px; display:list-item; margin-bottom:4px; padding-left:28px; } #pm_forwarded { border:1px dotted #000; color:#999; font-size:90%; font-style:italic; margin-top:1em; padding:3px 5px; }
#ucp_gallery ul{ padding: 10px; } #ucp_gallery a { color:#aaa; font-weight:700; display: block; padding: 3px 10px 3px 5px; } #ucp_gallery a:hover { color:#D1691D; background: #333; padding: 2px 9px 2px 4px; border: 1px solid #000; } .calendar td.cal_inactive { background: url(http://209.85.62.24/11/88/0/p31846/dark_cell.png) repeat-x top #1f1f1f; color:#353535!important; } .calendar td div { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; border-bottom:1px solid #000; font-weight:700; padding:5px 7px; } .calendar div a { background:url(http://209.85.62.24/static/1/s_minibday.png) no-repeat 5px; float:right; font-size:80%; font-weight:400; padding:0 0 6px 24px; } .calendar li a,.calendar li span { border-color:transparent; border-style:solid; border-width:1px; display:block; padding:3px; } .calendar td#cal_current { background:#191919; border:2px solid #b84f0c; } div.portal_content { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #252525; border:1px solid #000; font-size:88.3%; margin:0; padding:5px 7px; } #portal h2 { font-size:88.3%; } #portal h4 { border-left:1px solid #000; border-right:1px solid #000; color:#777; font-size:88.3%; font-weight:400; margin:0; } #faq dt a { color:#D1691D; font-size:120%; font-weight:700; } #faq dd.faq_more a,#faq dl.faq_more a:hover { color:#999; font-style:italic; } .search_results { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #252525; border:1px solid #000; margin-bottom:1em; padding:5px 7px; font-size: 90%; } .search_results h3 { display:inline; font-size:125%; } .search_results cite,.search_results p { color:#777; font-size:85%; margin:0; }
.search_results p { border-top: 1px dotted #555; padding-top: 3px; }
.search_results div { padding-left: 20px; } #findposts .c_mark { color:#aaa; font-size:200%; font-weight:700; vertical-align:top; } #pmtoast { background:url(http://209.85.62.24/11/88/0/p31719/logo_bg.png) repeat-x bottom #212324; border:2px solid #333; bottom:10px; color:#333; display: none; font-size:90%; position:fixed; right:10px; text-align:right; text-decoration:none; width:200px; z-index:1; } #pmtoast:hover { border-color:#D1691D; } #pmlink { background:url(http://209.85.62.24/11/88/0/p31724/pm_link.png) no-repeat 15px; color:#aaa; display:block; padding:10px 10px 10px 55px; text-decoration:none; border: 2px solid #000; border-bottom: 1px solid #000; } #pmlink big { color:#D1691D; display:block; font-weight:700; padding-bottom:5px; } #pmlink strong { color:#eee; } #pmclose { border:2px solid #000; border-top:1px solid #333; color:#bbb; display:block; font-size:90%; padding:1px 10px; } #pmclose:hover { color:#D1691D; } #foot_wrap { margin:20px 1px 20px 0; } #foot td { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #252525; border:1px solid #000; color:#999; font-size:80%; } #foot a,#foot a:hover { color:#ccc; } #foot #foot_datetime { border-left:1px solid #000; width:1%; white-space:nowrap; } #copyright { color:#fff; font-size:80%; margin:10px 0; text-align:center; } #copyright a { color:#D1691D; font-weight:700; } #c_tos h3 { color:#aaa; font-size:120%; } td.username_ok { background:#e0fae0; } input.username_ok { outline:2px solid #0c0; } td.username_no { background:#fae0e0; } input.username_no { outline:2px solid #e77700; } #acplogin { background: #1e1e1e; height:155px; left:50%; border: 2px solid #444; margin:-137.5px 0 0 -250px; padding-top: 20px; position:absolute; top:50%; width:500px; } #acplogin h1 { display: none; }
#acplogin thead th { background: url(http://209.85.62.24/11/88/0/p31782/acplogin.png) no-repeat 0px 0; padding: 5px 5px 12px 5px; } #acplogin h1 img { position:absolute; left:0; top:0; } a img { border:0; } form { display:inline; margin:0; padding:0; } .category h2,.topic h2,#portal h2 { padding:5px; text-align:left; } h3 { padding:3px 0; } input[type=checkbox] { background:transparent; border:0; padding:0; vertical-align:bottom; } input[type=radio] { border:0; } select { margin:0 7px; padding:0; vertical-align:bottom; } option { margin:2px 0; } button.btn_img { border:0; cursor:pointer; padding:0; } .notice dt,.notice dd { padding:5px 7px; } .drop_menu a img { vertical-align:bottom; } .drop_menu li:hover ul,.drop_menu li.hover ul { left:auto; } #submenu a { padding:3px 5px; } #main { height:1%; } #nav li img { vertical-align:top; } .meta_box,.meta_menu { margin:10px 0; } .meta_box li { display:list-item; list-style-position:inside; list-style-type:square; margin-left:10px; } .meta_menu ul { font-size:90%; margin:5px 5%; } .meta_menu img,.meta_menu span { float:right; margin:10px 20px; } .cat-pages a,.cat-pagesjump i,.cat-topicpages a { cursor:pointer; padding:2px 5px; } .cat-topicpages a { padding:0 2px; } .cat-buttons,.topic-buttons { float:right; margin:15px 0; text-align:right; width:50%; } tr.postbtn td { padding:5px; text-align:center; } .row1,.row2 { line-height:1.4; } td.c_head input,td.c_head button,td.c_foot input,td.c_foot button,td.c_sort input,td.c_sort button { padding:1px; } td.c_desc img,td.c_desc input { float:left; vertical-align:middle; } .category { margin:10px 0 0; } span.collapse,span.uncollapse { cursor:pointer; float:right; position:relative; } .c_mark img { display:block; margin:auto; } .c_last { line-height:1.4; min-width:300px; width:30%; } .category td.c_foot { height:10px; } #stats_members { line-height:1.2; } td.c_cat-mark,td.c_cat-icon { padding:5px 0; text-align:center; width:30px; } td.c_cat-starter { width:125px; } td.c_cat-lastpost { width:175px; } .c_user { vertical-align:top; width:175px; } img.c_user { height: 1px; } .avatar, img.member{ display:block; margin:auto; text-align:center; } .av_wrap { overflow:hidden; text-align:center; margin:auto; } td.c_user .usertitle { text-align:center; margin:3px 0; } .pip { margin:3px 0; white-space:nowrap; } dl.user_info dt,dl.user_info dd { padding:.1em; } dl.user_info dt { float:left; margin:0; min-width:4em; } dl.user_info dd.spacer,dl.user_profile dd.spacer { clear:both; float:none; height:1px;
padding:0; }
td.c_poll-choice { line-height:1.5; padding-left:45%; } td.c_poll-answer { text-align:right; width:42.5%; } td.c_poll-bar { text-align:left; vertical-align:middle; width:42.5%; } * html td.c_poll-bar span { margin-top:3px; } td.c_post { line-height:1.7; vertical-align:top; } td.c_post ul { list-style-type:square; margin-left:10px; } .c_post img,#topic_review img { max-width:90%; } .c_post-attachment { font-size:83.3%; margin-top:1em; padding:1em; } .c_post-attachment dd { margin-left:1em; } .post_sep { font-size:1px; height:1px; } td.c_sig,td.c_nosig { height:1%; vertical-align:top; } td.c_nosig { border-top-style:hidden!important; } blockquote dl dt,blockquote dl dd { padding:2px 4px; } blockquote div,blockquote code { margin:0; padding:5px; } dl#fast-reply { clear:both; margin:auto; width:80%; } dl#fast-reply dd p { margin:-3px; padding:0 5% 10px; text-align:left; } dl#fast-reply dd textarea { display:block; height:100px; margin-bottom:10px; padding:2px; width:90%; font-size: 90%; } #c_post-text { height:223px; } #c_post-resize { float:right; margin-top:-1px; padding:4px 0 0; text-align:right; } #btn_preview { float:left; margin:10px 0 0 1px; } #c_emot { height:225px; vertical-align:top; width:210px; } #emot_list { height:275px; margin:0 auto; overflow:auto; padding:5px 0; text-align:center; } div#emot_list { padding:0; } #emot_list li { display:inline; padding:4px 10px; } #emot_list img { cursor:pointer; vertical-align:baseline; } .pm { margin-bottom:1em; } #pm_datesent { width:200px; } #pm_select { text-align:center; width:1px; } #conversation .c_post { padding:2em; } #ucp_profile,#pm_messages { float:right; } #ucp_settings img,#ucp_profile img { margin:18px 20px; } #ucp_gallery li { float:left; margin:15px 5px; } #ucp_gallery button { cursor:pointer; text-align:center; } .ucp button.btn_text { padding:5px 0; text-align:center; width:100%; } .calendar td { height:125px; padding:0; vertical-align:top; width:14.3%; } .calendar li { display:list-item; font-size:80%; margin:0; } .calendar li.placeholder { padding:4px; } .calendar li span { cursor:default; } .calendar td#cal_current div { padding-top:3px; } #portal_head { margin-bottom:10px; } #portal_foot { margin-top:10px; } #portal_l,#portal_r { font-size:88.3%; margin:0; padding:0; } #portal_l { float:left; width:200px; } #portal_r { float:right; width:150px; } #portal_news { margin:0 160px 0 210px; } #portal_clear { background:transparent; border:none; clear:both; font-size:1px; height:1px; margin:0; padding:0; } .portal_box { margin-bottom:5px; padding:1px; } .portal_box table { clear:none; } #portal h2,#portal_foot h2 { clear:none; margin:0; padding:3px 5px; } #faq { margin:20px 0; } #faq dl { padding:1em; } #faq dt { margin-bottom:5px; } #faq dd { display:list-item; margin:0 0 3px 15px; padding-left:3px; } .search_results div { display:block; margin:5px 0; } #acplogin #loginform { display:block; padding:0 49px 0 50px; }
input,select,td,th { font-size:90%; } button.btn_default,#nav li span,.c_post-attachment dt,#c_tos dt { font-weight:700; } #submenu a:hover,.meta_menu a:hover { text-decoration:underline; } .meta_box h3,td.c_topicfoot strong,#meta_welcome strong { font-size:120%; }
.row2 td { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; } a.member,.calendar td a,.calendar a:hover,#faq dd a,#faq dd a:hover { color:#888; } img,.meta_box button img,td.c_cat-mark input,.c_post-attachment img,.warn img,#ucp_gallery a img { vertical-align:middle; } h1,h2,h3,#nav,#boardmeta,#main { clear:both; margin:0; } #meta_welcome,.search_results { clear:both; } #stats_events { line-height:2; } .c_cat-starter,.c_cat-replies,.c_cat-views,td.c_poll-total,td.c_poll-vote,td.c_topicfoot,.warn,.ucp th,#c_notes,.calendar th { text-align:center; } blockquote dl dd,#foot #foot_links { text-align:right; } #c_post,#ucp_gallery { text-align:center; vertical-align:top; } #files_upload input,.pm .row1 a,.pm .row2 a,#ucp_gallery button img,#findposts td a { display:block; } #ucp_settings,#pm_settings { float:left; } #c_tos dd,#username_response { margin-left:10px; }
#vlx { z-index:1; } #blog { background:#252525; border:1px solid #000; color:#333; margin: 10px auto; } #blog blockquote { background:none; border:none; font-size:85%; padding:0 10px; padding-top: 10px; }
#blog blockquote blockquote { font-size: 100%; border: 1px solid #000; padding: 0; margin: 10px auto; background: #333; } #blog blockquote blockquote div, #blog blockquote blockquote code { background: #282828; border:0!important; } #blog blockquote blockquote dl { padding: 4px; } #blog h1 { float:right; margin-top: 35px; margin-right: 20px; }
#blog h1 a { color: #000; } #blog h2 { background:none; clear:none; font-size:130%; padding:0; } #blog h2,#blog h2 a{ color:#D1691D; }
#blog_user { border: 2px solid #a9a9a9; padding: 8px; } #blog_foot { clear:both; margin-bottom:20px; } #blog_head { background: url(http://209.85.62.24/11/88/0/p31712/blog_head.png) repeat-x center #1e2022; border:8px solid #252525; min-height: 120px; } #blog_head img.avatar { display:inline; } #blog_head:after { content: "."; display: block; height: 0; line-height:0; clear: both; visibility: hidden; } #blog_main { margin:20px 200px 10px 10px; } #blog_categories,#blog_readers,#blog_about,div.blog_options { background: #282828; color: #aaa; margin:15px 0; padding:5px 7px; } #blog_sidebar h3,#blog_sidebar dt { color:#D1691D; font-weight:700; } #blog_sub { background: url(http://209.85.62.24/11/88/0/p31698/top.png); clear:both; position:relative; padding:2px 12px; border-bottom: 1px solid #000; border-top: 1px solid #000; text-align:right; font-size: 80%; } #blog_sub span { padding-top:4px; } #blog_sidebar { background:#1e1e1e; float:right; font-size:93.3%; margin:20px 10px 0 0; padding:0 10px; width:160px; } #blog_sidebar dd { margin-left:10px; } #blog_user { font-size:175%; } #blog table { clear:none; } div.blog_options { font-size:90%; text-align:right; } div.blog_date { background: url(http://209.85.62.24/11/88/0/p31717/blog_date.png) no-repeat center; color:#000; float:right; font-weight:700; font-size: 80%; margin:0px 15px; text-align:center; text-transform:uppercase; width:42px; padding-top: 8px; height: 40px; } div.blog_date span { color:#000; display:block; font-size:115%; font-weight:700; padding:4px 4px; } div.blog_entry { background:#1e1e1e; margin:10px 0; padding:5px 7px; color: #aaa; } #blog_comments li { padding:5px 7px; } #blog_comments li.odd { background: #272727; } #shoutwrap { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #252525; border:1px solid #000; font-size:88.3%; } #shoutwrap td { padding:0; } #shoutbox { list-style-type:none; margin:0; padding:0; } #shoutbox li { padding:5px 7px; } #shoutbox li.odd { background: url(http://209.85.62.24/11/88/0/p31847/light_cell.png) repeat-x top #222; } #shoutbox dl,#shoutbox dt,#shoutbox dd { margin:0; padding:0; } #shoutbox dt { color:#777; font-size:80%; } #shoutopts,#shoutpost { clear:both; text-align:center; }
/***** Three Piece H2 *****/ /* h2wrap is the center stretch.*/ .h2wrap { background: url(http://209.85.62.24/11/88/0/p31166/h2_center.png) repeat-x; }
/* h2left is the left image. */ .h2left { background: url(http://209.85.62.24/11/88/0/p31167/h2_left.png) no-repeat top left; height: 31px; }
/* h2center is the text itself. */ .h2center{ padding: 4px 0px 0px 70px; height: 31px; color: #000; font-size: 90%; } .h2center a { color: #000; }
/* h2right is the right image. */ .h2right { background: url(http://209.85.62.24/11/88/0/p31849/h2_right.png) no-repeat right top; height: 31px; }
/* Collapse/Uncollapse Images */ .collapse,.uncollapse { right: 16px; top: 1px; }
thead td,thead th {padding:0px;background: inherit;border-width:0px;}
/* Leave the above alone. For the bottom, style your profile h2's. */ .profile thead td,.profile thead th {padding:0px;background: inherit;border-width:0px;}
.category td.c_foot { background: url(http://209.85.62.24/11/88/0/p31163/foot_back.png); padding:0; border:0; }
.foot_left { float: left; background: url(http://209.85.62.24/11/88/0/p31164/foot_left.png) no-repeat 0px 0px; height: 17px; width: 13px; }
.foot_right { float: right; background: url(http://209.85.62.24/11/88/0/p31165/foot_right.png) no-repeat right; height: 17px; width: 11px; }
#stats .foot_right { width:600px; padding-right: 10px; }
#stats td { font-size: 80%; padding: 4px 5px;
} #stats td.c_foot { padding: 0; }
#main_content { width: 90%; margin: 0 auto; max-width: 1100px; }
#left { background: url(http://209.85.62.24/11/88/0/p31186/border_left.png) repeat-y left #1c1c1c; padding-left: 48px; }
#right { background: url(http://209.85.62.24/11/88/0/p31187/border_right.png) repeat-y right #1c1c1c; padding-right: 48px; }
#nav_wrap { background: url(http://209.85.62.24/11/88/0/p31172/nav_wrap.png) no-repeat right center; padding-right: 19px; }
#announcement_head th { background: url(http://209.85.62.24/11/88/0/p31166/h2_center.png) repeat-x center; padding: 2px 5px 6px 5px; color: #000; } #announcement_head th a { color: #000; }
.row2.pin td { background: url(http://209.85.62.24/11/88/0/p31846/dark_cell.png) repeat-x top #1f1f1f; } .row1.pin td { background: url(http://209.85.62.24/11/88/0/p31846/dark_cell.png) repeat-x top #1f1f1f; }
.row2.pin td a, .row1.pin td a{ font-weight: bold; color: #aaa; }
.posts td { font-size: 80%; }
#portal_main h2, #portal_foot h2 { padding: 6px 5px 8px 5px; background: url(http://209.85.62.24/11/88/0/p31166/h2_center.png) repeat-x center top; border: 1px solid #000; } #portal_main h2 a { color: #000; } #portal_foot h2 { margin:0; border-bottom:0; font-size: 90%; margin-left: -1px; }
#portal_main h4 { background:url(http://209.85.62.24/11/88/0/p31182/th.png) repeat-x top #252525; padding: 2px 5px; }
.profile thead th, .prefs thead th { background: url(http://209.85.62.24/11/88/0/p31166/h2_center.png) repeat-x center; padding: 2px 5px 7px 5px; }
#c_notes button { margin-top: 3px; }
div.topic h2.special { border-left: 1px solid #000; border-right: 1px solid #000; margin-left: -1px; }
div.topic { margin-top: 10px; }
thead th a, thead th a:hover { color: #000!important; } .posts .h2center { font-size: 100%; }
Edit: Emot cell background colour fixed. Post resize spans lighter. // 5th July
Edited by Nicola, Jul 5 2008, 06:33 PM.
|
|
|
| |
|
Cody
|
Jun 14 2008, 10:32 PM
Post #2
|
TZ Addict
- Posts:
- 18,206
- Group:
- Members
- Member
- #4,591
- Joined:
- December 27, 2003
|
I'm pretty sure you already know my stance on this theme, but you did a wonderful job converting it. Everything flows so well, and it's practically flawless.
|
|
|
| |
|
Steve
|
Jun 14 2008, 10:32 PM
Post #3
|
in here is the dream
- Posts:
- 35,753
- Group:
- Former Staff
- Member
- #4,261
- Joined:
- December 21, 2003
|
Looks really nice Nicola. Well done.
|


|
| |
|
Nicola
|
Jun 14 2008, 10:36 PM
Post #4
|
Zatharawrus
- Posts:
- 46,441
- Group:
- Former Staff
- Member
- #34,935
- Joined:
- November 4, 2004
|
I'm unsure what to do about the H2. In Firefox it's shifted off toward the right by 1px, and the footer is the same. If I correct them using the html > thing, it makes them 1px too far over to the left in IE7  Heh, just checked, does it here too 
Fix for Firefox and make it look crummy in IE? Leave for Firefox and let IE users win a little?
decisions!
|
|
|
| |
|
Pedro
|
Jun 14 2008, 10:45 PM
Post #5
|
(>X.x)>
- Posts:
- 16,953
- Group:
- Resource Staff
- Member
- #155,845
- Joined:
- March 14, 2006
|
I say fix for Firefox and screw IE.
The theme looks great, Nic. You did an awesome job converting the skin.
|
♫♪♫♪♫♪

--->My DeviantART<---- Thanks Ecliptica for the awesome emoticon! 
|
| |
|
Nicola
|
Jun 14 2008, 11:01 PM
Post #6
|
Zatharawrus
- Posts:
- 46,441
- Group:
- Former Staff
- Member
- #34,935
- Joined:
- November 4, 2004
|
Tahoma looks gross in Safari. Safari users are going to eat me!!
H2 is alignment is fine in IE, Safari and Opera. Just not Firefox. So, I won't be fixing it. I may harass choco over it, though 
I'll add an extra note if people want to add it in. Make it optional.
|
|
|
| |
|
Jago
|
Jun 14 2008, 11:32 PM
Post #7
|
I have become, comfortably numb.
- Posts:
- 7,497
- Group:
- Members
- Member
- #2,726
- Joined:
- November 8, 2003
|
Very nice conversion, Nic. Always liked this skin and it seems to suit Zetaboards quite nicely.
|

http://www.welsh-translate.com/
+Jago - 12/10/06 - 19/3/07 - 12/1/08 - 15/11/08
|
| |
|
cloudpants
|
Jun 15 2008, 01:11 AM
Post #8
|
.
- Posts:
- 11,197
- Group:
- Former Staff
- Member
- #1,510
- Joined:
- September 17, 2003
|
- Nicola
- Jun 14 2008, 11:01 PM
Tahoma looks gross in Safari. Safari users are going to eat me!! nah i'll be nice.
|
|
| |
|
lostforwords
|
Jun 15 2008, 01:53 AM
Post #9
|
everybody wants to be right
- Posts:
- 2,327
- Group:
- Members
- Member
- #128,591
- Joined:
- December 7, 2005
|
It's awesome, Nicola. I've always loved this skin and wondered if it was going to be converted, so I'm glad it was done so well.
Only thing I noticed was how thin the blog is compared to everything else, and that the quote and code boxes look funny on it.
Oh and the fonts look fine to me in Safari.
|
Open Eyes - ZB News Broadcast ZB Wiki - Create a page about your forum & add it to the ultimate forum index!
|
| |
amhc
|
Jun 15 2008, 01:57 AM
Post #10
|
resident jesus
- Posts:
- 14,594
- Group:
- Disabled Account
- Member
- #197,245
- Joined:
- July 28, 2006
|
Good job on the conversion.
|
|
|
| |
|
Leonardo
|
Jun 15 2008, 07:16 AM
Post #11
|
I Wonder
- Posts:
- 5,976
- Group:
- Former Staff
- Member
- #256,601
- Joined:
- March 10, 2007
|
Nice conversion ;D
Edited by Leonardo, Jun 15 2008, 07:22 AM.
|
 Signature made by Raymond
|
| |
|
Seraphim.
|
Jun 15 2008, 07:21 AM
Post #12
|
Possible Bot
- Posts:
- 1,980
- Group:
- Members
- Member
- #201,066
- Joined:
- August 8, 2006
|
Great job on the conversion Nic.
|
A Premier Gaming Social Network
|
| |
|
Nicola
|
Jun 15 2008, 07:35 AM
Post #13
|
Zatharawrus
- Posts:
- 46,441
- Group:
- Former Staff
- Member
- #34,935
- Joined:
- November 4, 2004
|
- lostforwords
- Jun 15 2008, 01:53 AM
Only thing I noticed was how thin the blog is compared to everything else, and that the quote and code boxes look funny on it. Shoot, thanks. I had made the blog smaller when I was going to do something nifty with the header, but I didn't do it in the end. Then I forgot to adjust the text size and border for quotes. Because the entries are also in a blockquote, a 90% font size attribute makes the quotes stupidly small. Which adds to my list of CSS bits that I need to talk to brandon about. I'll adjust that later.
|
|
|
| |
|
Jenny
|
Jun 15 2008, 08:01 AM
Post #14
|
killer queen
- Posts:
- 5,419
- Group:
- Former Staff
- Member
- #307,791
- Joined:
- November 4, 2007
|
It looks amazing, Nic!
|

Hang on to the glory at my right hand Here laid to rest is our love ever longed With truth on the shores of compassion You seem to take premise to all of these songs -Coheed & Cambria.
|
| |
|
Nicola
|
Jun 15 2008, 10:23 AM
Post #15
|
Zatharawrus
- Posts:
- 46,441
- Group:
- Former Staff
- Member
- #34,935
- Joined:
- November 4, 2004
|
Blog bits are fixed 
However the code issue is something we need to figure out our end. It needs a JS fix and the fix for it hasn't been working so we need to look into it some time this week ( Nicola hopes ._. )
Edit:
H2 and foot problems fixed thanks to Choco
Edited by Nicola, Jun 15 2008, 07:23 PM.
|
|
|
| |
|
Akira.
|
Jun 15 2008, 09:01 PM
Post #16
|
ryo wa no koto SUKI
- Posts:
- 3,999
- Group:
- Members
- Member
- #250,904
- Joined:
- February 15, 2007
|
I'll be willing to do the emotes, I like this theme a lot too.
|
|
[MY blog]
|
| |
|
Skyvale
|
Jun 16 2008, 02:37 PM
Post #17
|
Thanks for the avatar, TTO!
- Posts:
- 11,387
- Group:
- Former Staff
- Member
- #126,319
- Joined:
- November 29, 2005
- Latest Design
- Ooooh, an extra profile field! Awesome!
|
I really like that, Nicola! Looks great to me.
|
Dog-eat-dog world - [Blog Post]
|
| |
|
Psychosocial
|
Jun 16 2008, 03:08 PM
Post #18
|
TZ Obsessed
- Posts:
- 2,430
- Group:
- Members
- Member
- #288,992
- Joined:
- July 26, 2007
|
Great conversion Nicola!
|
|
|
| |
|
Jago
|
Jun 16 2008, 03:25 PM
Post #19
|
I have become, comfortably numb.
- Posts:
- 7,497
- Group:
- Members
- Member
- #2,726
- Joined:
- November 8, 2003
|
I have noticed one weird thing (its in Firefox but it could be in all of them) is this; http://s1.zetaboards.com/Testing/pages/announcements/
|

http://www.welsh-translate.com/
+Jago - 12/10/06 - 19/3/07 - 12/1/08 - 15/11/08
|
| |
|
.Dre
|
Jun 16 2008, 03:34 PM
Post #20
|
Unpacked
- Posts:
- 76
- Group:
- Members
- Member
- #345,202
- Joined:
- May 25, 2008
|
- Jago
- Jun 16 2008, 03:25 PM
i dont see nothing weird with it. Unless your talking about the white in the announcement boxes, but thats suppose to look like that because thats how the code it
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|