2

[Syahir Hakim]

Syahir Hakim

#28706

Yeah, in version 1.7.1 the social media icons in the top bar have been changed to use <img> tag rather than background image on the <a> element. The reason for this is because:

1. The WordPress Theme Review theme has decided that themes should not use inline styles in the site’s frontend, which was how the custom social media icon was styled in version 1.7.

2. Because we cannot use inline styles, the custom social media icons will have to use the <img> tag instead.

3. Because custom social media icons have to use the <img> tag, it makes sense to standardise the other social medial icons to use <img> tag as well.

4. This also reduces the need to manually enter the CSS code for the background of each and every one of the included social media icons. Notice that in version 1.7.1 the social media icons have been changed. Though I hate to, I had to replace the icon set that we used in version 1.7 simply because that icon set is not released under a pre-made GPL-compatible licence, even if the author had stated that it’s “free to use”.

As for using sprite image, you can still do this since each social media icon still has its own class (e.g. social-twitter) and ID (e.g. social-id-1).

[Anonymous]

Anonymous

#28707

Dear Syahir,

I didn’t use sprite image, I used my custom icons in the following way:

1) I uploaded my custom images to my themes/graphene-child/images folder

2) I added the following code to my child theme’s style.css:

.mysocial { background: url(images/social_rss_icon_white.png) no-repeat top left; width: 32px; height: 32px; }

.mysocial-icon { width: 32px; height: 32px; }

.social-facebook{ background-image: url(images/social_facebook_icon_white.png); }

and so on for the google, linkedin, ect.

Could you please tell me how I can refer to these images considering this new approach?

[Syahir Hakim]

Syahir Hakim

#28708

Use something like this to hide the icons used by the theme:

.mysocial img {

display: none;

}

.mysocial {

width: 32px;

height: 32px;

}

Then, for each particular icon, use this:

.social-facebook {

background-image: url(images/social_facebook_icon_white.png);

}

And so on for Google, LinkedIn, etc.

[Anonymous]

Anonymous

#28709

Success!

Now everything looks just the way it was.

Thank you, Syahir!

[Mango]

Mango

#28710

just spent a couple of days getting a standard set of Social Sharing buttons to work properly in 1.7 now it seem that I must start again in version 1.7.1 There must an easier way? a lot of themes just have them built in? I don’t really want to install an additional plugin just to have Social Buttons.

Does anyone have a shortcut to place a basic set of 32px sharing buttons at the bottom of my posts to give my brain a rest? 9its been a long day)

Thanks in advance.

[Anonymous]

Anonymous

#28711

For that, you should simply go to your Graphene theme options, under the basic settings you will find something like “Social Sharing (Buttons)”, tick “Show Buttons” on, set “Social Sharing Buttons Location” to ‘Bottom of Posts’, and copy this code into the textbox:

<!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">

<a class="addthis_button_preferred_1"></a>

<a class="addthis_button_preferred_2"></a>

<a class="addthis_button_preferred_3"></a>

<a class="addthis_button_preferred_4"></a>

<a class="addthis_button_compact"></a>

<a class="addthis_counter addthis_bubble_style"></a>

</div>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fc0ce9536a72cd1"></script>

<!-- AddThis Button END -->

You can configure this code according to your taste on this site.

Good look! 🙂

[Mango]

Mango

#28712

Thanks Vasvaria, that certainly works and is a lot easier than what I was trying to do.

Now I just need to nut out how to add Twitter and G+ buttons.I have never been able to work out what the “preferred” numbers actually correspond too.

I will get there.

Thanks again. That’s what makes Graphene such a great Theme, help is only minutes away.

Mango

[Mango]

Mango

#28713

The other weird thing is that the last Social Sharing button always drops down to next line. Hate these weird little things that take up so much time.

http://8steps2health.com/AboutHealth/probiotic/

[Anonymous]

Anonymous

#28714

You’re welcome, Mango!

As for the Twitter and G+ buttons, you should search for an appropriate plugin in WordPress Plugins.

I don’t know exactly what “preferred” numbers mean but, for me, it always shows the social sharing buttons last used.

“…the last Social Sharing button always drops down to next line.” – I don’t get it. Your icons just look fine to me.

[Kenneth John Odle]

Kenneth John Odle

#28715

The advantage of using code from AddThis is that visitors to your site can configure their preferred sharing buttons to appear. That’s what “preferred” means—it’s your readers’ preferences, not yours. So if they want to add a Twitter button or a G+ button, they can.

On my blog, this is what I see:

However, by hovering over that red square with the white plus (looks like the Swiss flag), a box will pop up that says “Bookmark and Share”. If you click on the “Settings” link at the bottom, you’ll get a pop-up window that will allow you to select which sharing buttons you would like to see and what order you want to see them in.

This is what you, as a reader, get to do. I don’t need to worry about plugins for this or that site, because as a reader to my blog, you can decide for yourself what sharing buttons you want to see here.

I like having a lot of control over my websites, but this is one area where I believe that the readers should be in control. That’s why I always recommend AddThis code and why I don’t use plugins for anything else.

Many of those other plugins are either poorly written or never updated (Twitter and especially Facebook change things often) and cause all sorts of problems down the road. You just don’t need them.