Oxygen: Removing Category Labels on Showcase Page

jejorge2009 · Member · Jul 20, 2016 at 9:29 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
hallluke · Member · Jul 20, 2016 at 9:40 pm
Copy link
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);
}
```
jejorge2009 · Member · Jul 20, 2016 at 10:04 pm
Copy link
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?
hallluke · Member · Jul 21, 2016 at 6:54 am
Copy link
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.
jejorge2009 · Member · Jul 21, 2016 at 8:35 pm
Copy link
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/
hallluke · Member · Jul 21, 2016 at 8:50 pm
Copy link
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.
jejorge2009 · Member · Jul 21, 2016 at 9:05 pm
Copy link
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)
jejorge2009 · Member · Jul 21, 2016 at 9:06 pm
Copy link
You can click and enlarge the pic on that url
hallluke · Member · Jul 21, 2016 at 9:15 pm
Copy link
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;
}
```
jejorge2009 · Member · Jul 21, 2016 at 9:32 pm
Copy link
Now the sharing buttons are OK, but the category labels on the showcase page remain as before : (

I keep your last new code.
jejorge2009 · Member · Jul 21, 2016 at 9:35 pm
Copy link
Also the Blog page seems to show the big gap between posts:

https://cambiocultural.org/blog/
hallluke · Member · Jul 21, 2016 at 9:39 pm
Copy link
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;
}
```
hallluke · Member · Jul 21, 2016 at 9:41 pm
Copy link
And yes I though that was the point? You specified a 90px gap at the top of each.
jejorge2009 · Member · Jul 21, 2016 at 9:51 pm
Copy link
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?
hallluke · Member · Jul 21, 2016 at 9:54 pm
Copy link
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!
jejorge2009 · Member · Jul 21, 2016 at 10:15 pm
Copy link
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 !!
hallluke · Member · Jul 21, 2016 at 10:20 pm
Copy link
I’m glad we got there in the end!

No items found.