custom social icons

Support Area Forums Agency custom social icons

This topic contains 9 replies, has 2 voices, and was last updated by  Bill Robbins 2 years, 7 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
URL to the page in question: http://battagliahomes.com
  • Author
    Posts
  • #25037
    R. whitehouse
    R. whitehouse
    Participant

    Hello,

    I had put, changing the social media icons out to add a custom icon, on hold but need to move forward with this edit. I had the below topic:

    http://support.organizedthemes.com/forums/topic/custom-social-media-icon-and-link/

    I really would rather not edit the theme code and just make the changes via the custom css but I have been unsuccessful in having the image show up correctly. The default twitter image is overlaying and then the icon that I created is being stretched way too large. I am puzzled of what is going wrong.

    Is there a detailed thread that instructs how to reinsert all of the social icons manually so that they match and have custom images? Thank you for your help!!!!

    #25038
    R. whitehouse
    R. whitehouse
    Participant

    Please disregard this, I figured it out. Sorry to bug you. Thanks. 🙂

    #25040
    R. whitehouse
    R. whitehouse
    Participant

    Hello. I added the custom footer social icons and all was working correctly on my mac on all browsers. My client is on a pc and notified me that they do not see the new icons, that they see the circles, the original icons. I took a look in windows parallels and the circles show and not the updated icons. Can you please let me know how to fix this? Thank you so much in advance for your help!

    #25059

    Bill Robbins
    Keymaster

    Good Morning,

    I took a look and here’s a few things I noticed in the Custom CSS:

    1. This spot looks like a PHP function:
      
      function add_title_attachment_link($link, $id = null) {
      	$id = intval( $id );
      	$_post = get_post( $id );
      	$post_title = esc_attr( $_post->post_title );
      	return str_replace('<a href&#039;, &#039;<a title=&quot;&#039;. $post_title .&#039;&quot; href&#039;, $link);
      }
      add_filter(&#039;wp_get_attachment_link&#039;, &#039;add_title_attachment_link&#039;, 10, 2);
      

      which won’t run inside the Custom CSS box. Since the options “escaped” some of the characters you’ll need to find the original source of that function and then add it to the bottom of the functions.php file to include it.

      Even if you don’t need the function anymore, remove it from the custom CSS as it may throw things off.

    2. Also this style:
      
      #footer-right li a.font-icon-social-facebook {
      	background: url(http://battagliahomes.com/wp-content/uploads/2014/12/FB2.png) center center no-repeat;
      	background-size: contain;
      	padding: 10px;
      }
      }
      

      has an extra closing bracket. You’ll want to remove the second one.

    3. Then this one:
      
      #footer li.pinterest a,
      #footer li.pinterest a:visited {
      float: right;
      width: 20px;
      height: 20px;
      padding: 0;
      text-indent: 0;
      background: none;
      

      is missing its closing bracket. You’ll want to add one there.

    IE is less forgiving than other browsers, so it’s possible that fixing those errors may help things work out.

    Take care,
    Bill

    #25060
    R. whitehouse
    R. whitehouse
    Participant

    Thank you so much for taking the time to look at the css. I made the noted edits and now only on a pc the icons are stacked vertically not side by side. How do I force them to be side by side? Thank you again, I really appreciate your help!!

    #25061

    Bill Robbins
    Keymaster

    You can always float them. Here’s the CSS for that:

    
    #footer-right a {
    	float: right;
    	display: inline;
    }
    

    Have a great weekend,
    Bill

    #25077
    R. whitehouse
    R. whitehouse
    Participant

    I added this code, thanks, but the icons still stack vertically on all pc browsers, not on mac browsers. I have never seen anything like this. Is there anything I can do to fix this? Thanks.

    #25085

    Bill Robbins
    Keymaster

    Occasionally with older versions of IE, you had to include a width in the parent element in order to keep that from happening. I was thinking that was an issue with IE 7 and below.

    With most CSS changes, I have a method of testing them out before I post them, but with situations like this, I don’t. So I’m going to point you in the direction I would go, but ultimately you’ll have to experiment with this a bit to find the right solution.

    Here’s where I would go next:

    
    #footer-right ul {
    	overflow: hidden;
    	width: 60px;
    }
    

    That gives the ul that contains the icons a width. You may try experimenting with that a bit and see if it helps. If not, then thing I would try is setting a width on the #footer-right itself. You may even need a combination of the two.

    After that, I would try adding a height first to the ul and then to the #footer-right.

    Take care,
    Bill

    #25104
    R. whitehouse
    R. whitehouse
    Participant

    You are the BEST! It worked! Thank you so so so much for your help and expertise. Happy Holidays!

    #25105

    Bill Robbins
    Keymaster

    Glad to hear that helped out. Merry Christmas 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘custom social icons’ is closed to new replies.