Style snippets

Bonjourr is customisable 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

I like my backgrounds fast.

/* Faster background transition on startup */


#background_overlay {
  transition: transform 0.2s, opacity 0s;
}

Unicolor is the new meta

/* Makes background a uniform color. */
/* Replace '#CC7722' with your color of choice. */


#background_overlay {
  background-color: #cc7722;
}


#background,
#background-bis {
  display: none;
}

Clock

See both AM & PM at the same time

[data-ampm="pm"] .digital-am,
[data-ampm="am"] .digital-pm {
  display: inline;
  opacity: .2
}


[data-ampm] .digital-ampm {
  display: inline-flex;
  flex-direction: column;
}

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;
}

Greetings

I want my own greeting

/* Sets a custom greeting phrase */


#interface #greetings:before {
  content: 'Your custom greeting';
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  text-transform: none;
}


#interface #greetings {
  visibility: hidden;
  position: relative;
}

Fonts

My fonts shall be black (or any other color 😯)

/* Changes font color. "black" can be any css-safe color code. */


#linkblocks span,
#interface,
#credit,
#credit a {
  color: black;
}

And my clock shall be black too

.analog {
  border-color: black;
}


.analog .analog-center,
.analog span {
  background-color: black;
}

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;
}

23 what, carrots?

/* Adds a C after the temperature. */


#current::after,
#tempContainer p::after {
  content: 'C';
}

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;
}