Skip to main content
  • EN

Hi there. Does anyone know any CSS code we could use to try to change the colour of the announcements feature in Freshservice (front-end)? We are looking to find a way to make it stand out more from our portal banner. Or even if we could re-position it into the white space below that could also be a solution. I have attached a screenshot and included the current code for the Announcement View (under service desk re-branding settings): 
 

{{#if showLoader}}

  <div class="announcement-detail-loader">

    {{> loader}}

    {{> loader}}

  </div>

{{else}}

  <div class="announcement-detail-nav">

    <a href="/support/announcements" class="back">

      <span class="ficon-arrow-left back-icon" role="presentation"></span>{{translate "portal.announcements_sidebar.back_to_announcements"}}

    </a>

  </div>

  <article class="announcement-detail-container">

    <header class="announcement-detail-header">

      <div class="announcement-postedby-img">

        {{avatar name=user.name url=user.avatar_url class="user-profile-pic"}}

      </div>

      <div class="announcement-content">

        <h1 tabindex="-1" id="announcement-detail-title" class="announcement-title announcement-detail-title">{{title}}</h1>

        <p class="announcement-postedby">{{{ translate "portal.announcements_sidebar.posted_by" user_name=user.name created_on=(timediff planned_start_date) }}}</p>

      </div>

    </header>

    <div class="announcement-detail-description">{{safe_string description}}</div>

  </article>

{{/if}}


Thanks in advance. :)

Hi.

In CSS, you can use background-color and color.

 

Couple of examples:

h1 {
  background-color: black;
  color: white;
}

 

<h1 style="color:blue;">This is a Blue Heading</h1>

So, you might try:
<h1 tabindex="-1" id="announcement-detail-title" class="announcement-title announcement-detail-title" style="color: white;">{{title}}</h1>

 

Happy CCS playing.

 

Hope this helps.

 

 

Regards,

Hi,

Thanks for your response. I tried that code but unfortunately nothing pulled through. This is a direct copy and paste from the Announcement View section, just wondering if you are able to pick up on a mistake anywhere? If not may be something I need to raise with Fresh Support. TIA! :)

{{#if showLoader}}
  <div class="announcement-detail-loader">
    {{> loader}}
    {{> loader}}
  </div>
{{else}}
  <div class="announcement-detail-nav">
    <a href="/support/announcements" class="back">
      <span class="ficon-arrow-left back-icon" role="presentation"></span>{{translate "portal.announcements_sidebar.back_to_announcements"}}
    </a>
  </div>
  <article class="announcement-detail-container">
    <header class="announcement-detail-header">
     <!-- <div class="announcement-postedby-img">
        {{avatar name=user.name url=user.avatar_url class="user-profile-pic"}}
      </div> -->
      <div class="announcement-content">
       <h1 tabindex="-1" id="announcement-detail-title" class="announcement-title announcement-detail-title" style="color: white;">{{title}}</h1>
        <!-- <p class="announcement-postedby">{{{ translate "portal.announcements_sidebar.posted_by" user_name=user.name created_on=(timediff planned_start_date) }}}</p> -->
      </div>
    </header>
    <div class="announcement-detail-description">{{safe_string description}}</div>
  </article>
{{/if}}

Hi.

As I understand, the text of the announcement itself is in description which is in a direct div clause.

Can you try this?

Go to Admin → Service Desk Rebranding → Portal customization → Stylesheet

At the end, in a new line, add:

.announcement-detail-description {
    	background-color: #FBD603;
        color: white;
    }

This should set the font color to white and background color to yellow (just for testing) to the text in the div section named announcement-detail-description.

 

If that does not help, then I’d also suggest to contact FreshService support for UX Customization support.

 

Regards,

Thanks! Unfortunately no luck with that one either so I will reach out to Fresh Support! Thanks a lot for your help!!

Terms of Use