This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Custom Social Media Button

  • Creator
    Topic
  • #9509
    ashlandwebsites
    Participant

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Author
    Replies
  • #9513
    Jason Bobich
    Keymaster

    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/

    #9562
    ashlandwebsites
    Participant

    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

    #9571
    Jason Bobich
    Keymaster

    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>';
    }
    #9871
    ashlandwebsites
    Participant

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

    #9878
    Jason Bobich
    Keymaster

    Awesome, glad to hear it.

    #10839
    John
    Participant

    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

    #10840
    Jason Bobich
    Keymaster

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.