• 0
Sign in to follow this  
Followers 0

Altering Opacity of Sections/Columns


Question

Posted · Report post

Hello again!

 

I'm trying to work out how to change the opacity of my sections so I can have a full width and height responsive background while still being able to see my sections with all their text, etc.

 

How do I do this?

 

Thank you kindly

Nate

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted · Report post

Do you ave a link to the site? Can you provide a mockup of what you want to achieve? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, you can change the opactiy for any section using css.

 

For example

 

#footer {opacity: 0.4;} would make the footer semi transparent. If you're just trying to adjust the background color of the section, not the actual content within it, then use a rgba value which will allow for transparency - http://www.css3.info/introduction-opacity-rgba/

 

http://www.w3schools.com/css/css_image_transparency.asp

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin Davies Something similar to this (when you click one of the menu items, the text is opaque but the background is somewhat transparent): http://sofarsounds.com/#!/landing

 

James B where do I enter the CSS to change background colour please?

 

Thanks for getting back to me :)

Nate

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The simplest way to achieve a similar look is to inspect the code they have used. Then apply this to your own HTML or sections.

 

All custom CSS goes in either your DMS Toolbar > Custom > Custom CSS/LESS, you can also use a child theme or customize plugin and add your code to the style.less file. For more information on how to customize see our documentation - http://docs.pagelines.com/customize/how-to-customize

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't think I know enough about html/CSS/web dev to know which parts are doing what when I look at their code. Can't find the bit that makes their background transparent :D

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, for that one you need to make sure you look into the hover class as the background only appears when hovered over.

 

See http://screencast.com/t/kyFbe2t4 and you'll see the class and code in the screenshot provided.

 

If you're new or uncomfortable with Google Chromes web dev tools, check out Code Schools interactive tutorial/course, it will give you all the tips to get comfortable.

 

https://www.codescho...scover-devtools

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Wait, so I can use chrome dev tools to edit the CSS straight from chrome 'inspect elements' box?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yeah you can edit the live page to see the changes and tweak to get the effect you want, then copy/paste the correct code you've just made directly into the DMS css box and save. Then the changes will be live on the site.

 

I did a basic and quick videocast to show you how it would work - http://screencast.com/t/bojuSCrm73

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Quadruple like, thanks so much guys! James B, that class you sent me too has quantum-leaped my understanding of how to work with CSS, thank YOU!!!!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Nate, I highly recommend you check out Code School, they provide a free signup and a free tutorial, interactive course for Chromes web dev tools, its awesome.

 

Completing this will have you a Chrome dev tools ninja in no time - http://discover-devtools.codeschool.com/

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Did the course up to where they start talking about javascript. Ninja status on the way :D

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

lol :D

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  
Followers 0