AI Search
Classic Search
 Search Phrase:
 Search Type:
Advanced search options
 Search in Forums:
 Search in date period:

 Sort Search Results by:

AI Assistant
Notifications
Clear all

[Closed] Changing the style of WPforo sidebar

6 Posts
2 Users
2 Reactions
1,270 Views
marsm
Posts: 221
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@marsm)
Reputable Member
Joined: 5 years ago
[#19508]

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


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

Noble Member
Posts: 1519
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
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: 5 years ago

Reputable Member
Posts: 221
marsm
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@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: 6 years ago

Noble Member
Posts: 1519
Tutrix
marsm
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@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: 1519
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@tutrix)
Noble Member
Joined: 6 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: 5 years ago

Reputable Member
Posts: 221
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@tutrix thank you.


Share: