Skip to content
This repository has been archived by the owner on Jan 21, 2025. It is now read-only.

Commit

Permalink
Merge pull request #1 from rottbers/feature/update-base-to-v1.5.0
Browse files Browse the repository at this point in the history 
Updated Copenhagen to v1.5.0
  • Loading branch information
@rottbers
rottbers authored Mar 26, 2019
2 parents 3a2df55 + d571850 commit e2fe1a0
Show file tree
Hide file tree
Showing 31 changed files with 448 additions and 272 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
.sass-cache/
style.css.map
node_modules/
72 changes: 21 additions & 51 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,20 @@
# Copenhagen Theme by Zendesk

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 is the default Zendesk Guide theme. It is designed to be responsive and accessible.
Learn more about customizing Zendesk Guide [here](https://support.zendesk.com/hc/en-us/sections/206670747).

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).

## How to use
This is the latest version of the Copenhagen theme available for Guide. It is possible to use this repository as a starting point to build your own custom theme. You can fork this repository as you see fit.
You can use your favorite IDE to develop themes and preview your changes locally in a web browser using the Zendesk Apps Tools (ZAT). For details, see [Previewing theme changes locally](https://support.zendesk.com/hc/en-us/articles/115014810447).

## Customizing your theme
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 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
{
"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"
}]
}]
}

```
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)

You can read more about the manifest file [here](https://support.zendesk.com/hc/en-us/articles/115012547687--THEMING-CENTER-BETA-Settings-manifest-reference)
You can read more about the manifest file [here](https://support.zendesk.com/hc/en-us/articles/115012547687).

### Settings folder
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.
Expand All @@ -70,19 +38,18 @@ 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.
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)
You can read more about assets [here](https://support.zendesk.com/hc/en-us/articles/115012399428)


## 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 follow the documentation for importing [here](https://support.zendesk.com/hc/en-us/articles/115012794168).

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)
You can also import directly from GitHub - learn more [here](https://support.zendesk.com/hc/en-us/community/posts/360004400007).

## Templates
The theme includes all the templates that are used for a Help Center that has *all* the features available.
Expand All @@ -107,25 +74,28 @@ List of templates in the theme:
* Subscriptions page
* User profile page

You can add up to 10 optional templates for:
* Article page
* Category page
* Section page

You do this by creating files under the folders `templates/article_pages`, `templates/category_pages` or `templates/section_pages`.
Learn more [here](https://support.zendesk.com/hc/en-us/articles/360001948367).

## Styles
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.
These includes:
* Default Favicon
* Home page banner image
* Community banner image (for Community topics list page)
* Community image (for Community section in Home page)
* Copenhagen icons font
* Entypo icon font
These are the images that are needed for the theme.
These include:
* Loader
* Dropdown arrow

# Using SASS
In order to use SASS for development, you just need to compile it into the CSS that Theming Center understands.
In order to use SASS for development, you just need to compile it into the CSS that Zendesk Guide understands.
Note: Zendesk App Tools [theme preview](#publishing-your-theme) currently does not support live SASS compilation.

## Requirements
Expand All @@ -140,8 +110,8 @@ Now you can compile your SASS files running:
```
./bin/compile.rb
```
Which will take all the `scss` files inside the `styles/` folder and create the `style.css` file that is consumable by Theming Center.
Which will take all the `scss` files inside the `styles/` folder and create the `style.css` file that is consumable by Zendesk Guide.

# Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/zendesk/copenhagen_theme
Please mention @zendesk/delta when creating a bug report or a pull request.
Please mention @zendesk/guide-growth when creating a bug report or a pull request.
44 changes: 22 additions & 22 deletions manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "Copenhagen",
"author": "Zendesk",
"version": "1.4.4",
"version": "1.5.0",
"api_version": 1,
"default_locale": "en-us",
"settings": [{
Expand Down Expand Up @@ -52,15 +52,15 @@
{ "label": "Century Gothic", "value": "'Century Gothic', AppleGothic, sans-serif" },
{ "label": "Copperplate Light", "value": "'Copperplate Light', 'Copperplate Gothic Light', serif" },
{ "label": "Courier New", "value": "'Courier New', Courier, monospace" },
{ "label":"Futura", "value": "Futura, 'Century Gothic', AppleGothic, sans-serif" },
{ "label":"Garamond", "value": "Garamond, 'Hoefler Text', 'Times New Roman', Times, serif" },
{ "label":"Geneva", "value": "Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif" },
{ "label":"Georgia", "value": "Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif" },
{ "label": "Futura", "value": "Futura, 'Century Gothic', AppleGothic, sans-serif" },
{ "label": "Garamond", "value": "Garamond, 'Hoefler Text', 'Times New Roman', Times, serif" },
{ "label": "Geneva", "value": "Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif" },
{ "label": "Georgia", "value": "Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif" },
{ "label": "Helvetica", "value": "Helvetica, Arial, sans-serif" },
{ "label": "Helvetica Neue", "value": "'Helvetica Neue', Arial, Helvetica, sans-serif" },
{ "label":"Impact", "value": "Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif" },
{ "label":"Lucida Grande", "value": "'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif" },
{ "label":"Trebuchet MS", "value": "'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif" }
{ "label": "Impact", "value": "Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif" },
{ "label": "Lucida Grande", "value": "'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif" },
{ "label": "Trebuchet MS", "value": "'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif" }
],
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
}, {
Expand All @@ -69,22 +69,22 @@
"description": "text_font_description",
"label": "text_font_label",
"options": [
{ "label": "System", "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"},
{ "label": "Arial", "value": "Arial, 'Helvetica Neue', Helvetica, sans-serif"},
{ "label": "Arial Black", "value": "'Arial Black', Arial, 'Helvetica Neue', Helvetica, sans-serif"},
{ "label": "Baskerville", "value": "Baskerville, 'Times New Roman', Times, serif"},
{ "label": "Century Gothic", "value": "'Century Gothic', AppleGothic, sans-serif"},
{ "label": "Copperplate Light", "value": "'Copperplate Light', 'Copperplate Gothic Light', serif"},
{ "label": "Courier New", "value": "'Courier New', Courier, monospace"},
{ "label":"Futura", "value": "Futura, 'Century Gothic', AppleGothic, sans-serif"},
{ "label":"Garamond", "value": "Garamond, 'Hoefler Text', 'Times New Roman', Times, serif"},
{ "label":"Geneva", "value": "Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif"},
{ "label":"Georgia", "value": "Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif" },
{ "label": "System", "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" },
{ "label": "Arial", "value": "Arial, 'Helvetica Neue', Helvetica, sans-serif" },
{ "label": "Arial Black", "value": "'Arial Black', Arial, 'Helvetica Neue', Helvetica, sans-serif" },
{ "label": "Baskerville", "value": "Baskerville, 'Times New Roman', Times, serif" },
{ "label": "Century Gothic", "value": "'Century Gothic', AppleGothic, sans-serif" },
{ "label": "Copperplate Light", "value": "'Copperplate Light', 'Copperplate Gothic Light', serif" },
{ "label": "Courier New", "value": "'Courier New', Courier, monospace" },
{ "label": "Futura", "value": "Futura, 'Century Gothic', AppleGothic, sans-serif" },
{ "label": "Garamond", "value": "Garamond, 'Hoefler Text', 'Times New Roman', Times, serif" },
{ "label": "Geneva", "value": "Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif" },
{ "label": "Georgia", "value": "Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif" },
{ "label": "Helvetica", "value": "Helvetica, Arial, sans-serif" },
{ "label": "Helvetica Neue", "value": "'Helvetica Neue', Arial, Helvetica, sans-serif" },
{ "label":"Impact", "value": "Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif" },
{ "label":"Lucida Grande", "value": "'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif" },
{ "label":"Trebuchet MS", "value": "'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif" }
{ "label": "Impact", "value": "Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif" },
{ "label": "Lucida Grande", "value": "'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif" },
{ "label": "Trebuchet MS", "value": "'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif" }
],
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
}]
Expand Down
Loading

0 comments on commit e2fe1a0

Please sign in to comment.