Change social button colours in TwentyThirteen

  • Unknown's avatar
    scruffycat171 · Member ·

    Bit of a newbie and can’t figure out how to change the colour of the social buttons in the footer of my site https://www.beckysandyart.com

    I’ve tried searching the code for the hex to see where it’s pulling from but I’m getting no results….how can I change this please? I just want to switch the red to white.

    I also can’t figure out how to center them in the footer – can anyone help?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    slantedplanet · Member ·

    Hello!

    I have this CSS working with your site:

    /* set color for footer social icons  */
.jetpack_widget_social_icons svg {
    fill: white;
}

/* set hover color for footer social icons  */
.jetpack_widget_social_icons svg:hover {
    fill: #EDE2CC;
}

@media screen and ( min-width: 768px ) {
	/* push social icons towards the center of the footer */
	.site-footer .widget-area {
    	width: 35%;
   }
}

@media screen and ( min-width: 1024px ) {
	/* push social icons towards the center of the footer */
	.site-footer .widget-area {
    	width: 17%;
   }
}

    The centering may not be pixel-perfect, but it’s close. (and simple to implement) Feel welcome to play with the width values to see how it affects the layout. One width setting does not work for all devices, so you will see additional CSS to account for different sized displays.

    For the footer social icons color, I added a hover style. If you decide not to keep it, you can omit it without affecting how the other code works.

    Please let us know if this is good for your site.

  • Unknown's avatar
    scruffycat171 · Member ·

    Hi!

    Amazing thank you! The icon colours and hover are perfect!

    I’ve tried adding the code for the centering…it’s working on smaller sizes but can’t seem to push it to more of a quarter way over on desktop even if I change the percentage around.

    When I refresh the site I can see it flash to the center and then go back to left align…Wondering if there’s something else in my code blocking it?

  • Unknown's avatar
    slantedplanet · Member ·

    Hello again!

    Thanks for your follow up. What you describe does suggest that some other CSS is changing the setting that would push your social icons towards the center of the footer.

    Taking a look at other possible solutions, I had success with this on your site:

    /* center footer social icons  */
aside#jetpack_widget_social_icons-4 {
	position: relative !important; /* required for precedence over inline styling */
}

    When you add this, remove all the other CSS for changing the positioning of the footer social media icons.

    To be clear, everything together looks like this after revisions:

    
/* center footer social icons  */
aside#jetpack_widget_social_icons-4 {
	position: relative !important; /* !Important required for precedence over inline styling */
}

/* set color for footer social icons  */
.jetpack_widget_social_icons svg {
    fill: #EDE2CC;
}

/* set hover color for footer social icons  */
.jetpack_widget_social_icons svg:hover {
    fill: white;
}

    Please let us know if this works for you.

    I also want to make sure that you are aware that your plan includes live chat support. Staff frequently recommends live chat support as a way to get help faster. This is another resource available to you when you have questions about your site.

  • Unknown's avatar
    scruffycat171 · Member ·

    That’s perfect, thanks so much for your help!

    And I did not know that about the live chat, thank you!

  • The topic ‘Change social button colours in TwentyThirteen’ is closed to new replies.