WordPress.org

Ready to get started?Download WordPress

Forums

WordPress Popular Posts
[resolved] How to change Title Font Style & Color (17 posts)

  1. cohenjp
    Member
    Posted 1 year ago #

    Hello.

    I would like to change the font size, style, and the color of the title in side bar widget.

    So I inserted the code " color:#xxxxxx; " into /wpp.css to change the color first and see how it looks,

    like

    /* title styles */
    .wpp-post-title {
    font-color:#xxxxxx;
    }

    And I also put the tag " <ul class=”wpp”> " in to the " tag before & after title" in the widget and checked the markup box .

    But seems nothing has happened so far.
    How do I solve the problem? Could anybody please help me out.

    I'm so frustrated to death.

    http://wordpress.org/extend/plugins/wordpress-popular-posts/

  2. Héctor Cabrera
    Member
    Plugin Author

    Posted 1 year ago #

    Hi there,

    Try this:

    /* title styles */
    .wpp-post-title {
    color:#336688; /*set your hexadecimal color here*/
    font-size:12px; /*set here your font size*/
    }

    That should be enough, no need to add the wpp class to the UL tag. If that doesn't work, then your theme's stylesheet must be overwriting whatever CSS style you set in wpp.css. To bypass that, add !important to each property.

  3. cohenjp
    Member
    Posted 1 year ago #

    Thank you, Héctor!

    I add it as you mentioned above, but still nothing happens.

    So I tried next like

    /* title styles */
    .wpp-post-title {
    color:#xxxxxx; ! important;
    font-size:12px; ! important;
    }

    and nothing seems to happen again.

    I still don't know what is wrong with it.

  4. Héctor Cabrera
    Member
    Plugin Author

    Posted 1 year ago #

    You made a mistake there, see again the link I posted above ;)

  5. cohenjp
    Member
    Posted 1 year ago #

    Do I have to add exactly the same as an example? for both author and user?

    like

    /* From the user's style sheet */
    p { text-indent: 1em ! important }
    p { font-style: italic ! important }
    p { font-size: 18pt }

    /* From the author's style sheet */
    p { text-indent: 1.5em !important }
    p { font: normal 12pt sans-serif !important }
    p { font-size: 24pt }

    or Do I only add one of them which I prefer?

    I'm very confused.

  6. Héctor Cabrera
    Member
    Plugin Author

    Posted 1 year ago #

    Alright, here:

    /* title styles */
    .wpp-post-title {
    color: #336688!important; /*set your hexadecimal color here*/
    font-size: 12px!important; /*set here your font size*/
    }
  7. cohenjp
    Member
    Posted 1 year ago #

    Thanks,again.

    I was about to trying the same.
    You don't have to add ; in between the script. I understand that.

    But, Even though I add exactly the same as you showed, still nothing changes on my site.

    I totally don't understand what is wrong with may website.

    I'm using the theme called Gamepress.

    and my website is here
    http://grazymag.com

    Thanks for your help.

  8. Héctor Cabrera
    Member
    Plugin Author

    Posted 1 year ago #

    Just checked your site and indeed it's your theme's stylesheet what's causing the conflict: http://img22.imageshack.us/img22/401/cssconflict.jpg

    To fix it go to your theme's folder, open dark.css (in css folder) and change this:

    .widget a {
    color: #FFFFFF !important;
    }

    ... into this:

    .widget a {
    color: #FFFFFF;
    }

    ... and save changes.

    I must warn you that this modification might affect other elements in your sidebar as well, so do it at your own risk.

  9. cohenjp
    Member
    Posted 1 year ago #

    Woooow!!! Thanks a lot !

    I almost gave up! Finally I see some light coming in my window.
    As I add it, It has changed the color of the post-title, I can see it.

    But I mean "title" is a widget title but not post-title.

    In this case, I named & write " Attention top 10! " for the section itself. I want to change title there on top of it.

    I almost understand what to do, so would you just tell me where to modify? so I can try it as you lectured above.

  10. cohenjp
    Member
    Posted 1 year ago #

    I'm not sure but, the title of the section may belong to the theme.
    If so, I can not change anything by adding these codes into the plugin css.

    Well, I would be better close this topic and check it myself in the theme css may be.

    I'm not very familiar with the program.

    Thanks for your help anyway.

  11. Héctor Cabrera
    Member
    Plugin Author

    Posted 1 year ago #

    Yes, you're right: widget titles are styled by the theme itself. Modifying it would also affect the other widgets on your sidebar, too.

    In case you're wondering, the .widget-title class is what you're looking for. You can find it in your theme's dark.css stylesheet.

  12. GiaP
    Member
    Posted 10 months ago #

    Is there a way to override a theme's style. I'm desperately trying to make my blog posts excerpt titles show up against a dark background! I've tried everything under the sun that I can think of to change in my theme "Theron Pro" but am still having NO luck :(

    Please help me override the theme so that I can style your widget the way I want to, ONLY in my footer area where the widget displays.

    THANKS so much, this plugin rocks!
    -GP

  13. GiaP
    Member
    Posted 10 months ago #

    Is there a way to override a theme's style. I'm desperately trying to make my blog posts excerpt titles show up against a dark background! I've tried everything under the sun that I can think of to change in my theme "Theron Pro" but am still having NO luck :(

    Please help me override the theme so that I can style your widget the way I want to, ONLY in my footer area where the widget displays.

    THANKS so much, this plugin rocks!
    -GP

  14. GiaP
    Member
    Posted 10 months ago #

    Whew! This was a toughy, but I found it. I added:

    body #footer .widgets .widget .widget_wrap .wpp-post-title{ font-weight:bold; color:#db8e84!important;}

    ...to the stylesheet in my Theron Pro V.2 theme.

    Good night, I need a nap, after that (mind you it's only 4:07pm here, LOL!)

  15. Héctor Cabrera
    Member
    Plugin Author

    Posted 10 months ago #

    If I had seen this earlier I would have suggested to use the !important clause, but it seems you figured it out by yourself. Nice! :)

  16. GiaP
    Member
    Posted 10 months ago #

    That's why you rock, Lol :)
    Thanks!

  17. novatliz
    Member
    Posted 5 months ago #

    Hi Hector,

    I was trying to set the title post font to #666666 and hover it with #0088cc but to no avail with the confusing default css. Apparently, the !important clause is not working for me.

    Can you help with a css to overwrite the default css?

    my site is http://www.sqfeed.com

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic