Help Center CSS cookbook (Guide Professional and Enterprise)

Have more questions? Submit a request

81 Comments

  • Wes Drury
    Comment actions Permalink

    @Seth - For the user name

    .user-info #user-name {
    font-size: 12px;
    font-weight: bolder;
    color: white;
    1
  • Seth Wylie
    Comment actions Permalink

    THERE we go! Worked like a charm! Thanks again, Wes.

    0
  • Wes Drury
    Comment actions Permalink

    @Seth - Your welcome, glad to hear everything is working.  If you need anything else along the way just let me know.

    0
  • Kevin Lewis
    Comment actions Permalink

    Hey ZD users!

     

    I was wondering if anyone has had success creating their own custom Recent activity type lists? I wondering how I could add something similar to what ZD support has on their home page that references release notes and maybe top articles. Any help you can provide would be great. Thanks! 

    0
  • Wes Drury
    Comment actions Permalink

    @Kevin - This article may get you doing in the right direction.

    0
  • Kevin Lewis
    Comment actions Permalink

    Thanks@Wes

     

    That did not quite work for me. I might just end up creating a static list, but I would much rather have a dynamic list that shows recent articles and one that shows articles from a specific section., 

    0
  • OliviaBasileo
    Comment actions Permalink

    Hello,

    I'm using the Swiftest Elk template and would like to make the Search Bar on the homepage a little smaller, or maybe reduce the padding so that users will be able to see the articles below more readily. Does anyone have any advice on how to achieve this?

    Also, is it possible to insert anchor links below the search bar but above the first category heading, which would then direct down to each category heading?

    Many thanks!! :)

    HC: https://bloomsburyfashioncentral.zendesk.com/hc/en-us

    0
  • OliviaBasileo
    Comment actions Permalink

    Update: I managed to create the anchor links, now I just need to adjust the size of my home page search bar. I've been able to play with the width and kind of get it smaller, but I can't shrink the box and text inside independently, and it looks disproportionate to shrink the box but have larger text... Would appreciate help!

    0
  • Kevin Lewis
    Comment actions Permalink

    Morning awesome people. I am trying to accomplish a few things with my search bar. 

     

    1. I would like the search bar to always stay centered in the image I have in the header of our page, but is shifts around depending on the size of the screen
    2. I want the search text to be darker and call more attention, but it is possible my opacity of the bar is causing a problem here. Ideally it would be dark black and raleway font. Right now the text is more of a light grey
    3.  I would love to change the search icon to something other than a magnifying glass.

     

    Any recommendations on where I am missing this? 

     

    This is the code I have for the search bar right now:

     

    .search-small {
    line-height: 50px;
    position: relative;
    top: 180px;
    left: 250px;
    bottom: 20px;
    opacity: 0.7;
    font-size: 12px;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    }

     

    Here is the look of the page today:

     

     

    https://help.imeetcentral.com/hc/en-us

    0
  • Don Wood
    Comment actions Permalink

    I'm using the Humble Squid template. I want to add a link or button for submitting a ticket. I tried adding a section using the example provided:

    .submit-a-request {
      font-size: 14px;
      color: green;
    }

    But I do not see any change on the main page. What am I doing wrong?
    0
  • Wes Drury
    Comment actions Permalink

    @don.  You will need to add the following placeholder on the HTML tab.

    {{link 'new_request' class='submit-a-request'}}

     

    0
  • Don Wood
    Comment actions Permalink

    Is there a way to change the width of the articles? I'm using Hubble Squid as the base and the articles seem narrow. Or, is it not advised to widen the Article size?

    0
  • Wes Drury
    Comment actions Permalink

    @Don - You can change the width of the article page but you must also adjust the side nav also.  In your CSS find the following two class. Adjust the width to whatever you would like.

    .main-column {
    float: left;
    width: 618px;
    .side-column {
    float: right;
    width: 298px;
    0
  • Morgan King
    Comment actions Permalink

    I am trying to get a three column on my category list. I've succeeded but it has large gaps - is there a way to get there to be less gaps?

     

    Here is my code:

    .category-wrapper .section {
        display: inline-block;
          padding: 0 50px 30px 0;
        vertical-align: top;
            width: 32.5%;

     

    This is what I'm seeing: https://www.screencast.com/t/Xei7JZNE2Nhn

    0
  • Don Findlay
    Comment actions Permalink

    I'm trying to hide the "Submit a request" button by adding the suggested css to the theme.

    .submit-a-request {
      display:none;
    }

    But the link still renders for the End-user.  Am I missing something?

     

     

    0
  • Andrew Warner
    Comment actions Permalink

    @Don - Have you tried to remove the link from the header?

     

    {{link 'new_request' class='submit-a-request'}} > comment out or delete this line.

    0
  • Wes Drury
    Comment actions Permalink

    @Don - Andrew is correct, the best solution would be to delete or comment out the placeholder for the submit a request.

    0
  • Don Findlay
    Comment actions Permalink

    You should probably update the cookbook to properly indicate how to "Hide the Submit a Request link" then.

     

     

    0
  • Milton Marcelo
    Comment actions Permalink

    How can I change the label "Submit a request" to another label (with the same function), like "Open a Ticket"?

    0
  • Milton Marcelo
    Comment actions Permalink

    How can I bold the category name in the homepage (profsense.zendesk.com). I tried this solution:

    .category-tree .category h2 a {
    color: inherit;
    font-weight: lighter;
    }

    Make the following change to font-weight:
    font-weight: bold;

    But nothing happened.

     

    Any idea how to do it?

    0
  • Wes Drury
    Comment actions Permalink

    @Milton - To bold the category name find the following in your CSS tab.

    .blocks-item-title (located on line 866 in your CSS tab)

    then add what you had

    font-weight: bold.

     

    The category-tree is from an older theme so you can delete that out of your CSS.

    0
  • Milton Marcelo
    Comment actions Permalink

    @Wes - Thanks a lot!!! It worked perfectly!

     

    0
  • Luke Coburn
    Comment actions Permalink

    What is the simplest way to customize content blocks within articles?  Notes, warnings, customizing ordered lists with special-looking numbers to clearly show the steps...these things are happening in a lot of Zendesk sample sites that I'm looking at.  Are they all doing this by going into the Source Code when they are authoring articles?

    For example, in the article above, the author is calling out "Note" sections by adding a yellow background color.  When an agent is authoring an article, do they have to get into the source code and manually add classes to the Note's div tag?  Or is there a way to customize the WYSIWYG editor to allow agents to highlight blocks of the article and inject classes from the front end?

    0
  • Wes Drury
    Comment actions Permalink

    @Luke - Since I coded this Help Center I can give you some insight here.  There is not a current way to do this via the editor.  In this case, there is a backend tool that adds the classes needed and then the CSS displays it.  No matter how you look at it, you would have to go into the source editor and add the classes that you need unless you used some third party backend tool.  I normally use bootstrap classes with my themes which allow the author to go into the source editor and add:

    <div class="alert alert-primary" role="alert">
      This is a primary alert—check it out!
    </div>

    I've also done some Help Centers where the classes would call images.  This help center also does this for its plan availability.  

    I was able to create a Table of Contents automatically that would look for Headers that would automatically create a Table of Contents that would link you into each heading if you had longer articles.  Other than that I've always had to use the source editor to put some code in like above that would then display the CSS.  Hope this helps and let me know if you have any further questions.

     

    0
  • Paul Burrows
    Comment actions Permalink

    The "Description" text that can be added to explain what a Category or a Section of knowledge articles is all about defaults to a very light grey that in the best of conditions is difficult to read.  

     

    I've scoured the knowledge articles and CSS in the Knowledge Base to find where I can change the font color for a Category Description or a Section Description.  I thought I had located the correct area in the CSS:

    }

    .category-description, .section-description {
    color: $color_4;
    margin-bottom: 50px;
    margin-top: -15px;

    }

    ...but alas all permutations and attempts to change the actual color (whether selected from the 5 color settings or a custom color) have no effect.  I suspect something is over-riding the change or, in my dimmest of moments, I have yet to find the magic CSS color change.  Certainly would appreciate guidance or corrections to my thinking.

    Paul

     

    0
  • Andrew Warner
    Comment actions Permalink

    Hi Paul, 

     

    I have just had a look on my own HC and if you are trying to change the description color on the home page then you'll need to change the ".blocks-item-description" class. 

    Hope this helps

    1
  • Nicole - Community Manager
    Comment actions Permalink

    Thanks for sharing, Andrew! It's always great when our users can help one another. 

    Also, I see that this is your first post - Welcome to the Zendesk Community! I encourage you to head over to the Welcome Thread in The Lounge to introduce yourself.

    We look forward to seeing you around the Community. Happy Zendesking!

    0
  • Andrew Warner
    Comment actions Permalink

    Thanks Nicole. Happy to help where I can. 

    1
  • Alex Caton
    Comment actions Permalink

    Hi!

    Have been looking around and haven't found how to do this:

    I'd like to move the search bar left to always sit in line with the edge of the left-most category block.

    Now, I've worked out how to shift the bar to the desired spot by adding a % to the relative position (.search {position: relative; right: 45%}) but that unfortunately plays havoc with the responsive nature of the search bar - when you change the window size the search bar drops off the left side of the screen.

    Is there any way to have the search bar sit & remain left aligned with the category blocks?

    0
  • Jessie Schutz
    Comment actions Permalink

    Hi Alex!

    We've got a couple Help Center customization gurus among our Community Moderators, so I'll check with them to see if they can help you figure this out!

    1

Please sign in to leave a comment.

Powered by Zendesk