Notifications
Clear all

Style [Closed] Changing the style of WPforo sidebar

6 Posts
2 Users
2 Reactions
709 Views
marsm
Posts: 135
Topic starter
(@marsm)
Estimable Member
Joined: 4 years ago

Is there a way of changing the style of the WPforo side to match my theme?

5 Replies
3 Replies
Tutrix
(@tutrix)
Joined: 5 years ago

Noble Member
Posts: 1453
Posted by: @marsm

Is there a way of changing the style of the WPforo side to match my theme?

add this to custom css

#wpforo {
max-width: 1430px;
margin: 20px auto;
padding-left: 15px;
padding-right: 15px;
}
#wpforo #wpforo-wrap {
padding: 20px;
}

Dashboard > Forums > Settings > Style (custom css)

marsm
(@marsm)
Joined: 4 years ago

Estimable Member
Posts: 135

@tutrix, thank you for the quick reply. I placed the code but it didn't work.

Here's a link to my theme's sidebars: https://renewableheatinghub.co.uk/category/questions-answers

Here's the forum: https://renewableheatinghub.co.uk/forums

As you can see the fonts and spacing are very different across both.

Tutrix
(@tutrix)
Joined: 5 years ago

Noble Member
Posts: 1453

@marsm 

the CSS code above adjusts the forum to your blog (watch the video)

https://www.screencast.com/t/eq9vBTNajIJz

use your desktop pc and not your phone to see the change

font, font size etc. you can also change via CSS

Tutrix
Posts: 1453
(@tutrix)
Noble Member
Joined: 5 years ago

@marsm 

Example for widget-title

#wpforo #wpforo-wrap .widget-title,
.wpforo-widget-wrap .widget-title{
border-bottom: none;
color: #000;
font-size: 22px !important;
font-weight: 600 !important;
font-family: 'Playfair Display', serif !important;
line-height: 50px;
text-transform: uppercase;
}
#wpforo #wpforo-wrap .widget-title::before,
.wpforo-widget-wrap .widget-title::before{
content: '';
position: absolute;
width: 30px;
height: 2px;
background: #3f51b5;
margin-top: 50px
}
1 Reply
marsm
(@marsm)
Joined: 4 years ago

Estimable Member
Posts: 135

@tutrix thank you.