Need help? Check out our Support site, then


problem customzing Clean Home font sizes and bullets

  1. I'm a CSS newbie, and I'm learning fast. :-)

    I'm using Clean Home theme, version 1.2.0-wpcom. I have selected the Droid Sans font for the body text, with a default size of +1. I want to reduce the size of the Post Meta-data to the +0 size, like the sidebar text. (The preview frame on the Font selection page shows it the size I want it, but the actual page - either in the CSS preview or through the Read Blog menu option - shows it the same size as the body text. This could be related to why my attempted solution below doesn't work.)

    Using http://en.forums.wordpress.com/topic/change-position-of-post-info?replies=4#post-660998 I pasted in that code and got the Meta-data to move, confirming I had the right class name. Referencing the /* Sidebar */ section of the original Style Sheet, I surmised from

    #sidebar .block li a {
    background: transparent url(images/bullet_black.gif) no-repeat scroll 6px 10px;
    font-size: 13px;

    that something simple like

    .post-meta { font-size: 13px; }
    should do the trick, but it doesn't have the desired effect; the Meta-data is still displayed the same size as the body text.

    Also, with the +1 font size, the bottoms of the letter "g" were being cut off with the Droid Sans font. (Same with Droid Serif and I assume all the rest as well.) I tried

    body { line-height: 1.8em;}
    but that only increased the inter-line spacing and did not fix the cutoff of the descenders. How can I increase the bottom margin on the body lines? (I'm guessing the answer is in a lower-level sheet, or the Typekit sheet.)

    Another thing I'd like to chnage is the bullet styles. In the body text, I'd like the bullets to be filled-in circles. I've scoured the original Style Sheet and found no evidence of the bullet style definition, so I assume it's in another sheet. In the sidebar, I see

    #sidebar .block li a { background: transparent url(images/bullet_black.gif) no-repeat scroll 6px 10px; ...
    and tried adding variations of that line to my custom CSS, and every variation caused the bullet to disappear - even duplicating the relevant entry from the original style sheet, i.e.
    #sidebar .block
    a { background: transparent url(images/bullet_black.gif) no-repeat scroll 6px 10px; }
    causes the bullet to disappear. So this is a two-part question: 1) how can I change the size without it disappearing and 2) what filename should I use for a round bullet?

    Thanks to whoever can contribute on this.

    Phil

  2. On review, I see I somehow lost the "li" in the last code sample. It should have read:
    #sidebar .block li a { background: transparent url(images/bullet_black.gif) no-repeat scroll 6px 10px; }

    BTW, is there a way to edit posts to this forum? I looked and didn't see it.

    Phil

  3. We need a link to the site please.

  4. I selected the site link when I posted the message, and I now see it doesn't display with the message. (I guess that menu choice is for internal WP use.) My site is http://embraceyoursexuality.wordpress.com/ and if it matters, I'm using IE7 on Vista.

    Phil

  5. I'm seeing the post metadata far smaller than the body text for the post. See this screen shot: http://flippintestblog.files.wordpress.com/2011/08/meta.png .

    That said, this is actually where the size is set for the metadata under the post title.

    .hentry small {
    font-size: 11px;
    }

    If you are using the preview to look at your changes, if you do not see the change, force refresh the preview page. Sometimes it does not seem to update like it should.

    Web fonts can be all over the place, and some have ascenders and descenders that go outside of the norms of font design, so there are probably going to be some that will have to be individually adjusted instead of doing a site-wide adjustment. Without being able to see the actual fonts on the site, I'm a afraid I would be guessing about what would be required. I'd have to be able to see the site with the fonts active.

  6. Thanks for your suggestions, thesacredpath.

    The CSS preview was updating consistently; I watched it clear and redisplay. The fonts I referred to as having the descender cutoff problem are the ones currently active on the site, so you should have seen the issue on the home page. I agree that web fonts can be finicky, although I wonder why WordPress-approved fonts would have issues with WordPress-approved themes. Nonetheless, it should be a simple fix to increase the space allowance if I know which element/id name to change.

    The fact that it displays the meta-data correctly on your screen makes me wonder which browswer you're using. (I've tried both IE7 and IE9 with the same results of full-size meta-data.)

    http://wordpress.org/extend/ideas/topic/what-the-fuck-is-a-hentry says that the .hentry items are for RSS feeds, and my problem is with browser display (so I ignored the .hentrys). Please clarify the scope of the .hentry items. Thanks!

    Phil

  7. This morning the metadata is displaying huge, in fact it might be a bit larger than the body copy.

    The problem with web fonts is they do not hold standard to font design practices which means things have to be changed specifically for them in some cases. If that is done, then regular fonts that follow good design practices (times, helvetica, arial, etc.) will look wrong.

    If the above I gave you does not work, then let's target the web font directly with the below.

    .wf-active small {
    font-size: 100% !important;
    }

    Theme designers ignore a lot of stuff. I've seen many themes where they have used the .hentry as the controlling selector for elements in a web page. If the declarations are the same in both places, why set two different selectors that are exactly the same? If one wanted to target just the .hentry in the web page to make a change only there, then they can use the parent id or selector as well such as

    #content .hentry

    On the cut off on the descenders I'm again not seeing it in Safari, Firefox or Opera. Can you point me to a location where you are seeing this? Also check and make sure your browser is not zoomed in.

  8. Hmmm... curioser and curiouser.

    I've changed nothing in the CSS from the time I first posted until your response above, yet the page display has changed for you. On the bright side, at least you're now seeing what I'm seeing. :-)

    Because I'll be allowing more space for descenders, I'm not worried about the impact for well-behaved fonts; they'll simply have a bigger sandbox.

    It's good to know that you're using everything but Internet Explorer; that may be a factor here. From what I've gathered, if I can get it working on IE, it'll work on evertything else. My browser is set for "normal" size text, and most text, e.g. what I'm writing, is about as small as I'd like it to be. (My eyes aren't what they used to be.) A variant of the code you supplied,
    <br /> .wf-active small {<br /> font-size: 70% !important;<br /> }
    works they way I wanted - Thanks!. Please let me know how it looks in your browsers. Here's how it now looks on my screen, still with the chopped descenders: http://embraceyoursexuality.files.wordpress.com/2011/08/eys1.jpg

    Also, any ideas on how to make the bullets round instead of square?

    Phil

  9. Glad that worked, and yes it is much smaller now.

    On the descender issue, I don't see that problem, so it is an IE issue. Add a little more line height in "body" perhaps take it to 1.75em or 1.8 and see what happens for you.

    body {
    line-height: 1.7em;
    }
  10. Thanks for letting me know it doesn't show that way on your screen. I just checked it with IE9 and it's correct, so I'm guessing it's an IE7 rendering problem. I appreciate the code suggestion, but as I mentioned in my initial query, I tried increasing the line height and that didn't solve it. Now that I know it's probably just in IE7, I'll live with it.

    Any suggestions on changing the bullets would be welcome.

    Phil

  11. On the CSS, since you have pasted the entire stylesheet, anything that I give you has to be put at the very bottom of your stylesheet so that it overrides everything else. If you don't then there is a good chance that something else in the stylesheet is going to override what I have given you.

    This will change the bullets to solid discs instead of circles. Put it at the very end of your stylesheet.

    .hentry ul {
    list-style: disc outside none;
    }

    There is also the change that the IE7 issues are caused by pasting the entire stylesheet. IE isn't the sharpest tool in the shed and conflicting things in the stylesheet can send it into a tantrum of epic proportions.

  12. That should be, "There is also the chance..."

  13. Thanks for that bit of code; that filled in the bullets in the body text. Do you have any ideas for the sidebar? (Those bullets are done using graphics instead of system-generated characters.)

    BTW, I'm not sure what you mean by "pasting the entire style sheet" or putting it at the end to override the code above. My custom CSS sheet contains only 15 lines of code and no duplications.

    Phil

  14. This should do it.

    ol, ul {
    list-style: disc outside none;
    }
    
    #sidebar .block li a {
    background: none repeat scroll 0 0 transparent;
    }
  15. Ah, they have one on hover also. Add this as well.

    #sidebar .block li a:hover {
    background: none repeat scroll 0 0 transparent;
    }
  16. Thanks for that. It makes sense to me and I don't see what's preventing it from working. The bullets don't display on the sidebar. I even added visibility: visible; to no avail. I've updated my blog with the current custom CSS so you can have a look.

    I really appreciate all this help you're giving me. The structure is really coming close to what I want it to be.

    Phil

  17. I'm seeing the bullets just fine in the sidebar. Clear your browser cache and take another look.

  18. Ah. It's an IE7 rendering problem again. On IE9 they display, although outside of the division lines between list items. Assuming that's also how they show on your browser, I'll put up with the square bullets since I'd rather have them tucked in. Unless, of course, you have a nifty way of changing the graphic that the theme uses for the sidebar bullets. :-)

    Phil

  19. The bullets can be moved inside and he left padding adjusted. See the following.

    ol, ul {
        list-style: disc inside none;
    }
    
    #sidebar .block li a {
    display: inline;
    padding-left: 5px;
    }
  20. Thanks! That's the format I wanted. :-) It would be a bonus if the bullet changed colour with the list item, but I can certainly live with it as-is.

    Phil

  21. You are welcome. I thought I could do that, but I can't get the bullet color to change on hover.

Topic Closed

This topic has been closed to new replies.

About this Topic