You are viewing a degraded version of this page. Please use a supported browser for the best reading experience.

How To Use Codex Themes

The built-in themes on Codex all derive from a common set of functionality that helps you layout different parts of your page. Here we walk through various class names that you can use to structure your articles and make them a delight for readers.

To see how the individual themes will make your articles appear as well as theme-specific variations on these features, please see the pages dedicated to each theme later on in this documentation. If you’d like to apply special functionality like animations or scroll changes, we recommend you take a look at the built-in effects libraries.

Share Menu

Social media is a critical way to gather attention to your article and you may decide it’s a good idea to prompt readers to share the story on their social channels. A simple share menu with buttons for Facebook, Twitter and email can be added to the page by typing {themes/share} anywhere in your article with the curly brackets. It will look something like this:

The partial themes/share could not be found

You can also add the networks individually or as a group inline with the text, as described in the text section of the documentation.

Sizing and Positioning Images

By default, images and videos will appear at the same width as the text of your article. However, the themes set a max-height such that the image doesn’t show up any taller than the browser window so the image won’t be cut off by the edge of the window. This means that if you have a very tall image and .

Also the size of the original image that you uploaded comes into play here in mind that unless you .

The following classes can be used to control your images:

These classes are actually not limited to images and videos. They will most likely work on almost anything.

Text On Images

The themes have styles for the <figcaption> element which is the default element for text following images. If you want to style image captions differently, feel free to use any other element.

When you take advantage of Codex’s ability to put blocks of text on top of images, you may need to a bit more control of where text goes inside the blocks. To control text vertically, we use classes that follow the properties of Flexbox, the CSS layout module used to accomplish this.

To control the layout horizontally, we use the CSS text-align property, simplified in these three utility classes:

If you the layout you desire can’t be accomplished with these values, you probably need to nest the text inside another element and position that instead.

By default, white text is used on images however if you have a light image, this may be completely unreadable. Add the class dark-text onto either the image or the text to accomplish this.

Moving Paragraphs

In all the themes text will be more or less centered on wide screens (we limit paragraph widths with max-width to prevent long lines that would be difficult to read).

To add visual interest to your design, you can also move paragraphs right and left in the same way as images. Individual paragraphs can be moved with the classes right and left.

To move a whole group of paragraphs right or left nest them inside a section element if they are a discreet section of the story. If you’re just moving them for layout purposes, use a div element. Then add the same right or left class to the containing element.

Position Sticky

Now the fun starts. Above we saw how to move paragraphs to one side or the other of the page. This makes it easy to put an image on the opposite side and have it travel as the readers scrolls using the fx/sticky effect from the Codex effects library. This lets us to use the CSS property position: sticky; in browsers where it’s not supported yet.

The built-in themes were designed to work with fx/sticky just by adding the class sticky to whatever it is you want to stick.

Here’s an example of how we might do that in the editor:

And here’s the effect it will produce on the page:

Photo Grid

Changing Image Aspect Ratios

Tables

Tables aren’t used all that often in news articles, but they’re a great feature of HTML and the Codex themes support them. You can create tables using the table element and nesting the cells inside tr elements (which stands for table row). The built-in themes have the following classes for tables: