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.cssis 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.csscontains Codex-specific customizations. This file modifies, for one thing, the font used on the documentation.
public/assets/css/prettify/freshcut.cssdefines 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.phpis the main layout file.
app/views/partials/navbar.blade.phpcontains the navbar structure.
app/views/partials/navbar_nav.blade.phpcontains the actual navbar items.
app/views/partials/search_form.blade.phpcontains 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
../../fontsto 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.
codex.cssto 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
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.
- November 2022
- Incremental Progress
- August 2021
- Self-Hosting for Fun and Personal Freedom
- July 2019
- Closing Channels Twice in Go
- May 2019
- March 2018
- Refactoring, Now With Generics!
- November 2017
- Packages 3.2 released!
- September 2017
- Introducing the MOTKI CLI
- July 2017
- Decoupling Yourself From Dependencies
- May 2017
- Model Rocketry Update
- April 2017
- Dynamic DNS with homedns