How to make it 2 columns?

Any questions about styling and customising the layout, changing the number of columns, changing the number of sliding images and so on.

Re: How to make it 2 columns?

Postby hijack » Sat Oct 15, 2011 9:15 pm

Okay I have done everything in the last post and still the widget showed up in the wp widget panel.

I removed the entire sidebar2 widget
Code: Select all
<div id="sidebar2" class="widget-area" role="complementary">
         <ul class="xoxo">
         <?php if ( ! dynamic_sidebar( 'secondary-widget-area' ) ) : ?>
            <li class="widget-container">
               <h3 class="widget-title"><?php _e( 'Categories', 'slidingdoor' ); ?></h3>
               <ul>
                  <?php
                  wp_list_categories(array('title_li' => ''));
                  ?>
               </ul>
            </li>
         <?php endif;
         ?>
      </ul>
      </div><!-- #secondary .widget-area -->


so now your sidebar.php will look like this
Code: Select all
<?php
/**
 * The Sidebar containing the primary and secondary widget areas.
 *
 * @package WordPress
 * @subpackage Sliding_Door
 * @since Sliding Door 1.0
 */
?>
   <div id="sidebar1" class="widget-area" role="complementary">
      <ul class="xoxo">

<?php
   /* When we call the dynamic_sidebar() function, it'll spit out
    * the widgets for that widget area. If it instead returns false,
    * then the sidebar simply doesn't exist, so we'll hard-code in
    * some default sidebar stuff just in case.
    */
   if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>
   
   <li id="search" class="widget-container widget_search">
      <?php get_search_form(); ?>
   </li>

   <li id="archives" class="widget-container">
      <h3 class="widget-title"><?php _e( 'Archives', 'slidingdoor' ); ?></h3>
            
      <ul>
         <?php wp_get_archives( 'type=monthly' ); ?>
      </ul>
   </li>

   <li id="meta" class="widget-container">
      <h3 class="widget-title"><?php _e( 'Meta', 'slidingdoor' ); ?></h3>
      <ul>
         <?php wp_register(); ?>
         <li><?php wp_loginout(); ?></li>
         <?php wp_meta(); ?>
      </ul>
   </li>
   <?php endif; // end primary widget area
   ?>
   </ul>
   </div><!-- #primary .widget-area -->


Now the widget is completely removed .
hijack
I'm a regular
 
Posts: 6
Joined: Thu Oct 13, 2011 2:53 pm

Re: How to make it 2 columns?

Postby sunra » Mon Jan 02, 2012 5:30 pm

there seem to be 'layout' code in the css stylesheet for two column 'left' layout, but i can't figure out how to make it work as such
sunra
I'm new here
 
Posts: 2
Joined: Sun Jan 01, 2012 10:14 pm

Re: How to make it 2 columns?

Postby natefarr » Mon Feb 20, 2012 9:05 am

Hi,

I'm stuck. All my pages are 3 column but my front/home page has a problem. the post content spills over to the right sidebar. it doesn't happen in other pages.

Can anyone advise please?

Nathan
natefarr
I'm new here
 
Posts: 2
Joined: Sun Feb 19, 2012 4:47 pm

Re: How to make it 2 columns?

Postby Maggymae » Thu Mar 22, 2012 1:12 am

there seem to be 'layout' code in the css stylesheet for two column 'left' layout, but i can't figure out how to make it work as such


I can't figure it out either. Pulling my hair out, I have tried everything suggested on the forums.

Is it possible for someone to post the entire css with the content on the left and a widget area on the right. It would be greatly appreciated.
I managed to remove the widget area, and managed to get the sidebar1 to the right but there is a big blank space where the left column items should be --
I can't figure out how all the layout options are in the CSS and they aren't commented out but aren't being used. I am too stupid for CSS.
Maggymae
I'm new here
 
Posts: 3
Joined: Thu Mar 22, 2012 12:28 am

Re: How to make it 2 columns?

Postby Maggymae » Fri Mar 23, 2012 3:45 pm

Still dazed and confused.
I restored everything back to square one
I managed to figure out that I should probably grab the CSS from the theme's css and made a child theme using the 2 column layout.
Doesn't work... still have the 3 columns.
I would love to use this theme but I guess I can't since my friend wants 2 columns. I am so disappointed.
I have viewed numerous examples in the showcase and tried to implement the changes I see in their CSS- still 3 columns- no matter what.
If I REMOVE the code from the sidebar.php file there is BLANK area where a column should be.
I have tried to follow each and every suggestion.

2 columns, sidebar on right... why is it so hard for me?

Help would be greatly appreciated.
Maggymae
I'm new here
 
Posts: 3
Joined: Thu Mar 22, 2012 12:28 am

Re: How to make it 2 columns?

Postby Julie » Sun May 27, 2012 11:47 pm

Thank-you Molu, for the information.
Julie
I'm new here
 
Posts: 2
Joined: Sun May 27, 2012 11:04 pm

Re: How to make it 2 columns?

Postby rocksIt » Sat Jun 16, 2012 11:28 am

Maggymae wrote:Still dazed and confused.
I restored everything back to square one
I managed to figure out that I should probably grab the CSS from the theme's css and made a child theme using the 2 column layout.
Doesn't work... still have the 3 columns.
I would love to use this theme but I guess I can't since my friend wants 2 columns. I am so disappointed.
I have viewed numerous examples in the showcase and tried to implement the changes I see in their CSS- still 3 columns- no matter what.
If I REMOVE the code from the sidebar.php file there is BLANK area where a column should be.
I have tried to follow each and every suggestion.

2 columns, sidebar on right... why is it so hard for me?

Help would be greatly appreciated.


The thing is, Maggymae, the instructions that molu gave were for a layout where the sidebar is on the LEFT, and you want the sidebar on the RIGHT. I have just finished modifying this theme for a 2 column with the sidebar on the right and have made an illustrated walkthru to add here to go with molu's.

First, what molu did works very well for the 2 column layout with the sidebar on the left, but it won't work for the 2 column layout with the sidebar on the right without a few adjustments and an extra step or two. (The images below will explain better)

Please note that my modifications are for a 2 column layout with the sidebar on the RIGHT
(Always remember to back up any of the files that you are working with so that you can quickly restore them if something goes wrong. It only takes highlighting the code and pasting it to notepad while you're working with the original)

1) Make sure that you do not have any widgets in the primary sidebar (sidebar1) which is the sidebar on the left. (Even when you have no widgets in the primary sidebar, there will be 2 or 3 widgets showing up anyway because the sidebar.php has a function that specifically calls a dynamic sidebar which happens to be the primary sidebar. If there are no widgets found for the primary sidebar, then it will hard code in a few widgets (in this case, you are probably seeing the search bar, archives, and the meta widgets. No problem, we will remove that function when we remove the primary sidebar in the sidebar.php. step:

Go to Appearance > editor > sidebar.php.
Delete the coding that is highlighted below:

Image

What this is doing is removing the primary sidebar (or sidebar1, the sidebar on the left) so that there is room to move the content area over in it's place and make it wider. It is also removing the function to "force code" widgets in that space when none are found.

When you finish the above step, your sidebar.php code should look like the image below:

Image

Then make sure to click "Update File" before moving on to the next step.

2) Select the Stylesheet.css and scroll down to where you see "LAYOUT: Two Columns" as highlighted in the following image.

**#1** Change the #container left margin from 220px to 20px. This is the step that will allow the content to move over to the left. The 220px margin still holds space there even after the sidebar has been removed, so this step is important or you will find your content entries down at the bottom of the page.

**#2** The #content didn't have a width property because it took up the space that was left over after the margins and sidebar widths were taken. Now that these have changed, you need to give it a width. Add the line "width: 630px;" as shown below.

**#3** I went ahead and removed the #sidebar1 id here also just to keep the coding clean and because of the width and float properties.

**#4** If you want to leave the remaining (right) sidebar's width the same size as it is now (182px) then you don't have to change anything here. I wanted it wider in order to be more versatile and so changed it to 250px.

Image

While you're still in the Stylesheet.css, scroll further down until you see the "Main Theme Structure" and delete the position property for #wrapper as shown highlighted below:

Image

Make sure that you click "Update File" and that's it! I hope it helps!
(I will try and do a more formal instruction page for this layout when I get my site redesigned and add the link in this thread when it's done)
rocksIt
I'm new here
 
Posts: 3
Joined: Sat Jun 16, 2012 9:46 am

Re: How to make it 2 columns?

Postby rocksIt » Sun Jun 17, 2012 4:41 am

I forgot to mention that if you're using a pattern background, you may also need to go in and add "repeat-x" to the background property's value like below.
(and yeah, I know.. but it's fast and easy and doesn't hurt anything ;) )

Image
rocksIt
I'm new here
 
Posts: 3
Joined: Sat Jun 16, 2012 9:46 am

Re: How to make it 2 columns?

Postby jelle123 » Tue Jul 31, 2012 5:05 pm

Can someone give me (and other slidingdoor 3.0 users) new instructions? I get errors after updating to 3.0 and the codes from sidebar.php are changed.
I managed it to remove the right column (with the categories) but i can not get the content to full width, i get a empty right column (only the categories are disappeared). Can anyone help me?
jelle123
I'm new here
 
Posts: 3
Joined: Tue Jul 31, 2012 4:56 pm

Re: How to make it 2 columns?

Postby ckleiman » Sun Aug 19, 2012 8:27 pm

Dear rocksIt,

Followed your directions exactly. Left sidebar is gone and content moved to left. The problem is content container area doesn't expand to the 630 px size. It remains the same size as before leaving space between its right margin and right sidebar. What do do? My URLhttp://asianproav.com/backup/wordpress/?page_id=150
ckleiman
I'm new here
 
Posts: 3
Joined: Sun Aug 19, 2012 8:22 pm

PreviousNext

Return to Advanced - Customising the theme