Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 22, 2013 at 6:41 pm #23671
    andypeck

    Hi there,

    I want to replace the mini curved arrow that appears during the rollover of the portfolio/blog images. The one within the round disc.

    Is it a font icon or graphic? either way, can you share with me how to swap it for my own graphic

    Cheers

    May 23, 2013 at 2:27 am #120738
    Ismael

    Hi,

    Open css > base.css and find this line of codes

    .image-overlay{position: absolute; background: #fff; z-index: 500;}
    
.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: 18px; font-weight: normal; }
    
.image-overlay.overlay-type-extern .image-overlay-inside::before{content:"27A6";}
    
.image-overlay.overlay-type-video .image-overlay-inside::before{content:"25B6";}
    
#top .hide-inner-overlay .image-overlay-inside{display: none;}

    You can change the fontello symbols on these lines.

    .image-overlay.overlay-type-extern .image-overlay-inside::before{content:"27A6";}
    
.image-overlay.overlay-type-video .image-overlay-inside::before{content:"25B6";}

    Something like this

    .image-overlay.overlay-type-extern .image-overlay-inside::before{content:"E714";}
    
.image-overlay.overlay-type-video .image-overlay-inside::before{content:"E714";}

    Please refer to this link for more entypo fontello symbols.

    http://www.entypo.com/characters/

    Cheers,

    Ismael

    May 23, 2013 at 5:24 pm #120739
    andypeck

    Hi there,

    So it wouldn’t be possible for me to use a small single coloured png? it would need to be an Entypo font? My logo has a nice simple shape that would work well in its place.

    Cheers

    Andy

    May 24, 2013 at 5:30 am #120740
    andypeck

    Hi there,

    Created a duplicate of the ‘base’ file and put it into my child folder, changed the numbers to another entypo code and it didnt work so I then changed the same lines in the main file ‘base’ in the enfold/css folder and it still didnt work

    Andy

    May 24, 2013 at 5:32 am #120741
    Ismael

    Hi,

    Actually, you can.

    .image-overlay.overlay-type-extern .image-overlay-inside::before{content: url(../images/layout/loading.gif);}
    
.image-overlay.overlay-type-video .image-overlay-inside::before{content: url(../images/layout/loading.gif);}

    Regards,

    Ismael

    May 24, 2013 at 10:45 pm #120742
    andypeck

    Hi there,

    Sorry but I cant get this to work at all. I tried copying the base.css to my own child theme, adding !important as well as trying it in the original base.css file within Enfold. Where am I going wrong?

    Ive ditch my own png image in favour of using a ‘cross’ in entypo. How can I make this work?

    My URL is http://www.andypeck.co.uk

    Cheers as always

    Andy

    May 25, 2013 at 8:44 am #120743
    Dude

    Did you check the image url – maybe ../images/layout/loading.gif is not valid in this case. Try an absolute url like: http://www.andypeck.co.uk/wp-content/uploads/2013/05/logo_main.png

    The code would look like:

    .image-overlay.overlay-type-extern .image-overlay-inside::before{content: url(https://www.andypeck.co.uk/wp-content/uploads/2013/05/logo_main.png);}
    
.image-overlay.overlay-type-video .image-overlay-inside::before{content: url(https://www.andypeck.co.uk/wp-content/uploads/2013/05/logo_main.png);}

    You can also insert this code into the quick css field.

    May 25, 2013 at 9:20 am #120744
    andypeck

    Hi again, I actually ditched using a png in favour of using Entypo (as originally suggested) but I cant make that work using your code

    Cheers

    Andy

    May 25, 2013 at 9:36 am #120745
    Dude

    Hey!

    Very strange. However we’ll close this thread now if you don’t want to use a png anymore…

    Best regards,

    Peter

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Rollover disc arrow replacement’ is closed to new replies.