Morceaux de code sympatoche

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

/* Cache aussi les ombres */
#main::before,
#time::before,
#background,
#background-bis {
	display: none;
}

Horloge

J’aime mes horloges épaisses

Rend l’horloge analogique plus épaisse.

#interface {
	--anlg-w: 4px; /* Changez la taille ici */
}
#interface #time #time-container #analogClock #center {
	width: calc(var(--anlg-w) * 4);
	height: calc(var(--anlg-w) * 4);
}
#interface #time #time-container #analogClock {
	border-width: calc(var(--anlg-w) * 2);
}
#interface #time #time-container #analogClock span {
	width: calc(var(--anlg-w) * 2);
	margin-left: calc(var(--anlg-w) * -1);
}
#interface #time #time-container #analogClock span#analogSeconds {
	width: var(--anlg-w);
}

Rolex 😎

Fait ressembler une horloge analogique à une Rolex.

* #interface #time #time-container #analogClock,
* #interface #time #time-container #analogClock:hover {
	border-width: 1px;
	background-size: cover;
	background-image: url('https://bonjourr.fr/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: "Votre message d'accueil personnalisé";
	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.

#interface #linkblocks li.block a img {
	background: transparent;
	box-shadow: unset;
}

#interface #linkblocks li.block a img:hover {
	box-shadow: unset;
}

Police

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.

body #interface,
#linkblocks span {
	color: black !important;
}

And my clock shall be black too

#interface #time #time-container #analogClock {
	border-color: black !important;
}

#minutes,
#center,
#hours {
	background-color: black !important;
}

Autre

Je me fiche de l’exposition de l’artiste

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

#credit {
	display: none;
}

23 quoi, carottes ?

Ajoute un C après la température.

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