add separate "Tips & Tricks" page to documentation

jothepro · Mar 1, 2022 · 75eabdc · 75eabdc
1 parent 7c59e23
commit 75eabdc
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 15 deletions.
diff --git a/Doxyfile b/Doxyfile
@@ -867,7 +867,8 @@ WARN_LOGFILE           =
 INPUT                  = include \
                          README.md \
                          docs/extensions.md \
-                         docs/customization.md
+                         docs/customization.md \
+                         docs/tricks.md
 
 
 # This tag can be used to specify the character encoding of the source files

diff --git a/README.md b/README.md
@@ -69,6 +69,7 @@ Further installation instructions:
 
 - [How to install extensions](docs/extensions.md)
 - [How to customize the theme (colors, spacing, border-radius, ...)](docs/customization.md)
+- [Tips and Tricks for further configuration](docs/tricks.md)
 
 ## Browser support
 
@@ -78,19 +79,6 @@ Tested with
 - Safari 15, Safari for iOS 15
 - Firefox 97, Firefox Daylight 97 for Android, Firefox Daylight 96 for iOS
 
-## Tips & Tricks
-
-### Class Diagrams with Graphviz
-
-To get the best looking class diagrams for your documentation, generate them with Graphviz as vector graphics with transparent background:
-
-```
-# Doxyfile
-HAVE_DOT = YES
-DOT_IMAGE_FORMAT = svg
-DOT_TRANSPARENT = YES
-```
-
 ## Credits
 
 - This theme is inspired by the [vuepress](https://vuepress.vuejs.org/) static site generator default theme.

diff --git a/docs/customization.md b/docs/customization.md
@@ -106,5 +106,5 @@ I am always curious to learn about how you made the theme look even better!
 
 <span class="next_section_button">
 
-Read Next: [Example](https://jothepro.github.io/doxygen-awesome-css/class_my_library_1_1_example.html)
+Read Next: [Tips & Tricks](tricks.md)
 </span>
diff --git a/docs/tricks.md b/docs/tricks.md
@@ -0,0 +1,57 @@
+# Tips & Tricks
+
+[TOC]
+
+## Class Diagrams with Graphviz
+
+To get the best looking class diagrams for your documentation, generate them with Graphviz as vector graphics with transparent background:
+
+```
+# Doxyfile
+HAVE_DOT = YES
+DOT_IMAGE_FORMAT = svg
+DOT_TRANSPARENT = YES
+```
+
+## Disable Dark Mode
+
+If for some reason you don't want the theme to automatically switch to dark mode depending on the browser preference,
+you can disable dark mode by adding the `light-mode` class to the html-tag in the header template:
+
+```html
+<html xmlns="http://www.w3.org/1999/xhtml" class="light-mode">
+```
+
+The same can be done to always enable dark-mode:
+
+```html
+<html xmlns="http://www.w3.org/1999/xhtml" class="dark-mode">
+```
+
+
+**This only works if you don't use the dark-mode toggle extension.**
+
+## Choosing Sidebar Width
+
+If you have enabled the sidebar-only theme variant, make sure to carefully choose a proper width for your sidebar.
+It should be wide enough to hold the icon, project title and version number. If the content is too wide, it will be
+cut off.
+
+```css
+html {
+    /* Make sure sidebar is wide enough to contain the page title (logo + title + version) */
+    --side-nav-fixed-width: 335px;
+}
+```
+
+The choosen width should also be set in the Doxyfile:
+
+```
+# Doxyfile
+TREEVIEW_WIDTH = 335
+```
+
+<span class="next_section_button">
+
+Read Next: [Example](https://jothepro.github.io/doxygen-awesome-css/class_my_library_1_1_example.html)
+</span>