Docs

[metamorfosis18]

Hi, Just bought the X theme last weekend and I love it.
Can you please shed some light on how to display all categories in portfolio and how to change the tab that says’All’
to something else, like this page.
https://countryguitaronline.com/country-guitar-lessons/

I am using a child theme and INTEGRITY stack.
Thanks in advance.

[metamorfosis18]

This is the website that I am working on:
http://www.piano4me.com

EDIT
I found an answer to my first question here:https://community.theme.co/forums/topic/portfolio-display-all-categories-and-remove-sort-portfolio/
Still trying to change the’All’ to say something else!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global JavaScript :

jQuery(".x-portfolio-filter").html("leciones");

Hope that helps.

[metamorfosis18]

Hey thanks for your help. I have a slight problem, it changed all the categories, not just the ‘all’ tab.

Also can you please take a look a this page. http://www.piano4me.com/lecciones/
I am using Renew and using this code provided here, I was able to get tabs IN PORTFOLIO to sort categories like in the Integrity stack. The only problem is that it is not resizing in properly in smaller devices. If could please help me fix the problem it would be awesome. Thank you in advance, here is the code:

/*PORTFOLIO CATEGORIES*/

.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: 18px;
line-height: 1.5;
text-align: center;
text-transform: uppercase;
vertical-align: middle;

color: #c5c5c5;
color: rgba(0, 0, 0, 0.575);

background-color: transparent;
border-radius: 0.35em;
box-shadow: inset 0 0 0 transparent, 0 20px 20px 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: 70px
}
}
.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.1em;
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;
}

———————–

And this is a java script

Query( document ).ready(function() {
jQuery(‘.x-portfolio-filters’).click();
jQuery(‘.x-portfolio-filter[data-option-value=”*”]’).click();
});

[metamorfosis18]

This reply has been marked as private.

[metamorfosis18]

I solved the problem with that java code you gave me. I compared it to the ones I posted earlier (that I got from this forum) and was able to make work. Here it is in case someone needs it:

Code to change the tab that says’All’ by default, to whatever you want. Add it in Customize -> Custom -> Global JavaScript
jQuery('.x-portfolio-filter[data-option-value="*"]').html("TODAS LAS LECCIONES");

Thank you Christopher. I hope you can help me make that other code work!

[Rad]

Glad it works, thanks for sharing 🙂

[Author]

Posts