Using your own theme assets for help center

Return to top

30 Comments

  • David Bjorgen

    Gerrit are you trying to include the icon in a button as a background image that appears on hover? If so, perhaps try adding the icon as a pseudo element of the button.

    .lb-nav a.lb-prev {
    position: relative;
    padding-left: 40px;
    }

    .lb-nav a.lb-prev:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 34px;
    height: auto;
    background: url($assets-prev-png) left 48% no-repeat;
    opacity: 0;
    transition: opacity 0.6s;
    }

    .lb-nav a.lb-prev:hover:before {
    opacity: 100%;
    }
    1
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hey Gerrit,

    Out of curiosity, can you try adding the background as an inline style in your HTML to see if that can access the asset correctly? Also, it might be worth removing the png from your help center assets file and re-adding it.

    Let me know how you go!

    1
  • David Bjorgen

    Gerrit have you tried encapsulating the asset pointer in quotes?

    background: url("$assets-prev-png") left 48% no-repeat;
    1
  • Tipene Hughes
    Zendesk Developer Advocacy

    Thanks for the additional context, Gerrit!

    I've just received confirmation that it is not possible to access image assets from within a CSS stylesheet that has also been uploaded as an asset. Currently, the asset path variable only resolves correctly within the themes default style.css file or in it's templates.

    Edit: to add, if you did want to use the image asset directly in the HTML template, you would need to use the asset helper, which would look something like this:

    <div style="background-image: url({{asset 'prev.png'}});"></div>
    1
  • Tipene Hughes
    Zendesk Developer Advocacy
    No worries at all, and great call out! I'm working with our docs team now to have this clarified.
    1
  • Dylan Buckley

    Heather Firth

    You'll want to load scripts in to your `document_head.hbs` file as a path to the `src` attribute, like this:

    <script src="{{asset 'your-script-name.js'}}"></script>
    1
  • Carrie Doring

    Hello!  I'd like to link to an asset in my branded agent signature, but can't get any of these expressions to work.  I'm using this markdown code:

    [![alt text](imageurl)](linkurl)

    What should I use for the imageurl?

    Thank you!

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi Bharat Dave

    Is it possible the share the live URL of your help center where you are implementing this so that I will look at it and give the solution for that?

    Thanks 

    Pulkit

    0
  • Gerrit

    David Bjorgen
    Thank you :)

    Yes. I tried. Same result.

    I also tried transform it into single elements like

    background-image: url("$assets-prev-png")
    0
  • Bharat Dave

    Hi Pulkit,

    I found the following code that worked for me from: https://support.zendesk.com/hc/en-us/community/posts/4409515213594-Set-a-page-background-image-in-Help-Center?page=1

     

    body {background-image:url($assets-myimagename-png);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: bottom right;}

    0
  • Louis Ross

    Hi Tipene, 

    How do I find the folder and asset number for my assets to use in my home_page.hbs page, like is used in the following example code:
    <img src="//theme.zdassets.com/theme_assets/2383527/82ce61cc2c0bddc27914a21813df17e0de438705.png">
     
    In my instance, it only shows the following links in the asset folder (see picture). How do I find the theme.zdassets.com/theme_assets/ folder for my instance?
     
     
    0
  • Gab
    Zendesk Customer Care
    Hi Rajan, 
     
    That's definitely possible. You can import a zip archive of a help center theme, containing templates, JavaScript, CSS, and assets.
     
    More information can be found here: Importing a help center theme
     
    0
  • Heather Firth

    I've updated my theme's api to v2 but it seems as though the assets are no longer loading. I added the assets as before and added the script to the document head but it doesn't seem to load even the smallest of scripts.

    0
  • Gorka Cardona-Lauridsen
    Zendesk Product Manager

    Louis Ross there is no specific folder for your instance and the assets can be loaded using the asset helper or asset path variables, but I would like to hear what your use case is so I can understand it and take it into our our considerations for improvements.

    Could you tell me more about your use case?

    Thanks!

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi Bharat Dave

    Please add the below CSS and let me know if it solves your issue or if it's possible to share the live URL so I will dig deep into it and provide you with the exact solution to your problem.

    .class-name {
    height: 200px;
    }

     

    Thanks 
    Pulkit

     

    0
  • Bharat Dave

    Hi

    Hope someone can help me setup a background image for my service desk. I tried to follow this article, but I cannot get it to update the background in my services desk. Please see attached. Hope someone can help thanks.

    0
  • Bharat Dave

    Hi Pulkit,

    Like this? If so, It didn't work.

     

    0
  • Rajan

    Gab I meant to use another JS file from assets in the script.js file within the theme. Currently, we do import via documenation_head.hbs.

    0
  • Chris Fewster

    Is there a way for me to add assets which match the name of the title and have those automatically inserted using 

     

    {{asset 'Card.png'}} for instead something like {{asset '{{title}}.png'}}

    0
  • Ari

    If I wanted to include an asset (a .svg image icon) in the in-line HTML of an article, how would I format that tag?

    For example, I tried <img src="{{asset 'icon.svg'}}"> but the image is always broken. EDIT: To clarify, I'm hoping to use the assets folder so I can replace the image file at a later time and the HTML code doesn't need changing.

    Thanks!

    0
  • Gerrit

    Hello all. 
    I am trying to include PNG files in a CSS, which is also in the Assets folder.  See screenshot.

    But they are not loaded. In the browser dev tools it looks like this: 

    What am I missing? 

    0
  • Gorka Cardona-Lauridsen
    Zendesk Product Manager

    Hi All, 

    We are conducting research to improve our Help Center developer experience and would love to talk to any of you that have tried to edit Help Center theme code to achieve something (doesn't matter if it is large or small customizations).

    We would like to hear you take us through what you have done or tried to do, how your experience was with our tools, documentation etc. and what feedback you have so we can improve.

    If you are interested please sign up here and we will setup a 30 min call.

    Looking forward to talking to all you!

    Gorka Cardona-Lauridsen
    Sr. Product Manager, Zendesk Guide 

    0
  • Rajan

    Tipene Hughes Gorka Cardona-Lauridsen I want to import the js file from assets in the script.js file. Is it possible??

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hi Chris,

    You can make use of the prefix attribute available to the asset helper to define the file type. Then, you'd just define the filename using an object property e.g article.title. Here's how that would look:

    {{asset article.title suffix=".png"}}

    Feel free to reach out with any questions!

    Tipene

    0
  • Tipene Hughes
    Zendesk Developer Advocacy
    Hey Felipe,
     
    Thanks for reaching out! 
     
    Uploading a folder to the assets directory in the help center theme customization section is not possible, unfortunately. If you're wanting to upload a large volume of files at once, I'd suggest either downloading the theme entirely and placing the images directly in the assets folder, or setting up a github integration for your theme where you can manage the assets in github and have the changes updated on the site directly from the github repository.
     
    I hope this helps! Let me know if you have any questions.
     
    Tipene
    0
  • Gerrit

    Hey Tipene Hughes

    Thanks for the info. I had almost thought so. A suggestion would be to include this info in your help center articles. 

    I think I will solve it by simply copying the CSS content into the style.css.

    Thanks again for the great support. 

    0
  • Gerrit

    David Bjorgen Thank you very much. Unfortunately this does not work either :(

    I see 403 errors in the console.

    Maybe I should contact tech-support. 

    0
  • Gerrit

    Hey Tipene Hughes
    thanks for your reply.

    I tried this (with and without ' ' ). 

    <div style="background-image: url('$assets-prev-png');">&nbsp;</div>

    did not work. A freshly uploaded image did not work either.

    I can see this:

    BUT! 

    I added a class to my regular style.css file of the template

    .prev-img{
    background-image: url($assets-prev-png);
    }

    in the article I added just a <div class="prev-img"></div>

    and this is the result and its shown in the article :

    Does this mean, I cannot use it in a CSS File which I added in the asset folder?

    0
  • David Bjorgen

    Ari that's how you would do it in an .hbs file. I'm not sure if you can use the curlybars in the article HTML, however.

    0
  • Felipe Soares

    Is is possible to upload a whole folder at once? As an alternative, is it possible to upload using an FTP client?

    0

Please sign in to leave a comment.

Powered by Zendesk