Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Trouble with Page Display and Bullets in Bueno

  1. filmgurl
    Member

    Hello,

    I recently started playing around with the CSS customization with Bueno theme and I have encountered two issues I cannot seem to resolve on my own:

    1) When clicking on a page link from the upper menu bar, the content is displayed too far to the right, cutting off the side bar. The home page, individual posts and category links from the upper menu bar are displayed correctly.

    2) Bullets in the sidebar appear twice, side by side.

    Thank you for any help you can provide!

    ~GamerWife

    The blog I need help with is filmgurl.wordpress.com.

  2. timethief
    Member

    Pleasw post an active link starting with http:// to the blog in question. Then when Staff who provide CSS editing support, enter this thread they can immediately locate the blog and assist you.

  3. filmgurl
    Member

    Sorry,

    it's http://www.filmgurl.wordpress.com

    pages with display issues are: http://www.filmgurl.wordpress.com/film & http://www.filmgurl.wordpress.com/about

  4. timethief
    Member

    Thanks. (FWIW there are no "www's" in any .wordpress.com URLs but the software here will direct links including the old "www's" to the correct URL without it.)

  5. filmgurl
    Member

    thanks.

    I was able to resolve the second issue with the bullets, but "pages" (not "posts") are still cut off on the left, and I just noticed that there is no longer navigation at the bottom of the home page to view older posts

  6. timethief
    Member

    I'm sorry but I can't help with CSS editing. Staff can but they are currently unavailable.

    Support will be closed this Sunday and Monday. It will re-open on Tuesday, February 28th. The forums are open over the break. From: http://en.support.wordpress.com/contact/

  7. designsimply
    Staff

    1) When clicking on a page link from the upper menu bar, the content is displayed too far to the right, cutting off the side bar.

    In the CSS you added, the width rule in this block is causing the pages to not be centered. You should remove the width from this block:

    .attachment,.post,.page {
position:relative;
width:604px;
margin:0 auto;
}

  8. designsimply
    Staff

    2) Bullets in the sidebar appear twice, side by side.

    How did you fix this one? :)

  9. filmgurl
    Member

    Thanks!! The width rule fixed it!

    As for the bullets, I changed

    #content ul,#content dl {
    list-style-type:none;
    }

  10. filmgurl
    Member

    Now I just need to figure out how to fix the margins at the bottom so that the "Older/Newer" links are no longer hidden

  11. designsimply
    Staff

    Nice! Thanks for posting about how you fixed the bullets issue.

    Also, I've gotta say it. I seriously love your blog. :)

  12. designsimply
    Staff

    Now I just need to figure out how to fix the margins at the bottom so that the "Older/Newer" links are no longer hidden

    In your custom CSS, you have this:

    .navigation {
border:1px solid #ccc;
line-height:4em;
clear:both;
height:auto;
position:relative;
padding-top:17px;
padding-bottom:17px;
border-width:1px 0;
margin:0 auto;
}

.navigation span {
display:block;
}

    That is causing the previous/next link on single posts to look like this: http://cl.ly/EfDw

    If you remove the CSS shown above, it looks like this: http://cl.ly/Edzr

    Example link where I see this happening: http://filmgurl.wordpress.com/2012/02/29/obligatory-end-of-the-month-goal-check-in/

    What were you trying to change with the CSS above? Maybe it's affecting more than you intended. If you describe what you were trying to change with that CSS, I can probably take a look and find a way to make it work without affecting the previous/next links on single posts.

  13. filmgurl
    Member

    Thanks!

    Actually, I'm not sure where the CSS above came from, so I've just removed it altogether and it seems to be fine.

    However, I was actually looking for help with the navigation at the bottom of the home page. The links to "Newer"/"Older" are there, they just aren't visible. It seems like something with the bottom margin is covering them up. Is this right? Or am I just missing some code to make them visible?

  14. designsimply
    Staff

    I wasn't sure what it was for either. If something else mysteriously starts acting funny, then you might find the reason. :)

    Ah thanks, it helps to have a more specific example. Also, I looked at the Bueno demo site and I see them there: http://beunodemo.wordpress.com/

    This CSS block seems to be the culprit:

    .attachment,.post,.page {
position:relative;
margin:0 auto;
}

    If you remove ".post" from it or if you remove the margin, or the whole block for that matter, then the "Older Entries" link appears on the home page. However, I'm a little wary about just removing CSS that you may have edited or added for another reason. Do you remember why you added that block of CSS?

    Note that the best way to add new CSS is to select the "Add my CSS" option in the CSS Settings below the editor on the Appearance → Custom Design → CSS page, and not to copy and paste an entire stylesheet. Also, if you just add in CSS for the things you want to change, it makes it a lot easier to debug if problems crop up.

  15. filmgurl
    Member

    Thank you so much! That should be everything!

    Most of the CSS that has been causing problems for me was preloaded in the editing window when I opened it. I'm not sure where it all came from, but some of it does seem important, so I've just been trying to edit as little of it as I need to to restore the features of my blog to what they were before I added custom design.

  16. designsimply
    Staff

    That's odd. It shouldn't preload any! If I hear any other similar troubles with code populating like that, I will look into it deeper.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags