"Cadre" arrondi

[MissCindy]

Bonjour !

Après avoir eu énormément d'aide sur le forum, je cherche à apporter quelques modifications sur mon qeel.

https://2img.net/h/oi51.tinypic.com/2w4zd77.jpg

J'aimerais donc mettre un cadre autour de.. tout.
& faire aussi l'arrondi au dessus de mes groupes.

Merci !

[Lixyr]

Bonjour.

Êtes vous en phpbb2 ?
Avez vous déjà opéré des changements sur le template index_body ?
Si oui, pouvez-vous poster son contenu dans votre prochaine réponse, ainsi qu'une petite image de ce que vous voulez exactement.

[MissCindy]

Oui je suis en phpbb2.
Voici mon index_body modifié :

Spoiler:

& ... j'ai donné au-dessus un schéma des modifications que j'aimerais obtenir. Le cadre autour & l'arrondi qui passe au-dessus des groupes.

[Lixyr]

Okay, alors faites comme ceci pour les arrondis :

Code:


-moz-border-radius : 8px;
border-radius:8px;
-webkit-border-radius:8px;

à rajouter dans un css ou dans un style.


Dans votre cas on va faire ça avec un style directement dans le template. Ça sera plus simple. Faites donc ainsi, pour les deux cellules des statistiques:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">


<table><tr><center><span class="groupes"> <a href="url"><font color="#111111" size="1,5"><b>groupe</b></font></a></span>

<span class="groupesch"> <a href="url"><font color="#53B572" size="1,5"><b>groupe</b></font> </a></span></center></tr><tr>

<td style="background: #f7f7f7; width: 50%;-moz-border-radius : 8px;
border-radius:8px;
-webkit-border-radius:8px;"><span class="gensmall">{TOTAL_POSTS}.
{TOTAL_USERS}.

{NEWEST_USER}. </span>

<span class="gensmall">{TOTAL_USERS_ONLINE} <br />
<br /> <br />
{LOGGED_IN_USER_LIST}</span><br />


<br />
<!-- BEGIN switch_chatbox_activate -->

<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}

<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>

<!-- END switch_chatbox_activate -->

</td> <td style="width: 2px; border-right:1px solid #DEE3E7;"></td>

<td style="background: #F7F7F7; width:50%; vertical-align : top;-moz-border-radius : 8px;
border-radius:8px;
-webkit-border-radius:8px;">
<table style="-moz-border-radius: 10px>{L_CONNECTED_MEMBERS}</table></td></tr>

</table>
<!-- END disable_viewonline -->

Code:

<!-- BEGIN disable_viewonline -->
        <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       

<table><tr><center><span class="groupes">  <a href="url"><font color="#111111" size="1,5"><b>groupe</b></font></a></span>

        <span class="groupesch">  <a href="url"><font color="#53B572" size="1,5"><b>groupe</b></font>        </a></span></center></tr><tr>
           
<td style="background: #f7f7f7; width: 50%;-moz-border-radius : 8px;
border-radius:8px;
-webkit-border-radius:8px;"><span class="gensmall">{TOTAL_POSTS}.
              {TOTAL_USERS}.

              {NEWEST_USER}.  </span>
   
<span class="gensmall">{TOTAL_USERS_ONLINE} <br />   
<br /> <br />
              {LOGGED_IN_USER_LIST}</span><br />


<br />
          <!-- BEGIN switch_chatbox_activate -->

                <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

                    <!-- BEGIN switch_chatbox_popup -->
                    <div id="chatbox_popup"></div>
                    <script type="text/javascript">
                    //<![CDATA[
                    insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                    //]]>
                    </script>
                    <!-- END switch_chatbox_popup -->
                </span>

          <!-- END switch_chatbox_activate -->

</td> <td style="width: 2px; border-right:1px solid #DEE3E7;"></td>
 
      <td style="background: #F7F7F7; width:50%; vertical-align : top;-moz-border-radius : 8px;
border-radius:8px;
-webkit-border-radius:8px;">
          <table style="-moz-border-radius: 10px>{L_CONNECTED_MEMBERS}</table></td></tr>

        </table>
        <!-- END disable_viewonline -->

<td style="background: #F7F7F7; width:50%; vertical-align : top;-moz-border-radius : 8px;
border-radius:8px;
-webkit-border-radius:8px;">

Il suffit de changer la valeur 8 par la valeur qui vous sied le plus.


Ensuite, pour le reste, il suffit d'encadrer le tout avec une table, et de faire pareil : incorporer un style="" pour pouvoir placer le code des arrondis dedans, comme je l'ai fait avec vos cellules.



---------------------------


par contre si je puis me permettre, dans cette partie de code :

Code:

<table><tr><center><span class="groupes">  <a href="url"><font color="#111111" size="1,5"><b>groupe</b></font></a></span>

        <span class="groupesch">  <a href="url"><font color="#53B572" size="1,5"><b>groupe</b></font>        </a></span></center></tr>

il vous manque des cellules :

Code:

<td></td>

ce sera mieux, je pense.

[MissCindy]

Alors... en fait c'est pas tout à fait cet arrondi que je cherchais.
Je visais plutôt l'espèce d'arc que j'ai dessiné (de façon pas très classe j'avoue) au-dessus.

En tout cas je prends ça quand meme & merci pour l'explication très claire !

[Lixyr]

C'est possible aussi de faire un arrondis qui ne se marque que pour les angles du dessus.

Il faut juste rajouter des 8px dans le code, comme ceci :

Code:


-moz-border-radius : 8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
-webkit-border-radius:8px 8px 8px 8px;

ainsi tu as un px pour chaque arrondis à définir.

Alors
le premier px défini l'angle du haut à gauche.
ensuite tu tournes dans le sens des aiguilles d'une montre.

Si tu ne veux pas d'angle marqué, tu mets 0px;

Toi, au vu de ton shéma, tu voudrais un

Code:


-moz-border-radius : 25px 25px 0px 0px;
border-radius:25px 25px 0px 0px;
-webkit-border-radius:25px 25px 0px 0px;

pour les groupes du moins. Quelque chose dans ce style-là ?

Ensuite, tu bidouilles les chiffres comme ça te plait jusqu'à ce que tu trouves chaussure à ton pied.



--------------------


*edit* et au cas où tu n'arriverais vraiment pas à atteindre le résultat escompté, la cellule étant trop haute, tu peux toujours te rabattres sur une image de fond.

[MissCindy]

J'ai essayé mais... ça ne change rien.
L'arrondi, je ne le veux pas sur mon tableau.

https://2img.net/h/oi51.tinypic.com/u7bqb.jpg

J'aimerais reconstituer l'arc violet que j'ai maladroitement tracé xD

[Lixyr]

Oui, vu l'angle que fait ton arc, je crois qu'il va te falloir une image de fond

Ah moins de mettre un angle arrondis vraiment énorme.

Code:

-moz-border-radius : 90px 90px 0px 0px;
border-radius:90px 90px 0px 0px;
-webkit-border-radius:90px 90px 0px 0px;

ça semble fonctionner.

Test un peu ce code :

Code:

      <!-- END switch_user_login_form_footer -->
    <center>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .</center><!-- BEGIN disable_viewonline -->
        <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       

<table><tr><td colspan="3" style="border:1px solid red;"><center><div style="background: #f7f7f7; width: 50%;-moz-border-radius : 90px 90px 0px 0px;
border-radius:90px 90px 0px 0px;
-webkit-border-radius:90px 90px 0px 0px;"><span class="groupes">  <a href="url"><font color="#111111" size="1,5"><b>groupe</b></font></a></span>

        <span class="groupesch">  <a href="url"><font color="#53B572" size="1,5"><b>groupe</b></font>        </a></span></div></center></td></tr>

<tr>

c'est un petit bout, tu peux facilement retrouver où ça se place. Ça semble fonctionner un peu comme tu le souhaites en tout cas.

[MissCindy]

Ah voilà, c'est parfait comme ça !
Merci beaucoup !

[Lixyr]

Je t'en prie. Autre chose ?

[MissCindy]

Euh, oui !
Peut-être mettre un cadre comme sur ma capture, autour : https://2img.net/h/oi51.tinypic.com/2w4zd77.jpg
J'pense connaitre le code mais j'ai un souci pour les placer correctement parmi tout ça.

[Lixyr]

Alors, soit le mettre dans la ligne, comme ceci :

<tr style="border:1px solid #666;">

<td style="background: #f7f7f7; width: 50%;-moz-border-radius : 8px;
border-radius:8px;
-webkit-border-radius:8px;"><span class="gensmall">{TOTAL_POSTS}.
{TOTAL_USERS}.

Code:

<tr style="border:1px solid #666;">
         
<td style="background: #f7f7f7; width: 50%;-moz-border-radius : 8px;
border-radius:8px;
-webkit-border-radius:8px;"><span class="gensmall">{TOTAL_POSTS}.
              {TOTAL_USERS}.

soit fermer la table qui contient l'arc de cercle et en ré ouvrir une pour englober les deux cellules des statistiques.

Comme vous voulez.

[Anzu]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif