• Andrew Byrne

  • 20 de junho de 2014 13:20

  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 

• Wes Drury

  • 23 de junho de 2014 02:30

  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"  
  

• Colin Piper

  • 23 de junho de 2014 08:12

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

• Wes Drury

  • 23 de junho de 2014 14:06

  @Colin - Thanks

• Dale Owen

  • 25 de junho de 2014 09:30

  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!

• Wes Drury

  • 25 de junho de 2014 18:50

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

• Cheryl Wetherington

  • 29 de agosto de 2014 23:05

  @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

• Jennifer Rowe

  • 29 de agosto de 2014 23:09

  Zendesk Documentation Team

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

• Cheryl Wetherington

  • 30 de agosto de 2014 01:11

  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.

• Wes Drury

  • 30 de agosto de 2014 02:40

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

• Cheryl Wetherington

  • 30 de agosto de 2014 02:56

  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!

• Wes Drury

  • 30 de agosto de 2014 04:23

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

• Wes Drury

  • 30 de agosto de 2014 04:26

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

• Cheryl Wetherington

  • 30 de agosto de 2014 04:26

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

• Cheryl Wetherington

  • 30 de agosto de 2014 04:28

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

• Miles Mabry

  • 9 de janeiro de 2015 22:20

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

   

   

• Wes Drury

  • 27 de janeiro de 2015 03:30

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

• Miles Mabry

  • 29 de janeiro de 2015 21:03

  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!

• Wes Drury

  • 29 de janeiro de 2015 21:15

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

• Miles Mabry

  • 29 de janeiro de 2015 21:17

  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.

• Wes Drury

  • 29 de janeiro de 2015 21:23

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

• Josh Robinson

  • 3 de agosto de 2015 16:39

  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

• Ben Newman

  • 18 de agosto de 2015 23:12

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

• Wes Drury

  • 19 de agosto de 2015 13:12

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

• Name

  • 19 de agosto de 2015 17:56

  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!

• Wes Drury

  • 19 de agosto de 2015 22:18

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

• Name

  • 19 de agosto de 2015 22:42

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

• Jennifer Rowe

  • 20 de agosto de 2015 00:02

  Zendesk Documentation Team

  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.

• Wes Drury

  • 20 de agosto de 2015 13:49

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

• Name

  • 20 de agosto de 2015 17:57

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