diff options
author | Dave Davenport <qball@gmpclient.org> | 2017-01-12 18:17:32 +0100 |
---|---|---|
committer | Dave Davenport <qball@gmpclient.org> | 2017-01-12 18:17:32 +0100 |
commit | 0e1b02d2f42bed92f2c4e9a95e1ac80419a34606 (patch) | |
tree | 1f705ef357b387ba49a9eccc369724f0a043c337 /doc | |
parent | 7749353c5bb723d19713d9117da7b45728f1855d (diff) |
Add transparency section to tutorial
Diffstat (limited to 'doc')
-rw-r--r-- | doc/rofi-theme3-transparent-fixed.png | bin | 0 -> 77988 bytes | |||
-rw-r--r-- | doc/rofi-theme3-transparent.png | bin | 0 -> 78802 bytes | |||
-rw-r--r-- | doc/theme3-tutorial.md | 32 |
3 files changed, 32 insertions, 0 deletions
diff --git a/doc/rofi-theme3-transparent-fixed.png b/doc/rofi-theme3-transparent-fixed.png Binary files differnew file mode 100644 index 00000000..0be9c068 --- /dev/null +++ b/doc/rofi-theme3-transparent-fixed.png diff --git a/doc/rofi-theme3-transparent.png b/doc/rofi-theme3-transparent.png Binary files differnew file mode 100644 index 00000000..f4d66089 --- /dev/null +++ b/doc/rofi-theme3-transparent.png diff --git a/doc/theme3-tutorial.md b/doc/theme3-tutorial.md index fc00d352..7051438d 100644 --- a/doc/theme3-tutorial.md +++ b/doc/theme3-tutorial.md @@ -336,3 +336,35 @@ Note here, empty sections, because we want them to inherit from their parents, c This is a first quick tutorial into writing a theme. There are a lot more options that can be tweaked. For this see the full *TODO* theme specification. + + +## Advanced + +To make the theme transparent, more care had to be taken. Because every widget renders over the underlying widget (with +it transparency value). You cannot just set one background color as main property. +This would result in: + +![rofi](rofi-theme3-transparent.png) + +There is an easy way to fix this. Set the default background to be fully transparent: + +```css +* { + background: rgba(0,0,0,0); +} +``` + +Now every widget without an explicit background, is going to be transparent. +We can then set the background of the window to the desired transparent color: + +```css +#window box { + background: #881c1c1c; +} +``` + +This looks a lot nicer: + +![rofi](rofi-theme3-transparent-fixed.png) + +Now by updating the remaining backgrounds you can tweak the theme to have a nice overall look. |