-
Posts
-
I’m using the layer slider I’m trying to use a logo (.png with transparent background) as one of the layers. I would like the logo to have a black box around the image just like the text in the sample demo. The black box does show up in the preview in the layer slider setup area, however, on the live site all I see is the logo and the shadow generated by the CSS.
What setting should I adjust to get the box to show up on the live site and how why might the preview show the box and not the slider on the actual homepage?
Thanks for the help!
-Chris
Hi,
Can you give us a screenshot of what you’re trying to do?
On LayerSlider WP, edit the layer, under Style panel add a padding on top, bottom, left and right. Give it a background or add this on custom style settings field:
background: rgba(255,255,255,.5);This will create a transparent white box around the logo.
Regards,
Ismael
Ismael,
Thanks for the reply. I tried your suggestions above and had the same results. I already had a padding set for the image layer and the background color set to black. When I do that the preview looks fine with a black box, however, the live slider doesn’t show the background.
The same thing happened when I pasted in your CSS sample above. The white box looked just fine on the preview but on the live slider all I got was the logo with no back ground.
Please take a look at the screenshots below. The first three are the settings for the layer and the preview from the LayerSlider admin area. You’ll see that the preview has the WordPress logo formatted with a black box around it. The last screenshot is the slider on the homepage that shows the logo in the same position as the preview, however, there is no box (the text with similar style settings all show up with the box just fine).
https://www.dropbox.com/s/oh0onjir0c581dk/LayerSlider%20Style%20Setting.png
https://www.dropbox.com/s/etm14vge802zrh0/LayerSlider%20Background%20Style%20Setting.png
https://www.dropbox.com/s/cykcx3sn55jvpuz/LayerSlider%20Admin%20Preview.png
https://www.dropbox.com/s/ra2s4h3erx1hct2/LayerSlider%20Homepage%20Slide.png
Thanks for the help!
-Chris
Hi,
Please give the logo image with a unique css selector then copy the css code on your Quick CSS or custom.css, apply it on the specified selector. Place !important if necessary.
Regards,
Ismael
Sorry for another question on this. But once I create the attribute for the layer, how do I properly reference the attribute in the custom.css or quick CSS?
I know what the actual CSS code should be, but Im just a little fuzzy on the syntax to reference the layer properly.
Thanks for the help!
Hi,
For example, you added an ID on the attributes panel, something like “awesome”. You can use it like this on your custom.css or Quick CSS
#awesome {
background: black;
}Regards,
Ismael
I tried that and I still cant get it to work. It will apply any changes I put in the layer’s style box (except the background color) but doesn’t seem to be taking any changes I put in either quick CSS or custom.css.
Hi Chris,
It depends on what field you put the content into. If its the ID then your selector will be #idname {} . If its a class then it will be .classname {} .
Title, alt and rel are not css selectors.
See: http://www.w3schools.com/css/css_syntax.asp
Regards,
Devin
- The topic ‘Issue with Layer Slider Images’ is closed to new replies.