|
| 1 | +# Customise Cascade to your liking |
| 2 | + |
| 3 | +> [!TIP] |
| 4 | +> If you're using Cascade I highly recommend to remove all clutter from the Navigation Bar area. To do so rightclick your bar and go into the customisation settings. You can move all the icons freely which allows you to place your Addons within the Personal Toolbar for example. |
| 5 | +
|
| 6 | +<br> |
| 7 | + |
| 8 | +## Colours |
| 9 | + |
| 10 | +By default Cascade loads it's own colours which can be customised to fit your desired by simply changing the [colours include](https://github.com/cascadefox/cascade/tree/main/chrome/includes/cascade-colours.css). |
| 11 | +If you want to use Cascade with the Browsers default colours, or custom Firefox Themes like [Firefox Color](https://color.firefox.com) or even Addons like [Adaptive Tab Bar Color](https://github.com/YS-Wong/Adaptive-Tab-Bar-Color) simply remove the [colours include](https://github.com/cascadefox/cascade/tree/main/chrome/includes/cascade-colours.css) from the [userChrome.css](https://github.com/cascadefox/cascade/tree/main/chrome/userChrome.css) file. |
| 12 | + |
| 13 | +> [!NOTE] |
| 14 | +> **Are you having issues with the colours not applying?** |
| 15 | +> |
| 16 | +> A workaround fix for this issue is to remove the colour include from the [main file](https://github.com/cascadefox/cascade/tree/main/chrome/userChrome.css) and use [Firefox Color](https://addons.mozilla.org/en-GB/firefox/addon/firefox-color/) to apply [this custom theme](https://color.firefox.com/?theme=XQAAAAL8AAAAAAAAAABBKYhm849SCia2CaaEGccwS-xMDPr15o6H0LddKi1zZz7p7H23MOXwiWJCP8Eczt9O0cwm8bbmvpd20uiOFG8WawCZcXzraYdfXj2HrWgd4IgJK7QchIStW1KXpQGYxo9DHahUGJEmoKprdWRKoHPzcBH145YsTnnZq5DK71QEUg2RSwksm6Vs6Y7i7Y-4K-wFjfvAbb__jUJAAA) to apply Cascades default colours. |
| 17 | +
|
| 18 | +<br> |
| 19 | + |
| 20 | +## Mouse Support |
| 21 | + |
| 22 | +Cascade offers an [alternative config file](https://github.com/cascadefox/cascade/tree/main/chrome/includes/cascade-config-mouse.css) that reintroduces some of the UI elements that are necessary to use Firefox with a mouse. To use these settings simply substitue the regular config include with the one for mouse support. |
| 23 | + |
| 24 | +This config brings back: |
| 25 | +* Navigation Buttons |
| 26 | +* the URL Bar Bookmark Button |
| 27 | +* the Hamburger Menu |
| 28 | +* Tab Close Buttons (on hover) |
| 29 | + |
| 30 | +If the buttons inside the URL Bar are off you may need to change the `--uc-page-action-margin` variable in the config as the necessary margin seems to differ depending on ones setup. |
| 31 | + |
| 32 | +<br> |
| 33 | + |
| 34 | +## Sort the UI like you want it |
| 35 | + |
| 36 | +In the [Cascade config](https://github.com/cascadefox/cascade/tree/main/chrome/includes/cascade-config.css) you can set different ways of how the UI elements are layed out. The URL Bar, Tab Bar and Personal Toolbar can be arranged in different stacks; do you want the Toolbar to be on top or the URL and Tab Bar? Tabs on the left with the URL Bar to the right? No problem! |
| 37 | + |
| 38 | +```css |
| 39 | +/* Position of the Personal Toolbar |
| 40 | + * possible values: |
| 41 | + * 0 – toolbar on top |
| 42 | + * 4 – toolbar on bottom |
| 43 | + */ --uc-toolbar-position: 0; |
| 44 | +``` |
| 45 | + |
| 46 | +```css |
| 47 | +/* Position of the URL Bar |
| 48 | + * possible values: |
| 49 | + * 1 – tabs on the right |
| 50 | + * 3 – tabs on the left |
| 51 | + */ --uc-urlbar-position: 1; |
| 52 | +``` |
| 53 | + |
| 54 | +<details> |
| 55 | +<summary>Previews</summary> |
| 56 | + |
| 57 | +Toolbar on the top |
| 58 | + |
| 59 | +Toolbar on the bottom |
| 60 | + |
| 61 | +URL bar on the right |
| 62 | + |
| 63 | + |
| 64 | +</details><br> |
| 65 | + |
| 66 | +## URL Bar Customisation |
| 67 | + |
| 68 | +You can freely set your desired URL Bar width from within the [config](https://github.com/cascadefox/cascade/tree/main/chrome/includes/cascade-config.css) where the `min-width` setting is the default URL Bar width and `max-width` is the width of the focused URL Bar. Those can be different in order to make more room for the URL Bar when you actually want to use it. |
| 69 | + |
| 70 | +```css |
| 71 | +/* Width of the URL Bar for the Oneline layout |
| 72 | + * If enabled the max-width is applied on focus |
| 73 | + * otherwise the URL Bar will always be it's min-width |
| 74 | + */ --uc-urlbar-min-width: 30vw; |
| 75 | + --uc-urlbar-max-width: 45vw; |
| 76 | +``` |
| 77 | + |
| 78 | +If you set the `min-width` to `0vw` and the `max-width` to `100vw` you can also completely hide the URL Bar as long as it's not focused. |
| 79 | + |
| 80 | + |
| 81 | + |
| 82 | +<br> |
| 83 | + |
| 84 | +## Oneline Breakpoint |
| 85 | + |
| 86 | +If you'd like to have Cascade transition into it's Oneline layout on either smaller or larger sizes you can simply do so by changing the breakpoint value in the [responsive include](https://github.com/cascadefox/cascade/tree/main/chrome/includes/cascade-responsive.css) file. If you don't want Cascade to break to the Oneline layout at all remove it from the [userChrome.css](https://github.com/cascadefox/cascade/tree/main/chrome/userChrome.css) file |
| 87 | + |
| 88 | +```css |
| 89 | +@media (min-width: 1000px) { |
| 90 | + |
| 91 | + […] |
| 92 | + |
| 93 | +} |
| 94 | +``` |
| 95 | + |
| 96 | +<br><br><br> |
0 commit comments