Stylish Dark Science Forums Theme

[Jay-qu]

yeah sure, Ill get onto photoshop and see what I can do ;) - though it would be tonnes easier if T had the original unflattened psd's (assuming it was done in adobe..) :phones:

[Tormod]

The original photoshop files are copyrighted by the company who designed our templates. The Hypography logo and text is all we actually own.

[alexander]

yeah, once the crazyness at work is over, i'll start redoing some of these graphics. basically just changing the color scheme on the images.... it wouldnt really be rights infringement because since this is a user-side theme, you can do whatever you really want to....

 

another thing to look into would be the wyswig editor buttons, to be redone, and that i think would be about it.... oh and the page title font needs to be changed too, but that will be in my next update

[Jay-qu]

heres a really quick job

[DougF]

Good job I like it.

[alexander]

its a little blue :)

maybe change blue to gray? or grayer blue? then i'll incorporate it into the theme...

[alexander]

new update:

 

@-moz-document 
   domain(forums.hypography.com),
       domain(scienceforums.com),
       domain(hypography.com)
{
<!--
/* vBulletin 3 CSS For Style 'Forums Main' (styleid: 5) */
body
{
   background-color: #1f1f1f !important !important;
   font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
   margin: 0px 0px 0px 0px !important;
   padding: 0px !important;
}
#aboutinfo p 
{
       height: 0px !important;
}
.navmenu a
{
       background-color: transparent;
}

a:link, body_alink
{
   color: #4D528C !important;
   text-decoration: none !important;
}
a:visited, body_avisited
{
   color: #4D528C !important;
   text-decoration: none !important;
}
a:hover, a:active, body_ahover
{
   color: #4D528C !important;
   text-decoration: underline !important;
}
.page
{
   background: #FFFFFF !important;
   color: #4D528A !important;
}
.page p, ul
{
      height: 0px !important;
      color: transparent !important;
}
td, th, p, li
{
   font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
background-color: #1f1f1f !important;
}
.tborder
{
   background: #e2e1ea !important;
   color: #000000 !important;
   border: 1px solid #7b81cd !important;
}
.tcat
{
   background: #1f1f1f !important !important !important !important;
   color: #FFFFFF !important;
   font: bold 10pt tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.tcat a:link, .tcat_alink
{
   color: #FFFFFF !important;
   text-decoration: none !important;
}
.tcat a:visited, .tcat_avisited
{
   color: #FFFFFF !important;
   text-decoration: none !important;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
   color: #FFFFFF !important;
   text-decoration: underline !important;
}
.thead
{
   background: #3d3d3d !important !important !important !important !important !important;
   color: #FFFFFF !important;
   font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.thead a:link, .thead_alink
{
   color: #FFFFFF !important;
   text-decoration: none !important;
}
.thead a:visited, .thead_avisited
{
   color: #FFFFFF !important;
   text-decoration: none !important;
}
.page
{
background-color: #1f1f1f !important;
}
.thead a:hover, .thead a:active, .thead_ahover
{
   color: #FFFFFF !important;
   text-decoration: underline !important;
}
.tfoot
{
   background: #1f1f1f !important;
   color: #FFFFFF !important;
}
.tfoot a:link, .tfoot_alink
{
   color: #FFFFFF !important;
   text-decoration: none !important;
}
.tfoot a:visited, .tfoot_avisited
{
   color: #FFFFFF !important;
   text-decoration: none !important;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
   color: #FFFFFF !important;
   text-decoration: underline !important;
}
.alt1, .alt1Active
{
   background: #1f1f1f !important;
   color: #7f7f7f !important;
   border-left: 1px solid #FFFFFF !important;
   border-top: 1px solid #FFFFFF !important;
}
.alt1 a:link, .alt1_alink, .alt1Active a:link, .alt1Active_alink
{
   color: #4D528C !important;
   text-decoration: none !important;
}
.alt1 a:visited, .alt1_avisited, .alt1Active a:visited, .alt1Active_avisited
{
   color: #4D528C !important;
   text-decoration: none !important;
}
.alt1 a:hover, .alt1 a:active, .alt1_ahover, .alt1Active a:hover, .alt1Active a:active, .alt1Active_ahover
{
   color: #4D528C !important;
   text-decoration: underline !important;
}
.alt2, .alt2Active
{
   background: #1f1f1f !important;
   color: #4d528c !important;
   border-left: 1px solid #FFFFFF !important;
   border-top: 1px solid #FFFFFF !important;
}
.alt2 a:link, .alt2_alink, .alt2Active a:link, .alt2Active_alink
{
   color: #4D528C !important;
   text-decoration: none !important;
}
.alt2 a:visited, .alt2_avisited, .alt2Active a:visited, .alt2Active_avisited
{
   color: #4D528C !important;
   text-decoration: none !important;
}
.alt2 a:hover, .alt2 a:active, .alt2_ahover, .alt2Active a:hover, .alt2Active a:active, .alt2Active_ahover
{
   color: #4D528C !important;
   text-decoration: underline !important;
}
td.inlinemod
{
   background: #1f1f1f !important;
   color: #000000 !important;
   border-left: 1px solid #fee7f2 !important;
   border-top: 1px solid #fee7f2 !important;
}
td.inlinemod a:link, td.inlinemod_alink
{
   color: #4D528C !important;
   text-decoration: none !important;
}
td.inlinemod a:visited, td.inlinemod_avisited
{
   color: #4D528C !important;
   text-decoration: none !important;
}
td.inlinemod a:hover, td.inlinemod a:active, td.inlinemod_ahover
{
   color: #4D528C !important;
   text-decoration: underline !important;
}
.wysiwyg
{
       font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
       background: #3d3d3d !important;
       color: #6e769e !important;
}
textarea, .bginput
{
   font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
       background: #3d3d3d !important;
       color: #6e769e !important;
}
.button
{
   font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
select
{
   font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
option, optgroup
{
   font-size: 11px !important;
   font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.smallfont
{
background-color: transparent !important;
   font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.time
{
   color: #666686 !important;
}
.navbar
{
   font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.highlight
{
   color: #FF0000 !important;
   font-weight: bold !important;
}
.fjsel
{
   background: #3E5C92 !important;
   color: #E0E0F6 !important;
}
.fjdpth0
{
   background: #F7F7F7 !important;
   color: #000000 !important;
}
.panel
{
   background: #1f1f1f !important;
   color: #000000 !important;
   padding: 10px !important;
   border: 2px outset !important;
}
.panelsurround
{
   background: #3d3d3d !important;
   color: #000000 !important;
}
legend
{
   color: #22229C !important;
   font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.vbmenu_control
{
   background: #5672b2 url(images/element/gradients/titleimage1.gif) repeat-x top left !important;
   color: #FFFFFF !important;
   font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
   padding: 3px 6px 3px 6px !important;
   white-space: nowrap !important;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
   color: #FFFFFF !important;
   text-decoration: none !important;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
   color: #FFFFFF !important;
   text-decoration: none !important;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
   color: #FFFFFF !important;
   text-decoration: underline !important;
}
.vbmenu_popup
{
   background: #D1D3E2 !important;
   color: #000000 !important;
   border: 1px solid #7b81cd !important;
}
.vbmenu_option
{
   background: #F5F5FF !important;
   color: #4D528C !important;
   font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
   white-space: nowrap !important;
   cursor: pointer !important;
   border-left: 1px solid #FFFFFF !important;
   border-top: 1px solid #FFFFFF !important;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
   color: #4D528C !important;
   text-decoration: none !important;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
   color: #4D528C !important;
   text-decoration: none !important;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
   color: #4D528C !important;
   text-decoration: none !important;
}
.vbmenu_hilite
{
   background: #E4E6F5 !important;
   color: #4D528C !important;
   font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
   white-space: nowrap !important;
   cursor: pointer !important;
   border-left: 1px solid #FFFFFF !important;
   border-top: 1px solid #FFFFFF !important;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
   color: #4D528C !important;
   text-decoration: none !important;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
   color: #4D528C !important;
   text-decoration: none !important;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
   color: #4D528C !important;
   text-decoration: none !important;
}
/* nify corners css */

/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt !important; }

/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px !important; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none !important; }
.pagenav td { padding: 2px 4px 2px 4px !important; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px !important; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px !important; }

/* ***** don't change the following ***** */
form { display: inline !important; }
label { cursor: default !important; }
.normal { font-weight: normal !important; }
.inlineimg { vertical-align: middle !important; }
.verysmallfont { font-family: arial !important; font-size: 10px !important; }
/* Here you can change the look of the post text and links */

.vb_postbit
{
   color: #6e769e !important;
       font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
   text-decoration: none !important;
}
.vb_postbit a:link
{
   color: #4D528C !important;
       font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
/*        border-bottom: 1px dotted #FF0000 !important;*/
   text-decoration: none !important;
}
.vb_postbit a:visited
{
   color: #4D528C !important;
       font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
       border-bottom: 1px dotted #FF0000 !important;
   text-decoration: none !important;
}
.vb_postbit a:hover, .vb_postbit a:active
{
   color: #4D528C !important;
       font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
       border-bottom: 1px dotted #4D528C !important;
   text-decoration: none !important;
}


/* ***** Global Borders - edit forum width ***** */
.inner_border {
width: 760px !important; 
border-left: 1px solid #6783c3 !important;
border-right: 1px solid #6783c3 !important;
margin-left: auto !important;
margin-right: auto !important;
}

.outer_border {
width: 762px !important; 
border-left: 5px solid #c3d5ff !important;
border-right: 5px solid #c3d5ff !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* ***** Header and Nav  ***** */
.header_bg {
background: #FFFFFF url(images/element/misc/header_bg1.gif) !important ;
}
.nav_menu_control {
color:  #FFFFFF !important;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
padding: 3px 6px 3px 6px !important;
white-space: nowrap !important;
}
.nav_menu_control a:link {
color:  #FFFFFF !important;
text-decoration: none !important;
}
.nav_menu_control a:visited {
color:  #FFFFFF !important;
text-decoration: none !important;
}
.nav_menu_control a:hover, .nav_menu_control a:active {
color:  #FFFFFF !important;
text-decoration: underline !important;
}

.nav_border_out {
background-color: #3d3d3d !important;  
border: 1px dotted #feecac !important;
}
.nav_border_in {
background-color: #1f1f1f !important;
border: 1px solid #FFFFFF !important;  
padding: 4px !important;
}
.navbar_forms{
background-color: #FFFFFF !important;
color: #4D528C !important;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
border: 1px solid #feecac !important;
padding: 2px !important;
margin: 5px !important;
vertical-align: middle !important;
}
.navbar_forms:focus {
background-color: #FFFFFF !important;
color: #4D528C !important;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
border: 1px solid #7b81cd !important;
padding: 2px !important;
margin: 5px !important;
vertical-align: middle !important;
}


/* ***** spacers and paddings ***** */

.cat_spacer {
background-color: #1f1f1f !important;
padding:5px 0px 5px 0px !important;
}
.spacer_small {
padding:2px 0px 2px 0px !important;
}
.icon_legend {
background-color: #1f1f1f !important;
color: #000000 !important;
border: 1px dotted #7b81cd !important;
}

/* ***** forum description ***** */

.forumdesc_border {
background-color: transparent !important !important !important !important !important !important !important !important;  
border: 1px dotted #E4E6F5 !important;
}
.forumdesc {
background-color: #F5F5FF !important;
border: 1px solid #FFFFFF !important;  
padding: 10px !important;
}

/* ***** make dropdown menu pretty ***** */

.vb_menu_control { 
background: #1f1f1f !important;
color:  #FFFFFF !important;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
padding: 3px 6px 3px 6px !important;
white-space: nowrap !important;
}
.vb_menu_control a:link {
color:  #FFFFFF !important;
text-decoration: none !important;
}
.vb_menu_control a:visited {
color:  #FFFFFF !important;
text-decoration: none !important;
}
.vb_menu_control a:hover, .vb_menu_control a:active {
color:  #FFFFFF !important;
text-decoration: underline !important;
}

/* ***** make announcements, stickies, moderated, polls and soft deleted posts  pretty ***** */
.announcement {
background-color: #999999 !important;
color: #0066cc !important;
border-left: 1px solid #FFFFFF !important;
border-top: 1px solid #FFFFFF !important;
}
.sticky {
background-color: #2f2f2f !important;
color: #0066cc !important;
border-left: 1px solid #FFFFFF !important;
border-top: 1px solid #FFFFFF !important;
}
.poll {
background-color: #1f3d1f !important;
color: #0066cc !important;
border-left: 1px solid #FFFFFF !important;
border-top: 1px solid #FFFFFF !important;
}
.moderated {
background-color: #1f1f3d !important;
color: #660000 !important;
border-left: 1px solid #FFFFFF !important;
border-top: 1px solid #FFFFFF !important;
}
.subscribed {
background-color: #1f1f1f !important;
color: #0066cc !important;
border-left: 1px solid #FFFFFF !important;
border-top: 1px solid #FFFFFF !important;
}
.deleted {
background-color: #ffc1de !important;
color: #4D528C !important;
border-left: 1px solid #FFFFFF !important;
border-top: 1px solid #FFFFFF !important;
}

/* ***** online status ***** */

.online {
color: #339900 !important;
}
.offline {
color: #4D528C !important;
}
.invisible {
color: #FF0000 !important;
}

/* ***** dotted hr ***** */
div.hr {
height: 1px !important;
background: #fff url(images/element/misc/hr.gif) repeat scroll center !important;
}
div.hr hr 
{
display: none !important;
}
/* ***** search result since last visit ***** */
.last_visit {
background-color: #fadafd !important;
color: #641e6a !important;
border-left: 1px solid #FFFFFF !important;
border-top: 1px solid #FFFFFF !important;
}
.forumdesc
{
background-color: #1f1f1f !important;
border-top-color: #1f1f1f !important;
border-right-color: #1f1f1f !important;
border-bottom-color: #1f1f1f !important;
border-left-color: #1f1f1f !important;
}
div#googlead
{
text-align: center !important;
color: #1f1f1f !important;
width: 0px !important;
height: 0px !important;
padding-top: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
background-color: transparent;
border-bottom-width: 0px !important;
}
.imagebutton
{
background: #e2e1ea !important;
}
.ofont, .osize, .osmilie, .otextlink
{
background: #e2e1ea !important;
}
}
-->

[alexander]

still needs more work though, i'll change things as i figure them out.... today i elliminated a few messages, and some ads i was seeing... more to come ;)

 

if anyone plays with it, i'd like to see what you other guys are seeing when you use the theme

[Tormod]

I'd wait with this if I were you - I still have a bit of work to do on the layout and design of the forum, so some new styles are bound to pop up.

[alexander]

the idea is that i will fix it as you progress... i deal with lots of class names, and change one or two parameters, i need to actually clean that script up, it's got a lot of stuff that is worthless.... so what i will do is i will rebuild it from scratch, and i will see how i can make it shorter :)

 

but do work, i will change things as they come up, right now i am trying to fix a few issues that are weird in nature, but i will figure them out :phones:

[Tormod]

I think most of it is done now...still some work left on the blue, three-part footer but it will be minor.