The Freshdesk webapp, a product developed by Freshworks.com, is a solution coded in Django that offers an all in one dashboard from where you can set-up the required features, load/edit a theme and populate content.

« Freshdesk is to Online Support Website what Wordpress.com for Bloging »

Customizing a theme

• FreshThemes Guide

Responsive breakpoints

The 4 following class CSS exist within the solution, as a mandatory stylesheet from the app itself. You can find them in portal_utils-*.css.

Reference	Media queries	Class CSSdisplay: ✅block VS ❌none
Desktop (default)	@media screen {…}	.hide-desktop❌.hide-tablet❌.hide-in-mobile✅.show-in-mobile❌
Laptop	@media screen and (max-width: 75em){…} Viewport ≤ 75em/~1200px	.hide-desktop❌.hide-tablet❌.hide-in-mobile✅.show-in-mobile❌
Tablet (horizontal)	@include at-breakpoint($media-mobile-tablet){…} Viewport ≤ 60em/~960px	.hide-desktop✅.hide-tablet❌.hide-in-mobile✅.show-in-mobile❌
Tablet (vertical)	@media screen and (max-width: 45em){…} Viewport ≤ 45em/~720px	.hide-desktop✅.hide-tablet✅.hide-in-mobile❌.show-in-mobile✅
Smartphone	@include at-breakpoint($media-mobile){…} Viewport 30em/~480px	.hide-desktop✅.hide-tablet✅.hide-in-mobile❌.show-in-mobile✅

Multilingual portal

Lang switcher

In the portal, users will have an option to switch between the supported languages by using the language switcher {{ portal | language_list }}.

Lang conditinal option

I tried the simpler {% else %} for English but it appered buggy in some situation.

{% if portal.current_language.code == 'fr' %}
    Langue de Molière
{% elsif portal.current_language.code == 'en' %}
    Checkspear language
{% endif %}

Portal customization options

Tab 1: « Color and Font »

+

Tab 2: « Stylesheet »

This available for us to customize is a SASS.scss file that is @import within the app's theme.css file.

/support/theme.css?v=*******

At the moment it does NOT look like the « Color and Font » values are available for us to use within this SCSS stylesheet. I do know a few mixins and breakpoints variables and values.

mixin + variable	value
@include at-breakpoint( $media-mobile )	@media screen and (min-width: 30em; )
@include at-breakpoint( $media-mobile-tablet )	@media screen and (min-width: 60em; )
@include border-radius()	*-border-radius: …;border-radius: …;
@include box-shadow()	*-box-shadow: …;box-shadow: …;
@include transition-duration()in conjonction with@include transition-property()	transition-duration: …;transition-property: …;

Custom variables

I propose this set of custom vars to replicate « Color and Font » values within our stylesheet.

form labels	scss variables
$portal-bgColor__body	Background-color: Body
$portal-bgColor__header	Background-color: Header
$portal-bgColor__footer	Background-color: Footer
$portal-bgColor__help	Background-color: Help center
$portal-tabColor__bg	Tab colors: Background
$portal-tabColor__active	Tab colors: Active tab
$portal-fontFamily__base	Portal fonts: Base font
$portal-fontFamily__heading	Portal fonts: Heading font
$portal-fontColor__base	Portal fonts: Base color
$portal-fontColor__heading	Portal fonts: Heading color
$portal-linkColor__base	Link color: Link text
$portal-linkColor__hover	Link color: Link text hover
$portal-accentColor__heading	Form element: Heading divider and input focus glow
$portal-btnColor__primary	Form element: Primary action button
$portal-btnColor__secondary	Form element: Secondary action button

Tab 3: « Layout and pages »

Portal layout (slots)

• Head
• Header
• Footer
• Page layout (main template)

Portal pages (templates)

• General pages
  • Portal home
  • New user signup
  • Login page
  • Search results
• Solutions
  • Solutions home
  • Article list
  • Article view
  • Solution category home
• Discussions
  • Discussions home
  • Discussion category home
  • Topic list
  • My Topics
  • Topic view
  • New topic
• Tickets
  • New ticket
  • Tickets list
  • Ticket details

Developing a theme

• Freshdesk SDK