WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
How to change page color (12 posts)

  1. ConsiderThis1
    Member
    Posted 6 months ago #

    I have been trying for 3 days to change the page color to FFFFB3 or hsla (60, 96.19%, 85.57%, 0.95). I looked at showcase sites' source code, but all I found was text color references. Please will you help?
    Karen

  2. WPyogi
    Volunteer Moderator
    Posted 6 months ago #

    Link to your site?

  3. ConsiderThis1
    Member
    Posted 6 months ago #

    http://health-boundaries.com/

    sorry, I don't go to forums often anymore. I forgot it had to be formatted

  4. CrouchingBruin
    Member
    Posted 6 months ago #

    Have you looked at your virtual content.css file? Try adding a background-color property to the body selector.

  5. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin ~~ As an aside I saw that you have colored pages on your Montezuma site.

    I've looked at each of the CSS files repeatedly and tried adding things I found on YouTube tutorials and in topics I found googling. So far nothing has done it. I haven't found a file specifically called "virtual content .css"

    I did find a css file that had the footer in it and color attributes, but when I changed the color there, nothing happened to the footer. So I'm not sure I quite grasp how this is supposed to work.

  6. CrouchingBruin
    Member
    Posted 6 months ago #

    OK, it sounds like you are brand new to the Montezuma theme, so here is some background information that you will find helpful.

    Like all themes, the main CSS rules are stored in a file called style.css. However, in the case of Montezuma, and unlike just about every other theme out there, the style.css file is created somewhat dynamically whenever a change is made to the virtual CSS files.

    The virtual CSS files can be found by going to Appearances > Montezuma Options > CSS Files from the WordPress Dashboard. They are referred to as virtual CSS files because they aren't physical files, but settings which are stored in a database table. That way, if the theme ever gets updated, you won't lose your CSS settings.

    You'll see files like content.css, which is the baseline CSS for the site, menus.css & menus_menu1.css files for changing the appearance of menus, one for widgets, etc. Any miscellaneous CSS goes in the various.css file. Unfortunately, it can be somewhat challenging to figure out which virtual file has the CSS rule that you want to change. I submitted a feature suggestion to the theme developer to have comment headings output in the style.css file to make them easier to find.

    So to change the page color of your site, go to the content.css file, scroll down and you'll see a rule for the body element that looks like this:

    body {
    	margin: 					0;
    	padding: 				0;
    	font-family: 			"Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif;
    	font-size: 				15px;
    	opacity: 				0; /* <--- will be turned on ( = set to '1' ) with jQuery
    									after google fonts, if any, have loaded and masonry layout,
    									if any, was applied */
    }

    Just add a background-color property like this:

    body {
    	margin: 					0;
    	padding: 				0;
    	font-family: 			"Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif;
    	font-size: 				15px;
    	opacity: 				0; /* <--- will be turned on ( = set to '1' ) with jQuery
    									after google fonts, if any, have loaded and masonry layout,
    									if any, was applied */
    	background-color: 			#ff0;  /* Yellow */
    }

    And you'll have changed the page color.

    Once you get comfortable with manipulating the virtual CSS files, you'll want to read up on how to use the virtual Main and Sub Templates (Appearances > Montezuma Options > Main Templates). The virtual templates allow you to manipulate the appearance of your web site to a greater degree. For example, you can add a sidebar to the left, move the menu to the top, add widget areas to the header or footer, create custom layouts for certain pages, etc.

  7. CrouchingBruin
    Member
    Posted 6 months ago #

    Oops, I forgot you already said what color you wanted to set the page to; use #FFFFB3 for the background-color instead of the #fff in my example.

  8. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin,
    Wow! I'm really excited. You explained it SO WELL!!!

    I had been totally confused.

    .... But I must still not get it somehow. I changed it, but the color hasn't changed... I used exactly what you wrote.

    Is there something I have to do besides "Save Changes"?

  9. CrouchingBruin
    Member
    Posted 6 months ago #

    That should have done it. Can you copy & paste the body section from your content.css file? Make sure you put it between backtick marks as indicated below so it gets formatted as code in the forum message.

  10. ConsiderThis1
    Member
    Posted 6 months ago #

    I put it at the top of that section and it worked. I'm all happy now.
    thank you.

  11. CrouchingBruin
    Member
    Posted 6 months ago #

    You're welcome. Looks like something weird is going on with your menu, though. Let me know if you need a hand.

  12. ConsiderThis1
    Member
    Posted 6 months ago #

    LOL... I see you've seen my page.

    A woman who also has a site in the showcase is back from her family visiting and has said she can help tomorrow.

    I am SO happy now that my site is looking a bit more like my original site that I want to recreate.

    Thank you SO SO much!!!!!!!!

    Karen

Reply

You must log in to post.

About this Theme

About this Topic