CERN Accelerating science

Close menu

CERN Theme

The theme is basically the look and feel of your website. It specifies regions in which you assign content, placement of menus and key elements of the website. The theme contains templates (which can be also specialised for specific content types), style sheets, and set of libraries, f.e. Javascript for advanced animations. For CERN usage, CERN Theme is provided in order to set a similar look & feel to the websites of the organisation.

The CERN Theme is the recommended Drupal theme because it defines a common Look & Feel for the CERN websites. In other words, the websites that use the CERN Theme share specific common characteristics which relate to the styling, the appearance and specific features which are supported by the CERN Theme. 

In addition, the theme inherits the Drupal Bootstrap theme, which consequently means that it includes all the elements of the Bootstrap theme. 

How to enable the CERN theme

The CERN Theme is placed in the CERN infrastructure, meaning that you don't have to actually install the theme in the website. When you get a new CERN website, the theme is already installed and enabled. If for any reason the theme is not enabled, you can enable by clicking on "Set as default" option in the Appearance page.

 

Set as default option for theme

 

Regions

The CERN Theme is constituted of 9 theme regions: Header, Left Sidebar, Main Content, Right Sidebar, Content Footer, Footer Column 1, Footer Column 2, Footer Column 3, Footer Column 4. They are designed in such way to satisfy most needs in terms of content placement. 

Color Settings

Another important feature of the CERN Theme are the options provided in the appearance page. If you browse the settings of CERN Theme in /admin/appearance/settings/cernclean , you will find a set of options which define how all the already mentioned elements will look like. More Specifically, you have the option to set up the color palette of your website for a pre-defined set of elements like headers, footers, tables, tabs etc.

 

Element Description
Header Background Background color of the header
Header: Site name text Site name color
Menu: Link Color of menu links
Body: text Color of the text within the body
Body: link Color of the links within the body
Body: link on hover Color of the link within the body when the user hovers over the link.
Body: Background Background color of body
Body: Line in u tag & list bullets Underline color and list bullets color
Body: Caption text Caption text color within body
Tabs: Active tab background Background color of active tab (currently selected tab)
Tabs: Active tab text Text color of active tab
Tabs: Inactive tab background Background color of inactive tab
Tabs: Inactive tab text Text color of inactive tab
Table: Background Background color of tables
Table: Header background Header background of tables
Table: Header text Header text of tables
Table: Rows even background Background color of even rows
Table: Rows odd background Background color of odd rows
Table: Rows text Text color of tables' rows
Table: Footer background Background color of tables' footer
Table: Footer text Text color of tables' footer
Icons: Slider navigation active Color of active navigation bulltes
Icons: Slider navigation inactive Color of inactive navigation bullets
Icons: Chevrons & animated underline Color of chevrons and animated line under links
Icons: Blockquotes Color of blockquotes icon
Icons: Slider navigation arrows active Active navigation arrows
Icons: Slider navigation arrows inactive Inactive navigation arrows
Views: Card background Background color of cards.
Views: Card title Card title color of views
Views: Card text Card text color of views
Taxonomy terms: Tag Background Background color of taxonomy terms
Taxonomy terms: Tag text Text color of taxonomy terms
Buttons: border Border color of buttons
Buttons / Primary: background Background color of primary buttons
Buttons / Primary: text Text color of primary buttons
Buttons / Primary: background hover Background color on hover of primary buttons
Buttons / Primary: text hover Text color on hover of primary buttons
Buttons / Secondary: background Background color of secondary buttons
Buttons / Secondary: text Text color of secondary
Buttons / Secondary: background hover Background color on hover of secondary buttons
Buttons / Secondary: text hover Text color on hover of secondary buttons
Footer: Background Background color of footer
Footer: Text Text color of footer
Footer: Link Link color of footer
Footer: Link on hover Link color on hover

 

The right side of the page is used to display a preview of how the website will look like if the current colors were chosen.

 

Logo / Site Name / Site Slogan settings

By default the options regarding the site logo and name are placed under the Global Settings of the Appearance Menu. However, in order to modify those settings while using the CERN theme, you have to change them in the Appearance settings of the theme.

More analytically, if you navigate to /admin/appearance/settings/cernclean and scroll to the bottom of the page, you will mention a group of settings called Display Site Settings. 

  1. Show Site name: Whether or not you want the site name to be rendered
  2. Show Site slogan: Whether or not you want the site slogan to be rendered
  3. Show Search link on Main menu: Whether or not you want the search link on main menu
  4. Show Dark LOGO on footer: Whether or not you want a dark logo on footer (by default it’s light). If you chose a light-colored background on your footer, then we suggest this option to be checked so that the logo will be visible.
  5. Upload logo: Option to upload a custom logo.

Note: If you apply a logo then the logo will be rendered automatically.

     

     

    Styling

    The styling is defined by very specific elements which are designed in such way to constitute the look & feel of the CERN theme. 

    Header 

    The current header version supports up to two levels of menu items. The header items are rendered using a specific font, size and animation. More specifically, whenever the user hovers over a menu item, an underlinement animation is triggered in order to show the current pointer position. In a similar way, when a user is located in a page, the underlining shows where the user is located. 

    To render the header, you need to construct the menu on the "Main Navigation" menu of your website and place the "Main Navigation" block on the Header region. The menu is then automatically rendered in the default way.

     

    Footer

    The footer constitutes a branding element of the websites that use the CERN Theme. The common elements of the Footer are the CERN Logo, the Copyright text and the 4 regions of the footer.  The footer can be used to place quicklinks in order to help the users navigate to external websites. It can also be used to place links of Social Media. The latter is easily achievable by using the CERN Full HTML text format along with the CERN font.

    To create footer menus, you need to follow the steps below:

    1. Create a Menu in /admin/structure/menu

    2. Add the menu items in the menu

    3. Place the menu in one of the 4 footer regions/columns. This can be achieved by visiting /admin/structure/block and click on "Place Block" in region that you want to place it.

    4. Done!

    At this point it is important to mention that menu blocks placed under the footer are rendered in a specific way: on hover they are underlined and the chevron next to the link casts a specific animation.

     

    Sidebars

    Sidebars are mostly used to place custom blocks and/or menu blocks. The custom blocks are normally rendered. Menu block have styles applied like the following example.

    Example of a block placed under the theme sidebar region
    Example of a block placed under the theme sidebar region

    Another important note is about the color inheritance of menu blocks under the sidebars. The colors are inherited from the color settings:

    • Links => BODY: link
    • Links on hover => BODY: link on hover 
    • Chevron and underline => ICONS: Chevrons & animated underline

    Blocks with Shadowed borders

    This feature was deployed in version 2.5.0 of CERN Base Theme.

    The blocks under sidebars also give possibility to add a shadow style around the blocks placed under sidebars like example below.

    Example of block with shadowed border
    Example of block with shadowed border

    In order to achieve this:

    1. Install and enable the Block Class moduleIt is a stable module so no worries about it.
    2. Navigate to the block settings of your theme and add the value shadow-block in the CSS Class field. If you dont see the field then repeat step 1.
      Adding shadow-block in CSS class field
      Step 2: Add shadow-block in CSS class field
    3. Save block and clear caches.

    Related FAQs