matplotlib.github.com/sampledoc/custom_look.html at main · matplotlib/matplotlib.github.com

History

171 lines (150 loc) · 11.8 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Customizing the look and feel of the site — sampledoc 1.0 documentation</title>

var DOCUMENTATION_OPTIONS = {

URL_ROOT: './',

VERSION: '1.0',

COLLAPSE_INDEX: false,

FILE_SUFFIX: '.html',

HAS_SOURCE: true,

SOURCELINK_SUFFIX: '.txt'

};

</script>

</head>

<a href="index.html"><h1 style="font-size: 3em;">Sampledoc</h1></a>

</div>

<h3>Navigation</h3>

<ul>

<a href="genindex.html" title="General Index"

accesskey="I">index</a></li>

<a href="extensions.html" title="Sphinx extensions for embedded plots, math and more"

accesskey="N">next</a> |</li>

<a href="getting_started.html" title="Getting started"

accesskey="P">previous</a> |</li>

<li><a href="search.html">search</a>| </li>

</ul>

</div>

<h4>Previous topic</h4>

<a href="getting_started.html"

title="previous chapter">Getting started</a>

<h4>Next topic</h4>

<a href="extensions.html"

title="next chapter">Sphinx extensions for embedded plots, math and more</a>

<li><a href="_sources/custom_look.rst.txt"

rel="nofollow">Show Source</a></li>

</ul>

</div>

<h3>Quick search</h3>

</form>

</div>

</div>

<h1>Customizing the look and feel of the site<a class="headerlink" href="#customizing-the-look-and-feel-of-the-site" title="Permalink to this headline">¶</a></h1>

The <a class="reference external" href="http://sphinx.pocoo.org/">sphinx</a> site itself looks better than

the sites created with the default css, so here we’ll

invoke T. S. Eliot’s maxim “Talent imitates, but genius steals” and

grab their css and part of their layout. As before, you can either

get the required files <code class="file docutils literal">_static/default.css</code> and

<code class="file docutils literal">_templates/layout.html</code> from the website or git (see

<a class="reference internal" href="getting_started.html#fetching-the-data">Fetching the data</a>). Since I did a git clone before, I will

just copy the stuff I need from there:

<div class="highlight-default"><div class="highlight"><pre>home:~/tmp/sampledoc> cp ../sampledoc_tut/_static/default.css _static/

home:~/tmp/sampledoc> cp ../sampledoc_tut/_templates/layout.html _templates/

_static/:

basic_screenshot.png default.css

_templates/:

layout.html

</pre></div>

</div>

Sphinx will automatically pick up the css and layout html files since

we put them in the default places with the default names, but we have

to manually edit the top of <code class="file docutils literal">layout.html</code> to style the title.

Let’s take a look at the layout file: the first part puts a horizontal

navigation bar at the top of our page, like you see on the <a class="reference external" href="http://sphinx.pocoo.org">sphinx</a> and <a class="reference external" href="http://matplotlib.sourceforge.net/">matplotlib</a> sites, the second part includes

a title that when we click on it will take us <cite>home</cite> and the last part

moves the vertical navigation panels to the right side of the page:

<div class="highlight-default"><div class="highlight"><pre>{% extends "!layout.html" %}

{% block rootrellink %}

<li><a href="{{ pathto('search') }}">search</a>|&nbsp;</li>

{% endblock %}

{% block relbar1 %}

<a href="{{ pathto('index') }}"><h1 style="font-size: 3em;">Sampledoc</h1></a>

</div>

{{ super() }}

{% endblock %}

{# put the sidebar before the body #}

{% block sidebar1 %}{{ sidebar() }}{% endblock %}

{% block sidebar2 %}{% endblock %}

</pre></div>

</div>

Once you rebuild the site with a <code class="docutils literal">make html</code> and reload the page in your browser, you should see a fancier site that looks like this

</div>

</div>

<h3>Navigation</h3>

<ul>

<a href="genindex.html" title="General Index"

>index</a></li>

<a href="extensions.html" title="Sphinx extensions for embedded plots, math and more"

>next</a> |</li>

<a href="getting_started.html" title="Getting started"

>previous</a> |</li>

<li><a href="search.html">search</a>| </li>

</ul>

</div>

Created using <a href="http://sphinx-doc.org/">Sphinx</a> 1.5.1.

</div>

</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

custom_look.html

Latest commit

History

custom_look.html

File metadata and controls