Notifications
Clear all

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

11 Posts
2 Users
7 Reactions
1,123 Views
Posts: 1212
Topic starter
(@percysgrowroom)
Noble Member
Joined: 6 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: 1496
(@tutrix)
Noble Member
Joined: 5 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: 6 years ago

Noble Member
Posts: 1212

@tutrix 

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

Ich schätze deine Hilfe sehr

Posts: 1212
Topic starter
(@percysgrowroom)
Noble Member
Joined: 6 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: 5 years ago

Noble Member
Posts: 1496

@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: 1212
Topic starter
(@percysgrowroom)
Noble Member
Joined: 6 years ago

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

You're an absolute legend, thanks again man

Posts: 1212
Topic starter
(@percysgrowroom)
Noble Member
Joined: 6 years ago

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

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

Noble Member
Posts: 1496

@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