Coins des catégories arrondis

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

Résolu Coins des catégories arrondis

Message par Lou Kass le Jeu 23 Fév 2017 - 16:48

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://katsuki-bns.forumactif.com/

Description du problème

Bonjour à toutes et à tous !
Voilà, j'ai un petit soucis d'ordre esthétique. Depuis deux jours, je cherche à arrondir les coins de mes catégories, afin d'obtenir ce genre de résultat :


J'ai fouillé tous les topics que j'ai pu trouver, tenté tous les CSS présentés, malgré tout le meilleur résultat que j'obtienne est ceci :


Voici ma page CSS. Je tiens a préciser que je n'y entends strictement rien, et que je me suis contenté de copier/coller tous les codes présentés ici.

Code:
.bodyline {
    -moz-border-radius:30px 30px 30px 30px; /* pour mozilla */
    -webkit-border-radius: 30px 30px 30px 30px; /* pour chrome et safari */
    border-radius:30px 30px 30px 30px; /* réglage des arrondis */}
   
 .mainmenu {
    font-family: 'Kaushan Script', cursive;
    font-size: large!important;
    }

  .secondarytitle {font-family: 'Kaushan Script', cursive;
                }
    a.secondarytitle, span.secondarytitle {
    color: #d4d4d4;
    }

  /* Titres catégories  */
    .secondarytitle h2 {
    font-size: 16px;
    height: 20px;
    }

.forumlink {font-family: 'Kaushan Script', cursive;}
    /* Suppression deux points pour annonce & post it */
    div.topictitle strong { display: none; }

    td.row1, td.row2, td.row3, td.row3right{
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;}
   
    td.row1:hover, td.row2:hover, td.row3:hover{
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;}

Quelque âme charitable aura-t-elle la bonté de m'éclaircir ? Merci d'avance !


Dernière édition par Lou Kass le Mar 28 Fév 2017 - 12:58, édité 1 fois
avatar

Lou Kass
Nouveau membre

Messages : 11
Inscrit(e) le : 23/02/2017

http://katsuki-bns.forumactif.com/
Lou Kass a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coins des catégories arrondis

Message par Firewhisky le Jeu 23 Fév 2017 - 20:00

Hellooo

Si dans ton CSS, tu essayes de rajouter :

Code:
.forumline tr:first-child th:first-child {
border-top-left-radius: 50px
}

.forumline tr:first-child th:last-child {
border-top-right-radius: 50px
}

Est-ce que ça marche ?

Firewhisky
Nouveau membre

Messages : 15
Inscrit(e) le : 21/05/2016

http://firewhisky.forumactif.com
Firewhisky a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coins des catégories arrondis

Message par Lou Kass le Ven 24 Fév 2017 - 4:09

Helloooo ! Merci de te pencher sur mon cas ! ^^

Alors, y a du mieux, mais c'est pas encore ça.


Le titre de la catégorie, c'est exactement ce que je voulais ! Mais ça continue de m'arrondir tous les coins de toutes mes cellules, alors que je ne voudrais que les coins du "pavé global" :


Est-ce faisable, au moins ? :/
avatar

Lou Kass
Nouveau membre

Messages : 11
Inscrit(e) le : 23/02/2017

http://katsuki-bns.forumactif.com/
Lou Kass a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coins des catégories arrondis

Message par Firewhisky le Ven 24 Fév 2017 - 19:29

Pour enlever les arrondis de toutes ton grillage, il faut retirer de ton css toute cette partie :

Code:
    td.row1, td.row2, td.row3, td.row3right{
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;}
 
    td.row1:hover, td.row2:hover, td.row3:hover{
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;}

Par contre, pour les coins arrondis en bas, étant donné que tu n'as pas de couleur de fond pour tes catégories, je t'avoue n'avoir aucune idée pour régler ce problème.... Essaye quand même peut-être :

Code:
.forumline {
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

Sinon, je n'en ai aucune idée, un petit up par ici ! Smile

Firewhisky
Nouveau membre

Messages : 15
Inscrit(e) le : 21/05/2016

http://firewhisky.forumactif.com
Firewhisky a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coins des catégories arrondis

Message par Lou Kass le Ven 24 Fév 2017 - 19:57

On progresse ! Ça m'a bien retiré les arrondis de toutes mes cellules, mais malgré ton dernier code les arrondis du bas du cadre restent carrés. :/
Merci quand même !
avatar

Lou Kass
Nouveau membre

Messages : 11
Inscrit(e) le : 23/02/2017

http://katsuki-bns.forumactif.com/
Lou Kass a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coins des catégories arrondis

Message par tupac le Sam 25 Fév 2017 - 11:46

Bonjour Lou,

Pourquoi ne pas créer une barre identique a celle du haut comme ceci.

avatar

tupac
Membre actif

Masculin
Messages : 2492
Inscrit(e) le : 13/10/2010

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

Résolu Re: Coins des catégories arrondis

Message par Lou Kass le Sam 25 Fév 2017 - 12:27

Ma foi, l'effet pourrait être pas mal ! Mais comment faire ?
avatar

Lou Kass
Nouveau membre

Messages : 11
Inscrit(e) le : 23/02/2017

http://katsuki-bns.forumactif.com/
Lou Kass a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coins des catégories arrondis

Message par tupac le Sam 25 Fév 2017 - 12:50

Le rendu sera je pense pas mal du tout, pas la peine de la faire aussi épaisse que celle du haut mais un peut plus fine, de toute façon elle sera modifiable en hauteur.

Il me faut par contre l'image de votre entête de catégorie, suivez le chemin suivant.

Panneau d'administration / Affichage / Gestion des images / Général Navigation / Image du fond des titres.
avatar

tupac
Membre actif

Masculin
Messages : 2492
Inscrit(e) le : 13/10/2010

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

Résolu Re: Coins des catégories arrondis

Message par Peggy06 le Sam 25 Fév 2017 - 13:24

Bonjour, à tous,
@ Lou Kass
J'ai trouvé ceci, si vous voulez arrondir juste le haut des catégories
Code:
.topiclist {
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
J'ai essayé et ça marche chez moi.
avatar

Peggy06
****

Messages : 306
Inscrit(e) le : 24/10/2014

http://evasionentrenous.forumactif.org/
Peggy06 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coins des catégories arrondis

Message par tupac le Sam 25 Fév 2017 - 13:44

Ca fonctionne chez vous parce que vous êtes en version phpbb3.
avatar

tupac
Membre actif

Masculin
Messages : 2492
Inscrit(e) le : 13/10/2010

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

Résolu Re: Coins des catégories arrondis

Message par Peggy06 le Sam 25 Fév 2017 - 13:47

Mais cela vient de sujets en phpbb2.
avatar

Peggy06
****

Messages : 306
Inscrit(e) le : 24/10/2014

http://evasionentrenous.forumactif.org/
Peggy06 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coins des catégories arrondis

Message par tupac le Sam 25 Fév 2017 - 14:12

En fait je l'ai dabord testé sur un phpbb2 sans succè puis sur un phpbb3 et le code a fonctionné.

Mais j'ai une alternative pour créer son arrondi.

Dans la template index_box tout en bas repérer la partie suivante.

Code:
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Juste avant placer ceci.
Code:
<div id="arrondi_bas_cat"></div>
Puis dans la feuille de style css ceci pour une bordure de couleur.
Code:
#arrondi_bas_cat{
  height: 15px; width: 100%;
  background: #454545;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  margin-top: -1px;
}

Celui-ci pour placer une image.
Code:
#arrondi_bas_cat{
  height: 15px; width: 100%;
  background-image: url('votre image ici') ;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  margin-top: -1px;
}
avatar

tupac
Membre actif

Masculin
Messages : 2492
Inscrit(e) le : 13/10/2010

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

Résolu Re: Coins des catégories arrondis

Message par Lou Kass le Lun 27 Fév 2017 - 12:02

Merci pour tous vos conseils !
J'aime l'idée de pouvoir y mettre une image, d'autant que ça collerait avec mon envie d'en mettre une en en-tête de la catégorie aussi. Mais du coup (vous allez me trouver ch*ant, à force), est-il possible d'en mettre une seule centrée, au lieu de la répéter sur toute la largeur de la catégorie ? Histoire que ça fasse symétrique avec la baninère du haut.
avatar

Lou Kass
Nouveau membre

Messages : 11
Inscrit(e) le : 23/02/2017

http://katsuki-bns.forumactif.com/
Lou Kass a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coins des catégories arrondis

Message par tupac le Mar 28 Fév 2017 - 0:37

Bonsoir,

Dans la template index_box repérer la partie suivante pour l'image du haut.
Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
Placer ceci juste après.
Code:
<div id="image_haut_cat"></div>

Remplacer le css que je vous ai donné par ces deux la.

Le css.
Code:
/*** image du haut ***/
#image_haut_cat{
  height: 15px;        /* hauteur de votre image */
  width: 400px;;      /* largeur de votre image */
  background-image: url("votre image ici") ;
  background-repeat: no-repeat;        /* évite que l'image se répète  */
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  margin-bottom: -1px;          /* marge bas de limage */
  margin-left: auto;        /* center automatiquement votre image */
  margin-right: auto;
}

/*** image du bas ***/
#image_bas_cat{
  height: 15px;        /* hauteur de votre image */
  width: 400px;;      /* largeur de votre image */
  background-image: url("votre image ici") ;
  background-repeat: no-repeat;        /* évite que l'image se répète  */
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  margin-top: -1px;          /* marge haut de limage */
  margin-left: auto;        /* center automatiquement votre image */
  margin-right: auto;
}
Pour l'image du bas j'ai changé la class du css en image_bas_cat donc faite en de même a celle du template c'est plus parlant que arrondi_bas_cat.
avatar

tupac
Membre actif

Masculin
Messages : 2492
Inscrit(e) le : 13/10/2010

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

Résolu Re: Coins des catégories arrondis

Message par Lou Kass le Mar 28 Fév 2017 - 12:58

C'est parfait, pile ce que je voulais ! Un grand merci à toute l'équipe !
avatar

Lou Kass
Nouveau membre

Messages : 11
Inscrit(e) le : 23/02/2017

http://katsuki-bns.forumactif.com/
Lou Kass 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