Adding images to the Humble Squid category boxes Follow

Comments

16 comments

  • Avatar
    Mark Swift (Edited )

    Hello, I think this might be a slightly silly question. However, how do I get my community category to show, it doesn't seem to show, perhaps it needs a 'dummy' article against it, to show up?

    EDIT: If I read the article correctly it would help. Solved.

  • Avatar
    Jessie Schutz

    Hey Mark! Glad you got it figured out. :)

  • Avatar
    Erik Ball

    Question, 

    I see your text moved from the center with the bar to the bottom left, how is that accomplished?? I am able to align the text and remove the bar, but no go on moving to the bottom left.

  • Avatar
    Jake Bantz

    Hi Erik,

    Here is the majority of my CSS influencing those elements:

    .category-list li a {
        display: block;
        font-family: 'Raleway', Arial, sans-serif;
        font-size: 19px;
        padding: 141px 0 28px 38px;
        text-shadow: 1px 1px 2px #b3b3b3;
    }

    The padding is doing the majority of the work, but you may have to tweak some other CSS to get it just right for your Help Center. The shadow, custom font, and size preferences are unique to my Help Center, but you can feel free to reuse/modify as you see fit.

    Hope this helps!

  • Avatar
    red (Edited )

    Hey Jake, thanks for the article, this is just what I needed!

  • Avatar
    Jake Bantz

    Thanks for the shoutout Red! Glad you like it. 

  • Avatar
    Elijah Coryell

    Hi team,

    Jake, this article was great -- it helped us implement pictures in our HC and improved the user experience! We have a simple question that should be pretty straight forward. As of right now, only the area "around" the actual category titles is clickable. How can we set it so that the entire category tile/image is clickable, too?

    Thanks! We appreciate the ZD community!

  • Avatar
    Jake Bantz (Edited )

    Hi Elijah,

    Glad you like it! Is your Help Center published so I can see what your CSS looks like? If so, what's the URL? It's likely related to the padding being used on the anchor (<a>) tag within the category blocks.

    You can see some sample CSS that I used a few comments above this one and my links expand across the entire box.

  • Avatar
    Linda Larsson

    Is it possible to do this on the Copenhagen them as well?

    Ideally I would like to hide the Category title behind a clickable picture.

     

  • Avatar
    David Bensadon

    Hi, I've identified my category ID's and uploaded the images into the assets. However, i'm finding difficulty in adding the next part of the code into CSS. Tried adding it in "home page" but it doesn't seem to work. Any help would be greatly appreciated!

  • Avatar
    Jake Bantz

    @Linda - this may be possible on the Copenhagen theme, but as the category boxes resize depending on window size, that may be a bit trickier. You can assign id's to each category similar to what I've done in this article, but the positioning and how the images resize with the boxes in Copenhagen will have to be considered.

    @David - The CSS should be put into the CSS Template page, not the home page template.

  • Avatar
    Elijah Coryell

    @Jake - That advice did the trick! I did not realize padding controlled the "clickable area", so to speak. Thanks for your prompt help -- we're very happy with your team! (Help Center is here, for your curiosity.)

  • Avatar
    Elijah Coryell

    Hi again team -- 

    We have another question pertaining to the presentation of category boxes/tiles on the Help Center "home page". Thanks to the community's help, we've added custom images to category tiles, and made the whole image "clickable". Our new question is this:

    How do we enable category descriptions (visible on category pages) to appear on each category tile on the home page? (And while we are at it: How would we have this text be formatted [size, color, etc.] differently than the category name text?)

    I've peeked around the ZD community, and can't seem to find an answer. I think others have been asking this same question, too. Here are some beautiful examples of this kind of function implementation: TalkTalk TV, Mavenlink Academy, and Squarespace. For reference, our HC is here.

    Thanks so much for your help, all! @Jake Bantz, any thoughts?

  • Avatar
    Jake Bantz

    Hi Elijah,

    I will do my best to provide a general solution for your use, but please know that the final CSS and customization of this solution is up to you and what fits your brand. Thanks to the use of our Curlybars properties available in the Help Center, we can add some other category attributes to these blocks (documentation here):

    {{#each categories}}
    <li id="category_id_{{id}}"><a href="{{url}}">{{name}}<br>
    <span>{{description}}</span></a></li> {{/each}}

    Now if you would like to use CSS to target the descriptions, you could use this code as an example or feel free to add your own class to the span surrounding the description placeholder:

    .category-list li a span{
    font-size:12px;
    }

    It's up to you to add other customizations depending on your desired behavior, but this should get you started.

    Hope that helps!

  • Avatar
    Elijah Coryell

    Hi Jake,

    You and your team really excel at providing general solutions that get us on track to where we want to go. Thanks to your guidance here, we've been able to develop our Help Center right where we want it. Very much appreciated!

  • Avatar
    Jake Bantz

    Hi Elijah,

    So glad that helped you out! I really enjoy getting to see my "tips" live in the real world and not just in a test Help Center. :)

Please sign in to leave a comment.

Powered by Zendesk