Help Center Custom Theme #2

Comments

101 comments

  • Avatar
    Kristof Van Kriekingen

    Damn nice as always ;P
    The other pages are a bit dark ' in my opinion ' then again it's Midnight theme!
    I specially love the moon icon next to the title.

    You should add, under Plan types, a ' Time to install ' : +- 30 minutes tops.
    So people can see it takes no time to install it.

    Kind regards
    Kristof

  • Avatar
    Wes Drury

    @Kristof - Thanks for the feedback and yes I will add the Time to install as that's a good idea.  I know this theme is dark and not for everyone so I'm working on a light version called "MidDay" which will be an additional CSS file to install.  

  • Avatar
    James

    Hi again @Wes, 

    I am trying to remove the "Hot topics" area and I can't seem to find what I need to take out so there is no empty space to the right of the category boxes. Any guidance would be appreciated. :-)

     

    James

  • Avatar
    Wes Drury

    @James - So are you wanting to completely remove that area and for the category boxes to fill the entire area or do you want to center the category boxes.  We can do this straight through the HTML and I've provided code to do either way so you can see what looks best:

    Comment out the following lines:

    Line 19 - <!-- <div class="row"> -->

    Lines 51 - 57 

    <!-- <div class="col-lg-6">
    <div class="promoted-articles containerPR">
    {{promoted_articles}}
    {{trending_questions}}
    </div>

    </div> -->

    Edit the following line:  Line 20

    <div class="col-lg-6">

    Change Line 20 (to fill entire area):

    <div class="col-lg-12">

    OR (center it with the Search bar)

    <div class="col-md-10 col-md-offset-1">

    If you need more padding on the sides then use:

    <div class="col-md-8 col-md-offset-2">

    That should fix you up.  Theme is looking good in the screenshot!!  Let me know if you need anything else.

  • Avatar
    James

    Awesome, worked like a charm!

  • Avatar
    James

    Sorry @Wes, one more question (for now!):

    Where can I change the color of the header/nav bar? I need it to be white and can't seem to find it

    I also need to insert our company logo, where would be the best place to add this code after I've uploaded it as an asset and make it centered?

  • Avatar
    Wes Drury

    You can change the "NavBar" color from the Midnight.css file in your assets folder:  Line Number 87

    .navbar-inverse {
    background-color: #000 !important;
    border-color: #1789c1;
    }

    You will need to change the name of the file and re-upload it.  For example midnight2.css then update your Document Head to point to the new CSS file.

    The image is going to be a little bit tricky so I will have to do some testing for that.

  • Avatar
    Matthew Briley

    Wes, why do the Community, Contribution, and My Activities sections have a black background as opposed to the image? Is there a way to have all pages reflect the same background?

  • Avatar
    Wes Drury

    @Matthew - Just giving people different options.  If you want the background images on all pages then add <div class="pt"> below the <div id = ww> and put a closing div at the very bottom of the page </div>.  Now if you want the background image on the community that will need to be done via JQuery so I would have to do some testing for that.

  • Avatar
    Matthew Briley

    Thanks Wes!

  • Avatar
    Matthew Briley

    @Wes, another question. One some pages where we don't have much content, the footer gets drawn up and leaves white space at the bottom (as you can see in the attached image). Do you know how that problem would be fixed?

  • Avatar
    Wes Drury

    @Matthew - Thanks for bringing this to my attention.  You will need to add the following to your midnight.css around line 200 under the #footer element.

    box-shadow: 0px 500px 0px 500px #2f2f2f;

    I will also update the code on github.

  • Avatar
    James

    Hi again Wes.:-)

    How would I go about changing the icons that appear on the home page? I think I am going to have the designers here make custom icons, any specifications for this?

  • Avatar
    Wes Drury

    @James either will work.  I'm currently using Font Awesome icons which are very easy to swap out.  

    http://fortawesome.github.io/Font-Awesome/icons/

    For example if you wanted to swap out the icon for Announcement then find the icon you want then just replace the following code:

    <i class="fa fa-bullhorn"></i>

    WITH this which you get when you click on an icon:

    <i class="fa fa-exclamation-triangle"></i>

    Now your icon is a Exclamation point inside of a triangle.  

  • Avatar
    Matthew Briley

    @Wes, did you figure out how to change the icon in the header over to an image?

  • Avatar
    Wes Drury

    @Matthew - you should be able to just add some html in there to change that over to a image.

    Something like that should work and if you need further help just let me know.  Sorry for the late response as I've been at a conference.

  • Avatar
    James

    @Wes - I can't seem to figure out how to get rid of all this extra space below my footer, I must have fudged something up without realizing it. Do you know where I'd be able to fix this?

     

  • Avatar
    Eric

    Wes, really nice work on this templates. 

    I am trying to customize my help center and I am trying to combine some features. I would like to have a small accordion menu within each category, similar to the one you use in Zentastic, but this would only display within the category itself and would dynamically load the sections/articles (Pinterest's help center, is what I am modeling mine after). I tried to modify your code but had no luck. Any help you can provide is appreciated. Thank you.

  • Avatar
    Eric

    James, can you post your hompage and footer code? 

  • Avatar
    Wes Drury

    @James - sorry for the late response.  I don't know of a way to get rid of the extra space there as its part of Zendesk's themes.  All there themes are like that so I would suggest that you make your picture bigger or add some spacing to move things down a little.

    @Eric - I took a look at Pinterest's site and I'm not positive on how they are doing their side menus as I'm sure its a JQuery plugin of some sort.  I'm about to post my pre-launch theme (http://moderatorwes.zendesk.com) and then I'll try and take a look at your modifications.

  • Avatar
    Eric

    Thanks Wes, in the mean time is there a way to modify your accordion menu Javascript so that when placed on a Category page it displays the Sections and articles? Thanks again for your help.

  • Avatar
    Eric

    @James - I was able to remove the white space at the bottom of the page for all of my pages with the exception of the Homepage by adding this to my css:

    html, body, main, container {

      height:100%;

    }

    You may have to modify it based on any new divs you have created.

    It is causing issues with the footer on the homepage, for some reason it moved up and is overlapping content (as if the other elements were floated). So far nothing I have tried has gotten it back to the bottom of the page.

  • Avatar
    Tony

    @Wes I sent a support request on that awesome pre-launch theme, Is that something you plan to make available? As a new business this sort of theme meets my current needs given the lack of knowledge base articles I have. I plan to have everything written up over the next month or so, and until then, it's absolutely perfect (and gorgeous) thanks.

  • Avatar
    Wes Drury

    @Teecartel - Yes I do plan on making the pre-launch theme available.  I responded to you via the ticket also.  How fast are you wanting it as I've got some of the code copied so need to finish that and also create a new post here to announce it.  Can't make any promises but I'll get everything out there as soon as I can.

  • Avatar
    Wes Drury

    @Teecartel - Yes I do plan on making the pre-launch theme available.  I responded to you via the ticket also.  How fast are you wanting it as I've got some of the code copied so need to finish that and also create a new post here to announce it.  Can't make any promises but I'll get everything out there as soon as I can.

  • Avatar
    James

    Thanks for all your help @Wes and @Eric. I have one more issue I'm having trouble resolving, and it's dealing with the "Section" pages. All my category/article pages look fine:

     

     

    However, I can't figure out how to make my section page look the same:

     

    Any advice on this? I've been stumped for a little while on this and finally getting some time to work on it again. 

  • Avatar
    Eric

    @James, it looks like you might have a container or main div on your section page set with the gray background color. I like to load my oage in Firefox with the Web Developer widget loaded, then use the Information tab to "View Element Information", this allows me to select a specific area of the design and determine which divs are causing the issue(s).

    Also just from a design perspective (completely subjective), have you tried going with white instead of the dark gray, keep the slight transparency though.

  • Avatar
    James

    @Eric - Thanks for your help! I was able to get it figured out and took your suggestion for a white background. I have been going back and forth over which color to use and I do agree the white is easier on the eyes. 

  • Avatar
    Wes Drury

    @James - I agree with Eric a white transparent would look alot cleaner.  I would still do a transparent though and not a solid color white.

  • Avatar
    Jennifer Rowe

    @Eric, thanks for helping out! You're new here, right? :) Welcome to the community.

    @James, glad you got it figured out. Would love to see the final version when you get it ready.

Please sign in to leave a comment.

Powered by Zendesk