How to Style Portfolio / Blog Filter Items

Hi Victoria,
Sure thing, please excuse the sloppy microsoft paint, but you get the picture: https://imgur.com/a/yqynu

Just trying to put an orange “box” (R: 243 / G: 110 / B: 33 or #f36e21) around the filter item text (in white) that people can click on. Text would have to be centered and it would be a bonus if the “box” for each item were all the same size, but that’s not critical.

Thanks,

Hi Victoria,

Thank you so much, it looks exactly as we asked for. But, once implemented, I saw that their color for buttons (that bright orange) overpowered any choice of color for active link text from their color palette.

So, I figured out how to change the box color on hover and the color when active. The one catch that I have is having the box and border radius change color on hover at the same time. The border changes color before the box if you hover over slowly (but I really like the rounded corners).

Here’s what I mean:

How can I get the entire object to change color at once, like so?

Here’s the changes to code that I made just in case that helps.

.sort_by_cat .filter {
display: block;
float: left;
margin-right: 10px;
font-size: 20px!important;
}

.sort_by_cat a span {
display: block;
background-color: #f36e21;
color: #fff;
padding: 5px 7px;
border-radius: 5px;

}

.sort_by_cat a span:hover {
display: block;
background-color: #0f9daf !important;
color: #fff;

}

.sort_by_cat a {
margin-left: 10px;
}
.filter {
padding: 5px 7px;
line-height: 32px;
}
.all_sort_button {
background-color: #f36e21;
border-radius: 5px;

}

#av_section_1 .sort_by_cat a.active_sort span.inner_sort_button span {
color: #fff;
}

#av_section_1 .text-sep {
display: none;
}
.sort_by_cat a.active_sort span {
background-color: #0f9daf !important;
}

Thanks again!

Hi Ismael,

I provided a screenshot with the “img” button, guess it didn’t work. Here is one straight from Imagur: https://imgur.com/a/O0FyA

If you mouse over slowly, you’ll see that the border changes color (from orange to blue) independently of the box interior itself. The border does stay blue however (which is good!) once you hover over the interior box.

We would like the entire box to turn blue a when the border does, just couldn’t figure out how to do that on my own.

Thanks!

Hi Victoria and thanks,

Yes indeed, that’s what I thought I was doing here, with “.sort_by_cat” being the element:

.sort_by_cat a span:hover {
display: block;
background-color: #0f9daf !important;
color: #fff;

}

Any ideas on how I can apply the hover styles to the whole element?

Thanks and sorry, just trying to figure these things out as I go!

Hi Ismael,

Thank you and also Victoria, it’s looking good and working like a charm.