Styling Tag Cloud

  • Resolved Bri

    (@tinnyfusion)


    7 months ago

    Hi all, so I have previously styled my tags and categories so that each show in their own coloured box. I wanted to recreate this for my tag cloud and ended up with the following:

    .tag-cloud-link {
    display: inline-block;
    flex-grow: 1;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 10px;
    margin: 5px 5px 0px 0px;
    text-decoration: none;
    background-color: var(--base-5);
    color: var(--base-3);
    font: "Oxygen","Arial",Sans-Serif;
    text-transform: uppercase;
    border-radius: 4px;
    line-height: initial;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.tag-cloud-link:hover {
    background:rgba(100,100,100, 0.2);
}

/* Featured - Light Yellow */
.tag-link-13 {
    background-color:#dcbf37;
}

/* CSS - Grey */
.tag-link-11 {
    background-color:#eee;
    color: #000;
}

/* Customisation - Green */
.tag-link-12 {
    background-color:#77bb2c;
}

etc...

    My question is, is there an easier way to do this as at the moment I am having to stipulate each tag ID which is a pain to do. IE For the PHP tag, I have to use .tag-link-17

    However, when styling my post tags and categories I found I could use the name of the tag/category like so: .entry-meta .cat-links a[href*="news"]

    Is there a way to do this for the tag cloud too?

    Additionally, I have noticed that when I try and use the same hover effect that I use on my tag cloud for the standard post/category tags it doesn’t work.

    Currently I have the following:

    /* Tag Cloud Hover which I'd like to keep */
.tag-cloud-link:hover {
    background:rgba(100,100,100, 0.2);
}
    /* Post Tags/Categories Hover - I'd like this to be the same the tag cloud */
.entry-meta .tags-links a:hover, .entry-meta .cat-links a:hover {
    background:rgba(100,100,100, 0.2);
}

    Thank you.

Viewing 5 replies - 16 through 20 (of 20 total)
  • ying

    (@yingscarlett)

    I don’t see the opacity CSS being added to the tag cloud links.

    You are currently using the CSS I provided to change the hover background color:

    .wp-block-tag-cloud a.tag-cloud-link:hover {
    background-color: rgba(100, 100, 100, 0.2);
}

    You just need to change the above CSS to:

    .wp-block-tag-cloud a.tag-cloud-link:hover {
    opacity: 0.4;
}
    Thread Starter Bri

    (@tinnyfusion)

    ok, I have changed the tags and categories under each post to:

    .entry-meta .tags-links a:hover, .entry-meta .cat-links a:hover {
    background:rgba(100,100,100, 0.2) !important;
}

    And the tag cloud to:

    .wp-block-tag-cloud a.tag-cloud-link:hover {
    background:rgba(100,100,100, 0.2) !important;
}

    The tag cloud works as required, but the tags and categories under posts still show white text when being hovered over; unlike the tag cloud, where the text changes from white to black on hover.

    I don’t understand why the tags and categories are not showing the same as the tag cloud when hovered over..

    Alvind

    (@alvindcaesar)

    Hi @tinnyfusion ,

    Update you first CSS to this:

    .entry-meta .tags-links a:hover, .entry-meta .cat-links a:hover {
    background:rgba(100,100,100, 0.2) !important;
    color: #000000;
}
    Thread Starter Bri

    (@tinnyfusion)

    That fixed it. Thank you. However, I find myself perplexed at why the tags and categories CSS acted as though it had color: #000; applied when the statement was not there to define it… Maybe it was inherited from somewhere else as my CSS isn’t the best, even though I have tried to organise it logically.

    Regardless, another issue fixed by the awesome GeneratePress staff.

    Thank you all once again.

    Alvind

    (@alvindcaesar)

    You’re welcome!

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘Styling Tag Cloud’ is closed to new replies.

Tags