Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • lydra/discourse/community-theme
1 result
Show changes
Commits on Source (12)
Hide whitespace changes
Inline Side-by-side
Showing
with 850 additions and 575 deletions
README.md
View file @ 54d3f4f8
# Community-theme
## Plugins
Ce thème utilise les plugins ci-dessous, pensez à les installer avant d'installer ce thème.
### One year anniversary
Ce thème est inspiré du thème [**_Mint_**](https://meta.discourse.org/t/mint-a-modern-theme-for-discourse/202822). Il est dédié à la la gestion de communautés en ligne.
Lors des un an de votre post, recevez une notification pour repartager celui-ci à votre communauté.
## Prérequis
- Doc : https://meta.discourse.org/t/discourse-yearly-review-plugin/105713
- Dépôt : https://github.com/discourse/discourse-yearly-review
Le thème Community se compose de plusieurs composants déjà inclus dans le fichier **about.json**. Il a aussi besoin de plugins que vous devrez installer pour être pleinement fonctionnels, pour plus d'informations voir [la section des prérequis](doc/prerequis.md).
### Reaction
## Configuration
Ajoutez des émojis et participez de façon dynamique aux conversations.
Après l'installation du thème vous aurez besoin de le configurer correctement, voir [la section configuration](doc/configuration.md).
- Doc : https://meta.discourse.org/t/discourse-reactions-beyond-likes/183261
- Dépôt : https://github.com/discourse/discourse-reactions
## discourse CLI
### Private topic to discover
Vos contenus sont visibles partiellement : encouragez vos contacts à s'inscrire sur la plateforme pour voir la totalité des contenus.
- Doc : https://meta.discourse.org/t/advertise-activity-in-a-private-category-discourse-category-lockdown/70649https://github.com/paviliondev/discourse-category-lockdown
- Dépôt : https://github.com/paviliondev/discourse-category-lockdown
### Problème du topic réglé
Indiquez à une communauté le statut "résolu" d'un problème.
- Doc : https://www.discourse.org/plugins/solved.html
- Dépôt : https://github.com/discourse/discourse-solved
### Automatisation (ex: for event)
Automatisez des actions complexes (version beta).
- Doc : https://meta.discourse.org/t/discourse-automation/195773
- Dépôt : https://github.com/discourse/discourse-automation
### Follower
Suivez, recevez des notifications de vos membres préférés et tenez vous au courant du nombre de followers.
- Doc : https://meta.discourse.org/t/follow-plugin/110579
- Dépôt : https://github.com/discourse/discourse-follow
### Calendrier
Partagez des événement avec les autres membres sur votre calendrier, ou passez en mode "vacances".
- Doc : https://meta.discourse.org/t/discourse-calendar/97376
- Dépôt : https://github.com/discourse/discourse-calendar
### map and post
Ajoutez votre géolocalisation sur vos post, ceux-ci peuvent favoriser les recherches entre membres.
- Doc : https://meta.discourse.org/t/locations-plugin/69742
- Dépôt : https://github.com/paviliondev/discourse-locations
### Location plugin
Découvrez la carte des membres de votre communauté et organisez des événements avec les membres les plus proches.
- Doc : https://meta.discourse.org/t/locations-plugin/69742/723
- Dépôt : https://github.com/discourse/discourse-calendar
## Composants
Ce thème utilise les composants ci-dessous, pensez à les installer avant d'installer ce thème.
### Icônes pour les catégories
Les catégories sont affichées avec des icônes complétant les titres.
- Doc : https://meta.discourse.org/t/category-icons-component/104683
- Dépôt : https://github.com/discourse/discourse-category-icons
### Discourse loading slider
Une barre horizontale s'affiche lors du temps de chargement d'une page.
- Doc : https://meta.discourse.org/t/experiment-on-meta-horizontal-loading-slider/177939
- Dépôt : https://github.com/discourse/discourse-loading-slider
### Discourse category banners
Affiche une barre de catégorie en haut de la page catégorie.
- Doc : https://meta.discourse.org/t/discourse-category-banners/86241
- Dépôt : https://github.com/discourse/discourse-category-banners.git
### Discourse search banner
Affiche une barre de recherche sur la page d'accueil.
- Doc : https://meta.discourse.org/t/search-banner-theme-component/122939
- Dépôt : https://github.com/discourse/discourse-search-banner.git
### Easy footer
Ajoute _footer_ simple et responsive.
- Doc : https://meta.discourse.org/t/easy-responsive-footer/95818
- Dépôt : https://github.com/discourse/Discourse-easy-footer
### Icons header
Permet d'ajouter des liens sur la partie "header" de votre site avec des icones.
- Doc : https://meta.discourse.org/t/custom-header-links-icons/86307
- Dépôt : https://github.com/discourse/discourse-icon-header-links
### MD Topic list
Épuration de la partie page d'accueil en améliorant la charte initiale.
- Doc : https://meta.discourse.org/t/md-topic-list-component/117694
- Dépôts : https://github.com/MonDiscourse/md-topic-list
### TOC, Table of content
Ajoute la table des matière du post.
- Doc : https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143
- Dépôts : https://github.com/discourse/DiscoTOC.git
Pour créer/modifier ses propres thèmes et composants, Discourse Theme CLI utilise la synchronicité. On peut voir à distance les modifications apportées dans notre thème/composant local, et ce, en simultané ! Voir [la section discourse theme cli](doc/discourse_theme_cli.md).
## Licence
[![community-theme Copyright 2021-present Lydra](https://www.gnu.org/graphics/gplv3-with-text-136x68.png)](https://choosealicense.com/licenses/gpl-3.0/)
**community-theme** is maintained by [Lydra](https://lydra.fr/) and released under the GPL3 license.
common/common.scss
View file @ 54d3f4f8
@import 'variables';
@import 'banner', 'buttons', 'categories_box', 'footer', 'header', 'variables';
input[type="text"],
input[type="password"],
......@@ -46,16 +46,11 @@ input[type="color"]:focus,
--banner-secondary-text: var(--primary-medium);
}
.d-header {
height: 5em;
box-shadow: none;
}
.alert.alert-info {
border-radius: 10px;
body {
background-color: $header_primary;
}
///////// HOME //////////
// PAGE home //
.custom-homepage-columns {
margin: 2em 0 2em 0;
.col {
......@@ -90,36 +85,12 @@ input[type="color"]:focus,
}
}
/// Text ///
p {
color: var(--primary);
}
.site-texts .site-text .site-text-value {
color: var(--primary);
}
.th {
color: var(--primary);
}
.permalink-description {
color: var(--quarternary);
}
.admin-customize .themes-list-container .themes-list-item.inactive-indicator {
color: var(--primary-medium);
}
.content-list h3 {
color: var(--primary-medium);
}
/// text box ///
/// Text box ///
.topic-list-item.visited a.title:not(.badge-notification), .latest-topic-list-item.visited a.title:not(.badge-notification), .category-topic-link.visited a.title:not(.badge-notification) {
color: $primary;
}
/// Searches elements ///
.navigation-categories .search-banner {
@include border-radius;
height: 350px;
......@@ -129,17 +100,6 @@ p {
max-width: 1110px;
}
.navigation-topics {
.container.list-container {
@include border-radius;
box-shadow: 0 8px 60px 0 rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197, 197, 0.1);
padding: 2em;
border-top: 8px solid $primary-medium;
margin-top: .8em;
}
}
.search-widget .search-context {
padding: 10px;
background-color: var(--primary-medium-medium);
......@@ -150,83 +110,17 @@ p {
color: $header_background;
}
.menu-panel .d-label {
color: $primary;
}
a {
color: var(--primary-medium-hover);
}
// White background in boxes
.category-boxes {
display: grid;
grid-gap: 2em;
grid-template-columns: 32% 32% 32%;
@include border-radius;
.category-box {
width: 100%;
margin: 0;
overflow: hidden;
border: none;
border-top: 8px solid;
@include border-radius;
box-shadow: 0px 2px 3px 0px $color-square-webkit-gradient;
.category-box-inner {
border: none;
padding: 0;
.category-details {
padding: 0.3em;
}
}
&:hover {
box-shadow: 0px 40px 30px 0px rgba(53, 53, 53, 0.1);
transform: translateY(-2px);
}
}
}
//category title
.category-list .category-text-title {
align-items: baseline;
display: inline-flex;
}
@media (max-width: 960px) {
.category-boxes.with-logos.with-subcategories {
grid-template-columns: 1fr;
}
}
.category-list-item.category {
@include border-radius;
border-right: 1px solid var(--primary-low) !important;
box-shadow: 0 0 4px 0 rgba(5, 5, 5, 0.1);
margin: 0 0.59em 2em .59em;
.custom-search-banner-wrap h1, .custom-search-banner-wrap p {
color: $header_background;
}
#create-topic {
color: var(--secondary);
background: var(--primary-medium);
transition: all 0.3s linear;
@include border-radius;
text-transform: uppercase;
border: 2px solid var(--primary-medium);
.fa {
.search-container .search-advanced-sidebar {
.search-advanced-title {
background: var(--tertiary);
color: var(--secondary);
}
&:hover {
background: var(--primary-medium);
color: var(--secondary);
box-shadow: 4px 4px $tertiary;
transition: all 0.3s linear;
@include border-radius;
.fa {
color: var(--secondary);
}
.search-advanced-filters {
border: 1px dashed var(--tertiary);
}
}
......@@ -247,9 +141,11 @@ a {
}
.list-controls .combo-box .combo-box-header {
border: none;
border: 1px solid $primary-medium;
color: $primary;
box-shadow: 1px 1px 5px 1px rgba(67,66,66, .2);
@include border-radius;
background-color: $header_background;
background-color: $header_primary;
}
.menu-panel .panel-body-bottom .btn {
......@@ -290,51 +186,13 @@ a {
color: currentColor;
}
&:hover {
color: var(--secondary);
color: var(--secondary-hover);
background: var(--tertiary-hover);
border: 1px solid var(--tertiary-hover);
border-radius: 5px;
}
}
.discourse-no-touch .btn:hover .d-icon, .discourse-no-touch .btn.btn-hover .d-icon {
color: var(--tertiary-hover);
}
.discourse-no-touch .btn:hover, .discourse-no-touch .btn.btn-hover {
color: var(--secondary);
background: $header-background;
border-radius: 5px;
.fa {
color: var(--quaternary);
}
}
.menu-panel .widget-link:hover, .menu-panel .widget-link:focus,
.menu-panel .categories-link:hover, .menu-panel .categories-link:focus {
background-color: var(--primary-medium-low);
}
.btn-default, .btn.btn-icon-text {
color: var(--secondary);
background: var(--primary-medium);
transition: all 0.3s linear;
@include border-radius;
text-transform: uppercase;
.fa {
color: var(--secondary);
}
}
.btn-primary {
@include border-radius;
}
.discourse-no-touch .btn-danger:hover {
background: var(--danger-hover);
}
.create {
@include border-radius;
}
......@@ -349,14 +207,6 @@ a {
}
}
.user-menu .quick-access-panel li:hover {
background-color: var(--tertiary-low);
}
a:hover {
color: var(--tertiary-hover);
}
.image-upload-controls {
border: 1px solid var(--secondary);
.fa {
......@@ -366,7 +216,7 @@ a:hover {
.admin-controls, .email-template, .admin-container {
.nav-pills>li a.active {
background: var(--tertiary);
background: var(--primary-medium);
color: var(--secondary);
}
.btn-primary {
......@@ -374,309 +224,83 @@ a:hover {
}
}
.custom-search-banner-wrap h1, .custom-search-banner-wrap p {
color: $header_background;
}
.btn[href] {
color: var(--secondary);
}
summary.select-kit-header.single-select-header.dropdown-select-box-header {
padding: 0.5em;
}
.search-container .search-advanced-sidebar {
.search-advanced-title {
background: var(--tertiary);
color: var(--secondary);
}
.search-advanced-filters {
border: 1px dashed var(--tertiary);
}
}
.banner-box {
width: $large-width;
max-width: calc(100% - 16px);
margin: 0 auto;
margin-top: 20px;
color: $primary_text_color;
position: relative;
background-image: url($banner_background_image);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: $background_color;
.button-container {
margin-right: 5px;
position: absolute;
z-index: z("base") + 1;
right: 0;
top: 2px;
.close,
.toggle {
float: right;
padding: 5px;
border: none;
color: $tertiary;
background: transparent;
font-size: 1.5157em;
cursor: pointer;
svg {
color: $tertiary;
}
.d-button-label {
font-size: 1em;
color: $header-background;
}
&:hover {
svg {
color: $primary;
}
.d-button-label {
font-size: 1em;
color: $header-background !important;
}
}
.svg-icon.hidden {
display: none;
}
}
}
h1,
h2,
h3 {
text-align: center;
color: $secondary_text_color;
}
a {
color: $link_text_color;
}
.section-header {
padding-bottom: 20px;
.x-title {
padding: 25px 65px;
margin: 0;
}
.colored-line {
margin: auto;
width: 165px;
height: 1px;
background: $secondary_text_color;
}
.description p {
margin: 0;
padding: 15px;
text-align: center;
}
}
.row {
display: flex;
justify-content: center;
.single-box {
float: left;
position: relative;
min-height: 1px;
padding: 0px 15px 30px;
text-align: center;
.icon {
font-size: 70px;
color: $secondary_text_color;
.responsive-img {
vertical-align: -0.125em;
border-style: none;
border-width: 1px;
height: 220px;
}
}
.banner-list {
display: flex;
justify-content: center;
ul {
text-align: left;
margin: 0;
}
li {
color: var(--primary);
}
}
}
}
// LINKS //
a {
color: var(--primary-medium-hover);
}
body {
background-color: $header_primary;
a:hover {
color: var(--tertiary-hover);
}
//Categories boxes
.category-list tbody .category {
padding: 0;
border-width: 0;
display: block;
width: 100%;
height: 100%;
// Color showcase categories //
.custom-homepage-columns .col {
position: relative;
}
.category-list tbody td {
display: inline-block;
width: 250px;
height: 250px;
border-left-color: transparent;
background-color: $secondary;
border-radius: 10px;
}
.category-list tbody .category {
border-left: 6px solid;
background-color: none;
}
///here, 120px is aboute logo/icons size
.category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img {
--height: 120px;
height: var(--height);
width: calc(var(--height) * var(--aspect-ratio));
max-width: 100%;
border-color: none;
border-top: none;
}
.logo.aspect-image img, .logo.aspect-image img {
padding-top: 20px;
}
.categories-and-latest {
flex-direction: column;
.admin-report .header .breadcrumb .report .info {
color: $primary-medium;
}
.category-list {
thead,
.topics,
.subcategories,
.category-description {
display: none;
align-items: baseline;
// PAGE Top & Latest //
.navigation-topics .container.list-container{
background-color: $secondary;
}
.category-list .category-text-title {
align-items: baseline;
display: inline-flex;
// Bouton & btn //
.btn[href] {
color: var(--secondary);
}
tbody {
text-align: center;
tr {
display: inline-block;
width: 250px;
height: 250px;
margin: 0.75em;
border-left-color: transparent;
border-radius: 10px;
border-bottom: none;
}
.category {
padding: 0;
border-width: 0;
display: block;
width: 100%;
height: 100%;
position: relative;
&:hover {
box-shadow: 0px 8px 20px 0px rgba(2,47,57,.10);
transform: translateY(-2px) !important;
}
> div {
height: 100%;
}
.category-logo {
float: unset;
margin: 0 auto;
}
.category-name {
margin-top: 1.25em;
}
h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
a[href] {
flex-direction: column-reverse;
width: 250px;
}
}
.btn-default, .btn.btn-icon-text {
color: var(--secondary);
background: var(--primary-medium);
transition: all 0.3s linear;
@include border-radius;
text-transform: uppercase;
&:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
z-index: 1;
box-sizing: border-box;
pointer-events: none;
opacity: 0.35;
border-color: inherit;
}
.fa {
color: var(--secondary);
}
}
}
//fin categories boxes
.banner-box .row .single-box .icon .responsive-img {
height: 220px !important;
.custom-footer .footer-section-link-wrapper a:hover, .custom-footer .third-box .small-link:hover {
text-decoration: underline;
text-underline-offset: 5px;
}
///// footer background and font //////
.custom-footer{
background: var(--primary-medium) !important;
////Color showcase categories/////
.custom-homepage-columns .col {
position: relative;
background-color: $secondary;
}
.custom-footer > ul {
color: var(--secondary) !important;
.discourse-no-touch .btn-danger:hover {
background: var(--danger-hover);
}
.custom-footer .footer-section-link-wrapper a, .footer-links > a, .blurb {
color: var(--secondary) !important;
.discourse-no-touch .btn:hover .d-icon, .discourse-no-touch .btn.btn-hover .d-icon {
color: var(--tertiary-hover);
}
////Color showcase categories/////
.custom-homepage-columns .col {
position: relative;
background-color: $secondary;
.discourse-no-touch .btn:hover, .discourse-no-touch .btn.btn-hover {
color: var(--secondary);
background: $header-background;
border-radius: 5px;
.fa {
color: var(--quarternary);
&:hover {
color: var(--quarternary);
}
}
}
///// button widget ///////
/// button widget ///
.btn-flat .icon {
color: $primary-low-mid;
}
......@@ -684,12 +308,3 @@ tbody {
.btn-flat .d-icon {
color: $primary-low-mid;
}
.admin-report .header .breadcrumb .report .info {
color: $primary-medium;
}
/// Page Top & Latest ///
.navigation-topics .container.list-container{
background-color: $secondary;
}
doc/configuration.md 0 → 100644
View file @ 54d3f4f8
# Configuration du thème et des composants
## Comment ça marche ?
### Bannière _How to begin ?_
C'est le composant **_Versatile Banner_** qui est utilisé pour cette bannière.
- Doc : https://meta.discourse.org/t/versatile-banner/109133
- Dépôt : https://github.com/tshenry/discourse-versatile-banner.git
La bannière s'affiche pour tout le monde / possibilité de la masquer.
Elle apparaît sur les pages :
- `/latest`
- `/categories`
- `/new`
- `/unread`
- `/top*`
- `/tag/*`
- `/tags/*`
- `/c/*`
- `/t/*`
Il n'y a pas d'image de fond, mais il est possible d'en ajouter une.
Ensuite il faut configurer le contenu de la bannière : texte, images dans chaque colonne.
Pour personnaliser les images de la bannière, il faut les uploader sur le forum. Pour ça il faut créer un post avec les images dans la catégorie _staff_ (privée). Puis parcourir le post créé qui affiche l'image et faite un clic droit pour **copier le lien de l'image**. Puis, coller ce lien dans la page configuration du composant, section `Column Icons`.
[Pour plus d'information voir ici](https://meta.discourse.org/t/upload-image-in-discourse/141504/4).
### Les boites de catégories
Le composant est **_Categories Layout Override_** qui affiche les boîtes de categories avec leur images.
Dans Theme Settings/categories layout il faut choisir `catégories_boxes`.
- Doc : https://meta.discourse.org/t/categories-layout-override/131098
- Dépôt : https://github.com/tshenry/discourse-categories-layout-override
### _Showcased Categories_
Le composant présentant deux boîtes avec une liste de 4 postes.
- Doc : https://meta.discourse.org/t/showcased-categories-theme-component/173524
- Dépôt : https://github.com/discourse/discourse-showcased-categories.git
Vous pouvez définir la taille en nombre de post maximum du contenu des boîtes et les catégories qui seront dans les boites ainsi que leur titre.
### Configuration des couleurs
Les couleurs peuvent être modifiées en créant votre palette de couleurs dans `Customize / Colors`. Pour plus d'information sur les palettes de couleurs [voir ici](https://meta.discourse.org/t/how-to-create-and-share-a-color-scheme/61196). Vous pouvez dupliquer les palettes `Community Light` ou `Community Dark` pour faire vos propres palettes.
Pour en savoir plus sur quelle couleur correspond à quel élément, nous fournissons [un descriptif de celles-ci](descriptif_couleurs.md).
Une fois votre palette créé ajouter celle-ci dans le thème : section **color palette**.
#### Installer des polices de caractère
Vous pouvez aussi installer des fonts existantes sur Discourse, depuis **Admin/Settings/Basic Setup.**.
Pour en savoir plus [voir ici](https://meta.discourse.org/t/how-to-change-default-font-of-your-site/21282).
doc/descriptif_couleurs.md 0 → 100644
View file @ 54d3f4f8
# Descriptif de la palette de couleur
## primary
- La plupart du texte, des icônes et des bordures
- Textes
- Textes sections
- Textes input
- Titres
- Bannière des options (en plus claire)
- Génère un bandeau lors d'un :hover d'une image dans le topic.
## secondary
- Couleur d'arrière-plan principale, et couleurs du texte de certains boutons.
- Couleur de fond des post/topics
- Couleur de fond des catégories
- Couleur de fond input
- Couleur des textes/icones du footer
- Couleur du texte des boutons
- Couleur des icones dans topics
## tertiary
- Les liens, certains boutons, notifications et accentuation
- Boutons:actif des menu
- Ombre des boutons d'action (more, new topic)
- Éléments des graphiques
- Titres des graphiques
- Titre:actifs des options des graphiques
- Titre:hover des options des graphiques
- Titre:hover du menu latéral
- Surlignement des messages Discourse pour l'utilisateur.
## quaternary
- Liens de navigation
- Section:active menu latéral
- Icones:hover
## header background
- Couleur de font de la bannière
- Bordures des post/topics
- Boutons:actifs
- Topics-action:hover
- Titre des options:hover de la bannière
## header primary
- Texte, icones de la bannière
- Fond de couleur de la page.
## highlight
- Couleur d'arrière-plan (surligner) des post et topics.
- Couleur de fond des champs de saisie
## danger
- Couleur d'arrière-plan (surligner) des actions like, suppression de post/topics
- Couleur de fond des boutons:actifs dans le menu customize theme/component
- Icone de suppression
## success
- Une action réalisée avec succès
## love
- Bouton like
## primary-low-mid
- Les icones
## primary-medium
- Les boutons
- Bouton:hover des categories/options
- Bordures des cadres
doc/discourse_theme_cli.md 0 → 100644
View file @ 54d3f4f8
# Comment utiliser le Discourse Theme CLI ?
## Utilité
> Discourse Theme CLI permet de syncroniser son code local avec une instance discourse en ligne.
#### Installation
Il faut commencer par [générer une clé API `Global Key`](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950#credentials-4) dans Discourse, et on enregistre une clé API par thème.
1. Installer `Ruby 2.2` minimum, le mieu c'est d'utiliser [`rbenv`](https://github.com/rbenv/rbenv).
2. Installer la gem `discourse_theme`.
```bash
gem install discourse_theme
```
- [Ressources sur Discourse Theme CLI.](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)
#### Utilisation
Au lancement la CLI va nous proposer plusieurs options :
1. Créer un nouveau thème via le discourse CLI :
```bash
discourse_theme new <my_new_theme>
```
2. Syncroniser un thème ou un composant local avec le Discours distant. Pour ça on doit lancer le `watch` sur le répartoire de notre projet.
```bash
discourse_theme watch <my_theme>
```
3. Télécharger un thème existant sur le Discourse distant, et le synchroniser grâce au `watch`.
```bash
discourse_theme download <my_remote_theme>
```
#### Bon à savoir
Ça y est ! Vous utilisez Discourse Theme CLI et vous avez la possibilité de créer ou de `watch` des thèmes et des composants.
**⛔ Note : il n'est pas possible de regarder plusieurs thèmes/composants en simultané.**
Exemple :
```bash
discourse_theme watch component-community-fonts community-theme component-colors
```
Ceci génèrera une erreur. Il faut dans ce cas lancer un cli par répertoire.
doc/prerequis.md 0 → 100644
View file @ 54d3f4f8
# Prérequis
## Composants
Ce thème utilise les composants ci-dessous, ils sont installés avec le thème, pensez à les configurer.
### Discourse loading slider
Une barre horizontale s'affiche au dessus de l’entête durant le temps de chargement d'une page.
- Doc : https://meta.discourse.org/t/experiment-on-meta-horizontal-loading-slider/177939
- Dépôt : https://github.com/discourse/discourse-loading-slider
### Icon Header Links
Ajoute des liens sous la forme d’icône en entête du site : Instagram, Gitlab, YouTube,...
- Doc : https://meta.discourse.org/t/custom-header-links-icons/86307
- Dépôt : https://github.com/discourse/discourse-icon-header-links
### Versatile Banner
Ajoute une bannière de trois images avec du texte de présentation - Option plier / déplier
- Doc : https://meta.discourse.org/t/versatile-banner/109133
- Dépôt : https://github.com/tshenry/discourse-versatile-banner
### Showcase Categories
Met en avant deux catégories et leur _top posts_.
- Doc : https://meta.discourse.org/t/showcased-categories-theme-component/173524
- Dépôt : https://github.com/discourse/discourse-showcased-categories
### Categories Layout Override
Les catégories sont présentées sous forme de boîte avec une image. La taille conseillée pour les images de catégorie est de maximum 150px.
- Doc : https://meta.discourse.org/t/categories-layout-override/131098
- Dépôt : https://github.com/tshenry/discourse-categories-layout-override
### Category icons component
Les catégories sont affichées avec des icônes complétant les titres.
- Doc : https://meta.discourse.org/t/category-icons-component/104683
- Dépôt : https://github.com/discourse/discourse-category-icons
### Discourse category banners
Affiche une bannière de présentation de catégorie en haut de chaque page catégorie.
- Doc : https://meta.discourse.org/t/discourse-category-banners/86241
- Dépôt : https://github.com/discourse/discourse-category-banners.git
### DiscoTOC
Ajoute une option Tables des matières lors de la rédaction de topic.
- Doc : https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143
- Dépôts : https://github.com/discourse/DiscoTOC.git
### Easy footer
Ajoute un pied de page simple et responsive avec vos liens.
- Doc : https://meta.discourse.org/t/easy-responsive-footer/95818
- Dépôt : https://github.com/discourse/Discourse-easy-footer
## Plugins
Pour une meilleure expérience utilisateur nous vous conseillons aussi d'installer les plugins suivant.
### One year anniversary
Toutes les années ce plugin créer un sujet anniversaire qui résume l'activité de l'année précédente sur un forum.
- Doc : https://meta.discourse.org/t/discourse-yearly-review-plugin/105713
- Dépôt : https://github.com/discourse/discourse-yearly-review
### Reaction
Ajoutez des émojis et participez de façon dynamique aux conversations.
- Doc : https://meta.discourse.org/t/discourse-reactions-beyond-likes/183261
- Dépôt : https://github.com/discourse/discourse-reactions
### Private topic to discover
Vos contenus privés sont visibles partiellement : encouragez vos contacts à s'inscrire sur la plateforme pour voir la totalité des contenus.
- Doc : https://meta.discourse.org/t/advertise-activity-in-a-private-category-discourse-category-lockdown/70649https://github.com/paviliondev/discourse-category-lockdown
- Dépôt : https://github.com/paviliondev/discourse-category-lockdown
### Solved
Indiquez à une communauté le statut "résolu" d'un problème.
- Doc : https://www.discourse.org/plugins/solved.html
- Dépôt : https://github.com/discourse/discourse-solved
### Automation (ex: for event)
Automatisez des actions complexes (version beta).
- Doc : https://meta.discourse.org/t/discourse-automation/195773
- Dépôt : https://github.com/discourse/discourse-automation
### Follower
Suivez, recevez des notifications de vos membres préférés et tenez vous au courant du nombre de followers.
- Doc : https://meta.discourse.org/t/follow-plugin/110579
- Dépôt : https://github.com/discourse/discourse-follow
### Calendrier
Partagez des événements avec les autres membres sur votre calendrier, ou passez en mode "vacances".
- Doc : https://meta.discourse.org/t/discourse-calendar/97376
- Dépôt : https://github.com/discourse/discourse-calendar
### map and post
Ajoutez votre géolocalisation sur vos post, ceux-ci peuvent favoriser les recherches entre membres.
- Doc : https://meta.discourse.org/t/locations-plugin/69742
- Dépôt : https://github.com/paviliondev/discourse-locations
### Location plugin
Découvrez la carte des membres de votre communauté et organisez des événements avec les membres les plus proches.
- Doc : https://meta.discourse.org/t/locations-plugin/69742/723
- Dépôt : https://github.com/discourse/discourse-calendar
scss/banner.scss 0 → 100644
View file @ 54d3f4f8
// Banner //
.banner-box .row .single-box .icon .responsive-img {
height: 220px !important;
}
.banner-box {
width: $large-width;
max-width: calc(100% - 16px);
margin: 0 auto;
margin-top: 20px;
color: $primary_text_color;
position: relative;
background-image: url($banner_background_image);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: $background_color;
.button-container {
margin-right: 5px;
position: absolute;
z-index: z("base") + 1;
right: 0;
top: 2px;
.close,
.toggle {
float: right;
padding: 5px;
border: none;
color: $tertiary;
background: transparent;
font-size: 1.5157em;
cursor: pointer;
svg {
color: $tertiary;
}
.d-button-label {
font-size: 1em;
color: $header-background;
}
&:hover {
svg {
color: $primary;
}
.d-button-label {
font-size: 1em;
color: $header-background !important;
}
}
.svg-icon.hidden {
display: none;
}
}
}
h1,
h2,
h3 {
text-align: center;
color: $secondary_text_color;
}
a {
color: $link_text_color;
}
.section-header {
padding-bottom: 20px;
.x-title {
padding: 25px 65px;
margin: 0;
}
.colored-line {
margin: auto;
width: 165px;
height: 1px;
background: $secondary_text_color;
}
.description p {
margin: 0;
padding: 15px;
text-align: center;
}
}
.row {
display: flex;
justify-content: center;
.single-box {
float: left;
position: relative;
min-height: 1px;
padding: 0px 15px 30px;
text-align: center;
.icon {
font-size: 70px;
color: $secondary_text_color;
.responsive-img {
vertical-align: -0.125em;
border-style: none;
border-width: 1px;
height: 220px;
}
}
.banner-list {
display: flex;
justify-content: center;
ul {
text-align: left;
margin: 0;
}
li {
color: var(--primary);
}
}
}
}
}
scss/buttons.scss 0 → 100644
View file @ 54d3f4f8
@import 'variables';
// Bouton & btn //
.btn[href] {
color: var(--secondary);
}
.btn-default, .btn.btn-icon-text {
color: var(--secondary);
background: var(--primary-medium);
transition: all 0.3s linear;
@include border-radius;
text-transform: uppercase;
.fa {
color: var(--secondary);
}
}
.btn-primary {
@include border-radius;
}
.discourse-no-touch .btn-danger:hover {
background: var(--danger-hover);
}
.discourse-no-touch .btn:hover .d-icon, .discourse-no-touch .btn.btn-hover .d-icon {
color: var(--tertiary-hover);
}
.discourse-no-touch .btn:hover, .discourse-no-touch .btn.btn-hover {
color: var(--secondary);
background: $header-background;
border-radius: 5px;
.fa {
color: var(--quarternary);
&:hover {
color: var(--quarternary);
}
}
}
/// button widget ///
.btn-flat .icon {
color: $primary-low-mid;
}
.btn-flat .d-icon {
color: $primary-low-mid;
}
scss/categories_box.scss 0 → 100644
View file @ 54d3f4f8
// Boxes & categories //
/// White background in boxes ///
.category-boxes {
display: grid;
grid-gap: 2em;
grid-template-columns: 32% 32% 32%;
@include border-radius;
.category-box {
width: 100%;
margin: 0;
overflow: hidden;
border: none;
border-top: 8px solid;
@include border-radius;
box-shadow: 0px 2px 3px 0px $color-square-webkit-gradient;
.category-box-inner {
border: none;
padding: 0;
.category-details {
padding: 0.3em;
}
}
&:hover {
box-shadow: 0px 40px 30px 0px rgba(53, 53, 53, 0.1);
transform: translateY(-2px);
}
}
}
/// category title ///
.category-list .category-text-title {
align-items: baseline;
display: inline-flex;
}
@media (max-width: 960px) {
.category-boxes.with-logos.with-subcategories {
grid-template-columns: 1fr;
}
}
.category-list-item.category {
@include border-radius;
border-right: 1px solid var(--primary-low) !important;
box-shadow: 0 0 4px 0 rgba(5, 5, 5, 0.1);
margin: 0 0.59em 2em .59em;
}
#create-topic {
color: var(--secondary);
background: var(--primary-medium);
transition: all 0.3s linear;
@include border-radius;
text-transform: uppercase;
border: 2px solid var(--primary-medium);
.fa {
color: var(--secondary);
}
&:hover {
background: var(--primary-medium);
color: var(--secondary);
box-shadow: 4px 4px $tertiary;
transition: all 0.3s linear;
@include border-radius;
.fa {
color: var(--secondary);
}
}
}
// Categories boxes //
.category-list tbody .category {
padding: 0;
border-width: 0;
display: block;
width: 100%;
height: 100%;
position: relative;
}
.category-list tbody td {
display: inline-block;
width: 250px;
height: 250px;
border-left-color: transparent;
background-color: $secondary;
border-radius: 10px;
}
.category-list tbody .category {
border-left: 6px solid;
background-color: none;
}
/// here, 120px is about logo/icons size ///
.category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img {
--height: 120px;
height: var(--height);
width: calc(var(--height) * var(--aspect-ratio));
max-width: 100%;
border-color: none;
border-top: none;
}
.logo.aspect-image img, .logo.aspect-image img {
padding-top: 20px;
}
.categories-and-latest {
flex-direction: column;
}
.category-list {
thead,
.topics,
.subcategories,
.category-description {
display: none;
align-items: baseline;
}
.category-list .category-text-title {
align-items: baseline;
display: inline-flex;
}
tbody {
text-align: center;
tr {
display: inline-block;
width: 250px;
height: 250px;
margin: 0.75em;
border-left-color: transparent;
border-radius: 10px;
border-bottom: none;
}
.category {
padding: 0;
border-width: 0;
display: block;
width: 100%;
height: 100%;
position: relative;
&:hover {
box-shadow: 0px 8px 20px 0px rgba(2,47,57,.10);
transform: translateY(-2px) !important;
}
> div {
height: 100%;
}
.category-logo {
float: unset;
margin: 0 auto;
}
.category-name {
margin-top: 1.25em;
}
h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
a[href] {
flex-direction: column-reverse;
width: 250px;
}
}
&:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
z-index: 1;
box-sizing: border-box;
pointer-events: none;
opacity: 0.35;
border-color: inherit;
}
}
}
}
scss/footer.scss 0 → 100644
View file @ 54d3f4f8
// Footer background and Font //
.custom-footer{
background: var(--primary-medium) !important;
}
.custom-footer > ul {
color: var(--secondary) !important;
}
.custom-footer .footer-section-link-wrapper a, .footer-links > a, .blurb {
color: var(--secondary) !important;
}
scss/header.scss 0 → 100644
View file @ 54d3f4f8
// HEADER //
.d-header {
height: 5em;
box-shadow: none;
}
.navigation-topics {
.container.list-container {
@include border-radius;
box-shadow: 0 8px 60px 0 rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197, 197, 0.1);
padding: 2em;
border-top: 8px solid $primary-medium;
margin-top: .8em;
}
}
.menu-panel .d-label {
color: $primary;
}
.alert.alert-info {
border-radius: 10px;
}
// MENU //
.menu-panel .widget-link:hover, .menu-panel .widget-link:focus,
.menu-panel .categories-link:hover, .menu-panel .categories-link:focus {
background-color: var(--primary-medium-low);
}
.user-menu .quick-access-panel li:hover {
background-color: var(--tertiary-low);
}
// TEXT //
p {
color: var(--primary);
}
.site-texts .site-text .site-text-value {
color: var(--primary);
}
.th {
color: var(--primary);
}
.permalink-description {
color: var(--quarternary);
}
.admin-customize .themes-list-container .themes-list-item.inactive-indicator {
color: var(--primary-medium);
}
.content-list h3 {
color: var(--primary-medium);
}
scss/variables.scss
View file @ 54d3f4f8
......@@ -17,4 +17,4 @@ $color-box-shadow-light: rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197,
$color-box-shadow-light-coffee: rgba(114, 114, 114, 0.1), 0 12px 90px 0 rgba(148, 148, 148, 0.1);
$color-box-shadow-middle: rgba(53, 53, 53, 0.1);
$color-box-shadow-pure-black: rgba(5, 5, 5, 0.1);
$color-box-shadow-154-134:rgba(154, 157, 163, 0.1), 0 12px 90px 0 rgba(134, 134, 134, 0.1);
\ No newline at end of file
$color-box-shadow-154-134:rgba(154, 157, 163, 0.1), 0 12px 90px 0 rgba(134, 134, 134, 0.1);

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service