How to make widgets align side by side

Community Forums Forums Design Tips and Tricks How to make widgets align side by side

This topic is: not resolved

This topic contains 13 replies, has 2 voices, and was last updated by  braddalton 7 months, 2 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #38681

    john gronley
    Participant
    Post count: 124

    Hello;

    If I add two image widgets to an upper header widget they will stack on top of each other; is there some code that I can add to a site that will allow me to get these images side by side?

    Thanks,

    John

    #38683

    braddalton
    Participant
    Post count: 9270

    You can use the native media function to add 2 images side by side by selecting align none and then add the HTML to a text widget.
    Example:
    [html]
    <a href="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/04/package_gear_128.png"><img class="alignnone size-full wp-image-38150" alt="package_gear_128" src="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/04/package_gear_128.png&quot; width="128" height="128" /></a> <a href="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/04/shield_128.png"><img class="alignnone size-full wp-image-38149" alt="shield_128" src="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/04/shield_128.png&quot; width="128" height="128" /></a>
    [/html]


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #38690

    john gronley
    Participant
    Post count: 124

    Thanks Brad; I must confess I am ignorant of the native media function? Is there a site I can go and learn about this?

    Thanks,

    John

    #38692

    braddalton
    Participant
    Post count: 9270

    I just added 2 existing images from the media library side by side in a new post draft.

    Really simple. none for alignment.

    Can also add custom links.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #38694

    john gronley
    Participant
    Post count: 124

    I think I got it in the image widget select “2″ and this does it. Thanks this will help for loading up the header with buttons and logos for several of my clients!

    Thanks again!

    #61806

    john gronley
    Participant
    Post count: 124

    Hey Brad I am trying to get an image to the left of the text widget in the upper right header. I tried the code above but couldn’t manipulate it to get a text widget and image side by side. Any ideas? http://nelsonazrealestate.com/

    Thanks,

    John

    #61816

    john gronley
    Participant
    Post count: 124

    I got it by adding this to the style sheet

    #header .widget-area aside {
    display: inline-block;

    #61841

    braddalton
    Participant
    Post count: 9270

    OK great.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #66208

    john gronley
    Participant
    Post count: 124

    Hey Brad;

    How would I use the code to get two widgets side by side in Agentpress for the widget place-holder of the top-search? I tried to use .widget-area aside {
    display: inline-block;
    But it didn’t seem to work for this widget area? http://chandler-homesfor-sale.com/category/homes-for-sale/

    Thanks,

    John

    • This reply was modified 10 months, 2 weeks ago by  john gronley.
    • This reply was modified 10 months, 2 weeks ago by  john gronley.
    #66210

    braddalton
    Participant
    Post count: 9270

    I asked css tricks this question last week and still haven’t worked it out.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #66213

    john gronley
    Participant
    Post count: 124

    OK well I learned how to get three widgets in the header from this link, thanks! I am not too familiar with the nomenclature of CSS but if we added a declarative statement to the style sheet for the top search…would that be the issue? I noticed there is no #top-search . widget-area

    #66224

    braddalton
    Participant
    Post count: 9270

    I did try different code and worked hard on this for some time but couldn’t work it out.

    I’m sure it will come to me at some stage as everything else eventually has.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #84094

    john gronley
    Participant
    Post count: 124

    Brad I got this code from a fellow today this might work in the body and not only the header. I also joined an online CSS class called Treehouse for building responsive themes.

    #r_sidebar ul li a {
    display: block;
    color: #000000;
    text-decoration: none;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    }
    #r_sidebar ul li a.inline{display:inline;}
    #r_sidebar ul li a.inline img{padding:10px 10px 0 0;}

    #84315

    braddalton
    Participant
    Post count: 9270

    Thanks John


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

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

You must be logged in to reply to this topic.