Is it possible to create a custom border around an EasySlider element - Support

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
April 19, 2016 at 10:06 pm #617721

fjhughes
Participant

This client has requested a wood frame border around the gallery. Is there a way I can do this with CSS? Does anyone have some ideas? You can see the site here: http://tsgaz.net/rendezvous/

April 20, 2016 at 12:45 am #617800

Yigit
Keymaster

Hey Fred!

That would be possible. Please upload the image you would like to use in Media > Library and post the link to it here.

Best regards,
Yigit

April 20, 2016 at 2:42 am #617884

fjhughes
Participant

Thank you! I have added two options. I don’t think this will be the final, but once I find out how to do it, I should be able to swap a different one if necessary.

Here is a link to a gif, and png:

http://tsgaz.net/rendezvous/wp-content/uploads/2016/04/picture-frame.gif
http://tsgaz.net/rendezvous/wp-content/uploads/2016/04/picture-frame.png

Thanks!

April 20, 2016 at 2:48 am #617889
Yigit
Keymaster
Hey!

Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your image and give it a custom class and then add following code to Quick CSS in Enfold theme options under General Styling tab
```
.your-custom-class .avia-image-container-inner { 
    background: url(https://tsgaz.net/rendezvous/wp-content/uploads/2016/04/picture-frame.png)!important;
    padding: 90px;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
    background-size: contain!important;
}
```
and adjust values as needed

Cheers!
Yigit
April 20, 2016 at 8:10 am #618038

fjhughes
Participant

I added the function as recommended. Then I also added the Custom CSS as recommended, changing the example to my custom class. I added it in the easy slider here: http://screencast.com/t/g6f6fI5H04

It is not showing on the home page Easy Slider.

Do I need to add it to .avia-slideshow?

Thanks!

-Fred

April 23, 2016 at 4:17 pm #620561
Ismael
Moderator
Hey!

Apply the custom css class attribute in the column containing the slider instead of the actual slider.
```
.rr-image-border {
    background-image: url('http://tsgaz.net/rendezvous/wp-content/uploads/2016/04/picture-frame.png');
    padding: 90px;
    background-size: 100% 100% !important;
}
```
Cheers!
Ismael
April 27, 2016 at 3:43 am #622675

fjhughes
Participant

It worked great! Thanks!

April 27, 2016 at 4:19 am #622686

Vinay
Inactive Moderator

Hey!

Glad we could help! We have put together some useful info about enfold theme please feel free to check it out here – http://kriesi.at/documentation/enfold/

Best regards,
Vinay
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Is it possible to create a custom border around an EasySlider element’ is closed to new replies.