The CERN Full HTML offers a very useful feature in order to style 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. |
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. |
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. |