CERN Accelerating science

Close menu
CERN Full HTML

Useful Info


Constitutes a text format designed for the needs of CERN users. After enabling the module, the text format automatically appears as a text format in the CKEditor options.

Package Maintainers:
The CERN Web Team
Package Version:
v1.00

Documentation

 

Installation and Enabling

The CERN Full HTML text format is encapsulated in a module, in order to follow the official Drupal strategy on installing and maintaining features. The module is placed in the CERN Drupal Infrastructure so you don't have to install it.

Enabling the module

The enabling process of the CERN Full HTML module does not differentiate than any other CERN module:

  1. open /admin/modules
  2. Check CERN Full HTML Format module
  3. Click "Save configuration"
  4. Done! Dont forget to clear the caches

 

Configuring the editor

The configuration page of the CERN Full HTML text format is located in the configuration page  of the text formats under /admin/config/content/formats. In this page you can choose which roles will be able to use the text format, which buttons will be included and with what order.

 

The editor

The CERN Full HTML is a complete CKEditor text format. It consists of different plugins that can be used in order to style your text. More analytically the 3 main features of the CERN Full HTML text that differentiate it from other formats are: CDS Media plugin, Text Styles and CERN Font plugin.

 

CDS Media plugin

The CDS Media plugin enables you to add images and videos from CDS to your articles. In order to enable it just drag and drop the CDS Media plugin from the "Available buttons" category to the "Active toolbar" buttons.

Using the CDS Media plugin

After placing the plugin in the CERN Full HTML text it appears in the available buttons. In order to use it, just click the plugin and add the CDS record ID of the image/video or the collection ID of the collection that you wish to add.

Adding individual images/videos

 

CDS photos are placed in cds.cern.ch. The record ID of each image is placed under the image when you visit the image's collection. In image ... you can clearly notice the record IDs under a CDS collection. 

CDS videos are stored in videos.cern.ch. The video record ID is placed on the upper right corner of the video description. Just click the box and the ID will be copied.

After finding and pasting the record ID, you will be prompted to fill some fields regarding the record that you are about to add. Most of the fields will be filled from CDS but you are welcome to fill more.

Adding collections

The CDS collection ID is placed on the top right corner of the collection. After finding and pasting the collection ID, you will be prompted to fill some fields regarding the record that you are about to add. Most of the fields will be filled from CDS but you are welcome to fill more.

Text Styles

The CERN Full HTML offers a very useful feature in order to stylize your text without having to modify the HTML code of it.

You apply them by selecting the text you want to have a certain style, then choosing it from the drop down list in the CK editor.

If you only want some text to have a style applied, then you can use the break-columns style on the text after this or clear paragraphs and that will remove any of the styles you’ve applied.

Cleaners Styles

The ‘Cleaners’ are probably the style you will use the most. They remove the paragraphs and styles applied to text or images to make sure it sits nicely.

Style Description
Style Description
Break columns

If you are building text in columns, with aligned images or blockquotes then you need to add in the break columns to be able to continue to work with the text in a single column. This ‘breaks’ the column structure you have applied to text.

It makes sense to have lots of Break columns throughout a large piece of text, breaking it up and it means you can align some text in different ways.

If something isn’t aligning then you can use the break column to make it.

Clear Paragraphs styles

This removes the styles applied e.g. the columns or any blockquote. You can use it to get text to wrap around an image. E.g.

Clear Blockquote styles

You will require this if the blockquote sends the lines from the quote across the entire page. If you previously added an style to a paragraph or to a blockquote, it remove these styles.

Hide paragraph in mobile view

In the headers, often we use a few /br tags or paragraphs to try and align the text more centrally. But when you see this on mobile view it looks odd and aligns the text weirdly. Add this style to the paragraphs so that they look nice in mobile view.

 

Column Paragraphs

The column paragraph styles are vital for putting the text into the correct width for users to scan it. ALL the text in every story and landing page should have one of these columns applied.

Style Description
Style Description

Right Col. / Breakout IMG

This puts the text on the right, with the image on the left breakout out of the margins You need to apply the class ‘breakout-right’ to the CDS image also e.g.

Left Col. / Breakout IMG

This puts the text on the left and an image floating on the right. You must also apply the style ‘breakout-right to the image on the CDS wizard. 

Right Col. / align IMG

This positions the text on the right, with an image in a column to the left, aligned with the text. It makes the text column slightly narrower as the image is more central.

Left Col. / align IMG

This aligns the text on the left, with an image on the right with the CSS class ‘align-right’ applied.

Block Quotes

You use these styles to align the blockquotes into the column structure.

Style Description
Style Description
Right BQ / breakout IMG Places text and blockquote on the right and image on the left.
Left BQ / breakout IMG Places text and blockquote on the left and image on the right.
Right BQ / align IMG

Places text and blockquote on the right and image on the left, while image and text are aligned.

Note: Sometimes when applying the ‘Clear paragraphs’ style it can look weird in the CK editor (see below) but as you can see from the Source code, and the image above it still renders properly.

Left BQ / align IMG

By selecting the text, and applying ‘left BQ/ align IMG’ you can have a blockquote next to an image. Below I ‘cleared the paragraphs’ of the text below the blockquote, which has made it wrap up next to the image.

 

Others

You use these styles to align the blockquotes into the column structure.

 

Style Description
Style Description
Small margin left separator columns

Adds a small margin left to the paragraph (more or less 30px wide) if you want to add a margin in a column next to to another column. Useful for lists next to an image.

hide-inline-text-in-mobile

Like Hide paragraphs, it’s used for example in the text of headers, where you add lots of breaklines before the text, and in mobile devices it looks weird. Use this style to hide those breaklines in mobile view.

Tags Adds a highlight effect behind the selected texts, just like tags.
UPPERCASE TAGS Add the art direction of a tag to a piece of text (use span tag). The highlighted colour is the colour set in the theme settings.
Custom lines

Adds a long line into the text. Most commonly used in the hero header on the homepage to break up the questions.

 

Others

These add the column style to a bullet point list.

Style Description
Style Description
Right UL / breakout IMG Breaks-out an image on the left when the bullet point list in on the right.

Left UL / breakout IMG

Breaks-out an image on the right when the bullet point list in on the left.
Right UL / align IMG Breaks-out an image on the left when the bullet point list in on the right and aligns the image with the list.
Left UL / align IMG Breaks-out an image on the right when the bullet point list in on the left and aligns the image with the list.

 

CERN Font

 

CERN Font provides a set of icons which can be added through typing.

In order to use the CERN Font, you need to just expand the font selection and choose the icons font (it's most of the times the last on the list.

After selecting the font, you can use your keyboard to type icons instead of letters. In this way you are able to add icons in your text. You can find a table of the available icons below.

 

Keymap of cern font icons

Related FAQs