tdeditor theme Change the color behind header and color of font on header

  • Unknown's avatar

    I am trying to customize my page and I don’t know how to write code. I have a found a theme that works for my department, but it looks very plain. Is there an easy way to do this on the tdeditor theme?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Welcome to Custom CSS!

    Here is an example to get you started:

    #masthead, #masthead .site-title a {
    	color: #fff;
    }
    
    #masthead {
    	background: #444;
    }

    Add it to your Appearance > Customize > CSS editor.

    Adjust the color codes as needed.

    You might also like:
    http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b

  • Unknown's avatar

    Awesome!!!!!! You are the best! Yes I am as excited as it reads.

    Ok, now the tagline is too light.

    #F5F5DC is the color that I would like behind all my posts and widgets. Any ideas on that?

  • Unknown's avatar

    Let me walk you through the next couple changes so you can get a better handle on how to make these changes on your own.

    First, this help page explains how to find what CSS rules the theme is using with built-in browser tools. I’m going to use this method in a screencast below:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    I made a screencast for you showing how to change the tagline color and background colors of widgets and posts:
    https://cloudup.com/c9jH50T57nn (Length: 7:20)

  • Unknown's avatar

    Ok, now I am impressed. The screencast was a great idea and it will allow me to completely screw up the theme. jk.

    I appreciate all the help and when Im done, IM going to learn how to make a screencast. Thank you so much

  • Unknown's avatar

    OMG! I lost the s2 customized file. I can not get
    .blog-one-column .hentry to work to change the background color of the postsHELP

  • Unknown's avatar

    got it to work, but I cannot find out how to change the color of the menu links from white to maroon, #660000

  • Unknown's avatar

    Lastly, do I have to do this with each page? Or is the home page the only thing that can be customized?

  • Unknown's avatar

    OMG! I lost the s2 customized file. I can not get
    .blog-one-column .hentry to work to change the background color of the postsHELP

    Just a quick note to say that you can pick almost any CSS file there for testing purposes and it will very likely work just as well because you’re just using it as a placeholder for testing anyway.

    I think the built in tools for Firefox are actually a little better at it though, so you might want to try it out. Here’s how the style editor looks in Firefox 33.1: https://cloudup.com/c7ohw3BP0kZ

  • Unknown's avatar

    got it to work, but I cannot find out how to change the color of the menu links from white to maroon, #660000

    Menu colors can be a little more complex to change—how complex depends on the theme. So let me help you out with this change and explain my typical process for figuring it out in case it helps you or someone else reading through this forum later.

    To change menu colors, I typically look in the page source until I find the link to the main style.css file for the theme. Then I copy out the entire section of menu-related CSS rules into a text file. Then I look through each CSS block and remove any block that does not have a color rule in it. Then I look through the remaining blocks and delete any property:value line that is not color related. What I’m left with at the end is a complete set of color rules for the menu for the theme in question.

    At this point, it would be good to point out that CSS is theme-specific. So, that means that CSS you write for the tdeditor theme won’t necessarily work in another theme. If you switch themes, your past CSS will automatically be moved to a CSS revision (so it won’t be lost but it will be inactive for the new theme because it’s unlikely to work in the new theme anyway). When you change themes, you have to start over with custom CSS.

    Okay! I checked http://milfordpolicede.org/ just now and I see that you have switched to the Twenty Ten theme, so here is a CSS example that will allow you to adjust all of the colors in the main menu in that theme including the link colors and background colors and link background hover colors and the currently selected menu items as well:

    #access {
    	background: #400;
    }
    #access a {
    	color: #aaa;
    }
    #access ul ul a {
    	background: #600;
    }
    #access li:hover > a,
    #access ul ul :hover > a {
    	background: #600;
    	color: #fff;
    }
    #access ul li.current_page_item > a,
    #access ul li.current_page_ancestor > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a {
    	color: #fff;
    }
    * html #access ul li.current_page_item a,
    * html #access ul li.current_page_ancestor a,
    * html #access ul li.current-menu-ancestor a,
    * html #access ul li.current-menu-item a,
    * html #access ul li.current-menu-parent a,
    * html #access ul li a:hover {
    	color: #fff;
    }

    I didn’t change the text color, only the backgrounds, but I left in all the codes just in case you want to fidget with changing the menu item text colors as well.

  • Unknown's avatar

    Lastly, do I have to do this with each page? Or is the home page the only thing that can be customized?

    Most CSS examples will apply to all the pages on a website unless you deliberately limit the change to one type of page—for example, you could start your CSS selectors with “.home” to indicate you only want to target the front page with body class “home” on it.

    As long as you get the CSS rules right for the theme you’re using, you should be all set. Something called specificity for CSS comes into play here, and if you would like to learn more about that, please take a look at this related help page: http://www.htmldog.com/guides/css/intermediate/specificity/

  • Unknown's avatar

    You have been an incredible help. The theme change was not of my choice, my supervisor didn’t like tdeditor. I have learned a lot from this thread and I appreciate your help and patients.

  • Unknown's avatar

    The theme change was not of my choice, my supervisor didn’t like tdeditor.

    Oh!

    Well, I hope everyone loves Twenty Ten. It’s also a good theme. :)

  • The topic ‘tdeditor theme Change the color behind header and color of font on header’ is closed to new replies.