Help Center Custom Responsive Theme #1

148 Comments

  • Wes Drury
    Comment actions Permalink

    @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.

    1
  • Andrea Saez
    Comment actions Permalink

    Hey Wes,

    I love it. I do have some design suggestions, so I might steal it and work with it a bit :) 

     

    Good job!

    0
  • Wes Drury
    Comment actions Permalink

    Thanks Andrea - feel free to add and change it any way you like.  Anything you feel needs to be added or changed just let me know and we'll update the code on GitHub.

    0
  • Andrea Saez
    Comment actions Permalink

    I'll fork it from you and add some changes on a test account :)

    0
  • Andrea Saez
    Comment actions Permalink

    #MICKEYSUNITE!

    0
  • Wes Drury
    Comment actions Permalink

    LOL #MICKEYSUNITE! - most people will not have a clue what you are talking about.  You will like the next theme also that I've already got started on.  I showed Alan that theme last night and he liked it but still have alot of work ahead of me to get all the JQuery working correctly.  Hopefully I can get some helping hands so we can release it sooner.

    0
  • Andrea Saez
    Comment actions Permalink

    Send it my way, I'd love to see it !

    0
  • Wes Drury
    Comment actions Permalink

    Take a quick look http://moderatorwes.zendesk.com - I've just started working on it so only the HomePage will work at this time.  I've got alot of editing ahead of me.

    0
  • Andrea Saez
    Comment actions Permalink

    I really like the landing page, easy on the eyes, and I like the idea of being able to search right away. I guess it depends on the client vertical that would use this. 

    I would definitely see myself using this one! The search box and the areas are available right away (this is important, to have your categories available right up on the corner)

    • points!
    0
  • Wes Drury
    Comment actions Permalink

    OK I switched the theme back to the way it was for now as I've got alot of coding to do on that one.  Yes you are correct, when I was first started playing around with it, I knew it wouldn't be for everyone however after looking at it I think its got alot of potential but it will not look like your typical Help Center.  

    For those who are reading this sorry Andrea and I switched the subject up and are talking about a different theme from the one above.

    0
  • Remco
    Comment actions Permalink

    Looks really nice, but I think it can't be used for starter accounts?

    0
  • Andrea Saez
    Comment actions Permalink

    So I had some free time on my hands..

    http://andreasaez.com/wp-content/uploads/2014/02/dogebootstrap.png

    0
  • Wes Drury
    Comment actions Permalink

    LOL glad to see a dog instead of a cat.  Tired of all the cat stuff.  Looks good.  

    0
  • Andrea Saez
    Comment actions Permalink

    Used your template, moved search bar up. Made more sense. 

    Started adding mods but then I hit refresh and lost all my work.. boooooo.. so I had to inspect-element all of it again. :P OOPS.

    0
  • Wes Drury
    Comment actions Permalink

    Hate when that happens.  I like the Search bar up more and then move the testimonials down below the categories.  I think that would look pretty good. 

    0
  • Andrea Saez
    Comment actions Permalink

    Well you definitely want people to be able to search for things right away. And since promoted articles go right on top, it's perfect. They'll find everything they need right away.

    0
  • Cheryl Wetherington
    Comment actions Permalink

    These look awesome - I totally want to implement. Love the color and clean look on both. Now if I only knew how to code...

     

    0
  • Wes Drury
    Comment actions Permalink

    The good news is that I already did all the coding for you, just need to copy and paste and then make some modifications.  You have plenty of mods that will help you with the coding so I think between us all we can make it happen.

    0
  • Cheryl Wetherington
    Comment actions Permalink

    Happy Friday dance!

    0
  • Morgan
    Comment actions Permalink

    Oooooo that is so pretty!! We were planning to move to the HelpCenter but stuff kept breaking so we are still on the old Web Portal for now. :( But I like this pretty theme!! Me likey!

    0
  • CJ
    Comment actions Permalink

    This is so great Wes! I'll try this one in our Sandbox and tweak it a little bit :D 

    0
  • Wes Drury
    Comment actions Permalink

    @Denise & CJ - I'm glad you like it and if you use it please provide the link here as I would love to see the modifications.  I'm already working on the next one so if you keep checking my site above you will be able to see it pretty soon as I will be switching to it so I can make all the modifications.

    0
  • John Lafauce
    Comment actions Permalink

    Hi Wes,

    This theme is really sweet! I've done some HTML and CSS before but I'm new to JQuery. Is there a way for me to migrate the content, categories, sections, links, etc. on our current Zendesk site to a test site using your theme and then commit when everything looks right?

    Best,

    John

     

     

     

    0
  • Wes Drury
    Comment actions Permalink

    Hi John - I don't know of a way to do what you are asking.  When you create a Sandbox it doesn't copy over the content, categories, sections, etc.  The best thing to do is to copy my theme into your Sandbox and do a few tweaks to it and then recreate your categories and sections.  Then you can add a few test articles.  Once you have it all worked out then you can copy and paste your code into your Production Help Center.  I know this is alot of copying and pasting but there's not a real easy way to do this. The Help Center team is thinking of ways to make this easier in the future but its probably not that high up on their priority list.  If you need help along the way just let me know.

    0
  • Selena Johns
    Comment actions Permalink

    My plan is currently 'regular' so we don't have the sandbox feature. I did however apply the files without publishing them to see how it would look with our data.... it was oh so pretty!

    A little note for others applying this in the future is to copy the asset links and replace the reference you have in the Home Page and Header html.

    I did get stuck on the Home Page accordion though. Is there a trick to getting all Categories to work as only our first one (Internal) looked like your screen shot and the rest just followed as h2. I can have another go at applying this if you need screen shots and code extracts to troubleshoot this.

    As we don't have a sandbox does anyone know if there would any issues with creating a new trial account to setup Help Center themes for testing?

    0
  • Wes Drury
    Comment actions Permalink

    @Selena  - thanks for the feedback and yes creating a new trial account is a great idea and should work perfectly.  The accordion should work as is, I have the code running in my Production Help Center and also the theme.  Let me compare the code as something may have happened during the copy process.  Screenshots will help if you can't post the link.

    0
  • Selena Johns
    Comment actions Permalink

    @Wes - I've setup a new trial account for testing and worked out my problem. A few of my Categories have & in the name. Once I removed this the Home Page worked great.

    0
  • Wes Drury
    Comment actions Permalink

    Glad to hear and once you get done please post a link back here of your Help Center as I would love to see it.

    0
  • Dan Smith
    Comment actions Permalink

    @Wes, I love what you have done with this. I am very interested in using the Accordion feature for our Home Page. Would it be possible for you to point out which sections I would need to implement in order to do this?

    0
  • Wes Drury
    Comment actions Permalink

    @Dan - The accordions are actually created with the Bootstrap javascript.  Follow the instructions in the below link which will setup your Document Head and copy the CSS into your CSS.

    https://support.zendesk.com/entries/27128856

    Once you have that then go to my GitHub page(link aboe) and navigate to JS/js.txt.  Inside there copy the section that has  //setup dynamic accordion// 

    On your Home page add:

    <div class="panel-group" id="accordion">

                <div class="panel panel-default accordian-group">

                    {{category_tree}}

                </div>

            </div>

    Give that a shot and let me know if you have any issues as I didn't have time to test everything but that should be the meat of it.

    0

Please sign in to leave a comment.

Powered by Zendesk