Customize the design

By setting the html_theme_options in your conf.py, you can change the look and feel some flexibility. Because it contains an example of a simple configuration, please try to be helpful.

Fixed layout

Fixed width of Navigation Bar

html_theme_options = {
  'nav_fixed': True,
  'nav_width': '700px',
}
_images/navbar_fixed.png

Figure4: navbar fixed

fixed with of Content Area

html_theme_options = {
  'content_fixed': True,
  'content_width': '700px',
}
_images/content_fixed.png

Figure5: content fixed

Inverse color

html_theme_options = {
  'header_inverse': True,
  'relbar_inverse': True,
}
_images/navbar_inverse.png

Figure6: inverse color

Caution

Caution when upgrading from 0.1.1 to 0.2.0

  • In version 0.1.1, the header color was black in the default, it has become white in 0.2.0.
  • If you like the black color header, please set to True the ‘header_inverse’ option.

Responsive design

_images/smartphone.png

Figure7: responsive design

If you want to quit Responsive design, please set to True “noresponsive” option.

html_theme_options = {
  'noresponsive': True,
}

Inner design theme

Bootswatch design themes are available.

html_theme_options = {
  'inner_theme': True,
  'inner_theme_name': 'bootswatch-amelia',
}
_images/bootswatch-amelia.png

Figure8: content fixed

  • avalible inner themes
  • bootswatch-amelia
  • bootswatch-cerulean
  • bootswatch-cosmo
  • bootswatch-cyborg
  • bootswatch-journal
  • bootswatch-readable
  • bootswatch-simplex
  • bootswatch-slate
  • bootswatch-spacelab
  • bootswatch-spruce
  • bootswatch-superhero
  • bootswatch-united

Web Font

Google Web Fonts are available.

html_theme_options = {
  'googlewebfont': True,
  'googlewebfont_url': 'http://fonts.googleapis.com/css?family=Text+Me+One',
  'googlewebfont_style': "font-family: 'Text Me One', sans-serif",
}
_images/webfont.png

Figure9: content fixed

Font Icon

Font Awesome are available.

Please write in this format.

* :fonticon:`icon-home`
* :fonticon:`icon-home icon-large`
* :fonticon:`icon-home icon-muted`
* :fonticon:`icon-home icon-spin`
* :fonticon:`icon-home icon-border`
* :fonticon:`icon-home icon-border icon-2x`
* :fonticon:`icon-home icon-border icon-3x`
* :fonticon:`icon-home icon-border icon-4x`