Help Center Custom Responsive Theme #1

148 Commentaires

  • Wes Drury
    Actions pour les commentaires Permalien

    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.

    0
  • John Lafauce
    Actions pour les commentaires Permalien

    Thank you @Wes!

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Ben Loh
    Actions pour les commentaires Permalien

    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

    0
  • Benny Neugebauer
    Actions pour les commentaires Permalien

    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?

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Benny Neugebauer
    Actions pour les commentaires Permalien

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

    0
  • Skip Moore
    Actions pour les commentaires Permalien

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

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Ben Loh
    Actions pour les commentaires Permalien

    Thanks Wes,

    I'll be sure to! 

    0
  • Steven Davis
    Actions pour les commentaires Permalien

    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

    0
  • Ben Loh
    Actions pour les commentaires Permalien

    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. 

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

     

    0
  • Ben Loh
    Actions pour les commentaires Permalien

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

    0
  • John Lafauce
    Actions pour les commentaires Permalien

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

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Dan Smith
    Actions pour les commentaires Permalien

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

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Vincent Arnoux
    Actions pour les commentaires Permalien

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

     

    0
  • Ben Loh
    Actions pour les commentaires Permalien

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

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @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');

    });

    0
  • Vincent Arnoux
    Actions pour les commentaires Permalien

    Thank you for your help, Wes!

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Vincent - Glad I was able to help.

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    http://moderatorwes.zendesk.com

    0
  • Jennifer Rowe
    Actions pour les commentaires Permalien

    I like it, Wes! 

    0
  • James
    Actions pour les commentaires Permalien

    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. 

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • James
    Actions pour les commentaires Permalien

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

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk