WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS sprites for social media icons (2 posts)

  1. zackcello
    Member
    Posted 1 year ago #

    So here is my website: http://simplythreetrio.com

    I would like to change my current social media icons (top right) to CSS sprites, so that hovering turns them blue. I made my sprites, and they are here:

    http://simplythreetrio.com/wp-content/uploads/2012/10/twitter_sprite.png
    http://simplythreetrio.com/wp-content/uploads/2012/10/facebook_sprite.png
    http://simplythreetrio.com/wp-content/uploads/2012/10/rss_sprite.png
    http://simplythreetrio.com/wp-content/uploads/2012/10/youtube_sprite.png

    I just don't know how to insert the proper code into the php file, nor the css file. I would love some help, please!

    Here is my social_profiles.php file:

    <?php
        new Themater_Social_Profiles();
    
        class Themater_Social_Profiles
        {
            var $theme;
            var $status = false;
            var $display_networks = false;
            var $url;
    
            var $defaults;
    
            function __construct()
            {
                global $theme;
                $this->theme = $theme;
                $this->url = THEMATER_INCLUDES_URL . '/social_profiles';
    
               $this->defaults = array(
                    'hook' => 'social_profiles',
                    'networks' => array(
                        array('title' => 'Twitter', 'url' => 'http://twitter.com/', 'button' => get_template_directory_uri() . '/images/social-profiles/twitter.png'),
                        array('title' => 'Facebook', 'url' => 'http://facebook.com/', 'button' => get_template_directory_uri() . '/images/social-profiles/facebook.png'),
                        array('title' => 'Google Plus', 'url' => 'https://plus.google.com/', 'button' => get_template_directory_uri() . '/images/social-profiles/gplus.png'),
                        array('title' => 'LinkedIn', 'url' => 'http://www.linkedin.com/', 'button' => get_template_directory_uri() . '/images/social-profiles/linkedin.png'),
                        array('title' => 'RSS Feed', 'url' => $theme->rss_url(), 'button' => get_template_directory_uri() . '/images/social-profiles/rss.png'),
                        array('title' => 'Email', 'url' => 'mailto:your@email.com', 'button' => get_template_directory_uri() . '/images/social-profiles/email.png')
                    )
                );
    
                if(is_array($this->theme->options['plugins_options']['social_profiles']) ) {
                    $this->defaults = array_merge($this->defaults, $this->theme->options['plugins_options']['social_profiles']);
                }
    
                $this->theme->add_hook($this->defaults['hook'], array(&$this, 'display_social_profiles'), 1);
    
                if($this->theme->is_admin_user()) {
                   $this->themater_options();
                }
            }
    
            function display_social_profiles()
            {
                $widget_name = 'ThematerSocialProfiles';
                $args = array('before_widget' => '','after_widget' => '');
                $get_instance = $this->theme->get_option('themater_social_profiles_networks');
                $instance = array('profiles' => $get_instance);
                the_widget($widget_name, $instance, $args);
            }
    
            function get_widget_form()
            {
                $widget_name = 'ThematerSocialProfiles';
                $run_widget = new $widget_name();
                $run_widget->id_base = 'plugin';
                $get_instance = $this->theme->get_option('themater_social_profiles_networks');
                $instance = array('profiles' => $get_instance);
                $run_widget->form($instance);
                ?>
                <script>
        			  var update_scial_content = $thematerjQ('.themater_social_profiles_widget').html();
        			  update_scial_content = update_scial_content.replace(/widget-plugin\[\]\[profiles\]/g, 'themater_social_profiles_networks');
        			  $thematerjQ('.themater_social_profiles_widget').html(update_scial_content);
        			  $thematerjQ('.themater_social_profiles_widget_title').hide();
        		  </script>
                <?php
            }
    
            function themater_options()
            {
    
                $this->theme->admin_option(array('Social Profiles', 16),
                    'Social Profiles' , 'social_profiles',
                    'content', 'Add buttons to your social network profiles.'
                );
    
                $this->theme->admin_option('Social Profiles',
                    'Networks', 'themater_social_profiles_networks',
                    'callback', $this->defaults['networks'],
                    array('callback' => array(&$this, 'themater_social_profiles_networks'), 'display' => 'clean')
                );
    
            }
    
            function themater_social_profiles_networks()
            {
                $this->get_widget_form();
            }
        }
    ?>

    Here is the current corresponding CSS. I'll include the whole header:

    /* =HEADER
    -------------------------------------------------------------- */
    
    #header {
        height: 0px;
        padding:0px 0;
    }
    
    .logo {
        float: left;
        margin: -65px 0px 0px -10px;
    padding: 0px 25px;
    }
    
    .logo h1.site_title {
        margin: 0;
        padding:0;
        font-family: Arial, Helvetica, Sans-serif;
        font-size:48px;
        line-height: 40px;
        font-weight: bold;
    }
    
    .logo h1.site_title a, .logo h1.site_title a:hover {
        color: #47a0eb;
        text-decoration: none;
    }
    
    .logo h2.site_description {
        margin: 0;
        padding:0;
        color: #47a0eb;
        font-family: Arial, Helvetica, Sans-serif;
        font-size:14px;
        line-height: 14px;
    }
    
    .header-right {
        float: right;
    }
    
    #top-social-profiles {
        padding-top: 10px;
        padding-right: 15px;
        height: 32px;
        text-align: right;
    
    }
    #top-social-profiles img {
        margin: 0 0 0 6px !important;
    } 
    
    #top-social-profiles img:hover {
        opacity: 0.8;
    
    }
    #top-social-profiles .widget-container {
      background: none;
      padding: 0;
      border: 0;
    }

    If there is any help/advice you can give me in order to achieve this CSS sprite replacement, I would truly appreciate it!!

    -Zack

  2. zackcello
    Member
    Posted 1 year ago #

    Okay, so I figured it out. Here's what I did:

    I commented out the header.php code that called the social_profiles.php file. Then I added code after it, that called to the respective CSS classes.

    Here's what the new header.php file looks like, with my added :

    </head>
    
    <body <?php body_class(); ?>>
    <?php $theme->hook('html_before'); ?>
    
    <div id="wrapper">
    
    <div id="container">
    
        <div class="clearfix">
    
            <?php if($theme->display('menu_primary')) { $theme->hook('menu_primary'); } ?>
    
    <a class="twitter" href="http://twitter.com/simplythreetrio"></a><a class="facebook" href="http://facebook.com/simplythree"></a><a class="rss" href="http://simplythreetrio.com/?feed=rss"></a><a class="youtube" href="http://youtube.com/simplythreetresona"></a>
    
          <!--<div id="top-social-profiles">
    
                <?php $theme->hook('social_profiles'); ?>
            </div>-->
        </div>
        <div id="header">
            <div class="logo">

    And here is the new CSS code, which defines the classes and calls the sprites. I called them facebook, twitter, rss, and youtube:

    /* =HEADER
    -------------------------------------------------------------- */
    
    #header {
        height: 0px;
        padding:0px 0;
    }
    
    .logo {
        float: left;
        margin: -65px 0px 0px -10px;
    padding: 0px 25px;
    }
    
    .logo h1.site_title {
        margin: 0;
        padding:0;
        font-family: Arial, Helvetica, Sans-serif;
        font-size:48px;
        line-height: 40px;
        font-weight: bold;
    }
    
    .logo h1.site_title a, .logo h1.site_title a:hover {
        color: #47a0eb;
        text-decoration: none;
    }
    
    .logo h2.site_description {
        margin: 0;
        padding:0;
        color: #47a0eb;
        font-family: Arial, Helvetica, Sans-serif;
        font-size:14px;
        line-height: 14px;
    }
    
    .header-right {
        float: right;
    }
    
    #top-social-profiles {
    visibility: hidden;
        padding-top: 10px;
        padding-right: 15px;
        height: 32px;
        text-align: right;
    
    }
    #top-social-profiles img {
        margin: 0 0 0 6px !important;
    } 
    
    #top-social-profiles img:hover {
        opacity: 0.8;
    
    }
    #top-social-profiles .widget-container {
      background: none;
      padding: 0;
      border: 0;
    }
    
    a.facebook {
    	display: inline-block;
    	margin: 10px 3px 0 3px;
    	width: 32px;
    	height: 32px;
    	text-decoration: none;
    	background: url(customimages/facebook_sprite.png);
    	}
    
    a.facebook:hover {
    	background-position: -32px 0;
    	}
    
    .displace {
    	position: absolute;
    	left: -5000px;
    	}
    a.twitter {
    	display: inline-block;
    margin: 10px 3px 0 106px;
    	width: 32px;
    	height: 32px;
    	text-decoration: none;
    	background: url(customimages/twitter_sprite.png);
    	}
    
    a.twitter:hover {
    	background-position: -32px 0;
    	}
    
    .displace {
    	position: absolute;
    	left: -5000px;
    	}
    a.rss {
    	display: inline-block;
    margin: 10px 3px 0 3px;
    	width: 32px;
    	height: 32px;
    	text-decoration: none;
    	background: url(customimages/rss_sprite.png);
    	}
    
    a.rss:hover {
    	background-position: -32px 0;
    	}
    
    .displace {
    	position: absolute;
    	left: -5000px;
    	}
    a.youtube {
    	display: inline-block;
    margin: 10px 3px 0 3px;
    	width: 32px;
    	height: 32px;
    	text-decoration: none;
    	background: url(customimages/youtube_sprite.png);
    	}
    
    a.youtube:hover {
    	background-position: -32px 0;
    	}
    
    .displace {
    	position: absolute;
    	left: -5000px;
    	}

    I added margin parameters to align the icons the way I wanted. Anyway, thanks anyway guys! I hope this might help people in the future!

    Zack

Topic Closed

This topic has been closed to new replies.

About this Topic