Allow customisation of Portfolio Categories Titles

Wishlist Portfolio
1

With the Portfolio app… the category tags that appear at the top of the grid of images/projects are hard to read. It would be great if we could make them bolder, bigger or even change the colors.
Basic request: make text bolder. Big request: allow us to assign colours to each category.

3 Likes
2

@Sal that’s a very nice suggestion, thanks a lot for sharing!

We’ll try to think what we can do about adding more options for categories tags in our future updates, I’ll keep you posted here.

And yes, welcome to the Elfsight community, happy to have you with us! :hugs:

3

Any update on this one? The portfolio app has so much potential and so many uses if we would make the menu better. Pretty please thank you :slight_smile:

1 Like
5

Hi @Sal :wave:

I agree that it would be just a perfect addition, but, unfortunately, we haven’t added these settings to the widget editor yet. I am sorry!

As a workaround, you can use this CSS code to customize the project titles:

.eapp-portfolio-project-look-card-name{
font-size:20px;
font-family: Calibri;
font-weight: bold;
color: brown;
}

You just need to add it to the Custom CSS field on the Style tab :slightly_smiling_face:

6

Thanks Max,

This changes the titles below each project… but it doesn’t change the syle of the menu categories.

Please can you give me the custom code to change the style of menu categories at the top.

Screen Shot 2023-10-31 at 8.28.41 am.jpg
Screen Shot 2023-10-31 at 8.28.41 am.jpg3740×1964 745 KB

1 Like
7

Oh, I am sorry!

Here is the code you can use instead:

.eapp-portfolio-project-list-categories-item {
font-size: 20px;
font-family: Calibri;
font-weight: bold;
color: brown!important;
}

Check it out and let me know if it worked for you :slightly_smiling_face:

8

Yes that works yay.

Can I push the friendship and ask for further code to change the background colour of the buttons.

For example, if I wanted white text on black background buttons

I know how to change the text colour now, but not the background

Thank you!

1 Like
9

No problem :wink:

Here is the code:

.eapp-portfolio-project-list-categories-item {
  background: red;
}
.eapp-portfolio-button-active {
  background: red!important;
}

If you don’t want to change the background color for All tab, you should use this code:

.eapp-portfolio-project-list-categories-item {
  background: red;
}

By the way, I’d like to let you know about our CSS Codes category where you can find the most popular codes for different apps - CSS Codes - Elfsight Community

10

Amazing, thank you so much!

Hopefully one day we can pick a different colour for each category, but this will make do for now :slight_smile:

Thanks again

1 Like
11

You are always welcome :wink: