-
Posts
-
I want to change the icon (currently entypo-fontello) of seperators to a small image. How might I do that?
Thank you!
Hey marihonaa,
Thanks for contacting us. First, you need to enable Custom CSS Classes:
Then add a Custom CSS Class name to your separator: my-separator. Let us know once that’s done and also give us a link to the image that you want to use, and we’ll try to give you css code that should help. You can post the link in private content, if you want it only to be seen by moderators. :)
Best regards,
NikkoHi,
You can see it when you edit the separator by hovering over it with your mouse and you should see the paper and pencil icon and clicking it, you should see the Custom CSS Class text field.
Best regards,
NikkoAh, thanks. I have done that now. I would like to do this to multiple seperators, can I just reuse the css class then?
Maybe make the image 10×10 px or so.
Hi,
Yes, you can reuse the element by simply duplicating it in the Layout Builder or adding the same class to the element.
Best regards,
RikardHi mitiuphoto,
You can use this code, then place it in Enfold > General Styling > Quick CSS:
#top .my-separator { margin: 10px 0; }Just modify the values inside.
Best regards,
Nikkothank you nikko, this works so far.
when my object is a little bit bigger than an icon, i need to adjust the hr-inner.
see image
https://www.dropbox.com/s/q5tiuw3506mczy2/Screenshot%202019-09-26%2018.56.17.png?dl=0
i use your code like this
#top .my-separator { background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); height: 120px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } #top .my-separator { color: transparent; }and it works.
now i tried this.
#top .my-separator .hr-inner inner-border-av-border-thin { margin-left: 60px; margin-right: 60px; margin-bottom: 20px; }and it does´nt work.
maybe my code is wrong.
can you correct it?
thx for your support.Hi mitiuphoto,
The site you posted above (private content) returns
This site can’t be reachedIf I check it on https://downforeveryoneorjustme.com/ it reports that the site is down.
We’ll be needing to check your site so we can atleast inspect it and give you some css code that should work.Best regards,
NikkoHello Nikko,
thank you for your reply. above i tried to attach an image, seems to not work. whatever, i posted today the link below.
you can see in the image, that the icon is bigger than the separator.https://www.dropbox.com/s/q5tiuw3506mczy2/Screenshot%202019-09-26%2018.56.17.png?dl=0
and this is what i mean above.
when i put this code into quick css,.hr-custom.hr-icon-yes .hr-inner { margin-left: 60px; margin-right: 60px; }it change the distance from the image to the separator laterally correctly. but it is changed everywhere. not only on my element “my-separator”.
this is my question.what is the css code for change the separator laterally distance only for my element “my-separator”. ?
look, It should look like that, but only my element “my-separator” and not all.
->klick on the dropbox image-link
https://www.dropbox.com/s/u2s0h7j7amj8vhk/Screenshot%202019-09-27%2012.32.11.png?dl=0thx.
Hi mitiuphoto,
That code would definitely affect other separators.
Replace it with this css code instead:#top .my-separator .hr-inner { margin-left: 60px; margin-right: 60px; }Best regards,
Nikko
- The topic ‘Can I change icon in seperator to an image?’ is closed to new replies.