mafumafu
Salut les quais
Je vous partage un thème que j'ai fait pour Avenoel dans le style du "Flat Design".
Pour ceux qui ne connaissent pas, le Flat Design se caractérise par une absence de tout ce qui peut suggérer un effet de profondeur (ombre, 3D, dégradé ...), de textures ou d'une manière générales de tout élément purement "décoratif". Il en va de même pour les polices d'écriture.
En somme, il est épuré et réduit au strict minimum.
C'est le design qui est maintenant le plus répandu sur le net.
L'accueil
Le Chat
Les Statistiques
Les Topics
Les Citations et Spoilers
La CDV
- J'ai caché la barre de navigation flottante qui s'affiche en bas de page lorsque la taille d'écran se réduit. Merci à Hentai pour la suggestion.
Celle qui est présente par défaut sur la version mobile.
- Pareil pour la cloche de notifications.
- Même chose pour le logo de la radio sur la barre de côté (impossible à remplacer uniquement avec le CSS).
Comment l'utiliser ?
Il vous faut l'extension Stylus.
Pour les utilisateurs de Chrome https://goo.gl/czN9Rz
Pour les utilisateurs de Firefox https://goo.gl/7AbHpu
Pour les utilisateurs d'Opera https://goo.gl/k2519M
Je n'utile que Chrome, je ne peux donc pas certifier que le rendu sera pareil sur les autres navigateurs.
Comment l'installer ?
En installant le Script depuis Userstyles.
https://userstyles.org/styles/153334/zinc
Comment ajouter un arrière plan personnalisé ?
Même si ce type de design est conçu sans arrière fond pour faciliter l'ergonomie, rien ne vous empêche d'y ajouter le votre.
1) Editez le thème Zinc via Stylus
2) Cherchez la partie "body {"
3) Pour un grand wallpaper : remplacez "background-color: #2c3e50;" par ces 3 lignes
background-image: url('votreimage.jpg/png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
4) Pour une texture de type papier peint : remplacez "background-color: #2c3e50;" par
background-image: url('votreimage.jpg/png');
background-repeat: repeat;
Enlevez celles-ci
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
Un exemple de résultat:
Ave Noel !
? まふまふ
Je vous partage un thème que j'ai fait pour Avenoel dans le style du "Flat Design".
Pour ceux qui ne connaissent pas, le Flat Design se caractérise par une absence de tout ce qui peut suggérer un effet de profondeur (ombre, 3D, dégradé ...), de textures ou d'une manière générales de tout élément purement "décoratif". Il en va de même pour les polices d'écriture.
En somme, il est épuré et réduit au strict minimum.
C'est le design qui est maintenant le plus répandu sur le net.
L'accueil
Le Chat
Les Statistiques
Les Topics
Les Citations et Spoilers
La CDV
- J'ai caché la barre de navigation flottante qui s'affiche en bas de page lorsque la taille d'écran se réduit. Merci à Hentai pour la suggestion.
Celle qui est présente par défaut sur la version mobile.- Pareil pour la cloche de notifications.
- Même chose pour le logo de la radio sur la barre de côté (impossible à remplacer uniquement avec le CSS).
Comment l'utiliser ?
Il vous faut l'extension Stylus.
Pour les utilisateurs de Chrome https://goo.gl/czN9Rz
Pour les utilisateurs de Firefox https://goo.gl/7AbHpu
Pour les utilisateurs d'Opera https://goo.gl/k2519MJe n'utile que Chrome, je ne peux donc pas certifier que le rendu sera pareil sur les autres navigateurs.
Comment l'installer ?
En installant le Script depuis Userstyles.
https://userstyles.org/styles/153334/zincComment ajouter un arrière plan personnalisé ?
Même si ce type de design est conçu sans arrière fond pour faciliter l'ergonomie, rien ne vous empêche d'y ajouter le votre.
2) Cherchez la partie "body {"
3) Pour un grand wallpaper : remplacez "background-color: #2c3e50;" par ces 3 lignes
background-image: url('votreimage.jpg/png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
4) Pour une texture de type papier peint : remplacez "background-color: #2c3e50;" par
background-image: url('votreimage.jpg/png');
background-repeat: repeat;
Enlevez celles-ci
background-repeat: no-repeat;
background-size: cover;
Un exemple de résultat:
Ave Noel !? まふまふ
