Social Media Icons Shape Change Upon Hover

Home Forums SKT Biz/Corp Theme Support Social Media Icons Shape Change Upon Hover

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #77815
    Bilal Sadiq
    Member
    • Topics: 1
    • Replies: 3
    • Total: 4
    Member since: May 15, 2017

    How and where do I put the code for social media icons to change shape upon hover (from circle icon to square with rounded corners). Theme is bizness pro.

    Secondly, I cant remove the category and archives showing vertically on Home page

    #77836
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25285
    • Total: 25285
    Member since: August 16, 2013

    Hi,

    Kindly show us your website URL so that we can assist further.

    Regards,
    Dave

    #77841
    Bilal Sadiq
    Member
    • Topics: 1
    • Replies: 3
    • Total: 4
    Member since: May 15, 2017

    url is akhtarz.com

    how can I upload a picture here to show hover social media icons?

    #77844
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25285
    • Total: 25285
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

    Add this code there:

    .header-follow-us .social-icons a { border-radius:100% !important; transition:all 0.5s ease-in-out 0s;}
    .social-icons a:hover { border-radius:6px !important;}

    Regards,
    Dave

    #80812
    Alice Kaal
    Member
    • Topics: 1
    • Replies: 13
    • Total: 14
    Member since: March 13, 2017

    Hello,

    How can I get social media icons in the header (in line of the logo, but on the right side of the screen, above menu).

    The social icons in the footer link to http://socialmediahuis.nl/www.facebook.com/socialmediahuis/ instead of http://www.facebook.com/socialmediahuis/. So the 404-page is showing. How can I fix that?

    My website is http://www.socialmediahuis.nl

    Thanks in advance!

    #81213
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25285
    • Total: 25285
    Member since: August 16, 2013

    Hi,

    Kindly use this shortcodes there.

    [social_area]
    [social icon="facebook" link="https://www.facebook.com/socialmediahuis/"]
    [social icon="twitter" link="https://twitter.com/socialmediahuis/"]
    [social icon="instagram" link="https://www.instagram.com/socialmediahuis/"]
    [/social_area]

    Regards,
    Dave

    #81245
    Alice Kaal
    Member
    • Topics: 1
    • Replies: 13
    • Total: 14
    Member since: March 13, 2017

    Hi Dave,

    That doesn’t work in the footer widget and I want to use my own icons.

    The ones are in the footer now, but they automatically link to http://www.socialmediahuis.nl/www.facebook.com/socialmediahuis instead of http://www.facebook.com/socialmediahuis.

    Despite of what I type in the code:

    <a href="www.facebook.com/socialmediahuis/"><IMG SRC="http://socialmediahuis.nl/wp-content/uploads/2017/08/facebook.png" width="50" height="50" /></a>&emsp;<a href="www.twitter.com/socialmediahuis/"><IMG SRC="http://socialmediahuis.nl/wp-content/uploads/2017/08/twitter.png" width="50" height="50" /></a>&emsp;<a href="www.instagram.com/socialmediahuis/"><IMG SRC="http://socialmediahuis.nl/wp-content/uploads/2017/08/insta.png" width="50" height="50" /></a>

    Can you help me properly?

    #81250
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25285
    • Total: 25285
    Member since: August 16, 2013

    Hi,

    Kindly send us your WordPress admin details (Username & Password) via sktthemes.net/contact Please mention this forum URL while replying so that we understand what needs to be done.

    Regards,
    Dave

    #81255
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25285
    • Total: 25285
    Member since: August 16, 2013

    Hi,

    This issue was resolved from our end. Kindly check and confirm.

    Regards,
    Dave

    #85231
    Bilal Sadiq
    Member
    • Topics: 1
    • Replies: 3
    • Total: 4
    Member since: May 15, 2017

    Thanks dave, the shape changes upon hovering mouse, I would also like to change the color upon hover, official blue of facebook, twitter, linkedin and red of google plus. please support.

    #85234
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25285
    • Total: 25285
    Member since: August 16, 2013

    Hi,

    Can you send us the screenshot of your issues? Upload your screenshot on imgur.com and paste the share url here.

    Regards,
    Dave

    #85261
    Bilal Sadiq
    Member
    • Topics: 1
    • Replies: 3
    • Total: 4
    Member since: May 15, 2017

    see the linkedin icon changes shape as well as color upon hover.

    View post on imgur.com

    Need to know code for custom color change.

    https://stackoverflow.com/questions/25770590/change-color-when-hover-a-font-awesome-icon
    Run code snippet, that also might clear my query.

    #85265
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25285
    • Total: 25285
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    .fa.fa-facebook.fa-1x {background: #3b5998 !important; color: #fff !important; border: none !important;}
    .fa.fa-twitter.fa-1x {background: #1ea1f3 !important; color: #fff !important; border: none !important;}
    .fa.fa-linkedin.fa-1x {background: #0077b4 !important; color: #fff !important; border: none !important;}
    .fa.fa-google-plus.fa-1x {background: #dc4c41 !important; color: #fff !important; border: none !important;}

    Regards,
    Dave

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