Docs

[Mark M]

Hi,

I was wondering if it is possible to style a border around a soliloquy slider? I really I would be able to make it the same as the thumbnail border that is used in the image element.

Kind regards,

Mark

[Thai]

Hi Mark,

Try adding following CSS under Customize > Custom > CSS:

.soliloquy-outer-container {
    border: 4px solid #000
}

Hope it helps.

[Mark M]

This is the results I got;

[Thai]

Hi There,

Please try with this CSS instead:

.soliloquy-container .soliloquy-image {
    border: 4px solid #000;
}

Let us know how it goes!

[Mark M]

Kind of worked but two weird little boxes below;

[Zeshan]

Hi Mark,

Please provide us with the URL of page in question so we can take a closer look.

Thank you!

[Mark M]

This reply has been marked as private.

[Mark M]

Actually there is no need, the weird extra boxes were only showing up in the preview in the customiser.

Is there anyway of adding the small grad shadow that is around the thumbnail image element border as well?

[Lely]

Hello Mark,

Thank you for the admin credentials.
Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link on which page and on which element you want to apply the changes and also some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Mark M]

What I want to be able to do is to apply the style of border called thumbnail which can be used on images placed with cornerstone. Like the below, a 5px white border with a small shadow coming out from it.

It is just how I would add the shadow to the code you gave me earlier which I am unsure of.

Thanks for your help.

Mark

[Mark M]

I thought I’d worked it out myself as it appears in the customiser correctly, but when I go and look at the page the shadow can’t be seen.

.soliloquy-container .soliloquy-image {
    border: 5px solid #ffffff;
    box-shadow: 0px 0px 1px 1px #999999;
}

This is the result I am getting on the slider from the above;

No shadow and a slight less white border on the righthand side.

[Rupok]

Hi there,

Thanks for updating. You can try using this –

.soliloquy-container .soliloquy-image {
  background: #fff;
  border: 3px solid rgba(0, 0, 0, 0.25);
  padding: 5px;
}

Hope this helps.

Cheers!

[Mark M]

Thanks that’s better this is what it looks like now;

Is there a way of making the grey part be a shadow like I was trying to do?

[Lely]

Hello Mark,

Please update to this:

.soliloquy-container .soliloquy-image {
  background: #fff;
  box-shadow: 5px 5px 10px #888888,-5px -5px 10px #888888,5px -5px 10px #888888,-5px 5px 10px #888888;
  padding: 5px;
}

Hope this helps.

[Mark M]

adjusting the above to this;

.soliloquy-container .soliloquy-image {
  background: #fff;
  box-shadow: 0px 0px 1px #888888,-0px -0px 1px #888888,0px -0px 0px 1px #888888,-0px 0px 1px #888888;
  padding: 5px;
}

Now seems back to having the weird border on the right side;

What I am really trying to get is the same as this;

[Author]

Posts