Desk.com mobile responsive template


CSS and theme adjustments for the default desk.com template

I was recently asked to make the a Desk.com theme mobile responsive, and I was actually a little suprised that the default theme wasn’t already set up to adjust for mobile viewing. I did some googling and didn’t find any quick solutions, so I dove in and wrote some CSS to make the default theme mobile responsive.

The following steps worked for me, but may not work in the future if the default theme is updated by Desk.com, or if your theme has other customizations.

  • To get started, find your way to the list of web themes by:
    • Logging in, and clicking on the “Classic Agent” dropdown in the upper left
    • Select “Admin” from the dropdown
    • Select the “Channels” option from the main menu
    • Select “Web Themes” in the sidebar

web-themes

  • Duplicate the “Desk.com Default” theme by clicking on the copy icon (looks like stacked paper).
  • Click on the edit icon (the cog).

duplicate-theme

  • You can name this template¬†something unique if ¬†you’d like.
  • Click the “Customize Content” tab to edit various HTML sections and to add the mobile responsive css for this template.

editing-theme

Creating a custom header

For this project, we had a custom header image and menu links to style, and the CSS code includes mobile adjustments for them. The HTML / CSS combo puts the logo to the left and the menu to the right. You’ll likely want to change this to fit your needs, and you can use this “Page Header Content” as a guide for your own customizations.

<h1 class='page-header'><a href='http://your-website.com' target='_parent'><img class='logo' src='link/to/your/logo.png'/></a></h1>

<div id="menu">
	<ul>
		<li><a href="http://your-website.com">Home</a></li>
		<li><a href="http://your-website.com/some-page">Some Page</a></li>
		<li><a href="http://you-support-url-for-desk.com">Support</a></li>
	</ul>
</div>

Adding the mobile responsive CSS

Scroll down the page of the “Customize Content” tab, until you find the “Custom CSS” section. You can then copy and paste the following css into this area. After you’ve added the CSS, click the “Save and Continue Editing” button in the lower right.

/* you can import a custom font if you'd like */
@import url(https://fonts.googleapis.com/css?family=Exo%3A500%2C700%2C800&#038;ver=3.0);

#menu{ 
	padding: 18px 25px 0 0;
	vertical-align: middle; 
	float:right;
}

#menu a{ 
	color: #fff;
	/* this is using the imported custom font */
	font-family: 'Exo', sans-serif;
}

#menu ul{ 
	list-style: none;
}

#menu ul li{
	margin-left:60px;
	font-size:14px;
	float: left;
	display: block;
}

#company-header{
	background: #000;
	padding: 25px 0;
}

#company-header img.logo{
	/* customize this for your logo image */
	width: 302px;
	height: 45px; 
	margin: 0 0 0 20px;
}

#company-header .wrapper{
  max-width: 950px !important;
  padding: 0 0 0 0; 
}


@media only screen and (max-width: 980px) {

	*{
		-moz-box-sizing: border-box;
      box-sizing: border-box;
	}

	#menu{ 
		padding: 18px 25px 0;
		text-align: center;
		float:right;
		width: 100%;
	}

	#menu ul li{
		display: inline-block;
		float: initial;
		margin: 5px 10px !important;
		margin-left:60px;
		font-size:14px;
		float: left;
		display: block;
	}

	#company-header{
		height: auto;
	}

	#company-header h1{
		float: initial;
		text-align: center;
	}

	#company-header img.logo{
		margin: 0 0 0 0;
	}

	#support-header{
		padding: 20px 15px;
		margin-bottom: 0px !important;;
	}

	#support-main{
		width: 100% !important;
	}

	#support-main .dashboard td {
		border-bottom: 1px solid #CCC;
		padding: 20px 0 10px !important;
		width: 100% !important;
		display: block !important;
	}

	#breadcrumbs{
		width: 100% !important;;
	}

	.support-search-small{
		position: initial;
	}

	.wrapper{
		width: 100% !important;
		padding: 0 15px !important;
	}

	.inner{
		width: 100% !important;
	}

	.ui-autocomplete{
		width: 100% !important;
		left: 0 !important;
		margin-left: 0 !important;
	}

}

Add the meta viewport tag

  • Click on the “Advanced Theme” tab, which should be to the right of the “Customize Content” tab that you’re currently in.
  • Click on the “Header” link in the sidebar.
  • Add the below HTML code to the very top of the file
<meta name="viewport" content="width=device-width, initial-scale=1">

You can read about what this meta tag does over on CSS Tricks.

meta-viewport

Save and finish

You can now click the “Update” button in the lower left, which should save your template updates and also return you to your list of Web Themes. If the theme you’ve customized isn’t already set as the default theme to be shown to users, then click the unchecked, white, “Default” button. This will set your theme as the default, and you can now load it up and check it out.

Note that I did have some trouble getting the theme updates to load for me when viewing the support page, and that appeared to be a caching issue on Desk.com’s side. When this occurred, I found that logging out and logging back in caused the support site to update but I can’t guarantee that this will work for you if you encounter this issue.

If you need help getting this CSS / HTML working on your Desk.com support page, or would like some help making your custom theme mobile responsive, you can reach out to me through my contact page or via twitter.

This entry was posted in Random.