Customize End User Portal - Updating text on Report an Issue and Service Catalog

Hi @SamC1601 
 

I actually managed to change the image on the catalog page yesterday so your question had good timing :)

I used this Stylesheet code to change the image:

#catalog-list-page #catalog-list-header #catalog-list-header-items .catalog-image 
{
  background-image: url("https://adresstoyourimage.com/filename.png");
  background-size: cover;
}
 

To change the text you need to do some more coding which I have not tried myself, yet.

Hello @SamC1601 what I have found works the best is to open up your support portal in Chrome and use the developer tools to identify the layout of the page. If you find an element on the portal that you want to change you can right-click on it and click “Inspect” this will take you to the HTML element in the developer console. Then you can look in your Support Portal code under Admin > General Settings > Helpdesk Rebranding > Customize Portal, and locate that element to make changes. You can even make mockup changes in the developer console to see what it would look like before making the changes in your portal code.

Here is an example: 

Hope that helps! :)

@maghed  Thank you! This will come in handy as we go to change the icon. I struggle with the scripting portion so I know that the text will be a little more difficult.

@zachary.king Thank you as well for the info. I have used the inspect tool to get a lot of our customization done, but like I told maghed, the scripting tends to throw me to update the text since it’s not as straightforward as updating the HTML. I do really appreciate the detailed answer though! 

@SamC1601 I can relate! But there is good news...there will be a much easier way soon. There is a plan to release the Low-code BYOP - Build Your Own Portal functionality that allows you to use a drag and drop type functionality to build out your portal pages. Keep an eye out for that and I bet that will help you customize your pages how you like :)

Hi @SamC1601 .

I guess I can help a little bit with your pending tasks:

Admin → Helpdesk Rebranding → Portal customization

Layout & pages

Portal Layout

Section Page layout:

<script>
  CARDS.map(function (card) {
    if (card.url == '/support/catalog/items') {
      card.title   = 'Service and Product Catalog';
      card.content = 'Raise a request for a new device, software or service';
      card.img     = 'https://assets5.freshservice.com/assets/portal_v2/service_catalog-9c7801db4f2470efe9ac7e57b342b6ceef9b1ba072fa4788e57279265c713861.svg';
    }
  });
</script>

You may set your own cards title, description and image in the corresponding fields.

Admin → Helpdesk Rebranding → Portal customization

Stylesheet

Section Custom stylesheet:

#catalog-title:after
{
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "Service and Product Catalog";
}

You may customize the text to show when launching the card.

Hope this helps.

Sincerely,

Elvis.

@zachary.king new here - is the BYOP low-code out/on the roadmap for 2024?

Yes, it is available currently :)

https://support.freshservice.com/en/support/solutions/articles/50000005515-build-portals-on-the-fly-the-no-code-way

Thanks @zachary.king!

Is it possible to change the New Ticket CSS to use custom text instead of “Report an Issue” with the default translate function that calls a javascript object to achieve the first portion of this ask?

<section id="ticket-new-main">
  <div class="ticket-new-header">
    {{> breadcrumbs url=breadcrumbs}}
    <h2 id="ticket-new-title" tabindex="-1">{{translate "portal.incident.report_issue"}}</h2>
  </div>
  <div id="ticket-new-body">
    {{> ticket_new_form}}
  </div>

My limited understanding of website design thinks the translate function is calling an object that probably just contains “Report an Issue” in multiple languages, but I doubt admins have access to edit something like that and entering text directly instead of using a function doesnt work.