Docs

[simone]

Hello, I plan to update my child theme > functions.php file with the code I found on the forum so that social sharing shows up on every blog post.

On the front page, I have 3 social sharing buttons I have made them oversized and white. For the blog page – I want them quite a bit smaller and a different color. When I target the css it changes the buttons on the front and blog pages, not what I want.

When I inline style it only changes the title and not the icons, can someone tell me how to target the icons independent of the front page social sharing icons – or what I am doing wrong in the inline styling. Many thanks in advance for your help!

[share title=”Share this Post” facebook=”true” twitter=”true” google_plus=”true” linkedin=”true” pinterest=”true” reddit=”true” email=”true” style=”color:#666;”]

http://www.cercatrovayoga.com/
simone

[Friech]

Hi Simone,

Thank you for writing in! You said you added a function on the child theme, I assume you use the do_shortcode () function. If so, please apply a class on that shortcode

e.g.
[share title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="true" email="true" class="myclass"]

Now you can apply a CSS on that specific social icons with the class myclass as your selector (see example below).

You’re already doing an inline style with your shortcode provided above. style="color:#666;" that is inline-styling.

If we use the class to apply the same styling, it’ll look like this:

.myclass a {
 color: #333;
}

Hope it helps, Cheers!

[simone]

Thank you for your response. I haven’t added the function to my child theme just yet. So on each blog page I am using the social sharing shortcode:
[share title=”Share this Post” facebook=”true” twitter=”true” linkedin=”true” email=”true” class=”blog_shareicons”]

then under customizer global css I added:

.blog_shareicons a {color:#666;}

the SHARE THIS POST title changes color but not the icons… ??

Thank you for your help!

[Thai]

Hi There,

Please try with this CSS instead:

.x-entry-share .x-share {
    color:#666;
}

Hope it helps 🙂

[Author]

Posts