Jump to content

Archived

This topic is now archived and is closed to further replies.

globalnative

Altering Opacity of Sections/Columns

Recommended Posts

globalnative

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
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
globalnative

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
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
globalnative

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
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
globalnative

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
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
globalnative

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
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
globalnative

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
Danny

lol :D


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Steve Webb
      By Steve Webb+
      I am having an issue with DMS editor not loading.  Just keeps spinning and spinning.
      Have tried several things - Logged in and out, cleared cache, deactivated all plugins, but the issue persists.
      I even had our host restore from a backup a few weeks ago, when I know it WAS working, as I edited a text box on the homepage.  The restore from backup didn't help either.
      Also, the front end of the site shows that the site is framed, or boxed now (whatever you call it), instead of full width as it was previously (last week).
      Dev console shows that there are php errors in Google maps - file is attached.
      Can someone please help?  Not sure what else I can do here...
      Thanks in advance.
      -Matt

    • tuciudadenred
      By tuciudadenred+
      Hi everyone, what happens is that the web page metrosalarmas.com has a google tags which I have not attacked where I can look to remove those tags and be able to locate the correct ones.
    • Steve Webb
      By Steve Webb+
      I am having an issue with DMS editor not loading.  Just keeps spinning and spinning.
      Have tried several things - Logged in and out, cleared cache, deactivated all plugins, but the issue persists.
      I even had our host restore from a backup a week ago, when I know it WAS working, as I edited a text box on the homepage.  The restore from backup didn't help either.
      Also, the front end of the site shows that the site is framed, or boxed now (whatever you call it), instead of full width as it was previously (last week).
      Dev console shows that there are php errors in Google maps - file is attached.
      Can someone please help?  Not sure what else I can do here...
      Thanks in advance.
      -Matt

    • cstudio
      By cstudio
      Hello,
      I need some help!  I am trying to add a Square booking script.  When I add it to a embed section it crashes the page editor and I am unable to save the page version.  I have tried using different browsers with the same result.
       I can add the script on the backend in the word press content area and get it to show and work, but it look terrible.  A page with in a page.  http://www.zoeanastacia.com/booking/.
      I need help getting the page editor to work properly or to make the wp content section to not look like an 90's iframe.
      Thanks
    • JawDesigns
      By JawDesigns
      Hi everyone,
      Flywheel have reported errors on my clients site 'www.racewaredirect.co.uk' and it's not loading. Can someone please provide some information on how to fix this? The site has never experienced these issues before.
      Thanks,
      James Wilson
×