WordPress.org

Ready to get started?Download WordPress

Forums

Create single-sided border for columns? (6 posts)

  1. Phillyzero
    Member
    Posted 5 years ago #

    I'm using a given theme template (comicpress 3vc), it's a 3 column template with main index, and side-left/right.php.

    So I was wondering how do I go about making the settings for the right/left side so that a one-sided border is created. For example, the right column, can I create a border that only appears on the left side (and not top/bottom/right) so that it separates the column from the center of the page (and vice versa with the left column).
    i.e.
    http://cowshell.com/cowandbuffalo/
    ^this is only 2 columns (I think) but the right column has the dotted border which I'm interested in.

  2. langsuyar
    Member
    Posted 5 years ago #

    Check http://www.w3schools.com/css/css_border.asp

    You can do borders for each side individually, and have various styles to pick from. In your example, the border is created by this CSS code:

    #sidebar {style.css (line 118)
    border-color:#000000 #000000 #000000 #C0C0C0;
    border-style:solid solid solid dotted;
    border-width:0 0 0 2px;
  3. Phillyzero
    Member
    Posted 5 years ago #

    Sorry if I sound dumb, I tried placing the code in the side-right and side-left spots and I end up with a skewed page instead with no border except a few dots. I was wondering where I would place the code in a css portion like so:

    /* SIDEBARS */
    
    #sidebar-left {
    	width: 200px;
    	padding: 10px 0 0 0;
    	float: left;
    	font-size: 11px;
    	overflow: hidden;
    	}
    
    #sidebar-right {
    	width: 200px;
    	padding: 5px 0 0 0;
    	float: left;
    	font-size: 11px;
    	overflow: hidden;
    	}
    
    .sidebar h2, .sidebar h2 a {
    	color: #999;
    	font-family: 'Georgia', serif;
    	font-weight: normal;
    	font-size: 18px;
    	text-transform: lowercase;
    	letter-spacing: -1px;
    	}
    
    .sidebar ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	}
    
    	.sidebar ul li {
    		margin: 0 0 10px 10px;
    		padding: 0;
    		}
    
    		.sidebar ul li ul li {
    			margin: 0 0 0 10px;
    			padding: 0;
    			}
    
    			.sidebar ul li ul li a {
    				display: block;
    				color: #333;
    				text-decoration: none;
    				border-bottom: 1px dotted #777;
    				}
    
    				.sidebar ul li ul li a:hover {
    					color: #333;
    					background: #ddd;
    					border-bottom: 1px solid #777;
    					}
  4. Evita
    Member
    Posted 5 years ago #

    Try
    #sidebar-left {border-right:1px dotted #000;}
    #sidebar-right {border-left:1px dotted #000;}

  5. Phillyzero
    Member
    Posted 5 years ago #

    Thanks for the reply, it works on the left column, but the right column is thrown to the left side (at the bottom), it happens all over the site, single post and main index.
    i.e.
    http://img176.imageshack.us/img176/8100/bordercolkv2.png

    The code I put in was this.
    For my right-side bar:

    <div id="sidebar-right" class="sidebar">
    	<ul>
    		<?php	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Sidebar') ) : ?>
    			<li>
    				<?php get_calendar(); ?>
    			</li>
    
    	                <li>
    				<?php include (TEMPLATEPATH . '/searchform.php'); ?>
    			</li>
    
    			<?php wp_list_bookmarks(); ?>
    
    		<?php endif; ?>
    
    	</ul>
    </div>

    For CSS

    #sidebar-left {
    	width: 200px;
    	padding: 10px 0 0 0;
    	float: left;
    	font-size: 11px;
    	overflow: hidden;
            border-right:1px dotted #000;
    	}
    
    #sidebar-right {
    	width: 200px;
    	padding: 5px 0 0 0;
    	float: left;
    	font-size: 11px;
    	overflow: hidden;
            border-left:1px dotted #000;
    	}
  6. Evita
    Member
    Posted 5 years ago #

    Change the width of the right sidebar from 200px to 198px (or the width of your content-div).

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags