Cardinal filter styling – Possible to replicate Dante portfolio filters?

[FlawlessWeb]

Hey,

I am wondering if it would be possible to replicate Dantes portfolio filter styling and integrate it with Cardinal?

I know Cardinal was built on a modified or maybe completely different platform to Dante, so it may not be possible to replicate the number count. But even putting the number count aside, would it be possible to have the same boxed/bordered effect from Dante? (I have played around with the CSS without much luck…)

See screenshot for comparison of Dante vs Cardinal filter styling.

Thanks.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Will have forward this one to Ed.
Thanks.

-Rui

[FlawlessWeb]

Thanks,

A solution involving some combo of css and child theme code would be ideal.

Don’t want to have to modify core theme files that will be overwritten every time I update Cardinal.

[Kyle – SUPPORT]

Hi

Try adding this to your custom css

.post-filter-tabs li.selected a {
  display: block;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
}
.post-filter-tabs li a {
  border: 1px solid #e4e4e4;
  display: block;
  font-size: 13px;
  line-height: 26px;
  padding: 8px 16px;
}
.post-filter-tabs li {
  margin-left: -4px;
}
ul.post-filter-tabs li:first-child a, ul.post-filter-tabs li:first-child div {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
ul.post-filter-tabs li:last-child a, ul.post-filter-tabs li:last-child div {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

– Kyle

[FlawlessWeb]

Hey Kyle,

I really appreciate that – sorted the styling end of things.

Is there any way now to replicate the number count per filter like there is in Dante?

Thanks.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

I’m not sure if this is easily done, will see if the developer can help you with that

– Kyle

[FlawlessWeb]

No problem, thanks.

[Swift Ideas – Ed]

Hi Anthony,

This should get it pretty close, may need a few tweaks but hope that sorts it

ul.portfolio-filter-tabs li a {
padding: 8px 16px;
border: 1px solid #e3e3e3;
display: block;
margin-right: -1px;
text-decoration: none;
height: auto;
overflow: hidden;
}
ul.portfolio-filter-tabs li.selected a {
	-moz-box-shadow: inset 0 0 5px rgba(0,0,0,.1);
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.1);
	box-shadow: inset 0 0 5px rgba(0,0,0,.1);
	font-weight: normal;
}