Alternative skin for fp with Stylish add-on

[jyri]

The dark background and the light text of the boards has been bugging me for a while, so I created a quick skin with a lighter background.

The skin can be activated with the Stylish add-on.
Firefox: https://addons.mozilla.org/en-US/firefox/addon/2108/

It seems to be available for Chrome users too: https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=fi

Some preview images:

In the add-on's options, click Write New Style, name it something and paste the css from here (updated code):

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.futureproducers.com") {

body {
background: #E0E0E0 !important;
color: black !important;
margin: 0 auto;
padding: 0;
}
a:link, body_alink {
color: #00539C !important;
}
a:visited, body_avisited
{
color: #00539C !important;
}
a:hover, a:active
{
color: #013059 !important;
text-decoration: underline;
}

td {
background: #E0E0E0 !important;
}
td, th, p, li
{
color: #292929 !important;
}
.tborder
{
color: #292929 !important;
border: none !important;
}
.tcat
{
background: #38A2FF !important;
padding: 10px;
vertical-align: middle;
border: none !important;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;

}
.tcat a:link, .tcat_alink
{
color: #00539C !important;
text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
color: #00539C !important;
text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
color: #013059 !important;
text-decoration: underline;
}
.thead
{
color: #013059 !important;
font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
font-weight: bold !important;
}
.thead a:link, .thead_alink
{
color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
color: #ff0000;
text-decoration: none;
}
.tfoot
{
color: #ffffff;
}
.alt1, .alt1Active
{
color: #292929 !important;
padding-left: 20px !important;

}
.alt2, .alt2Active
{
color: #292929 !important;
padding: 10px !important;
}
.inlinemod
{
background: white;
color: #292929 !important;
}
.wysiwyg
{
background: white !important;
padding:4px !important;
color: #292929 !important;
}

.bginput option, .bginput optgroup
{
font-size: 10pt;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}


option, optgroup
{
font-size: 11px;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
color: #1C6BFF !important;
}
.time
{
color: #1C6BFF !important;
}

.highlight
{
color: red !important;
font-weight: bold;
}
.fjsel
{
background: #E0E0E0 !important;
color: #292929 !important;
}
.fjdpth0
{
background: #E0E0E0 !important;
color: #292929 !important;
}
.panel
{
color: #292929 !important;
padding: 14px;
}
.panelsurround
{
background: #E0E0E0 !important;
color: #292929 !important;
}
legend
{
color: #292929 !important;
}
.vbmenu_control
{
white-space: nowrap;
}
.vbmenu_popup
{
background: #E0E0E0 !important;
color: #292929 !important;
border: solid 2px #EDEDED !important;
}
.vbmenu_option
{
background: #E0E0E0 !important;
color: #292929 !important;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
text-decoration: none;
}
.vbmenu_hilite
{
background: #EDEDED !important;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
text-decoration: none;
}

.post {
background: #E0E0E0 !important;
padding: 12px;
margin-top: 2px !important;
margin-bottom: 1px !important;
border: solid 10px #EDEDED !important;
}

.signature {
max-height:80px;
overflow: hidden;
background: #111111;
border-top: solid 1px grey;
margin-left: 2px !important;
margin-right: 2px !important;
margin-top: 10px;
margin-bottom: 5px;
font-size: 8pt;
color: #292929 !important;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px !important;
padding-bottom: 0;
background: #E0E0E0 !important;
}

.title {
font-size: 18pt;
font-weight: normal;
margin-top: 10px;
}

.optionsnav { padding: 12px; font-size: 12px; }
.optionsnav a { margin-right: 20px; }

.abovethreads { background: #E0E0E0 !important; padding-left: 10px; }

.message { margin-top: 10px; margin-bottom: 10px; }

.warning {
font-size: 12pt;
background: none !important;
margin-bottom: 14px;
padding: 12px;
}

#flashcontent {
width: 975px;
text-align: left;
padding-left: 12px;
}

td.alt1
{
text-align:left;
}

#threadslist tr td
{
border-bottom : 2px solid #EDEDED !important;
}

#threadslist
{
border-collapse : collapse;
}

td.thead, td#imod
{
background: #E0E0E0 !important;
}

.message a
{
color: #00539C !important;
}

.thead block_title{
background: none !important;
}

ul.tab_list li.thead:hover, ul.tab_list li.thead:hover *, ul.tab_popup li.vbmenu_option:hover, ul.tab_popup li.vbmenu_option:hover * {
background: #EDEDED !important;
color: black;
-moz-border-radius:20px !important;
}

div.tab_header {
margin-top: 0px !important;
}
ul.tab_list li.thead {
height: 1.5em !important;
font-size: 10pt !important;
text-align: center !important;
position: relative !important;
}
ul.tab_list li.tcat {
text-align: center !important;
}
input.post {
padding: 7px !important;
color: grey !important;
}
}

 

[F00T]

Wow...didn't know you could do that...that's dope.

 

[xSKEEROKS]

Thanks a lot!

 

[MnM]

The dark background and the light text of the boards has been bugging me for a while, so I created a quick skin with a lighter background.

The skin can be activated with the Stylish add-on.
Firefox:

thanks so much jyri!!!
its so neat now!!!

 

[jyri]

No problemo, glad you like it. I will do a bit of further styling to it to fix somethings a bit later (such as the options dropdown's background color and the hover on profile's tabs). I'll post the updated css to the first post then.

 

[inkexit]

Can you give it some ajax so the threads auto-update while you're reading them, or is that not possible?

 

[jyri]

Nope. The ajax should be in the site's code. I can only do a css style sheet and override the existing styles with !important. Can't even do that to all the objects as some of the site's css is next to the objects in the html and they have no specific class or id so I can't override them. I would also love to make a different set of buttons to match the theme but they are hardcoded and again no class name, so I can't put another button image over the default ones in css.

---------- Post added at 07:50 PM ---------- Previous post was at 11:59 AM ----------

Did the previously mentioned fixes to the css plus I changed the font color in the "Post a reply" & "Post a new discussion" -buttons above threads to make them easier to read. New code in the first post.

 

[inkexit]

Nope. The ajax should be in the site's code. I can only do a css style sheet and override the existing styles with !important. Can't even do that to all the objects as some of the site's css is next to the objects in the html and they have no specific class or id so I can't override them. I would also love to make a different set of buttons to match the theme but they are hardcoded and again no class name, so I can't put another button image over the default ones in css.

Too bad. Thanks for answering the question though.

FP needs a change for real. I remember Obi talking about "big changes" coming like 2 years ago.