How to change background color in Embed-Friendly theme?

jdr999

Hi gang,

How do I change this theme to a dark background? I've been digging in the custom.css but can't seem to figure out how to get the entire window dark.

Any ideas?

Thanks,
Joe

ricardodepaula

man, the background is in the custom.ccs. in body set the background color.

ricardodepaula

man, the background is in the custom.ccs. in body set the background color.

jdr999

Thanks for the reply.

You would think so, but that only seems to change the first two lines -- up to "No discussions were found." Then the rest of the embed window is still white..

Maybe I'm doing something wrong?

Thanks,
Joe

ricardodepaula

try download a dark theme and check your css file.

Rajio

not all the CSS is in there, thats why.
one option is to import vanilla's default css to your theme then modifying it but that seems wasteful. Ive since found that the best way is to use chrome and right click on something, go 'inspect element' and you can see what css is being applied, where from, and what its cascading over. handy for problems like this where stuff gets layers and styles cascade.

jdr999

Ah, I was an idiot!

I was changing "#Body {}" instead of adding "Body {}" above it.. Now it's working.

..but

During the page load the embed box is still completely white. After the page is finished loading it changes to the background color I selected.

That "flash" during page load is a little annoying. It seems to do that with other dark themes I've tried.. Is there a way to make it behave better and eliminate that white flash?

Thanks,
Joe

Abacus

Try changing the background of the page that the embed is embedded in...

Rookie2010

First if you do not have Firerfox installed, get it and install it, then apply the download/add-on “Firebug” also include the tool for FTP so it is all in one nice package.

Start up your site in Firerfox, also startup the new FTP program under tools; log on to your server follow the path to your theme folder such as /themes/default/design/ and using the FTP select style.css and shoot it over to your system and open it with Notepad ++ or whatever, now leave it just like it is. Click on the tab top left next to the FTP tab and browse your site with Firerfox, if you find any element you would like to change right click on it then select inspect element.

The firerbug will open and show it to you. The window on the right is HTML, the window on the left is CSS use this window to make temporary changes, such as color, font or what ever and look at the and see how those changes effected the design.

On the color change us something extreme like #00FF00 lime green to highlight it so you see the effect easily enough.

Also you can run your mouse pointer up and down over the element in the firer bug and it will tell if it is a picture with the name and size of it plus it will show you the color. Once you know all this including the header name locate it in your style.css or custom. Css using the notepad ++ or whatever implement only one or two changes at a time save it. Go back to the FTP program still logged on to your server.

Important before shooting the new file over, on your server side RENAME the Style.CSS or custom. Css, to BAK_whatever.CSS DO NOT over write it just in case; now shoot the new file from your system to your sever using the FTP program into the proper folder.

Go back and browse your site and look for the change (refresh or reload the page to see the changes) if it is what you want cool if not try again. Make whatever changes you want to your copy of style.CSS replacing the one on your server until you have effectively made all the changes you would like.

Firerfox, Firebug, notepad Plus Plus, and the FTP are a great all in one deal. Once you learn how to use these together you will breeze through any change you would like to make.

Always BAK the files you change replacing the old BAK file. Also using the firerfoxes FTP shoot the Vanilla directory over to your desktop and you can use it as a directory guide and backup. Everything you do on the left will be identical on the right.

Good luck.

Rookie2010

Rookie2010

Oops I goofed. The window on the right is HTML, the window on the left is CSS.
Suppose to be HTML is on the left and the CSS is on the right.