• 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: https://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 2 replies - 16 through 17 (of 17 total)
  • Thread Starter ronald73

    (@ronald73)

    I figured it out myself. Made a new pagetemplate for the forum and it works! Thanks all for all the help!

    jdembowski and WP_Guy, your comments have been most helpful for me. However, I still can’t seem to get my 2nd sidebar over to the darn right side of the site. https://www.wheniwasnothing.com

    I have attempted to move one of the sidebar lines to the top as you both have mentioned to do. The 2nd sidebar will simply appear above the posting and not to the right of it.

    Also, I attemped to duplicate the sidebar section within the stylesheet for the sidebar2 file in hopes for the same look as the original sidebar to the left. No luck.

    Any shared knowledge is much appreciated. Thanks!

    Main Index

    <?php get_header(); ?>
    
    	<!-- start content -->
    	<div id="content">
    
    <?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
    
    	<?php if (have_posts()) : the_post(); ?>
    
    		<div class="post" id="post-<?php the_ID(); ?>">
    			<h1 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
    			<p class="byline"><small><?php the_time('F jS, Y') ?> by <?php the_author() ?> <?php edit_post_link('Edit', '', ' | '); ?></small>
    
    			<div class="entry">
    				<?php the_excerpt(); ?>
    			</div>
    			<p class="meta"><a href="<?php the_permalink() ?>" class="more">Read More</a> &nbsp;&nbsp;&nbsp;&nbsp; <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »', 'comments'); ?>
    
    		</div>
    
    		<?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(); ?>"><?php the_title(); ?></a></h2>
    				<p class="byline"><small><?php the_time('F jS, Y') ?> by <?php the_author() ?> <?php edit_post_link('Edit', '', ' | '); ?></small>
    
    				<div class="entry">
    					<?php the_excerpt(); ?>
    				</div>
    				<p class="meta"><a href="<?php the_permalink() ?>" class="more">Read More</a> &nbsp;&nbsp;&nbsp;&nbsp; <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »', 'comments'); ?>
    
    			</div>
    
    		<?php endwhile; ?>
    
    		<div class="navigation">
    			<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div>
    			<div class="alignright"><?php previous_posts_link('Next 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.
    
    		<?php include (TEMPLATEPATH . "/searchform.php"); ?>
    
    	<?php endif; ?>
    
    	</div>
    
             <?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
    
             </div>
    
    <!-- end content -->
    
    <?php get_footer(); ?>

    Stylesheet

    body {
    	margin: 0;
    	padding: 0;
    	background: #000000;
    	font-size: 13px;
    	color: #8C8C8C;
    }
    
    body, th, td, input, textarea, select, option {
    	font-family: Georgia, "Times New Roman", Times, serif;
    }
    
    h1, h2, h3 {
    	font-weight: normal;
    	color: #CBA61A;
    }
    
    h1 {
    	letter-spacing: -2px;
    	font-size: 3em;
    }
    
    h2 {
    	letter-spacing: -1px;
    	font-size: 2em;
    }
    
    h3 {
    	font-size: 1em;
    }
    
    p, ul, ol {
    	line-height: 200%;
    }
    
    blockquote {
    	padding-left: 1em;
    }
    
    blockquote p, blockquote ul, blockquote ol {
    	line-height: normal;
    	font-style: italic;
    }
    
    a {
    	color: #3AA0B9;
    }
    
    a:hover {
    	text-decoration: none;
    	color: #EB42A3;
    }
    
    hr {
    	display: none;
    }
    
    /* Header */
    
    #header {
    	width: 860px;
    	height: 280px;
    	margin: 0 auto;
    	background: url(images/img01.jpg) no-repeat right top;
    }
    
    #header h1, #header p {
    	margin: 0;
    	color: #EB42A3;
    }
    
    #header h1 {
    	padding-top: 100px;
    }
    
    #header a {
    	text-decoration: none;
    	color: #EB42A3;
    }
    
    /* Page */
    
    #page {
    	width: 1000px;
    	margin: 0 auto;
    }
    
    /* Content */
    
    #content {
    	float: right;
    	width: 460px;
    }
    
    .post {
    	padding: 80px 0 300px 0;
    }
    
    .title {
    	margin: 0 auto;
    	border-bottom: 2px solid #0F0F0F;
    }
    
    .title a {
    	text-decoration: none;
    }
    
    .pagetitle {
    	border-bottom: 2px solid #0F0F0F;
    }
    
    .byline {
    	margin: 0 auto;
    	color: #646464;
    }
    
    .meta {
    	text-align: right;
    	color: #646464;
    }
    
    .meta .more {
    	padding-left: 20px;
    	background: url(images/img03.gif) no-repeat left center;
    }
    
    .meta .comments {
    	padding-left: 20px;
    	background: url(images/img04.gif) no-repeat left center;
    }
    
    .navigation {
    }
    
    .alignleft {
    	float: left;
    }
    
    .alignright {
    	float: right;
    }
    
    .posts {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	line-height: normal;
    }
    
    .posts li {
    	padding-bottom: 20px;
    	margin-bottom: 20px;
    	border-bottom: 1px solid #0F0F0F;
    }
    
    .posts h3 {
    	margin: 0;
    	font-weight: bold;
    }
    
    .posts p {
    	margin: 0;
    	line-height: normal;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: left;
    	width: 180px;
    }
    
    #sidebar ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    #sidebar li {
    }
    
    #sidebar li ul {
    	padding: 15px 0;
    }
    
    #sidebar li li {
    	padding-left: 20px;
    	border-bottom: 1px dotted #0F0F0F;
    	background: url(images/img02.gif) no-repeat 5px 50%;
    }
    
    #sidebar h2 {
    	margin: 0;
    	padding: 20px 0 0 0;
    	border-bottom: 2px solid #0F0F0F;
    }
    
    #sidebar a {
    	text-decoration: none;
    }
    
    #sidebar a:hover {
    }
    
    /* Search */
    
    #search input {
    	display: none;
    }
    
    #search input#s {
    	display: block;
    	width: 230px;
    	padding: 2px 5px;
    	border: 1px solid #3DD1FF;
    	background: #FFFFFF url(images/img05.gif) repeat-x;
    }
    
    #search br {
    	display: none;
    }
    
    /* Calendar */
    
    #calendar {
    }
    
    #calendar h2 {
    	margin-bottom: 15px;
    }
    
    #calendar table {
    	width: 80%;
    	margin: 0 auto;
    	text-align: center;
    }
    
    #calendar caption {
    	width: 100%;
    	text-align: center;
    }
    
    #next {
    	text-align: right;
    }
    
    #prev {
    	text-align: left;
    }
    
    /* Footer */
    
    #footer {
    	clear: both;
    	padding: 30px 0;
    	background: url(images/img07.gif) repeat-x;
    	text-align: center;
    	font-size: smaller;
    }
Viewing 2 replies - 16 through 17 (of 17 total)
  • The topic ‘Sidebar problem’ is closed to new replies.