YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

5 Answers

2

Avatar hendrik Yootheme answered

Hi,

how to create a custom style is described in the documentation Melanie linked in her last answer. Scroll down to the section 'Create a custom style'.

In this custom style less file you first import one of the existing styles you want to customize, then you can change the variable @internal-divider-icon-image with a path to your custom image file on your webserver.

Please note that you need basic knowledge in CSS/LESS to customize a style. Or you need to hire a developer who can do the style customization for you.

@vale
You should easily find information on the web how to create a svg image for the image editing software you use.

Regards

Edited

0

Avatar melanie.k Yootheme answered

Hey Giovanni,

it isn‘t possible to upload an image within the divider element.
But you can add an image element to your site and use it as divider.

Best,
Melanie

0

Avatar giovanni.fantoni.37 answered

Hello i need to put my image in the center of the divider element.

Here
https://getuikit.com/docs/divider
I find this
"Add the .uk-divider-icon class to a <hr> or <div> element to create a divider with some decoration, like an icon."

But I don't now how I can put custom image

Thank

0

Avatar vale answered

I am also interested in replacing the standard .uk-divider-icon (or better adding a new icon divider) by using my own svg file. The solution and the link already mentioned doesn't give me enough information.

Where can I add my own style? Which file do I have to alter to make my custom override?

.uk-divider-icon {  
 position:relative;  
 height:54px;  
 background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%0A%20%20%20%20%3Crect%20x%3D%224.222%22%20y%3D%224.221%22%20transform%3D%22matrix(0.7071%200.7071%20-0.7071%200.7071%2011.9994%20-4.9709)%22%20fill%3D%22none%22%20stroke%3D%22%23cccccc%22%20width%3D%2215.556%22%20height%3D%2215.557%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%3Cline%20fill%3D%22none%22%20stroke%3D%22%23cccccc%22%20x1%3D%226.49%22%20y1%3D%226.49%22%20x2%3D%2217.51%22%20y2%3D%2217.51%22%3E%3C%2Fline%3E%0D%0A%20%20%20%20%3Cline%20fill%3D%22none%22%20stroke%3D%22%23cccccc%22%20x1%3D%2217.51%22%20y1%3D%226.49%22%20x2%3D%226.49%22%20y2%3D%2217.51%22%3E%3C%2Fline%3E%0D%0A%3C%2Fsvg%3E");  
 background-repeat:no-repeat;  
 background-position:50% 50%  
}

How do I get a svg-format - like the mentioned above for the background-image - using Adobe Illustrator or Inkscape?
Could you provide a more detailed explanation?

Thank you!

Edit Sep 11.: Okay. To use SVG in data URI it has to be converted to work in all modern browsers. I used this encoder. Maybe useful for someone, having a similar question.

https://yoksel.github.io/url-encoder/

Edited

Know someone who can answer? Share a link to this question via email or twitter.