Full width column layout implemented?

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

Full width column layout implemented?

Postby ltu » Tue Aug 09, 2011 3:33 pm

I was going through the style.css file and noticed this snipped of code:

Code: Select all
/*
LAYOUT: Full width, no sidebar
DESCRIPTION: Full width content with no sidebar; used for attachment pages
*/

.single-attachment #content {
   margin: 0 auto;
   width: 900px;
}


I tried to create a page with the One column, no sidebar template and it is leaving a huge 200 pixel wide column on the left hand side. For me, this looks terrible. I tried swapping the sidebar in this thread, but it's not working for me. I was wondering if the full width template was implemented or suggestions on how to make it work for me.

TIA!
LTU
ltu
I'm a regular
 
Posts: 8
Joined: Tue Aug 09, 2011 2:56 am

Re: Full width column layout implemented?

Postby ltu » Tue Aug 09, 2011 11:31 pm

Ok, so maybe I'm a bit impatient to get this figured out. While waiting, I figured out how to add another template, which I named Full Layout, No Sidebar and managed to get it added to the list of editable theme files by copying the Single Column, no sidebar file and making some slight changes to the top part of the file. It now looks like this:
Code: Select all
<?php
/**
 * Template Name: Full Layout, No Sidebar
 *
 * A custom page template that utilizes the entire width without sidebar.
 *
 * The "Template Name:" bit above allows this to be selectable
 * from a dropdown menu on the edit page screen.
 *
 * @package WordPress
 * @subpackage Sliding_Door
 * @since Sliding Door 1.0
 */

get_header(); ?>

      <div id="container" class="single-attachment">
         <div id="content" role="main">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
               <h1 class="entry-title"><?php the_title(); ?></h1>
               <div class="entry-content">
                  <?php the_content(); ?>
                  <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'slidingdoor' ), 'after' => '</div>' ) ); ?>
                  <?php edit_post_link( __( 'Edit', 'slidingdoor' ), '<span class="edit-link">', '</span>' ); ?>
               </div><!-- .entry-content -->
            </div><!-- #post-## -->

            <?php comments_template( '', true ); ?>

<?php endwhile; ?>

         </div><!-- #content -->
      </div><!-- #container -->

<?php get_footer(); ?>

I had hoped changing the one_column to single_attachment would miraculously make it work. Like thus:

Code: Select all
<div id="container" class="single-attachment">
It didn't. I don't see anything specific that makes the declares that a sidebar on the left must exist. Does anyone know where to look?
ltu
I'm a regular
 
Posts: 8
Joined: Tue Aug 09, 2011 2:56 am

Re: Full width column layout implemented?

Postby ltu » Fri Aug 19, 2011 5:34 pm

* BUMP *
ltu
I'm a regular
 
Posts: 8
Joined: Tue Aug 09, 2011 2:56 am

Re: Full width column layout implemented?

Postby dsegal » Wed Aug 31, 2011 4:32 am

I got this working by copying the single post (single.php), making it a template, removing the sidebar, adding a new style class in the css and modifying the margins. This now aligns correctly

/*
LAYOUT: Full width, no sidebar
DESCRIPTION: Full width content with no sidebar; used for attachment pages
*/

.single-column-attachment #content {
margin: 0px 0px 0px -200px;
width: 880px;
}
dsegal
I'm new here
 
Posts: 3
Joined: Wed Aug 31, 2011 4:19 am

Re: Full width column layout implemented?

Postby ltu » Fri Sep 02, 2011 4:27 pm

Thanks dsegal for your advice. I give that a try. I've changed the code above a bit to look like this:
Code: Select all
get_header(); ?>

      <div id="container" class="full-layout">
         <div id="content" role="main">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>


This is what I put in the style.css:
Code: Select all
.full-layout #content {
   margin: 0 auto;
   width: 900px;   
   float: left;
}


In case there is any question about what I'm looking to do, here is a screen shot:
Sliding-Door-Margins.png
Sliding-Door-Margins.png (64.68 KiB) Viewed 9448 times


Sorry for the huge image, but I didn't want the text I put in the page to be illegible.
ltu
I'm a regular
 
Posts: 8
Joined: Tue Aug 09, 2011 2:56 am

Re: Full width column layout implemented?

Postby ltu » Fri Sep 02, 2011 4:38 pm

I tried the negative margin shift that you suggested and it works! Woohoo! :)
Sliding-Door-Margins-Success.png
Sliding-Door-Margins-Success.png (40.01 KiB) Viewed 9448 times
ltu
I'm a regular
 
Posts: 8
Joined: Tue Aug 09, 2011 2:56 am

Re: Full width column layout implemented?

Postby ximetobi » Fri Nov 25, 2011 1:59 am

Hi Wayne,

this is the third time I use your sliding door theme. It's great!

But with the new version I have a problem: using the one column layout, I chose a background color for the body and another for the column and I have problems with left margin: see this at http://theartshackmiami.com/index.php/?page_id=10 and at http://theartshackmiami.com/index.php/?p=1

I changed the one column width in order to have the same width of imagemenu, access menu and column. And changed also left margins (using negative margin as Itu did), but when I extend the browser window, the column moves.

Could you tell me how can I fix it?

Many thanks in advance.
Ximena
ximetobi
I'm new here
 
Posts: 1
Joined: Tue Oct 11, 2011 3:26 pm


Return to Advanced - Customising the theme



cron