Sidebar problem

  • ronald73

    (@ronald73)


    15 years, 11 months ago

    Hi all,

    I’m using the Vertigo Electrified theme and changed it a bit to my liking. Now I want one of the two sidebars that are now on the right, moved to the left. I tried playing around with the ‘float:’ in the css and the padding and margin, but i’m not getting it. (url: http://www.tennispraat.nl)

    I can get the main content to the center of the page, and have 1 sidebar on the right, but the one that should go to the left don’t show up or moves under the postings. This is the code in the css (for as far it has to do with content and the sidebars. Note that ‘contentleft’ has to do with how the postings are displayed.

    /************************************************
    * Content *
    ************************************************/

    #content {
    width: 96%;
    margin: 0px auto 0px;
    padding: 0px;
    }

    #content p{
    padding: 0px 0px 15px 0px;
    margin: 0px;
    line-height: 20px;
    }

    #content h1 {
    color: #000000;
    font-size: 22px;
    font-family: Century Gothic, Verdana, Arial, Sans-Serif;
    font-weight: normal;
    margin: 15px 0px 0px 0px;
    padding: 10px 0px 10px 0px;
    border-top: 2px solid #000000;
    }

    #content h1 a {
    color: #000000;
    text-decoration: none;
    }

    #content h1 a:hover {
    color: #910156;
    text-decoration: none;
    }

    #content p img{
    float: left;
    border: none;
    margin-right: 15px;
    margin-bottom: 10px;
    }

    #content h2 {
    color: #000000;
    font-size: 22px;
    font-family: Century Gothic, Verdana, Arial, Sans-Serif;
    font-weight: normal;
    padding: 20px 0px 5px 0px;
    margin: 0px;
    border-bottom: 1px solid #C0C0C0;
    }

    #content h3 {
    color: #000000;
    font-size: 22px;
    font-family: Century Gothic, Verdana, Arial, Sans-Serif;
    font-weight: normal;
    margin: 15px 0px 0px 0px;
    padding: 20px 0px 10px 0px;
    }

    #content img.wp-smiley {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }

    #content img.wp-wink {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }

    #contentleft {
    float: left;
    width: 54%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
    }

    #contentleft ol{
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }

    #contentleft ol li{
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 0px 0px;
    }

    #contentleft ul{
    list-style-type: square;
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }

    #contentleft ul li{
    list-style-type: square;
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 0px 0px;
    }

    blockquote{
    margin: 0px 25px 10px 25px;
    padding: 0px 25px 0px 10px;
    background: #E8E8E8;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #000000;
    }

    #content blockquote p{
    margin: 0px 0px 10px 0px;
    padding: 10px 0px 0px 0px;
    }

    /************************************************
    * Left Sidebar *
    ************************************************/

    #l_sidebar {
    float: left;
    width: 21%;
    margin: 15px 0px 0px 20px;
    padding: 0px 0px 20px 0px;
    border-top: 2px solid #000000;
    }

    #l_sidebar ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #l_sidebar ul li {
    display: inline;
    padding: 0px;
    margin: 0px;
    }

    #l_sidebar ul li a {
    display: block;
    color: #000000;
    text-decoration: none;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    border-bottom: 1px solid #C0C0C0;
    }

    #l_sidebar ul li a:hover {
    background: #EFEFEF;
    color: #910156;
    }

    #l_sidebar p{
    padding: 3px 0px 0px 0px;
    margin: 0px;
    line-height: 20px;
    }

    /************************************************
    * Right Sidebar *
    ************************************************/

    #r_sidebar {
    float: right;
    width: 21%;
    margin: 15px 0px 0px 20px;
    padding: 0px 0px 20px 0px;
    border-top: 2px solid #000000;
    }

    #r_sidebar ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #r_sidebar ul li {
    display: inline;
    padding: 0px;
    margin: 0px;
    }

    #r_sidebar ul li a {
    display: block;
    color: #000000;
    text-decoration: none;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    border-bottom: 1px solid #C0C0C0;
    }

    #r_sidebar ul li a:hover {
    background: #EFEFEF;
    color: #910156;
    }

    #r_sidebar p{
    padding: 3px 0px 0px 0px;
    margin: 0px;
    line-height: 20px;
    }

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • Thread Starter ronald73

    (@ronald73)

    15 years, 11 months ago

    Anyone?

    wp_guy

    (@wp_guy)

    15 years, 11 months ago

    Try:

    #l_sidebar {
	float: left;
}
    #r_sidebar {
	float: left;
}
    #contentleft {
	float: right;
}
    Thread Starter ronald73

    (@ronald73)

    15 years, 11 months ago

    That brings both sidebars to the left, but I wat one on the left and one on the right, with the ‘contentleft’ in the middle.

    wp_guy

    (@wp_guy)

    15 years, 11 months ago

    Then… I think it’s not just a matter of CSS… since the columns should load in order…

    You could separate the sidebar.php in two: sidebar-left.php and sidebar-right.php and then change your index.php file to load the left sidebar, then the main content and then the right sidebar… something like:

    <?php get_sidebar("left"); ?>

<div id="content">
...
</div>

<?php get_sidebar("right); ?>

    Then the CSS part should be much easier.

    Thread Starter ronald73

    (@ronald73)

    15 years, 11 months ago

    there are already 2 sidebars, this is how the index.php looks like:

    <?php get_header(); ?>

    <div id=”content”>

    <div id=”contentleft”>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1>” rel=”bookmark”><?php the_title(); ?></h1>
    <p>Geschreven op <?php the_time(‘j F Y’); ?>
    Geplaatst in de rubriek <?php the_category(‘, ‘) ?> | <?php comments_popup_link(‘Reageer!’, ‘1 Reactie’, ‘% Reacties’); ?></p>
    <?php the_content(__(‘Klik om verder te lezen’));?><div style=”clear:both;”></div>

    <!–
    <?php trackback_rdf(); ?>
    –>

    <?php endwhile; else: ?>

    <p><?php _e(‘Sorry, geen berichten die overeen komen met uw criteria.’); ?></p><?php endif; ?>

    <h3>Reacties</h3>
    <?php comments_template(); // Get wp-comments.php template ?>

    </div>

    <?php include(TEMPLATEPATH.”/l_sidebar.php”);?>

    <?php include(TEMPLATEPATH.”/r_sidebar.php”);?>

    </div>

    <!– The main column ends –>

    <?php get_footer(); ?>

    wp_guy

    (@wp_guy)

    15 years, 11 months ago

    The you just have to move <?php include(TEMPLATEPATH."/l_sidebar.php");?> up… like this:

    <?php get_header(); ?>

<div id="content">

<?php include(TEMPLATEPATH."/l_sidebar.php");?>

<div id="contentleft">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1>" rel="bookmark"><?php the_title(); ?></h1>
<p>Geschreven op <?php the_time('j F Y'); ?>
Geplaatst in de rubriek <?php the_category(', ') ?> | <?php comments_popup_link('Reageer!', '1 Reactie', '% Reacties'); ?></p>
<?php the_content(__('Klik om verder te lezen'));?><div style="clear:both;"></div>

<!--
<?php trackback_rdf(); ?>
-->

<?php endwhile; else: ?>

<p><?php _e('Sorry, geen berichten die overeen komen met uw criteria.'); ?></p><?php endif; ?>

<h3>Reacties</h3>
<?php comments_template(); // Get wp-comments.php template ?>

</div>

<?php include(TEMPLATEPATH."/r_sidebar.php");?>

</div>

<!-- The main column ends -->

<?php get_footer(); ?>
    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    15 years, 11 months ago

    Edit: WP_Guy beat me by two minutes 🙂

    Ronald,

    Backup your theme directory and edit these files:

    404.php
archive.php
home.php
index.php
page.php
search.php

    Around line 25’ish you’ll see this

    <?php include(TEMPLATEPATH."/l_sidebar.php");?>

    Delete that line and insert a copy of it underneath line 3 so it now looks like this:

    <div id="content">

<?php include(TEMPLATEPATH."/l_sidebar.php");?>

    Wash, rinse, repeat.

    Let us know if that worked for you.

    Thread Starter ronald73

    (@ronald73)

    15 years, 11 months ago

    It did work, thanks! A lot!

    But…just one small problem left.
    The site looks good in both IE and Firefox, but when you click on a category, it looks good in IE, but in Firefox the content starts just a little lower than it should.

    See: http://www.tennispraat.nl (to see the category, just click on any text under ‘rubrieken’ in the left sidebar.

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    15 years, 11 months ago

    Ronald,

    Check your archive.php… it looks like it’s inserting a br after the contentleft div.

    <div id="contentleft">
     <br />
    Thread Starter ronald73

    (@ronald73)

    15 years, 11 months ago

    It doesn’t, see the code:

    <?php get_header(); ?>

    <div id=”content”>

    <?php include(TEMPLATEPATH.”/l_sidebar.php”);?>

    <div id=”contentleft”>
    <?php echo category_description(); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1>” rel=”bookmark”><?php the_title(); ?></h1>
    <p>Geschreven op <?php the_time(‘j F Y’); ?>, <?php the_time(‘G.i’); ?> uur.
    Geplaatst in de rubriek <?php the_category(‘, ‘) ?> | <?php comments_popup_link(‘Geef een reactie’, ‘1 Reactie’, ‘% Reacties’); ?></p>
    <?php the_content(__(‘Klik om verder te lezen’));?><div style=”clear:both;”></div>

    <!–
    <?php trackback_rdf(); ?>
    –>

    <?php endwhile; else: ?>

    <p><?php _e(‘Sorry, geen berichten komen overeen met uw criteria.’); ?></p><?php endif; ?>
    <?php posts_nav_link(‘ — ‘, __(‘« ga terug’), __(‘zoek verder »’)); ?>

    </div>

    <?php include(TEMPLATEPATH.”/r_sidebar.php”);?>

    </div>

    <!– The main column ends –>

    <?php get_footer(); ?>

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    15 years, 11 months ago

    Just as an experiment (I did mention backup your files right? 🙂 ) try commenting out the line that reads

    <?php echo category_description(); ?>

    By changing it to

    <?php // echo category_description(); ?>

    I think that that might be adding the blank line. I don’t know why it would be different now that the column is moved but give that a try and see if it eliminates the space.

    Thread Starter ronald73

    (@ronald73)

    15 years, 11 months ago

    It worked!
    Thanks.

    Thread Starter ronald73

    (@ronald73)

    15 years, 11 months ago

    as you are so helpful, I’d like to give you another problem.
    Is there a way to have the right sidebar NOT show up, but only when the page ‘forum’ is clicked?
    see: http://www.tennispraat.nl

    So I want it as it is right now for whatever they do on the site, but only when someone goes to the forum I want the right sidebar gone and more space for the forum.

    wp_guy

    (@wp_guy)

    15 years, 11 months ago

    You can use the is_page() conditional tag… like this (in page.php):

    <?php if( !is_page('forum') ) : ?>
<?php get_sidebar(); ?>
<?php endif; ?>

    Or you can use a custom page template where the <?php get_sidebar(); ?> doesn’t appear

    Thread Starter ronald73

    (@ronald73)

    15 years, 11 months ago

    Ok, where exactly do I have to put the code? Here is the code from page.php as it is right now:

    <?php get_header(); ?>

    <div id=”content”>

    <?php include(TEMPLATEPATH.”/l_sidebar.php”);?>

    <div id=”contentleft”>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1>” rel=”bookmark”><?php the_title(); ?></h1>
    <?php the_content(__(‘Klik om verder te lezen’));?><div style=”clear:both;”></div>

    <!–
    <?php trackback_rdf(); ?>
    –>

    <?php endwhile; else: ?>

    <p><?php _e(‘Sorry, geen berichten die overeen komen met uw criteria.’); ?></p><?php endif; ?>
    <?php posts_nav_link(‘ — ‘, __(‘« ga terug’), __(‘zoek verder »’)); ?>

    </div>

    <?php include(TEMPLATEPATH.”/r_sidebar.php”);?>

    </div>

    <!– The main column ends –>

    <?php get_footer(); ?>

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • The topic ‘Sidebar problem’ is closed to new replies.