Notifications
Clear all

[Solved] Editing CSS Code for wpForo category header

5 Posts
3 Users
0 Reactions
1,569 Views
Posts: 24
Topic starter
(@eviolette)
Eminent Member
Joined: 2 years ago

I am trying to add some customized CSS coding to wpForo that I generated online. It resizes the picture I used on the Category Cover Image. I tried adding this into the Custom CSS Code section in Colors & Styles but I could not get it to save. I am a novice with coding and trying to learn - TIA for any guidance you can give!

Here is the code I generated at: https://www.w3docs.com/

<style>
img {
max-width: 100%;
height: auto;
}
</style>
<img src="https://www.vealeentrepreneurs.org/wp-content/uploads/2023/05/VYEF-Educator-Forum-Banners-1140-×-170-px.png" alt="Educator Forum" />

Topic Tags
4 Replies
dimalifragis
Posts: 2611
(@dimalifragis)
Famed Member
Joined: 5 years ago

Hi,

Start from removing caching from your wpForo pages:

https://wpforo.com/community/faq/wpforo-and-cache-plugins/

<!-- WP Fastest Cache file was created in 0.91898894309998 seconds, on 18-05-23 18:28:26 --><!-- need to refresh to see cached version -->
1 Reply
(@eviolette)
Joined: 2 years ago

Eminent Member
Posts: 24

@dimalifragis Thanks for the reminder! I just tried to implement that!

Chris
Posts: 3627
(@chris)
Famed Member
Joined: 3 years ago

Hi @eviolette,

You need to use HTML tags to set the path of the CSS code and use CSS codes to manage the changes.

Example: the 1 line before the curly bracket are the HTML tags used to set the path and 2,3 lines are CSS codes to make the changes on that particular HTML tag's.

#wpforo #wpforo-wrap .wpf-category-page .wpforo-category { 
    background-size: contain; 
    height: 170px;
}

The code should be inserted in Custom CSS Field from wpForo > Settings > Colors & Styles pages.

More info about CSS: https://www.w3schools.com/css/

 

1 Reply
(@eviolette)
Joined: 2 years ago

Eminent Member
Posts: 24

@chris Thanks for your help!