Removing Elements from CSS

  • Author
    Posts
  • #692640

    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.

    #692778

    timethief
    Member

    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 > https://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.

    #692812

    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?

    #692814

    timethief
    Member

    @TSP
    G’day to you. :)

    #692818

    G’day TT.

    #692933

    @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

    #692950

    jeromeroque
    Member

    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!!

    #692961

    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.

    #693009

    @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?

    #693011

    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. :)

    #693012

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

    #693013

    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;
    }
    #693014

    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!

    #693015

    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? :)

    #693018

    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!

    #693019

    Aha. Between the top of the screen and the “BMC Library” gray box?

    Try this:

    #page {
        margin-top: 25px;
    }
    #693022

    jeromeroque
    Member

    Thanks!

    #693023

    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?

    #693024

    Is this what you want?

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

    #693025

    @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?

The topic ‘Removing Elements from CSS’ is closed to new replies.