How do I create and upload my own Theme?
What you will need:
- Your account’s credentials
- An FTP client
- Your Theme’s folder name
Here are the basic steps:
- Install one of the pre-created themes on your store
- Connect to your FTP and download the theme folder from the web/assets/templates/ FTP folder
- Rename the theme folder on your desktop
- Make your changes as needed
- Re-upload the renamed and edited theme folder to the web/assets/templates/ FTP folder
- Log into your Discourse Manager and go to Settings ->Design ->Themes & Styles
Install and apply your edited theme
Those are the basic steps needed. For a more in-depth description of the process, keep reading below!
First let’s select a theme that you’ll be basing your own design off of.
- Log into your Discourse Manager and - using the right hand navigation menu - go to Settings ->Design ->Themes & Styles.
Let’s talk about the Themes & Styles section
In the Themes & Styles section, you will see all of the Themes that are available for use on your panel. As you browse each theme, you can hover over its thumbnail image to review its respective name. Clicking on a theme’s image will show you a screenshot representing the theme’s appearance. If the theme is marked as “responsive” the image will also show representations of the theme on desktop and mobile platforms.
Viewing the theme’s image will also have an “Install Theme” button that will download it and add it to your panel. During the installation process you will be asked if you would like to Apply the theme to the dashboard - meaning that it would be live on the dashboard. If you select no to this option, the theme will still be installed to your dashboard but it won’t be made live. However, you can apply it later as needed (more on that in a moment).
As you look through the themes, find one that best meets your desired layout that you would like to have on your dashboard. For example, some themes have categories listed along the top while others have categories listed along the left hand side of the dashboard’s framing. In some cases, the themes may have a large banner across the top while others have the banner nested. Just browse and find the layout that you’d like to see for your site and install the themes as needed.
After you’ve installed a few themes, they will be shown in the Themes and Styles page with a small diagonal banner labeled “Installed” on it. Again, this just means that the theme is installed but not yet applied to the live dashboard.
If you click on any of these installed themes, you can apply them outright or otherwise click on Preview to see how it would function with your dashboard.
Once you’ve selected the theme that you’d like to use for your own design, make a note of its name and proceed with the following steps:
- Connect to your Discourse’s FTP access
- Navigate to web/assets/templates/
The templates folder will contain all of your installed themes
- Locate the theme folder that you’ve chosen for your edits and download the folder (via FTP) to your desktop
(download the whole folder!)
- Once you have the theme folder on your desktop, rename it.
Tip
The name of the folder can be anything you’d like it to be. Only suggest naming it something other than its original name to prevent confusion when you upload it back to your dashboard.
Main Theme files
Typically, the theme folder will contain a frame.html file and a CSS folder.
-
The frame.html file
This is the HTML template that controls the layout of your dashboard.
-
The CSS folder
Is a folder that will contain the style sheets used by the site.
These are the two main elements that control the overall look and feel of your dashboard. The best way to view the relation between frame and CSS is to think of the frame file as the blueprint to a building. This blueprint specifies where certain rooms and areas of the building will be located. As the building is being constructed, the contractor will build the walls and doorways of the building according to blueprint. Using this analogy, the CSS can then be viewed as the interior designer of the building that determines the various look and feel of the rooms within the building. The frame and CSS work along the same lines. The frame.html dictates where elements will go and the CSS will dictate what they look like.
Additional Theme Files
All theme folders will contain the frame.html file and CSS folder mentioned above. These are the important ones to be most concerned with. However, in some cases, you may also see these additional folders/files in the theme folder you download.
-
home.html (file)
This is the HTML template used for the Discourse Dashboard’s home page. Typically it’s the same file as found in the global “Common” folder so it is not always needed or unique to a particular theme. Therefore it isn’t found in every theme folder.
-
images (folder)
This folder will contain images and graphics used by the theme. For example certain buttons may be image based and these images will be found here. Keep in mind that your CSS folder may also contain its own images folder
-
js (folder)
The js folder will contain any javascript that is used specifically by the theme. As with the home.html file, these are typically the same as served from the global common folder, so they might not always be present in the theme folder.
-
fonts (folder)
If theme uses special fonts or font/icon effects, they’ll be located in this folder
-
Screenshot files
These will be screenshots of the theme as it will be shown on the Theme selector page mentioned earlier. You can make your own for your theme if you’d like! Just preserve their name.
Once you have the theme folder downloaded and renamed on your desktop, you’re now ready to edit the theme as you see fit.
How do I edit the Theme?
This is something that - as a designer/developer - must determine for yourself how to edit the theme. It would be like us telling you not only how to paint your house, but also tell you which type of paint to use, what colors to use and where to apply them. It’s a creative process and you are the creator.
However we are able to provide the following tips to keep in mind when making your changes.
-
Make a backup of the theme folder and store it somewhere safe on your computer!
As you make changes to the theme files, you should get into the habit of making backups of your changes just in case something doesn’t work as you plan. Rather than starting over each time, you can revert to a previous back up
-
Preserve Comment Tags!
The html templates contain certain blocks of coding that are used by the software to insert details into the various sections. These are usually written as comment tags and contained in blocks. You can edit the HTML as you see fit, but in order for the software to function correctly, please be sure to preserve the comment tags as they are written. The comment blocks will usually look like this in the code:
<!--START: [function name]-->
html code
<!--END: [function name] -->
-
Preserve bracketed items!
Similar to the comment tags, the software also uses variables that are needed to insert information form the discourse’s database. These are always written within open and closed brackets. Again, you can edit the HTML around the variables as needed, but please preserve the variables and their brackets exactly as they are written. The bracketed variables will usually look like this:
[variable _name]
After creating and saving your design, you can upload (will write in next how to upload multiple files at ones (threading)) it to your Discourse for use.
- Once again, connect to your Dashboard access
- Navigate to the web/assets/templates folder
- Upload the edited/renamed Theme folder from your computer to the templates folder
- Log into your Discouse Dashboard Manager and once again navigate to Settings ->Design ->Themes & Styles
- Locate the theme you just uploaded
(Hint: You can use the search bar at the to to search for it by name)
- Click on the theme and expand its view
- Click on Apply to have it made live on your Dashboard!
I look forward to design this model view this winter OPW program. Thanks!!
