Nov '14


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!

Setting up Codex? Check out my previous blog post about installing and configuring Codex.

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.

The URLs to the glyphicons fonts also needs to be modified. Change ../fonts to ../../fonts to fix this issue.

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.

You'll also need to change any references to the default source code font "Source Code Pro" in codex.css to change the font of highlighted code.

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.



No comments yet! Say something.