Register to attend Frog's Release Showcase... Register Now
Make it live!
Themes are EJS files which contain a small amount of layout instruction and all the CSS to style them.
Step 1
Download this zip theme containing all the elements required for a theme:
Step 2
When you unzip this file, in the folder it unpacks, you'll see it contains:
- theme.ejs - containing the code for the theme
- screenshot.png - the thumbnail image which will appear in the theme selector
- arrowmobile.png, arrowmobile-o.png, menuclose.png & menuopen.png - files used to create the mobile menu
Step 3
Open theme.ejs in your code editor. Paste in your modified HTML from the widget.
Step 4 - Find and replace
We now need to give you theme a unique name, so that there will be no conflicts with other themes in Frog. Adding your school name is probably a good idea.
Run a Find-and-Replace command on the code, replacing REPLACE_THIS with your chosen name.
Step 5 - Images
If you have included images as part of your theme, you need to copy them into the folder you unzipped earlier. These images should be in the same folder as the theme files.
You'll need to edit your code replacing the URLs used in the HTML widget with the filenames (and extensions) of the images.
Using the example from Building your theme, this code:
/* Theme background */
.REPLACE_THIS-container{
background: url('file/asset/12850F71200307A935BF0FAEE9E0F10EABAF8BECF8ED5AD7?v=__version__');
}
Becomes...
/* Theme background */
.REPLACE_THIS-container{
background: url('frog-head-white.png?v=__version__');
}
Step 6 - Screenshot.png
Edit the screenshot.png image to create a thumbnail for your theme. We've learnt that adding a title to the thumbnail helps users identify it.
Step 7 - All done
Zip up this folder
The final step is to contact the Service Desk and report you have a theme ready to upload. They will create a ticket for you and ask you to reply, attaching the zip file.
The guys on the Service Desk will check your theme for issues, upload it and let you know when it's available.
Tutorials in this series...
