Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Retro-fitted: Fonts, search box and comments

  1. limetreefruits
    Member

    Ok, I believe those will be my last questions, as I am happy with how my blog looks and am getting tired of playing around with that CSS thing. :D

    All the volunteers are very brave for VOLUNTEERING messing with those things. Thanks a bunch!

    So, here we go:

    1-How can I make the font of the "category cloud" widget to be the same as the body text (FF Dagny)
    2-How can I make the red padding of the search box a little thinner? I like the padding on the width, but the height is too big. Ideally would be to have the same red padding all around
    3-How can I put the comments and the edit link at the bottom of the post leaving the date on top?
    4-If the comments are below the post, how can I make it the same font as the posts title (snicker)?

    Thank you so much to everyone that responds!
    I promise I am done for now :D

    PS- If it is best to split into different topics, let me know and I will do that.

    The blog I need help with is limetreefruits.com.

  2. designsimply
    Staff

    Yes please. For future help requests, would you mind please posting them one each in separate topics? It's much easier to manage replies and give support compared to a large list like this.

  3. designsimply
    Staff

    1-How can I make the font of the "category cloud" widget to be the same as the body text (FF Dagny)

    The prerequisite for the following CSS to work is that FF Dagny must be selected for at least one of the font options on your Appearance → Custom Design → Fonts page. If so, this should do the trick:

    #tag_cloud {
	font-family: ff-dagny-web-pro-1,ff-dagny-web-pro-2,Georgia,Times,"Times New Roman",serif;
}

  4. designsimply
    Staff

    2-How can I make the red padding of the search box a little thinner? I like the padding on the width, but the height is too big. Ideally would be to have the same red padding all around

    Try this:

    .widget_search {
	padding: 0 25px!important
}

  5. designsimply
    Staff

    3-How can I put the comments and the edit link at the bottom of the post leaving the date on top?

    In the Retro-fitted theme, there's no simple way to grab onto just one of the byline links such as the comments link only. The edit link would be easier, but that link is only seen by logged in users of the blog with rights to edit, so I wouldn't bother with it at all even (unless it really really bothers you or something).

  6. designsimply
    Staff

    You could move the entire byline probably though. Let me know if you're interested in learning how to do that.

  7. designsimply
    Staff

    4-If the comments are below the post, how can I make it the same font as the posts title (snicker)?

    Do you still want to do this one even if you can't move just the comments link to the bottom of posts?

  8. limetreefruits
    Member

    Excellent! Everything is working so far. Thanks!

    Yes, please! I want both, to move everything down at the bottom of the posts and change fonts. Preferably change the font just for the comments.

    And I will post in separate topics next time, sorry about that!

  9. designsimply
    Staff

    Here is a CSS example to move the byline. Note that you can start with this and adjust it to your liking.

    div.byline {
	position: absolute;
	bottom: 10px;
	width: 97%;
}
.hentry {
	padding-bottom: 20px;
}

    Regarding the font, ah, I've just realized that the byline is part of the body text and so the font for the comments link and the body text (which is set to FF Dagny) already match.

    No worries about the separate topics. I'm glad you asked about it! Plus it's good because other people may see the advice and post separate topics too.

  10. limetreefruits
    Member

    Thanks! It moved.

    If I can't change the font style is that a way to make the font bigger and/or bold? My point is just to have the comments (and the rest of the line if need be) to stand out a little bit more. You can barely tell it is there.

    (I tried to invent a code like "font-size" something but of course didn't work! :D )

  11. designsimply
    Staff

    There are tons of resources online about CSS you can look up to find things like font-size, which is totally the correct property name btw. :) Here are two really good resources:
    https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference
    http://www.w3.org/TR/CSS2/

    And here's a beginner's CSS tutorial which I'd also recommend checking out:
    http://www.htmldog.com/guides/cssbeginner/

    For the font-size though, there is one tricky thing in your case. Because you have already changed the font settings for the body text on the Appearance → Custom Design → Fonts page, you must add an "!important" rule to the end of the font-size property. So, to make the entire byline larger, find the "div.byline" set in your custom CSS and add this:

    font-size: 18px !important;

    Adjust the number as necessary.

    To target just the comment link, you could do something like this but note that it uses CSS3 which is new and only works in the latest browsers:

    .byline [title^="Comment"] {
	font-size: 18px !important;
}

    Adjust the number as necessary.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags