Help Center Custom Responsive Theme #1

148 Comments

  • Wes Drury
    Comment actions Permalink

    @Gabriella - Make the following change

    user-nav {
    1. position: inherit;
    2. right: 0;
    3. text-align: left;
    4. top: 0px;
    5. margin-right: 140px;
    }
     
    The position is currently set to absolute.  That may mess things up once you login however I'm unable to see that.  Can you add more categories to your page and see if the accordion works then.  Normally the first accordion is open.
    0
  • Gabriella
    Comment actions Permalink

    @Wes -- changes worked on the 'submit request' part. You're amazing!! :) 

    However, the accordion still doesn't work. I added two test categories and articles, these are not drafts. Just so you know most of the articles are put in draft - but even being in draft it worked before. Please let me know if you need more explanation on this.

    Thanks a lot.

    0
  • Gabriella
    Comment actions Permalink

    @Wes -- Were you able to figure out what could cause the accordion's error? Unfortunately, still doesn't work. I tried adding new test categories/sections/articles. Sometimes - when there are only 3 categories each with 1 article  -- it would work fine. Then I added more categories and the title header disappeared. Also, when I tried adding more the whole thing got messed up. Would you please let me know what could be the problem? The first screenshot below was taken from Chrome, me signed in. The second in Safari, not signed in - where only the below categories were shown. I need to revert this now as the site is live but I would appreciate you help on this. Thank you.

     


    0
  • Wes Drury
    Comment actions Permalink

    @Gabriella - Sorry but I really can't troubleshoot without knowing what all you have done with the theme.  I just verified the original code that you copied and the accordions are working fine so you may have messed something up in the javascript or the HTML which is not causing them to collapse correclty.  You may want to go back and recopy the HTML and javascript for the accordions.  We can also make the accordions work with any javascript with the new theming platform as I have done that for another client.  I would have to see what would have to change for that to take place but it works fine the way it is.  I'm on vacation until Jan 4th (benefit for working for a school district) but I'll check back in next week.

    0
  • Gabriella
    Comment actions Permalink

    @West -- Thank you. I will try doing that. 

    0
  • Benjamin.kassentoft
    Comment actions Permalink

    Hi Wes

    I hope you can help me with a few things, while I'm trying to use your awesome design, but tweaking it a bit to fit our company.

    1. How do I change the main blue color and size of it? Can't seem to find the place to change it.
    2. How do I change the search box so it is one line, button inside the search field with rounded corners in only the right side, centered on the page, with a slight inner shadow? 

    As you can see on the screenshot, I'm not getting it completely right

    Also, it only shows up under preview, when I save it, the search box goes back to where you placed to originally?

     

    Hope you can help :o)


    0
  • Wes Drury
    Comment actions Permalink

    @Benjamin - To change the blue color you will need to update that color in teh zentastic.css file that you uploaded to your Asset area.

    You can override it in the Zendesk CSS tab with the following:

    #headerwrap {

    background-color: #000 !important;

    }

    For the search make sure you remove the {{search}} placeholder from its current location and move it to the top of the page.  You will need to play around with the CSS to get it exactly like you won't it with a shadow.  All the CSS is located on the Zendesk CSS tab for the search bar.

    0
  • Benjamin.kassentoft
    Comment actions Permalink

    @Wes Thanks a lot, got it to work 50%, It seams that I have to change it for each place, what am I looking for here? And how will I change the height of the blue field? Or can't it be replaced with an image?

    I used the search box that is being used in "search page" but it doesn't seem to be responsive? 

    0
  • Wes Drury
    Comment actions Permalink

    The height is in the same class as above so you can remove the padding and add a fixed height to it.

    padding-top: 200px; (change this)

    height: 250px; (add this)

    You could go and grab all the CSS related to the search box from the humble squid and that should work but I'm sure you would have to add and remove some of the CSS to get it exactly like you like it.  You could also just create your own Search Bar like this.

     

    HTML

    form class="search" action="/hc/en-us/search?">
    <input class="searchTerm" name="query" id="query" placeholder="Search our Knowledgebase" />
    <input class="searchButton" type="submit" />
    </form>

    CSS

    .search {
    width: 100%;
    position: relative;
    }
    .search:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-family: 'FontAwesome';
    content: '\f002';
    background:#176883;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    -webkit-font-smoothing: subpixel-antialiased;
    font-smooth: always;
    }
    .searchTerm {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border: 3px solid #176883;
    padding: 5px;
    height: 40px;
    border-radius: 5px;
    outline: none;
    }
    .searchButton {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    opacity: 0;
    cursor: pointer;
    }

     

    0
  • Benjamin.kassentoft
    Comment actions Permalink

    Thanks a lot, I will se how it goes :)

    0
  • Benjamin.kassentoft
    Comment actions Permalink

    @Wes, Hmm, I don't seem to get it to work with the height, can you help me?

    My test site is kassen.zendesk.com/hc/en-us

    Everything is left orientated looks great on mobile except the sign in button keeps disappearing. Just not the same on a Desktop.

    I'm fairly new to coding so I hope you'll bear with me a little.

    After changing the color, the footer and header doesn't seem to change? and it goes back to the original color on all the other pages

    0
  • Wes Drury
    Comment actions Permalink

    Give this a try:

    #headerwrap {
     background-color: #669999 !important;
    min-height: 250px !important;
    }
    0
  • Wes Drury
    Comment actions Permalink

    On the home page HTML add

    <div class="container">

    **right above the below line**should fix your alignment issues
    <div class="panel-group" id="accordion">

    0
  • Benjamin.kassentoft
    Comment actions Permalink

    @Wes, It didn't do the trick, can you add me on skype?

    Benjamin.g.kassentoft 

    0
  • Jessie Schutz
    Comment actions Permalink

    Once you guys get it figured out, if you feel like folks would benefit from what you learned, feel free to come back here and let us know what you found out!

    0
  • Nick
    Comment actions Permalink

    @wes, this theme is awesome. I was wondering if you could provide some assistance with the blue header and footer. I am having trouble getting this changed to our company colors which are orange and do seem available. I just cant get the color to update.

     

    Nick

    0
  • Nick
    Comment actions Permalink

    Wes...my apologies. I found one of your previous answers.

     

    @Benjamin - To change the blue color you will need to update that color in teh zentastic.css file that you uploaded to your Asset area.

    You can override it in the Zendesk CSS tab with the following:

    #headerwrap {

    background-color: #000 !important;

    }

    For the search make sure you remove the {{search}} placeholder from its current location and move it to the top of the page.  You will need to play around with the CSS to get it exactly like you won't it with a shadow.  All the CSS is located on the Zendesk CSS tab for the search bar.

     

    I will give it a shot.

    Thanks!

    0
  • Wes Drury
    Comment actions Permalink

    @Nick - Glad you were able to figure it out, just let me know if you run into any other issues.  Best of luck.

    0
  • Stephen LeBlanc
    Comment actions Permalink

    @Wes - Great stuff! I have some questions for you. Would it be possible to contact you via email or skype?

    Thanks,

    Steve

    0
  • Wes Drury
    Comment actions Permalink

    @Steve - head to moderatorwes.zendesk.com.  I have a live chat widget on there we can talk through.

    0
  • Joyce Cimbalista
    Comment actions Permalink

    Wes, where can I see your latest theme 'live'?

     

    0
  • Wes Drury
    Comment actions Permalink

    Hi Joyce which theme would you like to see live.

    0
  • Joyce Cimbalista
    Comment actions Permalink

    Preferably all of them, but if I can choose one, then I think the latest one, is that #3? 

    0
  • Wes Drury
    Comment actions Permalink

    The last free community theme that I did was the Pre-Launch theme.  You can see all my themes here

    Let me know which one you would like to see and I'll make it live or send you a link.

    0
  • Joyce Cimbalista
    Comment actions Permalink

    Pre-Launch and then if possible Zentastic. Thanks so much!

    Where would I find more info on any paid themes that you offer?

    0
  • Wes Drury
    Comment actions Permalink

    @Joyce,

    Sorry for the delay as I got caught up in meetings most of the afternoon.

    Zentastic

    PreLaunch

    You can email me directly support@wesdrury.zendesk.com  for some of my custom themes that I have worked on for various clients.

    0
  • Joyce Cimbalista
    Comment actions Permalink

    Thanks Wes!

    Are there more pages of the PreLaunch Theme that I can look at besides the countdown page and submit ticket?

    0
  • Wes Drury
    Comment actions Permalink

    @Joyce,

    No the Pre-Launch is a theme you can put up while you are working on building out your Help Center so those are the only pages for that particular theme.

    0

Please sign in to leave a comment.

Powered by Zendesk