Options

Social Icons

Dave17Dave17 Registered Users Posts: 86 Big grins
edited September 5, 2013 in SmugMug Customization
I have the social icons block on my homage. See image below.

I added a "custom" link which displays and works fine. The icon for the custom link displays as a "chain link" icon. Again, see image.

Is there a way to change the "chain link" icon for the custom link to something of my own design?

Thanks,
--Dave

Comments

  • Options
    Darter02Darter02 Registered Users Posts: 947 Major grins
    edited September 4, 2013
    I too would like a fix for this. I added LinkedIn and want their image on the site.
  • Options
    LemansLemans Registered Users Posts: 53 Big grins
    edited September 4, 2013
    Following....
    Leman's Studios
  • Options
    jwashburnjwashburn Registered Users Posts: 476 Major grins
    edited September 4, 2013
    Something like this should work
    .sm-page-widget-social-links-link yui3-u {
background-image: url("http://path_to_your_properly_sized_image.png");
}

.sm-fonticon-LinkSquare:before {
    display: none;
}

    The first piece targets the container where you want to put your new icon such as Linked IN. To make it look right it should be the same size as the icon you are replacing

    The second piece tells the font icon to not display

    Here is a screen shot from a test i whipped up

    i-KsqXWdc-L.png
    Joey Washburn
    www.joeywashburn.com
  • Options
    LemansLemans Registered Users Posts: 53 Big grins
    edited September 5, 2013
    No luck here and I followed this to the letter... :/
    I'll keep following to see what turns up... I always appreciate peoples responses. :) Thanks!
    Leman's Studios
  • Options
    Darter02Darter02 Registered Users Posts: 947 Major grins
    edited September 5, 2013
    There are somethings I'll need to figure out before I can try this.

    1. I've no clue what size I need.

    2. I'll need to find the right logo that is in the same style the others are in.

    3. I'll need to make sure it behaves like the others do. They all have an opacity layer. Also, how do I ensure the color is correct? Does the system in my customizer still control that, or do I need to create it from scratch? What if I change colors?

    The easiest would be for SM to simply ADD this to the customizer that controls this. LinkedIn isn't exactly an obscure site...
  • Options
    jwashburnjwashburn Registered Users Posts: 476 Major grins
    edited September 5, 2013
    Lemans wrote: »
    No luck here and I followed this to the letter... :/
    I'll keep following to see what turns up... I always appreciate peoples responses. :) Thanks!

    Copy and paste the code you used in here please
    Joey Washburn
    www.joeywashburn.com
  • Options
    LemansLemans Registered Users Posts: 53 Big grins
    edited September 5, 2013
    jwashburn wrote: »
    Copy and paste the code you used in here please


    .sm-page-widget-social-links-link yui3-u {
    background-image: url("http://lemansstudios.smugmug.com/photos/i-XpMQqPb/0/M/i-XpMQqPb-M.png");
    }

    .sm-fonticon-LinkSquare:before {
    display: none;
    }


    It wouldn't even turn off the generic icon... :/ no idea why. It's not a big deal in the scheme of things, just a nitpick on my part is all.
    Leman's Studios
  • Options
    jwashburnjwashburn Registered Users Posts: 476 Major grins
    edited September 5, 2013
    Lemans wrote: »
    .sm-page-widget-social-links-link yui3-u {
    background-image: url("http://lemansstudios.smugmug.com/photos/i-XpMQqPb/0/M/i-XpMQqPb-M.png");
    }

    .sm-fonticon-LinkSquare:before {
    display: none;
    }


    It wouldn't even turn off the generic icon... :/ no idea why. It's not a big deal in the scheme of things, just a nitpick on my part is all.

    I guess different themes have different CSS classes

    Yours is 
    .sm-fonticon-Link:before {
    display: none;
}
    Joey Washburn
    www.joeywashburn.com
Sign In or Register to comment.