In this article we will discuss some possible ways of modifying our themes. We will look at each methodology pros and cons.
Custom Head Styles
Each of our themes comes with settings, which can be accessed through the menu Plugins in the administration. We will use as an example the Playground Responsive theme:
One of the settings is Custom Head Styles.
The idea behind this setting is that you have easily accessible place, where you can write your CSS, directly into the browser. You do not need files, ftp, editors, etc. The rules written here are applied last in the page, so they override all existing CSS rules (with same selectors, of course). This CSS is preserved in the database. This means that you can not lose it after upgrade.
Alternatives
Probably you want to write your CSS in separate file? Maybe you want to use your favourite editor like Visual Studio, DreamWeaver, SubLime? So here is what you can do:
- Go to /Themes/{YourTheme}/Content/css and add new file with extension ".css". For example, I will name it "custom-user-styles.css". Now open this file /Themes/Playground/Views/Shared/Head.cshtml (if this file does not exist, copy it from /Views/Shared/ ). Inside the file paste this code:
Html.AppendCssFileParts("~/Themes/{YourTheme}/Content/CSS/custom-user-styles.css");
Now you have your own file, which you can edit from your favourite editor.
But, what is the privilege of making another file, instead of writing directly to the theme CSS files.
The main reason are the future upgrades. We improve our code daily, so when you download the latest version of our products, your CSS files will be out of date. And if your changes are inside these files, you will lose them.
Having separate files, ensures that your changes will stay. The only thing you should do is to add the reference to this file in the view as you firstly did it: Html.AppendCssFileParts("~/Themes/{YourTheme}/Content/CSS/custom-user-styles.css");.
Theme variations
Not an easy task, but maybe worthy one.
If you want variations of your theme and the option to switch between them - read further.
Each theme has a folder into the /Themes folder. The easiest way of creating new theme is copying one of the existing themes and rename it. But which files should be renamed? Let`s take again the Playground theme for example. Copying and paste will simply leads to new folder (named for example "Playground - Copy"). Let`s say our new theme will be called "Football". Now rename the new folder to be named "Football". Open this folder and inside you will find a file named theme.config. It`s content should be with this format:
<?xml version="1.0" encoding="utf-8" ?>
<Theme title="Playground"
supportRTL="true"
mobileTheme="false"
previewImageUrl="~/Themes/Playground/preview.jpg"
previewText="This is the 'Playground' theme from www.nop-templates.com.">
</Theme>
Now replace all ocurrencies of "Playground" with "Football". Next, save this file and close it.
Next, from the same directory, open Views > Shared > Head.cshtml. Inside this file you will find all theme CSS files linked to the Playground theme. Again replace all ocurrencies of "Playground" with "Football", save this file and close it.
What do we have until now?
We have whole new theme, which can override the default views, can have its own CSS, JavaScripts, Fonts and Images. It was pretty fast and simple I think.
What more do we need?
As we know each our plugin is themable. This means that inside each plugin there is folder named "Themes" and inside it we have files that override the styles for the default look of the plugin. So our job is to go through all the plugins, copy the folder "Playground" and rename the new one to "Football". Now we can modify each plugin to look good for our new theme.
Things to remember
We have everything working unitl now, right?
But what is very important to understand? Until now we were talking about the look of the theme - its views and styles. But, can we configure the theme settings through the administration?
Unfortunately, the answer is No. The main reason for this is because the settings in nopCommerce are shared between the themes. This means that if we want to change the picture size in a store, it will affect all themes. This is why it is not a good idea to have multiple themes on one store and/or enabling customers to change store theme (consider the example above).
Also the Football theme will use the settings from the plugin of the Playground theme. This means that a change of the "Follow us pinterest url" setting in the Playground will take affect in both Playground and the Football themes.
But if the themes have with minor style differences, these settings are not something to bother. In our case this is exactly what we want - two different looks of the theme with common settings.
That is for now. If you have any questions or suggestions do not hesitate to write to our support !