Help Center - Humble Squid customization

24 Comentarios

  • Wes Drury

    @Andrew - I believe I have done some code for someone else.  I'll see if I can find it.

    0
  • Andrew Checkley

    Wes thanks :)

    0
  • Wes Drury

    @Andrew - Take a look at the code I posted here.  I believe this is what you are asking for.

    https://support.zendesk.com/hc/communities/public/posts/203458726-Help-Center-Adding-icons-into-your-theme?page=2#comments

    0
  • Andrew Checkley

    Wes,

     

    Thanks. I was assuming i would have to use webdings but these look far better thanks. How do I get them as an article though??

     

    I can see an example image showing article list with a tick. but no code? and I dont want every article to have the icon I would like to be able to choose which ones have it and which ones do not. perhaps even having a couple of different icons, one to indicate downloadable manual included, one for video etc. etc. 

     

    Just want to highlight on a quick glance the extra options.

     

    Thanks

    0
  • Wes Drury

    @Andrew - If you look down where I replied to @Bastian you will need to add the word Video to your article Title.  When it sees an article title with that word then it will apply the icon.  You could do some very similar with Downloads or whatever you would like.  I hope that was the post you were looking at so you can see where I added CSS for the video and then called it via JS - 

    $('ul.article-list a:contains("Video:")').addClass('video');

    FontAwesome is what I'm using and they have hundreds of icons to choose from.

    0
  • Andrew Checkley

    @wes 

     

    Thanks took some figuring out but have managed to get this working thank you.

    I would like to edit further though if possible and have been playing all afternoon but have been unable to workout.

     

    1. after the icon I would to add a space. I have been trying to do this within the code but not able to figure it out. I can add the space within the article title however this means they are no longer sorted alphabetically anymore.

     

    1. the word Video: is what forces the script to add the icon. but can i then hide the word video: from the article title?

     

    Thanks

     

    Andrew

     

    0
  • Andrew Checkley

    Ok I have managed to get the space in.

    content: "\f16a" "\0020";

    Was simple really lol!

    The only method I can find to remove the keyword from the article subject is to have the article subject as the key word. This works perfectly fine however I'm sure their must be a better way that I can use the word Video: and then have it hidden as the method I have used means I have to have multiple entries for just the video icon to achieve this. It's also harder for others to manage as each time a new article is added I have to come in and the code for that article.

    0
  • Wes Drury

    @Andrew - I'm pretty sure there is a way to search for the word video and then hide it.  I'll see if I can find some time to test this weekend or next week.  I'm not sure what you mean as its harder for others to manage as all they would need to do is add the the word Video, Download or whatever in the Title.  You shouldn't have to add any JQuery code as you should have all of that now.  For now it should be just a simple adding the word to the title.

    0
  • Andrew Checkley

    Sorry Wes as it stands at the moment I have set it up so the keyword is the article title. for example.

    Article Title: "How to do whatever guide"

    The javascript that was set to Video: has I have changed to "How to do whatever guide" this way it reads the same rather than.

    "How to do whatever guide Video:"

    So for each article that has video i would then have to add another javascript entry and css for that article title.

    so adding new articles with video requires further scripts. If I could use the word Video: or Download: but those words were hidden on article list and article page that would be ideal as it would only require one script entry for Video and one for css plus the same for download.

    Image above as an example.

    And then your script

    $('ul.article-list a:contains("Setting up Ledger Security")').addClass('video');

    The alternative would mean that the above image the title would be

    icon1 icon 2 Setting up Ledger Security Video: Download: 

    and the same title would appear on the article page but without icons

    I really hope that makes sense lol ?

    Thanks

    Andrew

    0
  • Wes Drury

    @Andrew - Yes that makes sense but what I would do for now is in the title say

    Video: Setting up Ledger Security

    Then you would not need extra code and you would only have to adjust the titles.  This makes it easier on you and your staff.  Its your Help Center so set it up however you want it.  Hopefully I'm make progress on the hidden part of it.  Have a good weekend.

    0
  • Andrew Checkley

    Wes thanks appreciate it :)

    0
  • Andrew Checkley

    Wes, did you have joy with this? if not no problem I can remove this for now as looking to go live with our HC within the next 2 weeks.

     

    Thanks

    Andrew

    0
  • Wes Drury

    @Andrew - I played around with it just for a few minutes but don't have anything as of yet.  I'll let you know when I come up with something.

    0
  • Wes Drury

    @Andrew - Didn't want you going live without a solution in place so you can find the code below and just edit it however you need it.

    https://gist.github.com/moderatorwes/9f20dabd77e4257887a9

    Let me know how it goes and post a link to your Help Center so I can check it out once it goes live.

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    We. love. Wes.

    0
  • Andrew Checkley

    Wes excellent thanks that works a treat :)

    I tried adding to the script with the following I think I'm in the right direction but guessing I'm missing something?

     

    //Find the word video and add hidden class

    $('ul.article-list').html(function (i, t) {

    return t.replace('Video:', '<span class="hidden">Video:</span>');

     

    $('ul..article-header').html(function (i, t) {

    return t.replace('Video:', '<span class="hidden">Video:</span>');

     

    });

    // Adding video icon

    $('ul.article-list a:contains("Video:")').addClass('video');

     

    I was hoping to remove the word Video: from the actual article also but this makes no difference other than removing the icon from the article list lol. Sorry I have tried to duplicate/understand the code but obviously missing somthing

    0
  • Wes Drury

    @Andrew - The code that I gave you was fully tested in two different themes and worked perfectly for me.  Please remove any previous CSS\JS code that you had and copy and paste the code in my Gist.  Yes it does remove the word Video:.  Make sure Video: is at the beginning of your title.  Also the code above with the article header you have two periods.  See the screenshots below.

    Without Code

    WITH CODE:

    0
  • Andrew Checkley

    Wes, sorry I don't think i was clear in what i was saying sorry. it hides the word video no problem (well sort off i have since discovered another issue but will come to that)

    Video: is hidden on article list but I also want to hide on article view.


     As above Video: is displayed but this in article view rather than list hence the adapting of the code you supplied.

    I added the following in the hope it would include article view also.

    $('ul..article-header').html(function (i, t) {

    return t.replace('Video:', '<span class="hidden">Video:</span>');

     

    The below also shows the Advanced bank import in article list with the icon but word removed as intended thank you.

    The other issue mentioned above i discovered this morning is that it only hides the first instance of Video: in the list view anything after is not included?

     

    I really hope that makes sense to you. and again thanks again.

    Andrew

     

    0
  • Wes Drury

    @Andrew - Yes screenshots always help.  Here is what you need for the header:

    $('header.article-header').html(function (i, t) {
    return t.replace('Video:', '<span class="hidden">Video:</span>');
    });

    I'll take a look at the first instance issue here after lunch.

    0
  • Andrew Checkley

    was close! thanks that's removed from the article thanks.

    0
  • Wes Drury

    @Andrew - OK new and improved version posted on my Gist.  I shortened the code where you only need two statements instead of three so remove the JS that you have and copy the code from the gist.  I changed the icon on mine but you can use any FontAwesome icon that you want.  Let me know if this works for you and if so then I will make it a tip for anyone to use.

    0
  • Andrew Checkley

    Wes,

    that is excellent thank you all working brilliant! :)

    I have added the following just in case anyone else is wanting the same.

    I adjusted to use two sets off css one for article list and one for article header

     

    //Find Video: replace with video icon in Article List
    $('ul.article-list li').html(function (i, t) {
    return t.replace('Video:', '<span class="video"></span>');
    });

    //Find Video: replace with video icon in Article Title
    $('header.article-header').html(function (i, t) {
    return t.replace('Video:', '<span class="video2"></span>');
    });

     

    CSS 

    /*Custom CSS for Video Icons using Font Awesome */
    .video2:before{
    content: "\f1c8" "\0020" ;
    color: #585858;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 30px;

    }

     

    /*Custom CSS for Video Icons using Font Awesome */
    .video:before{
    content: "\f1c8" "\0020" ;
    color: #585858;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 16px;
    }

     

    This allows for the article header to have an icon in line with the font size.

    I'm sure their is an easier way or tidier way but this works for me no problem.

     

    Thanks again Wil :)

    0
  • Wes Drury

    @Wil - Glad to hear you got it all sorted out and I will be sure to update my Gist for the Title Header icon.  Goodluck on your Help Center launch and make sure to post a link once you go live.

    0
  • Jean de Dieu Ndayisaba

    Hello, 

    Im not sure if this issue is still open. But I would very much like some help. I have exactly as you have described by cannot get it to work? could it be that something has changed since?

    Best,

    Jean

    0

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk