Need help? Check out our Support site, then


Sidebar Customization using CSS

  1. 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.

  2. I don't think you can do either of these things, sorry.

  3. 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!

  4. 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.

  5. 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.

  6. 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!

  7. 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:

    http://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.

  8. 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 :)

  9. 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.

  10. 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

  11. 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.

  12. Ok, give me a couple of days and I'll see what I can do for you.

  13. devblog:

    Aww that's really sweet of you :) Thanks a ton!! I'll wait for your response.

  14. I'll try a css And You May look up that on dcksim.wordpress.com/ dcksim.weblog

  15. dcksim,

    I can't see anything related to CSS on your blog.

  16. <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">
    <marquee bgcolor="#00FF00">Welcome in salmard</marquee></font></p>

    </body>

    </html>

  17. Babylost, that's html not css. You can't put that in a WP.com blog.

  18. 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

  19. Forgot to ask you, please let me know once you've seen my blog so I can put it the way it was. Thanks

  20. Great job, devblog.

  21. Thank you, rosclarke.

  22. devblog, that is great, I'm tempted to have that or something silimar on my blg, however I'm using wank's Diurnal and have the start from scratch ticked. Would it still work then?

  23. similar on my blog.*

  24. it might work right away. You might still need to tweak the side bar properties a bit more.

    You could add the code above to the very bottom of your CSS and preview it before saving it.

    Try it and let me know how it works for you. If you'd need to tweak it some more, I'll be happy to help you with that, but I would need a couple of days to work on it because of my job and other projects.

  25. Hi devblog,

    Yes, that is exactly what I wanted. Thanks a ton for doing this for me. :)

    For your customization, I'm assuming you have the "Add to existing CSS (View stylesheet)" radio button checked.

    Umm...actually I'm using "Start from scratch", because my tweaking it based on Wank's theme, Baubles.

    But I will give this a shot and see how it goes! =) Thanks once again.

  26. Forgot to add- Please restore your blog to its normal view. :)

  27. Cat:

    It works even when I used "Start from scratch"! So, you should be able to add it to your blog. :)

    Devblog:

    That's some neat work from you. Thanks so much for taking out the time to work on my sidebar. It's so kind of you. =))

  28. Awesome!

  29. Thanks to both of you. I shall give it a try later hoping I don't break something. :)

  30. Right, I did the above and manged to get it on my blog, so a big thank you for that. :)

    It doesn't have a box around it as all the other widgets do. Is that doable at all?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags