The most powerful theming features in Guide are the abilities to import, download, and work locally with themes. When you’re making major updates to a theme or building your own theme from scratch, these options enable a streamlined workflow for developers.
The workflow to build a new theme or update an existing theme locally is as follows:
- Starting a new themeby adding the Copenhagen theme or duplicating an existing theme.
- Downloading your themeto work offline.
- Editing your theme locallylocally with your own development tools.
- 我mporting your themeback into Guide.
- Publishing your new theme.
- Making additional updates.
Starting a new theme
我f you’re building a brand new theme from scratch, consider starting from a new version of the standard Copenhagen theme. To do so, you add a new theme and a fresh copy of the Copenhagen theme is added to your Themes page. You can also get a fresh version of the theme from the open-sourceCopenhagen repositoryon GitHub.
Many people like to start with an existing theme and make major modifications to create their own theme. If you’re revamping an existing theme and want to keep some of the existing styles, you can duplicate the theme.
To start a new theme by adding a fresh copy of Copenhagen or by copying an existing theme, seeAdding a help center theme to Guide.
Downloading your theme
Now you're ready to download your theme from Guide. A theme is downloaded as a zip archive of templates, JavaScript, CSS, and assets. This enables you to work on the theme outside of Guide, using your own development tools.
To download your theme, seeDownloading a help center theme.
Editing your theme locally
Now you’re ready to start working on your local machine, using your own development tools.
To avoid zipping and importing the files into Guide every time you want to preview your changes, you can preview changes locally in a web browser. To set up local theme previewing, seePreviewing theme changes locally.
Once set up, you can preview changes locally by saving the files you're working on. The theme reloads automatically in the browser. This lets you work iteratively, making changes to templates, CSS, JavaScript, and assets, and then previewing the results of your work.
Additionally, when you download a theme to your local machine, it's a good idea to check it into your favorite version control repository, such as git, mercurial, or SVN.
Your team can also develop and maintain the theme collaboratively using GitHub, then preview or publish it in Guide from GitHub. SeeSetting up the GitHub integration with your Guide theme.
我mporting your theme
After you’ve built out the theme locally, compress the theme directory into a ZIP archive and import it into Guide by dragging and dropping the file on the Themes page or by using the import option.
This will import the theme as a new custom theme. You can preview further in Guide, and other users in your organization will also be able to see the theme.
To import your theme, see我mporting a help center theme.
我f you set up anintegration with GitHub, you can update a theme in Guide from GitHub. You don't need to create a separate ZIP archive and import it. SeeUpdating your Github-managed theme in Guide.
Another option is to build your own integration with theThemes APIto import and update themes in Guide. SeeTheme Import WorkflowandTheme Update Workflowin the Zendesk developer docs.
Publishing your new theme
When you're ready to publish your new theme, just click Publish from the theme menu in the workbench.
Making additional updates
我f you're using version control systems like git or mercurial, continue making changes locally, not in Guide. Check in your changes and import the theme into Guide again. If you accidently make changes to your theme in Guide, download the updated theme and check those changes into your source control system.
5 Comments
When I preview my theme via美元扎-主题预览and paste the /start link in my Chrome URL, I receive a 'blocked by CORS policy' error in the console. The origin is my own subdomain URL as expected, and it attempts to fetch at *myMappedDomain*/hc/activity., which is a URL that throws a 404 error so as far as I can tell, the theme loads trying to fetch data from a page that doesnt exist. This is not part of our code in the templates.
我did allow for mixed contents to be loaded as per athis article, but there is no mention specifically about the CORS issue.
While I do use ZAT Tools in this case the troubleshooting step of theTroubleshooting CORSarticle:
As part of the Apps framework, a back-end proxy server is available via theclient.request()call. Use this proxy by settingcors:falsein the client.request's settings (note: false is also the setting's default value).
没有帮助,因为我的“特殊情况”previewing the Zendesk Theme which I downloaded from the Guide, there are no explicit client requests being made in the theme files .
/thanks,
Diego
Hi Diego,
We have theCORS Troubleshootingthat will surely help you find a solution for this issue.
All the best
"Important:我f you set up anintegration with GitHub, making any modifications to your theme in Guide will break the GitHub integration."
我s there any way to reverse this?
As it turns out, the only method is to perform the integration again once it breaks.
Hi All,
We are looking to talk to people that have code customized a Help Center theme or tried and failed to code-customize a theme.
我f you are up for sharing your feedback through a 30 min video interview, please sign up and answer 3 short survey questions at the end of the form. We would love to hear from you!
Sign up here.
Looking forward to talking to you!
Gorka Cardona-Lauridsen
Sr. Product Manager, Zendesk Guide
Pleasesign into leave a comment.