Help Center CSS cookbook (Guide Professional and Enterprise)

Have more questions? Submit a request

95 Comments

  • Wes Drury
    Comment actions Permalink

    @Seth - For the user name

    .user-info #user-name {
    font-size: 12px;
    font-weight: bolder;
    color: white;
    1
  • 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
  • Andrew Warner
    Comment actions Permalink

    Thanks Nicole. Happy to help where I can. 

    1
  • Trapta
    Comment actions Permalink

    Hi @Alex,

    If you are using default Copenhagen theme then this is what you have to do -

    Go to line no.709 in your CSS file and replace 

    .hero-inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 610px;
    margin: 0 auto;
    }
    1
  • OliviaBasileo
    Comment actions Permalink

    Hello! So much useful advice in these comments.

    We're using the Swiftest Elk theme and would like to know how to make the search box appear flush left on the homescreen. Tried altering the coding in a few different places but can't seem to figure it out.

    We would also like to know if it's possible for us to add an image with a hyperlink to our main website somewhere on the Help Center homepage?

    Thank you!

    1
  • 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
  • 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
  • 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
  • Suman Saha
    Comment actions Permalink

    Hey Pedro...Thanks for the help .... your suggestions worked great...Thank u again...

    0
  • Wes Drury
    Comment actions Permalink

    CSS tab starting with line 1875 (add the margin-top and adjust your pixels.)

    /Page Footer/
    .homefooter {
    border-top: 2px solid #47D9BF;
    margin-top: 80px;
    }

    Let me know if this is what you are trying to accomplish.

    0
  • Trapta
    Comment actions Permalink

    Hi @Emma,

    In your article_page.hbs template replace {{t 'was_this_article_helpful'}} with the TEXT you want to show and you'll be good to go.

    Let us know how it goes for you.

    Team Diziana

    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
  • OliviaBasileo
    Comment actions Permalink

    How can I customize my homepage footer? I was able to get the images and hyperlinks in for the most part but to adjust sizing and alignment where would I do that in CSS?
    domain is bloomsburyfashioncentral

    UPDATE: Sorry, I've been figuring things out little by little. Right now I'm trying to get all my hyperlinked images next to each other, if anyone has tips it would be greatly appreciated :)

    Thank you!

    PS:@Larisa, Thank you! I did eventually get it to work by changing the width from 49.5% to 33%

    0
  • OliviaBasileo
    Comment actions Permalink

    That worked perfectly, thank you!!

    0
  • OliviaBasileo
    Comment actions Permalink

    Hi Wes,

    I actually figured it out! The only thing left I'm trying to do that I'm having trouble with is increasing the padding between the footer and the content above (on the homepage and articles). You can see it best here: https://bloomsburyfashioncentral.zendesk.com/hc/en-us/articles/206725228-Current-Berg-Authors

    Tried inserting a padding line under a few of the comment and footer rules in the CSS but nothing has worked.

    Would greatly appreciate your help!

    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
  • 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
  • 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
  • OliviaBasileo
    Comment actions Permalink

    Hi Wes,

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

    Since it's activated the logo is as it comes, but we would like to link the logo to our own website. I've tried deleting the logo from HTML and adding in an image (same logo) in that same spot that would link to the website, but to no avail.

    Thank you!

    0
  • 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
  • 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
  • Brett - Community Manager
    Comment actions Permalink

    Hey Andres,

    It looks like one of our Community Moderators was able to provide some custom code on the following post: Help Center - Change design header to match hero image

    You may want to give that a try and see if that gets you the results you're looking for.

    Hope this helps!

    0
  • Wes Drury
    Comment actions Permalink

    @Olivia - Glad to hear. If you run into anything else along the way just let me know.

    0
  • Trapta
    Comment actions Permalink

    Hi Genevieve,

    Please try putting the below code at the bottom of your style.css file and let me know if it works for you.

    zd-autocomplete-title-multibrand {color: green !important;}

    Thanks

    0
  • Reed Matheny
    Comment actions Permalink

    Hi, question for folks here:

    I'm trying to move the article-sidebar to the right side of my article page, so that the orientation of the article grid is reversed, resulting in the following layout: 

    Free Space | Content | Sidebar

          17%       |   66%    |   17%

    Seems like it would be simple change to the CSS, but I must be missing it here. Let me know if you have any pointers. Thanks!

    0
  • Andrew Warner
    Comment actions Permalink

    Hi Heather,

    Try this;

    .article-body a {
    color: #4289f4;
    }

    0
  • Wes Drury
    Comment actions Permalink

    @Olivia - Yep you are correct - I was looking at the section titles and not the category titles. They are very similar. Find the below code in your CSS

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

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

    Sorry about that!

    0
  • Phil Williams
    Comment actions Permalink

    You can do this with css and the text property class.

    You would need a class to your style.css template. You can find the variations here:

    https://css-tricks.com/almanac/properties/t/text-decoration/

    E.g.

    .line_through { text-decoration: line-through; }

    Then switch to the html view in your guide editor (the <> symbol) and apply your new class to the element you want as per the example you saw above.

    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
  • 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

Please sign in to leave a comment.

Powered by Zendesk