DokuWiki

It's better when it's simple

User Tools

Site Tools


template:bootstrap3:customizations

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

template:bootstrap3:customizations [2019-03-15 22:56] (current)
lotar created
Line 1: Line 1:
 +<= [[template:​bootstrap3|Bootstrap3 Template]]
 +
 +
 +====== Bootstrap3: Customizations =======
 +
 +===== Customize the theme =====
 +
 +To customize the theme, edit your ''​conf/​[[devel:​css#​user_styles|userstyle.css]]''​ (or ''​userall.css''​). ​
 +
 +Bootstrap3 theme provides a special class and attribute in ''<​body/>''​ tag to identify the current theme and current page or namespace.
 +
 +=== Styling the theme ===
 +
 +<code css> ​
 +  /** Vanilla Bootstrap Theme */
 + 
 +  body.default .page-header {
 +    font-weight:​ 900;
 +  }
 + 
 + 
 +  /** Optional Bootstrap Theme */
 + 
 +  body.optional .img-responsive {
 +    display: inline-block;​
 +  }
 + 
 + 
 +  /** Custom Bootstrap Theme */
 + 
 +  body.custom .btn-success {
 +    background-color:​ green;
 +  }
 +
 +
 +  /** Lumen - Bootswatch.com theme */
 + 
 +  body.lumen .navbar-default {
 +    background-color:​ red;
 +  }
 +</​code>​
 +
 +=== Styling the page or namespace ===
 +
 +<code .css>
 +
 +  /** Single page (eg. "​wiki:​syntax"​) */
 +
 +  body[data-page-id="​wiki:​synax"​] {
 +    background-color:​ green;
 +  }
 +
 +
 +  /** Namespace (eg. "​wiki:​*"​) */
 +  ​
 +  body[data-page-id^="​wiki:"​] {
 +    background-color:​ red;
 +  }
 +</​code>​
 +
 +For more information see [[https://​developer.mozilla.org/​it/​docs/​Web/​CSS/​Attribute_selectors|Mozilla Developer Network - Attribute selectors]].
 +
 +
 +===== Change the logo and favicon =====
 +
 +The Logo, Favicon and Apple Touch (bookmark) icons are referenced from multiple locations. The default icons (DokuWiki logo) provided by the template can easily be changed by uploading new image files to the given locations using the **Media Manager** popup or **Fullscreen Media Manager**.
 +
 +=== The site's logo ===
 +
 +  * '':​wiki:​logo.png''​
 +  * '':​logo.png''​
 +
 +=== The favicon ===
 +
 +  * '':​wiki:​favicon.ico''​
 +  * '':​favicon.ico''​
 +
 +=== The bookmark icon used by Apple and Android devices ===
 +
 +  * '':​wiki:​apple-touch-icon.png''​
 +  * '':​apple-touch-icon.png''​
 +
 +===== Namespaced theme =====
 +
 +Since v2016-12-12 release it's possible use different Bootstrap theme for namespace. To enable this feature enable ''​themeByNamespace''​ option and create ''​bootstrap3.themes.conf''​ configuration file in your ''​DOKU_CONF''​ directory:
 +
 +**NOTE**: To manage ''​bootstrap3.themes.conf''​ configuration file from DokuWiki use [[:​plugin:​advanced]] plugin.
 +
 +<​code>​
 +ns:​page ​ theme
 +</​code>​
 +
 +Example:
 +
 +<​code>​
 +wiki         ​default
 +wiki:​syntax ​ optional
 +playground ​  ​bootswatch/​yeti
 +</​code>​
  
template/bootstrap3/customizations.txt ยท Last modified: 2019-03-15 22:56 by lotar