Welcome Guest [Log In] [Register]
  • Pages:
  • 1
  • 5
Vox Conversion
Topic Started: Jun 14 2008, 10:20 PM (6,531 Views)
Nicola
Member Avatar
Zatharawrus
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 :r

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 :P
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.
Goto Top
 
Cody
Member Avatar
TZ Addict
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. :P
Goto Top
 
Steve
Member Avatar
in here is the dream
Looks really nice Nicola. Well done. :D
Posted Image

Posted Image
Goto Top
 
Nicola
Member Avatar
Zatharawrus
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 :P

Fix for Firefox and make it look crummy in IE?
Leave for Firefox and let IE users win a little?

decisions! :P
Goto Top
 
Pedro
Member Avatar
(>X.x)>

I say fix for Firefox and screw IE. :P

The theme looks great, Nic. You did an awesome job converting the skin. :D
♫♪♫♪♫♪
Posted Image

Posted Image--->My DeviantART<---- Thanks Ecliptica for the awesome emoticon! :r
Goto Top
 
Nicola
Member Avatar
Zatharawrus
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.
Goto Top
 
Jago
Member Avatar
I have become, comfortably numb.
Very nice conversion, Nic. Always liked this skin and it seems to suit Zetaboards quite nicely.
Posted Image

http://www.welsh-translate.com/

+Jago - 12/10/06 - 19/3/07 - 12/1/08 - 15/11/08
Goto Top
 
cloudpants
Member Avatar
.
Nicola
Jun 14 2008, 11:01 PM
Tahoma looks gross in Safari. Safari users are going to eat me!!
nah i'll be nice.
Posted Image
Goto Top
 
lostforwords
Member Avatar
everybody wants to be right
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. :hehe:

Oh and the fonts look fine to me in Safari. :arr:
Open Eyes - ZB News Broadcast
ZB Wiki - Create a page about your forum & add it to the ultimate forum index!

Posted Image
Goto Top
 
amhc
Member Avatar
resident jesus
Good job on the conversion. :)
Goto Top
 
Leonardo
Member Avatar
I Wonder
Nice conversion ;D
Edited by Leonardo, Jun 15 2008, 07:22 AM.
Posted Image
Signature made by Raymond
Goto Top
 
Seraphim.
Member Avatar
Possible Bot
Great job on the conversion Nic. :)
A Premier Gaming Social Network
Posted Image
Goto Top
 
Nicola
Member Avatar
Zatharawrus
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. :hehe:
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. ^_^
Goto Top
 
Jenny
Member Avatar
killer queen
It looks amazing, Nic! :D
Posted Image

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.



Goto Top
 
Nicola
Member Avatar
Zatharawrus
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 :D
Edited by Nicola, Jun 15 2008, 07:23 PM.
Goto Top
 
Akira.
Member Avatar
ryo wa no koto SUKI
I'll be willing to do the emotes, I like this theme a lot too.
[MY blog]
Goto Top
 
Skyvale
Member Avatar
Thanks for the avatar, TTO!
I really like that, Nicola! Looks great to me. ^_^
Posted ImageDog-eat-dog world - [Blog Post]
Goto Top
 
Psychosocial
TZ Obsessed
Great conversion Nicola! :D
Goto Top
 
Jago
Member Avatar
I have become, comfortably numb.
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/
Posted Image

http://www.welsh-translate.com/

+Jago - 12/10/06 - 19/3/07 - 12/1/08 - 15/11/08
Goto Top
 
.Dre
Member Avatar
Unpacked
Jago
Jun 16 2008, 03:25 PM
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/
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
Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Orange, Yellow, Brown · Next Topic »
  • Pages:
  • 1
  • 5