diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md
index d6316cbbf8..d14fd4c463 100644
--- a/exampleSite/content/basics/customization/_index.en.md
+++ b/exampleSite/content/basics/customization/_index.en.md
@@ -90,13 +90,16 @@ If you need to change this default behavior, create a new file in `layouts/parti
First, create a new CSS file in your local `static/css` folder prefixed by `theme` (e.g. with _mine_ theme `static/css/theme-mine.css`). Copy the following content and modify colors in CSS variables.
```css
-:root{
+:root {
--MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#1C90F3; /* Color of links */
--MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */
--MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
+ --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
+ --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
+
--MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */
--MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */
@@ -155,21 +158,26 @@ a:hover {
transition: width 0.5s ease;
background-color: var(--MAIN-LINK-HOVER-color);
}
+
#sidebar {
background-color: var(--MENU-SECTIONS-BG-color);
}
+
#sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color);
}
+
#sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color);
}
+
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color);
}
+
#sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color);
}
@@ -190,6 +198,28 @@ a:hover {
#sidebar hr {
border-color: var(--MENU-SECTION-HR-color);
}
+
+#body .tags a.tag-link {
+ background-color: var(--MENU-HEADER-BG-color);
+}
+
+#body .tags a.tag-link:before {
+ border-right-color: var(--MENU-HEADER-BG-color);
+}
+
+#homelinks {
+ background: var(--MENU-HEADER-BG-color);
+ background-color: var(--MENU-HEADER-BORDER-color);
+ border-bottom-color: var(--MENU-HEADER-BORDER-color);
+}
+
+#homelinks a {
+ color: var(--MENU-HOME-LINK-color);
+}
+
+#homelinks a:hover {
+ color: var(--MENU-HOME-LINK-HOVER-color);
+}
```
Then, set the `themeVariant` value with the name of your custom theme file. That's it!
diff --git a/static/css/theme-blue.css b/static/css/theme-blue.css
index 921396287e..c7daa88bc4 100644
--- a/static/css/theme-blue.css
+++ b/static/css/theme-blue.css
@@ -1,4 +1,4 @@
-:root{
+:root {
--MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#1C90F3; /* Color of links */
@@ -24,7 +24,6 @@
--MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #20272b; /* Color of
separator in menu */
-
}
body {
@@ -67,21 +66,26 @@ a:hover {
transition: width 0.5s ease;
background-color: var(--MAIN-LINK-HOVER-color);
}
+
#sidebar {
background-color: var(--MENU-SECTIONS-BG-color);
}
+
#sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color);
}
+
#sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color);
}
+
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color);
}
+
#sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color);
}
@@ -112,15 +116,15 @@ a:hover {
}
#homelinks {
- background: var(--MENU-HEADER-BG-color);
- background-color: var(--MENU-HEADER-BORDER-color);
- border-bottom-color: var(--MENU-HEADER-BORDER-color);
+ background: var(--MENU-HEADER-BG-color);
+ background-color: var(--MENU-HEADER-BORDER-color);
+ border-bottom-color: var(--MENU-HEADER-BORDER-color);
}
#homelinks a {
- color: var(--MENU-HOME-LINK-color);
+ color: var(--MENU-HOME-LINK-color);
}
#homelinks a:hover {
- color: var(--MENU-HOME-LINK-HOVERED-color);
+ color: var(--MENU-HOME-LINK-HOVER-color);
}
diff --git a/static/css/theme-green.css b/static/css/theme-green.css
index a06c81fcf2..d0d9d0aa4f 100644
--- a/static/css/theme-green.css
+++ b/static/css/theme-green.css
@@ -1,4 +1,4 @@
-:root{
+:root {
--MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#599a3e; /* Color of links */
@@ -24,7 +24,6 @@
--MENU-VISITED-color: #599a3e; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #18211c; /* Color of
separator in menu */
-
}
body {
@@ -67,21 +66,26 @@ a:hover {
transition: width 0.5s ease;
background-color: var(--MAIN-LINK-HOVER-color);
}
+
#sidebar {
background-color: var(--MENU-SECTIONS-BG-color);
}
+
#sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color);
}
+
#sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color);
}
+
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color);
}
+
#sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color);
}
@@ -112,15 +116,15 @@ a:hover {
}
#homelinks {
- background: var(--MENU-HEADER-BG-color);
- background-color: var(--MENU-HEADER-BORDER-color);
- border-bottom-color: var(--MENU-HEADER-BORDER-color);
+ background: var(--MENU-HEADER-BG-color);
+ background-color: var(--MENU-HEADER-BORDER-color);
+ border-bottom-color: var(--MENU-HEADER-BORDER-color);
}
#homelinks a {
- color: var(--MENU-HOME-LINK-color);
+ color: var(--MENU-HOME-LINK-color);
}
#homelinks a:hover {
- color: var(--MENU-HOME-LINK-HOVERED-color);
+ color: var(--MENU-HOME-LINK-HOVER-color);
}
diff --git a/static/css/theme-red.css b/static/css/theme-red.css
index 2bfd6b612c..a5b93b0e3b 100644
--- a/static/css/theme-red.css
+++ b/static/css/theme-red.css
@@ -1,4 +1,4 @@
-:root{
+:root {
--MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#f31c1c; /* Color of links */
@@ -24,7 +24,6 @@
--MENU-VISITED-color: #ff3333; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #2b2020; /* Color of
separator in menu */
-
}
body {
@@ -67,21 +66,26 @@ a:hover {
transition: width 0.5s ease;
background-color: var(--MAIN-LINK-HOVER-color);
}
+
#sidebar {
background-color: var(--MENU-SECTIONS-BG-color);
}
+
#sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color);
}
+
#sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color);
}
+
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color);
}
+
#sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color);
}
@@ -112,15 +116,15 @@ a:hover {
}
#homelinks {
- background: var(--MENU-HEADER-BG-color);
- background-color: var(--MENU-HEADER-BORDER-color);
- border-bottom-color: var(--MENU-HEADER-BORDER-color);
+ background: var(--MENU-HEADER-BG-color);
+ background-color: var(--MENU-HEADER-BORDER-color);
+ border-bottom-color: var(--MENU-HEADER-BORDER-color);
}
#homelinks a {
- color: var(--MENU-HOME-LINK-color);
+ color: var(--MENU-HOME-LINK-color);
}
#homelinks a:hover {
- color: var(--MENU-HOME-LINK-HOVERED-color);
+ color: var(--MENU-HOME-LINK-HOVER-color);
}
diff --git a/static/css/theme-relearn.css b/static/css/theme-relearn.css
index cc5641b238..87dc195e01 100644
--- a/static/css/theme-relearn.css
+++ b/static/css/theme-relearn.css
@@ -1,4 +1,4 @@
-:root{
+:root {
--MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#486ac9; /* Color of links */
@@ -24,7 +24,6 @@
--MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #28292e; /* Color of
separator in menu */
-
}
body {
@@ -67,21 +66,26 @@ a:hover {
transition: width 0.5s ease;
background-color: var(--MAIN-LINK-HOVER-color);
}
+
#sidebar {
background-color: var(--MENU-SECTIONS-BG-color);
}
+
#sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color);
}
+
#sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color);
}
+
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color);
}
+
#sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color);
}
@@ -112,19 +116,19 @@ a:hover {
}
#homelinks {
- background: var(--MENU-HEADER-BG-color);
- background-color: var(--MENU-HEADER-BORDER-color);
- border-bottom-color: var(--MENU-HEADER-BORDER-color);
+ background: var(--MENU-HEADER-BG-color);
+ background-color: var(--MENU-HEADER-BORDER-color);
+ border-bottom-color: var(--MENU-HEADER-BORDER-color);
}
#homelinks a {
- color: var(--MENU-HOME-LINK-color);
+ color: var(--MENU-HOME-LINK-color);
}
#homelinks a:hover {
- color: var(--MENU-HOME-LINK-HOVERED-color);
+ color: var(--MENU-HOME-LINK-HOVER-color);
}
-#shortcuts h3{
+#shortcuts h3 {
color: var(--MENU-SECTIONS-LINK-HOVER-color) !important;
}