DokuWiki

It's better when it's simple

User Tools

Site Tools


template:bootstrap3:customizations
no way to compare when less than two revisions

Differences

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


template:bootstrap3:customizations [2019-03-15 22:56] (current) – created lotar
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

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki