Replacement Themes for Enhanced Browsing Pleasure

Shoryuken.com Feedback
1

You know you need some Old School Blue (or Black) in your life.

Aside from blueeee the main change is the smaller, sans-serif fonts. I’m down for bug reports. I may fix things. I may not. I maintain this primarily for myself. Enjoy.

This works well with Opera, Firefox and Chrome. It is written against the default skin. Please switch to it if you’re on the Dark skin. I don’t test against it.


Firefox:
Install the Stylish addon
Click on the above link and install the skin

Chrome:
Install the Stylish addon
Click on the above link and install the skin
Alternately you can click on the above link and install the as a user JS (Not recommended)

Opera:
Save the following text as a oldschoolblue.css or oldschoolblack.css on your drive
Browse to shoryuken.com
Right click on the site and choose Edit Site Preferences
Click Display
Click Choose at the bottom and browse to the file

oldschoolblue.css:


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

/* set bg color */
html, body, .topbg, ul .children, .xenOverlay, .formPopup, .xenPreviewTooltip, .secondaryContent, .menuHeader, .sectionFooter, .mceMenuItem, .textCtrl, .formPopup {
background-color: #152e49 !important;
background-image: none !important;
}

/* div background and text colors */
div * {
background-color: transparent !important;
color: #ffffff !important;
}

/* link colors */
a:link, a:hover, li input {color: #d6f3ff !important;}
a:visited {color: #ffffff !important;}

/* switch to smaller, sans-serif fonts */
h3, .message, .messageText, .signature, .mceContentBody {
font-family: "arial", "helvetica", "clean", sans-serif !important;
font-size: 10pt !important;
color: #ffffff !important;
}

/* tinymce background */
.mceToolbar { background-color: #ffffff !important; }

oldschoolblack.css:


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

/* set bg color */
html, body, .topbg, ul .children, .xenOverlay, .formPopup, .xenPreviewTooltip, .secondaryContent, .menuHeader, .sectionFooter, .mceMenuItem, .textCtrl, .formPopup {
background-color: #000000 !important;
background-image: none !important;
}

/* div background and text colors */
div * {
background-color: transparent !important;
color: #ffffff !important;
}

/* link colors */
a:link, a:hover, li input {color: #d6f3ff !important;}
a:visited {color: #ffffff !important;}

/* switch to smaller, sans-serif fonts */
h3, .message, .messageText, .signature, .mceContentBody {
font-family: "arial", "helvetica", "clean", sans-serif !important;
font-size: 10pt !important;
color: #ffffff !important;
}

/* tinymce background */
.mceToolbar { background-color: #ffffff !important; }

/* replace blue borders for black theme */
.categoryStrip, .sectionHeaders, .attribution, .bbCodeQuote {
border-bottom-color: #949494 !important;
border-left-color: #949494 !important;
border-right-color: #949494 !important;
border-top-color: #949494 !important;
}
2

Any way to get this running with fixed width? I’m using a 16:9 monitor, and reading posts here without a fixed width is a royal pain.

In any case, it’s not the biggest improvement in the world, but if I can get a fixed width setup going it’ll make this site at least somewhat useable again.

3

Post a screenshot please. Are you asking for it to be less wide? It should be possible. I’m on a 4:3 monitor rotated vertically.

4

is there anything like this for IE9?

5

In theory you should be able to load this and browse to above link. I don’t regularly use IE.

http://www.gm4ie.com/

6

Kyle, you are awesome. That is all.

With your permission, I may play around with the color values of your code to get a look closer to the old SRK Black theme (only because people have always loved that theme). Personally, though, I have no problems with the newest skins.

7

I don’t know what you mean either.
But if you add these two code, you can change to what you like.



body > *, .page {
width: PUT A % OR PX !important;
}

.pageWidth
{
min-width: PUT A % OR PX !important;
}
8

Oh my, this is much nicer than the bright white. Props

9

Have fun! Color mods should be very straightforward.

10

Thank you, so much better <3

11

My eyes don’t burn anymore – sweet.

12

Got fixed width working (thanks a bunch, jdm714), but I’ve run into a problem with it I’m going to have to work out. Check it out:
http://i.imgur.com/W9JIS.png

Also on my to-do list:
-See if I can get some left/right borders going
-Get rid of any hover effects
-Maybe come up with a better overall color scheme (the blue is nice, but it’s a little flat)

13

The Blue looks tight…all the letters and fonts work well.
I’m gonna stick with this for a while.

14

Like I said you guys are welcome to go nuts with the color scheme. I’d be happy to see where you take it. I fixed a couple more transparency issues. If you run across any weird transparencies let me know.

15

ty good sir. much appreciated.

16

While I’m really digging the blue, can’t wait to see the black make a comeback.

Edit When I go to here: http://test.shoryuken.com/forum/index.php?forums/xbox-live.332/ It defaults to that SRK Light theme. Seems to only do that on that subforum, not sure why. Weird thing is, it will override the blue, no matter which forum I go too unless I go back to the home page then back to the forums.

Just thought you’d want to know.

17

Do you want the simple black mod back up? That’d only take a couple of minutes to get going.

That link comes up blue for me in Opera. It’s the subdomain though. Take the test out of the test.shoryuken.com and retry.

18

I didn’t notice the Reply Box.
Add this Code to fix.



element.style
{
width: 0px !important;
}

That will make the Reply Box resize automatically to match your set width.

And I noticed that the bar on the bottom needs change too.



.footer
.pageContent
{
width: PUT A % OR PX !important;
}

Add this Code for the Left and Right Border.



.messageList
.message
{
border-left: 1px solid #YOUR COLOR !important;
border-right: 1px solid #YOUR COLOR !important;
}
19

Black would be cool, if it’s not too much trouble.

And taking the test out of the URL fixed it.

20

You can change the color yourself easily enough, all you have to do is right-click on the Stylish icon and choose options, hit edit, then change this line:


background-color: #152e49 !important;

[COLOR=#000000][SIZE=13px][FONT=Consolas]change 152e49 to 000000.