Changing Cstomizr Tag Buttons to "Price Tag" Shaped Links

The wonderful thing about CSS is you can try anything…if it doesn’t work, just remove it…or try it with Firebug or other similar tools without altering any files…

Taking the code you linked and applying it to Customizr’s selectors, I have come up with this:

.entry-meta .btn-tag:hover:before {
    border-right: 8px solid #9b8c00;
}
.entry-meta .btn-tag:before {
    border-bottom: 10px solid transparent;
    border-right: 8px solid #891428;
    border-top: 10px solid transparent;
    content: "";
    height: 0;
    left: -8px;
    position: absolute;
    top: 0;
    width: 0;
}
.entry-meta .btn-tag:hover:after {
    background-color: #fff;
}
.entry-meta .btn-tag:after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 4px;
    left: -2px;
    position: absolute;
    top: 8px;
    width: 4px;
}
.entry-meta .btn-tag:hover {
    background-color: #9b8c00;
    color: #fff;
}
.entry-meta .btn-tag {
    border: none;
    background-image: none;
    background-color: #891428;
    border-radius: 0 2px 2px 0;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.27273;
    margin: 2px 4px 2px 10px;
    padding: 3px 7px;
    position: relative;
    text-transform: uppercase;
}

Now I do not profess to be an expert…it may take further CSS tweaking…and I have not checked for every possible anomaly…just a real quick test…it should at least get you headed in the right direction.

Thanks, Deputy05!

This is great.

Cheers!

jmw

Didn’t quite work off the bat when I replaced the elements and put them in the custom CSS window.
The button shape didn’t change but I think I’m on the right track. I’ll keep tweaking and post the solution when I find t.

Thanks again,

jmw

That’s odd…it works for me…you were asking for the “tag” buttons, correct?

That’s correct. “.entry-meta .btn-tag” I pasted the code from your solution above in the custom CSS box then took a look at my demo page after saving. Nothing changed. But it may be just me. I figured once I got my child theme up and running with a child style sheet and double checked/tweaked the numbers for the shape it would work.

Does that sound right?

Cheers
jmw

A caching issue? Maybe you need to force a page refresh.

Deputy05

I cleared my cache and pasted the code back in the custom CSS box.
This is how the buttons appear:

If it helps I’m using Firefox 32.03

Thanks again,
jmw

https://qt.greengriot.com/2014/10/asidetest/

Got It!

Devil is indeed in the details

I was missing a “}” delimiter between my sets of CSS code.

It works now. And looks great.

Thanks so much!

Cheers!

jmw

Great. Perhaps you can publish a site link sometime so we can see how it looks? Might help someone else in the future.

Sure.
Here’s the link to a page in my sandbox full of tags

https://qt.greengriot.com/asidetest/

but in case that changes here’s a link to a screen shot

https://qt.greengriot.com/wp-content/uploads/2014/10/AsideTest-1024×[email protected]

Cheers!
jmw

Hi All,

Just a quick update.
For those who wanted to keep the button look but have a tag logo I found this Bootstrap Button Code Generator:

https://www.skyafar.org/bootstrap/bootstrap-3-button-code-generator/

Hope this helps

jmw

Hi everybody!
I’m new on CSS development. I would like you help me on the next subject:

I would like just to change the “background-color” of the “.btn-tag” since CSS document depending on the name of the category on my blog

So, I’ve try next code:

entry-meta .btn-tag {

if(title="View all posts in Creativity Skills"){
        background-image: linear-gradient(to bottom, green, blue);
    }
    background-color: gray;
    background-image: linear-gradient(to bottom, #8f8f8f, #696969);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

But it does not work. Note that “Creativity Skills” is a category of my blog.

I’m using last version of Customizr Theme.

Please, could you help me. Thank you ??