Need help? Check out our Support site, then


Removing Elements from CSS

  1. libraryexample
    Member

    There are a few items I'd like to remove from our blog (the random gray border, the tabs for RSS and Archives, the time/date stamps, comment sections on most pages) and we've purchased the CSS upgrade. It looks like either you need to start from scratch with CSS or add on to the current CSS- how do you take things out??
    Thanks for your help!
    abigail

    The blog I need help with is brownmackielibrary.com.

  2. When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:
    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/
    You may also find that your questions have been previously answered by searching > http://en.forums.wordpress.com/tags/depo-masthead
    If not then please be patient as we only have one Volunteer who helps with CSS editing and he is not available at this time.

  3. You hide things by using
    display:none;

    in the specific selector for that element.

    The thing is, most of what you are asking for does not take the CSS upgrade.

    Tabs for RSS and Archive can be removed by creating a custom menu and then including only the menu items you want.

    Comments can be turned off globally (for all comment from that point forward) by going to settings > discussion and deselecting to allow comments and trackbacks. Any existing pages or posts will have to be edited and have their comments disabled manually in the "discussion" module in the page or post editor. If the discussion module does not show below the editor text area, go to screen options at upper right and enable it.

    The date/time cannot be individually removed. The whole line is under one selector in the CSS and all of it will go.

    #content small {
    display:none;
    }

    On the border lines, do you want them all gone?

  4. @TSP
    G'day to you. :)

  5. G'day TT.

  6. @timethief, thank you for clearing up what to include in the modification section!

    @thesacredpath- thank you for your time- can I have some more?

    RSS and Archive Tabs- Since I didn't create them, I'm not seeing any option on the custom menu page to remove them. Do i have to create a new menu witht he elements I want and then they'll just NOT appear?

    Comments- on the posts for the home page, there isn't a disabling comments section under the editor. Is there another way to do this? And will that make the whole box disappear?

    Date/Time- When you say "The whole line is under one selector..." What do you mean by the "whole line"? What else would I lose?

    Borders- What I really want is to clean up some of the dead space at the top and the middle, so that the elements below the fold will be somewhat noticeable.

    Many thanks!
    abigail

  7. To clarify if I understand how to hide the time and date stamp, I must pay for the upgrade to access CSS?

    Or is there a way to remove without buying the upgrade?

    I am new to WordPress and while it is an overwhelming experience, I am learning to enjoy the flexibility it can provide.

    I've looked at every link under Appearance but I may have missed it or I am just not familiar with WordPress yet.

    Thanks again!!

  8. You did not provide a link to your site, but if it is hosted here at wordpress.com, then yes you would have to buy the CSS upgrade in order to hide the date and time, but do note that in many themes the date and time, author name, categories, tags and even the "leave a comment" link are all under the same selector in the CSS which means you cannot hide just part of the metadata. You can only hide all of it.

  9. libraryexample
    Member

    @thesacredpath I should have read your earlier instructions on removing the commentbox- I'm rushing through things too much- so sorry!
    When I did disable the comments, the red box simply changed from saying "comments" to "permalink" How would I get rid of the whole thing?

  10. I see you are using the DePo Masthead theme.

    To remove outside borders from the main content area and the widget area at the bttom:

    #container .sleeve, #page #sidebar .sleeve {
         border: none;
    }

    To tighten up the vertical spacing between major elements like the main heading, menu, container, and widgets, start with this and adjust the numbers:

    #container h1 {
         margin: 45px auto 15px;
    }
    
    #menu ul.menu {
         margin: 0px auto 15px;
    }
    
    #container .sleeve  {
         margin-bottom: 25px;
    }

    Another way to shorten up the top portion of posts is to use the more tag.

    To remove the commend box on the home page from the DePo Masthead theme:

    #content .readmore a:link {
        display: none;
    }

    To customize which menu items appear, using custom menus is the best choice for this theme.

    There is also a way to disable comments. It's done on a per post basis for already existing posts, but DePo Masthead still does display the read link as a permalink because it's trying to hang on to that design element. :)

  11. libraryexample
    Member

    Thank you DesignSimply!! Is there a way to take off that time/date satmp for all the posts?

  12. Here's the HTML form an example byline in DePo Masthead:

    <small>In <a href="http://brownmackielibrary.com/category/uncategorized/" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a> on <strong>September 13, 2010</strong> at <strong>2:31 pm</strong></small>

    Since just the date isn't separated, you can hide the whole byline:

    #content.group small {
        display: none;
    }
  13. libraryexample
    Member

    Oh my- thank you SO much!!
    One last thing, how can I shorten up the space at the top and between the top and bottom halves?
    I am eternally grateful- seriously!

  14. You've already shortened the space between the top content (#container) and the bottom content (#sidebar) with this:

    #container .sleeve {
    margin-bottom:0;
    }

    Did you mean something else? Which top and bottom halves are you referring to exactly? :)

  15. libraryexample
    Member

    I meant between the top of the screen and the first element (the heading).
    And then I meant between the three top parts (slide show, book club, weather widget etc) and the widget area below it with the calendar, carpool link, and. Meebo widgets.
    Sorry for being vague!

  16. Aha. Between the top of the screen and the "BMC Library" gray box?

    Try this:

    #page {
        margin-top: 25px;
    }
  17. Thanks!

  18. libraryexample
    Member

    I've added that but the site looks completely absurd now that I'm at home at viewing it on my iPad. I'll have to try it agin later when I can get to a computer. Any ideas on how to take out all that space and random line stuff that's in the middle between the top half of the site and the bottom widget area?

  19. Is this what you want?

    `#home .post, #content .readmore {
    border: none !important;
    }

  20. libraryexample
    Member

    @thesacredpath Yes! That's it - thank you! How can I move up the widget area on the bottom a bit so there's a tad less white space?

  21. thesacredpath
    Staff

    You are going to think this weird probably but do the following and see what you think.

    #sidebar ul {
    border-top: none;
    }
  22. libraryexample
    Member

    I think that looks better/different, but I'm not sure. Do you mind taking a look and telling me what you think? Is it getting too crowded?

  23. thesacredpath
    Staff

    Yeah, it needs the white space to separate it from the content, or at least some white space.

  24. libraryexample
    Member

    Ok, thanks again for your help!

  25. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic