Problem with 3 columns on post/static pages

Hi Sabrina, maybe you can use the following information. I confirm that the 3 column option is not working properly or at least not doing what I expect it to do.

I want for my own website to have on all pages 3 columns, not only on post pages. Also I can imagine that other people want 3 columns on every page, except for the home page. Or instead of 3 columns, you might want 2 columns. If one of these situations apply to you, read on.

To achieve this, several files have to be changed, but only simple changes. First open /root/wp-content/themes/whispy/header.php and at the end of the file add the code

<?php $whispyOptions = get_option('whispy_theme_settings' );

	if ( $whispyOptions['colspost-post'] == '3' && !is_front_page() || $whispyOptions['colspost-index'] == '3' && is_front_page() ) { ?>

		<div id="container" class="three-column">
			<?php get_template_part( 'sidebar', 'left' );

	} else { ?> 

		<div id="container">

	<?php } ?>

Save the file and now repeat the following instruction for the files archive.php, author.php, category.php, index.php, page.php, search.php, single.php and tag.php in the directory /root/wp-content/themes/whispy/. In those files, delete the following code:
<div id="container">.

Now do the above instruction also for the file home.php (in the same directory) and also delete the following code:

$whispyOptions = get_option('whispy_theme_settings' );

if( $whispyOptions['colspost-index'] == '3' && is_home() ) get_template_part( 'threecolumn-page' );

else
{

which was on top of the page and also delete the small character } at the bottom. Of course you saved all the files after modifying them and now upload them to your server. You can now use the setting ‘Posts index page layout’ to specify the number of columns on your home page and ‘Posts layout’ to specify the number of columns on all other pages. These settings you find when you log into your WordPress website, click the tab ‘Display’ (I hope this translation is correct) and then click on ‘Whispy options’.

The perfectionist that I’m wants me to also rename the text ‘Posts index page layout’ and ‘Posts layout’, so here are the instructions. Open the file whispy_theme_menu.php in the same directory as the other files mentioned above are in and adjust line 66 and 77 to whatever you like!

As far as the alignment of widgets I did not check yet, but I might do so when I run into problems myself.

Have a nice weekend!

Ow by the way, note that when you make adjustments to the theme that these adjustments will be overwritten (gone) when you update the theme files!

3 colmun issue is fixed.

I still have an existing issue which nobody responded to.

Also the alignment of the widgets on the left sidebar are
1. either left aligned and not centered or
2. there isn’t enough space to match the right sidebar.

Things in the right sidebar are pretty proportional being centered and having white space on the left and right of the right sidebar.

I want the left sidebar to look identical to the right sidebar with having white space on both the left and right side of the left sidebar and with the items in it being centered.

Please advise on how to fix this problem.

I also downloaded this theme on 3/13/2013 and installed it so it’s a new download with the latest updates to make that clear.

Thank you!!!! Hope to hear from somebody soon!

PLEASE HELP!!! PLEASE HELP!!!

Now I have another problem I have embedded ustram live video and chat feature using the below code:

As you can see I have one page where there is a right sidebar you can see that things lined up and look good, but obviously the right sidebar is in the way which I don’t want on this specific page.

https://blog.sublimedesigners.com/live-stream-test-with-sidebar/

Now I created a second page where there is a single column and no sidebar when I do that it throws my stuff to the right past the content area….

https://blog.sublimedesigners.com/live-stream-test-no-sidebar/

I have also specified to align the table to the left via html, css, and other sources it doesn’t fix the problem

The funny thing is when I right aligned it goes all the way to the left but gets thrown off the left side of the page content area. Please keep in mind I have tried to center it, left align it, and right align it doesn’t solve the problem.

https://blog.sublimedesigners.com/live-stream-test-right-aligned/

The only thing that works is if I use the default template and allow it to have the right sidebar, but obviously I don’t want that on top of my on page copy I want a single column but with everything to be left aligned properly only on this specific page though.

I still want to utilize 3 and 2 columns on other pages. Thanks and I hope somebody can help me with this it’s rather frustrating!

PLEASE HELP!!! PLEASE HELP!!!

New Findings: Still have a major problem, but here is what I did….

I went into the Whispy style.css and went to line 70 I believe and found this:
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}

After I modified this to the following below from 100% to 69%:

#container {
float: left;
margin: 0 -240px 0 0;
width: 69%;
}

After doing this the page that live streaming page looked perfect, but all other pages on the entire blog where broken. What can I do to make this work. Thank you!!!

Ok I found out where to force the one column left aligned…but here is the problem

.one-column #content {
float: left;
margin: 0 auto;
width: 640px;
}

I want the comments/reply area below on the bottom of the page to be centered. Please advise on how to do this. Thank you.

Here is the page in question:

https://blog.sublimedesigners.com/live-stream-test-no-sidebar/

I’m not sure what exactly you would like to center, but you could try to add the following to your Whispy style.css:

.one-column #comments {
text-align: center;
}

I hope that solves your problem. I’m sorry, I don’t have much time this weekend.

No that has nothing to do with what I wanted. Please read everything and provide me an answer that works. Clearly since you didn’t have time you overlooked most of everything I said and didn’t provide an answer that was of any help at all. Please read everything before responding. Thank you!!!

I want the left sidebar to look identical to the right sidebar with having white space on both the left and right side of the left sidebar and with the items in it being centered.

This can be realised by the following code in your Whispy style.css:

On 112 replace the old code by:

#left-column {
    width: 220px;
    float: left;
    margin-left: 20px;
}

On line 107 replace the old code by:

.three-column #content {
    margin: 0 auto;
    width: 460px;
    float: left;
}

I don’t see any page with a live stream anymore is that correct?

To make the text in the left sidebar left aligned, remove this code: text-align: center; from style.css line 1246 with #left-column .widget-area ul ul li { ... }.

Let me know if you have more issues open.

The left alignment issues with the left sidebar have been corrected and we now have the desired result that we wanted. Thank you very much Tim.

You can see the change at https://blog.sublimedesigners.com/

Now in terms of the live streaming I think I have fixed this myself already which is why I deleted the test pages.

https://blog.sublimedesigners.com/sp-live-stream/

Is there anything that you could recommend to close up the gaps between the live chat and video? If not that is fine..the only other thing that kind of bothers me is the fact that

old code:

.one-column #content {
float: left;
margin: 0 auto;
width: 640px;
}

has been replaced with this below:

.one-column #content {
margin: 0 auto;
width: 930px;
}

In order to have things on the actual page without getting thrown either to far left and or right.

Now the part that kind of bothers me which only used to be 640 wide is the comment section below the live steam which seems to have inherited the content area of the page which has been changed to 930.

Is there anyway to keep 930 for the content area, but retain 640 for the comment area it looks awkward as is spanning the entire content area/page from left to right (930). Please let me know Tim. Thank you for your help it’s greatly appreciated.

To resize the comment area adjust your Whispy style.css again, line 993 replace the old code by:

#comments {
    clear: both;
    padding: 0 145px; /* Half the difference between 930 and 640 */
    width: 640px;
}

Then you might also want to adjust the border line at the top of the comment section. I suggest the following: replace on line 1117 #respond { border-top: ... by #respond { padding: 0 20px; border: ....
That makes sure the border is on every side of the comment area and adds a padding to keep the text away from the line.

To make the spacing between the video and the chat you can do the following: in Whispy style.css change on line 568 padding: 6px 24px to padding: 6px 0;. Then where the iframes of the video and chat are created you also have to adjust some code. For the iframe of the video in the style attribute add margin: 0 0 0 20px; and in the style attribute of the iframe of the chat add margin: 0 20px 0 0;. That should do the trick!

Do you see how you provided the information for line 993 can you please provide the information in detail like that for lines 1117, 568, and any other lines you recommended. I am new to css and don’t quite understand it. Furthermore in wordpress backend it doesn’t show the line number so I use Mozilla Firefox to find for example (#comments {) to locate the area that needs to be changed. It makes it much easier for me and I really do appreciate your help. Thank you Tim ??

Sorry, didn’t know that. Replace:

#comments {
    clear: both;
}

by:

#comments {
    clear: both;
    padding: 0 145px; /* Half the difference between 930 and 640 */
    width: 640px;
}

Cheers!

Is that for Lines 1117 and 568?

No, what was only for line 993.
For line 1117:
Replace:

#respond {
	border-top: 1px solid #e7e7e7;
	margin: 24px 0;
	overflow: hidden;
	position: relative;
}

by:

#respond {
	padding: 0 20px;
	border: 1px solid #e7e7e7;
	margin: 24px 0;
	overflow: hidden;
	position: relative;
}

For line 568:
Replace:

#content tr td {
        border-top: 1px solid #e7e7e7;
	padding: 6px 24px;
}

by:

#content tr td {
	border-top: 1px solid #e7e7e7;
	padding: 6px 0px;
}

But when you do this last replacement (for reducing the space between video and chat) you also have to modify the file where these objects (iframes) are included. There you have to do this:

For the iframe of the video in the style attribute add margin: 0 0 0 20px; and in the style attribute of the iframe of the chat add margin: 0 20px 0 0;.

This last part might be difficult if you don’t know html or css, so may be just leave the space between the video and the chat (then you also don’t have to do the replacement for line 568.