We strongly recommend to use CERN Theme for your Drupal Websites. The theme contains a set of functionalities designed to fit as many users’ needs as possible. However, if you didn’t find the functionality that you need in our theme, you can always override the CERN Theme locally on your website. For that we provided special version of the theme: CERN Override theme.

 Installing the CERN Override theme

The CERN Override theme is located in a Gitlab repository managed by the Web Team. Before installing the CERN Override theme make sure that the CERN Theme is installed on your website. In order to install CERN Override:

1. Self-subscribe to the drupal-override-theme-users e-group. Its open so you don't have to request access, just join. 
2. Visit the repository. If you do not have access even after subscribing to the e-group in step 1, it is because it takes few hours for the e-group to synchronise with Gitlab.
3. Get the theme file using one of the following ways:
   1. If you are familiar with terminal:

      git clone https://gitlab.cern.ch/web-team/drupal/public/d8/themes/cernoverride.git

   2. If you are not familiar with terminal: Download manually the zip file with the theme files
4. Mount locally your website. If you don't know how to do it, our friends in IT have already written a nice tutorial.
5. Copy the cernoverride folder and place it under the /themes folder of your mounted website. As a result the structure should be like /themes/cernoverride
6. Visit /admin/appearance and set the CERN Override theme as default
7. Clear the caches. Done!

 

Using the CERN Override theme

The CERN Override theme inherits the CERN Theme and it is designed to make it easy for the website admins to expand the CERN Theme and its functionalities. You can apply any changes to the CERN Theme like overriding or creating CSS/JS files, creating templates etc.

The file structure of the CERN Override is similar to any other Drupal theme. More specifically, after downloading the theme you will notice that the followed structure looks like the image. As you will notice, the theme comes with several predefined files: theme.css, colors folder etc. Those files are created in order to override the already existing values so feel free to use them. The CERN override theme has bigger priority than the CERN theme meaning that if you apply any change in the styling of the theme, it will override the CERN theme. 

Example

To better understand the way CERN Override should be used, let's create a simple use case/example: I created a website and I want the header of my website to appear with a box-shadow. Since this option is not supported by the Appearance settings of the CERN Theme, I will have to override it and this can simply be done by installing the CERN Override theme.

The first thing I will have to do is to install the theme by following the steps as mentioned in the previous paragraphs. Since the box shadow constitutes a styling configuration, I will apply the changes in the css of the theme. The latter can simply be achieved by applying my changes in one of the pre-defined css files of the theme. I open the css/theme.css file and apply the following styling snippet:

.header{
     -webkit-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.75);
     -moz-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.75);
     box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.75);
}

After writing the code, I save the file, clear the website caches and reload the page to check the results. Done!

 

Creating your own css files

Additionally to what already mentioned, you are free to create your own CSS files. Especially in cases of websites that require numerous lines of styling code, you are highly advised to create your own file and structure the styling files based on your needs. If you want to create your own files, don't forget to declare them in the .libraries.yml file of the theme.