WordPress.org

Support

Support » Themes and Templates » Montezuma » How to change page color

How to change page color

  • 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

Viewing 11 replies - 1 through 11 (of 11 total)
  • WPyogi

    @wpyogi

    Forum Moderator

    Link to your site?

    http://health-boundaries.com/

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

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

    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.

    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.

    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.

    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”?

    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.

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

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

    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

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to change page color’ is closed to new replies.
Skip to toolbar