Help Center CSS cookbook (Guide Professional) Follow

Comments

48 comments

  • Avatar
    OliviaBasileo

    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!

  • Avatar
    OliviaBasileo

    One other question, how can I make the category titles bold on the homepage but leave the rest of the text (section and articles) alone? Seems like they all fall under the same font.

    Thanks!

  • Avatar
    Wes Drury

    @Olivia - Yes everything that you mentioned is possible with some HTML and CSS. Just add the necessary HTML to your image and link it back to your main site. I've also seen some companies add a link in the header which redirects back to their main site so either one is possible.

    To make the category title bold find the following class in your CSS:

    .community h2, .community h3, .section h3 {
    color: #555555;
    font-size: 13px;
    font-weight: lighter;
    margin: 10px 0 15px;
    text-transform: uppercase;
    }

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

  • Avatar
    OliviaBasileo

    Hi Wes,

    Thank you for the quick response! That coding actually made the section on the homepage bold (which looks kind of cool) but is there any designation for the category titles?

    Would you have any advice on how to move the search box to the left margin?

    Thank you!

  • Avatar
    Wes Drury

    @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!

  • Avatar
    OliviaBasileo

    Hi Wes,

    Thanks for all your help.

    I'm still having a little trouble getting an image to link back to my website. Would you be able to provide an example of how to do that? I uploaded an image to assets and I'm trying to place it where the logo would go, but I can't get the URL to attach to the image in the HTML.

    Thank you!

  • Avatar
    Wes Drury

    @Olivia - Is is possible to post the link to your Help Center so that I can see what's going on.

  • Avatar
    OliviaBasileo (Edited )

    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!

  • Avatar
    Wes Drury

    @Olivia - Thanks for the URL, that will help. I'll do my best to take a look at this by tomorrow and post some code for you.

  • Avatar
    Wes Drury

    @Olivia - You could just add the following into the HTML. Remove the {{logo}} placeholder and add: (change googole.com to your homepage.

    <div class="logo"><a title="Home" href="http://google.com">
    <img src="//p5.zdassets.com/hc/settings_assets/793026/200142987/IfCi1DgjYXsJwgER4p5rVA-zen_logo.jpg" alt="Logo">
    </a></div>

  • Avatar
    OliviaBasileo

    Worked like magic, Wes, thank you so much!

  • Avatar
    Wes Drury

    @Olivia - Awesome - best of luck and if you run into any other issues just let me know.

  • Avatar
    Frank Perazelli

    How can I vertically center the text in category-list? The vertical-align property seems to have no affect in either the "category-list li" or "category-list li a" code.
    One of my categories now has 2 lines of text and using margins to position the text does not work.
    My HC is: https://aarpfoundationtaxaide.zendesk.com/hc/en-us

  • Avatar
    OliviaBasileo (Edited )

    Hello,

    We are using a customization of the Swiftest Elk Help Center, we have our community disabled. I was wondering if there was any way we could have 3 section columns listed on the homepage rather than the default 2? I've increased the margins and would like to squeeze one more column in each row to make the page shorter.

    Our Help Center is https://bloomsburyfashioncentral.zendesk.com/hc/en-us

    Thank you!

  • Avatar
    Larisa Moore

    @Olivia - I did this in the previous incarnation of our Help Center which used Swiftest Elk. As far as I can tell, in the CSS section for the home page, I used the following code (right now I can't remember if there was another component):

    body.community-enabled .knowledge-base {
    width: 900px;
    }

    .knowledge-base, .community {
    display: inline-block;
    vertical-align: top;
    }

    .knowledge-base {
    width: 100%;
    }

  • Avatar
    OliviaBasileo (Edited )

    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%

  • Avatar
    Wes Drury

    @Olivia - Can you provide a URL or screenshot so that I can fully understand what you trying to accomplish.

  • Avatar
    OliviaBasileo

    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!

  • Avatar
    Wes Drury

    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.

  • Avatar
    OliviaBasileo

    That worked perfectly, thank you!!

  • Avatar
    Wes Drury

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

  • Avatar
    OliviaBasileo

    Another question (sorry!)

    I used a JS code to change "submit a request" to "submit a query" on my homepage and that worked great. But on the bottom on the articles it still says "submit a request"-- how can I change it to match the homepage?

    Thank you!

  • Avatar
    Wes Drury

    @Olivia - Instead of writing more code, I'm just gonna add onto the code that you already have. Edit line 48 in JS code with the code below.

    $('.user-nav .submit-a-request, div.article-more-questions a').html(' Submit a Query');

  • Avatar
    OliviaBasileo

    Perfect, thank you! :)

  • Avatar
    Seth Wylie

    Feel like I'm going crazy here. I'm trying to customize the login link color, since our link color is the same as the primary theme color.

    • Added CSS based on info above:

    • Viewing page as
    • Sign In link doesn't show in white:





  • Avatar
    Wes Drury

    @Seth - add !important at the end.  That should get it.

    .login {

    color: white !important

    }

  • Avatar
    Seth Wylie

    The good news is that worked! #CSSvoodoo @ZenTeam, should that be added to the documentation in this article?

    The bad news is that I was hoping the .login property would also affect the styling of the name of a logged-in user, which still shows with the old styling. Any idea what CSS will change the styling of the text for a logged-in user?

    • Preview as Anonymous:
    • End-User or Agent:



  • Avatar
    Wes Drury

    @Seth - thats a different class.  I normally use the below class for both of them.

    .login, .user-info {
     
    color: #176883;
    }
     
    Change the color there, you may still have to use the !important.
  • Avatar
    Wes Drury

    That class is located in your CSS already so you can find it there and make the change or if you add it manually then you will need to use the !important to override the one thats already in your CSS file.

  • Avatar
    Seth Wylie

    Thanks again, Wes. Unfortunately the .user-info approach didn't have an effect. Also, a search in the existing CSS doesn't find either .login or .user-info, so I can't just edit them there. I did find .user-nav, and tried the following, which also didn't have an effect. (I also added in the submit-a-request link.)

    .login, .submit-a-request, .user-nav {
    color: white !important;
    }

Please sign in to leave a comment.

Powered by Zendesk