Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Inserting image into social icons buttons

    I was wondering if anyone here knows how to code an image into social buttons controlled by a Wordpress widget? Here's my site http://creatiknit.com and I want to change the social icons in the upper right-hand corner to have a little yarn ball instead of the standard colors. The widget only allows me to edit the color and shape, but I was wondering if I include an image into the zipped file that would overlay the color and then write the image into the code, and re-upload the file? Here's the link to the widget file http://http://wordpress.org/plugins/...ocial-buttons/.

    Thanks for any help!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You should be able to do this by adding the following to your style.css:

    Code:
    .simple-social-icons ul li a{
            background-image: url("path/to/your/normal/image");
            background-repeat:no-repeat;
            background-size:cover;
            background-position: center center
    }
    .simple-social-icons ul li a:hover{
            background-image: url("path/to/your/hover/image");
    }
    No need to mess with the plugin, this css should take precedent over the plugin css. You'll need to make sure your image is sized correctly.

    In older browsers, if the user zooms the page then the existing coloured background will appear behind your background image. With newer browsers the background image should resize.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    Creatiknit (01-07-2014)

  • #3
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you SOOOOO much! It worked!! I am so new to coding, and it almost feels like magic! I am so grateful to you for helping me change my social icons on my website!!!! You are awesome!!!!!

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You're welcome, just taken a look at your site and it looks good!
    No link to Ravelry...?
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #5
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you!

    You are SO right...why didn't I think of that?! How would I add a button for Ravelry onto that??

    Do you knit? Here is my Ravelry if you want to take a peek: http://www.ravelry.com/people/CreatiKnit

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    It's be easy enough to use the Ravelry link in one of the other social media settings on that plugin. More difficult is getting a suitable ravelry icon to appear, as that plugin looks like it uses a custom font to render the icons.

    You'd have to edit the plugin file simple-social-icons.php, then find where it says:

    Code:
    			'dribbble' => array(
    				'label'   => __( 'Dribbble URI', 'ssiw' ),
    				'pattern' => '<li class="social-dribbble"><a href="%s" %s>&#xe800;</a></li>',
    			),
    and replace that with

    Code:
    			'dribbble' => array(
    				'label'   => __( 'Dribbble URI', 'ssiw' ),
    				'pattern' => '<li class="social-dribbble"><a href="%s" %s>R</a></li>',
    			),
    Then use the dribbble entry to enter your Ravelry link and you'll get an R displayed in the icon.

    Be aware that if you update the plugin this will get overwritten.

    (Not a knitter, no, but in my other life I own a wool fibre shop with my wife so am literate in all things woolly....)
    Last edited by SB65; 01-15-2014 at 02:19 PM.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #7
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for sharing this i have also like this kind of problem that i will ask but not necessarily because its already answer.

  • #8
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Senior Coder,

    Thank you soooo much!! It worked...it really worked! Take a look!! I get really freaked out by coding, since it is like a foreign, no...alien language to me. I am always so amazed at what people can do by typing letters into spaces.

    How did someone even originally create computers that read this code...it blows me away!

    OOOh, a wool shop would be nice! If your wife knits, or if you ever take it up, I would be happy to send you some free patterns!

    (((Big Cyber Hugs)))
    Angela


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •