Help Center Custom Responsive Theme #1
Plan Types: Regular, Plus, & Enterprise
Hi everyone,
Off and on for the last couple of months I've been working on a custom Zendesk theme. Today, I’m ready to release this theme to the Zendesk community. This theme is a responsive theme and will work across any device size including mobile.
If you’re looking for a modern theme for your Zendesk then look no further or if you just want to update your theme with some cool JS code I used please feel free to do so. The theme I used came from BlackTie Design so a big thanks goes out to them.
Note: See my second custom theme here. Pre-Launch theme here.
Download and use this theme
You can download theme from my GitHub account: https://github.com/moderatorwes/Zentastic - Updated to new Curlybars framework
Fork it, Spoon it, do whatever you like :-)
Instructions and screen shots are posted on GitHub.
Contact me: http://moderatorwes.zendesk.com
For any issues or bugs please submit them via the GitHub page: https://github.com/moderatorwes/Zentastic/issues
**Please note that I'm not a developer or a designer so please forgive me for any broken code that I used.
If you are developer or designer and want to get involved please leave me a comment below.
Thanks and Enjoy!
See the other pages in this theme
The images below show other pages in this custom theme.
Request
Article
Error
-
Hi
I'm wondering how i would implement the navbar into my Zendesk Help center, i like the idea of it flowing down the screen as you scroll with the option of submitting a request always at the top of the screen.
Just wondering what parts i would need to take a look at .
Cheers,
Andrew
-
Hi Andrew - You can copy the code from the "Header section" of either this theme or my other theme located on my GitHub account. When using the Bootstrap framework which makes your entire site responsive you just simply add something like below. Included in the Bootstrap JS and CSS files which you call will make the navbar fixed.
<navclass="navbar navbar-default navbar-fixed-top" -
Hi Wes, finally got around to playing with Help Centre and this is a great start if only to show the possibilities. Great work!
-
@Colin - Thanks
-
Just applied the theme to our Help Centre (which has barley any content yet, not public yet), however the Search box seems to be stuck in an odd position; glued directly above the first accordion and to the left.
It would be nice if the Search box sat alongside or just underneath the main heading inside the large header area. Although I'm having some difficulties working out the code you've produced, any advice you can offer, thanks Wes!
-
@Dale - you can easily move stuff around as you see fit as this should just serve as a template for you. If you wanted you could easily move it up and you may have to change the CSS a little to get it exactly where you want it. I responded to your other post so you know how to get a hold of me if needed.
-
@Wes - a big thumb's up from us! We're implemented, and the majority of it is all from you, so thanks! support.viewpath.com
-
It looks awesome, Cheryl! And so responsive. :) I love it.
-
Thanks Jennifer - and I could use an eyeball from you Wes if you have time. Just figured out my users cannot submit a support ticket in FF 31 or IE 11. Works just fine in Chrome and Safari. Blasted cross-browser issues.
-
@Cheryl - Can you provide a little more details. What is not looking correct. I have both IE11 and FF31 so I'll give it a try and see if anything looks out of place.
-
After you login, the Submit a Request button appears (I know this needs moved a bit too). Clicking on the Submit a Request button has no action. Thanks for the look!
-
@Cheryl - This may be on Zendesk side as I'm seeing an error in the console about a (403) forbidden to bootstrap.css.map I have no idea what this is or if this is the issue however I have a feeling it is. I do have a workaround if you want it. Changes are in bold.
Replace the code with the following:
HTML Tab
<nav class="user-nav">
<a href="/hc/en-us/request/new?" class="btn btn-primary pull-right submit-ticket">Submit a Request</a></nav>
JS TAB
//hide submit ticket button, follow
if (HelpCenter.user.role == "anonymous") {
$(".user-nav").hide();
$('a.btn').hide;
} -
@Cheryl - By the way your HelpCenter looks good but please fix those buttons its driving me crazy :-)
-
Thanks so much Wes - I'll give it a try.
-
@Wes - Ha! - Me too. It's just so wrong....
-
@Wes recently implemented this theme into our support site here: support.breadcrumb.com and it's made one heck of an improvement.
The problem I'm running into is that I want to add a JavaScript status update from status.io but the CSS or existing JS is interfering with it and I can't seem to get around it.
the script for the status update is here:
HTML:
CSS:
$red:#e74c3c;
$orange:#e67e22;
$yellow:#f1c40f;
$green:#2ecc71;.color-dot {
@include border-radius(99px);
display:inline-block;
width:10px;
height:10px;
margin-right:5px;
&.critical {
background-color:$red;
}
&.major {
background-color:$orange;
}
&.minor {
background-color:$yellow;
}
&.none {
background-color:$green;
}
}JS:
var sp = new StatusPage({ pageId: '39qnmk3k9q7f'});
sp.getStatus({
success: function(data) {
// adds the text description to the dropdown
$('.color-description').text(data.status.description);
// appends the status indicator as a class name so we can use the right color for the status light thing
$('.color-dot').addClass(data.status.indicator);
}
});JS imported: //statuspage-production.s3.amazonaws.com/se-v1.js
Any help would be greatly appreciated.
Thanks!
-
@Everyone - Please vote for this tip so we can make it #1. Thanks in advance -- this is the last week of voting and I know we can do better than 11 votes.
-
Just wanted to say that I was able to implement the Status.io update - seems that the .color-description was being utilized by another unit within Bootstrap (most likely).
Edited the name and all came back; check it out!
Thanks, Wes so much for this!
-
@Miles - Your site looks great! Did you throw your status.io into a alert-info block or did you just use some custom CSS. If you haven't already make sure you add a vote so we can try and make this tip number 1.
-
For now it is in an alert-info block. Ideally I want the color of the block to change when the alerts do, so I'll need to make some custom CSS.
Totally voted! This is the best tip on this site.
-
@Miles - You could just change the info-alert using some JQuery based on a certain word. We currently do something like this for our alerts. So if title says All Systems Operational then have info-alert but if it find the word Issue then Jquery could change the color to alert-danger or alert-warning.
-
Hi,
Great theme. Has anyone noticed a problem with IE11 after login the 'submit a request' button doesn't appear to work whereas it's fine with Chrome.
Any ideas anyone please?
Thx
-
@Wes,
I am playing with this theme in one of my sandbox sites and noticed that the responsive nature takes effect when the viewport size gets below 1200px. Is there a way to change that?
-
@Ben - Yes you can easily override the Bootstrap viewpoints. You can see all the viewpoints here:
http://getbootstrap.com/css/#responsive-utilities
You can override these or hide these via CSS.
-
Hey Wes -
I'm trying to edit the css that applies to the homepage (specifically the headerwrap div) and can't find where to do that.
Right now, it looks like there's two style sheets applying to the website, the normal CSS tab and then the zentastic sheet, but I have no idea where the zentastic sheet is located. The instructions said to upload it to your assets folder, but even when I upload a blank file, the style is still applying...
Any ideas?
Thanks!
-
@Aaron - There are actually three CSS files involved here - Bootstrap CSS, Zendesk CSS, and the custom CSS file.
The div header wrap is location in the zendesk CSS which means you can make the change in the zentastic.css file and then upload it with a new name and update the document head or you can put it into the Zendesk CSS tab and do some overrides.
What exactly are you trying to change and I'll see if I can provide you with the code that you need.
-
@wes
FOUND IT! I love you. The header wasn't pointing to the correct file name.
Out of curiosity, why a separate style sheet? Why not just have it with the normal CSS?
Thank you!
-
Haha. I've seen a lot of comments from people thanking Wes for helping them, but I've never seen anyone say I love you. :) That's awesome.
-
@Jennifer - Ha yes lots of thanks and one "I'm gonna name by kid after you" and now I have a "I love you" to add to the collection :-)
@Aaron - I get that question asked alot, you can always dump the CSS into the Zendesk CSS tab that you would have to do alot of overrides where as the CSS file automatically does that. I know its sometimes a pain to keep updating and changing the name of the file. I have been trying to put more of the CSS in the Zendesk CSS tab here lately and not using an external CSS file. Maybe the next theme won't have a external CSS file.
-
@Wes, round 2!
How do I edit the slider? I can't find any mention of the carousel in the zentastic, normal Zendesk CSS tab, or bootstrap style sheets.
Thanks!
Por favor, entrar para comentar.
148 Comentários