Basicstrap style theme sample for Sphinx¶

Inner theme preview¶

You can see the inner theme in real time If you select a theme.

Quick start¶

install(pip):

$ pip install sphinxjp.themes.basicstrap

setup your conf.py with:

extensions = ['sphinxjp.themes.basicstrap']
html_theme = 'basicstrap'

and run:

$ make html

then your will get this page’s style HTML output.

Links¶

download:	https://github.com/tell-k/sphinxjp.themes.basicstrap
repository:	https://github.com/tell-k/sphinxjp.themes.basicstrap
bug tracker:	https://github.com/tell-k/sphinxjp.themes.basicstrap/issues

Contents¶

conf.py sample¶

Sample and HTML theme options¶

# -*- coding: utf-8 -*-
#
# -- General configuration ----------------------------

source_suffix = '.rst'
master_doc = 'index'

project = u'sphinx theme for basicstrap style'
copyright = u'2015, tell-k'

version = '0.5.0'

# -- Options for HTML output --------------------------

extensions = ['sphinxjp.themes.basicstrap']
html_theme = 'basicstrap'

# -- HTML theme options for `basicstrap` style -------

html_theme_options = {

    # Set the lang attribute of the html tag. Defaults to 'en'
    'lang': 'en',
    # Disable showing the sidebar. Defaults to 'false'
    'nosidebar': False,
    # Show header searchbox. Defaults to false. works only "nosidber=True",
    'header_searchbox': False,

    # Put the sidebar on the right side. Defaults to false.
    'rightsidebar': False,
    # Set the width of the sidebar. Defaults to 3
    'sidebar_span': 3,

    # Fix navbar to top of screen. Defaults to true
    'nav_fixed_top': True,
    # Fix the width of the sidebar. Defaults to false
    'nav_fixed': False,
    # Set the width of the sidebar. Defaults to '900px'
    'nav_width': '900px',
    # Fix the width of the content area. Defaults to false

    'content_fixed': False,
    # Set the width of the content area. Defaults to '900px'
    'content_width': '900px',
    # Fix the width of the row. Defaults to false
    'row_fixed': False,

    # Disable the responsive design. Defaults to false
    'noresponsive': False,
    # Disable the responsive footer relbar. Defaults to false
    'noresponsiverelbar': False,
    # Disable flat design. Defaults to false.
    # Works only "bootstrap_version = 3"
    'noflatdesign': False,

    # Enable Google Web Font. Defaults to false
    'googlewebfont': False,
    # Set the URL of Google Web Font's CSS.
    # Defaults to 'http://fonts.googleapis.com/css?family=Text+Me+One'
    'googlewebfont_url': 'http://fonts.googleapis.com/css?family=Lily+Script+One',  # NOQA
    # Set the Style of Google Web Font's CSS.
    # Defaults to "font-family: 'Text Me One', sans-serif;"
    'googlewebfont_style': u"font-family: 'Lily Script One' cursive;",

    # Set 'navbar-inverse' attribute to header navbar. Defaults to false.
    'header_inverse': False,
    # Set 'navbar-inverse' attribute to relbar navbar. Defaults to false.
    'relbar_inverse': False,

    # Enable inner theme by Bootswatch. Defaults to false
    'inner_theme': False,
    # Set the name of innner theme. Defaults to 'bootswatch-simplex'
    'inner_theme_name': 'bootswatch-simplex',

    # Select Twitter bootstrap version 2 or 3. Defaults to '3'
    'bootstrap_version': '3',

    # Show "theme preview" button in header navbar. Defaults to false.
    'theme_preview': True,

    # Set the Size of Heading text. Defaults to None
    # 'h1_size': '3.0em',
    # 'h2_size': '2.6em',
    # 'h3_size': '2.2em',
    # 'h4_size': '1.8em',
    # 'h5_size': '1.4em',
    # 'h6_size': '1.1em',
}




###########################################################################
#          auto-created readthedocs.org specific configuration            #
###########################################################################


#
# The following code was added during an automated build on readthedocs.org
# It is auto created and injected for every build. The result is based on the
# conf.py.tmpl file found in the readthedocs.org codebase:
# https://github.com/rtfd/readthedocs.org/blob/master/readthedocs/doc_builder/templates/doc_builder/conf.py.tmpl
#


import importlib
import sys
import os.path
from six import string_types

from sphinx import version_info

# Get suffix for proper linking to GitHub
# This is deprecated in Sphinx 1.3+,
# as each page can have its own suffix
if globals().get('source_suffix', False):
    if isinstance(source_suffix, string_types):
        SUFFIX = source_suffix
    elif isinstance(source_suffix, (list, tuple)):
        # Sphinx >= 1.3 supports list/tuple to define multiple suffixes
        SUFFIX = source_suffix[0]
    elif isinstance(source_suffix, dict):
        # Sphinx >= 1.8 supports a mapping dictionary for mulitple suffixes
        SUFFIX = list(source_suffix.keys())[0]  # make a ``list()`` for py2/py3 compatibility
    else:
        # default to .rst
        SUFFIX = '.rst'
else:
    SUFFIX = '.rst'

# Add RTD Static Path. Add to the end because it overwrites previous files.
if not 'html_static_path' in globals():
    html_static_path = []
if os.path.exists('_static'):
    html_static_path.append('_static')

# Add RTD Theme only if they aren't overriding it already
using_rtd_theme = (
    (
        'html_theme' in globals() and
        html_theme in ['default'] and
        # Allow people to bail with a hack of having an html_style
        'html_style' not in globals()
    ) or 'html_theme' not in globals()
)
if using_rtd_theme:
    theme = importlib.import_module('sphinx_rtd_theme')
    html_theme = 'sphinx_rtd_theme'
    html_style = None
    html_theme_options = {}
    if 'html_theme_path' in globals():
        html_theme_path.append(theme.get_html_theme_path())
    else:
        html_theme_path = [theme.get_html_theme_path()]

if globals().get('websupport2_base_url', False):
    websupport2_base_url = 'https://readthedocs.org/websupport'
    websupport2_static_url = 'https://assets.readthedocs.org/static/'


#Add project information to the template context.
context = {
    'using_theme': using_rtd_theme,
    'html_theme': html_theme,
    'current_version': "latest",
    'version_slug': "latest",
    'MEDIA_URL': "https://media.readthedocs.org/",
    'STATIC_URL': "https://assets.readthedocs.org/static/",
    'PRODUCTION_DOMAIN': "readthedocs.org",
    'versions': [
    ("latest", "/en/latest/"),
    ],
    'downloads': [ 
    ("html", "//readthedocs.org/projects/sphinxjpthemesbasicstrap/downloads/htmlzip/latest/"),
    ],
    'subprojects': [ 
    ],
    'slug': 'sphinxjpthemesbasicstrap',
    'name': u'sphinxjp.themes.basicstrap',
    'rtd_language': u'en',
    'programming_language': u'words',
    'canonical_url': 'https://sphinxjpthemesbasicstrap.readthedocs.io/en/latest/',
    'analytics_code': 'None',
    'single_version': False,
    'conf_py_path': '/docs/',
    'api_host': 'https://readthedocs.org',
    'github_user': 'tell-k',
    'github_repo': 'sphinxjp.themes.basicstrap',
    'github_version': 'master',
    'display_github': True,
    'bitbucket_user': 'None',
    'bitbucket_repo': 'None',
    'bitbucket_version': 'master',
    'display_bitbucket': False,
    'gitlab_user': 'None',
    'gitlab_repo': 'None',
    'gitlab_version': 'master',
    'display_gitlab': False,
    'READTHEDOCS': True,
    'using_theme': (html_theme == "default"),
    'new_theme': (html_theme == "sphinx_rtd_theme"),
    'source_suffix': SUFFIX,
    'ad_free': False,
    'user_analytics_code': '',
    'global_analytics_code': 'UA-17997319-1',
    'commit': '5fc645a7',
}




if 'html_context' in globals():
    
    html_context.update(context)
    
else:
    html_context = context

# Add custom RTD extension
if 'extensions' in globals():
    # Insert at the beginning because it can interfere
    # with other extensions.
    # See https://github.com/rtfd/readthedocs.org/pull/4054
    extensions.insert(0, "readthedocs_ext.readthedocs")
else:
    extensions = ["readthedocs_ext.readthedocs"]

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¶

Fixed layout¶

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

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-solar (bootstrap_version 3 only)
- bootswatch-spacelab
- bootswatch-paper (bootstrap_version 3 only)
- bootswatch-sandstone (bootstrap_version 3 only)
- bootswatch-spruce (bootstrap_version 2 only)
- bootswatch-superhero
- bootswatch-united
- bootswatch-darkly(bootstrap_version 3 only)
- bootswatch-flatly
- bootswatch-lumen (bootstrap_version 3 only)
- bootswatch-yeti(bootstrap_version 3 only)
- geo-bootstrap (bootstrap_version 2 only)

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:`fa fa-home`
* :fonticon:`fa fa-home fa-large`
* :fonticon:`fa fa-home fa-muted`
* :fonticon:`fa fa-home fa-spin`
* :fonticon:`fa fa-home fa-border`
* :fonticon:`fa fa-home fa-border icon-2x`
* :fonticon:`fa fa-home fa-border icon-3x`
* :fonticon:`fa fa-home fa-border icon-4x`

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

Sample Document¶

Admonitions (Docutils origin)¶

Danger

This is sample of admonition directive for “Danger”.

Header1	Header2	Header3	Header4
row1, cell1	cell2	cell3	cell4
row2 …	…	…
…	…	…

Admonitions (Sphinx Additional)¶

Headings ¶

This is a first level heading (h1).

Sub-Heading ¶

This is a second level heading (h2).

Sub-Sub-Heading ¶

This is a third level heading (h3).

Code ¶

The Sphinx Bootstrap Theme uses Bootstrap styling for inline code text and

multiline
code text

It also works with existing Sphinx highlighting:

<html>
  <body>Hello World</body>
</html>

def hello():
    """Greet."""
    return "Hello World"

/**
 * Greet.
 **/
function hello(): {
  return "Hello World";
}

Footnotes ¶

I have footnoted a first item [2] and second item [3].

Footnotes

[2]	My first footnote.

[3]	My second footnote.

[1]	A footnote contains body elements, consistently indented by at least 3 spaces. This is the footnote’s second paragraph.

[4]	Footnotes may be numbered, either manually (as in [1]) or automatically using a “#”-prefixed label. This footnote has a label so it can be referred to from multiple places, both as a footnote reference ([4]).

[5]	This footnote is numbered automatically and anonymously using a label of “#” only.

[*]	Footnotes may also use symbols, specified with a “” label. Here’s a reference to the next footnote: [].

[†]	This footnote shows the next symbol in the sequence.

Citation ¶

Citation references, like [CIT2002]. Note that citations may get rearranged, e.g., to the bottom of the “page”.

Citation labels contain alphanumerics, underlines, hyphens and fullstops. Case is not significant.

Given a citation like [this], one can also refer to it like this.

[CIT2002]

A citation (as often used in journals).

[this]

here.

Comments ¶

An “empty comment” does not consume following blocks. (An empty comment is “..” with blank lines before and after.) ..

So this block is not “lost”, despite its indentation.

Tables ¶

Header row, column 1 (header rows optional)	Header 2	Header 3	Header 4
body row 1, column 1	column 2	column 3	column 4
body row 2	…	…

+------------------------+------------+----------+----------+
| Header row, column 1   | Header 2   | Header 3 | Header 4 |
| (header rows optional) |            |          |          |
+========================+============+==========+==========+
| body row 1, column 1   | column 2   | column 3 | column 4 |
+------------------------+------------+----------+----------+
| body row 2             | ...        | ...      |          |
+------------------------+------------+----------+----------+

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

=====  =====  =======
A      B      A and B
=====  =====  =======
False  False  False
True   False  False
False  True   False
True   True   True
=====  =====  =======

CSV Table¶
Treat	Quantity	Description
Albatross	2.99	On a stick!
Crunchy Frog	1.49	If we took the bones out, it wouldn’t be crunchy, now would it?
Gannet Ripple	1.99	On a stick!

.. csv-table:: CSV Table
   :header: "Treat", "Quantity", "Description"
   :widths: 15, 10, 30

   "Albatross", 2.99, "On a stick!"
   "Crunchy Frog", 1.49, "If we took the bones out, it wouldn't be
   crunchy, now would it?"
   "Gannet Ripple", 1.99, "On a stick!"

List Table¶
Treat	Quantity	Description
Albatross	2.99	On a stick!
Crunchy Frog	1.49	If we took the bones out, it wouldn’t be crunchy, now would it?
Gannet Ripple	1.99	On a stick!

.. list-table:: List Table
   :widths: 15 10 30
   :header-rows: 1

   * - Treat
     - Quantity
     - Description
   * - Albatross
     - 2.99
     - On a stick!
   * - Crunchy Frog
     - 1.49
     - If we took the bones out, it wouldn't be
       crunchy, now would it?
   * - Gannet Ripple
     - 1.99
       - On a stick!

Grid ¶

A “bordered” grid table:

Header1	Header2	Header3	Header4
row1, cell1	cell2	cell3	cell4
row2 …	…	…
…	…	…

which uses the directive:

.. cssclass:: table-bordered

Simple ¶

A simple “striped” table:

H1	H2	H3
cell1	cell2	cell3
…	…	…
…	…	…

which uses the directive:

.. cssclass:: table-striped

And a “hoverable” table:

H1	H2	H3
cell1	cell2	cell3
…	…	…
…	…	…

which uses the directive:

.. cssclass:: table-hover

Mix ¶

Header1	Header2	Header3	Header4
row1, cell1	cell2	cell3	cell4
row2 …	…	…
…	…	…

which uses the directive:

.. cssclass:: table-bordered table-striped table-hover

Structural Elements ¶

Section Title ¶

That’s it, the text just above this line.

Transitions ¶

Here’s a transition:

It divides the section.

Body Elements ¶

Paragraphs ¶

A paragraph.

Bullet Lists ¶

A bullet list
- Nested bullet list.
- Nested item 2.
Item 2.

Paragraph 2 of item 2.
- Nested bullet list.
- Nested item 2.
  - Third level.
  - Item 2.
- Nested item 3.

Enumerated Lists ¶

Arabic numerals.
1. lower alpha)
  1. (lower roman)
    1. upper alpha.
      1. upper roman)
Lists that don’t start at 1:
1. Three
2. Four
1. C
2. D
1. iii
2. iv
List items may also be auto-enumerated.

Definition Lists ¶

Term

Definition

Term : classifier

Definition paragraph 1.

Definition paragraph 2.

Term

Definition

Field Lists ¶

what:

Field lists map field names to field bodies, like database records. They are often part of an extension syntax. They are an unambiguous variant of RFC 2822 fields.

how arg1 arg2:

The field marker is a colon, the field name, and a colon.

The field body may contain one or more body elements, indented relative to the field marker.

Option Lists ¶

For listing command-line options:

`-a`	command-line option “a”
`-b file`	options can have arguments and long descriptions
`--long`	options can be long also
`--input=file`	long options can also have arguments
`--very-long-option`
	The description can also start on the next line. The description may contain multiple body elements, regardless of where it starts.
`-x, -y, -z`	Multiple options are an “option group”.
`-v, --verbose`	Commonly-seen: short & long options.
`-1 file, --one=file, --two file`
	Multiple options with arguments.
`/V`	DOS/VMS-style options too

There must be at least two spaces between the option and the description.

Literal Blocks ¶

Literal blocks are indicated with a double-colon (“::”) at the end of the preceding paragraph (over there -->). They can be indented:

if literal_block:
    text = 'is left as-is'
    spaces_and_linebreaks = 'are preserved'
    markup_processing = None

Or they can be quoted without indentation:

>> Great idea!
>
> Why didn't I think of that?

Line Blocks ¶

This is a line block. It ends with a blank line.

Each new line begins with a vertical bar (“|”).

Line breaks and initial indents are preserved.

Continuation lines are wrapped portions of long lines; they begin with a space in place of the vertical bar.

The left edge of a continuation line need not be aligned with the left edge of the text above it.

This is a second line block.

Blank lines are permitted internally, but they must begin with a “|”.

Take it away, Eric the Orchestra Leader!

A one, two, a one two three four

Half a bee, philosophically,

must, ipso facto, half not be.

But half the bee has got to be,

vis a vis its entity. D’you see?

But can a bee be said to be

or not to be an entire bee,

when half the bee is not a bee,

due to some ancient injury?

Singing…

Block Quotes ¶

Block quotes consist of indented body elements:

My theory by A. Elk. Brackets Miss, brackets. This theory goes as follows and begins now. All brontosauruses are thin at one end, much much thicker in the middle and then thin again at the far end. That is my theory, it is mine, and belongs to me and I own it, and what it is too.

—Anne Elk (Miss)

Doctest Blocks ¶

>>> print 'Python-specific usage examples; begun with ">>>"'
Python-specific usage examples; begun with ">>>"
>>> print '(cut and pasted from interactive Python sessions)'
(cut and pasted from interactive Python sessions)

These are just a sample of the many reStructuredText Directives. For others, please see http://docutils.sourceforge.net/docs/ref/rst/directives.html.

Topics, Sidebars, and Rubrics ¶

Topic Title

This is a topic.

This is a rubric

Compound Paragraph ¶

This paragraph contains a literal block:

Connecting... OK
Transmitting data... OK
Disconnecting... OK

and thus consists of a simple paragraph, a literal block, and another simple paragraph. Nonetheless it is semantically one paragraph.

This construct is called a compound paragraph and can be produced with the “compound” directive.

Comments ¶

Here’s one:

(View the HTML source to see the comment.)

Admonitions with inner blocks ¶

Tip

This is sample of admonition directive for “Tip” with a bullet list

list item A
list item B
list item C

Tip

This is sample of admonition directive for “Tip” with a numbered list

list item 1
list item 2
list item 3

Tip

This is sample of admonition directive for “Tip” with a definition list

Term

Definition

Term : classifier

Definition paragraph 1.

Definition paragraph 2.

Term

Definition

Tip

This is sample of admonition directive for “Tip” with a code

single line of code without line numbers

Tip

This is sample of admonition directive for “Tip” with a code with line numbers

line 1
line 2

Tip

This is sample of admonition directive for “Tip” with a table

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

Tip

This is sample of admonition directive for “Tip” with a block quote

My theory by A. Elk. Brackets Miss, brackets. This theory goes as follows and begins now. All brontosauruses are thin at one end, much much thicker in the middle and then thin again at the far end. That is my theory, it is mine, and belongs to me and I own it, and what it is too.

—Anne Elk (Miss)

Note

This is sample of admonition directive for “Note” with a table

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

Note

This is sample of admonition directive for “Note” with a block quote

My theory by A. Elk. Brackets Miss, brackets. This theory goes as follows and begins now. All brontosauruses are thin at one end, much much thicker in the middle and then thin again at the far end. That is my theory, it is mine, and belongs to me and I own it, and what it is too.

—Anne Elk (Miss)

Warning

This is sample of admonition directive for “Warning” with a table

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

Warning

This is sample of admonition directive for “Warning” with a block quote

My theory by A. Elk. Brackets Miss, brackets. This theory goes as follows and begins now. All brontosauruses are thin at one end, much much thicker in the middle and then thin again at the far end. That is my theory, it is mine, and belongs to me and I own it, and what it is too.

—Anne Elk (Miss)

Error

This is sample of admonition directive for “Error” with a table

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

Error

This is sample of admonition directive for “Error” with a block quote

My theory by A. Elk. Brackets Miss, brackets. This theory goes as follows and begins now. All brontosauruses are thin at one end, much much thicker in the middle and then thin again at the far end. That is my theory, it is mine, and belongs to me and I own it, and what it is too.

—Anne Elk (Miss)

This is sample of admonition directive for “Admonition” with a table

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

This is sample of admonition directive for “Admonition” with a block quote

My theory by A. Elk. Brackets Miss, brackets. This theory goes as follows and begins now. All brontosauruses are thin at one end, much much thicker in the middle and then thin again at the far end. That is my theory, it is mine, and belongs to me and I own it, and what it is too.

—Anne Elk (Miss)

Headings ¶

Display line numbers:

 <html>
   <body>Hello World</body>
 </html>

Long lines ¶

Here are very long lines with

A very very very, really very very lery, really really very, super mega giga long long very long absurd long line of text with even more text comming after this full-stop . Told ya! More and more and more.

with line numbers

A very very very, really very very lery, really really very, super mega giga long long very long absurd long line of text with even more text comming after this full-stop . Told ya! More and more and more.

with line numbers and caption

A caption¶

A very very very, really very very lery, really really very, super mega giga long long very long absurd long line of text with even more text comming after this full-stop . Told ya! More and more and more.

Basicstrap style theme sample for Sphinx¶

Inner theme preview¶

Quick start¶

Links¶

Contents¶

conf.py sample¶

Sample and HTML theme options¶

Customize the design¶

Sidebar layout¶

Right sidebar¶

Change sidebar width¶

No sidebar¶

Fixed layout¶

Fixed width of Navigation Bar¶

fixed with of Content Area¶

Inverse color¶

Responsive design¶

Inner design theme¶

Web Font¶

Font Icon¶

Sample Document¶

History and Authors¶