Promoted articles
We accept all global debit, credit cards and PayPal payments:
- Debit and credit cards
- PayPal Personal and Premier
- PayPal Corporate
Payment is processed securely through our payment gateways: Stripe and Paypal.
- They don't share your financial information with SolafidThemes
- They send you a confirmation email when you make a payment
If you experience problems with the payment, please inform us.
Tabs
Takes the basic nav and adds the .tabs-nav class to generate a tabbed interface. Use them to create tabbable regions.
Display Unsafe Content
Display Unsafe Content needs to enabled for this format to show up. See this Zendesk article for detail.
Example Tab
<div class="tabs">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>
Tab with active tabs color
<div class="tabs colored-1">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>
Tab with active tabs color and background color
<div class="tabs colored-2">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>
Callout
Provide contextual feedback messages for typical user actions with the handful of available and flexible messages.
This is default callout
A simple callout—check it out!
<div class="callout">
<p class="callout-title">This is default callout</p>
<p>...</p>
</div>
This is dashed callout
A simple dashed callout—check it out!
<div class="callout callout-dashed">
<p class="callout-title">This is dashed callout</p>
<p>...</p>
</div>
This is transparent callout
A simple transparent callout—check it out!
<div class="callout callout-transparent">
<p class="callout-title">This is transparent callout</p>
<p>...</p>
</div>
This is info callout
A simple infocallout—check it out!
<div class="callout callout-info">
<p class="callout-title">This is info callout</p>
<p>...</p>
</div>
This is success callout
A simple success callout—check it out!
<div class="callout callout-success">
<p class="callout-title">This is success callout</p>
<p>...</p>
</div>
This is warning callout
A simple warning callout—check it out!
<div class="callout callout-warning">
<p class="callout-title">This is warning callout</p>
<p>...</p>
</div>
This is alert callout
A simple alert callout—check it out!
<div class="callout callout-alert">
<p class="callout-title">This is alert callout</p>
<p>...</p>
</div>
Accordion
Build vertically collapsing accordions in combination.
Display Unsafe Content
Display Unsafe Content needs to enabled for this format to show up. See this Zendesk article for detail.
Example Accordion
This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-panel, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-panel, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-panel, though the transition does limit overflow.
<div class="accordion">This is accordion 1</div>
<div class="accordion-panel">
<p>...</p>
</div>
<div class="accordion">This is accordion 2</div>
<div class="accordion-panel">
<p>...</p>
</div>
<div class="accordion">This is accordion 3</div>
<div class="accordion-panel">
<p>...</p>
</div>
Image Lightbox
Thank you for choosing Oslo as your Zendesk Guide theme. This theme comes with configurable options allowing us to change the look and feel through a friendly user-interface.
If you're not able the find the settings you're looking for, we can help customize the theme as per your requirement for a small fee. Feel free to drop a message at support@solafid.com should you have any questions.
Multi-language
Logo
Colors
Fonts & Border Style
Info Notification
Header
Hero
Popular Search
Homepage
Custom Blocks
Video Blocks
Article
Community
Footer
Footer Social Media Links
Through theme settings, configure your brand's color, logo, icons, etc. to align with your company's brand guideline. Here are some examples of designs possible with Oslo.
Oslo Theme supports multi-language setup. Most components of the Help Center are using Zendesk translation engine. This article will cover additional steps to make some Homepage components to support multilanguage. This includes: custom header links, custom blocks descriptions and text, footer copyright text, etc.
Before you follow the steps below, please ensure you have followed steps outline in this document.
Add Dynamic Content
For detailed steps to add Dynamic Content, please see this Zendesk support article.
Here is the list of Dynamic Content required for Oslo Theme:
- info_notification_title
- info_notification_body
- header_url_title_1
- header_url_title_2
- header_url_title_3
- header_url_link_1
- header_url_link_2
- header_url_link_3
- help_center_title
- hero_title
- search_placeholder
- popular_search_keyword
- custom_block_1_title
- custom_block_1_description
- custom_block_1_url
- custom_block_2_title
- custom_block_2_description
- custom_block_2_url
- custom_block_3_title
- custom_block_3_description
- custom_block_3_url
- custom_block_4_title
- custom_block_4_description
- custom_block_4_url
- custom_block_5_title
- custom_block_5_description
- custom_block_5_url
- custom_block_6_title
- custom_block_6_description
- custom_block_6_url
- footer_copyright
- footer_description
- footer_url_title_1
- footer_url_title_2
- footer_url_title_3
- footer_url_title_4
- footer_url_title_5
- footer_url_link_1
- footer_url_link_2
- footer_url_link_3
- footer_url_link_4
- footer_url_link_5
- facebook_url
- twitter_url
- youtube_url
- linkedin_url
- instagram_url
Turn on Multilanguage Settings
In the theme settings, enable the option "Enable dynamic content translations".
