any body know how to change the background of this website,

[music_piano_ljy]

black background and white text make me  dizzy .

This forum is great , but if the color remain like that. I cannot enjoy this .

Thanks

[j_menz]

Some browsers (such as IE) allow you to override webpage colours; it affects all websites, though, not just this one.

Otherwise, you're stuck with it, I'm afraid.

[music_piano_ljy]

    I　try to change it in firebox. It doesn't work. 
Some say that it is depend on the webpage developer . 
Too say.  This kind of black background and white color is very hard for the person who have a severe short eye sight like me

[outin]

Have you tried to change the font size in your browser settings to largest? That worked for me and it's actually really comfortable now.

[music_piano_ljy]

thanks .  it is not the problem of font size. Its the background , I cannot stare the page for more than one minute ,  feel very dizzy.

For other website which have normal white background and black text, it's ok, I can watch for several hours , no problem

[j_menz]

The I suggest you use Internet Explorer to access this site using the override colous that it allows, and use Firefox for your general browsing.

[Derek]

Funny how different people are. I find the soft grays and golds really easy on the eyes. Another forum I post on a lot also has a soft dark background like this. For me, it is much more pleasant as I have a large floater in my right eye. Dark backgrounds make it nearly impossible to notice the floater. So...if that is ever offered, I hope it is an option and not the default

[Bob]

There are a few threads in the website board down on the bottom asking the same thing.  Somewhere in the profile/preference area you can set the color scheme so it's a white background.

[lloyd_cdb]

To my knowledge, that option doesn't exist even in the look/layout options.  I have been messing around editing the script on the forums to have a white background and black text, but I can't seem to get it to be permanent.  I'll mess around a bit more later and see if I can help you.

[Bob]

Yeah.  Looks like that option disappeared.

[lloyd_cdb]

OK.....

I got annoyed that I couldn't figure out how to change it permanently, so...

I "wasted" a ton of time at work to figure it out (probably helps me in the long run).

In regards to firefox, it has issues editing the site-specific stylesheets.  So anything you change will change things for every website.  I recommend using chrome for this, simply because this is how I did it and can walk you through it more efficiently.  That being said, if people want me to try and see how IE works, I don't mind that much. (it's probably even easier in Opera <--- my favorite browser by FAR)

For Chrome:

1) You want to visit this site to add the "Stylish" extension to Chrome.  For the fearful of extensions, it really isn't dangerous in any way/shape/form.

2) It should have added the Stylish button in the top right of chrome next to the control menu. Click this, and then click "manage installed styles" or "write new style", whichever one is showing up.

3) When the page opens, click "Write New Style" and name it SimplePianoStreet (or whatever you'd like).  Where it says "Apply to:", click the "Specify" button.  In the drop-down menu, choose "URLs Starting With" and and copy

Code: [Select]

https://www.pianostreet.com/smf into the space.  This will apply the formatting only to the forums instead of the entire site.

4) Copy and paste the following code into the code box and then hit Save.  Make sure it's enabled and you'll have the simplistic website.  If you think anything is too bright or hard to read, I can edit it to make it easier on the eyes.  In addition, you can just hit "disable" from the stylish drop-down menu whenever you want to switch back.  Here is the code:

Code: [Select]

/* Normal, standard links. */

a:link

{

color: blue;

text-decoration: none;

}

a:visited

{

color: blue;

text-decoration: none;

}

a:hover

{

color: #cc3333;

text-decoration: underline;

}



/* Navigation links - for the link tree. */

.nav, .nav:link, .nav:visited

{

color: blue;

text-decoration: none;

}

a.nav:hover

{

font-weight: bold;

color: #cc3333;

text-decoration: underline;

}



/* Tables should show empty cells. */

table

{

empty-cells: show;

}



/* By default (td, body..) use verdana in black. */

body, td, th , tr

{

    background-color: white;
    
color: black;

font-size: small;

font-family: verdana, sans-serif;

}



/* The main body of the entire forum. */

body

{

background-image:url(https://www.designersguild.com/_assets/images/off-white-paint-main.jpg);

margin: 0px;

padding: 0px;

}



/* Input boxes - just a bit smaller than normal so they align well. */

input, textarea, button

{

font-size: 9pt;

color: #000000;

font-family: verdana, sans-serif;

}

input, button

{

font-size: 90%;

}



textarea

{

font-size: 100%;

color: #000000;

font-family: verdana, sans-serif;

}



/* All input elements that are checkboxes or radio buttons. */

input.check

{

}



/* Selects are a bit smaller, because it makes them look even better 8). */

select

{

font-size: 90%;

font-weight: normal;

color: #000000;

font-family: verdana, sans-serif;

}



/* Standard horizontal rule.. ([hr], etc.) */

hr, .hrcolor

{

height: 1px;

border: 0;

color: #444444;

background-color: #444444;

}



/* No image should have a border when linked */

a img

{

border: 0;

}

/* A quote, perhaps from another post. */

.quote

{

color: #99aaff;

background-color: #191919;

border: 1px solid #444444;

margin: 1px;

padding: 10px;

font-size: x-small;

line-height: 1.2em;

}



/* A code block - maybe even PHP ;). */

.code

{

color: #ddcc77;

background-color: #222222;

font-family: "courier new", "times new roman", monospace;

font-size: x-small;

line-height: 1.3em;

/* Put a nice border around it. */

border: 1px solid #444444;

margin: 1px auto 1px auto;

padding: 10px;

width: 99%;

/* Don't wrap its contents, and show scrollbars. */

white-space: nowrap;

overflow: auto;

/* Stop after about 24 lines, and just show a scrollbar. */

max-height: 24em;

}



/* The "Quote:" and "Code:" header parts... */

.quoteheader, .codeheader

{

color: #99aaff;

text-decoration: none;

font-style: normal;

font-weight: bold;

font-size: x-small;

line-height: 1.2em;

}



/* Generally, those [?] icons.  This makes your cursor a help icon. */

.help

{

cursor: help;

}



/* /me uses this a lot. (emote, try typing /me in a post.) */

.meaction

{

color: red;

}



/* The main post box - this makes it as wide as possible. */

.editor

{

width: 96%;

}



/* Highlighted text - such as search results. */

.highlight

{

font-weight: bold;

color: red;

}



/* Alternating backgrounds for posts, and several other sections of the forum. */

.windowbg

{

color: black;

background-color: white;

}

.windowbg2

{

color: black;

background-color: #e2e3e6;

}

.windowbg3

{

color: black;

background-color: white;

}

/* the today container in calendar */

.calendar_today

{

background-color: #000000;

}



/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */

.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td

{

color: blue;

font-style: normal;

font-weight: bold;

background: url(images/headerbg.jpg) #222222 repeat-x;

/*border-bottom: solid 1px #9BAEBF;

border-top: solid 1px #FFFFFF;*/

padding-left: 10px;

padding-right: 10px;

}

.titlebg, .titlebg a:link, .titlebg a:visited

{

font-weight: bold;

color: white;

font-style: normal;

}



.titlebg a:hover

{

color: #990000;

}

/* same as titlebg, but used where bold text is not needed */

.titlebg2 a:link, .titlebg2 a:visited

{

color: black;

font-style: normal;

text-decoration: underline;

}



.titlebg2 a:hover

{

text-decoration: underline;

}



/* This is used for categories, page indexes, and several other areas in the forum.

.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/

.catbg , tr.catbg td , .catbg3 , tr.catbg3 td

{

background: url(images/catbg.jpg) #222222 repeat-x;

color: #ffffff;

padding-left: 10px;

padding-right: 10px;

}

.catbg2 , tr.catbg2 td

{

background: url(images/catbg.jpg) #222222 repeat-x;

color: #ffffff;

padding-left: 10px;

padding-right: 10px;

}

.catbg, .catbg2, .catbg3

{

/* border: 1px solid #000000;

border-bottom: solid 1px #375576;*/

}

.catbg, .catbg2

{

font-weight: bold;

}

.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited

{

font-size: 95%;

color: white;

text-decoration: none;

}

.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited

{

color: blue;

text-decoration: none;

}

.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover

{

color: #cc3333;

}

/* This is used for tables that have a grid/border background color (such as the topic listing.) */

.bordercolor

{

background-color: black;

padding: 0px;

}



/* This is used on tables that should just have a border around them. */

.tborder

{

padding: 1px;

border: 1px solid #000000;

background-color: white;

color: black;

}



/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */

.smalltext

{

font-size: x-small;

font-family: verdana, sans-serif;

}

.middletext

{

font-size: 90%;

}

.normaltext

{

font-size: small;

}

.largetext

{

font-size: large;

}





/* Posts and personal messages displayed throughout the forum. */

.post, .personalmessage

{

width: 100%;

overflow: auto;

line-height: 1.3em;

}



/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */

.signature

{

width: 100%;

overflow: auto;

padding-bottom: 3px;

line-height: 1.3em;

}



/* Sometimes there will be an error when you post */

.error

{

color: red;

}





/* definitions for the main tab, active means the tab reflects which page is displayed */

.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last

{

color: white;

text-transform: uppercase;

vertical-align: top;

}

.maintab_back, .maintab_active_back

{

color: white;

text-decoration: none;

font-size:  9px;

vertical-align: top;

padding: 2px 6px 6px 6px;

font-family: tahoma, sans-serif;

}



.maintab_first

{

background: url(images/maintab_first.gif) left bottom no-repeat;

width: 10px;

}

.maintab_back

{

background: url(images/maintab_back.gif) left bottom repeat-x;

}

.maintab_last

{

background: url(images/maintab_last.gif) left bottom no-repeat;

width: 8px;

}

.maintab_active_first

{

background: url(images/maintab_active_first.gif) left bottom no-repeat;

width: 6px;

}

.maintab_active_back

{

background: url(images/maintab_active_back.gif) left bottom repeat-x;

}

.maintab_active_last

{

background: url(images/maintab_active_last.gif) left bottom no-repeat;

width: 8px;

}


/* how links behave in main tab. */

.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited

{

color: blue;

text-decoration: none;

}



.maintab_back a:hover, .maintab_active_back a:hover

{

color: #cc3333;

text-decoration: none;

}

/* definitions for the mirror tab */

.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last

{

color: white;

text-transform: uppercase;

vertical-align: top;

}

.mirrortab_back, .mirrortab_active_back

{

color: white;

text-decoration: none;

font-size: 9px;

vertical-align: bottom;

padding: 6px 6px 2px 6px;

font-family: tahoma, sans-serif;

}



.mirrortab_first

{

background: url(images/mirrortab_first.gif) no-repeat;

width: 10px;

}

.mirrortab_back

{

background: url(images/mirrortab_back.gif) repeat-x;

}

.mirrortab_last

{

background: url(images/mirrortab_last.gif) no-repeat;

width: 6px;

}

.mirrortab_active_first

{

background: url(images/mirrortab_active_first.gif) no-repeat;

width: 6px;

}

.mirrortab_active_back

{

background: url(images/mirrortab_active_back.gif) repeat-x;

}

.mirrortab_active_last

{

background: url(images/mirrortab_active_last.gif) no-repeat;

width: 8px;

}



/* how links behave in mirror tab. */

.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited

{

color: blue;

text-decoration: none;

}



.mirrortab_back a:hover, .mirrortab_active_back a:hover

{

color: #cc3333;

text-decoration: none;

}



/* The AJAX notifier */

#ajax_in_progress

{

background: #32CD32;

color: white;

text-align: center;

font-weight: bold;

font-size: 18pt;

padding: 3px;

width: 100%;

position: fixed;

top: 0;

left: 0;

}
Just make sure you copy the entire thing.

EDIT: it can be a little disagreeable when loading some of the pages, where some of the link colors revert back to gold.  If you just reload it it should be fine.

[lloyd_cdb]

Oh, and sorry about the users section at the bottom.  For the life of me I can't figure out how to change the user links from gold to blue.

[music_piano_ljy]

Oh, and sorry about the users section at the bottom.  For the life of me I can't figure out how to change the user links from gold to blue.

Thank you so much.