WordPress.org

Forums

Finding the tag class in twentyfourteen (10 posts)

  1. bowlingbrad
    Member
    Posted 1 year ago #

    I'm one little triangle away from completing our firm's new intranet site. I am using a child theme of the included twentyfourteen theme. While inserting color and formatting changes to my child theme's style.css file I cannot for the life of me find where to change this little triangle from the tag symbol. It looks fine when no mouse is hovering, but when I hover over it with my mouse, the body of the tag changes to red (as I want it to) but the little triangle to the left must be in a different class that I cannot find. Please assist! Thanks!

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  3. bowlingbrad
    Member
    Posted 1 year ago #

    I have been. I just cannot seem to locate that pesky little triangle!

  4. esmi
    Forum Moderator
    Posted 1 year ago #

    Can you be more specific? Exactly where does this triangle appear?

  5. bowlingbrad
    Member
    Posted 1 year ago #

    I write a post. I add a tag. I publish the post.

    Then a summary of the post exists on the blog page or any page that displays the summary.

    At the bottom of the summary is a little graphic tag that looks like a price tag. I found the css style to change the hover color of the main portion of the tag but there is a little triangle that I cannot find the style for.

    Is there any way to add an attachment to this discussion? I have an image.

  6. bowlingbrad
    Member
    Posted 1 year ago #

    This is my modification in the child theme style.css that works:

    .entry-meta .tag-links a:hover {
        background-color: #c8102e;
    	}
  7. esmi
    Forum Moderator
    Posted 1 year ago #

    It's perfectly obvious using Firebug:

    .entry-meta .tag-links a:before {
        border-bottom: 10px solid rgba(0, 0, 0, 0);
        border-right: 8px solid #767676;
        border-top: 10px solid rgba(0, 0, 0, 0);
        content: "";
        height: 0;
        left: -8px;
        position: absolute;
        top: 0;
        width: 0;
    }
  8. bowlingbrad
    Member
    Posted 1 year ago #

    Yes. I see that. But there is a little colored triangle on the left that I cannot seem to change. I have added a color change to that style but it doesn't change the triangle.

  9. CrouchingBruin
    Member
    Posted 1 year ago #

    This is what you want for the triangle with the dot. It's a before pseudoelement.

    .entry-meta .tag-links a:hover:before {
       border-right-color: #41a62a;
    }
  10. bowlingbrad
    Member
    Posted 1 year ago #

    I have a new hero.

    It works perfectly now!

    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic