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/
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.
give me a site link and ill check it out
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.
#bbp_topics_widget-4 li {
border-bottom: 1px solid #F1F1F1;
}
i think this is what your looking for?
I just added that code to custom css file. Doesn’t work.
Even tried adding #sidebar before it. Didn’t work either.
#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
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
#sidebar #bbp_topics_widget-4 li {
border-bottom: 1px solid #F1F1F1;
}
This worked. Thanks a lot for support.
It was is not working on a page where i added bbpress forum shortcode. It works everywhere else, like posts, forum root etc.
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
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?
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;
}
Wow. That’s hell of a detailed description. Thanks a lot.
