#107 - How to override theme.css now? - enrich documentation from @nz…

…bart's examples

exampleSite/config.toml

@@ -6,7 +6,7 @@ title = "Docdock"
 theme = "hugo-theme-docdock"
 themesdir = "../.."
 pygmentsCodeFences = true
-pygmentsStyle = "monokai"
+pygmentsStyle = "monokailight"
 
 [params]
 editURL = "https://github.com/vjeantet/hugo-theme-docdock/edit/master/exampleSite/content/"

exampleSite/content/content-organisation/customize-style/_index.md

@@ -8,20 +8,46 @@ You can change the style and behavior of the theme without touching it.
 * inject your own html,  css or js into the page
 * overide existing css or js with your own files
 
-## Inject your HTML
+{{%notice note %}}
+No needs to copy the entire theme to customize some parts 
+Bellow are solutions to avoid copying the entire theme into your own codebase.
+{{%/notice%}}
 
-### into the \<head\> part of each page :
+## Add custom CSS and JS or HTML into the \<head\> part of each page :
 
-Create a `custom-head.html` into a `layouts/partials` folder next to the content folder
+Create a custom header partial `layouts/partials/custom-head.html` 
 
 > * content/
 > * layouts/
 >   * partials/
 >      * custom-head.html
 
+write your own content like (an example from @nzbart):
+```html
+<link rel="stylesheet" href="/css/custom.css">
+<script src="/js/custom.js"></script>
+```
+
+Then overrode the style your want to change in `static/css/custom.css` (in this case, to avoid altering the casing of titles):
+```css
+h2 {
+    text-transform: none;
+}
+```
+
+And executed some additional JavaScript from `static/js/custom.js` (note that jQuery is already loaded by the theme):
+```javascript
+function tweakPage() {
+    // make some changes here
+}
+
+$(tweakPage)
+```
+
+
 now feel free to add the JS, CSS, HTML code you want :)
 
-### at the end of the body part of each page :
+## Add custom HTML at the end of the body part of each page :
 
 Create a `custom-footer.html` into a `layouts/partials` folder next to the content folder
 
@@ -32,7 +58,7 @@ Create a `custom-footer.html` into a `layouts/partials` folder next to the conte
 
 now feel free to add the JS, CSS, HTML code you want :)
 
-## overide existing CSS or JS
+## Overide existing CSS or JS
 
 Create the matching file in your static folder, hugo will use yours instead of the theme's one.
 Example :