WordPress CSS help!

So I have this site (http://dupedb.com/).

I want to have something like additional sidebar but not exactly.



Could anyone enlighten me please?

The CSS can be found here: http://dupedb.com/wp-content/themes/barecity_1.5/style.css

Thanks

 

So you want the sidebar moved to the left from the right (where it currently is now)?

Find the #sidebar selector and change it to this:

#sidebar {
	background: #88ddee;
	border-right: 1px dotted #726E6D; /* was border-left */
	padding: 0px 0 10px 20px;
	float: left; /* was float: right; */
	width: 144px;
}

Code (markup):

And then find the #content selector and change it to this:

#content {
	float: right; /* was float: left; */
	width:500px;
}

Code (markup):

The comments (between /* and */) are there just to see what is changed from the original.

 

Na, that's not what I want. I want everything to stay as it is. Just have the links on that blank space without any modifications to the current look.

 

Well firstly you increase your #rap width by the size you want the new sidebar to be:

#rap {
	background-color: #88ddee;
	margin-right:auto;
	margin-left:70px;
	[B]width:700px;[/B] /*Change this to new width.*/
	padding: 6px;
}

Code (markup):

Then you change your #sidebar from float:right to float:left

#sidebar {
	background: #88ddee;
	border-left: 1px dotted #726E6D;
	padding: 0px 0 10px 20px;
	[B]float: left;[/B]
	width: 144px;
}

Code (markup):

Then you create your new sidebar inside your CSS, changing the properties to how you want it to look:

#newSidebar {
	background: #88ddee;
	border-left: 1px dotted #726E6D;
	padding: 0px 0 10px 20px;
	float: left;
	width: 144px;
}

Code (markup):

Remember to make the width the amount you added to the #rap (and that the width is not only the width but padding also).

Then just add the new sidebar after the line

<!-- end sidebar -->

Code (markup):

Like:

<!-- end sidebar -->
<div id="newSidebar>
New Sidebar content goes in here
</div>

Code (markup):