Move menu/widget bar from right side of posts to left

  • Unknown's avatar
    naropatlc · Member ·

    My menu/widget bar is currently on the right of my blog posts and I would like to move it to the left. It is for some reason located on the left on my other pages, “Breathe” and “Root & Connect”. It should be on the left on my blog page as well — I realize I need to override theme settings for this and would like CSS code if it’s possible!

    Thank you so much.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    To move the sidebar from the right side to the left in the Capoverso theme, you can adjust the float values for the main content area container and the widget area container. Here is a basic example:

    .content-area {
	float: right;
}

.site-content .widget-area {
	float: left;
}

    When you do that, the spacing and widths look a little off and those widths are different depending on the size of the browser (for example using an iPad which has a small width). You can use media queries to make changes based on the width of the viewer’s screen size (i.e. a smaller sidebar column on a tablet-sized device). Media queries are how to accomplish this.

    Here is a help page about how media queries work if you are interested:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    Here is an example I came up with that moves the sidebar from the right to the left and also adds some padding and adjust widths depending on the viewer’s browser/device size by using media queries:

    @media screen and ( min-width: 768px ) {
	.content-area {
		float: right;
	}

	.site-content .widget-area {
		float: left;
		padding-left: 15px;
		width: 170px;
	}
}
@media screen and ( min-width: 1008px ) {
	.site-content .widget-area {
		width: 220px;
	}
}
  • Unknown's avatar
    naropatlc · Member ·

    This is great! It worked. Thank you so much for your help.

    I have another question that I may post as a separate topic, but just in case you can help: My site had a tagline that showed up on other themes (which was a quote) that is not showing up anywhere on the current theme. I’m wondering if it’s possible to insert some sort of textbox, either to the right of the current site title (“The Learning Commons, Naropa University”) or along the left column with the widgets so we can have this quote somewhere on the site.

    Thank you for your help!

  • Unknown's avatar
    designsimply · Member ·

    Not every theme displays the tagline—it’s up to each theme author whether or not to show it. Either way, you can use custom CSS to add one. There are a couple different ways to do it in the Capoverso theme.

    One way might be to set the site-description display property to block: 

    .site-description {
	display: block;
	padding-left: 15px;
}

    Another might be to use the “content” property in CSS to add text before or after an element:

    .site-title:after {
	content: "The Learning Commons, Naropa University";
	color: #666;
	display: block;
	font-size: 15px;
	letter-spacing: 0;
	padding-top: 1em;
}
  • The topic ‘Move menu/widget bar from right side of posts to left’ is closed to new replies.