Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1247563

    Hello, I am looking to add a phone icon and a phone number in the social icon area. I did a quick and dirty demo of how it should look (haven’t changed skype icon yet) – is there a simple way to achieve this? Fastest thing to seems like directly editing the template file, and I would like to skip that.

    Thanks

    EDIT tried to add image, but pastebin doesn’t work for some reason..

    The menu should look like:

    [TEL ICON] 0800 800 800 [MAIL ICON]

    • This topic was modified 4 years, 3 months ago by MORTULGAAH.
    #1247665

    Hey MORTULGAAH,

    Could you please give us a link to your website, we need more context to be able to help you.

    Maybe this can help you:

    Best regards,
    Victoria

    #1247788

    In the end I managed to do it, to a point. I worked whole day on it – I wanted to make ti work from inside the Enfold, without editing templates.

    I added a normal mail icon, top right, and added a link + an icon to it and some styling. It does look nice, but I had to do some weird half pixel dimensions.

    Screenshot-2020-09-23-at-08-33-56
    Screenshot-2020-09-23-at-08-33-49

    Can you pls. check the CSS if I did it OK? I see that smooth animation is not perfect.

    This is the code:

    <a style="supphone" title="Support" href="tel:0800800800">0800 800 800</a>

    .supphone { padding:0!important; line-height: 0px!important; border-right:1px solid rgb(235, 235, 235)!important; margin-right:-11px}
    
    .supphone a {
    font-weight: normal!important;
    display:block!important; 	
    line-height: 29.4px!important;
    padding:0 8px 0 7px!important;
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-out; }
    
    .supphone a:hover {text-decoration: none; color:white!important; background: #12a5f4; }
    
    .supphone a:after {
    font-family: 'entypo-fontello'!important;	
    margin-left:7px!important;
    font-size: 13px!important;
    position: relative!important;
    bottom: -1px!important;
    content:"\e806"; /*srce*/
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-out;
    }
    
    .supphone:hover a:after { 
    color: white;
    }
    • This reply was modified 4 years, 3 months ago by MORTULGAAH.
    #1248793

    Hi MORTULGAAH,

    The css looks ok, is it working as you need it to? Do you need any more help on this one?

    Best regards,
    Victoria

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.