archives scroll bar

  • Unknown's avatar

    I have added the archives scroll bar widget to my sidebar. Unless I go into to CSS and decrease the width, the title “archives” shows up on the top of my blog and the scroll bar is at the very bottom of my page (it’s like that now if you want to check it out: http://www.katescorner.wordpress.com). Other than decreasing the width of my pictures, how can I get the scroll bar and title to stay together? thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    You’ve set your #primary too wide and it is breaking #secondary (the sidebar). You need to set the #primary width back to about 600 from 620.

  • Unknown's avatar

    yes, i’ve done that but it makes all my pictures out of proportion. is there no other way?thank you!

  • Unknown's avatar

    Then you have to go through and widen all other elements so that it will support a 620px wide primary. With so much of that theme done in percentages instead of pixels, it take a lot of going back and forth changing one thing, then another, then another, then another, then back to the beginning.

  • Unknown's avatar

    Right now, #primary is overlaying #secondary so there isn’t enough room for #secondary which breaks it and sends the widgets to the bottom.

    You will have to work with #page, #content, #primary and #secondary.

  • Unknown's avatar

    any way to tell me how to do that? i’m very new at CSS. I understand if it’s too much trouble!!

  • Unknown's avatar

    I’ll have to start from scratch from a unmodified theme to be able to help with this. I’ll work on it tonight and then post the changes for you. It might not be tonight, but tomorrow.

  • Unknown's avatar

    OK, you can look at what I’ve done by visiting one of my test blogs: http://flippintestblog.wordpress.com/ .

    You are going to have to make a new header image that is 900px wide to fit the new theme width. The overall width of the theme ( #page ) has to be increased by the amount you increased the content area. Notice that the page tabs overlay your image. When you make the new image, push the “corner” text up so that the page tabs won’t overlap it. You can’t use the custom header uploader now that you have the CSS upgrade. What you want to do is upload the image to your media library, get the URL of that image and then replace the URL in the #header section with that URL.

    I also changed the color of the tabs, but you can set them to whatever color you want. If you don’t, the tabs and the text will not show up.

    First thing is to delete everything you now have in the CSS edit window and then paste the following into the window. At wordpress.COM, never paste the entire CSS stylesheet into the window unless you are completely starting from scratch and changing everything. If you do, it messes things up and breaks any relative links in the CSS.

    In the below, the “current” navigation tab color is the ##F26EAA. The “grey” color is for the inactive tabs and the #666666 color is for the hover color (when you hover your mouse over the tab).

    #page {
    width:900px;
    }
    
    #header {
    background:transparent url(http://katescorner.files.wordpress.com/2009/10/10_09.jpg) no-repeat scroll center center;
    }
    
    ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
    background:#F26EAA;
    }
    
    ul.menu li a {
    background:grey;
    }
    
    ul.menu li a:hover {
    background:#666666;
    }
    
    #primary {
    width:620px;
    }
  • Unknown's avatar

    wow!!!! thank you so very much! i’m going to look at it right now! thanks so much again!

  • Unknown's avatar
  • Unknown's avatar

    ok, like you said i just cut and pasted and great! thanks! (need to go back and work on the color for tabs).

    one more question…there is now a gray border around my photos, which is fine but the horizontal ones don’t have that border on the right side. any idea why??

    thanks so very much again for your help!

  • Unknown's avatar

    That is how the theme shows images. Add the following to your CSS to get rid of them.

    #primary .entry-content img {
    border:none;
    }
  • Unknown's avatar

    thanks so much again!!

  • Unknown's avatar
  • The topic ‘archives scroll bar’ is closed to new replies.