Oxygen: Removing Category Labels on Showcase Page

  • Author
    Posts
  • #2694053

    jejorge2009
    Member

    Dear all:

    My Showcase / Home Page of my Oxygen theme shows on the main /central column, above each of the posts listed, a label corresponding to the category of the post.

    I’d like to remove that label, as long as that does not leave a big blank space between each post . I’ve seen that in the WP Oxygen demo site those labels don’t show up.

    How do I do it?

    Thanks in advance!!

    The blog I need help with is cambiocultural.org.

    #2694106

    hallluke
    Member

    Hi, the Oxygen demo site does show them, they’re just positioned at the top right of the featured images. Yours appear out of place because you’ve added some padding between posts. If you want to keep them but display them like the demo change your hentry code from padding to margin so it looks like this instead:

    .hentry {
    	margin-top:90px
    }

    Or you can get rid of the categories completely on your home and archive pages with this code:

    body.home .entry-meta .cat-links,
    body.archive .entry-meta .cat-links {
    	display: none;
    }

    If you do choose to keep them then I’d suggest reducing the background colour opacity so the text is easier to read:

    .cat-links {
    	background-color: rgba(0,0,0,0.5);
    }
    #2694107

    jejorge2009
    Member

    Dear Hailluke:

    Many thanks. I had the impression that something had changed after I added (by suggestion of one of the very helpful guys of this community) the following code:

    .hentry {
    padding-top: 90px;
    }

    The idea was that the sharing buttons at the top of each post and page don’t overlap with the post titles. It worked, but now I have the impression that it may have produced this issue. Am I wrong?

    #2694133

    hallluke
    Member

    You’re exactly right. Here’s a better way to increase the gap between posts and move the category link upwards so it’s not overlapping the featured image:

    body.page-template-showcase-php .hentry,
    body.archive .hentry {
        margin-top: 90px;
    }
    body.page-template-showcase-php .cat-links,
    body.archive .cat-links {
    	top: -2.3em;
    }

    Let me know what you think.

    #2694147

    jejorge2009
    Member

    Dear hallluke:

    That was a nice try !! The category issue was solved, but the sharing buttons overlapped again with the text below them….

    See

    https://cambiocultural.org/trial/

    #2694148

    hallluke
    Member

    Can you post a screenshot? It looks OK to me but maybe I’m missing something or maybe some of my various ad blocking browser extensions are messing things up for me.

    #2694149

    jejorge2009
    Member

    Dear hallluke:

    Sorry for having confused you !! I had already posted the screenshot in this url:

    https://cambiocultural.org/trial/

    (I meanwhile returned to the previous code)

    #2694150

    jejorge2009
    Member

    You can click and enlarge the pic on that url

    #2694151

    hallluke
    Member

    Oh it’s late here, I was looking at the social links on that page and not at the image!

    It looks like you only have the social links on your pages and posts (let me know if they crop up anywhere else) so you can target the padding to those types of pages and the margin and category link shift to the others, like so:

    body.page-template-showcase-php .hentry,
    body.archive .hentry,
    body.blog .hentry {
        margin-top: 90px;
    }
    body.page-template-showcase-php .cat-links,
    body.archive .cat-links,
    body.blog .cat-links {
        top: -2.3em;
    }
    
    body.page .hentry,
    body.single .hentry {
        padding-top: 90px;
    }
    #2694152

    jejorge2009
    Member

    Now the sharing buttons are OK, but the category labels on the showcase page remain as before : (

    I keep your last new code.

    #2694153

    jejorge2009
    Member

    Also the Blog page seems to show the big gap between posts:

    https://cambiocultural.org/blog/

    #2694155

    hallluke
    Member

    Add this code at the very bottom of your existing CSS and I think we might have cracked it (turn out the showcase page also has the page class so we need to overwrite it):

    body.page-template-showcase-php .hentry {
    	padding-top:0;
    }
    #2694156

    hallluke
    Member

    And yes I though that was the point? You specified a 90px gap at the top of each.

    #2694159

    jejorge2009
    Member

    I did it. You can see the result. The category labels are in the right position, while the gap between posts keeps looking too large.

    So I cannot avoid that gap if I define a gap to prevent the sharing buttons overlapping?

    #2694160

    hallluke
    Member

    Change the 90px margin in the first section of code and see if that helps, you’ll need to check your showcase, blog, posts and pages to make sure though. CSS can be a bit tricksy sometimes!

    #2694163

    jejorge2009
    Member

    Well, I was gradually reducing that figure until 30 px.

    The problem of the gap between posts seems to have been solved.

    At the same time, not only the sharing buttons don’t overlap with titles, but I think nothing has changed in this regard !!

    I now also added the code you proposed to make the category labels more visible

    So apparently the problems are solved, but I think I don’t understand how , haha !!

    Thanks a lot for your patience !!

    #2694165

    hallluke
    Member

    I’m glad we got there in the end!

The topic ‘Oxygen: Removing Category Labels on Showcase Page’ is closed to new replies.