Need help? Check out our Support site, then

reduce sidebar broadness from the sides

  1. hi!

    My sidebar is too broad from the sides , I tried to add few commands in CSS but seems it does not have any effect.

    Can you please help,and tell me where am I going wrong?

    Similarly after using CSS command for centering my social icons it yet doesn't seem to be in centre...:(

    Help please!

    The blog I need help with is

  2. First to align the text in centre

    #social-networks {
    	text-align: center;
    #social-networks ul {
    	display: inline-block;
  3. @hobnobnoor, if you are talking about the social icons you have in the text widget at the top of your sidebar, this will center align the images for you.

    #text-3 {
    text-align: center;

    If you want to center align the image in the image widget, go to Appearance > Widgets, click on the right end of that image widget and select "center" from the Image Alignment pulldown and save.

    When you say the sidebar to too broad from the sides, are you meaning you wish to make it narrower? If so, you will have to narrow #secondary width, and then increase #primary width. They are declared using a percentage, and I would suggest keeping the percentage rather than switching to an absolute, such as pixels so that the responsive design will still function properly. You can add the following to your CSS and then decrease the secondary width and increase the primary width.

    .content-area {
    width: 62.7451%;
    .site-main .widget-area {
    width: 29.4118%;

    Let me know if I misunderstood on the too broad from the sides, or if you have any problems.

  4. @hnsaifi : Thank you I used the command for good :)

    @thesacredpath : yes! you pretty much got it right,I did use your mentioned command in my CSS and after playing around with the secondary and primary figures I finally made the sidebar narrower..Thank You for your help!

  5. @Noor! You're welcome and thanks Richard for improving my comment.
    Your blog looks nice now, the way you want it to be look like another site you mentioned. :)

  6. @hobnobnoor, you are welcome and please let us know if you have further questions.

    @hnsaifi, it is always a team effort, and glad to have you helping out!


  7. hey richard yes I would need your help how can I create my sidebar like this website I love that sidebar.

    after recurrent changes in my website I have finally decided to stick with the present color combination however I would love to push my sidebar along with my pic on the left hand side!

    After making many headers for my site through Microsoft word after loading them on my site header it looks very blurred and not sharp how can I make a simple header like this one like just my site name post my picture?

    I hope you getting what I mean?

  8. Hi, the sidebar of your theme can be styled like the sidebar you see in the site you reference. They have their menu in the sidebar (about me, press, sponsor, etc.), are you wanting to do that on your site and abandon the top navigation? To make different widgets in the sidebar different (different color for the title background, etc.) you will need to target those specific widgets by ID in your CSS. As an example, here here is some sample CSS for your "I love these blogs" widget.

    #jp_blogs_i_follow-2 h1 {
        background: none repeat scroll 0 0 #E9DEA5;
        border-bottom: 6px solid #CCCCCC;
        line-height: 200%;
    #jp_blogs_i_follow-2 {
        border: 6px solid #CCCCCC;
        padding: 0;

    You can use the following code to move the sidebar on your home page to the left. You currently have the .home #secondary rule in your custom CSS, so you can add the "float: right;" declaration to that (I included it in its entirety below) and then add the .home #primary rule to your CSS.

    .home #primary {
    float: right;
    .home #secondary {
    display: block;
    float: left;

    For header images, I might suggest using a program like Gimp, which is a free download image editing program with a wealth of features and will typically give you much better results than MS Word.

    You want to create your header images at the exact size you want them to be in your site and then save them as a PNG image. Graphic images, such as you are using work best and will remain the sharpest if you use PNG. JPG file types are better suited for photographic images or images with gradients.

    Let me know what you think of the above.


  9. yes that's exactly how I want my sidebar and I will be more then happy to get rid of the navigation bar,but before I use the commands for CSS u mentioned above do I have to delete the old CSS commands ??

  10. Hi, You can add any new CSS, such as what I have given, to the end of your current CSS and it will override anything above it, but you should take out anything that would conflict. The code I gave specifically targets the "blogs I follow" widget, so nothing in your CSS would interfere. I would add my example at the end of your CSS so that it will override anything above that might interfere.

    If you want to style all widgets consistently, and like the example I have given, then the selectors I gave for the widget styling in my example would need to change.

    Let me know if you have further questions.

  11. Hey !
    Thanks I did change my sidebar successfully to the left and the I love these blogs is now wrapped with border i love it now thank you!

    1.Now after following your CSS command for I love these blogs I went to inspect element for the image and social icons on sidebar to make it look like the I love these blogs style with borders and all but unfortunately the command I gave din't work can you help me with the right command for the above 2 as well?

    2.If you check my homepage I wonder where I made changes by mistake in the Css not sure if i did because of which my Background(the blue and white polka) has widened up from the right side how do I bring that to same size as the left side?
    I just want the background to show slightly on both the sides of my page.

    3.On my main Navigation Bar how do I place the LTC rock ring tutorial and ltc jhumka tutorial under Ltc tutorials I have made both parent with main menu Ltc tutorials here
    yet of them is reflecting on the main navigation bar seperately,kindly help me correct that?

  12. I noticed that you have a large white gap between the sidebar and the content. If this wasn't your intention, increase the width in .content-area in your CSS. I've used a width of 68.7451% which seems to work well, but you can adjust that as you desire.

    .content-area {
    width: 68.7451%;

    1. If you wish all widgets to be styled the same as the I love these blogs widget, remove the #jp_blogs_i_follow-2 h1 and #jp_blogs_i_follow-2 rules I had given you and add the following instead rule.

    .widget-title {
    background: none repeat scroll 0 0 #A5E1E9;
    border-bottom: 6px solid #CCCCCC;
    line-height: 200%;

    Next. add the following two declarations to the existing .widget rule you have in the CSS already.

    border: 6px solid #CCCCCC;
    padding: 0;

    2. Remove the margin: 10px; declaration you have in the .site rule in your CSS. This will center the main content section within the browser window.

    3. Not all themes support dropdown menus natively. To have dropdown menus in your navigation, create a Custom Menu. Custom menus give you a lot of options and have some advanced features that you will likely find useful, such as the ability to create submenus, add categories, arrange the menu items in the order you desire, and you can even add custom menu links if you desire.

    Your site is looking very nice. I love the colors.

  13. Thank you I wouldn't have been able to reach this far with my website without the support and help of you and your lovely team :)
    I made all the changes mentioned above.

    1.why the social icons on the area dint get the same look as the below 2 widgets on the sidebar?
    2.Remember you mentioned about this program GIMP for creating header,unfortunately my PC is not supporting that program is there any other program you can suggest to?

  14. also on my main navigation bar the sub menu's under main menu LTC tutorial are overlapping the LTC tutorial menu,I want the sub menu's to drop down below the main menu and not over it, and how can I change the drop down menu(sub menu's) back ground color (pink)and each time the cursor stops at a main menu I want the main menu to have pink color is that possible?

  15. Hi,

    1. The social widget does not have a title. Go to Appearance > Widgets and add a title to that text widget.

    2. Hmmm, there are a number of free image editing applications for Windows. You might look at Picasa:

    For the submenu position issue, add the following to your CSS:

    .navigation-main ul ul {
    top: 7.5em;

    For the background on the submenu items on hover, add the following and edit the colors as desired:

    .navigation-main ul ul a:hover {
        background: #CC0000;
        color: #FFFFFF;

    For the main top level navigation tabs on hover, add the following and edit as desired:

    .navigation-main ul li a:hover {
        background: #CC0000;
        color: #FFFFFF;
  16. Awesome thesacredpath!! you are too good!
    I am receiving lot of compliments on my website and I bet without you it wouldn't look like this- A big thank you to you and word press, I surely have to write loads of good things about word press..!!!

  17. You are welcome, and thank you. Happy blogging!

  18. hello thesacredpath!

    Sorry to bother you again! but have a few things to sought again,
    1.I had added 3 tutorials as sub menus under main menu LTC Tutorial but only 2 of them is showing as sub menus where as the 3rd tutorial wall art tutorial doesn't show under the same. can I change all my pictures into one size like same size as the contents of my page? and how can I make all the contents of my posts of the same font.

    3.please see my tutorials section there is a lot of spacing errs in there between 2 paras or pic and content, tried to fix it with the command you mentioned above but it din't work any better way to fix it for good for all the tutorials that I might post in future as well?

  19. Sorry to beat a dead horse, but I can't for the life of me figure out where the style.css file is kept on a WordPress blog, nor how to edit it. In Dreamweaver, I open the .css file, find the item that needs to be edited and make the changes. I see dated tutorials that show it is somewhere under appearance > custom design > style.css but all I can find is a blank area for CSS code that doesn't respond to anything I type. Any ideas?

  20. At, the CSS tools are used to add new CSS to override what's in the theme, there is not an option to edit the CSS directly. This page explains in a bit more detail if you're interested:

    You can see any CSS for any theme using your browser's built in tools, and that's the best way to look at CSS if you are making changes to an existing stylesheet for a theme.

    First, make sure you have an updated browser:

    Right-click on any element on the page and select the "Inspect Element" option. That should pull out the panel that shows the HTML for what you right-clicked as highlighted, and it should also show all the CSS that applies to it on the right.

    I can find is a blank area for CSS code that doesn't respond to anything I type.

    Please start a new help request at and include a link to your blog and an example of some CSS that you tried.

Topic Closed

This topic has been closed to new replies.

About this Topic