Hook into background of content widget

Asked on July 26, 2016 in How To.

Hi

I’ve been tinkering with a Layers child theme  for some days and got stucked with altering parts of the styles dynamically generated by the Layers Content Widget. And this one drove me mad, as I’m still learning the ropes with Layers, HTML, CSS, PHP, JS and what not.

As you probably know, the background image in a column looks something like the following,

#layers-widget-column-11-6 {

background-repeat: no-repeat;

background-position: center;

background-size: cover;

background-image: url('http://foo.com/bar/wp-content/uploads/img.jpg');

}

Now, I’m looking into a best practice to append

#layers-widget-column-11-6
with the pseudo element
:after
.

So the goal is that the child theme outputs the background image as,

#layers-widget-column-11-6 {

background-repeat: no-repeat;

background-position: center;

background-size: cover;

background-image: url('http://foo.com/bar/wp-content/uploads/img.jpg');

}

I’ve tried the following, but that certainly didn’t do the trick.

$(document).ready(function(){

$('#layers-widget-column-11-6').attr('id', 'layers-widget-column-11-6:after')

});

Thank you in advance
Lars

direct Layers User
Reply
1 Answer(s)
Answered on August 5, 2016.

First, keep in mind you should not change how the core widget options work i your child theme if it will be released to the public. I do not see a difference between the example code and your desired outcome though so I am not clear on what the end result would look like so I apologize for not being more specific.

Styling and overrides can be added to the widgets in your stylesheet or in the widget:

In a single widget on a specific preset or page layout, use the Advanced option to add a custom class, then simply write your CSS, ie .myclass:before{stuff}

http://docs.layerswp.com/doc/how-to-use-the-advanced-design-bar-option-to-add-custom-classes-to-widgets/

You can also write a series of custom styles in your stylesheet, then simply add the class to the widgets that need it. We do this in Classroom, for example, where users can then add those special styles to any page or widget they want by copying the class name into Advanced (you would need a pattern library in your documentation showing what each one does)

To override a widget wrapper style internally without custom classes, you need to use the global selector for the widget, not the ID (if selecting specfic widgets, use a custom class). The content widget is .layers-content-widget, so
.layers-content-widget:before{
stuff
}

Always use the browser inspector to ensure you have the right selector – it should basically copy what the CSS panel shows you in the top-most position for whatever property you are trying to change.

Reply