WordPress.org

Ready to get started?Download WordPress

Forums

Whispy
Problem with 3 columns on post/static pages (24 posts)

  1. sabrinadeceault
    Member
    Posted 1 year ago #

    The 3 column option isn't working on my blog http://blog.sublimedesigners.com/. Let me explain why it works on the home page, but not on the post/static pages please advise on how to fix this problem.

    Also the alignment of the widgets on the left sidebar are right 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 these two problems.

    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.

  2. RoordaTim
    Member
    Posted 1 year ago #

    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. sabrinadeceault
    Member
    Posted 1 year ago #

    3 colmun issue is fixed.

    I still have an existing issue which nobody responded to.

  4. sabrinadeceault
    Member
    Posted 1 year ago #

    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!

  5. sabrinadeceault
    Member
    Posted 1 year ago #

    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.

    http://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....

    http://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.

    http://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!!!

  6. sabrinadeceault
    Member
    Posted 1 year ago #

    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!!!

  7. sabrinadeceault
    Member
    Posted 1 year ago #

    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:

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

  8. RoordaTim
    Member
    Posted 1 year ago #

    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.

  9. sabrinadeceault
    Member
    Posted 1 year ago #

    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!!!

  10. RoordaTim
    Member
    Posted 1 year ago #

    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.

  11. sabrinadeceault
    Member
    Posted 1 year ago #

    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 http://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.

    http://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.

  12. RoordaTim
    Member
    Posted 1 year ago #

    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!

  13. sabrinadeceault
    Member
    Posted 1 year ago #

    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 :)

  14. RoordaTim
    Member
    Posted 1 year ago #

    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!

  15. sabrinadeceault
    Member
    Posted 1 year ago #

    Is that for Lines 1117 and 568?

  16. RoordaTim
    Member
    Posted 1 year ago #

    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.

  17. sabrinadeceault
    Member
    Posted 1 year ago #

    Now that was a great answer easy as pie with it laid out like this I really appreciate it Tim.

    Say for example I ever have to upgrade wordpress will that mess up the whispy theme from all the CSS and other changes that have been made? If so what should I do so I can replace everything after upgrading. I just don't want to loose anything and if I run into a problem in the future I want to be able to replace anything that was lost, overwritten or whatever may happen.

    I have a friend that had a custom theme made and when he upgraded to the new version of wordpress it ruined everything so I don't want to be stuck in that same position if you know what I mean!

  18. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Upgrading WordPress is something you want to do. Otherwise you risk your data and website to hackers.

    What you may not want to do is update the theme if you've made changes to the theme's files. Then you'll lose your changes.

    If you've made some CSS changes, get them out of the theme's files and put them in a Custom CSS Manager plugin.

    If it's more than CSS you've changed, create a Child Theme to hold those modifications instead.

    Then you'll be able to update the theme without losing your changes.

  19. RoordaTim
    Member
    Posted 1 year ago #

    I agree with Andrew, updating WordPress you should always do. There's a difference between updating WordPress and updating the Whispy team. When you update WordPress, the Whispy theme is not changed and your modifications remain. When updating the Whispy theme all your modifications are overwritten (gone). Updating the Whispy team is not necessary to do, unless the WordPress update requires theme changes (due to adding/removing/modifying functions that the theme uses). This generally doesn't happen often and when it does, it will be explained in the WordPress changelog. So don't worry, keep on updating WordPress, but not the Whispy team.

    It is also possible to create a child theme and/or use plugins, but I don't think it is really necessary in this case.

  20. There's a difference between updating WordPress and updating the Whispy team. When you update WordPress, the Whispy theme is not changed and your modifications remain. When updating the Whispy theme all your modifications are overwritten (gone).

    So don't worry, keep on updating WordPress, but not the Whispy team.

    No. That's really poor advice and I know you mean well. ;)

    I tell you three times: You always always always want to update your themes and plugins as well for the exact same reasons you want to keep WordPress up-to-date.

    The theme/plugin author knows more about the software they've written than you or I do and when they release an update it's usually because a bug or occasionally an exploit has been found and remediated.

    We ask people to make child themes because the majority of the customizations are CSS based. If you need to make changes to the theme's PHP then you can normally do so by editing a copy of the theme's template file into the child theme directory and making your changes there.

    That should absolutely work for header.php and style.css file modifications as above. If you do use a child theme then you'll have a more supportable installation as well as a means to easily identify what/where you made changes if something stops working.

  21. Chip Bennett
    Theme Review Admin
    Posted 1 year ago #

    Say for example I ever have to upgrade wordpress will that mess up the whispy theme from all the CSS and other changes that have been made?

    Updating WordPress itself (something you always want to do, as soon as an update is available) will have no impact whatsoever on installed Themes or Plugins. When WordPress core updates, the update doesn't touch the wp-content directory where Themes, Plugins, and uploaded user content are stored.

    If so what should I do so I can replace everything after upgrading. I just don't want to loose anything and if I run into a problem in the future I want to be able to replace anything that was lost, overwritten or whatever may happen.

    That's only a potential concern if you are updating the Theme itself.

    The way to avoid that problem is to ensure that you don't modify the Theme itself, but instead use a Child Theme (or, if the changes are CSS-only, you can use a custom CSS Plugin, such as the custom CSS module of the JetPack Plugin).

    I have a friend that had a custom theme made and when he upgraded to the new version of wordpress it ruined everything so I don't want to be stuck in that same position if you know what I mean!

    Very likely, the issue there was that the Theme itself wasn't well-coded. (All of us who have ever developed a custom Theme have been there before.) But you're using a Theme from the Theme directory; all Themes in the Theme directory should be safe to use with updated versions of WordPress.

    I strongly encourage you to update your Themes and Plugins whenever updates are available. The developers release updates to add new features, to support changes to WordPress core, and to fix bugs and potential security vulnerabilities - though any Theme added to the Theme directory in the past couple of years should be relatively free of security vulnerabilities, thanks to the review each Theme must undergo before being approved.

  22. RoordaTim
    Member
    Posted 1 year ago #

    No. That's really poor advice and I know you mean well. ;)

    Thanks for your feedback, you are right. I'll start using child themes from now on ;).

  23. sabrinadeceault
    Member
    Posted 1 year ago #

    Thank you Tim and everybody who tried to help I appreciate it. Tim do you have any email address in case I have further questions or should I just leave this forum post open instead of marking it as closed for future use, or should I close it and open a new one in the future as needed?

    [ Moderator note: Please refrain from asking people for their email address. Support is offered via the forum and not via email. ]

    Thanks again Tim!

  24. RoordaTim
    Member
    Posted 1 year ago #

    You are welcome Sabrina! I suggest to mark this topic as closed and open a new one when needed, but I'm not a moderator of this forum, so may be I'm wrong.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic