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.

Sidebar layout

Right sidebar

If you want to place sidebar to the right, please change “rightsidebar” option.

html_theme_options = {
    'rightsidebar': True,
}

Figure1: right sidebar

Change sidebar width

If you want to change the width of the sidebar, please change “sidebar_span” option.

Using a Grid system of Twitter Bootstrap.

html_theme_options = {
    'sidebar_span': 6, # 1(min) 〜 12(max)
}

Figure2: change sidebar with

No sidebar

html_theme_options = {
    'nosidebar': True,
}

Figure3: no sidebar

Fixed layout

Fixed width of Navigation Bar

html_theme_options = {
  'nav_fixed': True,
  'nav_width': '700px',
}

Figure4: navbar fixed

fixed with of Content Area

html_theme_options = {
  'content_fixed': True,
  'content_width': '700px',
}

Figure5: content fixed

Inverse color

html_theme_options = {
  'header_inverse': True,
  'relbar_inverse': True,
}

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

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.
• Geo design themes are available.

html_theme_options = {
  'inner_theme': True,
  'inner_theme_name': 'bootswatch-amelia',
}

Figure8: inner theme

• 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
• bootswatch-flatly
• geo-bootstrap

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",
}

Figure9: webfont

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`