[yoshimitsu1234]

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

[Robkk]

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

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]

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]

give me a site link and ill check it out

[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]

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

i think this is what your looking for?

[yoshimitsu1234]

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

[yoshimitsu1234]

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

[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]

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]

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

This worked. Thanks a lot for support.

[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]

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]

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]

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]

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

[Robkk]

your welcome