Promoted articles
We thoroughly test our themes to make sure all the features work and they look like what they are supposed to look. However, in case of any mistakes, we'll do everything to correct them.
Installation Support
Free installation is always included with theme purchase. Contact us here.
Installation instructions is included with the files.
Code Warranty
If any problem occurs during the installation process, or if the theme for some reason works differently than expected, or an error occurs during the download or if you need general getting started instructions, you can always rely on our Customer Support for free.
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 Istanbul.
Thank you for choosing Istanbul 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
Category Page
Section Page
Article
Community
Footer
Footer Social Media Links
Giza 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 Istanbul Theme:
- info_notification_title
- info_notification_body
- header_url_title_1
- header_url_title_2
- header_url_title_3
- header_url_title_4
- header_url_title_5
- header_url_link_1
- header_url_link_2
- header_url_link_3
- header_url_link_4
- header_url_link_5
- help_center_title
- intro_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".
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
