• 0

DMS 2 Inline CSS in Canvas


Question

Posted · Report post

I've added the following inline css:

 

background-image: -webkit-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));   background-image: -webkit-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));   background-image: -moz-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));   background-image: -o-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));   background-image: linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));

 

...to a canvas section here:

 

http://list.abodo.com.php53-12.ord1-1.websitetestlink.com/

 

The canvas contains a background image and this css is supposed to add a transparent gradient over the image. But instead the canvas section is entirely black.

 

Any suggestions would be appreciated.

 

Mike

 

Screenshot: https://www.evernote.com/shard/s12/sh/ff6924ac-2273-4143-876c-121910d842f9/b4e27475f2fbb3eba9885a150bee6980

 

Here's what the code should be doing: http://codepen.io/anon/pen/vbzBK

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

Hello @mtaus 

Rather than add all this inline, (inline style should be used sparingly) 

 

Try this: 

 

In your custom styling Class field in your Canvas section add a unique class, for example mtausbox

 

In your Custom field add the styling class and then the CSS

.mtausbox { YOUR STYLE HERE}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin Davies thanks for the suggestion.... I've added the canvas-gradient class to the canvas section and the following css to the custom section: 

 

.canvas-gradient {background-image: -webkit-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6)); background-image: -webkit-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));   background-image: -moz-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));   background-image: -o-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6)); background-image: linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));}
 
Now the image is appearing but the gradient is not.
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Did you remove the inline style? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

mtaus Not sure this helps, but I tested both the CSS above and with your div id="box" and CSS from CodePen. Latter works fine in PLNextBox (content and Full Width) , textbox and MediaBox. AS a Custom Styling Class works fine, with the exception of adding a background image and using with a Canvas section. Appears momentarily and then disappears

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

 

Martin Davies thanks for the suggestion.... I've added the canvas-gradient class to the canvas section and the following css to the custom section: 

 

.canvas-gradient {background-image: -webkit-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6)); background-image: -webkit-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));   background-image: -moz-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));   background-image: -o-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6)); background-image: linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));}
 
Now the image is appearing but the gradient is not.
 

 

 

 

Try 

 

.canvas-gradient {
background-image: url(IMAGE_URL); /* this is the fallback in case browser does not support gradients below*/
background-image: url(IMAGE_URL), background-image: -webkit-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));
background-image: url(IMAGE_URL), background-image: -webkit-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));  
background-image: url(IMAGE_URL), background-image: -moz-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));  
background-image: url(IMAGE_URL), background-image: -o-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));
background-image: url(IMAGE_URL), background-image: linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6));
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin Davies that did not work either... when I remove the background image, I can see the gradient. But it seems that the image is overlaying the gradient.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Do not use inline styling for complex CSS like that, inline styling shouldn't really be used. I have this working and all I did was add the following to the Canvas section style classes field.

 

grad-bg

 

Then I go to my custom CSS and add the following:

 

.grad-bg {

background-image: -webkit-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6)), url("http://list.abodo.com.php53-12.ord1-1.websitetestlink.com/wp-content/uploads/2014/05/marketing-hero-background.jpg");
  background-image: -webkit-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6)), url("http://list.abodo.com.php53-12.ord1-1.websitetestlink.com/wp-content/uploads/2014/05/marketing-hero-background.jpg");
  background-image: -moz-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6)), url("http://list.abodo.com.php53-12.ord1-1.websitetestlink.com/wp-content/uploads/2014/05/marketing-hero-background.jpg");
  background-image: -o-linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6)), url("http://list.abodo.com.php53-12.ord1-1.websitetestlink.com/wp-content/uploads/2014/05/marketing-hero-background.jpg");
  background-image: linear-gradient(to right, rgba(12, 12, 12, 0.9), rgba(80, 80, 80, 0.6)), url("http://list.abodo.com.php53-12.ord1-1.websitetestlink.com/wp-content/uploads/2014/05/marketing-hero-background.jpg");
}
 
That worked for me - https://cloudup.com/c26-s3maFak
 
Also please be aware that what you're doing is effectively copy/pasting third party code, we can not provide support for that.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny thanks for this... but it's still not working. I've added the class to the background canvas section and the custom code you provided, but no gradient appears. Did you add a z-axis element? Am I missing something else?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

mtaus Danny's code works exactly as you wish it to. 

 

Saying that. I think site image looks better without, (on your site)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

mtaus - Not sure why its not working for you, the steps I mentioned above are the only steps I taken to have that code working, no other code was needed or required.

 

If this isn't working then you will likely have a plugin or maybe other CSS causing an issue.

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