Notifications
Clear all

Limited Support

Our support team is currently on holiday from December 25, 2025 to January 7, 2026, and replies may be delayed during this period.

We appreciate your patience and understanding while our team is away. Thank you for being part of the wpForo community!

Merry Christmas and Happy Holidays! 🎄

wpForo 1.x.x [Solved] Transparent BG for single page

11 Posts
2 Users
7 Reactions
1,996 Views
Posts: 1229
Topic starter
(@percysgrowroom)
Noble Member
Joined: 7 years ago

Hi all, simple one really, I think.

I want to make the BG of my forum page transparent. If i do this for the whole site, you can read the texts on my posts. I only want the forum page to have transparent bg

Can some one help with the CSS code I would need for this? 

https://percysgrowroom.com/forum/

I want to get rid of the big white box everything is sitting on of you know what i mean. But only on this page, the rest of the site needs to stay the same. 

Thanks in advanced for any help guys! 


10 Replies
Tutrix
Posts: 1521
(@tutrix)
Noble Member
Joined: 6 years ago

Hi @percysgrowroom

try

body.wpforo .container_24 .grid_24 {
background: transparent !important;
}
#wpforo #wpforo-wrap {
background: transparent !important;
}
#wpforo #wpforo-wrap .wpfl-4 {
background: #ffffff;
}

1 Reply
(@percysgrowroom)
Joined: 7 years ago

Noble Member
Posts: 1229

@tutrix 

Nochmals vielen Dank mein Freund! Mit den Codes haben Sie immer Recht.

Ich schätze deine Hilfe sehr


Posts: 1229
Topic starter
(@percysgrowroom)
Noble Member
Joined: 7 years ago

It worked great but the forum descriptions are not showing now as the text is dark on a dark back ground, i treid fixing it, but its not working.... can you help again mate?

  • #wpforo #wpforo-wrap .wpfl-1 .wpforo-forum-description{color: #ffffff;}

This is what I tried, but the description didnt change colour:

 

See here?

https://percysgrowroom.com/forum/introduce-yourself/


1 Reply
Tutrix
(@tutrix)
Joined: 6 years ago

Noble Member
Posts: 1521

@percysgrowroom

#wpforo #wpforo-wrap #wpforo-description{color: #ffffff !important;}

and you can use this for the breadcrumb


#wpforo #wpforo-wrap .wpf-breadcrumb {
width: 100%;
background: #ffffff;
}
#wpforo #wpforo-wrap .wpf-breadcrumb div::after {
box-shadow: 3px -3px #e8e8f0 !important;
}
#wpforo #wpforo-wrap .wpf-breadcrumb div.active::after {
box-shadow: 3px -3px #e8e8f0 !important;
margin-right: -4px;
}
#wpforo #wpforo-wrap .wpf-breadcrumb .wpf-root {
border-left: none;
}
#wpforo #wpforo-wrap .wpf-breadcrumb .wpf-root i {
padding: 0 20px 0 20px;
}
#wpforo #wpforo-wrap .wpf-breadcrumb div:first-child {
padding-left: 10px;
padding-right: 15px;
}
#wpforo #wpforo-wrap .wpf-breadcrumb div {
background: #649e2d !important;
}
#wpforo #wpforo-wrap .wpf-breadcrumb a {
color: #ffffff !important;
}
#wpforo #wpforo-wrap .wpf-breadcrumb a:hover {
color: #ffffff;
}
#wpforo #wpforo-wrap .wpf-breadcrumb div::after {
background: #649E2D !important;
margin-right: -4px
}
#wpforo #wpforo-wrap .wpf-breadcrumb div.active {
background: #77cb27 !important;
color: #ffffff !important;
}
#wpforo #wpforo-wrap .wpf-breadcrumb div.active::after {
background: #77cb27 !important;
}
#wpforo #wpforo-wrap .wpf-breadcrumb div:hover {
background: #77cb27 !important;
}
#wpforo #wpforo-wrap .wpf-breadcrumb div:hover::after {
background: #77cb27 !important;
}
#wpforo #wpforo-wrap .wpf-breadcrumb div.active:first-child {
background: #649e2d !important;
}
#wpforo #wpforo-wrap .wpf-breadcrumb div.active:first-child::after {
background: #649e2d !important;
}

Posts: 1229
Topic starter
(@percysgrowroom)
Noble Member
Joined: 7 years ago

Man, I cant put into words how much I love you bro 😉 lol. 

You're an absolute legend, thanks again man


Posts: 1229
Topic starter
(@percysgrowroom)
Noble Member
Joined: 7 years ago

Brilliant mate! All works beautifully! I really appreciate your help mate, all looks amazing


1 Reply
Tutrix
(@tutrix)
Joined: 6 years ago

Noble Member
Posts: 1521

@percysgrowroom

replace

#wpforo #wpforo-wrap .wpf-breadcrumb div.active::after {
box-shadow: 3px -3px #e8e8f0 !important;
margin-right: -4px;
}

with


#wpforo #wpforo-wrap .wpf-breadcrumb div.active::after {
box-shadow: 3px -3px transparent !important;
margin-right: -4px;
}

is better with transparent background 😉 


Page 1 / 2