Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to make widgets align side by side
- This topic has 13 replies, 2 voices, and was last updated 10 years, 3 months ago by Brad Dalton.
-
AuthorPosts
-
April 30, 2013 at 11:02 pm #38681john gronleyMember
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
April 30, 2013 at 11:09 pm #38683Brad DaltonParticipantYou 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:<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" 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" width="128" height="128" /></a>
May 1, 2013 at 12:28 am #38690john gronleyMemberThanks 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
May 1, 2013 at 12:30 am #38692Brad DaltonParticipantI 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.
May 1, 2013 at 12:34 am #38694john gronleyMemberI 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!
September 10, 2013 at 5:20 pm #61806john gronleyMemberHey 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
September 10, 2013 at 6:00 pm #61816john gronleyMemberI got it by adding this to the style sheet
#header .widget-area aside {
display: inline-block;September 10, 2013 at 11:58 pm #61841Brad DaltonParticipantOctober 10, 2013 at 8:11 pm #66208john gronleyMemberHey 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
October 10, 2013 at 8:18 pm #66210Brad DaltonParticipantI asked css tricks this question last week and still haven't worked it out.
October 10, 2013 at 8:35 pm #66213john gronleyMemberOK 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
October 11, 2013 at 12:00 am #66224Brad DaltonParticipantI 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.
January 8, 2014 at 6:28 pm #84094john gronleyMemberBrad 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;}January 9, 2014 at 10:45 pm #84315Brad DaltonParticipant -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.