Stylish Dark Science Forums Theme

[alexander]

So i have found the best FF plug in ever invented: Stylish.

 

Basically since i am using the nasa theme for the browser, it literally hurts my eyes every time i look at a black on white page (aka black letters, white background). So i found an FF extension that allows me to have a master theme for regular pages (setting BG to dark grey and text to beige). It also allows for individual website themes, such as a google theme Google Web Search - dark gray redesign (vC) | userstyles.org

 

its really really cool, so now I'm going to build a stylish dark scienceforums theme, if anyone has ideas or contributions, or has already done the work, please post it here (also if you want it, i will post the theme here as well :lol: )

[GAHD]

you could always turn down the brightness, or contrast on yer monitor too, helps the eye hurty lots (lot of peope have contrast/brightness too high or low for their environment)

 

I've allways liked a dark red background, with a darker red, if not black text. Screws with the colorblind I tells ya.

[alexander]

lol, it will be in the greys, my only concern is latex images, i dunno yet how well they will look with the dark background, i'll work on it today a little

[alexander]

Well, its not the most elegant solution, but it does the job:

@-moz-document 
domain(hypography.com/forums),
       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;
}
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;
}
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: #ffc1de !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
{
background: #F5F5FF !important;
color: #000000 !important;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !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: #1f1f1f !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;
}
.vBulletin_editor
{
background: #1f1f1f;
}
}
-->

 

note, this does not handle math well at all (because there is no special style for it, i may at some point actually go as far as parsing to find it, but for a quick theme this works pretty damn well :shrug: )

[alexander]

oh it also does not replace the images on the page, that will come in the next version maybe...

[alexander]

oh P.S. this is made to work with the NASA Firefox Theme (the dark one ofcourse)

[alexander]

I'm gonna change the font colors to something a little bit lighter soon too, so stay tuned :shrug:

[Jay-qu]

Thats great alex, I was using the nasa theme, but man it was just to much on the eyes so I opted for a one that was a bit more subtle - I might give this a go :)

[Jay-qu]

lol, just got it working, nice one :)

[alexander]

as i said, its a quickie, as i get this to actually fully dark with replacing some images and all, i will post it on userstyles.org, so people can just get the style, but for now this does pretty nicely.... i'll post a few screenshots in a couple of minutes

[Tormod]

Yeah, some screenshots would be nice.

[alexander]

here are 3, screenshot before and after :doh: or rather after and before

 

so in order from left to right:

first one if the after shot of the forum index page

 

then its the original render of the same thing

 

then there is the main page after shot

[alexander]

last 3

 

then here

left is the main page original shot

 

and a shot of the thread view (new theme)

 

and the original shot of it

[alexander]

so i have found an issue with this theme, i gotta fix the edit message theme too... fix it later on tonight or tomorrow sometime :)

[alexander]

ok, i have an updated theme, it fixes a few issues :)

 

first one is having the black background in the title fields, second is having the edit box still be a black on white.... both got solved.

 

the instrusctions on how to use this:

 

you can either copy everything except for the @-moz-document into the css editor in the web dev toolbar, or install stylish, go into style management, click write, name the style anything you like in the description field. and paste the code into the field

 

@-moz-document 
domain(hypography.com/forums),
       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;
}
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;
}
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;
}
.vBulletin_editor
{
background: #1f1f1f;
}
}
-->

[Jay-qu]

Yeah that looks better, but still all the pics made for hypo are designed to go with white, fades/shadows etc..

[alexander]

working on it jay... i will throw them on the hypo server (hopefully tormod wont have too many problems with that)

 

but if you have time and wanna save the button images and redo them, as well as the hypo logo (my first thing to tackle)

 

just post them here, and i will incorporate them into the theme if i can :shrug:

 

P.S. I love Web Dev plugin