Create single-sided border for columns?

  • 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.
    https://cowshell.com/cowandbuffalo/
    ^this is only 2 columns (I think) but the right column has the dotted border which I’m interested in.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Check https://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;
    Thread Starter phillyzero

    (@phillyzero)

    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;
					}

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

    Thread Starter phillyzero

    (@phillyzero)

    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.
    https://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;
	}

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Create single-sided border for columns?’ is closed to new replies.