Changed rollover icon but doesn't look correct - Support | Kriesi.at

Tagged: enfold, icon, rollover, thumbnail

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

Author

Posts
October 1, 2013 at 3:04 pm #168794
mattock
Participant
Hi, I’ve followed the instructions in this post to change my rollover icon. https://kriesi.at/support/topic/rollover-disc-arrow-replacement-part-2/
I changed it fine but it doesn’t look right for some reason, I want this icon, “U+2295” which is a nice thick plus symbol.

Firstly I had to change the font size from 18 to 60 as it was tiny, but it is really thin and has a border round the circle ?
Also its not in the center of the circle its too low ?

see attached image

the icon I want in this library http://www.entypo.com/characters/ is a nice thick cross with no border, not sure if i need to change some more settings here is the code Ive changed in base.css all I changed was the two lines
```
.image-overlay.overlay-type-extern .image-overlay-inside:before{content:"\2295";}
	.image-overlay.overlay-type-video .image-overlay-inside:before{content:"\2295";}
```
here is the full code
```
.image-overlay{position: absolute; background: #fff; z-index: 500; height:100%; width:100%; opacity: 0; filter:alpha(opacity=0);}
	.image-overlay .image-overlay-inside{height:100%; width:100%; position: absolute; left:0; top:0;}
	.image-overlay .image-overlay-inside:before{position: absolute; border-radius: 50px; background: #000; height:80px; width:80px; line-height:80px; left:50%; top:50%; margin: -40px 0 0 -40px; z-index: 500; text-align: center; color:#fff;}
	.image-overlay .image-overlay-inside:before{content:"\E744"; font-family: 'entypo-fontello'; font-size: 60px; font-weight: normal; }
.image-overlay.overlay-type-extern .image-overlay-inside:before{content:"\2295";}
	.image-overlay.overlay-type-video .image-overlay-inside:before{content:"\2295";}
	#top .hide-inner-overlay .image-overlay-inside{display: none;}
```
Many thanks
- This topic was modified 11 years, 1 month ago by mattock. Reason: tried to make some code bold but it doesnt allow
October 2, 2013 at 9:25 am #169201
Ismael
Moderator
Hey mattock!

You can add this on your custom.css or Quick CSS to move the icon upwards:
```
.image-overlay .image-overlay-inside:before {
line-height: 70px;
}
```
Adjust the line-height if necessary.

Cheers!
Ismael
October 2, 2013 at 2:33 pm #169338

mattock
Participant

Hey Ismael thanks for the reply. That’s great for the alignment but what about my first problem of the icon not looking like it should do.
here is what it should look like

but mine has two problems
1) the plus symbol is much thinner
2) it has a circular a white border ?
i just want the plus symbol exactly as it shows in the entypo library

Now I also have a new problem, I’ve updated to the latest Enfold from 2.2 to 2.3 and now I cannot change icons at all only the font size ?
I’ve added the same code to the new base.css file and have tried various things with the 2295 adding U in front etc

With the update do we need to change more than those two lines now ?
Many thanks

October 3, 2013 at 3:57 am #169729

Ismael
Moderator

Hello!

Can you give us a link to the page ? We need to inspect it.

Cheers!
Ismael

October 3, 2013 at 1:22 pm #169916

mattock
Participant

Hi sure its http://www.dev.davidmattock.co.uk/

You’ll see I’ve made the icon bigger on the thumbnail rollovers just to test it but the icon wont change now I’ve updated the theme
Many thanks

October 3, 2013 at 11:39 pm #170162

Ismael
Moderator

Hey!

The link you provided is not working. Are you sure this is correct?

Regards,
Ismael

October 3, 2013 at 11:58 pm #170170

mattock
Participant

Hey Ismael, seems my provider went down for literally a few minutes when you tried, try again it seems fine now, sorry again

October 6, 2013 at 9:57 am #171091

Ismael
Moderator

Hey!

Looks like you change it back to an arrow. Please apply the changes above then we will inspect it again.

Best regards,
Ismael

October 6, 2013 at 3:09 pm #171187

mattock
Participant

sorry did you see my above post ?

from – October 2, 2013 at 2:33 pm
Now I also have a new problem, I’ve updated to the latest Enfold from 2.2 to 2.3 and now I cannot change icons at all only the font size ?

after updating the theme, the icon wont change at all with exactly the same code changed, only the font size change works
Many thanks

October 7, 2013 at 4:27 am #171430
Ismael
Moderator
Hey!

Sorry, my bad! You need to add the changes on your custom.css or Quick CSS:
```
.image-overlay .image-overlay-inside:before{content:"\E869"; font-family: 'entypo-fontello'; font-size: 40px; font-weight: normal; }
.image-overlay.overlay-type-extern .image-overlay-inside:before{content:"\2295";}
.image-overlay.overlay-type-video .image-overlay-inside:before{content:"\2295";}
```
Looks like the border around the cross symbol can’t be change. I tried to find it on the css properties, it’s not there.

Cheers!
Ismael
October 9, 2013 at 1:49 pm #172992

mattock
Participant

Hi thanks for persisting with this and all your help , the outline looks really bad and is happening on all of them so think I’m going to have to give up on this. I also tried a non circular icon for eg : “U+E744″ which I’ve seen used by others, but this was just blank on roll over didn’t work at all ?

I changed the same as others {content:”\E744”;} ?

This is not working well so can I use my own png , if so how do I do this ?
Many thanks

October 9, 2013 at 6:04 pm #173150

Ismael
Moderator

Hello!

You can use the url of the png image on the content property:

`.image-overlay.overlay-type-extern .image-overlay-inside:before{content:url(smiley.png);}
.image-overlay.overlay-type-video .image-overlay-inside:before{content:url(smiley.png);}

Regards,
Ismael

October 10, 2013 at 2:31 pm #173595

mattock
Participant

Woo hoo!.. thanks finally got it how I want with your help, thanks again for the great support.
Author

Posts