This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: 

48px Social Media Icons

  • Creator
    Topic
  • #11191
    scottb23
    Participant

    Hey! So I’ve been playing with the CSS for the social media icons while setting up our site. Because the theme now comes with a 48px HIDPI version of the icons, so far i’ve attempted to remap the image co-ordinates for each of the social media properties via the css.

    Currently, the site doesnt load the 48px version even when i change all references and appropriate image sizes to it, however if I do the changes to a live site using the standard theme CSS, it can be done and all looks beautiful!

    Heres how it looks if I type it in via the inspector in Chrome, looks sweet!

    http://cl.ly/image/2C1J0E3G3t39

    And here are my changes in the inspector

    http://cl.ly/image/290i143d2R1H

    I’ve just gone through and doubled the reference for each images map, so youtube becomes 0 -1440 instead of 0 -720

    This is my CSS that I’d hope would override the default and reproduce what I can do on the live site

    .themeblvd-contact-bar li a {
    	height: 48px;
    	width: 48px;
    }
    
    .themeblvd-contact-bar ul.social-media-color li a {
    	background-image: url("../images/parts/social-media-color_48x48.png");
    }
    
    .themeblvd-contact-bar li .amazon {
    	background-position: 0 0;
    }
    
    .themeblvd-contact-bar li .delicious {
    	background-position: 0 -48px;
    }
    
    .themeblvd-contact-bar li .deviantart {
    	background-position: 0 -96px;
    }
    
    .themeblvd-contact-bar li .digg {
    	background-position: 0 -144px;
    }
    
    .themeblvd-contact-bar li .dribbble {
    	background-position: 0 -192px;
    }
    
    .themeblvd-contact-bar li .ebay {
    	background-position: 0 -240px;
    }
    
    .themeblvd-contact-bar li .email {
    	background-position: 0 -288px;
    }
    
    .themeblvd-contact-bar li .facebook {
    	background-position: 0 -336px;
    }
    
    .themeblvd-contact-bar li .feedburner {
    	background-position: 0 -384px;
    }
    
    .themeblvd-contact-bar li .flickr {
    	background-position: 0 -432px;
    }
    
    .themeblvd-contact-bar li .forrst {
    	background-position: 0 -480px;
    }
    
    .themeblvd-contact-bar li .foursquare {
    	background-position: 0 -528px;
    }
    
    .themeblvd-contact-bar li .github {
    	background-position: 0 -576px;
    }
    
    .themeblvd-contact-bar li .google {
    	background-position: 0 -624px;
    }
    
    .themeblvd-contact-bar li .instagram {
    	background-position: 0 -672px;
    }
    
    .themeblvd-contact-bar li .linkedin {
    	background-position: 0 -720px;
    }
    
    .themeblvd-contact-bar li .myspace {
    	background-position: 0 -768px;
    }
    
    .themeblvd-contact-bar li .paypal {
    	background-position: 0 -816px;
    }
    
    .themeblvd-contact-bar li .picasa {
    	background-position: 0 -864px;
    }
    
    .themeblvd-contact-bar li .pinterest {
    	background-position: 0 -912px;
    }
    
    .themeblvd-contact-bar li .reddit {
    	background-position: 0 -960px;
    }
    
    .themeblvd-contact-bar li .rss {
    	background-position: 0 -1008px;
    }
    
    .themeblvd-contact-bar li .scribd {
    	background-position: 0 -1056px;
    }
    
    .themeblvd-contact-bar li .squidoo {
    	background-position: 0 -1104px;
    }
    
    .themeblvd-contact-bar li .technorati {
    	background-position: 0 -1152px;
    }
    
    .themeblvd-contact-bar li .tumblr {
    	background-position: 0 -1200px;
    }
    
    .themeblvd-contact-bar li .twitter {
    	background-position: 0 -1248px;
    }
    
    .themeblvd-contact-bar li .vimeo {
    	background-position: 0 -1296px;
    }
    
    .themeblvd-contact-bar li .xbox {
    	background-position: 0 -1344px;
    }
    
    .themeblvd-contact-bar li .yahoo {
    	background-position: 0 -1392px;
    }
    
    .themeblvd-contact-bar li .youtube {
    	background-position: 0 -1440px;
    }

    But the problem is, when I do add this CSS, the boxes resize but the image doesnt show in them? Is there something perhaps saying only to display the HIDPI versions on a retina/etc display? I did see a CSS selector for that but cant figure it out!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #11205
    Jason Bobich
    Keymaster

    Hello,

    It sounds like maybe you aren’t taking into account the image paths from your CSS file to the image you’re referencing. Remember that in CSS, the path to the image is always relative to the stylesheet the CSS is located in. I can’t really tell you for sure without seeing specifically how you’re referencing everything, but that’s my initial guess from what you’re telling me.

    .themeblvd-contact-bar ul.social-media-color li a {
    	background-image: url("../images/parts/social-media-color_48x48.png");
    }

    So, you’ll want to make sure the path to the actual image you’re trying to include as a background image is correct for where you’re placing your custom styles.

    Also note that if you’re displaying the 48px images at 48px then they are no longer HiDPI. The idea is for the 48px image to be displayed at 24px for HiDPI/Retina devices. 😉

    #11212
    scottb23
    Participant

    Thanks Jason! I’ve had to go and reference the images via HTML to get it to find it, but it seems to be working now! Also got tripped up slightly with the CSS wanting the #branding marker on the width of the social icons, and then had to reference the selector again to get the height working, but now everything is in place wonderfully.

    Thankyou for your help!

    I’ve included my css here for anyone else that wants larger social icons, make sure you change it to your relevant domain. Im sure this could be tidied up to run off of the root of the CSS but this works for now!

    /*Converts icons to 48px*/
    #branding .themeblvd-contact-bar li a {
    	width: 49px;
    }
    
    .themeblvd-contact-bar li a {
    	height: 48px;
    }
    
    .themeblvd-contact-bar ul.social-media-color li a {
    	background-image: url('http://www.ADDYOURDOMAINHERE/wp-content/themes/alyeska/framework/assets/images/parts/social-media-color_48x48.png') ;
    }
    
    .themeblvd-contact-bar li .amazon {
    	background-position: 0 0;
    }
    
    .themeblvd-contact-bar li .delicious {
    	background-position: 0 -48px;
    }
    
    .themeblvd-contact-bar li .deviantart {
    	background-position: 0 -96px;
    }
    
    .themeblvd-contact-bar li .digg {
    	background-position: 0 -144px;
    }
    
    .themeblvd-contact-bar li .dribbble {
    	background-position: 0 -192px;
    }
    
    .themeblvd-contact-bar li .ebay {
    	background-position: 0 -240px;
    }
    
    .themeblvd-contact-bar li .email {
    	background-position: 0 -288px;
    }
    
    .themeblvd-contact-bar li .facebook {
    	background-position: 0 -336px;
    }
    
    .themeblvd-contact-bar li .feedburner {
    	background-position: 0 -384px;
    }
    
    .themeblvd-contact-bar li .flickr {
    	background-position: 0 -432px;
    }
    
    .themeblvd-contact-bar li .forrst {
    	background-position: 0 -480px;
    }
    
    .themeblvd-contact-bar li .foursquare {
    	background-position: 0 -528px;
    }
    
    .themeblvd-contact-bar li .github {
    	background-position: 0 -576px;
    }
    
    .themeblvd-contact-bar li .google {
    	background-position: 0 -624px;
    }
    
    .themeblvd-contact-bar li .instagram {
    	background-position: 0 -672px;
    }
    
    .themeblvd-contact-bar li .linkedin {
    	background-position: 0 -720px;
    }
    
    .themeblvd-contact-bar li .myspace {
    	background-position: 0 -768px;
    }
    
    .themeblvd-contact-bar li .paypal {
    	background-position: 0 -816px;
    }
    
    .themeblvd-contact-bar li .picasa {
    	background-position: 0 -864px;
    }
    
    .themeblvd-contact-bar li .pinterest {
    	background-position: 0 -912px;
    }
    
    .themeblvd-contact-bar li .reddit {
    	background-position: 0 -960px;
    }
    
    .themeblvd-contact-bar li .rss {
    	background-position: 0 -1008px;
    }
    
    .themeblvd-contact-bar li .scribd {
    	background-position: 0 -1056px;
    }
    
    .themeblvd-contact-bar li .squidoo {
    	background-position: 0 -1104px;
    }
    
    .themeblvd-contact-bar li .technorati {
    	background-position: 0 -1152px;
    }
    
    .themeblvd-contact-bar li .tumblr {
    	background-position: 0 -1200px;
    }
    
    .themeblvd-contact-bar li .twitter {
    	background-position: 0 -1248px;
    }
    
    .themeblvd-contact-bar li .vimeo {
    	background-position: 0 -1296px;
    }
    
    .themeblvd-contact-bar li .xbox {
    	background-position: 0 -1344px;
    }
    
    .themeblvd-contact-bar li .yahoo {
    	background-position: 0 -1392px;
    }
    
    .themeblvd-contact-bar li .youtube {
    	background-position: 0 -1440px;
    }
Viewing 2 replies - 1 through 2 (of 2 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.