Bonjourr est personnalisable par le biais de son interface de paramètres, mais vous pouvez faire bien d'autres choses ! Copiez et collez ces extraits de style dans leur section dédiée des paramètres pour débloquer de nouvelles possibilités.

Vous voulez votre propre extrait de style ici ? Contactez nous !

Fond d'écran

J'aime que mes arrière-plans soient rapides.

Transition d'arrière-plan plus rapide au démarrage.

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

L'unicolore est la nouvelle méta

Donne une couleur uniforme à l'arrière-plan. Remplacez "#234" par la couleur de votre choix.

#background_overlay {
	background-color: #234;
}
#background, #background-bis {
	display: none;
}

Horloge

J'aime mes horloges épaisses

Rend l'horloge analogique plus épaisse.

#interface {
	--anlg-w: 6px; /* Change size here */
}
#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 #analogSeconds {
	width: var(--anlg-w);
}

Rolex 😎

Fait ressembler une horloge analogique à une Rolex.

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

Bienvenue

Je veux mon propre message d'accueil

Définit une phrase d'accueil personnalisée au lieu de Bonjour, Bon après-midi, etc.

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

Liens

Je veux des liens transparents !

Certaines icônes de sites sont des PNG avec un fond transparent. Ce code supprimera le fond blanc par défaut de Bonjourr pour les liens et fera briller ces icônes.

li.block div {
	border-color: transparent;
	background: transparent;
	box-shadow: unset;
}
li.block div:hover {
	box-shadow: unset;
}

Police de caractères

Mes polices de caractères seront noires (ou une autre couleur 😯)

Change la couleur de la police en noir. Utile si vous utilisez principalement des arrière-plans clairs. Remplacez "black" par un code couleur si vous souhaitez une autre couleur spécifique.

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

Et mon horloge aussi sera noire

#analogClock {
	border-color: black;
}
#analogClock #center,
#analogClock span {
		background-color: black;
}

Autre

Je me fiche de l'exposition de l'artiste

Cache les crédits d'auteur de la photo Unsplash.

#creditContainer {
	display: none;
}

23 quoi, carottes ?

Ajoute un C après la température.

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

Pas de GPU, seulement le CPU 😠

Désactive la propriété de style `backdrop-filter` très gourmande en ressources graphiques sur certains éléments.

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

Pour les ordinateurs qui traînent

Désactive la plupart des transitions et des animations des paramètres. Vous pouvez également ajouter les styles ci-dessus pour améliorer les performances.

#settings .as,
#settings,
.move-overlay {
	transition: none;
	}
#interface {
	transform: translateX(0) !important;
	transition: none !important;
}