Sidebar Customization using CSS

  • Author
    Posts
  • #177118

    ruhi
    Member

    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.

    #177372

    rosclarke
    Member

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

    #177384

    ruhi
    Member

    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!

    #177386

    rosclarke
    Member

    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.

    #177387

    rosclarke
    Member

    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.

    #177395

    ruhi
    Member

    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!

    #177518

    rosclarke
    Member

    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.

    #177561

    ruhi
    Member

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

    #177566

    rosclarke
    Member

    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.

    #177569

    devblog
    Member

    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

    #177575

    ruhi
    Member

    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.

    #177578

    devblog
    Member

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

    #177581

    ruhi
    Member

    devblog:

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

    #177585

    dcksim
    Member

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

    #177599

    ruhi
    Member

    dcksim,

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

    #177606

    babylost
    Member

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

    #177607

    rosclarke
    Member

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

    #177611

    devblog
    Member

    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

    #177612

    devblog
    Member

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

    #177613

    rosclarke
    Member

    Great job, devblog.

The topic ‘Sidebar Customization using CSS’ is closed to new replies.