WordPress.org

Forums

Posts in Sidebar
[resolved] CSS for Title of Widget (6 posts)

  1. hughshields
    Member
    Posted 1 year ago #

    I am hoping to make the title of the Posts in Sidebar widget bold but cannot figure out the CSS. All I can see in Firebug is that it is a H5 and is directly beneath:
    <div id="pis_posts_in_sidebar-3" class="widgets clearfix posts-in-sidebar">
    I'm still learning CSS so any help would be appreciated. Thanks!

    http://wordpress.org/plugins/posts-in-sidebar/

  2. aldolat
    Member
    Plugin Author

    Posted 1 year ago #

    Hi hughshields,
    could you give me the URL of your site? I need to see how your CSS file manages the link in the sidebar.

  3. hughshields
    Member
    Posted 1 year ago #

    Sure. Sorry about that. Here is the link:

    http://uberon.net/news/

    It is the first item in the right sidebar.
    I would also like to ask how to reduce the space between the title, author and the category. I had this styled about 5-6 months ago but lost the CSS in an upgrade. Appreciate your help.

    By the way, I used the following to style the title:
    .pis-title {
    font-size: 120%;
    }

  4. aldolat
    Member
    Plugin Author

    Posted 1 year ago #

    Making the title of the widget bold

    You used this style:

    .pis-title {
    font-size: 120%;
    }
    
    .widgets clearfix posts-in-sidebar h5 {
    font-weight:bold;
    }

    and cannot work because widgets, clearfix, and posts-in-sidebar aren't descendants but are in the same level (in plain English, h5 is descendant of a div element which has three classes, i.e. widgets, clearfix, and posts-in-sidebar), so you should rewrite the rule in this way:

    .pis-title {
    font-size: 120%;
    }
    
    .widgets.clearfix.posts-in-sidebar h5 {
    font-weight:bold;
    }

    Anyway, to simplify the rule, you can write it in this form:

    .pis-title {
    font-size: 120%;
    }
    
    .posts-in-sidebar h5 {
    font-weight:bold;
    }

    Reducing space between title, author, and category

    Use this style:

    p.pis-title, p.pis-utility {
    margin-bottom: 5px;
    }

    Change 5px to the value you really need.

    Let me know. :)

  5. hughshields
    Member
    Posted 1 year ago #

    Awesome! Thanks for helping me and for explaining CSS to me. I appreciate it. Works great and looks great!

  6. aldolat
    Member
    Plugin Author

    Posted 1 year ago #

    You are welcome!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Posts in Sidebar
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags