Support » Themes and Templates » Widget Area Horizontal _S

  • Resolved Sambhur

    (@sambhur)


    Hello WordPress community.

    I am currently creating my very own first theme using the starter template _s by Automattic.

    At the moment I am creating a footer widget area which I wants to be horizontal as I want one widget area containing 3 widgets instead of 3 widget areas containing 1 widget. I have registered the widget, but I have no idea how to make the css show the widget area horizontal? Any help? You can see the site at http://dev.sambhur.com/projects/sam13

    Thank you
    Sebastian

Viewing 4 replies - 1 through 4 (of 4 total)
  • First, try putting this in for temporary so that you could see the layout.

    #primary, #secondary { outline: 1px solid red; }

    See, that area is for widget area on the side. Do you want your site 2 columns as in content and sidebar ? If so, adjust max-width on whatever class that controls #primary and float left for both. Register another widget (the so called footer widget) area, and put in after it, and style the widget containers inside it with proper width.

    If in case you only want one 1 column layout, make the #primary and #secondary full width, and style widget container with proper width.

    So, I placed the columns as I want them to be and I outlined them as you asked me to. Now I just need the widgets to be horizontal 🙂

    So, now you have this

    .widget {
    	margin: auto;
    	padding-left: 10px;
    	padding-right: 20px;
    	width: 200px;
    }

    Try changing it to this, and you should get the idea.

    .widget {
    	float: left;
    	padding: 20px 0;
    	width: 33.33%;
    	outline: 1px dotted pink; /*remove later*/
    }

    For more control, there needs to be another outer container for <aside>, so that the side padding can be applied without messing up with the percent in width due to the box model box sizing.

    Some info on box model
    http://reference.sitepoint.com/css/boxmodel

    It worked. Thank you a lot, I can now move on with my project.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Widget Area Horizontal _S’ is closed to new replies.