From 7142d638c8e8164f406dcf4ae330402461c998f4 Mon Sep 17 00:00:00 2001 From: Alicia Gonzalez Date: Thu, 28 Sep 2017 16:17:25 +0200 Subject: [PATCH 1/3] Updates READ Edit theme in Guide. The naming convention in these templates maps to template names in the application. We convert snake case to sentence case names and drop the file extension. For example, `article_page.html.hbs` in this theme is used for the `Article page` template in the application. +### Manifest file +The manifest file allows you to add settings to your theme and change the values of these settings through the UI. +For example, if you update the manifest file to look like this and you then import your theme to Theming Center: +```js +{ + "name": "Copenhagen", + "author": "Zendesk", + "version": "1.0.1", + "api_version": 1, + "settings": [{ + "label": "Colors", + "variables": [{ + "identifier": "brand_color", + "type": "color", + "description": "Brand color for major navigational elements", + "label": "Brand color", + "value": "#7B7B7B" + }] + }, { + "label": "Custom setting group", + "variables": [{ + "identifier": "custom_var", + "type": "text", + "description": "Custom variable to change the title", + "label": "Title", + "value": "Welcome to our Help Center" + }] + }] +} -**Upload CSS and JavaScript** - Copy and paste the generated `style.css` into the CSS tab and `script.js` into the JS tab. +``` +You would see two setting groups with a variable each in your theme inside Theming Center with the correct input types: +![Manifest](https://zendesk.box.com/s/7hq7ohd7dt5buh56izawxipybi41fs80) -**Upload Assets** - You can upload the assets in `/assets` folder via the Assets tab. Click Add file button or drag and drop them onto to button. +You can read more about the manifest file [here](https://support.zendesk.com/hc/en-us/articles/115012547687--THEMING-CENTER-BETA-Settings-manifest-reference) -**Preview** - Once your template, CSS, JavaScript and asset changes are uploaded, click the Preview button to verify everything looks as intended. +### Adding assets +You can add assets to the asset folder and use them in your CSS, Javascript and templates. +You can read more about assets [here](https://support.zendesk.com/hc/en-us/articles/115012399428--THEMING-CENTER-BETA-Using-your-own-theme-assets-for-Help-Center) -**Save & Publish** - Once everything looks good click the Save button and then publish your theme live. + +## Publishing your theme +After you have customized your theme you can download the repository as a `zip` file and import it into Theming Center. + +You can follow the documentation for importing [here](https://support.zendesk.com/hc/en-us/articles/115012794168--THEMING-CENTER-BETA-Importing-and-exporting-your-theme-and-manifest-file#topic_jpd_zdc_hbb). + +You can also preview your theme before you import it to Theming Center with the Zendesk App Tools framework, you can read more about local preview [here](https://support.zendesk.com/hc/en-us/community/posts/115007717507-Local-Theme-Preview-via-Zendesk-Application-Tools) ## Templates The theme includes all the templates that are used for a Help Center that has *all* the features available. @@ -46,8 +85,10 @@ List of templates in the theme: * User profile page ## Styles -The styles for the theme are split using Sass partials, all the partials are under [styles/](/blob/master/styles/), they are all included in the "main" file [index.scss](/blob/master/styles/index.scss) and then compiled to CSS running: -`sass styles/index.scss style.css` +The styles that Theming Center needs to use in the theme are in the `style.css` file in the root folder. + +The styles for the theme are split using Sass partials, all the partials are under [styles/](/blob/master/styles/), they are all included in the "main" file [index.scss](/blob/master/styles/index.scss) and then compiled to CSS. +If you wish to use SASS you can go to the [using SASS section](#using-sass) ## Assets These are the images and font files that are needed for the theme. @@ -60,5 +101,22 @@ These includes: * Entypo icon font * Dropdown arrow -## Contributing +# Using SASS +In order to use SASS for development, you just need to compile it into the CSS that Theming Center understands. + +## Requirements + +- Install Ruby, we use `sassc` gem to compile our `.scss` files. You can see how to install Ruby [here](https://www.ruby-lang.org/en/documentation/installation/). +- Install `sassc` gem. You can run: +``` + gem install sassc +``` + +Now you can compile your SASS files running: +``` +./bin/compile +``` +Which will take all the `scss` files inside the `styles/` folder and create the `style.css` file that is consumable by Theming Center. + +# Contributing Bug reports and pull requests are welcome on GitHub at https://github.com/zendesk/copenhagen_theme From 66588122cc6d61391b9749a8bfcdc60516af00c4 Mon Sep 17 00:00:00 2001 From: Alicia Gonzalez Date: Fri, 29 Sep 2017 09:58:11 +0200 Subject: [PATCH 2/3] Addresses feedback --- README.md | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d1aa45a81..1d85db116 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,8 @@ NOTE: These files are not yet the source of truth for Copenhagen theme. -The Copenhagen theme is a responsive theme for Zendesk Guide. +The Copenhagen theme is a responsive theme for Zendesk Guide. It is designed to be used together with [Theming Center](https://support.zendesk.com/hc/en-us/community/topics/115000528387-Zendesk-Guide-beta-Theming-Center) + You can see the theme live [here](https://copenhagentheme.zendesk.com/hc/en-us). The Copenhagen theme for Help Center consists of a [set of templates](#templates), [styles](#styles), a Javascript file used mainly for interactions and an [assets folder](#assets). @@ -49,6 +50,29 @@ You would see two setting groups with a variable each in your theme inside Themi You can read more about the manifest file [here](https://support.zendesk.com/hc/en-us/articles/115012547687--THEMING-CENTER-BETA-Settings-manifest-reference) +### Settings folder +If in your manifest file you would like to have variables of type `file`, you need to provide a fallback for that variable and have it in the `/settings` folder, this file will be used and shown in the settings panel until another one is uploaded. +Ex. +If you would like to have a variable for the background image of a section, the variable in your manifest file would look something like this: + +```js +{ + ... + "settings": [{ + "label": "Images", + "variables": [{ + "identifier": "background_image", + "type": "file", + "description": "Background image for X section", + "label": "Background image", + }] + }] +} + +``` + +And this would look for a file inside the settings folder named: `background_image` + ### Adding assets You can add assets to the asset folder and use them in your CSS, Javascript and templates. You can read more about assets [here](https://support.zendesk.com/hc/en-us/articles/115012399428--THEMING-CENTER-BETA-Using-your-own-theme-assets-for-Help-Center) @@ -103,6 +127,7 @@ These includes: # Using SASS In order to use SASS for development, you just need to compile it into the CSS that Theming Center understands. +Note: Zendesk App Tools [theme preview](#publishing-your-theme) currently does not support live SASS compilation. ## Requirements From 18f158cf71f77771a87b0889162e242fd5f1ab8b Mon Sep 17 00:00:00 2001 From: Alicia Gonzalez Date: Fri, 29 Sep 2017 14:30:24 +0200 Subject: [PATCH 3/3] Addresses feedback --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1d85db116..f809439f2 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # Copenhagen Theme by Zendesk -NOTE: These files are not yet the source of truth for Copenhagen theme. - The Copenhagen theme is a responsive theme for Zendesk Guide. It is designed to be used together with [Theming Center](https://support.zendesk.com/hc/en-us/community/topics/115000528387-Zendesk-Guide-beta-Theming-Center) You can see the theme live [here](https://copenhagentheme.zendesk.com/hc/en-us). @@ -15,7 +13,7 @@ This is the latest version of the Copenhagen theme available for Guide. It is po Once you have forked this repository you can feel free to edit templates, CSS in `style.css` (if you would like to use SASS go to the [Using SASS section](#using-sass)), javascript and manage assets. ### Manifest file -The manifest file allows you to add settings to your theme and change the values of these settings through the UI. +The manifest allows you to define a group of settings for your theme that can then be changed via the UI in Theming Center. For example, if you update the manifest file to look like this and you then import your theme to Theming Center: ```js { @@ -51,7 +49,7 @@ You would see two setting groups with a variable each in your theme inside Themi You can read more about the manifest file [here](https://support.zendesk.com/hc/en-us/articles/115012547687--THEMING-CENTER-BETA-Settings-manifest-reference) ### Settings folder -If in your manifest file you would like to have variables of type `file`, you need to provide a fallback for that variable and have it in the `/settings` folder, this file will be used and shown in the settings panel until another one is uploaded. +If you have a variable of type file, you need to provide a default file for that variable in the `/settings` folder. This file will be used on the settings panel by default and users can upload a different file if they like. Ex. If you would like to have a variable for the background image of a section, the variable in your manifest file would look something like this: @@ -72,6 +70,7 @@ If you would like to have a variable for the background image of a section, the ``` And this would look for a file inside the settings folder named: `background_image` +You can find more information about adding assets [here](https://support.zendesk.com/hc/en-us/articles/115012399428--THEMING-CENTER-BETA-Using-your-own-theme-assets-for-Help-Center) ### Adding assets You can add assets to the asset folder and use them in your CSS, Javascript and templates.