Help Center (Zendesk) Theme - ucsf-ckm/ucsf-library-ux-and-web-documentation GitHub Wiki
Background: We are using the Flatrock theme from Lotus Themes to provide easier editing and much improved user interface.
- Scott bought Lotus theme for Zendesk Help Center. It includes settings for basic branding landing page layout along with formatting options like tabs and accordions.
Sent: Thursday, March 21, 2019 2:32 PM To: Drapeau, Scott Subject: Order #LT3221 confirmed
- saved a copy after applying brand colors and type Flatrock (no code changes)
- Live copy is Flatrock working copy
- There is a certain amount of control via settings, but otherwise, we've used Guide admin > Customize design > Customize > Edit code
Flatrock settings allow us to add a title, icon, and URL to as many "custom blocks" as we want. However, icon choices are not supplied, so we're using:
- Network Access and Troubleshooting wifi symbol in free set os Streamline (same set used by Lotus)
- Makers Lab light bulb requires credit
- Research help article with magnifier is free to use
- Anna implemented based on established architecture
- all articles will need to be edited and the categories and sections fleshed out
Avoid pasting from anything other than a plain text editor, otherwise a bunch of code junk is transferred over. This can cause conflicts or other problems.
Videos must be hosted on Vimeo, YouTube, Wistia, JWPlayer, or Brightcove. More...
We can set up a lot of things just using the theme settings, but beyond that involves making some code/template edits.
Change date and thumbs up/down text from grey to black for increased contrast
Edit style.css
.meta {
font-size: 14px;
color: #000000;
}
.article-vote-count {
display: block;
font-size: calc(($font_size_base * 0.75) - 2);
color: #000000;
}
Make the submit button visible in the search form on every page. Edit the folowing pages:
- article_page.hbs
- category_page.hbs
- section_page.hbs
from support:
Usually, the following placeholder is used to display the search bar:
{{search instant=true submit=false}}
If you change the submit parameter to "true", the submit button should appear:
{{search instant=true submit=true}}
Then edit the CSS to make everything fit without wrapping
.search-box--small {
margin-bottom: calc($font_size_base * $line_height_base * 2);
}
.search-box--small input[type=submit] {
position: absolute;
top: 10%;
left: 80%;
}
Edit theme file home_page.hbsAdd background to set them apart. Added this code above other related in the CSS file.
.promoted-articles {
background-color: #F4F4F4;
margin: 0 0 3% 0;
padding: 2% 3% 1% 3%;
}
Also change the wording, since "articles" has a specific meaning here.
<h2 class="promoted-articles__title">{{t 'promoted_articles'}}</h2>
changed to
<h2 class="promoted-articles__title">Popular Topics</h2>
We manually determine what displays on the landing page by checking "promote" on individual articles.
- Flatrock displays Articles in this Section but we also want to show the native Zendesk Related Articles
NOTE, we reversed this decision die to accessibility errors, and removed
{{related_articles}}again. Related CSS was left in place in case we change it again.
- Support: turn them on by adding placeholder
{{related_articles}}in article_page.hbs just inside the closing tag for<section class="section-articles">
- Styles are not the same, so a few fixes are needed
Make Related heading the same as Section heading by adding a line for font-size to CSS file
margin-bottom: calc($font_size_base * $line_height_base / 2);
font-size: calc($font_size_base * 1.25);
}
Add some space after Articles in this Section by adding the margin line to CSS file
.section-articles__list {
padding-left: 0;
list-style: none;
margin-bottom: calc($font_size_base * $line_height_base * 2);
}
To make link styling consistent for the two sections. Comment out a section for Related to match how Section is done
/*.related-articles ul > li a {
color: $text_color;
border-bottom: 1px solid var(--hr-border);
padding-bottom: 1px;
}*/
Change wording from articles to topics for UCSF audience clarity
Edit
<h3 class="section-articles__title">{{t 'articles_in_section'}}</h3>
to
<h3 class="section-articles__title">Topics in this section</h3>
We cannot change Related Articles without a paid support request.
Also change the thumbs up/down at bottom of article:
edit
<span class="article-vote-question">{{t 'was_this_article_helpful'}}</span>
to
<span class="article-vote-question">Was this topic helpful?</span>
- Edit this code in header.hbs from
<div class="logo">
{{#link 'help_center'}}
<img src="{{logo_url}}" alt="{{t 'logo'}}">
{{/link}}
</div>
And change to
<!--{{#link 'help_center'}}-->
<a href="https://www.library.ucsf.edu/" title="Home">
<img src="{{logo_url}}" alt="{{t 'logo'}}">
{{/link}}
</div>
Display when an article was last updated instead of when it was originally created. Edit article_page.hbs
<div class="meta">{{date article.updated_at class='metadata' format='medium'}}
</div>
comment out in article_page.hbs
<!--
<div class="article-meta__col article-meta__col--button">
{{subscribe}}
-->
comment out in section_page.hbs
<div class="section-header__col section-header__col--button">
<!-- {{subscribe}} -->
</div>
Comment out to hide
<!--{{link 'new_request' class='btn btn--topbar submit-a-request'}}-->
Change text from white to black in CSS file for accessibility in any buttons that appear.
.btn--primary {
color: #000;
Remove this from article_page.hbs
<div class="article__share">{{share}}</div>
Remove text knowledge_base in file search_results.hbs to prevent subhead Knowledge base from appearing.
<h2 class="h3 search-results-subheading__title">{{t 'knowledge_base'}}</h2>
- To remove the Community completely, you can either remove the following code for the Community.
- In case of the search page, do this on search-results.hbs
{{#if help_center.community_enabled}}
<section class="column column--sm-6 search-results-column">
<div class="search-results-subheading">
<h2 class="h3 search-results-subheading__title">{{t 'community'}}</h2>
</div>
{{#if post_results}}
<ul class="list-unstyled search-results-list">
{{#each post_results}}
<li class="search-result">
<h3 class="h5 search-result__title"><a href="{{url}}" class="search-result-link">{{title}}</a></h3>
<ol class="breadcrumbs breadcrumbs--search-results">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<p class="search-result__description">
{{text}}
</p>
<div class="meta search-result__meta">
<span class="meta__item">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="meta__item">{{date created_at}}</span>
<span class="meta__item">
{{t 'comments_count' count=comment_count}}
</span>
</div>
</li>
{{/each}}
</ul>
{{else}}
<p>
{{t 'no_results' query=query}}
{{#link 'topics'}}
{{t 'browse_community'}}
{{/link}}
</p>
{{/if}}
</section>
{{/if}}
</div>
- Eliminate comments from article level by default. By removing this code from article_page.hbs
{{!-- Article Comments --}}
<section class="comments" id="comments" itemscope itemtype="http://schema.org/UserComments">
<div class="comments__header">
<h3>{{t 'comments'}}</h3>
<div class="comment-sorter">
<div class="comment-sorter__col comment-sorter__col--main">
{{t 'comments_count' count=article.comment_count}}
</div>
{{#if comments}}
<div class="comment-sorter__col comment-sorter__col--filters">
<div class="dropdown">
<a class="dropdown-toggle btn btn--default">{{t 'sort_by'}}</a>
<span class="dropdown-menu dropdown-menu-end" role="menu">
{{#each comment_sorters}}
<a aria-selected="{{selected}}" href="{{url}}" role="menuitem">{{name}}</a>
{{/each}}
</span>
</div>
</div>
{{/if}}
</div>
</div>
{{#if comments}}
<ul class="comments__list">
{{#each comments}}
<li class="comment" id="{{anchor}}">
<div class="comment__inner">
<div class="comment__content">
<div class="entry-info comment__header">
<div class="entry-info__avatar">
<div class="avatar {{#if author.agent}}avatar--agent{{/if}}">
<img class="user-avatar user-avatar--default" src="{{author.avatar_url}}" alt="Avatar">
</div>
</div>
<div class="entry-info__content">
<b class="author">
{{#link 'user_profile' id=author.id}}
{{author.name}}
{{/link}}
</b>
<div class="meta">
{{date created_at}}
{{#if editor}}
({{t 'edited'}} {{date edited_at timeago=true}})
{{/if}}
</div>
</div>
</div>
<div class="comment__body markdown">
{{body}}
</div>
{{#if pending}}
<span class="status-label status-label--pending">{{t 'pending_approval'}}</span>
{{/if}}
{{#with ticket}}
<a href="{{url}}" target="_zendesk_lotus" class="status-label status-label--with-ticket">
{{t 'request'}}{{id}}
</a>
{{/with}}
</div>
<div class="comment__voting-and-actions">
{{#unless official}}
<div class="vote vote--comment">
{{vote 'up' class='fa fa-angle-up btn vote-control vote-control--up' role='button'}}
<div class="vote-sum">
{{vote 'sum'}}
</div>
{{vote 'down' class='fa fa-angle-down btn vote-control vote-control--down' role='button'}}
</div>
{{/unless}}
<div class="comment__actions">
{{actions}}
</div>
</div>
</div>
</li>
{{/each}}
</ul>
{{pagination}}
{{/if}}
<p class="comments__callout">{{comment_callout}}</p>
{{#form 'comment' class='comment-form'}}
<div class="comment-form__avatar">
<div class="avatar avatar--comment">
{{user_avatar class='user-avatar user-avatar--default'}}
</div>
</div>
<div class="comment-form__body">
{{textarea 'body' rows='4'}}
</div>
<div class="comment-form__controls">
{{input type='submit'}}
</div>
{{/form}}
</section>
Turning on the widget in the Help Center (via main Zendesk settings) gives users a way to open a ticket from any page
- if we turn on widget, in CSS file adjust bottom margin for the scroll to top icon from 30 up to 110px to avoid overlap
.scroll-to-top.is-active {
bottom: 110px;
}
Also remove the Let Us Help You section from the bottom of home page. Competes with the widget. Delete that code from home_page.hbs. It's the last section.
<section class="footer-submit-ticket">
<h2 class="footer-submit-ticket__title">Can't find what you're looking
for?</h2>
<h3 class="footer-submit-ticket__subtitle">Let us help you!</h3>
<p class="footer-submit-ticket__btn">
{{link 'new_request' class='btn btn--primary'}}
</p>
</section>
Edit the above instead to comment out a few lines, and add an h3 link and icon.
<section class="footer-submit-ticket">
<h2 class="footer-submit-ticket__title">Can't find what you're looking
for?</h2>
<!--<h3 class="footer-submit-ticket__subtitle">Let us help you!</h3><!--
<p class="footer-submit-ticket__btn">
<!--{{link 'new_request' class='btn btn--primary'}}-->
<h3><span style="color: #0071AD;"><i class="far fa-envelope"></i></span> <a href="https://ucsflibrary.zendesk.com/hc/en-us/requests/new">Contact Us</a></h3>
</p>
</section>
Comment out what's there and replace:
<!--<div class="article-more-questions">{{request_callout}}</div>-->
<p>Have more questions? <a href="https://ucsflibrary.zendesk.com/hc/en-us/requests/new">Contact Us</a></p>
- Can we edit the form? Support email...
- Can change the title to Contact Us to match the wording in the floating Help widget
- Add the title and comment out the automatic one:
<h1>Contact Us</h1>
<!--<h1 class="new-request-title">{{t 'submit_a_request'}}</h1>-->
Replace
<p>© {{help_center.name}}</p>
in footer.hbs with
<p>© {{help_center.name}} --- <a href="https://www.lotusthemes.com" target="_blank">Contact Us</a></p>