Okay
  Public Ticket #1229164
adding to social media
Closed

Comments

  • Mark started the conversation
    July 4, 2017 at 8:44pm

    Hello. I'm working on a new site for a real estate agent and would like to be able to include a link to his Zillow and Trulia profile pages along with his other social media in the page footers.

    Is there a way to customize the social media section to do this?

  •  9,016
    Tahir replied
    July 5, 2017 at 1:10pm

    Hey Again,

    This would likely need to be done by replacing two of the existing social media icons with some images using css snippets. 

    Thanks 

    ThemeNectar Support Team 

  • Mark replied
    July 8, 2017 at 4:49pm

    OK. Can you please give me a bit of help to get started? I'm not sure where I would go to make this change.

  •  9,016
    Tahir replied
    July 10, 2017 at 1:39pm

    Hey Again,
    Hope you had a Great Weekend,

    You can try this code . it changes the VK icon to Youku .

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    i.icon-vk:before {
    background: url(https://ticksy_attachments.s3.amazonaws.com/youku_phone_48px_1186988_easyicon.net_858.png) no-repeat;
    background-size: 26px;
    width: 26px !important;
    height: 26px !important;
    display: block;
    content: '';
    position: relative;
    top: -6px;
}

    Thanks


    ThemeNectar Support Team 

  • Mark replied
    July 23, 2017 at 12:33am

    ok, I finally was able to try this. I've tried adding this code, but it's still showing the VK icon. I've changed out the URL to link to the zillow icon I've uploaded to my media library, but it's not working either.

    here's a screen capture of the CSS code I've added.

  •  9,016
    Tahir replied
    July 24, 2017 at 2:12pm

    Hey Again,
    Hope you had a Great Weekend,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  • Mark replied
    August 31, 2017 at 5:19pm

    Sorry, I forgot about this and meant to respond. Here's the site:


    http://davidfountain.markdanielstudio.com

  •  9,016
    Tahir replied
    September 1, 2017 at 11:27am

    Hey Again,

    See screenshot: http://prntscr.com/gfrz52 . 

    You will have to use this custom css: 

    i.fa-vk:before {
    background: url(https://cloud.githubusercontent.com/assets/10062828/5282831/68b20458-7abe-11e4-84ef-e375ac2f434a.jpg) no-repeat;
    background-size: 26px;
    width: 26px !important;
    height: 26px !important;
    display: block;
    content: '';
    position: relative;
    top: -6px;
}

    Be.st

    ThemeNectar Support Team 

  • Mark replied
    September 1, 2017 at 2:55pm

    Thank you! This is looking great.

    Is there a way to make the icon have the same color mouseover effect as the other social media icons?

  •  9,016
    Tahir replied
    September 2, 2017 at 12:27pm

    Hey Again,

    You will have to create a blue png and set it on hover like this.

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    a:hover i.fa-vk:before {
    background: url(https://inception-app-prod.s3.amazonaws.com/NjFlMTdkOWItNWQzZi00OTk3LWFkMjUtZTAyOWVhNzJiNTU3/content/2017/04/Zillow%20Icon.jpg);
    background-size: 56px;
    width: 26px !important;
    height: 26px !important;
    background-repeat: no-repeat;
    background-position: 43%;
}

    Thanks


    ThemeNectar Support Team 

  • Mark replied
    September 5, 2017 at 8:01pm

    This worked great! I had to make a few tweaks but nothing major. Thank you!!

  • James replied
    September 19, 2017 at 7:48pm

    Hi 
    Thanks for this thread

    Could you possibly give some insight into a fix for the off-canvas a:hover. 
    The hover adds a duplicate icon?

    http://s635624997.websitehome.co.uk/

    i.fa-vk:before {
        content: '\f179';
    }
    a:hover i.fa-vk:after {
        content: '\f179'!important;
    }
    i.fa-vine:before {
        content: '\f17b';
    }
    a:hover i.fa-vine:after {
        content: '\f17b';
    }
  •  9,016
    Tahir replied
    September 20, 2017 at 10:52am

    @James , Use below custom css only . 

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    #header-outer #social-in-menu .fa-vk:after {
    content: '\f179' !important;
}
i.fa-vk:before {
    content: '\f179' !important;
}

    Thanks


    ThemeNectar Support Team 

  • James replied
    September 21, 2017 at 11:50am

    Perfect

    Thanks