We're happy to help you!

Submit a request
    Getting Started

    Getting started

    If you are new to Diziana here's some quick steps for how to get started.

    Knowledge Base

    Knowledge Base

    Find what you need in our Knowledge base.

    Community

    Community

    Be a part of Diziana Community to get advice from our customer service pros and try various tips and tricks.

    Making coding changes to a Theme

    If you're a web designer or a web-savvy administrator, you can work with the page code used to build the Help Center. The code is contained in editable templates that define the layout of each page type, as well as the global header and footer of the Help Center. Special templates let you add JavaScript or customize the site's CSS.

    • Customizing the HTML
    • Customizing the CSS or JavaScript
    • Using variables in the CSS
    • Allowing unsafe HTML in pages
    • Uploading and using your own assets

    Customizing the HTML

    The HTML for the Help Center is contained in editable templates that define the layout of each page type, as well as the global header and footer. You can customize the template of any of the following page type or element:

    • the Help Center home page
    • category landing pages in the knowledge base
    • section landing pages in the knowledge base
    • article pages in the knowledge base
    • the search results page
    • the error page
    • the header and footer
    • the document's head tag
    • the request list pages
    • the community pages
    • the submit a request page

    To edit the HTML

    1. Click Customize design in the tools panel on the lower-right side of the page.
The Help Center switches to Preview mode with the currently applied theme at the top of the sidebar.
    2. Click Edit Theme.Zendesk make a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.
    3. Select a template to modify from the HTML menu in the Theme editor.
    4. Use the code view to edit the template. You can add, remove, or reorder any the following:
      • Template components that represent elements that you can add to your pages. For example, the breadcrumbs component displays a breadcrumb navigation element on a page.
      • Dynamic content placeholders.
      • Embeddable widgets created by third parties (such as the Twitter search widget)
      • HTML markup
    5. Click Preview to preview the effect of your changes on the page.
    6.  To save your changes, click Save at the top of the sidebar.The changes are not deployed to Help Center until you click Publish changes at the top of the sidebar. If you want to keep working on the theme later, click Close at the top of the sidebar. Your changes are saved.
    7. When you're ready to deploy your changes, click Publish changes at the top of the sidebar.The changes are applied to every page that's based on the template or templates you modified.

    Customizing the CSS or JavaScript

    You can add JavaScript code or customize the site's CSS.

    To customize the CSS or JavaScript

    1. Click Customize design in the tools panel on the lower-right side of the page.
    2. Click Edit Theme.Zendesk make a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.
    3. Click the CSS or the JS tab in the Theme editor.
    4. Add or modify the CSS or JavaScript in the code view.
    5. Click Preview to preview the effect of your changes.
    6. To save your changes, click Save at the top of the sidebar.The changes are not deployed to the Help Center until you click Publish changes at the top of the sidebar. If you want to keep working on the theme later, click Close at the top of the sidebar. Your changes are saved.
    7. When you're ready to deploy your changes, click Publish changes at the top of the sidebar.

    Allowing unsafe HTML in pages

    By default, the Help Center quarantines unsafe HTML tags and attributes in pages to reduce the risk of somebody introducing malicious code. See the list of safe tags and attributes below.

    Note: Even if the Help Center doesn't strip safe tags from the HTML used for the site design, the Help Center uses a third party HTML article editor called TinyMCE that may strip some safe tags from the HTML of articles. For example, the editor removes <i> tags with no content, such as those used to display Font Awesome icons.

    Example: <i class="fa fa-eyedropper"></i>.

    The unsafe HTML is not stripped from your pages on the server. Rather, it's not included in the HTTP responses sent to browsers. As a result, pages might not render as intended in browsers. You can override the default setting to allow all the HTML to be sent to a browser.

    Warning: Making this change will allow potentially malicious code to be executed when users open a page in a browser.

    To allow unsafe HTML in HTTP responses

    1. In the Help Center, click General Settings in the tools panel on the lower-right side of the page.
    2. On the General Settings page, select the Display Unsafe Content option.
    3. Click Update.

    Safe tags

    strong, em, b, i, p, code, pre, tt, samp, kbd, var, sub, sup, dfn, cite,
    big, small, address, hr, br, id, div, span, h1, h2, h3, h4, h5, h6,
    ul, ol, li, dl, dt, dd, abbr, acronym, a, img, blockquote,
    del, ins, u, table, thead, tbody, tfoot, tr, th, td, colgroup
    

    Safe attributes

    href, src, width, height, alt, cite, datetime, title, class, name,
    xml:lang, abbr, target, border
    Everything else is considered unsafe.

    Uploading and using your own assets

    You can upload assets such as images and files to the Help Center. The assets are stored in a web cache in a cloud delivery network (CDN). Web caches reduce bandwidth requirements and server load, and improve response times.

    Note: The cache is refreshed on a weekly basis. If you modify an asset and upload it again with the same name, the file might not be refreshed in the cache for up to a week. A workaround is to upload the modified asset with a different name and update any links to it.

    To upload assets to the Help Center

    1. Click Customize design in the tools panel on the lower-right side of the page.
    2. Click Edit Theme.
    3. Click the Assets tab in the Theme editor and do any of the following:
    4. To upload an asset, click the Add file link. The file size limit is 50 MB.
    5. To use an uploaded asset in your HTML, CSS, or JavaScript, copy the asset path and paste it in your template code.
    6. To remove an asset from the list, hover the mouse over the asset and click the delete button that appears on the right.

    Woking with the code

    Header and footer

    The header displays a logo and other components depending on the theme and user roles. You can use the footer to display related links, information about your company, or legal notices.

    Change the background color of the header or footer

    Change or add the background-color property in the following selectors.

    .header {
      background-color: #666;
    }
    
    .footer {
      background-color: #333;
    }
    

    Change the height of the header or footer

    Change or add the height property in the following selectors.

    Header
    .header {
       height: 70px;
    }
    
    Footer
    .footer {
       height: 20px;
    }
    

    Change the space above or below the header or footer

    Change or add margin-bottom and margin-top properties in the following selectors.

    Header
    .header {
       margin-bottom: 20px;
    }
    
    Footer
    .footer {
       margin-top: 10px;
    }
    

    Change the appearance of the selected language Add the following selector and property:

    .language-selector .dropdown-toggle {
      color: green;
    }
    

    Change the appearance of the Submit a Request link Add or modify text properties in the following selector:

    .submit-a-request {
      font-size: 14px;
      color: green;
    }
    

    Change the appearance of the Sign In link Add or modify text properties in the following selector:

    .login {
      font-size: 14px;
      color: green;
    }
    

    Search

    The search box looks for content in both the knowledge base and community and displays links on a results page. If you want, you can remove the search box.

    Change the width or height of the search field

    Change the width or height values in the following selectors.

    Large search box:
    .search input[type=search] {
      height: 50px;
      width: 90%;
    }
    
    Small search box:
    .search-small input[type=search] {
      height: 50px;
      width: 320px;
    }
    

    Change the background color of the search field

    Change the background property in the following selectors.

    Large search box:
    .search input[type=search] {
      background: #999;
    }
    
    Small search box:
    .search input[type=search] {
      background: #999;
    }
    

    Change the appearance of the search text

    Change or add text properties in the following selectors.

    Large search box:
    .search {
      font-size: 12px;
      font-family: Tahoma, Arial, sans-serif;
    }
    
    Small search box:
    .search-small {
      font-size: 12px;
      font-family: Tahoma, Arial, sans-serif;
    }
    

    Change the appearance of the results page heading The heading on the search results page consists of the number of results returned for the search term. Example: 9 results for "serial number".

    Add the following selector if it's not already in the stylesheet, and change or add text properties:

    .search-results-heading {
      font-size: 36px;
      font-family: Tahoma, Arial, sans-serif;
    }
    

    Change the appearance of the Knowledge base and Community headings Add or modify text properties in the following selector:

    .search-results-subheading {
      font-size: 24px;
      font-family: Tahoma, Arial, sans-serif;
    }
    

    Change the spacing between the results Add a margin-bottom property in the following selector:

    .search-result {
      margin-bottom: 20px;
    }
    

    Change the appearance of the result text Change or add text properties in the following selector:

    .search-result {
      font-size: 105%;
      font-family: Arial, Helvetica, sans-serif;
    }
    

    Change the color of the result links Add or modify the color property in the following selector:

    .search-result a {
      color: #484;
    }
    

    Breadcrumbs

    Breadcrumbs help users navigate content in the Help Center. If you want, you can remove the breadcrumbs. For more information, see the Help Center template component 

    Change the space above and below the breadcrumbs

    Add or change the padding properties in the following selector:

    .breadcrumbs {
      padding-top; 20px;
      padding-bottom: 16px;
    }
    

    Change the appearance of the breadcrumb text Change or add text properties in the following selector:

    .breadcrumbs li {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
    

    Change the color of the breadcrumb links Add the following selector and property:

    .breadcrumbs li a {
      color: #484;
    }
    

    Change the pointer character (>) in the breadcrumbs Change the color and content properties in the following selector:

    .breadcrumbs li + li:before {
      color: #158EC2;
      content: ">>";
    }
    

    Article lists

    Depending on the theme, article lists are used on the home page, category landing pages, and section landing pages.

     

    Change the space around the list of articles


    Add or modify the following selector and padding properties:

    .article-list {
      padding-left: 16px;
      padding-right; 20px;
    }
    

    Change the spacing between the articles
    Change the margin-bottom property in the following selector:

    .article-list > li {
      margin-bottom: 10px;
    }
    

    Change the appearance of the article links
    Change or add text properties in the following selector:

    .article-list > li {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
    

    Change the color of the article links
    Add the following selector and property:

    .article-list li a {
      color: #FFF;
    }
    

    Knowledge base articles

    You can change the look and feel of the articles in your knowledge base.

    Change the appearance of article titles


    Add or modify the following selector and properties:

    .article-header h1 {
      color: #993;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 20px;
    }
    

    Change the appearance of article text
    Add or modify the following selector and properties:

    .article-body {
      color: #666;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
    }
    

    Change the color of article links
    Add or modify the following selector and property:

    .article-body a {
      color: #930;
    }
    

    Change the appearance of the author's name
    Add or modify the following selector and properties:

    .article-author a {
      color: #669;
      font-family: Georgia, Times New Roman, serif;
      font-size: 16px;
    }
    

    Change the appearance of the last updated string
    Add or modify the following selector and properties:

    .article-updated {
      color: #CCC;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 13px;
    }
    

    Change the appearance of "Was this article helpful?"
    Add or modify the following selector and properties:

    .article-vote-question {
      color: #763;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
    }
    

    Change the appearance of the vote counter
    Example: "6 out of 8 found this helpful". Add or modify the following selector and properties:

    .article-vote-count {
      font-family: Georgia, Times New Roman, serif;
      font-size: 10px;
    }
    

    Change the appearance of "Have more questions? Submit a request"
    Add or modify the following selector and properties:

    .article-more-questions {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 105%;
    }
    

    Change the appearance of the Comments title
    Add or modify the following selector and properties:

    .article-comments h2 {
      color: #666;
      font-family: Georgia, Times New Roman, serif;
      font-size: 130%;
    }
    

    Change the appearance of comment text
    Add or modify the following selector and properties:

    .comment-body  {
      color: #666;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
    }
    

    Community questions and answers

    You can change the look and feel of the content in your community.

    Change the appearance of question titles

    Add or modify the following selector and properties:

    .question-title {
      color: #484;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 120%;
    }
    

    Change the appearance of question text
    Add or modify the following selector and properties:

    .question-text {
      color: #666;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 14px;
    }
    

    Change the color of question links
    Add or modify the following selector and property:

    .question-text a {
      color: #484;
    }
    

    Change the appearance of the question author's name
    Add or modify the following selector and properties:

    .question-author {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }

    To change the link color, add or modify the following selector and property:

    .question-author a {
      color: #484;
    }
    

    Because the question author's name, the time since the question was published, and the share link are usually grouped together on a page, it makes good design sense to make all three elements look the same. To do so, use the following combined selector:

    .question-author, .question-published, .question-share {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Change the appearance of the time since question published
    Add or modify the following selector and properties:

    .question-published {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Change the appearance of the share question link
    Add or modify the following selector and properties:

    .question-share {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Change the appearance of the answers heading
    Add or modify the following selector and properties:

    .answer-list-heading {
      color: #4CC;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 105%;
    }
    

    Change the appearance of answer text
    Add or modify the following selector and properties:

    .answer-text {
      color: #333;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 105%;
    }
    

    Change the appearance of the answer author's name
    Add or modify the following selector and properties:

    .answer-author {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    To change the link color, add or modify the following selector and property:

    .answer-author a {
      color: #484;
    }
    

    Because the answer author's name, the time since the answer was published, and the share link are usually grouped together on a page, it makes good design sense to make all three elements look the same. To do so, use the following combined selector:

    .answer-author, .answer-published, .answer-share {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Change the appearance of the time since answer published
    Add or modify the following selector and properties:

    .answer-published {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Change the appearance of the share answer link
    Add or modify the following selector and properties:

    .answer-share {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Embedding videos on page

    Note: Before you can embed videos in your articles, you must enable unsafe HTML in pages

     

    To play your video on a web page, do the following:

    1. Upload the video to YouTube/Video or any other media platform
    2. Take a note of the video id
    3. Define an iframe 
    4. Let the src attribute point to the video URL
    5. Use the width and hight attributes to specify the dimension of the player
    6. Add any other parameters to the URL
    Example - Using iFrame (the recommended method)
    <iframe width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1"> </iframe>

    7.) Paste this iframe in your article source view
    8.) Update and That's it!

    Have more questions? Submit a request
    Avatar
    Tarun Sahu

    If you're a web designer or a web-savvy administrator, you can work with the page code used to build the Help Center. The code is contained in editable templates that define the layout of each page type, as well as the global header and footer of the Help Center. Special templates let you add JavaScript or customize the site's CSS.

    • Customizing the HTML
    • Customizing the CSS or JavaScript
    • Using variables in the CSS
    • Allowing unsafe HTML in pages
    • Uploading and using your own assets

    Customizing the HTML

    The HTML for the Help Center is contained in editable templates that define the layout of each page type, as well as the global header and footer. You can customize the template of any of the following page type or element:

    • the Help Center home page
    • category landing pages in the knowledge base
    • section landing pages in the knowledge base
    • article pages in the knowledge base
    • the search results page
    • the error page
    • the header and footer
    • the document's head tag
    • the request list pages
    • the community pages
    • the submit a request page

    To edit the HTML

    1. Click Customize design in the tools panel on the lower-right side of the page.
The Help Center switches to Preview mode with the currently applied theme at the top of the sidebar.
    2. Click Edit Theme.Zendesk make a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.
    3. Select a template to modify from the HTML menu in the Theme editor.
    4. Use the code view to edit the template. You can add, remove, or reorder any the following:
      • Template components that represent elements that you can add to your pages. For example, the breadcrumbs component displays a breadcrumb navigation element on a page.
      • Dynamic content placeholders.
      • Embeddable widgets created by third parties (such as the Twitter search widget)
      • HTML markup
    5. Click Preview to preview the effect of your changes on the page.
    6.  To save your changes, click Save at the top of the sidebar.The changes are not deployed to Help Center until you click Publish changes at the top of the sidebar. If you want to keep working on the theme later, click Close at the top of the sidebar. Your changes are saved.
    7. When you're ready to deploy your changes, click Publish changes at the top of the sidebar.The changes are applied to every page that's based on the template or templates you modified.

    Customizing the CSS or JavaScript

    You can add JavaScript code or customize the site's CSS.

    To customize the CSS or JavaScript

    1. Click Customize design in the tools panel on the lower-right side of the page.
    2. Click Edit Theme.Zendesk make a copy of the existing theme. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time.
    3. Click the CSS or the JS tab in the Theme editor.
    4. Add or modify the CSS or JavaScript in the code view.
    5. Click Preview to preview the effect of your changes.
    6. To save your changes, click Save at the top of the sidebar.The changes are not deployed to the Help Center until you click Publish changes at the top of the sidebar. If you want to keep working on the theme later, click Close at the top of the sidebar. Your changes are saved.
    7. When you're ready to deploy your changes, click Publish changes at the top of the sidebar.

    Allowing unsafe HTML in pages

    By default, the Help Center quarantines unsafe HTML tags and attributes in pages to reduce the risk of somebody introducing malicious code. See the list of safe tags and attributes below.

    Note: Even if the Help Center doesn't strip safe tags from the HTML used for the site design, the Help Center uses a third party HTML article editor called TinyMCE that may strip some safe tags from the HTML of articles. For example, the editor removes <i> tags with no content, such as those used to display Font Awesome icons.

    Example: <i class="fa fa-eyedropper"></i>.

    The unsafe HTML is not stripped from your pages on the server. Rather, it's not included in the HTTP responses sent to browsers. As a result, pages might not render as intended in browsers. You can override the default setting to allow all the HTML to be sent to a browser.

    Warning: Making this change will allow potentially malicious code to be executed when users open a page in a browser.

    To allow unsafe HTML in HTTP responses

    1. In the Help Center, click General Settings in the tools panel on the lower-right side of the page.
    2. On the General Settings page, select the Display Unsafe Content option.
    3. Click Update.

    Safe tags

    strong, em, b, i, p, code, pre, tt, samp, kbd, var, sub, sup, dfn, cite,
    big, small, address, hr, br, id, div, span, h1, h2, h3, h4, h5, h6,
    ul, ol, li, dl, dt, dd, abbr, acronym, a, img, blockquote,
    del, ins, u, table, thead, tbody, tfoot, tr, th, td, colgroup
    

    Safe attributes

    href, src, width, height, alt, cite, datetime, title, class, name,
    xml:lang, abbr, target, border
    Everything else is considered unsafe.

    Uploading and using your own assets

    You can upload assets such as images and files to the Help Center. The assets are stored in a web cache in a cloud delivery network (CDN). Web caches reduce bandwidth requirements and server load, and improve response times.

    Note: The cache is refreshed on a weekly basis. If you modify an asset and upload it again with the same name, the file might not be refreshed in the cache for up to a week. A workaround is to upload the modified asset with a different name and update any links to it.

    To upload assets to the Help Center

    1. Click Customize design in the tools panel on the lower-right side of the page.
    2. Click Edit Theme.
    3. Click the Assets tab in the Theme editor and do any of the following:
    4. To upload an asset, click the Add file link. The file size limit is 50 MB.
    5. To use an uploaded asset in your HTML, CSS, or JavaScript, copy the asset path and paste it in your template code.
    6. To remove an asset from the list, hover the mouse over the asset and click the delete button that appears on the right.

    Woking with the code

    Header and footer

    The header displays a logo and other components depending on the theme and user roles. You can use the footer to display related links, information about your company, or legal notices.

    Change the background color of the header or footer

    Change or add the background-color property in the following selectors.

    .header {
      background-color: #666;
    }
    
    .footer {
      background-color: #333;
    }
    

    Change the height of the header or footer

    Change or add the height property in the following selectors.

    Header
    .header {
       height: 70px;
    }
    
    Footer
    .footer {
       height: 20px;
    }
    

    Change the space above or below the header or footer

    Change or add margin-bottom and margin-top properties in the following selectors.

    Header
    .header {
       margin-bottom: 20px;
    }
    
    Footer
    .footer {
       margin-top: 10px;
    }
    

    Change the appearance of the selected language Add the following selector and property:

    .language-selector .dropdown-toggle {
      color: green;
    }
    

    Change the appearance of the Submit a Request link Add or modify text properties in the following selector:

    .submit-a-request {
      font-size: 14px;
      color: green;
    }
    

    Change the appearance of the Sign In link Add or modify text properties in the following selector:

    .login {
      font-size: 14px;
      color: green;
    }
    

    Search

    The search box looks for content in both the knowledge base and community and displays links on a results page. If you want, you can remove the search box.

    Change the width or height of the search field

    Change the width or height values in the following selectors.

    Large search box:
    .search input[type=search] {
      height: 50px;
      width: 90%;
    }
    
    Small search box:
    .search-small input[type=search] {
      height: 50px;
      width: 320px;
    }
    

    Change the background color of the search field

    Change the background property in the following selectors.

    Large search box:
    .search input[type=search] {
      background: #999;
    }
    
    Small search box:
    .search input[type=search] {
      background: #999;
    }
    

    Change the appearance of the search text

    Change or add text properties in the following selectors.

    Large search box:
    .search {
      font-size: 12px;
      font-family: Tahoma, Arial, sans-serif;
    }
    
    Small search box:
    .search-small {
      font-size: 12px;
      font-family: Tahoma, Arial, sans-serif;
    }
    

    Change the appearance of the results page heading The heading on the search results page consists of the number of results returned for the search term. Example: 9 results for "serial number".

    Add the following selector if it's not already in the stylesheet, and change or add text properties:

    .search-results-heading {
      font-size: 36px;
      font-family: Tahoma, Arial, sans-serif;
    }
    

    Change the appearance of the Knowledge base and Community headings Add or modify text properties in the following selector:

    .search-results-subheading {
      font-size: 24px;
      font-family: Tahoma, Arial, sans-serif;
    }
    

    Change the spacing between the results Add a margin-bottom property in the following selector:

    .search-result {
      margin-bottom: 20px;
    }
    

    Change the appearance of the result text Change or add text properties in the following selector:

    .search-result {
      font-size: 105%;
      font-family: Arial, Helvetica, sans-serif;
    }
    

    Change the color of the result links Add or modify the color property in the following selector:

    .search-result a {
      color: #484;
    }
    

    Breadcrumbs

    Breadcrumbs help users navigate content in the Help Center. If you want, you can remove the breadcrumbs. For more information, see the Help Center template component 

    Change the space above and below the breadcrumbs

    Add or change the padding properties in the following selector:

    .breadcrumbs {
      padding-top; 20px;
      padding-bottom: 16px;
    }
    

    Change the appearance of the breadcrumb text Change or add text properties in the following selector:

    .breadcrumbs li {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
    

    Change the color of the breadcrumb links Add the following selector and property:

    .breadcrumbs li a {
      color: #484;
    }
    

    Change the pointer character (>) in the breadcrumbs Change the color and content properties in the following selector:

    .breadcrumbs li + li:before {
      color: #158EC2;
      content: ">>";
    }
    

    Article lists

    Depending on the theme, article lists are used on the home page, category landing pages, and section landing pages.

     

    Change the space around the list of articles


    Add or modify the following selector and padding properties:

    .article-list {
      padding-left: 16px;
      padding-right; 20px;
    }
    

    Change the spacing between the articles
    Change the margin-bottom property in the following selector:

    .article-list > li {
      margin-bottom: 10px;
    }
    

    Change the appearance of the article links
    Change or add text properties in the following selector:

    .article-list > li {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
    

    Change the color of the article links
    Add the following selector and property:

    .article-list li a {
      color: #FFF;
    }
    

    Knowledge base articles

    You can change the look and feel of the articles in your knowledge base.

    Change the appearance of article titles


    Add or modify the following selector and properties:

    .article-header h1 {
      color: #993;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 20px;
    }
    

    Change the appearance of article text
    Add or modify the following selector and properties:

    .article-body {
      color: #666;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
    }
    

    Change the color of article links
    Add or modify the following selector and property:

    .article-body a {
      color: #930;
    }
    

    Change the appearance of the author's name
    Add or modify the following selector and properties:

    .article-author a {
      color: #669;
      font-family: Georgia, Times New Roman, serif;
      font-size: 16px;
    }
    

    Change the appearance of the last updated string
    Add or modify the following selector and properties:

    .article-updated {
      color: #CCC;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 13px;
    }
    

    Change the appearance of "Was this article helpful?"
    Add or modify the following selector and properties:

    .article-vote-question {
      color: #763;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
    }
    

    Change the appearance of the vote counter
    Example: "6 out of 8 found this helpful". Add or modify the following selector and properties:

    .article-vote-count {
      font-family: Georgia, Times New Roman, serif;
      font-size: 10px;
    }
    

    Change the appearance of "Have more questions? Submit a request"
    Add or modify the following selector and properties:

    .article-more-questions {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 105%;
    }
    

    Change the appearance of the Comments title
    Add or modify the following selector and properties:

    .article-comments h2 {
      color: #666;
      font-family: Georgia, Times New Roman, serif;
      font-size: 130%;
    }
    

    Change the appearance of comment text
    Add or modify the following selector and properties:

    .comment-body  {
      color: #666;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
    }
    

    Community questions and answers

    You can change the look and feel of the content in your community.

    Change the appearance of question titles

    Add or modify the following selector and properties:

    .question-title {
      color: #484;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 120%;
    }
    

    Change the appearance of question text
    Add or modify the following selector and properties:

    .question-text {
      color: #666;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 14px;
    }
    

    Change the color of question links
    Add or modify the following selector and property:

    .question-text a {
      color: #484;
    }
    

    Change the appearance of the question author's name
    Add or modify the following selector and properties:

    .question-author {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }

    To change the link color, add or modify the following selector and property:

    .question-author a {
      color: #484;
    }
    

    Because the question author's name, the time since the question was published, and the share link are usually grouped together on a page, it makes good design sense to make all three elements look the same. To do so, use the following combined selector:

    .question-author, .question-published, .question-share {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Change the appearance of the time since question published
    Add or modify the following selector and properties:

    .question-published {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Change the appearance of the share question link
    Add or modify the following selector and properties:

    .question-share {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Change the appearance of the answers heading
    Add or modify the following selector and properties:

    .answer-list-heading {
      color: #4CC;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 105%;
    }
    

    Change the appearance of answer text
    Add or modify the following selector and properties:

    .answer-text {
      color: #333;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 105%;
    }
    

    Change the appearance of the answer author's name
    Add or modify the following selector and properties:

    .answer-author {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    To change the link color, add or modify the following selector and property:

    .answer-author a {
      color: #484;
    }
    

    Because the answer author's name, the time since the answer was published, and the share link are usually grouped together on a page, it makes good design sense to make all three elements look the same. To do so, use the following combined selector:

    .answer-author, .answer-published, .answer-share {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Change the appearance of the time since answer published
    Add or modify the following selector and properties:

    .answer-published {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Change the appearance of the share answer link
    Add or modify the following selector and properties:

    .answer-share {
      font-family: Georgia, Times New Roman, serif;
      font-size: 12px;
    }
    

    Embedding videos on page

    Note: Before you can embed videos in your articles, you must enable unsafe HTML in pages

     

    To play your video on a web page, do the following:

    1. Upload the video to YouTube/Video or any other media platform
    2. Take a note of the video id
    3. Define an iframe 
    4. Let the src attribute point to the video URL
    5. Use the width and hight attributes to specify the dimension of the player
    6. Add any other parameters to the URL
    Example - Using iFrame (the recommended method)
    <iframe width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1"> </iframe>

    7.) Paste this iframe in your article source view
    8.) Update and That's it!

    0
    Comments
    Diziana Support

    Knowledge base

    Have more questions? Submit a request
    Making coding changes to a Theme
    Was this article helpful?
    0 out of 0 found this helpful