Need help? Check out our Support site, then


Move widgets bar from bottom to right side

  1. Can I move widgets on a theme from the bottom of the page to the top or side?

    The blog I need help with is teaandbiscuitsblog.com

    The blog I need help with is teaandbiscuitsblog.com.

  2. That is possible to do, but not as easy as it sounds depending on the theme. And there are some pros and cons to doing it, depending on how the theme you're using was designed. I checked http://teaandbiscuitsblog.com/ and I see you are currently using the Illustratr theme. That theme has been designed to place all widgets in a hidden panel just above the footer. Because of that, it's a bit more tricky to move sidebar widgets from one area to another, but it's doable.

    I set up Illustratr on my test blog and played around with it for a while. Here's what I came up with to keep the widgets open and disable the widget trigger (the triangle with the plus sign in it):

    #secondary .widgets-wrapper {
    	display: block !important;
    }
    
    #secondary .widgets-area .widget {
    	opacity: 1 !important;
    }
    
    #secondary:after,
    .widgets-trigger {
    	display: none;
    }

    Next is where the absolute positioning comes in. The following example moves the entire widget container "#secondary" to 210px from the top relative to the "#page" container element. The margin-left, margin-right, left, and right properties work to center the widgets and also match the style of the footer (which has 40px to the right and left of each edge). Extra spacing is added to "#masthead" because when something is absolutely positioned, it is removed from the normal flow of the document and you have to make space for it manually after that. Last, the entire thing is wrapped in an @media rule to limit the change to large screens and let the theme still do what it normally does for small screens such as tablets or mobile phones.

    @media screen and (min-width: 960px) {
    	#page {
    		position: relative;
    	}
    
    	#secondary {
    		position: absolute;
    		top: 210px;
    		margin-left: auto;
    		margin-right: auto;
    		left: 40px;
    		right: 40px;
    	}
    
    	#masthead {
    		padding-bottom: 300px;
    	}
    }

    From here, you could take this example and move the widgets to somewhere else on the page.

    There are some pros and cons to this method. One of the cons is that the widgets would work best if they were a fixed height. Absolute positioning wouldn't really work for variable height widgets in the context of this example.

    Be careful with the number values. If you change the height of any of the widgets, then you will also need to adjust the padding for #masthead and the top value for #secondary.

  3. I would definitely consider moving widgets in the Illustratr theme pretty advanced, so you should also consider selecting a theme that works more like what you want to see for your end goal from the start.

    If you need help looking through themes, let us know here what your site goals are and maybe we can make some helpful theme suggestions for you.

Topic Closed

This topic has been closed to new replies.

About this Topic