Help Center Custom Responsive Theme #1

148 Comments

  • Andrew Byrne
    Comment actions Permalink

    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 

    0
  • Wes Drury
    Comment actions Permalink

    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"  
    
    0
  • Colin Piper
    Comment actions Permalink

    Hi Wes, finally got around to playing with Help Centre and this is a great start if only to show the possibilities. Great work!

    0
  • Wes Drury
    Comment actions Permalink

    @Colin - Thanks

    0
  • Dale Owen
    Comment actions Permalink

    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!

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Cheryl Wetherington
    Comment actions Permalink

    @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

    0
  • Jennifer Rowe
    Comment actions Permalink

    It looks awesome, Cheryl! And so responsive. :) I love it.

    0
  • Cheryl Wetherington
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Cheryl Wetherington
    Comment actions Permalink

    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!

    0
  • Wes Drury
    Comment actions Permalink

    @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;
    }

    0
  • Wes Drury
    Comment actions Permalink

    @Cheryl - By the way your HelpCenter looks good but please fix those buttons its driving me crazy :-)

    0
  • Cheryl Wetherington
    Comment actions Permalink

    Thanks so much Wes - I'll give it a try. 

    0
  • Cheryl Wetherington
    Comment actions Permalink

    @Wes - Ha! - Me too. It's just so wrong....

    0
  • Miles Mabry
    Comment actions Permalink

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

     

     

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Miles Mabry
    Comment actions Permalink

    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!

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Miles Mabry
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Josh Robinson
    Comment actions Permalink

    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

    0
  • Ben Newman
    Comment actions Permalink

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

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Name
    Comment actions Permalink

    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!

    0
  • 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
  • Name
    Comment actions Permalink

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

    0
  • Jennifer Rowe
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Name
    Comment actions Permalink

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

    0

Please sign in to leave a comment.

Powered by Zendesk