WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Icons in Side Widget will not Display Horizontally (8 posts)

  1. SandyMcDonald
    Member
    Posted 1 year ago #

    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="http://cupcakeable.com/wp-content/uploads/2013/02/roundTealFacebook.png"
      width="50"
     title="Join My Facebook Page" alt="Join My Facebook Page" /></a>
    
    <a href="http://www.twitter.com/misscupcakeable"><img
     src="http://cupcakeable.com/wp-content/uploads/2013/02/RoundTealTwitter.png"
     width="50"
     title="Follow Me on Twitter" alt="Follow Me on Twitter" /></a>
    
    <a href="http://www.pinterest.com/misscupcakeable"><img
     src="http://cupcakeable.com/wp-content/uploads/2013/02/RoundTealPinterest.png"
     width="50"
     title="Follow Me on Pinterest" alt="Follow Me on Pinterest" /></a>
    
    <a href="http://www.flickr.com/photos/cupcakeable/"><img
     src="http://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.

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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.

  3. SandyMcDonald
    Member
    Posted 1 year ago #

    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?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Where is the class "custom"? It seems to be unnecessary anyway - this works in Firebug:

    #social-icons a img {
    float: left;
    }
  5. SandyMcDonald
    Member
    Posted 1 year ago #

    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.

  6. SandyMcDonald
    Member
    Posted 1 year ago #

    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?

  7. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  8. SandyMcDonald
    Member
    Posted 1 year ago #

    That worked beautifully. Thank you very much for helping.

Topic Closed

This topic has been closed to new replies.

About this Topic