Freshdesk Support Portal Theme

This is a fully functional, Freshdesk's latest support portal theme. 


To use this theme

  1. Download the FreshThemes.zip file
  2. Unzip this file.
  3. Copy and paste contents in the text files into the corresponding stylesheet and layout pages
  4. In portal customization > Color & Font section, change the base font and heading font to source sans pro.

You can view a live demo here. Please download Freshtheme.zip to start using this theme.

home-page.png
(2.73 MB)
zip
(53.7 KB)

9 people like this idea

I can't get the the auto-populate working on our KB after switching to this theme. Everything else seems to be working.  URL: http://wsesu.freshdesk.com

HI Larry,

I tried your portal's search and it seems to be working fine. And Looks like You forgot to add " portal home page" to your theme.



Thanks 

Nithin

Hi Nithin,


Try a few others.  What we found is that we had to go back into all our solutions and re-edit and re-save them.  THEN they auto-completed.  We haven't re-saved all of them yet, just a few.  Tell me about portal home page?

Hi Larry,

Please check now. 


Thanks

Is the theme working now? I tried clicking on the preview and the layout of the page looks crazy, nothing is alligned.

Is there anyway to change the text on the links in the main navigation bar. So to change "Forums" for example. Or to add a couple more links to that bar?


Thanks,

David

David,


You will have to replace the label 'Forums' in the Header part under the Page-tabs section.  


<div class="nav-link" id="page-tabs">  <a class="" href="/support/discussions"> Forums </a> 


You can add more tabs by referencing them using the same method - <a class=" " href="Your link"> Tab name</a>


Cheers,
Aravind.S

Thanks Aravind,


But that seems to be what I already tried, but isn't working...


My code:

<nav class="page-tabs" >

  <a data-toggle-dom="#header-tabs" href="#" data-animated="true" class="mobile-icon-nav-menu show-in-mobile"></a>

  <div class="nav-link" id="header-tabs">

<a href="/support/home" class="{% if tab.tab_type == portal.current_tab %}active{% endif %}">Home</a>

<a href="/support/solutions" class="{% if tab.tab_type == portal.current_tab %}active{% endif %}">Solutions</a>

<a href="/support/discussions" class="{% if tab.tab_type == portal.current_tab %}active{% endif %}">Announcements</a>

<a class=" " href="/support/solutions/folders/5000109661">PPU Videos</a>

  </div>

</nav>


And what my header bar looks like:


I like this theme a lot and have customized it to adapt to my own site but it has a major drawback: elements are broken in LANDSCAPE orientation on a mobile device! Any chance of fixing this? I've provided some screenshots (from an iPhone 6S) of where it's breaking. This also affects your own Freshdesk Support site!  Portrait mode looks fine.


1. The menu and the New Support Ticket button stretch out too far.



2. The footer links turn into bubbles.


Thanks,

Mike

Mike,


For making this adaptable in Landscape for Mobile device we would need to increase the width attribute of Media query in the stylesheet.


Example: 


The width might be given as 720px. So it will work for mobile portrait view, for landscape view width might be greater than the one which is styled. If we increase it the css would extend to landscape view also and by this way it will look good in Landscape too.


If you go to Stylesheet you would be able to find a query like shown below


@media(max-width: 720px){
}

or

@media(max-width: 45em){
}

We would need to increase these values to make it adaptable for Landscape view.

Regards,
Nikilesh

Hi Nikilesh,


So what is the most appropriate width? do you need to set a media query that has a difference between portrait mode and landscape mode?


I'm using the same media query as specified in the Freshdesk theme seen below. It's already at 75em.

@media (max-width: 75em){
	.c-wrapper{
		width: 900px;
	}
	.quick-link-lister li{
		width: 49.6%;
	}
	.quick-link-lister h5{
		width: 60%;
		margin: 3px auto 0;
	}
}

 


Login or Signup to post a comment