Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #168794

    Hi, I’ve followed the instructions in this post to change my rollover icon. http://www.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
    rollover_icon

    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 1 year, 2 months ago by  mattock. Reason: tried to make some code bold but it doesnt allow
    #169201

    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

    #169338

    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
    icon

    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

    #169729

    Hello!

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

    Cheers!
    Ismael

    #169916

    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

    #170162

    Hey!

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

    Regards,
    Ismael

    #170170

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

    #171091

    Hey!

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

    Best regards,
    Ismael

    #171187

    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

    #171430

    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

    #172992

    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

    #173150

    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

    #173595

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

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

The topic ‘Changed rollover icon but doesn't look correct’ is closed to new replies.