Custom Social Media Button

[ashlandwebsites]

I need a custom button that matches the social media buttons. I put the URL in the “Amazon” spot and changed the image over to my custom made image by overriding the css background property.

The only problem is that when I hover the button, the link title pops up, “Amazon.”

How can I change the link title.

Thanks very much
David

Topic

[Jason Bobich]

Hello,

First off, here’s some info about changing the images from your Custom CSS:

http://support.themeblvd.com/forums/topic/social-media-icons-change-color/

To actually change the text, you’d have to filter on your own value to pick from in the theme option when you’re in the admin. These values comes from a function called “themeblvd_social_media_option” found in /framework/admin/functions/display.php — You’d want to use the filter there called “themeblvd_social_media_buttons” to add your own.

http://dev.themeblvd.com/tutorial/filters/

And the actual output of the icons and that HTML is done from the function called themeblvd_contact_bar found in /framework/frontend/functions/parts.php.

Basically what is happening is you have an array like this from your Theme Options:

array(
	'twitter'		=> 'http://twitter.com/whatever',
	'facebook'		=> 'http://facebook.com/whatever'
)

The function just loops through this, using the key of each item as the class for the button and then capitalizing the first letter of the key for the title. The values are obviously what gets put in the href of the links.

So another option would be to just rig up something in themeblvd_contact_bar() that did a catch for “amazon” within the loop and then changed that string to something else before outputting it.

http://dev.themeblvd.com/tutorial/editing-framework-functions/

[ashlandwebsites]

Wow! Thanks for the extensive explanation. Unfortunately I am not familiar with php and it is very over my head at the moment.

It sounds like I could add a filter to my child theme’s functions.php. All it needs to do is change the output link title from “Amazon” to “Tango Clay”.

Could you please write the snippet that I could paste into my child theme’s “functions.php.”

I very much appreciate it.

Thanks
David

[Jason Bobich]

Please keep in mind that support does not include providing customizations.

http://support.themeblvd.com/help/#terms

What I would do in your case is copy themeblvd_contact_bar function to your Child theme’s functions.php before the framework runs (read how pluggable functions work). Then in the foreach() loop I would set it up more like this:

foreach( $buttons as $id => $url ) {
	
	if( $id == 'amazon' )
		$title = 'Tango Clay';
	else
		$title = ucfirst($id);
	
	$output .= '<li><a href="'.$url.'" title="'.$title.'" class="'.$id.'" target="'.$target.'">'.$title.'</a></li>';
}

[ashlandwebsites]

Thanks! I was able to make to work. I just purchased three more theme licenses.
David

[Jason Bobich]

Awesome, glad to hear it.

[John]

can you put this link in the alyeska forum so that I can read the response.

http://support.themeblvd.com/forums/topic/social-media-icons-change-color/

thx,
john

[Jason Bobich]

Here’s my response from that topic:

============

The social media icons in the header are anchor tags that have background image sprite applied via CSS. If you wanted to include your own image you’d need to do put the new image in your Child theme, and then include it with your own custom CSS.

You can find the current, default images here:

/framework/frontend/assets/images/parts/social-media-light.png
/framework/frontend/assets/images/parts/social-media-dark.png
/framework/frontend/assets/images/parts/social-media-grey.png

You can find a PSD source file for these images in your download package from ThemeForest.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

.themeblvd-contact-bar .light li a { background-image: url(..); }
.themeblvd-contact-bar .dark li a { background-image: url(..); }
.themeblvd-contact-bar .grey li a { background-image: url(..); }

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[Author]

Replies