Jump to content
Sign in to follow this  
petez

Requesting Simplest Answer to "How to Customize Background and Text Colors on Individual Pages"

Recommended Posts

petez

I would like to be able to change the background color (I know I can do it with a background image, but would rather not) and the text on a page to colors different from the site-wide colors. FEATURE REQUEST for PL 2.5 !!!!! For example, I would like to have some pages with black backgrounds and white text. From research I understand that this must be done now with CSS. I have tried some cutting and pasting from other answers and tutes with no luck. Seems to me that individual page color customization would be a gimme in a pro environment.... Thanks in advance for your help.

Share this post


Link to post
Share on other sites
Rob

What CSS have you used or tried?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
James B

Hi Petez, To change the color of a particular page you can do so by selecting the page ID and then applying the following CSS. Replace hex color with your chosen color etc and page number with chosen page ID.

.page-id-13 body #page .page-canvas { background-color: #CCCCCC; }
To change text colour on a page, again change page ID to reflect your page (not 100% sure on this but worked in firebug)
.page-id-13  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { color: white !important; }


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
petez

Maybe some more info is needed. Following other suggestions, I installed PageLines Customize plug-in. I go to page lines-customize/style.css from within the plugin editor and copy the custom CSS below the Start Your Custom CSS here area. Due to the suggestion of my W3 Total Cache plugin, I changed the page naming structure to page names instead of numerical IDs. So, the page I am trying to get this to work on is http://nohumantrafficking.org/testpage. The numerical ID of the page from it's origination was 551. James, how would the CSS change if the ID structure was page names instead of numerical?

Share this post


Link to post
Share on other sites
catrina

The ID structure would not change if page names was used instead of numerical. The IDs in the CSS would be still be using the page ID numbers (not the page names). By default, pages on WordPress are always given ID numbers.


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

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  

×