Arrondir toutes les parties d'un forum Punbb

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Arrondir toutes les parties d'un forum Punbb

Message par @To le Sam 27 Juin 2015 - 1:22

Détails techniques


Version du forum : PunBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.diamant-mandarin-evo.com/

Description du problème

Bonsoir,

Malgré mes recherches et essaies je n'ai pas trouver les codes CSS pour arrondir toutes les parties qui fonctionnerai sur mon forum sur PunBB.

Quelqu'un serais t-il me les indiquer? merci


Dernière édition par tony26 le Sam 27 Juin 2015 - 20:36, édité 1 fois

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par MlleAlys le Sam 27 Juin 2015 - 1:52

Bonjour,
De quels coins parlez vous lorsque vous dites "toutes les parties" ?

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par Silicat le Sam 27 Juin 2015 - 1:54

Bonsoir, si j'ai bien compris vous voulez des bords arrondie dans tous votre forum ?

si c'est bien cela vous pouvez essayé ce code dans votre Css
Code:
#wrap {
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
padding: 10px;
}

.forabg, .forumbg {
border: none;
}

div, table {
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border: none;
}
Si vous voulez adapter les arrondie il vous suffit de modifier les px Smile

En esperent que cela fonctionne. Cordialement Silicat

Silicat
Nouveau membre

Messages : 6
Inscrit(e) le : 16/06/2015

http://nogamenolifeeos.forum-invision.com/
Silicat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par @To le Sam 27 Juin 2015 - 1:55

Re bonsoir ^^

Je pense avoir trouver.. il doit sagir de #main{border-radius: 8px 8px; }

Par contre j'essaye de mettre un bord avec : border-width: 2px; border-color: grey; mais cela ne fonctionne pas.

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par MlleAlys le Sam 27 Juin 2015 - 2:04

Parce que l'informations nécessaire pour une bordure est en fait le style de bordure ^^ (largeur et couleur peuvent être laissées par défaut, mais sans le style la bordure n'apparait pas).
Pour une bordure "normale", c'est le stule "solid", ce qui donne :
border-style : solid;
border-width: 2px;
border-color :grey;


ou encore avec la propriété raccourcie :

border: 2px solid grey;

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par @To le Sam 27 Juin 2015 - 2:14

Ok super Smile ça fonctionne!

Par contre dans le bas j'obtiens une zone blanche..Edit: une zone bleu qui correspond a la couleur de fond du forum.


@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par MlleAlys le Sam 27 Juin 2015 - 2:29

Aplliquez votre code à #main-content plutôt qu'à #main ^^
ce qui donne :
Code:
#main-content {
  border-color: grey;
  border-radius: 0 0 8px 8px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 1px 1px 1px grey;
}

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par @To le Sam 27 Juin 2015 - 2:35

Ok merci ^^

La partie #main et #main-content ont une teinte différente, ça se voit.. hum comment faire scratch

Il n'est pas possible d'éviter que cette petite zone en bas ce rajoute lorsque l'on ajoute le bord gris apparemment?

Edit: en fait la couleur du bord s'applique à la partie #main et #main-content.. il faudrait quelle ne s'applique pas à la partie #main.

Enfin je m'essaye lol

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par MlleAlys le Sam 27 Juin 2015 - 3:03

Ah effectivement il y a un effet de marge qui apparait... On peu la retirer facilement, mais du coup l'arrondi n'est plus visible, et il faut le réappliquer aux éléments du QEEL.
Ajoutez ces codes :
Code:
#pun-info {
  margin-bottom: 0px;
}
#pun-info .main-content, #onlinelist {
  border-radius: 0 0 6px 6px;
}

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par @To le Sam 27 Juin 2015 - 3:09

Super! Very Happy

Le #onlinelist: c'est pour le bas, mais la 1er ligne c'est pour quelle partie? (je commence à comprendre le fonctionement.. ^^)

Edit: l'effet de marge est encore présent dans les "groupes" "membres" "connexion" ..

Bonne nuit


@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par MlleAlys le Sam 27 Juin 2015 - 12:29

#pun-info correspond à l'ensemble du qeel ^^
En fait ce qui est embêtant c'est que les blocs de contenu sont emboîtés les uns dans les autres, et qu'il faut à chaque fois sur les pages retrouver celui qui a une marge, et il faut appliquer l'arrondi à chacun de ses éléments "enfant" pour éviter que des coins carrés ne dépassent.

Essayez de remplacer
Code:
#pun-info {
  margin-bottom: 0px;
}
par
Code:
#main-content > .main:last-of-type, #main-content > .main:last-of-type > .main-content {
  margin-bottom: 0;
  border-radius: 0 0 5px 5px;
}
(ici le symbole ">" signifie que l'élément à droite doit être directement à l'intérieur du premier, et :last-of-type est une pseudo-type qui permet de ne sélectionner que les derniers de leur type s'il y en a plusieurs, ceci dans le but de faire agir le code css seulement sur ceux qui sont tout en bas de la page, j'espère que ça fonctionnera comme il faut cette fois ^^")

(si vous souhaitez découvrir un peu plus le fonctionnement, vous pouvez également utiliser les outils de développement de votre navigateur (clic droit > inspecter l'élément) qui vous met face à face le code html des éléments et à côté le css associé à l'élément sélectionné. Wink )

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par @To le Sam 27 Juin 2015 - 13:01

Bonjour ^^

Hum je m'y perds un peu.

J'ai modifié auparavant mon CSS de cette façon:

Code:
#main-content {background: rgb(237, 236, 232); border-radius: 6px 6px 6px 6px;
border-style : solid; border-width: 1px; border-color :grey;}                               
#pun-info { margin-bottom: 0px;}
#pun-info .main-content, #onlinelist {  border-radius: 0 0 8px 8px;}

Où dois-je mettre le dernier code que vous me proposez svp (pour ne pas surcharger le CSS):

Code:
#main-content > .main:last-of-type, #main-content > .main:last-of-type > .main-content {
  margin-bottom: 0;
  border-radius: 0 0 5px 5px;
}

scratch

Sinon, oui j'ai déjà remarqué: le clic droit> inspecter l’élément Very Happy au fur et à mesure je commence à décrypter.

J'aurais bien voulu connaître tout les préfixes (#pun; #main etc) de la version PunBB, il n'existe pas un tableau qui les répertories? par exemple le préfixe pour l'affichage des annonces m’intéresse..

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par MlleAlys le Sam 27 Juin 2015 - 14:37

Essayez ainsi :
Code:
#main-content {background: rgb(237, 236, 232); border-radius: 6px 6px 6px 6px;
border-style : solid; border-width: 1px; border-color :grey;}                             
#main-content > .main:last-of-type, #main-content > .main:last-of-type > .main-content { margin-bottom: 0; border-radius: 0 0 5px 5px; }
#pun-info .main-content, #onlinelist {  border-radius: 0 0 8px 8px;}

Pour les "préfixes", ça s'appelle en fait des identifiants ou des classes ^^

- Un identifiant est unique, appliqué à un seul élément de la page.
On applique un identifiant à un élément html en ajoutant id="blabla" dans la balise de cet élément.
Et pour mettre en forme cet élément via la feuille de style css, on ajoute # devant l'identifiant, ce qui donne
#blabla { mise en forme; }
En utilisant un identifiant, vous êtes certain que c'est le seul élément qui sera modifié.

- Les classes permettent de mettre en forme plusieurs éléments en même temps, comme des catégories. Plusieurs éléments peuvent donc avoir la même classe.
On applique une classe à un élément html en ajoutant class="blabla" dans la balise de cet élément. Un élément peut être dans plusieurs classes, dans ce cas elles sont juste séparées par un espace : class="blabla truc" (ici l'élément aura la mise en forme de la class blabla et de la class truc ^^).
Pour mettre en forme tous les éléments d'une même classe via une feuille de style css, il faut ajouter un point devant le nom de la class, ce qui done
.truc { mise en forme; }
En utilisant une classe, tous les éléments qui auront cette classe seront modifiés (sauf si un autre code est contradictoire et "écrase" celui là bien sûr =P).

Si vous inspectez le passage des annonces, vous trouverez du côté html plusieurs éléments emboîtés les uns dans les autres, avec des classes et identifiants divers, qui servent à la mise en forme des annonces. Il faut alors trouver celui ou ceux qui vous intéresse vraiment en fonction des modifications que vous souhaitez faire.

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par @To le Sam 27 Juin 2015 - 15:06

Merci pour ces explications! Very Happy

Je vais le relire plusieurs fois ^^, tout ceci est une gymnastique.. une langue bien précise à assimiler.
Je m'en servirais pour la suite Wink .

J'ai changer le code sur le forum d'essai, cela n'à pas changer l'aspect bordure. J'ai comparais avec mon forum (de base) pour en être sûr.

Edit: les bordures ont disparus dans FAQ par exemple, mais pas dans membre, s'enregistrer. Bon je chipote, oups pirat


@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par MlleAlys le Sam 27 Juin 2015 - 16:45

Dernière tentative, si ça ne fonctionne pas, à mon avis, ça va être lourd et embêtant de trouver les codes pour toutes les marges en bas sans toucher aux autres, à supposer qu'on y arrive...
Code:
#main-content {background: rgb(237, 236, 232); border-radius: 6px 6px 6px 6px;
border-style : solid; border-width: 1px; border-color :grey;}
#main-content>*:last-child { margin-bottom: 0; border-radius: 0 0 5px 5px; }
#pun-info .main-content, #onlinelist {  border-radius: 0 0 8px 8px;}

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par @To le Sam 27 Juin 2015 - 16:59

L'avant dernier code enléve la bordure dans la fenêtre de connexion,pas ce dernier.

Je vais laisser l'avant dernier:
Code:
#main-content {background: rgb(237, 236, 232); border-radius: 6px 6px 6px 6px;
border-style : solid; border-width: 1px; border-color :grey;}                           
#main-content > .main:last-of-type, #main-content > .main:last-of-type > .main-content { margin-bottom: 0; border-radius: 0 0 5px 5px; }
#pun-info .main-content, #onlinelist {  border-radius: 0 0 8px 8px;}

Il résoud presque tout les masques. Le résultat est correcte Very Happy (à trop en vouloir.. lol)

Merci MlleAlys du temps passé à m'aider ^^

J'ai essayé de retrouver le code (en faisant inspecter l’élément) pour appliquer un redimensionnement automatique pour la zone des annonces.. mais sans succès pour l'instant.. je crois que je vais encore perdre des cheveux! Sourire2

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par MlleAlys le Sam 27 Juin 2015 - 20:35

Pour les annonces, il me semble que vous avez déjà ouvert un autre sujet.
Pour celui-ci, on laisse comme ça du coup ? Le sujet est-il résolu ?

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir toutes les parties d'un forum Punbb

Message par @To le Sam 27 Juin 2015 - 20:36

Oui exact. Je mets résolu, encore merci et bonne soirée ^^

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum