Jump to content

Archived

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

travistsickle

Canvas Area Background Options

Recommended Posts

travistsickle

Is there a way to have image opacity on the canvas area background options?  Or a color opaque overlay so the words over my image pop more?

Share this post


Link to post
Share on other sites
Danny

Hi,

 

If you provide a link to the page in question and some screenshots of what it is you want we may be able to help. Adding opacity may be an issue, as the opacity is applied to all child elements, this will mean if you apply opacity to your canvas image, the opacity will be applied to the text too. An overlay i.e. adding a purple tint to your background image is quite easy to do.

So if you provide some screenshots of what you want to achieve, we may be able to help.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
travistsickle

www.sicklehunter.com  is the front page I'm working on.  The city of tampa skyline picture is what I'm trying to do.  

 

My main objective is to get the words "YOUR RETIREMENT CAN LAST OVER 10,950 DAYS.

ARE YOU READY?" to pop.  As you can see, the opacity is doing just what you pointed out.  It makes everything dull.

 

I first tried to add opacity to the background image only but for some reason it wasn't working correctly.

Share this post


Link to post
Share on other sites
Danny

OK, firstly, you code isn't valid. Therefore, you're gong to need to replace it with the following:

 

<h1>
  <a class="" href="#">YOUR RETIREMENT CAN LAST OVER 10,950 DAYS.<br>ARE YOU READY?</a>
</h1>
 
There is no such tag in HTML called <h1a> also, the <font> tag is not supported in HTML 5. If you want to add styling use CSS instead.
 
Secondly, I am not entirely sure what you mean pop? If you can provide a website that has a similar style, I may be able to help.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Aires

Morning all,

 

Try This

 

#pl_areaueeac6 .pl-area-wrap {
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(55, 0, 0, 0.45) );
}
 
http://i.imgur.com/gD5ICdg.png
 
Just some random rgba numbers on my part but you and use what you like just remember the  last controls the transparency.
And to make the text pop even more you can use various text effects to add simulated bevels and shadows. Their are tutorials all over the place.
 
minor text effects
http://i.imgur.com/Olvg4Kb.png
 
Hope this helps. 

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Aires

Hi, travistsickle

 

Also like Danny pointed out when you added the opacity it applied it to everything in the  <h1>.

 

I would remove the opacity CSS and instead of having a  

 

background-color:black;

 

I would use 

 

background-color: rgba(0, 0, 0, 0.18);

 

and add some padding to give the text some room.

 

http://i.imgur.com/NGIy8eE.png

 

 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
travistsickle

so I can add this to the custom css section and place #pl_areaueeac6 .pl-area-wrap in the css styling class space on the section?

 

#pl_areaueeac6 .pl-area-wrap {
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(55, 0, 0, 0.45) );
}

Share this post


Link to post
Share on other sites
travistsickle
 
Aires I tried this code and added front-header-tint to the section css but it didn't work.  
 
.front-header-tint {
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(55, 0, 0, 0.45) );
}

Share this post


Link to post
Share on other sites
travistsickle

actually, I just can't get it to work on the canvas area where the background is.  The code works in other areas like the text section.

Share this post


Link to post
Share on other sites
Aires

travistsickle

 

Hi, you should add this in the custom less/css area 

 

I replace the id with yours so it should work as intended double check the id just incase

 

#pl_areaut9glj6 .pl-area-wrap {

background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(55, 0, 0, 0.45) );
}
 
~Aires

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
travistsickle

I see now.  It worked thank you! 

Share this post


Link to post
Share on other sites
Aires

NP. Site looks great.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
eusebius

Thank you, this helped me, as well.

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×