Docs

[CChesnutt]

Hello! Hope someone can help here…

1) I found some CSS in another post to edit the visuals of my Portfolio Filter. However I seem to have lost the hover state once the filter is clicked and you see the categories. Can I get this function back?
Here is a link to the page: http://www.corichesnutt.com/portfolio/

Here is the code I am using

/*Change Portfolio Filter Menu Colors*/
/*Background Color*/
ul.x-portfolio-filters-menu.unstyled {
    background: rgba(71,62,67,.9) !important; /*Adjust .8 to your preferred background transparency*/
}
.x-portfolio-filters-menu li a {
    opacity: 1 !important;
    color: #EEE9EB;
}

2) I’ve also changed the Portfolio Filter from a “+” to text so that it is more visible. But this has pushed it off the right edge of the page into the background pattern. How can I bring this back so its more like justified right, so if I change this wording from “filter” to something else, it will always stay where the right hand side of the “+” is on the demo? (see screen grab)

3) I was trying to changed the name of the font being used in the portfolio filter but I can’t seem to get the weight quite right (or it changes the font when I try to add a weight property). How do you add something to change the weight of this specific instance? I’m using Google Open Sans as my sans serif body font but I’d like this particular thing to be the semi-bold 600

Here is the code I am using currently:

/*change font of portfolio filter button*/
.x-portfolio-filters .x-icon-plus:before {font-family: 'Open Sans', Sans-serif;}

Thanks in advance for your help!

[CChesnutt]

Sorry not sure why they screen grab was too big, but here is a smaller one. Just look at this demo page and see the location of the “+” for the portfolio sort.

http://theme.co/x/demo/icon/1/portfolio/

[Nabeel A]

Hi there,

Thanks for writing in!

1. For the hover effect, you can add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-portfolio-filters-menu li:hover {
    background: rgba(51, 44, 47, 0.88) !important;
}

2. To adjust the Filter icon, please add this code in your Customizer:

a.x-portfolio-filters {
    position: relative !important;
    left: -39px !important;
}

3. To change the font family and font weight, try this code:

.x-portfolio-filters-menu li a {
    font-family: arial !important;
    font-weight: 600 !important;
}

Let us know how this goes!

[CChesnutt]

1) Awesome thanks!

2) Is there another bit of code that will keep the filter drop down also inline with the right edge of the “Filter +” button?

3) This seems a bit heavier than Open Sans 600 but I may just have to make due with it.

THANK YOU!!!

[Jade]

Hi there,

Please add this code:

.x-portfolio-filters-menu {
    right: 45px;
}

Hope this helps.

[CChesnutt]

I tweaked it a bit more but that’s what I needed…Thanks so much!!!

~Cori

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts