Portfolio Sort Not Transparent

[d2b5d075_a5a7_43d8_a281_1f486e3d31e9]

Hi All,
I would like to change the sort feature at the top of my website to be opaque instead of transparent.

Museum Master Planning and Design – Museum Planning

Also where do I change the categories for sort ?

Thank you !

[ruenel]

Hello @d2b5d075_a5a7_43d8_a281_1f486e3d31e9,

Thanks for writing in!

We do not have any setting that you can change the order of the categories. Please be advised that the categories were added by you as you have created the portfolio items. If you want to manage or modify any of the categories, simply go to Portfolio > Categories.

Meanwhile, there is no option in the theme that allows you to change the background color of the sort filter button. You need to add CSS code into X > Theme Options > CSS to be able to modify the button. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

The sort filter buttons are using .x-portfolio-filters and .x-portfolio-filter class. Therefore, the proper code for change the background color is this:

.x-portfolio-filters, .x-portfolio-filter {
    background-color: #fff !important;
}

To learn more about the “background-color” CSS property, please check this out:

• https://www.w3schools.com/cssref/pr_background-color.asp

We would love to know if this has worked for you. Thank you.

[d2b5d075_a5a7_43d8_a281_1f486e3d31e9]

Hi @ruenel,
Thank you for getting back to me !

I watched the video and reviewed the https://www.w3schools.com/cssref/pr_background-color.asp link.

I would like to change the buttons to white #FFFFFF.

I can see how to change text, but I do not see how to change colors

Screen-Shot-2020-06-27-at-9-31-08-PM

[ruenel]

Hello @d2b5d075_a5a7_43d8_a281_1f486e3d31e9,

Adding the custom CSS code into X > Theme Options > CSS should be able you to modify the button like this.

By the way, please check out X > Theme Options > Buttons. This is where you can set the global styling for the buttons on your site.

Hope this helps.

[d2b5d075_a5a7_43d8_a281_1f486e3d31e9]

Thank you @ruenel

Is there a way to turn off “hover”

Screen-Shot-2020-06-27-at-9-46-07-PM

[ruenel]

Hello @d2b5d075_a5a7_43d8_a281_1f486e3d31e9,

To modify the hover of the button as well, please update the code and use this:

/* active button */
 .x-portfolio-filters, .x-portfolio-filter {
    background-color: #fff !important;
    color: red;
}

/* Hover the button */
.x-portfolio-filters:hover, .x-portfolio-filter:hover {
    background-color: #FF0000 !important;
    color: #fff;
}

I used distinct colors in the code above so that you can easily spot which one is active and hover of the button. Feel free to use the same colors for the same if you want the same color for the active and hover of the button.