Solved

Portal customization: Title color, card color, card title color

  • 24 January 2023
  • 3 replies
  • 374 views

Userlevel 1
Badge +2

Dear community,

I am trying to customize the end user portal. I would like to have:

  • Title of the portal which is in white → change to black color
  • Title of the cards which are in white → change to black color
  • Cards backgound color which are in white → change to light blue color (#0083BE)

What is the code I need to change those and where I need to place it?

Thanks

icon

Best answer by eeha0120 24 January 2023, 19:10

View original

3 replies

Userlevel 6
Badge +11

Hi Sara.

For what I understand for Title of the portal, the change would be as follows:

Admin → Helpdesk Rebranding → Portal customization → Layout & pages → Portal layout

Header

Look for the section <section class="pull-left header-section">

Go to the end of the section; right before ending the section, add an h1, like this:

 

    <h1 style= "color:#12344D";class="portal-name hide-on-mobile">{{{portal.name}}}</h1>
  </section>

 

This should do the trick. However, I would suggest to validate / request it to support.

 

The titles of my cards are Black, with white background.

For the cards, the customizations I’ve made have been in Page layout and Footer, but none of them have been about formatting, but visibility or contents only, so I’m not sure. You might try using  style="color:#nnnnnn" for the cards fonts; where #000000 is for black and FFFFFF is for white.

 

Hope this helps somehow.

But, as aforementioned, I’d submit a support case in order to get more assistance on this.

 

 

Sincerely,

Elvis

Userlevel 1
Badge +2

Hi @eeha0120 thanks a lot for your reply. I could change the title to black but not the cards. I have raised a ticket to support few days ago but it is taking long time to answer so I was trying in the community.

Thanks a lot for your help! :) 

Userlevel 6
Badge +11

Hi Sara. I’m glad I could help. Some times it takes times, as they need a full Web Developer / designer for that to work.

 

Any way, if still interested in changing the background, it is in Stylesheet:

 

You may try this:

 

.hero-banner-container, .hero-banner-container:before {
  background: none !important;
}
#home-page-container #hero-banner {
  background-image: url('[Your own image in a URL resource; no brackets, only the single quotes]’) !important;
  background-repeat:no-repeat;
  background-position: top;
  zoom: 0.95;
}

 

You may adjust the zoom to your needs according the image.

 

Regards,

Elvis

Reply