[Problème] Boostrap /forum/template

[Casper17]

Bonjour,

j'ai un template fait avec Template creator et un forum kunena 5 + Template (demo du template ici).

j'ai des souci de mise en page, mon forum ne ressemble réellement au template de la demo, de plus en termes de CSS j'ai des attributions qui "croise" j'ai les css du template qui prenne le dessus sur ceux du forum
Ces 2 système utilisent boostrap pensez vous qu'il puisse y avoir des conflits ?

le site n'est pas encore dispo en ligne

[PhilJ]

Re : Boostrap /forum/template

[...] j'ai des souci de mise en page, mon forum ne ressemble réellement au template de la demo, de plus en termes de CSS j'ai des attributions qui "croise" j'ai les css du template qui prenne le dessus sur ceux du forum : (
Ces 2 système utilisent boostrap pensez vous qu'il puisse y avoir des conflits ?

Je ne parlerais pas de conflit mais plutôt de prééminence.

Par exemple, si la feuille de style template.css contient
—

body {

color: black;

}

tandis que kukena.css contient
—

body {

color: blue;

}

la couleur par défaut (body) des textes sera :

1. black <= si l'ordre de chargement est d'abord kukena.css puis template.css
2. blue <= si l'ordre de chargement est d'abord template.css puis kukena.css

Le principe est simple : c'est le dernier qui a parlé qui a raison.

Pour connaître l'ordre de chargement, il suffit de regarder le code source d'une page (= CTRL+U).

La solution est toujours la même : autant que possible ne rien modifier de l'existant (= ni template.css, ni kukena.css) de façon à éviter l'écrasement lors des mises à jour, mais plutôt mettre en place une feuille de style jouant un rôle de surcharge (anglais override). Évidemment, en raison du principe ci-dessus évoqué, l'idéal est que ce fichier de style (souvent nommé custom.css) intervienne en dernier lors du chargement, car alors ce sont ses directives qui l'emporteront — quitte à ajouter un attribut !important pour les propriétés qui auraient déjà cet attribut.

________________

Concernant Bootstrap : il faut faire attention car il existe à l'heure actuelle deux bootstrap, la version 2 et la version 3. Certains classes CSS peuvent ne pas être reconnues si le template et le composant ne sont pas tout à fait sur la même longueur d'onde.

[Casper17]

Re : Boostrap /forum/template

Bonjour, tout d'abord merci pour votre répondre. Les deux composants utilise un fichier custom

[lomart]

Re : Boostrap /forum/template

Salut Casper,

Je ne pense pas que tu as des conflits entre Kunena et les autres, car Kunena ajoute un ID en tête de toutes ses règles CSS pour spécifié qu'il est le seul concerné. Exemple: #Kunena #ktop { ... }

Pour Bootstrap, ils ne font qu'utiliser les règles existantes. Par sécurité, il faut éviter d'utiliser en même temps BS2 et BS3 pour d'une part ne pas alourdir le site et éviter d'éventuels conflits. Je n'ai pas comparé les sélecteurs utilisés, mais pour les principaux, ils sont différents.

[PhilJ]

Re : Boostrap /forum/template

Bonjour,

Les deux composants utilise un fichier custom

Ce sont les règles du second dans l'ordre du chargement qui l'emportent sur les règles du premier (il est facile de vérifier quel est l'ordre en regardant code source). Cela dit, lomart a raison : les règles CSS de Kukena sont toujours préfixées avec #kunena. Par exemple les titres des catégories sur la page http://kunena-templates.9themestore.com/#nts_kay peuvent être ciblés avec #kunena.layout .kcol-cat-title .cat-title ou avec #kunena.layout .kcol-cat-title h3 ou encore avec #kunena.layout .kcol-topic-title h3 (selon la propriété visée).

Il faudrait vous assurer que kukena et le template utilisent bien tous deux la même version de Bootstrap, car le mélange des deux peut en effet provoquer des irrégularités.



Cordialement,

[Casper17]

Re : Boostrap /forum/template

Salut @lomart et @philj

Merci de votre aide

le template que j'utilise NTS_KAY utilise les caractéristiques du forum pour les H3, les liens etc... du coup même si je ne charge pas boostrap 2 avec le template mais que je charge boostrap 3 pour le forum, le design se casse la figure
C'est surement une volonté des dev du template pour qu'il se fonde au plus grand nombre de template facilement.

[lomart]

Re : Boostrap /forum/template

Bonsoir Casper,

Je viens de jeter un oeil sur la demo http://kunena-templates.9themestore.com/#nts_kay
Il n'y a pas de raison qu'il ne fonctionne pas. Les règles sont bien isolées dans l'espace #kunena.layout

Tu dis charger les bootstrap. Normalement les templates s'en chargent tout seuls. N'aurais-tu pas un conflit avec plusieurs versions ?

Si le site est visible, je peux jeter un oeil ...

[Casper17]

Re : Boostrap /forum/template

salut,

le site n'est pas visible pour l'instant; les devs du template vont jeter un oeil demain j'ai un souci sur certaines class et sur les css des liens. Je peux te creer un compte temporaire si cela ne te dérange pas @lomart
Il faut absolument que je me rencarde mieux sur ce bootstrap :s

[lomart]

Re : Boostrap /forum/template

Je peux te creer un compte temporaire si cela ne te dérange pas

Pas de souci, tu as éveillé ma curiosité.

[Casper17]

Re : Boostrap /forum/template

RE,
je t'ai envoyé le tout en MP sois indulgent c'est en construction

[lefabdu51]

Re : Boostrap /forum/template

salut,
dit moi....

tu est dev en formation......

Donc que dit firebug?

Si c est un conflit css, tu devrais t en sortir grace à lui...

Profites aussi de la console pour verifier les erreurs JS..

Et ce sera aussi un bon moyen de t aider.

Verifies aussi que c est la même version de bootsrap dans les deux cas.

[lomart]

Re : Boostrap /forum/template

Merci pour le lien.
Je poste ici la réponse si cela peut servir à d'autres

A mon avis, pas de conflit de bootstrap, mais un simple problème de poids du sélecteur pour la règle CSS

Tu constates que la classe bootstrap .img-circle {border-radius: 500px;} ne fonctionne pas quand elle est utilisée dans le forum.

Cela vient du fait que Kunena définit cette règle (je ne conserve que les propriétés utiles dans notre cas) :

#kunena.layout .kcol-cat-lastpost .user-avatar img { border-radius: 2px; }

Ce sélecteur qui a un poids (ou priorité) élevé dit que toutes les images dans le forum ont un arrondi de 2px et non de 500px

Pour corriger cela, comme j'exclue de modifier le CSS existant pour des raisons de mises à jour, il faut ajouter une règle CSS dans ton custom.css.

#kunena.layout .kcol-cat-lastpost .user-avatar img.img-circle { border-radius: 500px; }

C'est dommage que Kunena redéfinisse le style des balises de base. Il aurait été préférable d'affecter une classe (css et php), aux images des avatars. exemple: #kunena.layout img.user-avatar { border-radius: 2px; } qui concernerait que les images de classe user-avatar et non toutes les images du bloc user-avatar

Bonne journée

[Casper17]

Re : Boostrap /forum/template

@lefabdu51 salut,
dit moi....

tu est dev en formation......

Je me forme sur mon temps perso effectivement via une plateforme en ligne pour ma culture G.

Si c est un conflit css, tu devrais t en sortir grace à lui...
Profites aussi de la console pour verifier les erreurs JS..
Et ce sera aussi un bon moyen de t aider.

je vais regarder par là aussi il faut que je prennent l'habitude de regarder Firbug

@lomart Merci pour le lien.
Je poste ici la réponse si cela peut servir à d'autres

Merci à toi d'avoir regardé.
je vais devoir faire pareil pour les liens <a> du cou

@lomart Ce sélecteur qui a un poids (ou priorité) élevé dit que toutes les images dans le forum ont un arrondi de 2px et non de 500px

Qu'est ce qui me permet d'identifier le "poids" ?

Merci à tous ( on apprend aussi sur ce forum )

[lomart]

Re : Boostrap /forum/template

Qu'est ce qui me permet d'identifier le "poids" ?

Au premier coup d'oeil le nombre de classes et d'id en sachant qu'une règle dans un attribut style sera prioritaire. Idem si présence d'un !important en fin de propriété.

Une façon pratique: firebug. Les règles sont affichées dans l'ordre des priorités des sélecteurs. !important est un cas particulier puisqu'il cible une propriété et non un sélecteur. Si tu modifies le sélecteur, tu verras la règle se déplacer dans la liste.

Pour en savoir plus, regarde ceci : http://blog.organicweb.fr/comprendre...des-regles-css

[Casper17]

Re : Boostrap /forum/template

http://blog.organicweb.fr/comprendre...des-regles-css

Ah ah impec l'explication elle est prevu pour les cas difficiles comme moi hein
merci pour ces explications c'est gentil.