Skip to:
Content
Pages
Categories
Search
Top
Bottom

Adding border bottom to widgets


  • yoshimitsu1234
    Participant

    @yoshimitsu1234

    I want to add “border-bottom: 1px solid #F1F1F1″ to bbpress widgets recent topics and recent replies. How do i do that?

Viewing 16 replies - 1 through 16 (of 16 total)

  • Robkk
    Participant

    @robkk

    read this on finding the widget class and id and customize it

    http://wpfab.com/how-to-customize-a-specific-wordpress-widget/

    if you want to use a custom class and id for the widgets then get this plugin

    https://wordpress.org/plugins/widget-css-classes/


    yoshimitsu1234
    Participant

    @yoshimitsu1234

    I tried adding
    #sidebar #bbp_topics_widget-4 .widget ul li {
    border-bottom: 1px solid #F1F1F1;
    }
    or
    #sidebar #bbp_topics_widget-4 {
    border-bottom: 1px solid #F1F1F1;
    }
    or
    #bbp_topics_widget-4 .widget ul li {
    border-bottom: 1px solid #F1F1F1;
    }
    or
    #bbp_topics_widget-4 {
    border-bottom: 1px solid #F1F1F1;
    }

    But none is working.


    Robkk
    Participant

    @robkk

    give me a site link and ill check it out


    yoshimitsu1234
    Participant

    @yoshimitsu1234

    http://desimedicos.com/forums/

    I am trying to add a 1px border at bottom of each of the 5 posts in 2 of my sidebar widgets.


    Robkk
    Participant

    @robkk

    #bbp_topics_widget-4 li {
    border-bottom: 1px solid #F1F1F1;
    }

    i think this is what your looking for?


    yoshimitsu1234
    Participant

    @yoshimitsu1234

    I just added that code to custom css file. Doesn’t work.


    yoshimitsu1234
    Participant

    @yoshimitsu1234

    Even tried adding #sidebar before it. Didn’t work either.


    Robkk
    Participant

    @robkk

    #bbp_topics_widget-4 ul li {
    border-bottom: 1px solid #F1F1F1;
    }

    they work on my end

    do

    #bbp_topics_widget-4 ul li {
    border-bottom: 1px solid #F1F1F1!important;
    }

    or clear your cache


    Robkk
    Participant

    @robkk

    on my end whenever i used #sidebar and .widget it didnt work

    so

    #bbp_topics_widget-4 ul li {
    border-bottom: 1px solid #F1F1F1;
    }

    #bbp_topics_widget-4 ul li {
    border-bottom: 1px solid #F1F1F1!important;
    }

    #bbp_topics_widget-4 li {
    border-bottom: 1px solid #F1F1F1;
    }

    should all work


    yoshimitsu1234
    Participant

    @yoshimitsu1234

    #sidebar #bbp_topics_widget-4 li {
    border-bottom: 1px solid #F1F1F1;
    }

    This worked. Thanks a lot for support.


    yoshimitsu1234
    Participant

    @yoshimitsu1234

    It was is not working on a page where i added bbpress forum shortcode. It works everywhere else, like posts, forum root etc.


    Robkk
    Participant

    @robkk

    look up the css in inspect element

    and youll see that when you look at http://desimedicos.com/forums/view/latest-topics/

    on the recent forum topics widget the id of the widget is #bbp_topics_widget-8 now

    so now you would have to also add the custom css

    #bbp_topics_widget-8 ul li {
    border-bottom: 1px solid #F1F1F1;
    }

    look for changes like that on each page you have those widgets


    yoshimitsu1234
    Participant

    @yoshimitsu1234

    So i have to make custom css for each page?
    Is there any way to apply these changes to all pages in which the widget is present?


    Robkk
    Participant

    @robkk

    it shouldnt be each page…just each different sidebar you use if you use a plugin like custom sidebars .

    you can either enter each css code for each instance of the widget
    or you can give each instance of the widget a certain css id

    if you want to give each recent topics widget a certain css id

    download the plugin “widget css classes”

    in the options of the plugin you can activate “show additional field for id”

    then you can just 1 css id for where ever you place the widget

    you input your id in the widgets section , in each widgets options

    it should show fields to input your custom fields like this

    CSS CLASS:
    CSS ID:

    so if i enter

    CSS CLASS:
    CSS ID: custom-id

    i would have to add this css code

    #custom-id ul li {
    border-bottom: 1px solid #F1F1F1;
    }


    yoshimitsu1234
    Participant

    @yoshimitsu1234

    Wow. That’s hell of a detailed description. Thanks a lot.


    Robkk
    Participant

    @robkk

    your welcome

Viewing 16 replies - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.