I use the portfolio widget to display in-stock trailer inventory on my website. A lot of my customers do not understand that they need to click on the image to view more information about the trailer. I am hoping to get some code written for 2 things:
A “more details” button (that looks like a load more button) to be displayed centered below each portfolio item
On hover, a “more details” button (that looks like a load more button) to be displayed centered horizontally and vertically on the image
2 Likes
Sina
(Sina)
May 31, 2025, 2:16pm
2
Hi @Chase_Jones
The first layout is suitable for your project.
You can also test the others to see if you like them. You can change the button style later.
Enter a simple button in the code editor as shown.
Choose here the Project Layout (1st, 2nd or 3rd)
1st Project Style
2nd Project Style
3rd Project Style
Add this code as needed to the Custom CSS field on the Appearance tab of your Portfolio widget’s settings:
/*2nd Layout Your Project*/
[class*="ProjectLookCard__Info-sc"]{
text-align: center !important;
}
/*2nd Layout Project details*/
[class*="TextLabelGroup__Container-sc"]{
justify-content: center !important;
}
/*3rd Layout Your Project*/
[class*="ProjectLookBottomOverlay__Name-sc"]{
text-align: center !important;
}
/*2nd 3rd Layout load more button*/
.eapp-portfolio-shortened-container{
text-align: center !important;
align-items: center;
}
Please try it out and let me know if you like the result
1 Like
Thank you for the quick response. However, that did not work for me. I added the code as you described and all it did was center the title information under the picture and show a load more button once you click on item.
I added a rough paint sketch of what I am shooting for. Pardon the kindergarten art;)
1 Like
Sina
(Sina)
May 31, 2025, 4:16pm
4
Hi @Chase_Jones
I can forgive the kindergarten drawing
Which Layout and which Project Style do you use ?
Would you share the link to your widget ?
1 Like
I am using grid layout and the 2nd project style option
1 Like
Sina
(Sina)
May 31, 2025, 4:30pm
6
Hi @Chase_Jones
OK, I’ll take a look. Copy that into the custom CSS area as well. This will only show one line of the description on the overview.
[class*="ShortenedText__Component-sc"]{
-webkit-line-clamp: 1;/*1 line*/
}
1 Like
Ok, I look forward to hearing back from you
1 Like
Sina
(Sina)
May 31, 2025, 5:11pm
8
Hi @Chase_Jones
Project Details is now used as a heading in the overview.
All of this is explained again in the description.
Add the button code in the first line
[class*="ShortenedText__Component-sc"]{
-webkit-line-clamp: 1;/*1 line*/
}
.global-styles,
.eapp-portfolio-project-detailed-description button{
display:none;
}
We’ll get rid of those 3 points somehow.
https://bd1edfdc682c46b3a9e8bf7498fed829.elf.site
please try
1 Like
Sina
(Sina)
May 31, 2025, 5:40pm
9
Replace
[class*="ShortenedText__Component-sc"]{
-webkit-line-clamp: 1;/*1 line*/
}
with
[class*="ShortenedText__Component-sc"] {
max-height: calc(1.33em * 2);
display: block;
line-height: 1.33;
max-height: 2.66em;
overflow: hidden;
}
the 3 points are now gone
1 Like
Thanks for your help. I still can’t get it to work. Here is what I have in the custom CCS and what it is showing:
1 Like
Sina
(Sina)
May 31, 2025, 11:37pm
11
Hi @Chase_Jones
what does this look like?
have you add the button ?
1 Like
Yep, it looks just like your screenshot
2 Likes
Max
June 2, 2025, 11:53am
14
Hi there, @Chase_Jones
Would you like to open the popup only using these buttons or clicking the project title and image should also trigger the popup?
1 Like
Both. I would like to be able to click the button as well as the picture and project title to open it. Thanks!
2 Likes
Max
June 2, 2025, 4:23pm
16
Got it, thanks!
I’ve passed your request on to the devs and will update you once the solution is ready
1 Like
Max
June 3, 2025, 10:39am
17
Thank you for waiting, @Chase_Jones
Please add this code to the Custom CSS field on the Style tab of your widget’s settings:
.eapp-portfolio-project-look-card-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.es-details-button {
background: rgb(0, 29, 255);
color: white;
padding: 7px 28px;
font-size: 15px;
font-weight: bold;
border-radius: 4px;
width: fit-content;
margin: 0 auto;
transition: background 0.1s;
}
.es-details-button:hover {
background: rgb(0, 23, 204);
}
.eapp-portfolio-picture-container .es-details-button {
display: none;
}
.eapp-portfolio-picture-container:hover img {
filter: grayscale(100%);
}
.eapp-portfolio-picture-container:hover .es-details-button {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
And this script should be placed in the Custom JS field on the Style tab:
const waitForElement = (selector, root = document) => new Promise(res => {
let i = 0;
const check = () => {
const component = root.querySelector(selector);
if (component) {
res(component);
} else if (i !== 50) {
setTimeout(check, 100);
i++;
}
};
check();
});
waitForElement(".eapp-portfolio-project-list-layout-grid-list").then(({ childNodes }) => {
const items = [...childNodes];
const button = document.createElement("div");
button.classList.add("es-details-button");
button.textContent = "More Details";
items.forEach((item) => {
const details = item.querySelector(".eapp-portfolio-project-look-card-info");
details.append(button.cloneNode(true));
const imageContainer = item.querySelector(".eapp-portfolio-picture-container");
imageContainer.append(button.cloneNode(true));
});
});
Please try it out and let me know if you like the result
2 Likes
This code worked awesome! Thank you!
3 Likes
Max
June 9, 2025, 10:17am
19
Perfect, you’re always welcome
1 Like