Sidebar Customization using CSS

ruhi · Member · Dec 31, 2007 at 1:56 am
Copy link

Add topic to favorites
I’m using the Sandbox Theme right now and have customized it a bit. I want to do two more things to my sidebar-

1. Push the tag/categories cloud at the end of my sidebars. Right now, it’s in the right sidebar…but I want to push it at the bottom of the sidebars. Does it make sense?

2. Have some wide space on top of my sidebars (something like a wide rectangular space) where I can write a welcome message.

Is it possible to make these changes? I hope I’m being clear enough.
rosclarke · Member · Dec 31, 2007 at 3:59 am
Copy link
I don’t think you can do either of these things, sorry.
ruhi · Member · Dec 31, 2007 at 5:21 am
Copy link
rosclarke, that’s sad news indeed :( Is it because of the sandbox theme? will I be able to do that if I use something else? My knowledge of CSS is only a couple of days old- that’s why these stupid questions. Sorry!
rosclarke · Member · Dec 31, 2007 at 5:43 am
Copy link
Nope, it’s to do with the way the sidebars work. As far as I know, you can put whatever you like within each sidebar but you can’t have boxes that span the two.
rosclarke · Member · Dec 31, 2007 at 5:46 am
Copy link
You know that you can reorder the widgets? On the normal widgets page, move them around how you want. So you can put the tag/categories clouds at the end of one of your sidebars. But it won’t span them both.
ruhi · Member · Dec 31, 2007 at 6:35 am
Copy link
rosclarke,

yes i know that we can reorder the widgets. i was hoping to use some coding to make the tag cloud span both the sidebars.

thanks anyway!
rosclarke · Member · Jan 1, 2008 at 7:00 am
Copy link
It just occurs to me that maybe you could use this workaround for the themes that don’t have taglines to achieve what you wanted for the welcome message.

See here:

https://en.forums.wordpress.com/topic.php?id=19673&page&replies=2#post-150904

You can set whatever position and size you want for the text widget, I think.
ruhi · Member · Jan 2, 2008 at 2:49 am
Copy link
rosclarke,

I did take a look at that code, but I’m sure sure if I can make the widget itself span across two sidebars…what I was thinking of was a way to shift the sidebar down and have some space on the top.

Thanks for your help :)
rosclarke · Member · Jan 2, 2008 at 3:32 am
Copy link
You can certainly shift the sidebars down using CSS. And I think you should be able to set the dimensions and position of the text widget as well.
devblog · Member · Jan 2, 2008 at 3:59 am
Copy link
In my mind, you could do this:

set the top margin of both #primary and #secondary sidebars to, let’s say, 200px; in your primary sidebar, create a text widget, something like this:
```
<div class="welcome">
welcome message
</div>
```
And in your CSS something like this:
```
.welcome {
     position: relative;
     width: 400px;
     height: 200px;
     margin: -200px 0 0;
     float: left;
}
```
However, I’d need to make some tests myself to check if my theory is correct.

Bear in mind that trying to achieve certain things using CSS only can be quiet tricky, especially if you cannot add elements to the source fiel (i.e. php or html).

HTH
ruhi · Member · Jan 2, 2008 at 8:31 am
Copy link
devblog,

I did set the margins for the two sidebars to 200px and that worked fine-until I added the welcome message. When I did that, the primary sidebar got shifted down further. Hence, it didn’t span the two sidebars…

I’m no CSS expert and I can only do what you ask me to do. :) I understand that it’s quite difficult to work only with CSS.

I appreciate the help of both you and rosclarke.
devblog · Member · Jan 2, 2008 at 2:25 pm
Copy link
Ok, give me a couple of days and I’ll see what I can do for you.
ruhi · Member · Jan 2, 2008 at 8:04 pm
Copy link
devblog:

Aww that’s really sweet of you :) Thanks a ton!! I’ll wait for your response.
dcksim · Member · Jan 3, 2008 at 6:56 am
Copy link
I’ll try a css And You May look up that on dcksim.wordpress.com/ dcksim.weblog
ruhi · Member · Jan 3, 2008 at 9:59 pm
Copy link
dcksim,

I can’t see anything related to CSS on your blog.
babylost · Member · Jan 4, 2008 at 2:06 pm
Copy link
<html>

<head>
<meta http-equiv=”Content-Language” content=”en-us”>
<meta name=”GENERATOR” content=”Microsoft FrontPage 5.0″>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>New Page 1</title>
</head>

<body>

<p><font size=”6″>
Welcome in salmard

</body>

</html>
rosclarke · Member · Jan 4, 2008 at 2:41 pm
Copy link
Babylost, that’s html not css. You can’t put that in a WP.com blog.
devblog · Member · Jan 4, 2008 at 10:32 pm
Copy link
Ruhi,

Please take a look at my blog. I believe you want something like that.

If this is in fact what you want, then do this:

1. Write your welcome message in a text widget and place the widget at the very bottom of your sidebar 1. The text widget should have this:
```
<div class="welcome">
[Your welcome message here]
</div>
```
2. Now, in your CSS, add this code:
```
#primary,#secondary {
	float:left;
	position:relative;
	top:120px;
}

#primary {
	overflow:visible;
}

.welcome {
	border:solid 1px #00f;
	width:360px;
	height:100px;
	position:absolute;
	top:-120px;
	margin:0;
	padding:5px !important;
}
```
For your customization, I’m assuming you have the “Add to existing CSS (View stylesheet)” radio button checked.

You may need to play width the height and top properties of the .welcome class selector and the top property of the #primary and #secondary id selectors. Make sure the top property in the .welcome class selector is the negative equivalent to the value of the top property of the #primay and #secondary id selectors.

HTH
devblog · Member · Jan 4, 2008 at 10:33 pm
Copy link
Forgot to ask you, please let me know once you’ve seen my blog so I can put it the way it was. Thanks
rosclarke · Member · Jan 4, 2008 at 11:15 pm
Copy link
Great job, devblog.

No items found.