Kirupa Forum User Style

talk random
1

So I think that the current style is really bad looking so I went thur and made a user style.

You need to install the Firefox extension stylish for it to work. - https://addons.mozilla.org/en-US/firefox/addon/2108

Screenshot:

Code:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.kirupa.com") {
body
{
	background-color: #2E4E6B!important;
background-image:none !important;
	color: #000000 !important;
	font: 10pt arial, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
	margin: 5px 5px 10px 5px !important;
}
a:link, body_alink
{
	color: #2E4E6B !important;
	text-decoration: none !important;
}
a:visited, body_avisited
{
	color: #2E4E6B !important;
	text-decoration: none !important;
}
a:hover, a:active, body_ahover
{
	color: #0066FF !important;
	text-decoration: none !important;
}
.page
{
	background: #2E4E6B !important;
	color: #000000 !important;
}
td, th, p, li
{
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.tborder
{
	background: #DAE9F6 !important;
	color: #000000 !important;
}
.tcat
{
	background: #FBF2D3 !important;
	color: #000052 !important;
	font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.tcat a:link, .tcat_alink
{
	background: transparent !important;
	color: #000000 !important;
	text-decoration: none !important;
}
.tcat a:visited, .tcat_avisited
{
	background: transparent !important;
	color: #333333 !important;
	text-decoration: none !important;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
	background: transparent !important;
	color: #4C96E1 !important;
	text-decoration: none !important;
}
.thead
{
	background: #4C96E1 !important;
	color: #222 !important;
	font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.thead a:link, .thead_alink
{
	color: #2E4E6B !important;
}
.thead a:visited, .thead_avisited
{
	color: #003399 !important;
}
.thead a:hover, .thead a:active, .thead_ahover
{
	color: #3366CC !important;
}
.tfoot
{
	background: #FBF2D3 !important;
	color: #E0E0F6 !important;
}
.tfoot a:link, .tfoot_alink
{
	color: #2E4E6B !important;
}
.tfoot a:visited, .tfoot_avisited
{
	color: #2E4E6B !important;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
	color: #0066CC !important;
}
.alt1, .alt1Active
{
	background: #EBF3FA !important;
	color: #000000 !important;
}
.alt1 a:hover, .alt1 a:active, .alt1_ahover, .alt1Active a:hover, .alt1Active a:active, .alt1Active_ahover
{
	text-decoration: underline !important;
}
.alt2, .alt2Active
{
	background: #FAF6EB !important;
	color: #000000 !important;
}
.inlinemod
{
	background: #FFFFCC !important;
	color: #000000 !important;
}
.wysiwyg
{
	background: #F5F5FF !important;
	color: #000000 !important;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
	margin: 5px 10px 10px 10px !important;
	padding: 0px !important;
}
.wysiwyg a:link, .wysiwyg_alink
{
	color: #22229C !important;
}
.wysiwyg a:visited, .wysiwyg_avisited
{
	color: #22229C !important;
}
.wysiwyg a:hover, .wysiwyg a:active, .wysiwyg_ahover
{
	color: #FF4400 !important;
}
textarea, .bginput
{
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.bginput option, .bginput optgroup
{
	font-size: 10pt !important;
	font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !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
{
	color: #000000 !important;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.time
{
	color: #2E4E6B !important;
}
.navbar
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.highlight
{
	color: #FF0000 !important;
	font-weight: bold !important;
}
.fjsel
{
	background: #EFEFEF !important;
	color: #3E3E3E !important;
}
.fjdpth0
{
	background: #F7F7F7 !important;
	color: #000000 !important;
}
.panel
{
	background: #E4E7F5 url(../../images/gradients/gradient_panel.gif) repeat-x top left !important;
	color: #000000 !important;
	padding: 10px !important;
	border: 2px outset !important;
}
.panelsurround
{
	background: #D1D4E0 url(../../images/gradients/gradient_panelsurround.gif) repeat-x top left !important;
	color: #000000 !important;
}
legend
{
	color: #22229C !important;
	font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
}
.vbmenu_control
{
	background: #4C96E1 !important;
	color: #1F414E !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: #1F414E !important;
	text-decoration: none !important;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
	color: #1F414E !important;
	text-decoration: none !important;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
	color: #2E4E6B !important;
	text-decoration: underline !important;
}
.vbmenu_popup
{
	background: #FFFFFF !important;
	color: #000000 !important;
	border: 1px solid #0B198C !important;
}
.vbmenu_option
{
	background: #F8F8F8 !important;
	color: #000000 !important;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
	color: #2E4E6B !important;
	text-decoration: none !important;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
	color: #2E4E6B !important;
	text-decoration: none !important;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
	color: #0066FF !important;
	text-decoration: none !important;
}
.vbmenu_hilite
{
	background: #EEEEEE !important;
	color: #656565 !important;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
	color: #2E4E6B !important;
	text-decoration: none !important;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
	color: #2E4E6B !important;
	text-decoration: none !important;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
	color: #0033FF !important;
	text-decoration: none !important;
}
/* ***** 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; }

.buttonStyle {
	font-size: 10px !important;
	font-family: Arial, Helvetica, sans-serif !important;
	margin-left: 4px !important;
	border-color: black !important;
	border-width: 1px !important;
}
.textInputStyle {
	font-size: 11px !important;
	font-family: Arial, Helvetica, sans-serif !important;
	margin-left: 4px !important;
	border-color: black !important;
	border-width: 1px !important;
	text-indent: 2px !important;
}
.InputTextStyle {
	background-image: url('http://www.kirupa.com/mini_icons/magnifier.gif') !important;
	background-repeat: no-repeat !important;
	background-position: 3px 2px !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 12px !important;
	font-weight: normal !important;
	color: #333333 !important;
	border-width: 1px !important;
	border-color: #999999 !important;
	padding-left: 20px !important;
}


/* ***** don't change the following ***** */
form { display: inline !important; }
label { cursor: default !important; }
.normal { font-weight: normal !important; }
.inlineimg { vertical-align: middle !important; }
}
2

Maybe we should have a contest or something where people can create their own custom headers and styles to match.

3

Heh, I hates it. :-/

4

Yea I think for the header contest people should have to submit a css file as well.

5

yeah, not a fan of the color combos.

6

Having users submit their own CSS styles would be too complicated for users…as I found out when I tried to do that in the first iteration of this contest :slight_smile:

New styles will be arriving shortly, and a ton more will be arriving after the contest ends.

7

I find your code arrogant. Just looking at it.

Why did you turn styles off? Mario!

8

People will have a selection of styles to choose from, and it will only be for the forums. The site will not get the custom styles.

9

[quote=k77;2337690]I find your code arrogant. Just looking at it.

Why did you turn styles off? Mario![/quote]

That is not my code, it is kirupa’s all I did was change the colors, I did this in about 15 mins. I would have gone thur and only added important tags onto the items I changed, but I lost track of witch ones I changed, Also I would have taken out ones that just repeated them selves.

@Kirupa, you were asking that users submit a Photoshoped version of the site, not CSS. All I did was change the colors, if you go thur and pick out the parts that make up the colors for kirupa.com and had them just edit those parts, it would be really easy.

10

The current theme is bad looking? hides