Switch Sides Between Content and Sidebar in WP Theme

Discussion in 'HTML & Website Design' started by netgo, Mar 15, 2010.

  1. #1
    I have a left sidebar wordpress theme and I would like to switch sides and have the content on the left and the sidebar on the right.

    Where on the wordpress editor file should I go and how do I switch?

    Thanks
     
    netgo, Mar 15, 2010 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    Open style.css file of the theme and change float: left to float: right in the #sidebar{...}.
     
    s_ruben, Mar 15, 2010 IP
  3. netgo

    netgo Active Member

    Messages:
    279
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    75
    #3
    Thanks but didn't work - only floated a bit to the right within the left column's space
    Mabybe I should change something here -

    #sidebar li {
    margin-bottom: 30px;
    padding: 0 0 10px 0px;
    }

    #sidebar li ul {
    }

    #sidebar li li {
    margin: 0;
    padding: 7px 10px 10px 7px;
    background: url(images/img07.jpg) repeat-x left bottom;
    }

    #sidebar p {
    margin: 0;
    padding: 0px 10px;
    }
    ?
     
    netgo, Mar 15, 2010 IP
  4. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #4
    Write here the code of #sidebar{...} and index.php file.
     
    s_ruben, Mar 15, 2010 IP
  5. netgo

    netgo Active Member

    Messages:
    279
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    75
    #5
    Thank you -
    /* Sidebar */

    #sidebar {
    float: left;
    width: 177px;
    padding-left: 22px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #375910;
    hover: text-decoration: underline;

    }

    #sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
    }

    #sidebar li {
    margin-bottom: 30px;
    padding: 0 0 10px 0px;
    }

    #sidebar li ul {
    }

    #sidebar li li {
    margin: 0;
    padding: 7px 10px 10px 7px;
    background: url(images/img07.jpg) repeat-x left bottom;
    }

    #sidebar p {
    margin: 0;
    padding: 0px 10px;
    }

    #sidebar h2 {
    height: 26px;
    margin: 0 0 10px 0px;
    padding: 12px 0 2px 10px;
    background: url(images/img06.jpg) no-repeat left top;
    text-transform: capitalize;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    }


    #sidebar p {
    line-height: 200%;
    }
    #sidebar a {
    text-align: left;
    text-decoration: none;
    font-weight: bold;
    color: #375910;
    }

    #sidebar a:hover { text-decoration: underline; }

    <?php get_header(); ?>

    <div id="content">

    <?php if (have_posts()) : ?>

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

    <div class="post" id="post-<?php the_ID(); ?>">
    <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <p class="meta">Posted on <?php the_time('F jS, Y') ?> by <?php the_author() ?> &nbsp;|&nbsp; <?php edit_post_link('Edit', '', ' &nbsp;|&nbsp; '); ?> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

    <div class="entry">
    <?php the_content('Read the rest of this entry &raquo;'); ?>
    </div>

    </div>

    <?php endwhile; ?>

    <div class="navigation">
    <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
    <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
    </div>

    <?php else : ?>

    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>
    <?php include (TEMPLATEPATH . "/searchform.php"); ?>

    <?php endif; ?>

    </div>

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>
     
    netgo, Mar 15, 2010 IP
  6. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #6
    Change float: left; to float: right; in the #sidebar{...} and write <?php get_sidebar(); ?> just after <?php get_header(); ?>.
     
    s_ruben, Mar 15, 2010 IP
  7. netgo

    netgo Active Member

    Messages:
    279
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    75
    #7
    Didn't work.... same as before
     
    netgo, Mar 15, 2010 IP
  8. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #8
    Write here the code in #content{...} and it will be better if you write here the theme name that you use.
     
    s_ruben, Mar 15, 2010 IP
  9. netgo

    netgo Active Member

    Messages:
    279
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    75
    #9
    That gave me an idea an I was able to switch - I just needed to float the content left
    Thank you very much for your help!
     
    netgo, Mar 16, 2010 IP