Frenzy Template

[bbaraniec]

Any ETA?

[Scottas]

No ETA.

I had a go a while ago but soon realised my coding chops weren't up to much.

I'm going to have a proper go this weekend and see how much I can get done.

I've uploaded the original PSD if anyone else wants a stab at converting it. - https://docs.google.com/file/d/0B66cY6z ... sp=sharing

* It's a fairly dense PSD and you may need CS6 to view all the nested groups.

[Kverbr2]

Been pretty busy.. You can use this with the Stylish plugin for chrome with the default sabnzbd template for a temp if you like.

Code: Select all

html {
height: 100%;
}
body {
height: 100%;
background: #E7E9EB!important;
padding-bottom: 0!important;
}
#master-width {
min-height:100%;
background-color: #F9F9F9;
clear: both;
margin: 0px auto;
width: 90%!important;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.2);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.2);
   box-shadow: 0px 0px 10px rgba(0,0,0,.2);
}
.navigation {
height: 48px;
background: rgb(86,86,86);
background: -moz-linear-gradient(top,  rgb(86,86,86) 0%, rgb(69,69,69) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(86,86,86)), color-stop(100%,rgb(69,69,69)));
background: -webkit-linear-gradient(top,  rgb(86,86,86) 0%,rgb(69,69,69) 100%);
background: -o-linear-gradient(top,  rgb(86,86,86) 0%,rgb(69,69,69) 100%);
background: -ms-linear-gradient(top,  rgb(86,86,86) 0%,rgb(69,69,69) 100%);
background: linear-gradient(to bottom,  rgb(86,86,86) 0%,rgb(69,69,69) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#454545',GradientType=0 );
}
.navigation ul#navigation_menu_left {
margin-top: 10px;
margin-left: 17px;
float: left;
background: rgb(42,42,42);
background: -moz-linear-gradient(top,  rgb(42,42,42) 0%, rgb(58,58,58) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(42,42,42)), color-stop(100%,rgb(58,58,58)));
background: -webkit-linear-gradient(top,  rgb(42,42,42) 0%,rgb(58,58,58) 100%);
background: -o-linear-gradient(top,  rgb(42,42,42) 0%,rgb(58,58,58) 100%);
background: -ms-linear-gradient(top,  rgb(42,42,42) 0%,rgb(58,58,58) 100%);
background: linear-gradient(to bottom,  rgb(42,42,42) 0%,rgb(58,58,58) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a2a2a', endColorstr='#3a3a3a',GradientType=0 );
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #151515;
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2);
-moz-box-shadow:    0px 1px 1px rgba(255, 255, 255, 0.2);
box-shadow:         0px 1px 1px rgba(255, 255, 255, 0.2);
}
.navigation ul.menu {
height: 26px;
}
.queueTable {
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.queueTable tbody {
outline: 1px solid #C5C5C5;
}
.queueTable td.historyTitle {
height: 42px;
}
.queueTable td {
border-bottom: 1px solid #DFDFDF;
}
.queueTable tr {
background-color: #F5F6F8;
}
.queueTable tr.alt {
background-color: #F8FAF9;
}
.queueTable tr:hover td.historyTitle {
background: none;}
.queueTable tr:hover,
  .queueTable tr.alt:hover {
background: rgb(244,244,244);
background: -moz-linear-gradient(top,  rgb(244,244,244) 0%, rgb(255,255,255) 12%, rgb(255,255,255) 88%, rgb(244,244,244) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(244,244,244)), color-stop(12%,rgb(255,255,255)), color-stop(88%,rgb(255,255,255)), color-stop(100%,rgb(244,244,244)));
background: -webkit-linear-gradient(top,  rgb(244,244,244) 0%,rgb(255,255,255) 12%,rgb(255,255,255) 88%,rgb(244,244,244) 100%);
background: -o-linear-gradient(top,  rgb(244,244,244) 0%,rgb(255,255,255) 12%,rgb(255,255,255) 88%,rgb(244,244,244) 100%);
background: -ms-linear-gradient(top,  rgb(244,244,244) 0%,rgb(255,255,255) 12%,rgb(255,255,255) 88%,rgb(244,244,244) 100%);
background: linear-gradient(to bottom,  rgb(244,244,244) 0%,rgb(255,255,255) 12%,rgb(255,255,255) 88%,rgb(244,244,244) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f4f4f4',GradientType=0 );
    color: #000;
}
#hdr-history h1 {
display:none;
}
.box_banner_menu {
margin: -3px 0;
}
.box_banner_r {
height: 27px;
}
.sprite_ql_cross {
background: url(http://s12.postimage.org/48luchyg9/delete.gif) no-repeat;
}
.icon_nzb_remove {
padding-left: 30px;
}
.history_added {
margin-right: 10px;
}
ul.box_banner_menu li select { 
margin-top: 5px!important; 
}
div.centerpiece {
position: relative;
top: -84px;
}
#hdr-queue .logo h1 {
display:none;
}
div#queue {
position: relative;
top: -43px;
}
input#historySearchBox {
background-color: #ECECEC;
margin-top: 5px;
height: 19px;
border: 1px solid #D2D2D2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#page-wrap select {
width: 85px;
height:23px;
color: #A8A8A8;
text-shadow: 1px 1px 1px #fff;
filter: dropshadow(color=#fff, offx=1, offy=1);
    
background: url(http://s13.postimage.org/txmsdtzsj/selectarrow.gif), url(http://s11.postimage.org/rs6rpscsf/selectbg.gif);
background-position: 100% 53%, center center;        
background-repeat: no-repeat, repeat-x;
    
border:1px solid #DDDBD7;
-webkit-appearance: none; 

border: 1px solid #D2D2D2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#hdr-history, #hdr-queue {
height: 27px;
border: 1px solid #C5C5C5;
margin: 0 -1px 0 -1px;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background: rgb(249,249,249);
background: -moz-linear-gradient(top,  rgb(249,249,249) 0%, rgb(232,232,232) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(249,249,249)), color-stop(100%,rgb(232,232,232)));
background: -webkit-linear-gradient(top,  rgb(249,249,249) 0%,rgb(232,232,232) 100%);
background: -o-linear-gradient(top,  rgb(249,249,249) 0%,rgb(232,232,232) 100%);
background: -ms-linear-gradient(top,  rgb(249,249,249) 0%,rgb(232,232,232) 100%);
background: linear-gradient(to bottom,  rgb(249,249,249) 0%,rgb(232,232,232) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8',GradientType=0 );
}
.tiley_sprite_container, .sprite_tile_page_wrap, .sprite_tile_qh_bottom {
background: none!important;
}
#btm-wrapper {
display: none;
}
#nav_text_left {
margin-left: 350px;
margin-top: -31px;
position: relative;
}
.box_banner_hr {
display: none;
}
.navigation ul#navigation_menu_right {
margin-top: 10px;
background: -moz-linear-gradient(top, #2A2A2A 0%, #3A3A3A 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2A2A2A), color-stop(100%,#3A3A3A));
background: -webkit-linear-gradient(top, #2A2A2A 0%,#3A3A3A 100%);
background: -o-linear-gradient(top, #2A2A2A 0%,#3A3A3A 100%);
background: -ms-linear-gradient(top, #2A2A2A 0%,#3A3A3A 100%);
background: linear-gradient(to bottom, #2A2A2A 0%,#3A3A3A 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a2a2a', endColorstr='#3a3a3a',GradientType=0 );
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #151515;
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2);
-moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2);
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2);
}
#queue-wrap #hdr-history {
position: relative;
top: -20px;
}
#history {
position: relative;
top: -20px;
}
.nzb_status {
display:none;
}
.nzb_status_col {
width: 18px!important;
}
.box_fatbottom {
padding-bottom:7px;
}
.sprite_topleft_queue, .sprite_topright_queue {
background: none!important;
}
#box_fatbottom_queue {
position: relative;
top: -37px;
}
#hdr-queue {
margin: 0 15px;
}
.pagination a {
background: rgb(236,236,236);
background: -moz-linear-gradient(top,  rgb(236,236,236) 0%, rgb(245,245,245) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(236,236,236)), color-stop(100%,rgb(245,245,245)));
background: -webkit-linear-gradient(top,  rgb(236,236,236) 0%,rgb(245,245,245) 100%);
background: -o-linear-gradient(top,  rgb(236,236,236) 0%,rgb(245,245,245) 100%);
background: -ms-linear-gradient(top,  rgb(236,236,236) 0%,rgb(245,245,245) 100%);
background: linear-gradient(to bottom,  rgb(236,236,236) 0%,rgb(245,245,245) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#f5f5f5',GradientType=0 );
}
.pagination a, .pagination span {
margin-top: 2px;
}
.pagination a, .pagination span.current {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.pagination .current {
border-color:#B1B1B1;
}
.pagination a:hover {
border-color: #2B2B2B;
}
.sprite_progressbar_bg {
background: url(http://s16.postimage.org/psdpxp0g5/loadingbar.png) no-repeat;
}
.sprite_progress_done {
background: url(http://s7.postimage.org/mmcfvil3v/loadingbar_done.png) no-repeat;
}

[Kverbr2]

Also if anyone else wants to contribute I started a git (link)!

[test_valve]

Also if anyone else wants to contribute I started a git (link)!

Nice. Is the git repo for the Stylish skin, or for a full template?

[Kverbr2]

Also if anyone else wants to contribute I started a git (link)!

Nice. Is the git repo for the Stylish skin, or for a full template?

It's going to be a full template For now I'm getting the CSS portion of it completed then it's onto implementation.

[kellymjohnson]

is this for any website or for any application as per my thinking this for the application..

click through the following page