Help Center Custom Theme #2

101 Commentaires

  • James
    Actions pour les commentaires Permalien

    Thanks, I forgot to make that change in my CSS, so I just fixed it. :-)

    I'd like the background to be more transparent, but when looking at my articles the screenshots are blending too much into the background image. 

    0
  • Eric
    Actions pour les commentaires Permalien

    @James, sometimes subtle is better, you don't want a design element like a transparent background to distract from your content. I'm glad you were able to get it working.

    @Jennifer, thanks for the welcome, I have web design experience but just started with ZenDesk. My company has a plus account, and I would like to know if it's possible to set up a call with someone (who knows the design side of ZenDesk) to figure out some customization issues I am having?

    0
  • Jennifer Rowe
    Actions pour les commentaires Permalien

    @Eric, not sure about that...

    You can always post those questions for the community and maybe someone here can help! Otherwise, you can file a ticket with our Support team to see if they can help or maybe offer another option.

    We definitely want you to get up and running successfully! Good luck and keep us posted.

    0
  • Camilla Parker
    Actions pour les commentaires Permalien

    Wes, for some reason I am not able to get this theme to work? It lines of weird on the home page? I also could not get the margins correct on your other theme. I must be doing something wrong. I would love to use this, just need some help! I am not a developer, at all....just delved into this blind. Any suggestions would be great! 

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Camilla - I'll be glad to try and help you but I really need to be able to see your Help Center.  Any way you post the link here or send it to me privately so that I can take a look.

    0
  • James Perez
    Actions pour les commentaires Permalien

    Hey Wes - Can you link the large buttons on the main page to particular ticket forms?

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @James - Yes you can link the buttons to any page that you like by editing the Home Page HTML.  You can get the link of your ticket form by adding {{ticket_form_list}} somewhere on your home page.  Right click on the link and select copy link address and then add it for the large button.  Then just remove the {{ticket_form_list}} placeholder.  Hope this helps and let me know if you have any other questions.

    0
  • Aubrie
    Actions pour les commentaires Permalien

    Hi Wes, 

    First, I am a complete noob and a half. Would it be possible to add just the footer? What are the steps needed to complete this? Really appreciate any help you can offer. Thank you. 

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Aubrie - You could add just the footer but would also need to add the bootstrap framework located in the Document Head.  You could archive the footer look with just some HTML and CSS.  What kind of look are you going for and I'll see if I can help you out.  

    0
  • Ben Newman
    Actions pour les commentaires Permalien

    Wes, I am trying to figure out how to keep the footer at the bottom of the page when the page does not have a lot of content. I have been attempting to implement something like this demo but have been having little luck, Any advice?  Thanks

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Ben - I'm using the Bootstrap framework so you could just add this to your footer:

    <div class="navbar navbar-default navbar-fixed-bottom">
      <div class="container">
        <span class="navbar-text">
     Something useful
     </span>
      </div>
    </div>
    
    0
  • Ben Newman
    Actions pour les commentaires Permalien

    I am trying to avoid having a fixed nav bar at the bottom and the top of the page. I will keep fiddling with it

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Ben got ya.  Then you will had to do a CSS solution.  You can try something like this but you will need to add !important to the end of these.

    CSS

    /\* Styles go here \*/
    
    /\* Sticky footer styles
     -------------------------------------------------- \*/
    
     html,
     body {
     height: 100%;
      /\* The html and body elements cannot have any padding or margin. \*/
    }
    
    /\* Wrapper for page content to push down footer \*/
    #wrap {
     min-height: 100%;
     height: auto;
      /\* Negative indent footer by its height \*/
     margin: 0 auto -60px;
      /\* Pad bottom by footer height \*/
     padding: 0 0 60px;
    }
    
    /\* Set the fixed height of the footer here \*/
    #footer {
     height: 60px;
     background-color: #f5f5f5;
    }
    

     

    HTML

    <div id="footer">
          <div class="container">
            <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
          </div>
        </div>
    
    

     

     

    0
  • Onmy Grind
    Actions pour les commentaires Permalien

     

    (VERY IMPORTANT - Change the links in the Document Head to point to your Assets folder).

    am confused on how i can point to the assets i need some help .thanks

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Onmy - On my github account there is an Assets folder with some css files and an image.  You will need to download these to your computer and then upload them to the Assets folder in Zendesk.  When you do this Zendesk will have a URL associated with the file.  You will need to copy and paste that URL to the documents head folder.

    So for example in the document head you will see:

    |   |

    <link rel="stylesheet" href="/hc/theme\_assets/YOUR NUMBER HERE/midnight.css">

    Does this help and if you don't change it, it will be pointing to my Zendesk and when I delete the file then your theme will not work any more.

    Let me know if this helps.

    |

     

    0
  • Frank Mile
    Actions pour les commentaires Permalien

    @Wes, thanks for the theme. The new theme is already at http://moderatorwes.zendesk.com Is it possible to see theme #2 somewhere.

    0
  • Ben Newman
    Actions pour les commentaires Permalien

    @Wes,

    I am attempting to add back in the options for my users to be able to see tickets by organization. I can just add in the links, but then it doesn't dynamically give this filter option based on the Users access level defined.

    I would like to do something like this,

    <div class="orgview">

     

    <ul class="dropdown-menu">
    <li>
    <a href="/hc/en-us/requests"><i class="fa fa-question"></i> MY REQUESTS</a>
    </li>
    <li>
    <a href="/hc/en-us/requests/ccd"><i class="fa fa-question"></i> CC'd REQUESTS</a>
    </li>
    <li>
    <a href="/hc/en-us/requests/organization"><i class="fa fa-question"></i> ORG REQUESTS</a>
    </li>
    <li>
    <a href="/hc/en-us/requests/new"><i class="fa fa-check"></i> NEW REQUEST</a>
    </li>
    </ul>

    </div>

    but I do not know what I would need to add to the JS to accomplish it.

    I would imagine it would be something like:

    if (HelpCenter.user.****=="*******"){
    $("div.anonymous").show();
    }

     

    Can you help me determine what needs to go in place of the *'s

     

    Thanks,

    Ben

     

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Ben - Can you give me a little more details.  You want to show a div based on a end-users organization or are you just wanting to hide/show something based if they are a end user vs anonymous.

    0
  • Ben Newman
    Actions pour les commentaires Permalien

    @Wes,
    We have the ability to mark a user access as being able to see all Organization tickets, or only just their tickets. 

    But after applying the custom theme, users who have the option marked to view tickets from their organization cannot see them. I have added in the links so they can get to this view, but cannot filter the option to view the link based on the user access level. 

    I can see in the User XML export that End users either have a restriction-id of 2 or 4; 2 allowing them to see Organization tickets, and 4 only letting them see their own tickets.

    I have a JS work around where I am showing the links based on the users tags. If they don't have my 'OrgView' tag then they cannot see the links. I was hoping there was a way for me to act on the access level of the user instead.

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Ben - Are you using the  {{organization_selector}} placeholder as if you have tickets from user org like your screenshot above then the org selector should show.  Let me setup some test data in my account and take a look.  It should show something like below however their may some CSS or something thats blocking it. 

    0
  • Ben Newman
    Actions pour les commentaires Permalien

    @Wes - I do have the placeholder on the page, but the options are not being displayed as you have displayed.

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Ben - Ok got it figured out.  We need to add the {{request_navigation}} placeholder.

    <div class="col-md-9 inner-left-md border-left">
    {{request_navigation}}
    <div class="request-table-toolbar">

    This should do the trick although you may want to play with the CSS to get it formatted like you wish. It should look exactly like my screenshot above.

    I'll make the change to my Github account and thanks for bringing it my attention.

    0
  • Ayesha Zafar
    Actions pour les commentaires Permalien

    @Wes did you ever finish "MidDay" (the lighter colors) for this theme?

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Ayesha - I moved on to another theme so no I never did convert it to lighter colors.  It should just be a few lines in the CSS file as I've seen where others have made it lighter.  I'll be glad to assist you if you need help.

    0
  • Ayesha Zafar
    Actions pour les commentaires Permalien

    Okay cool, I will be sure to ask if I can't figure it out. My immediate question right now is about the Document head html file. In your instructions you said it's very important to point all links toward my own assets, so by this I changed the Custom CSS and the Animation CSS. Am I also supposed to change Bootstrap CSS and Bootstrap JS?

     

    Here's what I have:

     

    <!-- add code here that should appear in the document head -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/p4.zdassets.com/hc/theme\_assets/571628/200112039/midnight.css">

    <!--Animaion CSS-->
    <link rel="stylesheet" href="//p4.zdassets.com/hc/theme\_assets/571628/200112039/animation.css">

    <!-- Bootstrap JS -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <!--Fonts -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

    <link href='https://fonts.googleapis.com/css?family=Nunito:400,700' rel='stylesheet' type='text/css'>

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    Everything is correct but you do need to update the Bootstrap and Fontawesome files.  You can just change the version numbers as noted below.

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    
    
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">  
    
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    
    0
  • Ayesha Zafar
    Actions pour les commentaires Permalien

    @wes Is there anyway to add images to the category boxes?

    0
  • Ayesha Zafar
    Actions pour les commentaires Permalien

    @Wes, additionally how can I change the background image? Sorry I'm very new to this, thanks for all the help! :)

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Ayesha - You can change the colors of the boxes or add background images via the CSS.  Starting on line 208 of the midnight.css file

    /* Background colors for Category Blocks */

    To add images you can remove the background hex

    background: #FAA619;  <--------------remove this

    instead use this:

    background: url(/hc/theme_assets/426700/200017498/39H.jpg) no-repeat;

    Hope this helps.

    0
  • Felix Frenzel
    Actions pour les commentaires Permalien

    hey...any idea why I am having trouble changing the pic? It is so easy and I think I did everything right, the picture is just still missing

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk