Theme Spun–Put side bar visible on the left or right of Home

Can you provide links to images illustrating the layout you want, for each page that has a unique layout?

Thank you Andrew for the reply. So I want this theme to look like my previous blog which is

https://aspirendream.wordpress.com/

So people can see my widgets on the sidebar especially the subscribe bar.

Do you think it’s doable?

You can do it and the theme will need a lot of modifications, how familiar are you with CSS and maybe HTML?

I’m somewhat familiar but might as well say I’m totally clueless. I have been searching for the whole day trying to figure it out, but I don’t think I can only use the column plug-in.

Would you be able to guide me through it?

I don’t think I’ll have enough time to do that. In general here’s what you need to do:

1. Display block the sidebar
2. Display none the “+” (plus) button
3. Float right the primary div
4. Float left the sidebar div
5. Give the primary div something like 60% width
6. Give the sidebar div something like 30% width

That’s actually a really clear process. Thank you so much for your help!

Do those modifications in either a Child Theme style.css file or Custom CSS plugin

Thank you!

Gah, I need quick help. I’ve tried using Custom CSS and tried typing the following to block/hide the sidebar but no luck.
Am I doing something wrong?

#sidebar{display:none;}

Also, how can I find which one is the + button?

You want to display block the sidebar

Also, how can I find which one is the + button?

Use the Firebug tool in Firefox to help you understand what HTML/ CSS you need to target. Right click on the + button and select “Inspect element”.

Andrew – thanks for outlining the steps, that was helpful.

Claudia – I wanted to do the same thing, and it took me a minute to figure out the coding, so I thought I should share:

.page #primary {
	float: left;
	width: 70%;
}
#secondary {
	clear: right;
	display: block;
	padding: 50px 0;
	float: right;
	width: 30%;
}
.sidebar-link {
	display: none;
}
.page .hentry {
	padding: 0px;
	width: 100%;
}
.widget-column {
	width: 100%;
}
.one.widget-column {
	float: none;
	margin: 0 0 0 40px;
}

Thank you so much!!! You don’t know how much I have been struggling to figure this out. I can’t thank you enough. I’ll try it right now.

Hi there,
So I just tried it and it looks good except the side bar is still at the bottom. I was wondering if there was a easier way to show only 2 rows of 3 circles on each row and on the side have the sidebar there.

Thank you!

I think @kmolinanauert meant to recommend this:

.blog #primary {
	float: left;
	width: 70%;
}

.blog #secondary {
	clear: right;
	display: block;
	padding: 50px 0;
	float: right;
	width: 30%;
}

.blog .sidebar-link {
	display: none;
}

.blog .widget-column {
	width: 100%;
}

.blog .one.widget-column {
	float: none;
	margin: 0 0 0 40px;
}

how can I make the header font bigger?

The title:

.site-title {
 /* Original 24px */
 font-size: 25px;
}

The navigation

.main-navigation {
 /* Original 14px */
 font-size: 15px;
}