Jump to content
Sign in to follow this  
Skip

Background and Text Colors - Platform Pro

Recommended Posts

Skip

Hello How would I change the entire website theme to be black with white text? I searched your forums but only found info. for other themes. I tried to change the <custom code> custom css to the following: body {background-color: #000000} but it does not work... Please let me know what is the best way to make the necessary adjustments. A suggestion for a future update... A way to select colors using your wysiwyg for each page background, fonts, etc. would make this a lot easier... Thank you for your thoughtful consideration. All the best of Providence. Skip

Share this post


Link to post
Share on other sites
catrina

Try adding

body {background-color: #000000; font-color: #fff;}

to the base.css file in Platform Base.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Skip

Hi Catrina I was able to FTP into the server to the base.css file and placed the code as you suggested. It still has not changed the background or the font colors. I will paste everything below so you may see if I did something wrong... Thank you for your thoughtful consideration. All the best of Providence. Skip /* ============================= */ /* = HOW TO CUSTOMIZE PLATFORM = */ /* ============================= */ /* Edit this style sheet to create your own custom theme based on the Base Platform theme. Rules placed in this stylesheet will override the default styles of the Base Platform theme and will not be changed or over written when you update the Platform framework. Additionally, since this stylesheet is purely for editing purposes you can easily undo or erase some of the CSS to return your site back to the look and feel of the Base theme. In the Base theme the footer is black ???‚¬??? the CSS looks like this: #footer { clear:both; font-size:1em; overflow:hidden; text-align: left; background: #000; color: #999; position: relative; } To change the background color to white, all you have to do is declare a new rule for the color like so: #footer { background: #FFF; } A great tool for modifying themes and inspecting CSS elements is the FireBug extension for FireFox. You can also use the developer tools provided by Chrome (right-click and "inspect element") or Internet Explorer if you're feeling dangerous. Also, for a comprehensive list of CSS rules and usage try consulting W3 schools @ http://www.w3schools.com/css/default.asp */ /* ============================== */ /* = Start Your Custom CSS Here = */ /* ============================== */ body {background-color: #000000; font-color: #fff;} /* @ CSS corresponding to the hook used in functions.php; adds a stumbleupon icon to branding section */ .icons .stumbleupon {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px 0;} .icons .stumbleupon:hover {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px -22px;} /* @ Pullquote Section */ #pullquote.copy{ background: #f7f7f7 url(images/pullquote.png) no-repeat 15px 15px; padding: 15px 20px 15px 45px; margin-bottom: 1.5em; } #pullquote .thepullquote{font-size: 1.5em;margin-bottom: 5px;line-height: 1.3em;} #pullquote .thecitation{color: #AAA; font-style: italic;padding-left: 15px;}

Share this post


Link to post
Share on other sites
Kate

Hi Skip - Try this:

{background-color:#000000 !important;color:#ffffff !important;}

Also, notice the modified "color" attribute... I think Catrina's may have just been a typo or something.

Share this post


Link to post
Share on other sites
Skip

Hi Kate Thanks for writing a response... Please forgive my ignorance. I tried the code you wrote and it still does not make all backgrounds black and all text white. Below is what I placed in the base.css file in platform base... Please let me know what I may be doing wrong... Thank you, Skip ------------------------------------------------------------------- /* ============================= */ /* = HOW TO CUSTOMIZE PLATFORM = */ /* ============================= */ /* Edit this style sheet to create your own custom theme based on the Base Platform theme. Rules placed in this stylesheet will override the default styles of the Base Platform theme and will not be changed or over written when you update the Platform framework. Additionally, since this stylesheet is purely for editing purposes you can easily undo or erase some of the CSS to return your site back to the look and feel of the Base theme. In the Base theme the footer is black ???‚¬??? the CSS looks like this: #footer { clear:both; font-size:1em; overflow:hidden; text-align: left; background: #000; color: #999; position: relative; } To change the background color to white, all you have to do is declare a new rule for the color like so: #footer { background: #FFF; } A great tool for modifying themes and inspecting CSS elements is the FireBug extension for FireFox. You can also use the developer tools provided by Chrome (right-click and "inspect element") or Internet Explorer if you're feeling dangerous. Also, for a comprehensive list of CSS rules and usage try consulting W3 schools @ http://www.w3schools.com/css/default.asp */ /* ============================== */ /* = Start Your Custom CSS Here = */ /* ============================== */ {background-color:#000000 !important;color:#ffffff !important;} /* @ CSS corresponding to the hook used in functions.php; adds a stumbleupon icon to branding section */ .icons .stumbleupon {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px 0;} .icons .stumbleupon:hover {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px -22px;} /* @ Pullquote Section */ #pullquote.copy{ background: #f7f7f7 url(images/pullquote.png) no-repeat 15px 15px; padding: 15px 20px 15px 45px; margin-bottom: 1.5em; } #pullquote .thepullquote{font-size: 1.5em;margin-bottom: 5px;line-height: 1.3em;} #pullquote .thecitation{color: #AAA; font-style: italic;padding-left: 15px;}

Share this post


Link to post
Share on other sites
Kate

Hey Skip - Sorry about that... those styles should be applied to the "body" tag, like so:

body{background-color:#000000 !important;color:#ffffff !important;}
Now, if you're using the "fixed width" option for the site, you may need to use:
body.fixed_width{background-color:#000000 !important;color:#ffffff !important;}

Share this post


Link to post
Share on other sites
Skip

Hi Kate I really appreciate your help & support. I have both the platform base and the platform pro installed. Please forgive my ignorance. Both are wysiwyg's correct? I'm not able to find the base.css file in the platform pro. Regardless, I tried both what you suggested in the base.css file as you see below but it does not make everything black except the text in white. Please let me know what is the easiest way to get the background color you want for everything on the website as well as select the color text you want for the entire website. Thank you, Skip /* ============================= */ /* = HOW TO CUSTOMIZE PLATFORM = */ /* ============================= */ /* Edit this style sheet to create your own custom theme based on the Base Platform theme. Rules placed in this stylesheet will override the default styles of the Base Platform theme and will not be changed or over written when you update the Platform framework. Additionally, since this stylesheet is purely for editing purposes you can easily undo or erase some of the CSS to return your site back to the look and feel of the Base theme. In the Base theme the footer is black ???‚¬??? the CSS looks like this: #footer { clear:both; font-size:1em; overflow:hidden; text-align: left; background: #000; color: #999; position: relative; } To change the background color to white, all you have to do is declare a new rule for the color like so: #footer { background: #FFF; } A great tool for modifying themes and inspecting CSS elements is the FireBug extension for FireFox. You can also use the developer tools provided by Chrome (right-click and "inspect element") or Internet Explorer if you're feeling dangerous. Also, for a comprehensive list of CSS rules and usage try consulting W3 schools @ http://www.w3schools.com/css/default.asp */ /* ============================== */ /* = Start Your Custom CSS Here = */ /* ============================== */ body{background-color:#000000 !important;color:#ffffff !important;} /* @ CSS corresponding to the hook used in functions.php; adds a stumbleupon icon to branding section */ .icons .stumbleupon {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px 0;} .icons .stumbleupon:hover {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px -22px;} /* @ Pullquote Section */ #pullquote.copy{ background: #f7f7f7 url(images/pullquote.png) no-repeat 15px 15px; padding: 15px 20px 15px 45px; margin-bottom: 1.5em; } #pullquote .thepullquote{font-size: 1.5em;margin-bottom: 5px;line-height: 1.3em;} #pullquote .thecitation{color: #AAA; font-style: italic;padding-left: 15px;}

Share this post


Link to post
Share on other sites
cmunns

There are background color options placed in the PlatformPro Settings - Global Options panel Did you try those before getting into CSS?

Share this post


Link to post
Share on other sites
Skip

Hello Adam Thanks for writing. No, I have not tried thsi with PlatformPro. I just posted the question and have received the aforementioned responses. I was hoping there would be a simple easy solution. In your work with new releases of the wysiwyg having a place to point and click on colors for the different parts of the websites would be awesome! Any and all help is greatly appreciated. Please keep up the good work. All the best of Providence in the New Year! Skip

Share this post


Link to post
Share on other sites
Skip

AWESOME Adam! I updated the version and can now see it... Will give it a try! Thanks! Skip

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×