Docs

[rekluse]

Hello,

I have successfully restyled our Filter By Topic section on the Blog page, but am looking to complete the styling by making it behave similar to the Essential Grid filters (darkened border + border shadow for active and hover links.)

In other words, I am trying to make the Filter By Topic categories on this page:
http://everyoneisright.com/perspectives/

Look as similar as possible to the Essential Grid categories on this page:
http://everyoneisright.com/practice/

(I will follow this post with a private post with login details, since we are behind a site lock.)

Here is the code I am currently using:

blog .x-index-filters-menu li {
    background-color: transparent; /* background color */
    padding: 0px 16px;
    line-height: 38px;
    border: 1px solid #e5e5e5;
    border-color: #bbb;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
    color: #999;
    margin-right: 5px;
    margin-bottom: 5px; 
    font-size:10px !important;
    font-weight: 600;
    font-family: "Open Sans",sans-serif;
    display: inline-block;
}

.blog .option-set .x-index-filters-menu>li:after {
    display:none;
  
}

.blog .x-index-filter-label {
  
  font-family: "Open Sans",sans-serif;
  font-weight: 600;
}

Can you help me replicate the hover and active effects for the Blog filter?

Thank you!

[rekluse]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in!

Let’s update this code :

blog .x-index-filters-menu li {
    background-color: transparent; /* background color */
    padding: 0px 16px;
    line-height: 38px;
    border: 1px solid #e5e5e5;
    border-color: #bbb;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
    color: #999;
    margin-right: 5px;
    margin-bottom: 5px; 
    font-size:10px !important;
    font-weight: 600;
    font-family: "Open Sans",sans-serif;
    display: inline-block;
}

to following :

blog .x-index-filters-menu li a {
    background-color: transparent; /* background color */
    padding: 0px 16px;
    line-height: 38px;
    border: 1px solid #e5e5e5;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
    color: #999;
    margin-right: 5px;
    margin-bottom: 5px; 
    font-size:10px !important;
    font-weight: 600;
    font-family: "Open Sans",sans-serif;
    display: inline-block;
}

Then add this CSS as well :

.x-index-filters-menu > li a:hover, .x-index-filters-menu > li a.selected {
  border-color: #bbb;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.13);
}

Hope this helps.

Cheers!

[rekluse]

Perfect! Thanks so much, this is awesome.

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts