Y a-t-il des réflexions sur le fait de rendre Horizon pleine largeur ? Je trouve que cela semble un peu restreint au milieu (corset ?), et le rendre entièrement pleine largeur le détendrait joliment.
4 « J'aime »
Non, nous n’avons pas l’intention de le faire. Nous maintenons une largeur limitée, ce qui correspond à une longueur de lecture optimale.
2 « J'aime »
Bonjour, j’ai essayé de prévisualiser le thème, mais c’est tout ce que je vois :
Est-ce que je fais quelque chose de mal ?
1 « J'aime »
Je viens de tester (sur mobile cependant) et cela fonctionne bien pour moi. Y a-t-il quelque chose dans la console ? Ou pouvez-vous essayer un autre navigateur pour vérifier ?
1 « J'aime »
Merci @chapoi ! Ma console :
1 « J'aime »
D’accord, oui, je peux certainement reproduire cela. Je pense que c’est parce que Horizon a probablement été déplacé vers le cœur. Il faudra trouver comment corriger le lien de prévisualisation, si c’est possible. (Il sera plus facile de simplement prévisualiser sur Meta – sujet mis à jour)
Ceci étant dit, vous pouvez simplement le prévisualiser ici sur Meta en changeant de thème.
2 « J'aime »
Merci beaucoup, ça fonctionne maintenant !
1 « J'aime »
2 messages ont été déplacés vers un nouveau sujet : Texte de bouton invisible sur le thème Horizon
Débordement du conteneur d’annonce mobile dans les annonces internes – Inadéquation de la mise en page RTL/LTR
Bonjour
J’utilise le thème Horizon avec le plugin House Ads officiel, et j’ai créé un composant personnalisé pour styliser les annonces en utilisant des variables CSS et des règles de mise en page compatibles avec le système de conception de Discourse.
Problème : Le conteneur d’annonce déborde de la vue sur mobile (LTR et RTL)
- Thème : Horizon (non reproductible dans les thèmes par défaut ou autres comme Material, etc.)
- Plugin : House Ads + composant personnalisé
- Appareil : Mobile
- Comportement :
- Lorsque la langue du site = Anglais (LTR) → le bord gauche de
.ad-containerest coupé (déborde à gauche). - Lorsque la langue du site = Persan/Arabe (RTL) → le bord droit est coupé (déborde à droite).
- Lorsque la langue du site = Anglais (LTR) → le bord gauche de
- Attendu : La carte d’annonce doit être entièrement contenue dans la vue, centrée ou alignée avec la largeur du contenu de la publication.
Mon code CSS :
Résumé
:root {
/* Couleurs de base */
--ad-bg: var(--secondary);
--ad-border: var(--highlight);
--ad-text: var(--primary);
/* Étiquette */
--ad-label-bg: var(--highlight);
--ad-label-text: var(--danger);
}
.house-creative {
margin-left: 0 !important;
}
.house-creative a.between-posts-ad {
display: block;
text-decoration: none;
color: inherit;
background-color: transparent;
font-family: inherit;
}
/* ===============================
Conteneur de carte
=============================== */
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
margin-bottom: 20px;
padding: 10px 5px;
max-width: calc(#{$topic-avatar-width} + #{$topic-body-width} + (#{$topic-body-width-padding} * 2)); background-color: var(--ad-bg);
border: 2px solid var(--ad-border);
border-radius: 10px;
box-sizing: border-box;
line-height: 1.7;
color: var(--ad-text);
transition:
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.2s ease;
}
.house-creative a.between-posts-ad:hover .ad-container {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.house-creative .ad-label {
display: inline-block;
text-align: center;
margin-bottom: 6px;
padding: 4px 12px;
font-size: 0.85em;
font-weight: 700;
text-transform: uppercase;
background-color: var(--ad-label-bg);
color: var(--ad-label-text);
border-radius: 999px;
}
.house-creative .ad-container .ad-text {
margin: 0;
font-size: 1rem;
line-height: 1.9;
color: var(--ad-text);
direction: rtl ;
text-align: center !important ;
unicode-bidi: isolate;
}
@media (max-width: 480px) {
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
padding: 16px 12px;
width: 100%;
max-width: 100%;
}
}
Horizon n’est pas compatible avec tous les composants et plugins (pour l’instant).
2 « J'aime »
lors de la participation à un groupe
lorsque vous ne participez pas à un groupe
L’en-tête et la conception de la barre latérale semblent avoir changé en raison de la modernisation du thème Foundation.
Je ne sais pas si c’est le bon endroit pour poster ceci, mais j’aime la façon dont Horizon sur Meta affiche quelques lignes de chaque sujet dans la vue de catégorie. Je n’arrive pas à le reproduire de mon côté et je ne sais pas par où commencer à chercher. Merci !!
4 « J'aime »
vous pouvez en lire plus ici
6 « J'aime »
9 messages ont été déplacés vers un nouveau sujet : Problème RTL avec le placement de @ dans les noms d’utilisateur
2 messages ont été déplacés vers un nouveau sujet : Vue compacte/développée ne fonctionne pas sur Horizon
2 messages ont été déplacés vers un nouveau sujet : Interaction Horizon avec l’en-tête de marque
Un message a été divisé dans un nouveau sujet : Problèmes de Flair sur Horizon
Un message a été divisé dans un nouveau sujet : Problème d’affichage des sous-catégories à deux niveaux
Je ne suis pas sûr si cela concerne Horizon ou le composant Header Categories Navbar. On m’a fait remarquer que la barre de menu sur Horizon commence tout à fait à gauche, contrairement à d’autres thèmes (Foundation pour comparaison), ce qui est étrange sur les écrans larges.
Horizon :
Foundation :
Est-ce souhaité ? Ou quelque chose qui pourrait nécessiter une correction ? Je dois dire que si la largeur du contenu est limitée, il me semblerait logique de ne pas avoir la barre de menu qui commence tout à fait à gauche.