Need help? Check out our Support site, then


changing colors of header box and page titles

  1. I have spent hours on bettytest.wordpress.com, the support pages and the WP tutorials and still can't figure out things. I am using the Pachyderm theme.

    I want the background color for the header box to be turquoise (00FFF) or the same color green that the whole background is, not white.

    I want to know how to change the color and typestyle of the items that appear in the header box.

    I want the name of several of the pages to be royal blue (2630ef ), not the grey color.

    I would love to have the background in the page content be something other than white.

    I can't make any of this happen. I am a beginner so need basic instructions on codes to add and where to add them.

    In trying to center the header box. the instructions I have listed in the CSS file (centering the header) doesn't do a thing. I got the instructions from one of the forum entries.

    I am at a loss over how to change anything and I have the CSS upgrade.

    Thanks for whatever help you can give me on any of these items!

    The blog I need help with is bettytest.wordpress.com.

  2. Please do not create another thread. This one is tagged and will be moved to the CSS Forum for you.

  3. I checked http://bettytest.wordpress.com/ and I found that you've already figured out some of these things, however, I will go through each question here one by one.

    I want the background color for the header box to be turquoise (00FFF) or the same color green that the whole background is, not white.

    I think by header box you mean the main menu. Here's how to change the main menu background of the Pachyderm theme:

    .navigation-main,
    .navigation-main a,
    .navigation-main a:visited,
    .navigation-main a:hover,
    .navigation-main a:active,
    .menu-toggle {
    	background-color: #3bff00;
    }
    
    .navigation-main li:hover > a {
    	background-color: rgba(255,255,255,.5);
    }

    The first rule changes the main menu background as well as each item inside the main menu. The second rule changes the hover color by making it 50% later than whatever you set for the background color.

  4. I want to know how to change the color and typestyle of the items that appear in the header box.

    To use custom fonts, you should use the the Appearance → Themes → Customize → Fonts panel in your blog dashboard.

    To adjust fonts separate from custom fonts, you can use a font stack.

    Here is an example to get you started:

    #site-navigation {
    	font-family: “Franklin Gothic Medium”, “Arial Narrow Bold”, Arial, sans-serif;
    	font-weight: bold;
    	font-style: italic;
    }

    To learn more about all the different font styles you can apply, see this help page:
    http://www.htmldog.com/guides/css/beginner/text/

  5. I want the name of several of the pages to be royal blue (2630ef ), not the grey color.

    To change all posts and page title colors to blue, you can use a rule like this:

    .entry-title,
    .entry-title a {
    	color: #2630ef;
    }

    To target just a specific page, I can show you how to figure out which CSS selector to use so you can adjust the example from above. First, right click on the title you want to change and the select the "Inspect Element "option. That will pull up at panel with the HTML for the thing you clicked on the highlighted and show all of the CSS that applies to it on the right. Look for the "article" HTML tag and find the class attribute. There should be a class that is specific to the page that you're on.

    For example, in this post http://bettytest.wordpress.com/st-martins-ministries/ one of the class names of the "article "element on that post is "post-503. " You can use that class name to target just this post by updating the example above to this instead:

    .post-503 .entry-title {
    	color: #2630ef;
    }
  6. I would love to have the background in the page content be something other than white.

    This example will change the article and widget background colors to yellow:

    .hentry,
    .widget {
    	background-color: yellow;
    }

    Adjust the color code as needed.
    http://en.wikipedia.org/wiki/Web_colors#X11_color_names

  7. In trying to center the header box. the instructions I have listed in the CSS file (centering the header) doesn't do a thing. I got the instructions from one of the forum entries.

    CSS is theme-specific, so it's possible you copied the CSS for a theme other than the Pachyderm theme, and that's why it won't work.

    I checked http://bettytest.wordpress.com/ and the main header and site title are already centered. Are you talking about post headings instead?

  8. I can't make any of this happen. I am a beginner so need basic instructions on codes to add and where to add them.

    Welcome!

    Editing CSS can be really fun :-) and here are some beginner tutorials to help you learn more about CSS editing:
    http://www.htmldog.com/guides/cssbeginner/
    http://en.support.wordpress.com/editing-css/

Topic Closed

This topic has been closed to new replies.

About this Topic