Portfolio filter customisation

Support
#1

Hi there,

I am currently building a website with the Icon stack. However, I would like to have a similar filter as the Integrity stack. I found a code from the support archive but it doesn’t really work for me, is there a way to fix this?

That’s the code I used:

.page-template-template-layout-portfolio .x-breadcrumbs-wrap {
  float: none;
  display: block;
  width: 100%;
}
.page-template-template-layout-portfolio .x-landmark {
  display: block;
  width: 100%;
  padding: 0px;
}
.page-template-template-layout-portfolio .x-landmark-breadcrumbs-wrap {
  display: block;
}
.option-set {
  margin-top: 0.87533em;
  margin-bottom: 0;
  float: none;
  width: 100%;
}
.option-set li {
  display: block;
  text-align: left;
}
.x-portfolio-filters,
.x-portfolio-filter {
  display: inline-block;
  float: none;
  position: relative;
  margin: 0.45em 0.375em;
  border: 1px solid #ddd;
  border: 1px solid rgba(0, 0, 0, 0.125);
  padding: 0.692em 1.154em 0.769em;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  color: #c5c5c5;
  color: rgba(0, 0, 0, 0.375);
  background-color: transparent;
  border-radius: 0.35em;
  box-shadow: inset 0 0 0 transparent, 0 1px 1px rgba(255, 255, 255, 0.95);
  -webkit-transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease
}
@media (max-width: 767px) {
  .x-portfolio-filters,
  .x-portfolio-filter {
    font-size: 11px
  }
}
@media (max-width: 480px) {
  .x-portfolio-filters,
  .x-portfolio-filter {
    font-size: 10px
  }
}
.x-portfolio-filters:hover,
.x-portfolio-filter:hover {
  color: #777;
  color: rgba(0, 0, 0, 0.75);
  border-color: #cfcfcf;
  border-color: rgba(0, 0, 0, 0.25);
  background-color: #fff;
  background-color: #fff
}
.x-portfolio-filters:active,
.x-portfolio-filter:active {
  color: #777;
  color: rgba(0, 0, 0, 0.75);
  border-color: #bbb;
  border-color: rgba(0, 0, 0, 0.25);
  background-color: #ebebeb;
  background-color: rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.225), 0 1px 1px rgba(255, 255, 255, 0.95)
}
.x-portfolio-filters {
  margin: 0;
  display: none;
}
.x-portfolio-filters-menu {
  margin-top: 1.313em;
  text-align: center;
  position: static;
  background-color: transparent;
  width: 100%;
  float: none;
  display: block !important;
  text-align: left;
}
.x-portfolio-filters-menu li {
  display: inline-block
}
.x-portfolio-filters-menu .selected {
  color: #777;
  color: rgba(0, 0, 0, 0.75);
  border-color: #bbb;
  border-color: rgba(0, 0, 0, 0.25);
  background-color: #ebebeb;
  background-color: rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.225), 0 1px 1px rgba(255, 255, 255, 0.95)
}
.x-portfolio-filter {
  display: inline-block;
}
.x-portfolio-filters-menu li a {
  display: block;
  padding: 0.5em 1.75em;
  color: #c5c5c5;
  color: rgba(0,0,0,0.375);
}
.x-portfolio-filters-menu li a:hover {
  color: #777;
  color: rgba(0,0,0,0.75);
  border-color: #cfcfcf;
  border-color: rgba(0,0,0,0.25);
  background-color: #fff;
  background-color: #fff;
}
.x-portfolio-filters-menu li a:first-child {
  padding-top: 0.5em;
}
.x-portfolio-filters-menu li a:last-child {
  padding-bottom: 0.5em;
}

Kindly

#2

Hi there,

Unfortunately, it is not possible to have a feature of a specific stack implemented to another stack due to complete different nature of them.

If there is a small difference we will be able to help you out but if it needs a great amount of customization you will need to find a paid freelancer to do such a customization for you in the X Facebook User Group.

Would you please give us access to the page of the Integrity Filter, Icon Filter and your current website filter to assess if we can be of a help on your case or not.

Thank you for your understanding.

#3

Hi @christopher.amirian,

From what I saw someone else did it with another stack but I would understand if it’s harder with Icon.

Summary

moved to secure note

Kindly,

Kenza

#4

Hi Kenza,

Icon stack portfolio page has also a filter option but different design.

I think your custom code works, you just need to position the filter bar properly. Please add this custom CSS.

.option-set.unstyled {
position: relative;
left: 0;
right: 0;
}

Hope it helps,
Cheers!

1 Like
#5

Thank you, I added this code to my custom CSS and now improving the rest of the CSS to have something nice and clean for all devices.

#6

Hi there,

Glad that you have managed to achieve what you want. I should mention again that we will not be able to help you regarding this customization as it is strictly something which is not available out of the box.

If you have a specific case which you need a small tweak of CSS we will be happy to help, give us screenshots and detailed information and we will try our best to help you.

Thank you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.