Jump to content
Sign in to follow this  
kinnerean

Transparency

Recommended Posts

kinnerean

Is there a way to change the background color of a container? I'd like to have my header transparent, now it blocks part of the sites background image.

Share this post


Link to post
Share on other sites
kinnerean

Short circuit in my brain, ignore the transparency-part :)

Share this post


Link to post
Share on other sites
kinnerean

No wait, don't forget it, and I might add: how to give columns background color? Only option is a styling classes thingie.

Share this post


Link to post
Share on other sites
Rob

Yes, styling a unique class is your best way.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kinnerean

Any tips what i should write on the styling classes  field? background-color didn't do it. :/

Edited by kinnerean (see edit history)

Share this post


Link to post
Share on other sites
Rob

background: none;

 

or

 

background: transparent;


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Deepsouth

Same issue here. The best I came up with was to make the entire background transparent:

.boxed-wrap {
  background: transparent !important;
}

Then to give all the other elements a common class and define their background as a color...

 

Be nice to know whether is is considered a good way to do things. It seems that as soon as you stray from the very basic options you're into custom CSS and hookbox land.

 

I thought there'd be more ways to adjust basic things like padding, margins and background.

Share this post


Link to post
Share on other sites
kinnerean

Yeah, I thought so too. Since it was hyped to be THE END OF CODING and all...

And we are speaking of a pretty basic thing here.

Share this post


Link to post
Share on other sites
beardedavenger

You have to do some trickery here.

 

The bg color is applied to .site-wrap. So, what we need to do first, is reset this:

 

body .site-wrap {

background:none;

}

 

Great, now everything is transparent. Now, create a css class and add back the bg color
.my-colored-bg {

background:@pl-base;

}

 

Now, go to a full-width section area, and apply the my-colored-bg as a css class (NO dot). Flush LESS with Global Option---->Resets--->Flush Caches.

 

What we've done is basically going to apply the bg color now liberally, to whatever section you want to have color. The rest will be transparent.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
kinnerean

Thanks, works for full width, but that layout of mine is on a boxed size. Nothing happens there.

Share this post


Link to post
Share on other sites
Rob

I suspect you just need to check Chrome's Inspection Tool to identify the proper element to change.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Deepsouth

Yes, back to my original .boxed-wrap

 

:thumbsu:

Share this post


Link to post
Share on other sites
Rob

Okay.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×