Notifications
Clear all

wpForo 1.x.x [Solved] How to change title style in wpforo sidebar widgets

26 Posts
8 Users
5 Reactions
7,456 Views
Posts: 4
Topic starter
(@thewickedwoman)
Active Member
Joined: 8 years ago

I'd like to change the font and color of the titles in the WPForo sidebar widgets. I've looked at all of the CSS files associated with WPForo, but I can't find the right selectors and classes.

Also, there's no space between the list item icon and the text in the Recent Topics and Recent Posts widgets. How can I change that?

Any suggestions are greatly appreciated. Here is a screen grab of the widget titles problem.

Do you have any suggestions, please?

25 Replies
Robert
Posts: 10587
Admin
(@robert)
Support Team
Joined: 9 years ago

wpForo widgets are regular widgets, it should inherit widget title style from your theme. CSS code should look similar like other widgets.The regular widget title CSS is this:

.widget-title{}

wpForo doesn't have icons in widgets, maybe it comes from WordPress theme. So I have no clue how to add spaces.

7 Replies
(@richardhkg)
Joined: 5 years ago

Eminent Member
Posts: 21

@robert I read the docs and nothing there, then searched and found this thread. A little old but on topic.

Problem as first post here. I drop the "wpForo Recent Posts" widget into my main site sidebar (not wpForo sidebar) and it does not inherit the theme CSS styling.

How do I fix this? Thanks.

Alvina
Moderator
(@alvina)
Joined: 5 years ago

Member
Posts: 1863

@richardhkg,

Sorry for the late response.

Please leave the example URL to allow us to check it.

(@richardhkg)
Joined: 5 years ago

Eminent Member
Posts: 21

@alvina

Oh, sorry. Should have thought: 

Brooks Trading Course Website Forum

Hoping you can get to this reasonably soon, so have put a wpForo Posts widget into main site sidebar. Added (Testing) to widget title to help cover for ugly display. ; )

Here is the main blog with sidebar and wpForo widget:

Brooks Trading Course Blog

Thanks for your support.

Alvina
Moderator
(@alvina)
Joined: 5 years ago

Member
Posts: 1863

@richardhkg,

Please try the following CSS code:

.wpforo-widget-wrap .widget-title {
background: #E3E3E3;
border-top: 0px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 0px solid #CCCCCC;
border-right: 0px solid #CCCCCC;
margin: 0;
padding: 15px 20px 15px 20px;
color: #00688B;
font-family: 'Amaranth',sans-serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 300;
line-height: 1.25;
}

The CSS code should be added in the Dashboard > Forums > Settings > Styles admin page "Custom CSS Code" textarea.

Please don't forget to delete all caches and press CTRL+F5(twice) on the frontend before checking.

(@richardhkg)
Joined: 5 years ago

Eminent Member
Posts: 21

@alvina

 

Thanks for that. I have just implemented and the widget title is perfect but widget content still outside sidebar. 

Alvina
Moderator
(@alvina)
Joined: 5 years ago

Member
Posts: 1863

@richardhkg,

Please try the following CSS code:

.wpforo-widget-wrap .wpforo-widget-content {
padding: 10px 0px 0px 20px !important;
}
(@richardhkg)
Joined: 5 years ago

Eminent Member
Posts: 21

@alvina

 

Brilliant! A gazillion thanks for your dedicated and superb support. Yes, I will write a very good review on the plugin page for you. And possibly buy some add-ons that I do not need! ; )

Your forum plugin is so very good.

Thanks again. Much appreciated.

Posts: 4
Topic starter
(@thewickedwoman)
Active Member
Joined: 8 years ago

Once you posted which item to look for, I found the stylesheet for WPForo. The element isn't inherited from the theme. It's specified in the WPForo stylesheet as I'd thought. If it had been inherited, it would look like the sidebar on the rest of the site, but it's quite different. Here is what I found:

#wpforo #wpforo-wrap .widget-title {

    padding: 10px 0px 15px 0px;

    margin-bottom: 5px;

    font-size: 20px;

}

 

.wpforo-widget-wrap .wpforo-widget-content {

    padding: 10px 1px 20px 1px !important;

    margin: 0px;

}

 

.wpforo-widget-wrap .wpforo-widget-content ul {

    padding: 0px;

    margin: 0px;

    border: none;

}

 

.wpforo-widget-wrap .wpforo-widget-content li {

    padding: 8px 0px !important;

    margin: 0px;

    list-style: none;

    border: none;

}

Once I get some sleep, I'll make the necessary changes. Thanks for the information that allowed me to find the right item.

Robert
Posts: 10587
Admin
(@robert)
Support Team
Joined: 9 years ago

These only work for wpforo wrapper in wpForo sidebar, other places this doesn't work. Also as you can see there is no any image, backgrounds, colors and icons in CSS, this only manages paddings and margins.

Posts: 9
(@iraarel)
Active Member
Joined: 6 years ago

Hi,

I try this code but doesn't work.

My theme is jannah.

Help me pls.

Page 1 / 3