3

Styling with Custom CSS

Ben Busby edited this page 2021-04-09 11:23:32 -04:00

Table of Contents

• Other effects

The color scheme and styling of Whoogle instances is configurable using the "Custom CSS" field on the home page.

Each Whoogle instance starts with the following variables applied for all pages:

:root {
    /* LIGHT THEME COLORS */
    --whoogle-logo: #685e79;
    --whoogle-page-bg: #ffffff;
    --whoogle-element-bg: #685e79;
    --whoogle-text: #000000;
    --whoogle-contrast-text: #ffffff;
    --whoogle-secondary-text: #70757a;
    --whoogle-result-bg: #ffffff;
    --whoogle-result-title: #1967d2;
    --whoogle-result-url: #0d652d;
    --whoogle-result-visited: #4b11a8;

    /* DARK THEME COLORS */
    --whoogle-dark-logo: #888888;
    --whoogle-dark-page-bg: #080808;
    --whoogle-dark-element-bg: #111111;
    --whoogle-dark-text: #dddddd;
    --whoogle-dark-contrast-text: #aaaaaa;
    --whoogle-dark-secondary-text: #8a8b8c;
    --whoogle-dark-result-bg: #111111;
    --whoogle-dark-result-title: #dddddd;
    --whoogle-dark-result-url: #eceff4;
    --whoogle-dark-result-visited: #959595;
}

• whoogle-page-bg
  • The page background color
• whoogle-logo
  • The color of the logo
• whoogle-element-bg
  • The background color of the config menu, search bar button, etc
• whoogle-text
  • The foreground/text color
• whoogle-contrast-text
  • Color for text that is against the accent color
• whoogle-secondary-text
  • Color for tips/dates/etc (things that require less visual prominence)
• whoogle-result-bg
  • Background color for each result in a search
• whoogle-result-title
  • The color for the title of the result in a search
• whoogle-result-url
  • The color for the URL of the result in a search
• whoogle-result-visited
  • The color for the title of visited results in a search

Other effects

• Wider result page

body {
    max-width: 100% !important;
}

• Hide config items

/* Hide root URL */
.config-div-root-url {
    display: none !important;
}

/* Hide dark mode */
.config-div-dark {
    display: none !important;
}

/* Hides the entire config collapsible
NOTE: If you include this, the only way to change the config
would be manually (not through the UI, since this hides the UI) */
#config-collapsible {
    display: none !important;
}