Customization

<p><strong>Dot</strong> has been built to be as configurable as possible.</p> <h3 id="change-the-logo">Change the logo</h3> <p>In <code>config.toml</code> you will find a logo variable. you can change your logo there.</p> <div class="notices tip" ><p>The size of the logo will adapt automatically</p></div> <h3 id="change-the-favicon">Change the favicon</h3> <p>If your favicon is a png, just drop off your image in your local <code>static/images/</code> folder and name it <code>favicon.png</code></p> <p>If you need to change this default behavior, create a new file in <code>layouts/partials/</code> named <code>head.html</code>. Then write something like this:</p> <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html"><<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shortcut icon"</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/images/favicon.png"</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"image/x-icon"</span> /> </code></pre></div><h3 id="change-default-colors">Change default colors</h3> <p><strong>Dot</strong> support change color. You can change the colors from <code>config.toml</code>. You can change the colors of the template as you want.</p> <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">[<span style="color:#a6e22e">params</span>] <span style="color:#75715e"># Change default color scheme with a color name or color code.</span> <span style="color:#a6e22e">primary_color</span> = <span style="color:#e6db74">"#02007e"</span> <span style="color:#a6e22e">body_color</span> = <span style="color:#e6db74">"#f9f9f9"</span> <span style="color:#a6e22e">text_color</span> = <span style="color:#e6db74">"#636363"</span> <span style="color:#a6e22e">text_color_dark</span> = <span style="color:#e6db74">"#242738"</span> <span style="color:#a6e22e">white_color</span> = <span style="color:#e6db74">"#ffffff"</span> <span style="color:#a6e22e">light_color</span> = <span style="color:#e6db74">"#f8f9fa"</span> </code></pre></div><h3 id="change-default-fonts">Change default Fonts</h3> <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">[<span style="color:#a6e22e">params</span>] <span style="color:#75715e"># font family</span> <span style="color:#a6e22e">font_family</span> = <span style="color:#e6db74">"lato"</span> <span style="color:#75715e"># Choose font family from : https://fonts.google.com/</span> </code></pre></div>