Removing/Altering Parts of 'Clean Home' Theme

  • Author
  • #627723


    I am trying to:

    1) remove the top bar on the Clean Home theme (the black line & the links above it). I wanted to remove it completely, and I do have the upgraded ability to edit CSS. Does anyone know which part of the coding is that menu? I can’t seem to get it right.

    Also, I would like to 2) remove the borders on all of the images. Tips anyone?

    Please let me know if anyone can be of help- I’m new at this CSS thing but would like to improve!
    My blog is if you need a visual to understand what I’m trying to change.


    The blog I need help with is



    Hi Meg,
    There is no Staff support for CSS editing and this week we have only 1 Volunteer who may occasionally drop in and help so you will have to be patient while you wait. Perhaps this question has been asked and answered so here’s a search link for the theme

    Please be sure to read this article before starting your editing >


    To remove the top nav menu, add this to your CSS:

    #nav {

    The black line is a border to the header image. To remove it, add this:

    #header-image {

    To remove all the image borders, add this:

    .hentry img, body.attachment .navigation img {

    (@TT: How can you know how many volunteers we have this week?)



    Thank you so much! Perfect! Can I bother you for a few more things?

    -Is it possible to make the space at the top above the header smaller?
    -How can I remove all of the dotted lines? I found a previous forum, but I couldn’t find it again.
    -Not sure why Typekit isn’t showing the Post titles as the correct font…suggestions? (Not a really big deal though)



    You’re welcome.

    “How can I remove all of the dotted lines?”
    Including when you hover over or not? And replace them with what, to show that the item is a link?

    “Not sure why Typekit isn’t showing the Post titles”
    What exactly have you tried?


    Dotted Lines – Yes, even when hovering and such, and also the ones dividing the sections/links. I would not want to replace them with anything, I’d rather just the text be the link.

    For typekit, only the post titles are not showing up in the correct font, but it’s not as big of a deal.

    Thank you for your help- I really appreciate it! Learning CSS is… interesting :)


    To remove the line below the header, the line between main column and sidebar, and the dotted line below all links, add this:

    .header a,
    #blurb a,
    .content a,
    #sidebar a,
    #footer a,
    .header a:hover,
    #blurb a:hover,
    #sidebar a:hover,
    #footer a:hover,
    .content a:hover {
    border: none;

    To hide the line between each post and the next, try adding this:

    hr {
    border-color: #ddd;

    As for Typekit, the selectors for the post tiles are these:

    .hentry h1, .hentry h1 a

    If you’re using Firefox, you should install the Firebug and Aardvark add-ons: help you examine the CSS of your page.


    Thank you! Lines are gone!

    So basically editing CSS by adding to the stylesheet is just adding little parts of code that override the original stylesheet?

    For example, if I wanted to change the rollover color of the post heading links, would that be do-able?


    Yes, you add the right selector and only the detail you want to override.

    For example, to change the hover color of post titles, you would add this:

    .hentry h1 a:hover {

    (Replace 000 with the hex for the color you want.)


    And for all links on the blog it would be…? (Realized I said just the post headers to be a different color)

    Still no luck with the Typekit font for the post headers. Is there a way to override that or is that more of a Typekit issue?

    (Not sure what to do with this: As for Typekit, the selectors for the post tiles are these:
    .hentry h1, .hentry h1 a)

    Merci infiniment!!


    “And for all links on the blog it would be…?”

    You can now try that yourself, since I gave you all the link selectors in my previous reply: you need the bunch of selectors that end with “hover”.

    “Not sure what to do with this”

    What did you do for the elements you have successfully changed?


    Perfect. Figured out the plugging in.

    In terms of a basic outline- I have literally been adding the codes to the Edit CSS Style Sheet. I am not able to see the Style Sheet other than the original, and what I have added separately. Am I doing this correctly? (I imagine this is a commonly asked question)

    I have successfully changed all that I have asked about aside from the little squares next to the Widget links are still red as opposed to the blue of the link that I changed them to. (

    The blog post titles still are the original font of the theme, and not that of TypeKit, which I do not understand why it is not working as the rest of the text on the site.

    The only other thing I would have liked to be able to do if possible is make the gap at the top of the page smaller – where the title was originally, can it be removed completely to make the header more condensed with the body text?

    Otherwise everything is looking the way I had hoped.

    Thanks for your CSS tips.


    1) I thought we’d made that clear! Yes, you leave the original CSS in peace and add only whatever you wish to override. No, unfortunately it’s not a commonly asked question – messing up the original is a commonly made mistake. For a more detailed answer, check this post by our CSS expert devblog:

    2) The little squares are a bit of a pain because they are images. You’ve got to go here: ,
    download the theme, find the image in the Images folder, edit it in an image editing application to change its color, upload the new version via Media > Add New, copy its URL, then add this to your CSS:

    #sidebar .block li a:hover {
    	background: url(URL OF IMAGE HERE);

    3) You keep telling me about Typekit but you didn’t answer my question: how exactly did you change the font of the elements that have been successfully changed?

    4) I’m seeing that you have actually deleted your title and tagline in Settings>General. Veeeery bad for search engines! Go and type them back in, then add this to your CSS:
    #logo { display:none; }


    1) K, Got it. Just was making sure I was understanding what I’m doing with CSS editing (it’s purpose).

    2) Rollover red image should be set to blue. Showed up with lines at first, I’ll get it on the 2nd try.

    3) For Typekit I embedded the code simply into my CSS, given in the Typekit when launched. I specified for one of the fonts All Headings and for one font All Body.

    4) Title: Oh! I read that in another forum- will change that now!! Thanks!

    and one more question…

    What’s the CSS code to add a Favicon for the browser tabs?


    For the favicon, that is called a blavatar (blog avatar) here it does not happen in the CSS, but this should will you going.


    For typekit, if you are using one of the predefined themes, this will help out:

    If you are using a different theme, then when setting stuff up in your account you have to specify the selectors and the font you want used.


    Yes I am using a different theme (non-pre-defined).. which selector would be that of the Blog Post Title, and how do I code it to make it the Typekit font?

    I have a Blavatar image uploaded, but it does not show up in the tab button in Chrome. Perhaps it’s the browser?



    Yes I am using a different theme (non-pre-defined).. which selector would be that of the Blog Post Title, and how do I code it to make it the Typekit font?

    I have a Blavatar image uploaded, but it does not show up in the tab button in Chrome. Perhaps it’s the browser?



    The blavatar might not show up till after you clear the browser cache and restart the browser. Chrome is a funny duck and sometimes it could be a few days before it shows up.

    Before I’ll help you with the post title issue you need to go to settings > reading and set your blog to show at most 2 blog posts per page. With all the images you are using in each post, I’m not going to burn up my limited wireless internet bandwidth loading all those images.


    Set to 2 posts per page. That was a really logical idea I should have thought of a long time ago…

The topic ‘Removing/Altering Parts of 'Clean Home' Theme’ is closed to new replies.