Jump to content

Archived

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

globalnative

Altering Opacity of Sections/Columns

Recommended Posts

globalnative+    4
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    230
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    436
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

  • Like 1

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+    4
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    1,327
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+    4
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    436
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

  • Like 1

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+    4
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    436
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

  • Like 1

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+    4
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    1,327
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/

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
globalnative+    4
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    1,327
Danny

lol :D


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • 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
    • MissT
      By MissT+
      Hi there,
      I've got an issue with 3 websites built with DMS since I migrated them from http to https that I need help with please.
      When any changes are made - e.g. new posts added or existing posts amended - certain sections of the live site seem to break e.g. image headers hang and don't load (b/g on canvas section), sliders hang and don't load (Revslider), flipper section doesn't load.
      Logging in and then clicking 'Edit the site using DMS' seems to fix the problem. Often if I try to open up another browser window to edit the site / re publish I'm unable to as the page wont load / hangs while trying to load.
      Any ideas how to fix this? On a couple of the sites I've installed a caching plugin as I thought it might be a loading speed issue but it's still happening.
      Website URL's can be provided privately.
      Many thanks in advance.
    • jeomiland
      By jeomiland+
      Hi
      I found this topic
      which talks about a similar issue I am having, but a little different. Hope someone can help me out.
      Best way to see the problem is to view http://cassclayton.com/ on Safari (Mac) compared to Firefox or Chrome. You will see the banner just under the fixed menubar has a gap between the menubar and top of the banner. Looking at Inspector, I found:
      <div class="fixed-top-pusher" style="height: 62px;"></div>
      <script> jQuery('.fixed-top-pusher').height( jQuery('.pl-fixed-top').height() ) </script>
      and indeed it seems the jquery is not always working consistently. For instance, if you simply refresh the page in Safari, it will loose the gap and all looks fine, so is it a browser cache issue that is interacting with the jquery? I do have W3 Total Cache installed. There must be a way to tell the code to make sure jquery is up and running and available to do it's majic?
      And perhaps there is just a better way to do this banner? Originally I tried several DMS sections and used the banner image as background, etc... Kept running into problems with resizing and the left/right parts of the image were getting chopped off. It is important the whole image show, so currently I just use a NextBox section with this code:
      <img src="[pl_site_url]/wp-content/uploads/2015/12/CassClayton-blues-tribute-banner.jpg" width="100%" />
      and it looks the way it should. Is there a better way to place a banner graphic under a fixed navbar and make sure the whole banner graphic displays regardless of screensize?
       
    • oseehys
      By oseehys+
      Hello There,
      So i want to use platform 5 and DMS sections on a single page, i am using a child theme with pinspro as my main theme and i activated platform 5, the only problem am having so far is the fixed option, my navbars are not aligning to their default size, and it will be great if platform 5 header and footer section will function, has anyone used this option, how can i make the best use of platform 5 and DMS on a site
      Cheers
×