• Resolved SandyMcDonald

    (@sandymcdonald)


    I would like to use social media icons directly in the text/html area of the side widget. I’ve successfully displayed them; however, they are by default displaying vertically. The code in the text of the side widget is

    <div id="social-icons">
    
    <a href="https://www.facebook.com/misscupcakeable">
    <img src="https://cupcakeable.com/wp-content/uploads/2013/02/roundTealFacebook.png"
      width="50"
     title="Join My Facebook Page" alt="Join My Facebook Page" /></a>
    
    <a href="https://www.twitter.com/misscupcakeable"><img
     src="https://cupcakeable.com/wp-content/uploads/2013/02/RoundTealTwitter.png"
     width="50"
     title="Follow Me on Twitter" alt="Follow Me on Twitter" /></a>
    
    <a href="https://www.pinterest.com/misscupcakeable"><img
     src="https://cupcakeable.com/wp-content/uploads/2013/02/RoundTealPinterest.png"
     width="50"
     title="Follow Me on Pinterest" alt="Follow Me on Pinterest" /></a>
    
    <a href="https://www.flickr.com/photos/cupcakeable/"><img
     src="https://cupcakeable.com/wp-content/uploads/2013/02/RoundTealFlickr.png"
     width="50"
     title="Follow Me on Flickr" alt="Follow Me on Flickr" /></a>
    </div>

    The code added to the custom css file via Jetpack is

    .`custom #social-icons a img {
    float: left;
    }`

    Why is this not working? The site is Cupcakeable

    Thank you.

Viewing 7 replies - 1 through 7 (of 7 total)
  • there is no sign of these new styles in your site;

    double check if the ‘jetpack’ css option is properly activated.

    your theme also seems to have ist own custom css (?) – please contact the theme’s developer for support.

    Thread Starter SandyMcDonald

    (@sandymcdonald)

    I’m sorry. I had removed the code. I’ve put it back now. Can you see if you can see any signs of the new styles in the site now?

    InkThemes used to have a forum for all users. They have sense created a new forum, which is only available for users of the paid version. Should I try to find an email for InkThemes?

    Where is the class “custom”? It seems to be unnecessary anyway – this works in Firebug:

    #social-icons a img {
    float: left;
    }

    Thread Starter SandyMcDonald

    (@sandymcdonald)

    I got the solution from an article. It had the instructions to place the code with the custom class in the css file and the other code in the text of the side widget.

    I tried it with the code above. It works but created a problem. The title of the next text box in the side widget appears on the same line as the icons.

    example can be seen here.

    1- How would I put the space back between the icons and the next text box?

    2- Also, how would I add spacing in between the individual images/icons?

    I appreciate your help. I’m new at this. I’m not familiar with Firebug yet.

    Thread Starter SandyMcDonald

    (@sandymcdonald)

    I figured out how to put spacing between the icons by adding this code to the custom css.

    #social-icons a img {
    	float: left;
    	padding-right: 5px;
    }

    To correct the other problem of the title of the next text box in the widget appearing on the same line as the icons, I added the following code to the end of the html code.

    <br></br>

    Is this the best practice?

    It’s okay to use <br><br> , but better not to.

    Try this.

    #social-icons {
    	text-align: center;
    }
    #social-icons > a {
    	display: inline-block;
    }
    #social-icons > a img {
    	padding: 5px;
    }

    Without floating, there is no need to clear float. Adjust padding as appropriate, in addition to that you can also use first-child or last-child to remove the left right padding too.

    Thread Starter SandyMcDonald

    (@sandymcdonald)

    That worked beautifully. Thank you very much for helping.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Icons in Side Widget will not Display Horizontally’ is closed to new replies.