How to limit the number of characters in a listing block

[montebazaar]

Hello!

First of all thanks for always answering on my crazy requests.

This time I wanted to ask if there is any php/css snippet that you can provide me with that limits name of characters on listing block.

For example

Someone makes listing with 30 characters but I just want to display 10 characters on block and on the end “…” and when you enter listing you see whole name regulary.

I hope I was clear

Kind Regards!

[andrii]

Hi,

Sorry, there’s no simple code snippet for this, it would require a custom implementation. If customizations beyond the available features are required for your site, please consider hiring someone for custom work: Fiverr - Freelance Services Marketplace

[montebazaar]

Thanks a lot for reply!

I have another quick question.

[montebazaar]

Can I possibly make background color of featured listing block make different.

For example all “normal” listings are white, but featured listing block is green, or like letters are green.

Thanks in advance

[montebazaar]

And one more question please, sorry for being boring.

Can I make here instead of star write “Premium”.

[Fabricator]

Hi! Yes, add this CSS from the front-end editor into the “Additional CSS” field.
.hp-listing.hp-listing--view-block.hp-listing--featured { background-color: #94f5ad; }

If you don’t like this, you can try this other option to make your featured listings more attractive. This add a dashed outline, just change it’s color.

.hp-listing--view-block.hp-listing--featured {
    border-color: #4f3d78;
    border-width: medium;
    border-style: dashed;
}

Your second question. Yes, I’m using this CSS on my own website:

.hp-listing--view-block .hp-listing__featured-badge .fa-star::before {
    content: "Featured";
}

.hp-listing--view-block .hp-listing__featured-badge {
    width: max-content;
    background-color: #453285;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

If you want to change the “star” icon on the listing edit page, and replace it with same “Featured” text, and add the “Make Featured”, here is it:

.hp-listing--edit-block .hp-listing__actions--primary .hp-listing__action--feature[data-state=active] .fa-star:before{
    content: "Featured";
	  color: green;
}

.hp-listing--edit-block .hp-listing__actions--primary .hp-listing__action--feature .fa-star:before{
    content: "Make Featured";
	  color: rgba(7,36,86,.25);
}

[montebazaar]

Thank you so much for help!

Last thing I want on my website I want is my listings display like this.

I wont put more than three attributes on my listing block so I think this will be ok, and I want them do display one under another because it is more user friendly in my opinion

Do you have snippet to change this view?

Thanks in advance!

[ihor]

Sorry for the delay. It’s possible to change the listing layout to a list view instead of a grid, but this requires further CSS customizations. If you’re familiar with CSS, please check how the list layout is implemented in some of our themes (e.g. ExpertHive or JobHive) using the web inspector tool, this way, you can use the same or similar styles.