Docs

[bedingfield]

Hi there,

I want to style my own post tags, but I don’t seem to be able to locate the CSS for tags.

Can you let me have said CSS please?

I want to replace with below, but I thought using classes – .single .post-entry-tags would make the code below work, but it doesn’t. Any ideas?

/* Line 1 */

.single.post-entry-tags a:hover, 
.single.post-entry-tags a:focus {
  background-color: #333333;
  background-image: none;
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: 0% 0%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  color: #ffffff;
  }

/* Line 1 */

.single.post-entry-tags a:hover, 
.single.post-entry-tags a:focus {
  background-color: #333333;
  background-image: none;
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: 0% 0%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  color: #ffffff;
  }

/* Line 1 */

.single.post-entry-tags a {
  padding-top: 6px;
  padding-right: 10px;
  padding-bottom: 6px;
  padding-left: 10px;
  background-color: #13475e;
  background-image: none;
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: 0% 0%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  color: white;
  text-transform: uppercase;
  }

/* Line 1 */

.single.post-entry-tags a:hover {
  opacity: 0.8;
  }

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[bedingfield]

Here you go…

http://elyrunners.club/2016/05/01/bere-pen-10k-tamar-peninsula-devon/

I would only like this styling for single blog posts though.

I notice that tags show on blog index… can I remove them from there?

http://elyrunners.club/blog/

Thank you.

[Christopher]

Hi there,

Please add this :

header.entry-header a[rel=tag] {
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    background-color: #13475e;
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    color: white;
    text-transform: uppercase;
}
header.entry-header a[rel=tag]:hover {
    background-color: #333333;
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    color: #ffffff;
}
.blog header.entry-header a[rel=tag] {
    display: none;
}

Hope it helps.

[bedingfield]

Hi there,

thats perfect. How would I centre the tags please on a single blog post?

Also, using .blog header.entry-header a[rel=tag] {display: none;} does hide tags on index, but it leave a big white space where tags should be.

Can this be removed?

Thank you.

[Rad]

Hi there,

Your tags are centered, would you mind providing a screenshot of what you’re getting?

And please replace your CSS with this to hide the tag,

  .blog .entry-header .p-meta + p {
  display: none;
  }

Thanks!

[bedingfield]

Hi there,

If you look at the far right box – Bere Pen 10K – after the date, where tags would be displayed, still shows more white space (because display:none is only hiding tags). The boxes to left are how they should look.

[Rupok]

Hi there,

Thanks for updating. The correct code is already provided by Rad but I can’t see that on your site :

.blog .entry-header .p-meta + p {
  display: none;
}

You are using the below CSS to hide the tag only :

.blog header.entry-header a[rel="tag"] {
  display: none;
}

But still the paragraph tag is there with default margin. So let’s use the suggested code.

Hope this makes sense.

[bedingfield]

Hi there,

I would to replicate heading and date font size as per my masonry blog page. How would I do this please?

http://elyrunners.club/category/race-report/

http://elyrunners.club/blog/

Also, I would really like to see the title say – Category Archive: Race Results – How would one do that?

Thank you.

Thank you

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

.archive header.entry-header h1.entry-title,
.archive header.entry-header h2.entry-title a {
	font-size: 24px;
}
.category header.entry-header p.p-meta {
	color: rgb(40,50,63);
	font-size: 82%;
}

Regarding your archive title, on your admin dashboard navigate to Posts > Categories then edit your category and fill the Archive Title field.

Hope it helps, Cheers!

[bedingfield]

Hi there,

Thanks for replying. The p-meta works, but this has no effect on the size for the heading…

.archive header.entry-header h1.entry-title,
.archive header.entry-header h2.entry-title a {
	font-size: 24px;
}

http://elyrunners.club/category/race-report/

Any other suggestions?

Thank you.

[Christopher]

Hi there,

Please try this :

.archive h2.entry-title, .archive h2.entry-title a {
    font-size: 24px !important;
}

Hope that helps.

[bedingfield]

Perfect. Thank you.

I would still, ideally, like to have category page title showing though… When on a category page it says ‘Category Archive’ but I would like it to say, for example, category Archive: Race Reports. Can I do this?

Also, I notice that to menu items are highlighted when on a category page. The blog link plus the category link. Is it possible to have blog link deselected? See below…

http://elyrunners.club/category/race-report/

Thank you.

[Christopher]

Hi there,

Please add ‘category title’ to category pages.

Find this code :

li.current_page_parent > a span {
    color: white !important;
    text-decoration: none !important;
    box-shadow: 0 2px 0 0 #ffffff !important;
}

And update it to :

body:not(archive) li.current_page_parent > a span {
    color: white !important;
    text-decoration: none !important;
    box-shadow: 0 2px 0 0 #ffffff !important;
}

Hope it helps.

[bedingfield]

Hi there,

The CSS is still producing the same result as before.

Thank you

[Author]

Posts