CSS snippets

Bonjourr is customizable through its settings interface, but there are many more things you can do! Copy and paste those style snippets in their dedicated section of the settings to unlock some new possibilities.

Want your own style snippet here? Contact us!

Backgrounds

Portrait background

/* shows the full background image with no cropping (black bars), useful if you have a portrait orientation background */
#background-media .background-image {
  background-size: contain!important;
  background-repeat: no-repeat;
  transform: scale(1); /* try 0.9 if you want margins at the top and bottom as well */
}

body {
  /* accepts any hexadecimal color value, like #417781 */
  background-color: black;
}

Transparent backgrounds (Zen browser)

/* Hides regular backgrounds to make Bonjourr transparent. */
#background-media, #background-color {
  display: none!important;
}

.tabbing {
  background-color: transparent !important;
}

body {
  background-color: transparent !important;
}

#credit {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s, visibility 0.4s;
}

#credit-container:hover #credit {
  visibility: visible;
  opacity: 1;
}

Colors and icons

Add or change some colors

:root {
  /* overrides the built-in font color option (only rgb values) */
  --font-color: 60 45 40!important;

  /* for text on blurry elements (notes, searchbar... (only rgb values)) */
  --font-on-blur-color: 60 45 40;

  /* weather & settings icon (any kind of color code) */
  --icon-color: #c26d3b;

  /* the following are mostly just for the settings ⤵️ */
  /* blue accents all over (only rgb values) */
  --accent-color: 234 88 12;

  /* settings toggles (only rgb values) */
  --color-green: 245 158 11;
}

Custom weather icons

/* overrides the default weather icons */

/* replaces the day clear sky icon */
.weather-icon#weather-day-clearsky {
    /* replace the link with any other direct URL to an image */
    background-image: url("");
}

/* you only need this once for all icons*/
.weather-icon * {
    display: none;
}

Icon	Condition	Day ID	Night ID
	Broken clouds	weather-day-brokenclouds	weather-night-brokenclouds
	Clear sky	weather-day-clearsky	weather-night-clearsky
	Few clouds	weather-day-fewclouds	weather-night-fewclouds
	Light rain	weather-day-lightrain	weather-night-lightrain
	Mist	weather-day-mist	weather-night-mist
	Overcast clouds	weather-day-overcastclouds	weather-night-overcastclouds
	Rain	weather-day-rain	weather-night-rain
	Snow	weather-day-snow	weather-night-snow
	Sunny rain	weather-day-sunnyrain
	Thunderstorm	weather-day-thunderstorm	weather-night-thunderstorm

Custom settings icon

/* custom settings icon */

#show-settings svg {
  /* replace the link with any other direct URL to an image */
  background-image: url("https://i.imgur.com/n6C8rGA.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#show-settings svg * {
  display: none;
}

Colors

Add or change some colors

:root {
  /* overrides the built-in font color option (only rgb values) */
  --font-color: 60 45 40!important;

  /* for text on blurry elements (notes, searchbar... (only rgb values)) */
  --font-on-blur-color: 60 45 40;

  /* weather & settings icon (any kind of color code) */
  --icon-color: #c26d3b;

  /* the following are mostly just for the settings ⤵️ */
  /* blue accents all over (only rgb values) */
  --accent-color: 234 88 12;

  /* settings toggles (only rgb values) */
  --color-green: 245 158 11;
}

Quick links

Limit my most visited

/* Sets a limit to your most visited links (replace 5 with how many links you want) */

.synced .link-list > :nth-child(n+5) {
  display: none;
}

Clock

I like my clocks thick

/* Change analog clock width */

#interface {
  /* Change size here */
  --anlg-w: 6px;
}

.analog .analog-center {
  width: calc(var(--anlg-w) * 4);
  height: calc(var(--anlg-w) * 4);
}

.analog {
  border-width: calc(var(--anlg-w) * 2);
}

.analog span {
  width: calc(var(--anlg-w) * 2);
  margin-left: calc(var(--anlg-w) * -1);
}

.analog .analog-seconds {
  width: var(--anlg-w);
}

Rolex 😎

/* Rolex 😎 */

.analog-face,
.analog-face:hover {
  border-radius: 100%;
  border-width: 1px;
  background-size: cover;
  background-image: url('https://bonjourr.fr/misc/rolex.png') !important;
}

Search bar

Centering the searchbar placeholder

/* centers the searchbar placeholder */

#searchbar::placeholder {
    text-align: center;
}

Adding a logo to the left of the searchbar

/* adds logo to the searchbar */

#searchbar {
  /* use any direct link to an image you want */
  background: url('https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg') no-repeat 10px center;
  /* you might need to play around with the two following values to get to a fitting result */
  background-size: 20px;
  padding-left: 40px;
}

#searchbar::placeholder {
  color: white;
  opacity: 0.7;
}

Submitted by Kim Visnes

Other

I don’t care about artist exposure

/* Hides photo author credits. */

#credit {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s, visibility 0.4s;
}

#credit-container:hover #credit {
  visibility: visible;
  opacity: 1;
}

No GPU, only CPU 😠

/* This disables graphics intensive "backdrop-filter" style property on some elements. */

#bookmarks_container,
#bookmarks,
#element-mover,
.move-overlay {
  backdrop-filter: none !important;
}

#editlink,
#bookmarks,
#element-mover {
  background-color: #f2f2f7;
}

body.dark #editlink,
body.dark #bookmarks,
body.dark #element-mover,
body.autodark #editlink,
body.autodark #bookmarks,
body.autodark #element-mover {
  background-color: #222;
}

For laggy computers

/* Disables most settings transitions and animations. */

#settings .as,
#settings,
.move-overlay {
  transition: none;
}

#interface {
  transform: translateX(0) !important;
  transition: none !important;
}