Creating or modifying a theme with the Dev Kit

Modified on Fri, 7 Oct, 2022 at 10:54 AM

In order to be valid, the root folder of a theme must contain a desc.json file. If not, it won't be shown when refreshing the available themes.


Creating a theme


When creating a new theme in the devkit, the devkit must not be running. If it is running, open PowerShell (or the Command prompt, if you used it to start the devkit) and digit CTRL+C to stop the process and restart it when you have added the theme to the themes folder (<DEVIKIT FOLDER>/themes).


In order to create a theme, we recommend copying one of the existing ones (either Blue or Black theme, do not select the default/Green one because other themes are inherited from it, and it might cause issues with future updates) from your devkit themes folder (<DEVKIT FOLDER>/themes) or your Portal themes folder (<NEWIRED PORTAL FOLDER>/themes).


Rename the theme folder as you want. Its name is used as a theme-id and must follow these two rules:


  • Only alphabetical characters (white characters like space or tabs are not allowed)
  • The maximum length of 50 characters


 A theme is defined by the following file structure:


theme-id/
         less/
                variables.less
                bubble.less
                launcher.less
                _feedback.less
                _fonts.less
                ...
         fonts/
                *.ttf, *.woff, etc.
         desc.json
         preview.png


Once you have copied and renamed the theme, open the file "desc.json" inside the theme, and change the data according to the new theme specs.


 Now you can add fonts to the fonts folder and edit the LESS files in the less folder.


To adjust the basic properties (parameters) of a theme, you can change the values in the "variables.less" file.
If you need to edit other parts of the theme, you can modify the "_custom.less" file (recommended) or the other .less modules (not recommended but possible).


Keep in mind that the additional themes will be inherited from the default one (Newired Green), therefore we suggest not deleting it because it will break the other themes.


Here is a complete list of the files you can edit (or add, if the copied theme doesn't contain them):


 bubble.less Entry point for the styles of the bubble
 launcher.less Entry point for the styles of the launcher
 variables.less Definition of variables that are used to customize the theme
 _bubble.less Style definition of the bubble module
 _custom.less Custom style definition - used when the variables provided are not sufficient
 _feedback.less        Style definition of the feedback module
 _fonts.less Definition of the fonts that are used in the theme
 _global.less Basic style definition
 _handle.less Style definition of the handle module
 _progress.less Style definition of the progress module
 _spotlight.less Style definition of the spotlight module
 _window.less

 Style definition


 


of the launcher module - Journey list, settings, ...



Editing a theme


To modify a theme, access its root folder inside the themes folder in the devkit (<DEVKIT>/themes) or in the portal server (<NEWIRED PORTAL FOLDER>/themes). From here, you can add fonts and edit all the .less files in order to change the theme as you want.


Changes applied to themes inside the devkit, can be seen instantly by visiting http://localhost:8000.


Changing preview image


To change the preview image of a theme, you need the theme devkit. If you have it installed and running, visit http://localhost:8000/preview.html, select the theme you want to generate a preview for and take a snapshot of the generated image. Then, replace the current one with the new image (remember to keep the same name).


Uploading/updating a theme


If you need to know more about uploading/updating a theme in the Portal, please check this article.


The Dev Kit is only available to customers that have completed the training offered Newired if you require more information please contact your Customer Engagement Manager or Our Support Channel ( support@newired.com )

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article