Recent searches


No recent searches

Help center templating cookbook



image avatar

Charles Nadeau

Zendesk Documentation Team

Edited Feb 07, 2025


10

42

42 comments

Nice, thanks Tipene Hughes.

0


Hi there

Hopefully someone can help :)

Seeking to serve a defined header image on article pages, and if no header image is defined then serve a default image.

Below serves the defined image of the first article (6701953412509) but the second article (6699434047005) header is the default:

  <div class="welcome__bg {{#if settings.welcome_mask_enable}}welcome__bg--with-mask{{/if}}">
          {{#is article.id 6701953412509}}
                  <img class="welcome__bg-image is-hidden--ui-dark" src="{{asset 'suitcasesatairport.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
                <img class="welcome__bg-image is-hidden--ui-light" src="{{asset 'suitcasesatairport.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
 

        {{#is article.id 6699434047005}}
                  <img class="welcome__bg-image is-hidden--ui-dark" src="{{asset 'cabin.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
                <img class="welcome__bg-image is-hidden--ui-light" src="{{asset 'cabin.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
                  {{/is}}    

           {{else}}
                  <img class="welcome__bg-image is-hidden--ui-dark" src="{{settings.welcome_bg}}" alt="{{settings.welcome_title}}" data-plugin-load-image>
                <img class="welcome__bg-image is-hidden--ui-light" src="{{settings.welcome_bg_dark}}" alt="{{settings.welcome_title}}" data-plugin-load-image>
              {{/is}}   

    </div>

 

 

This resolves, but obviously no default image when not defined as  {{else}} is removed.

    <div class="welcome__bg {{#if settings.welcome_mask_enable}}welcome__bg--with-mask{{/if}}">
      {{#is article.id 6701953412509}}
      <img class="welcome__bg-image is-hidden--ui-dark" src="{{asset 'suitcasesatairport.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
        <img class="welcome__bg-image is-hidden--ui-light" src="{{asset 'suitcasesatairport.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
 
{{/is}}
        {{#is article.id 6699434047005}}
      <img class="welcome__bg-image is-hidden--ui-dark" src="{{asset 'cabin.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
        <img class="welcome__bg-image is-hidden--ui-light" src="{{asset 'cabin.jpg'}}" alt="{{article.title}}" data-plugin-load-image>
      {{/is}}
    </div>

Articles referenced:

  1. https://blueislands.zendesk.com/hc/en-gb/articles/6701953412509
  2. https://blueislands.zendesk.com/hc/en-gb/articles/6699434047005

I'm sure it's a simple fix! If anyone can help that would be amazing!

Thanks
Nick

 

0


How do I get the (left) side bar to list the subsections under the main sections? Right now they are just mixed anywhere. Is there a way to have the left side bar list the sections then the sub-sections?

 

Example. 

X

    -XY

    -XYZ

0


We noticed an issue with this documentation. It should work a lot better if you replace this: 

<svg viewBox="0 0 12 12" height="12" 
                     id="zd-svg-icon-12-new-window-fill">
                         <path fill="none" stroke="currentColor" stroke-linecap=:round"  
                         d=M10.5 8.5V10c0 .28-.22.5-.5.5H2c-28
                         0-.5-.22-.5-.5V2c0-.28.22-.5.5-.5h1.5M6 614-4"></path>
                     </svg>
with this, or other code that actually works:
<svg viewBox="0 0 24 24" width="12px" height="12px" id="zd-svg-icon-12-new-window-fill"><path d="M 19.980469 2.9902344 A 1.0001 1.0001 0 0 0 19.869141 3 L 15 3 A 1.0001 1.0001 0 1 0 15 5 L 17.585938 5 L 8.2929688 14.292969 A 1.0001 1.0001 0 1 0 9.7070312 15.707031 L 19 6.4140625 L 19 9 A 1.0001 1.0001 0 1 0 21 9 L 21 4.1269531 A 1.0001 1.0001 0 0 0 19.980469 2.9902344 z M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 13 A 1.0001 1.0001 0 1 0 19 13 L 19 19 L 5 19 L 5 5 L 11 5 A 1.0001 1.0001 0 1 0 11 3 L 5 3 z"/></svg>

0


image avatar

Charles Nadeau

Zendesk Documentation Team

Thanks for reporting this, Gwyn. I updated the svg tag: https://support.zendesk.com/hc/en-us/articles/4408832681626#topic_i21_3hw_frb.

0


Hi, Charles Nadeau!

There doesn’t appear to be any documentation for what appears to be CSS preprocessor functions in Copenhagen’s style.css, e.g., “lighten” and “darken”.

  • Assuming those are in fact preprocessor functions, which preprocessor is being used? Sass, Less, something else?
  • What are the available functions, and are there any which aren’t already in that file?
  • Is there existing documentation for this?

Any info on this would be much appreciated. Thanks!

0


image avatar

David

Zendesk Customer Care

Steve Musial

The "lighten" and "darken" functions you mentioned are actually part of the Sass preprocessor. 

Regarding the available functions in Sass, there are several built-in functions beyond just "lighten" and "darken" that can manipulate colors, perform mathematical operations, and more. Some examples include "rgba", "mix", "scale-color", "invert", and "adjust-hue". You can find detailed documentation for Sass functions on the official Sass website.

0


David, thanks very much for the reply. I’m familiar with the Sass documentation and the other color functions. Not all of the Sass functions (of various types) work in the Guide, so I’m wondering if there’s any Zendesk documentation which lists which functions are available, as well as any other relevant info about the CSS preprocessor, etc., regarding capabilities and limitations. Do you have a link to Zendesk documentation for this?

0


image avatar

David

Zendesk Customer Care

Steve Musial

It looks like the only CSS official documentation we have is this right here.

I can pass that info along to see if our documentation team can add more to this.  

0


David, thanks for passing this on to the documentation team. It will be very helpful to have the preprocessor features documented.

0


image avatar

Jahn

Zendesk LuminaryCommunity Moderator

Hi Charles Nadeau Tipene Hughes -  can you help me out if it's possible to create Sub-Category block for sections and subsections? 

If yes, really appreciate if you can share the code block on how to do it in the Help Center. Thanks a lot in advance! 

0


image avatar

Greg Katechis

Zendesk Developer Advocacy

Hi Jahn! If you take a look at this post, you'll see that there have been some responses in the comment section that should be able to help get you sorted!

0


Please sign in to leave a comment.