Visit Freshworks.com Visit Freshworks
Solved

Help Needed for Custom CSS code

  • 15 January 2023
  • 7 replies
  • 104 views
F
Rank
Badge

Hello Everyone, 

on My User Portal, I have changed the look of service Item Listing. Earlier it was showing three columns and now I changed it to one:

 

However, if you see in the above Image, the Item Name and Short Description of the Item is not showing it completely. I don’t want any “...” at the end . I want the entire Item Name and Item Short Description to be displayed in full.

Can someone please help me with this?

icon

Best answer by Rutger Bockholts 17 January 2023, 14:58

View original

7 replies

Rutger Bockholts
Rank
Userlevel 3
Badge +2

Hi FSenthu,

 

When you place the below script in the Footer section, you'll have the uncut item name already. The Short Description isn't working as expected currently, so that will come later.

 

<script>
    $(document).on("PageUpdate", function (event) {
        if (event.detail.page !== "catalog_items") return;

        var listItemsContainer = $("#list-items");
        var updateItemNames = function (items) {
            items.forEach(function (item) {
                listItemsContainer
                    .find('a[href="/support/catalog/items/' + item.id + '"] .item-name')
                    .text(item.name);
            });
        };

        updateItemNames(event.detail.data.items.catalog_items);

        listItemsContainer.off("NewContent.nameupdate");
        listItemsContainer.on("NewContent.nameupdate", function (event) {
            updateItemNames(event.detail.items.catalog_items);
        });
    });
</script>

 

Regards,

 

Rutger Bockholts

Freshworks

JTAVOLARO
Rank
Userlevel 4
Badge +8

Has this solution been documented anywhere?

I’m assuming you mean place the script into the portal footer?

My portal footer currently has the following:

<div class="clearfix">
  {{#unless portal.copyrights}}
    {{> portal_copyrights}}
  {{/unless}}
</div>

 

Does the script go into its own section, or within the <div>? Should t be in the beginning or the end of the footer, or does it matter?

 

Thanks!

 

Rutger Bockholts
Rank
Userlevel 3
Badge +2

Hi JTAVOLARO,

 

This is as far I know not documented somewhere. The code has to be pasted below all your existing code in the Footer section. So not within the div but just as a separate script.

 

<div class="clearfix">
  {{#unless portal.copyrights}}
    {{> portal_copyrights}}
  {{/unless}}
</div>

<script>

..

</script>

 

 

Regards,

 

Rutger Bockholts

Freshworks

 

T
Rank
Userlevel 1
Badge +4

Hello Everyone, 

on My User Portal, I have changed the look of service Item Listing. Earlier it was showing three columns and now I changed it to one:

 

However, if you see in the above Image, the Item Name and Short Description of the Item is not showing it completely. I don’t want any “...” at the end . I want the entire Item Name and Item Short Description to be displayed in full.

Can someone please help me with this?

@FSEnthu Would you mind sharing how to made your Catalog have a single column? This looks really nice for users to be able to read more about the item before clicking on it.

Thank you!

Rutger Bockholts
Rank
Userlevel 3
Badge +2

@tyler.brandt  Resizing service item cards can be done in the Stylesheet section with the code below. When the min-width is changed from “35em” into for example “50em” you end up with one service item per row. 

/* Resize catalog cards */
#catalog-list-page #catalog-list-container #catalog-list-items #list-items .catalog-item{
  min-width: 35em !important;
height: 160px !important
}

 

Let me know your results.

 

Kind regards,


Rutger Bockholts

Freshworks

T
Rank
Userlevel 1
Badge +4

@tyler.brandt  Resizing service item cards can be done in the Stylesheet section with the code below. When the min-width is changed from “35em” into for example “50em” you end up with one service item per row. 

/* Resize catalog cards */
#catalog-list-page #catalog-list-container #catalog-list-items #list-items .catalog-item{
  min-width: 35em !important;
height: 160px !important
}

 

Let me know your results.

 

Kind regards,


Rutger Bockholts

Freshworks

Thank you very much! This worked great along with your script up above to extend the text. I ended up making mine 35em for width and 120px for height which gave me two nice looking columns with longer names/descriptions than the default 3 columns.

jerry76
Rank
Badge

If you have a specific design or layout in mind, let me know the elements you want to modify or the effects you want to achieve. Additionally, if you're working on a specific website of Mania mod apk or platform, please specify that as well.

Once I have a clear understanding of your requirements, I'll be able to provide you with the appropriate CSS code or guide you on how to achieve the desired result.

Reply


Terms of UseCookie settings