Docs

[Papabear1609]

Good afternoon and happy weekend to you guys!

Could you tell me please if it is possible and if so how to change the colour, size, shape and hover colour of the arrows in the soliloquy slider?

Thank you very much

[Rad]

Hi there,

Thanks for posting in.

They are images applied as a background, color can’t be changed. But you can always replace the image with your own image

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.soliloquy-container .soliloquy-next {
background: rgba(0,0,0,0.7) url(//www.example.com/images/right.png) no-repeat scroll 50% 50% !important;
}
.soliloquy-container .soliloquy-prev {
background: rgba(0,0,0,0.7) url(//www.example.com/images//left.png) no-repeat scroll 50% 50%  !important;
}

Hope this helps.

[Papabear1609]

Thats great Thank you very much!

While im at it what would i do to change the dots at the bottom of the slider representing the pages in the slider?

Thank you very much!

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Papabear1609]

Sorry about that!

url is http://ftmv.org/

Thanks

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.soliloquy-container .soliloquy-pager-link {
    background: url(images/circle.png) no-repeat scroll 0 0;
}

.soliloquy-container .soliloquy-pager-link.active, 
.soliloquy-container .soliloquy-pager-link:hover {
    background-image: url(images/circle-hover.png);
}

Replace images/circle.png and images/circle-hover.png with the url of your images.

Hope that helps.

[Papabear1609]

Hi there, I have the replaced the arrows and that worked perfectly.

I have replaced the url of small circles to basically red ones of the ones i am using but it doesnt seem to work.

Can you assist please?

Thank you!

[Rupok]

Hi there,

Looks like you have placed the URL like images/circular-shape-silhouette.png. Let’s use full image path as you did for the arrows.

Cheers!

[Papabear1609]

Hi there, i did use the full path too and that did not work either.

[Lely]

Hi There,

Where did you add the CSS? I didn’t see it when I check the source code of the page. I can see the code for the arrows but not the code for the circular image. See attached screenshot. If you’re sure that you have added it correctly, maybe we’re seeing cache content. Try to clear cached and checked again.

[Papabear1609]

Hi, I have deleted the css now as it did not work.

I added it in the customizer – custom css.

should i just add it back?

[Rahul]

Hey There,

Thanks for writing back!

Yes, you need to add it back so we can take a look of it.

Thanks for your understanding.

[Papabear1609]

Hi there, i have placed the css back into the customizer now.

Could you have a look and tell me what is wrong.

Thank you

[Lely]

Hi There,

I can see the issue now. Please update the code to this:

.soliloquy-container .soliloquy-pager-link {
    background: url(http://ftmv.org/wp-content/uploads/2017/02/circle-shape-outline.png) no-repeat scroll 0 0 !important;
}

.soliloquy-container .soliloquy-pager-link.active, 
.soliloquy-container .soliloquy-pager-link:hover {
    background-image: url(http://ftmv.org/wp-content/uploads/2017/02/circular-shape-silhouette.png) !important;
}

!important will make sure that it will overwrite the existing CSS. Existing CSS is using background-image which is more specific than background property.

Hope this helps.

[Papabear1609]

Hi,

Thanks for that but now the images looks really weird like almost cut off?

Dont know if its a problem with the image?

[Author]

Posts