Customizing Your Codex Installation

Codex is a great tool for quickly publishing documentation. But what if you want to customize the look and feel? Well, Codex makes that simple too!

Codex is based on bootstrap which means customization is a breeze. It uses a theme available freely on Bootswatch called Flatly. It is a simple feat to switch out the default theme for your own.

• public/assets/css/bootswatch/flatly.min.css is the main theme file. The bulk of Codex's default styling comes from this file. It is the compiled Flatly theme from Bootswatch.
• public/assets/css/codex.css contains Codex-specific customizations. This file modifies, for one thing, the font used on the documentation.
• public/assets/css/prettify/freshcut.css defines the syntax highlighting theme.

If you find you need to modify more than just CSS, you can do so by directly modifying Codex's templates.

• app/views/layouts/master.blade.php is the main layout file.
• app/views/partials/navbar.blade.php contains the navbar structure.
• app/views/partials/navbar_nav.blade.php contains the actual navbar items.
• app/views/partials/search_form.blade.php contains the search form.

All of these are files are simply HTML with a little bit of Blade templating sprinkled in. 

Installing a new Bootswatch theme

Changing out the stock Flatly theme for another Bootswatch theme involves simply downloading the bootstrap.min.css for your theme from the Bootswatch website. Replace the contents of flatly.min.css with your new file. If you're a stickler, you can rename the file, too. Just make sure to update the associated reference in master.blade.php.

Customizing syntax highlighting

The default syntax highlighting goes well with almost any theme, however, you might want to modify yours to match your theme a bit better. Open up freshcut.css and change the font, colors, background color, and anything else to meet your needs.

Replacing the default font

The default Codex theme in codex.css specifies custom web fonts. Remove or replace the font-family declarations in the body, h1-h5 tags to modify the Codex copy font. 

That's it! Check out the Nice framework documentation for an example of what's possible with just a few minutes' work.