Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

12

Removing/Altering Parts of 'Clean Home' Theme

  1. dequelleplaneteestu
    Member

    Hello,

    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 http://dequelleplaneteestu.com if you need a visual to understand what I'm trying to change.

    Thanks!
    Meg

    The blog I need help with is dequelleplaneteestu.com.

  2. timethief
    Member

    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 http://en.forums.wordpress.com/tags/clean-home

    Please be sure to read this article before starting your editing > http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

  3. panaghiotisadam
    Member

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

    #nav {
    display:none;
    }

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

    #header-image {
    border:none;
    }

    To remove all the image borders, add this:

    .hentry img, body.attachment .navigation img {
    border:none;background:transparent;
    }

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

  4. dequelleplaneteestu
    Member

    @panaghiotisadam

    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)

    Merci!

  5. panaghiotisadam
    Member

    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?

  6. dequelleplaneteestu
    Member

    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 :)

  7. panaghiotisadam
    Member

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

    .header,
    .content,
    .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.

  8. dequelleplaneteestu
    Member

    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?

  9. panaghiotisadam
    Member

    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 {
    color:#000;
    }

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

  10. dequelleplaneteestu
    Member

    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!!

  11. panaghiotisadam
    Member

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

  12. dequelleplaneteestu
    Member

    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. (http://dequelleplaneteestu.com)

    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.

  13. panaghiotisadam
    Member

    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:
    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

    2) The little squares are a bit of a pain because they are images. You've got to go here: http://midmodesign.com/news/general/our-special-wordpress-theme/ ,
    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; }

  14. dequelleplaneteestu
    Member

    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?

  15. thesacredpath
    Member

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

    http://en.support.wordpress.com/avatars/blavatars/

  16. thesacredpath
    Member

    For typekit, if you are using one of the predefined themes, this will help out: http://help.typekit.com/customer/portal/articles/6840-Using-Typekit-with-WordPress-com

    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.

  17. dequelleplaneteestu
    Member

    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?

    Thanks!

  18. dequelleplaneteestu
    Member

    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?

    Thanks!

  19. thesacredpath
    Member

    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.

  20. dequelleplaneteestu
    Member

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

  21. thesacredpath
    Member

    Much faster loading, and the search engines will like that. They actually use page loading times when determining search engine ranking now, so the faster pages load the better off you are. Visitors like that as well.

    The first selector is for the non-link title on the single post pages, and the second is the linked title on the blog main page and on category, tags and archives pages.

    .hentry h1
.hentry h1 a

  22. thesacredpath
    Member

    The above selectors will also get the static page titles.

  23. dequelleplaneteestu
    Member

    Thank you!

    I'm not understanding where to place the selectors you gave me above and with what.

  24. thesacredpath
    Member

    You need to go into your account over at typekit and somewhere there in the setup you can select the fonts and specify the selectors. I've not done it myself. Read through the following and see if that helps.

    http://help.typekit.com/customer/portal/articles/6840-Using-Typekit-with-WordPress-com

  25. thesacredpath
    Member

    Actually this link seems to have more information on using it with a theme that is not directly supported. Some of the stuff does not apply since you don't have to worry about adding the code to the theme or anything, WordPress does that for you. You just have to put the selectors in (second image from the bottom).

  26. panaghiotisadam
    Member

    (@Rich: I had given the same selectors here:
    http://en.forums.wordpress.com/topic/removingaltering-parts-of-clean-home-theme?replies=25#post-621239
    But I wanted to know which method Meg had used before continuing with this.)

    @Meg: See here:
    http://help.typekit.com/customer/portal/articles/6780

    You sign in with Typekit, find the font you want, paste the selectors in the Selectors field, click Publish. Or click "Advanced" below the Selectors field, copy the CSS name of the font and add it to your CSS the normal way, for example:

    .hentry h1, .hentry h1 a {
    font-family: "fertigo-pro-1","fertigo-pro-2";
    }

  27. dequelleplaneteestu
    Member

    Yes! That makes perfect sense.
    Thank you!
    Definitely one of those things easy to skip over on TypeKit.
    I really appreciate all of your help!

  28. dequelleplaneteestu
    Member

    Hello,
    One more thing: why can't I have a plugin for LinkedWithin?

  29. dequelleplaneteestu
    Member

    Is it possible to make the headers bigger?

  30. dequelleplaneteestu
    Member

    @panaghiotisadam
    Got your coding to add for the lines to go away between posts. How can I apply that to links in the right sidebar?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags