Remove 'comments' link in WP blog post, other CSS

I am trying to clean up some wasted space on my average blog posts and pages.

This is what it currently looks like:
http://restministries.com/2015/07/tree-2/

This is what I want:
http://restministries.com/wp-content/uploads/2015/07/ss-spacing-blogicons.gif

This includes 3 different things:
1) the "Comments" is from my theme (remove it)

2) the Pinterest button is from Pin It Button Pro Plugin (this plugin allows custom CSS within its settings)

3) the other social icons are from Article Share plugin (this plugin allows custom CSS within its settings) [move it up, after pinterest]

I have messed around with the CSS and padding and spacing, and have asked for help from forums on the plugins, to no avail.

Can someone give me a hand? Appreciate it so very much!

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey Lis!

    I've got some CSS for you. :slight_smile:

    //remove blue comment box//
    .content .entry-header .entry-meta .entry-comments-link {
    display: none;
    }

    //bring PinIt and Social Buttons in line//
    .pin-it-btn-wrapper {
    display:table-cell;
    padding-top:10px;
    margin-left:-50px;
    padding-right:30px;
    }
    .pf-content {
    display:table-cell;
    }

    You may need to use the !important declaration to override other !importants in your CSS, so if either piece doesn't work initially, try adding an !important before the semi-colons.

    Thanks! Oh! And don't add any of this to the Pin It plugin CSS file, drop it in your custom css file, so it's easier to keep track of what all you've added to the site.

    Thanks!

  • Lis
    • Site Builder, Child of Zeus

    Thank you!

    Okay, at first it didn't work so I added the !important; tags.

    it looks like this:

    //remove blue comment box//
    .content .entry-header .entry-meta .entry-comments-link {
    display: none !important;
    }

    //bring PinIt and Social Buttons in line//
    .pin-it-btn-wrapper {
    display:table-cell !important;
    padding-top:10px !important;
    margin-left:-50px !important;
    padding-right:30px !important;
    }

    .pf-content {
    display:table-cell !important;
    }

    But nothing has changed. did I mess something up?

    I added it into my Custom CSS area.

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey Lis!

    If you enable support access, I can take a look right away. It's a fairly slow day on the front lines. :slight_smile:

    Your CSS is kind of tricky, and your theme makes some interesting choices about where to put divs. I think I can make it work with a little time and some tenacity. :slight_smile:

  • Ash
    • WordPress Hacker

    Hello @Lis

    I hope you are well today.

    Please check now, updated code is:

    /*remove blue comment box*/
    .content .entry-header .entry-meta .entry-comments-link {
    display: none;
    }
    
    /*bring PinIt and Social Buttons in line*/
    .pin-it-btn-wrapper {
    display:table-cell !important;
    padding-top:10px !important;
    padding-right:30px !important;
      clear: none !important;
      float: left !important;
    }
    
    .entry-content .dpArticleShare{
      left: 5px !important;
      display: inline !important;
    }
    
    .pf-content {
    display:table-cell !important;
    }

    One main reason of not working before is using comment with double slash (//) where in css comment should be like the following:

    Correct: /* This is a comment */
    Incorrect: // This is a comment //

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.