Hello dear wordpress users.
I read this topic about converting a 2 column layout to a 3 column one. I want to use the 3 column for widgets. I also found this one helpful.
I am using hellosexy template. What I did was first to copy and paste the sidebar CSS info to creat CSS for the right column.
/* sidebar */
nav {
width: 15%;
display: block;
text-align: right;
font-size: 18px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
border-right: 1px dashed #ccc;
float: left;
padding-right: 20px;
padding-left: 0px;
font-weight: bold;
margin-top: 10px;
}
....
/* sidebar_right */
nav_right {
width: 15%;
display: block;
text-align: left;
font-size: 18px;
border-right: 1px dashed #ccc;
float: right;
padding-right: 0px;
margin-top: 40px;
}
....
Then I edited this
#wrapper {
width: <blockquote>90%; </blockquote>
margin: 0 auto;
}
#content {
width: <strong>60%;</strong>
padding: 20px;
margin: -50px auto 20px auto;
background-color: #f9f9f9;
color: #444;
float:left;
position: relative;
font-size: 20px;
font-style: normal;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
The 3rd thing I did was to copy and paste the content of sidebar.php to a new file sidebar2.php. I changed the id's.
`<nav id="navigation_right">
<ul>
<?php if (!dynamic_sidebar()) : ?>
<li>
<?php get_search_form(); ?>
</li>
</ul>
<ul role="navigation">
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives(array('type' => 'monthly')); ?>
</ul>
</li>
<?php wp_list_categories(array('show_count' => 1, 'title_li' => '<h2>Categories</h2>')); ?>
</ul>
<ul>
<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php wp_list_bookmarks(); ?>
<li><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php } ?>
<?php endif; ?>
</ul>
</nav>`
After all this I added to my header.php the following.
Before:
...
<body <?php body_class(); ?>>
<header>
<h1><a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
</header>
<div id="wrapper">
<section id="content">
...
After:
<body <?php body_class(); ?>>
<header>
<h1><a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
</header>
<strong><div id="nav_right">
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
</div></strong>
<div id="wrapper">
<section id="content">
After all this the template is 3 columned. But the new column is a copy of the old one. It doesn't appear in the admin panel and it doesn't respond to changes in the new nav_right in CSS, but rather to changes in the original nav.
I have a limited expirience with PHP and CSS. What am I doing wrong?