WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change sidebar from right to left on (8 posts)

  1. venati
    Member
    Posted 2 years ago #

    Hello All,

    I am trying to change the sidebar from right to left on our site which uses Radius theme

    I did take a look at all the previous postings on the forum as well as looked at other resources but couldn't really find a way.

    Is there any plugin that could be used for this purpose. (Just to ensure I don't mess up any other setting or alignment, which seems to be happening with almost all the themes when the 'float' property is edited..)

    Appreciate if any of you can advise or suggest on how to go about this.

    Thanks in advance.

    -k.

  2. Ziv
    Member
    Posted 2 years ago #

    I got it fixed by using float, but you said that it might cause some issues so I recommend you make a back-up of your style.css just in case my fix won't work (it worked on my screen).

    Go to your style.css file and find line 150. It should look like this:

    #content,
    #sidebar {
    	padding-top: 20px;
    }

    Replace the previous code with this new batch of code:

    #content {
        float: right;
        padding-top: 20px;
    }
    
    #sidebar {
        float: left;
        padding-top: 20px;
    }

    Hope this helps, let me know if it fixed it.

  3. venati
    Member
    Posted 2 years ago #

    Ziv, thank you so much. It did help.

    But now, a minor alignment issue. If you notice the site now, the sidebar appears to the left but on the right, there's an empty linear column without any content.

    Appreciate if you can share your ideas on fixing it.

    Also, is there any way to change the width of the sidebar. I was using "Search" widget but it seemed so wide that I removed it. However, even after I remove it, it still is very wide. I want to narrow it down. Looking at all other posts, it looks for every theme, it's different..

    Once again, many thanks for your time and help.

    -k.

  4. Ziv
    Member
    Posted 2 years ago #

    To fix that empty column go to line 150 of your style.css (again I know) and delete this next batch of code:

    #content,
    #sidebar {
    	padding-top: 20px;
    }
    
    #content {
    	background: url(images/conent-sep.png) repeat-y top right;
    }

    Now replace it with this:

    #content {
        float: right;
        padding-top: 20px;
    }
    
    #sidebar {
        background: url(images/conent-sep.png) repeat-y top right;
        float: left;
        padding-top: 20px;
    }

    This should fix it, let me know if you run into any problems.

    And are you trying to narrow the search widget or the sidebar?

  5. venati
    Member
    Posted 2 years ago #

    Thank you Ziv. Let me try those options.

    I am trying to narrow the sidebar itself, not the widget.

  6. venati
    Member
    Posted 2 years ago #

    Ziv, you are my saviour :) Thank you yet again, your advice worked to remove that empty column. It looks good now.

    I would appreciate if you can give something similar on narrowing the Sidebar too.

  7. venati
    Member
    Posted 2 years ago #

    The original problem of moving Sidebar from right to left is now resolved, thanks to Ziv.

    Appreciate if Ziv or someone could help with adjusting the sidebar width though :) Meanwhile, I am trying from other posts.

    Thank you all.

  8. Ziv
    Member
    Posted 2 years ago #

    Go to line 150 (for the final time)

    replace this code:

    #content {
        float: right;
        padding-top: 20px;
    }
    
    #sidebar {
        background: url(images/conent-sep.png) repeat-y top right;
        float: left;
        padding-top: 20px;
    }

    with this new code:

    #content {
        float: right;
        padding-top: 20px;
        width:75%;
    }
    
    #sidebar {
        overflow: hidden;
        background: url(images/conent-sep.png) repeat-y top right;
        float: left;
        padding-top: 20px;
        width: 20%;
    }

    Everything is now fixed. To make the sidebar bigger and the content area smaller, increase the width of the sidebar and decrease the width of the content. Make sure that when you add the width of both div tags, you never pass 95%. So for example, I used 20% and 75%. You can use 25% and 70. If you ever go over 95%, your sidebar will appear at the end of the page.

Topic Closed

This topic has been closed to new replies.

About this Topic