• Wes Drury

  • 21. März 2014 20:43

  Hi John - The section you are referring to is actually a Bootstrap Carousel.  That code is being called from the Bootstrap JS file located in the document head.  Once you have the Bootstrap.js in your header you can add lines 25 - 59 from my Home Page.  The only thing missing would be the CSS which should be below.  I may have missed some of the CSS so if it doesn't look right just let me know.  Everything works best when you use the entire Bootstrap Framework and make your site responsive.  I believe the code below should work as well.

  .carousel {
  position: relative;
  }
  .carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  }
  .carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: .6s ease-in-out left;
  transition: .6s ease-in-out left;
  }
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
  line-height: 1;
  }
  .carousel-inner > .active,
  .carousel-inner > .next,
  .carousel-inner > .prev {
  display: block;
  }
  .carousel-inner > .active {
  left: 0;
  }
  .carousel-inner > .next,
  .carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
  }
  .carousel-inner > .next {
  left: 100%;
  }
  .carousel-inner > .prev {
  left: -100%;
  }
  .carousel-inner > .next.left,
  .carousel-inner > .prev.right {
  left: 0;
  }
  .carousel-inner > .active.left {
  left: -100%;
  }
  .carousel-inner > .active.right {
  left: 100%;
  }
  .carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  filter: alpha(opacity=50);
  opacity: .5;
  }
  .carousel-control.left {
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .5) 0%), color-stop(rgba(0, 0, 0, .0001) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
  background-repeat: repeat-x;
  }
  .carousel-control.right {
  right: 0;
  left: auto;
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .0001) 0%), color-stop(rgba(0, 0, 0, .5) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
  background-repeat: repeat-x;
  }
  .carousel-control:hover,
  .carousel-control:focus {
  color: #fff;
  text-decoration: none;
  filter: alpha(opacity=90);
  outline: none;
  opacity: .9;
  }
  .carousel-control .icon-prev,
  .carousel-control .icon-next,
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
  }
  .carousel-control .icon-prev,
  .carousel-control .glyphicon-chevron-left {
  left: 50%;
  }
  .carousel-control .icon-next,
  .carousel-control .glyphicon-chevron-right {
  right: 50%;
  }
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  font-family: serif;
  }
  .carousel-control .icon-prev:before {
  content: '\2039';
  }
  .carousel-control .icon-next:before {
  content: '\203a';
  }
  .carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
  }
  .carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 10px;
  }
  .carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #fff;
  }
  .carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  }
  .carousel-caption .btn {
  text-shadow: none;
  }
  @media screen and (min-width: 768px) {
  .carousel-control .glyphicons-chevron-left,
  .carousel-control .glyphicons-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  font-size: 30px;
  }
  .carousel-caption {
  right: 20%;
  left: 20%;
  padding-bottom: 30px;
  }

  Give that a shot and let me know how it goes.

• John Lafauce

  • 24. März 2014 22:13

  Thank you @Wes!

• Wes Drury

  • 25. März 2014 03:03

  @John - Sorry for the long post with all the code but let me know how it goes.

• Ben Loh

  • 25. März 2014 05:47

  Hi Wes,Just wanted to say thanks for this amazing theme! I've currently implemented it into our company's zendesk help center and am slowly making custom changes to feel more like us. The functionality is fantastic, lots of people here love it. 

  So far it looks pretty stock standard but I can't wait to delve in and do some changes myself. Thanks! :D

• Benny Neugebauer

  • 25. März 2014 09:49

  Is there the plan to have a templating system for Zendesk? Copying and pasting code is not very elegant. It would be better if you could upload complete themes as zip file. With WordPress you can do something like that. Maybe this would be possible for Zendesk too?

• Wes Drury

  • 25. März 2014 13:03

  @ben.loh - Great to hear and make sure you post a link once your all done so I can see my handy work out in the real world.

  @Benny - There is a plan to have a template system for the Help Center.  During a discussion with the Help Center Product Manager he stated his team is looking into a template system.  I'm not sure where its at on the list but they are looking into something.

• Benny Neugebauer

  • 25. März 2014 13:08

  @Wes - That sounds great! Good to hear that efforts are made in that area. By the way, is it possible to load custom fonts which have been uploaded as "Assets" to Zendesk? Because I always get a 403 (Forbidden) response when I try to load .ttf, .woff or .svg files from " https://p2.zdassets.com/hc/theme_assets".

• Skip Moore

  • 25. März 2014 16:22

  Zendesk team member

  you don't have to put the fully qualified domain names you can use relative links like '/hc/theme_assets' 

• Wes Drury

  • 25. März 2014 17:19

  @Benny - I always use Google Fonts but you can check this tip out  from Jan.

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

  @Skip - Thanks for bringing that up as I always forget to use relative links.

• Ben Loh

  • 25. März 2014 22:19

  Thanks Wes,

  I'll be sure to! 

• Steven Davis

  • 26. März 2014 05:00

  Hey Jhon,

  We will perform a rigorous search engine optimization review and provide SEO services. Eminence Consulting will analyze the website, identify areas which could be improved in order to increase traffic and make recommendations for changes to content, code and any other issues that may affect the site’s performance. please go to: http://eminenceseoconsulting.com

• Ben Loh

  • 26. März 2014 05:23

  Hey all

  Just wanted to ask... when you go to the Community part of the theme, everything is skewed to the left, not centered like the rest of the site. I know Zendesk don't currently allow editing of the Community HTML page but was just wondering if there was anything in the current code we can edit to resolve this? Screenshot attaching so you know what I mean. Notice that some of it is aligned but I did that the messy way by adding in some padding to some of the div tags. 

• Wes Drury

  • 28. März 2014 14:11

  @Ben - I think we can add a class there via JQuery which will align it.   Have you looked at the Community CSS to see if you can tweak it there.   I'm working on a new theme right now so when I get a chance I'll take a look.

   

• Ben Loh

  • 30. März 2014 21:15

  Many thanks Wes, I'll take a good look and play around and see if I can sort that one out! :) 

• John Lafauce

  • 2. April 2014 19:26

  @Wes, I really like your re-designed website!

• Wes Drury

  • 3. April 2014 01:36

  @John - Thanks I'm putting the final touches on it and hopefully will release it sometime this month.

• Dan Smith

  • 5. April 2014 04:32

  Was anyone able to come up with something for the alignment of the Community page?

• Wes Drury

  • 8. April 2014 04:39

  @Ben & Dan - Great news I've updated the GitHub with the JS code to align the community section.  Line 8 through 14 on the JS.txt.  I actually figured this out while working on Dan's site so thanks to Dan for allowing me to customize his site.

  @John - I will be uploading the new site starting this week so you may want to follow my GitHub account.

• Vincent Arnoux

  • 9. April 2014 03:45

  @Wes: I have been trying to follow your instructions, I have added to my home page:

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

  <div class="panel panel-default accordian-group">
  {{category_tree}}
  </div>
  </div>

   

  The following to my Document Head:

  <!-- Latest compiled and minified JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

   

  As well as what is below to my CSS window. The site still does not work. Can you please tell me what I did wrong:

  /* ====================================================
  Accordion CSS
  ==================================================== */
  .collapse {
  display: none;
  }

  .collapse.in {
  display: block;
  }

  .collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
  }

  .panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  }

  .panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  }

  .panel-title > a {
  color: inherit;
  }

  .panel {
  margin-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }

  .panel-body {
  padding: 15px;
  }

  .panel-body:before,
  .panel-body:after {
  display: table;
  content: " ";
  }

  .panel-body:after {
  clear: both;
  }

  .panel-body:before,
  .panel-body:after {
  display: table;
  content: " ";
  }

  .panel-body:after {
  clear: both;
  }

  .panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  }

  .panel-group .panel {
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 4px;
  }

  .panel-group .panel + .panel {
  margin-top: 5px;
  }

  .panel-group .panel-heading {
  border-bottom: 0;
  }

  .panel-group .panel-heading + .panel-collapse .panel-body {
  border-top: 1px solid #dddddd;
  }

  .panel-group .panel-footer {
  border-top: 0;
  }

  .panel-group .panel-footer + .panel-collapse .panel-body {
  border-bottom: 1px solid #dddddd;
  }

  .panel-default {
  border-color: #dddddd;
  }

  .panel-default > .panel-heading {
  color: #333333;
  background-color: #f5f5f5;
  border-color: #dddddd;
  }

  .panel-default > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #dddddd;
  }

  .panel-default > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #dddddd;
  }
  .panel-primary {
  border-color: #428bca;
  }

  .panel-primary > .panel-heading {
  color: #ffffff;
  background-color: #428bca;
  border-color: #428bca;
  }

  .panel-primary > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #428bca;
  }

  .panel-primary > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #428bca;
  }

  .panel-success {
  border-color: #d6e9c6;
  }

  .panel-success > .panel-heading {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  }

  .panel-success > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #d6e9c6;
  }

  .panel-success > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #d6e9c6;
  }

  .panel-warning {
  border-color: #fbeed5;
  }

  .panel-warning > .panel-heading {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #fbeed5;
  }

  .panel-warning > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #fbeed5;
  }

  .panel-warning > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #fbeed5;
  }

  .panel-danger {
  border-color: #eed3d7;
  }

  .panel-danger > .panel-heading {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
  }

  .panel-danger > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #eed3d7;
  }

  .panel-danger > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #eed3d7;
  }

  .panel-info {
  border-color: #bce8f1;
  }

  .panel-info > .panel-heading {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
  }

  .panel-info > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #bce8f1;
  }

  .panel-info > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #bce8f1;
  }

   

• Ben Loh

  • 9. April 2014 04:33

  @Wes thank you HEAPS for that fixer upper code! Community looks great :) 

• Wes Drury

  • 9. April 2014 13:01

  @Vincent - Its hard for me to troubleshoot without seeing your site.  Can you please send me a link to your site.  If you do not want to post your site then you can email it to me at wes[at]cibertec.net.

  @Ben - Glad to hear,  I hope that helps with completing your site.  Can't wait to see it.

• Wes Drury

  • 11. April 2014 14:55

  @Everyone here is some code that you can add to be able to Expand and Close all accordions.

  HTML

  <button type="button" class="btn openpanel">Expand All</button>
  <button type="button" class="btn closepanel">Collapse All</button>

  JS

  //add Open & Close All to accordions  

    $(".openpanel").on("click", function() {

      $("#YourCategory, #YourCategory, #YourCategory").collapse('show');

  });

  $(".closepanel").on("click", function() {

      $("#YourCategory, #YourCategory, #YourCategory").collapse('hide');

  });

• Vincent Arnoux

  • 11. April 2014 23:04

  Thank you for your help, Wes!

• Wes Drury

  • 14. April 2014 19:55

  @Vincent - Glad I was able to help.

• Wes Drury

  • 14. April 2014 19:56

  @Everyone - Another theme is almost complete please take a look and give me some feedback.

  http://moderatorwes.zendesk.com

• Jennifer Rowe

  • 14. April 2014 22:23

  Zendesk Documentation Team

  I like it, Wes! 

• James

  • 17. Juni 2014 20:44

  Hey Wes, 

  I am trying to recreate your  "midnight" theme but I don't think I have uploaded the css files correctly. I can't see what I could be doing wrong...any quick guidance you could provide would be awesome. 

• Wes Drury

  • 17. Juni 2014 20:49

  @James - I assume you copied everything from my GitHub account so after that's done ensure that in the "Document Head" that you re-point the links to your "Asset area".  So make sure you midnight.css file is pointing to the right location.  Let me know if that helps.

• James

  • 17. Juni 2014 20:53

  That did it! I completely forgot to change the doc head...THANK YOU!

• Wes Drury

  • 17. Juni 2014 20:56

  @James - Not a problem as I already knew the answer as someone had the exact same issue a couple of days ago on the Midnight theme.  Also I just uploaded the "Search.html" page as I left it out.  I'll publish a new Tip for the Midnight theme within the next few days.  Goodluck and if you have any questions just let me know.

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.