Coin arrondi dans le calendrier (calendar + Widget)

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

Résolu Coin arrondi dans le calendrier (calendar + Widget)

Message par Archimus le Dim 15 Nov 2015 - 21:41

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Lien du forum : http://toadius-dmh.forumactif.be/calendar

Description du problème

Bonjour,

Je souhaiterai faire des coins arrondis pour chaque jour avec une couleur différente que le fond du forum. Avez-vous un code CSS, je voudrais que ça ressemble à un truc dans ce style, c'est un exemple, imaginez les dates dessus ^^



Ma deuxième question, comment puis-je mettre le calendrier Widget comme le format de widget de mon portail ?


Merci.
Bonne journée.


Dernière édition par Archimus le Ven 20 Nov 2015 - 14:10, édité 1 fois

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coin arrondi dans le calendrier (calendar + Widget)

Message par Archimus le Lun 16 Nov 2015 - 16:45

Je me permets de UP

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coin arrondi dans la calendier (calendar + widget)

Message par Feuilla' le Lun 16 Nov 2015 - 17:47

Bonjour,
collez ce code dans la Feuille de style :
Code:
#calendar .center {
   -moz-border-radius: 40px;
   -webkit-border-radius: 40px;
  border-radius: 40px;}
"40px" à modifier si besoin par un autre nombre/chiffre. Wink
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Coin arrondi dans le calendrier (calendar + Widget)

Message par Archimus le Lun 16 Nov 2015 - 18:32

Bonjour,

Votre code ne fonctionne pas. Je parle bien du calendrier : http://toadius-dmh.forumactif.be/calendar

Bonne journée.

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coin arrondi dans la calendier (calendar + widget)

Message par Feuilla' le Lun 16 Nov 2015 - 19:20

Re,
en remplaçant la première partie du code, comme ceci :
Code:
        .genmed {
          -moz-border-radius: 40px;
          -webkit-border-radius: 40px;
          border-radius: 40px;}
(attention il se peut que d'autres parties soient touchées)
Bonne soirée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Coin arrondi dans le calendrier (calendar + Widget)

Message par Archimus le Lun 16 Nov 2015 - 20:26

Bonjour,

J'ai modifié le .genmed par .genme, avez-vous d'autres codes que je peux appliquer sur le css pour structurer le tableau ?

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coin arrondi dans la calendier (calendar + widget)

Message par Feuilla' le Mar 17 Nov 2015 - 13:33

Re-Bonjour,
@Archimus a écrit:avez-vous d'autres codes que je peux appliquer sur le css pour structurer le tableau ?
il y a ce code pour les jours de la semaine :
Code:
th {
            -moz-border-radius: 40px;
          -webkit-border-radius: 40px;
          border-radius: 40px;}
(qui va aussi les arrondir)
Wink
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Coin arrondi dans le calendrier (calendar + Widget)

Message par Archimus le Mar 17 Nov 2015 - 16:32

Bonjour,

Comment faire pour rétrécir les colonnes du tableau ?

Bonne journée.

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coin arrondi dans la calendier (calendar + widget)

Message par Feuilla' le Mar 17 Nov 2015 - 19:18

Re,
ceci sans garantie
Code:
th {width:10px;}
Toujours dans la Feuille de style CSS. Smile
Le "10" à changer si besoin par un autre nombre/chiffre.
Bonne soirée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Coin arrondi dans le calendrier (calendar + Widget)

Message par R-max le Mar 17 Nov 2015 - 22:03

bonjour a vous , le calendar en phpbb2 a les mêmes identifiant que l'ensemble du forum , le mieux serait de modifier la class .forumline en id="calendar_forum" class="forumline" dans le Template
ensuite vous pouvez transformé a votre guise , le décors en agissent sur l'id calendar_forum.

ex>>
Code:
<table id="calendar_forum" class="forumline" bla bla bla >

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coin arrondi dans le calendrier (calendar + Widget)

Message par Archimus le Mer 18 Nov 2015 - 8:34

Bonjour,

J'appliquerai vos conseils cet après-midi. J'ai essayé, mais le résultat est une catastrophe. Si vous pouviez m'aider à paramétrer correctement mon HTML, je vous en serai reconnaissant.

Code:
<!-- BEGIN _calendar_box -->
<table align="center" cellpadding="0" cellspacing="1" border="0" width="100%" class="forumline">
<tr>
   <td align="center" class="catHead" colspan="{_calendar_box.SPAN_ALL}" width="100%">
      <form name="_calendar" method="post" action="{_calendar_box.S_ACTION}">
      <table cellpadding="0" cellspacing="0" border="0">
      <tr>
         <td>&nbsp;</td>
         <td class="gensmall">&nbsp;
            <!-- BEGIN switch_not_anonymous -->
            <b><a href="{_calendar_box.U_PREC}" class="gen" rel="nofollow">«</a></b>&nbsp;
            <!-- END switch_not_anonymous -->
      </td>
         <td width="100%" align="center">{_calendar_box.S_MONTH}{_calendar_box.S_YEAR}&nbsp;{_calendar_box.S_FORUM_LIST}&nbsp;<input type="submit" value="{_calendar_box.L_GO}" class="liteoption" /></td>
         <td class="gensmall">&nbsp;
            <!-- BEGIN switch_not_anonymous -->
            <b><a href="{_calendar_box.U_NEXT}" class="gen" rel="nofollow">»</a></b>&nbsp;
            <!-- END switch_not_anonymous -->
         </td>
         <td>&nbsp;</td>
      </tr>
      </table>
      </form>
   </td>
</tr>
<tr>
   <!-- BEGIN _cell -->
   <th width="{_calendar_box.switch_full_month._cell.WIDTH}%" nowrap="nowrap">{_calendar_box._cell.L_DAY}</th>
   <!-- END _cell -->
</tr>
<!-- BEGIN _row -->
<tr>
   <!-- BEGIN _cell -->
   <!-- BEGIN switch_filled_no -->
   <td class="row3" colspan="{_calendar_box._row._cell.SPAN}" width="{_calendar_box._row._cell.WIDTH}%">&nbsp;</td>
   <!-- END switch_filled_no -->
   <!-- BEGIN switch_filled -->
   <td class="row1" valign="top" colspan="{_calendar_box._row._cell.SPAN}" width="{_calendar_box._row._cell.WIDTH}%">
      <table cellspacing="0" cellpadding="0" width="100%" height="94" valign="top">
      <tr>
         <td class="row2" align="center" height="4" nowrap="nowrap">
            <span class="genmed">{_calendar_box._row._cell.U_DATE}</span>
            <!-- BEGIN switch_add_event_day -->
            &nbsp;<a href="{_calendar_box._row._cell.switch_filled.switch_add_event_day.U_CREATE_EVENT}"><img src="http://illiweb.com/fa/subsilver/icon_mini_calendar.gif" border="0" alt="{L_ADD_EVENT}" title="{L_ADD_EVENT}" /></a>
            <!-- END switch_add_event_day -->
         </td>
      </tr>
      <tr valign="top">
         <td class="row1" nowrap="nowrap">
            <table cellspacing="0" cellpadding="0" width="100%" valign="top">
            <!-- BEGIN _event -->
            <!-- BEGIN switch_event -->
            <tr>
               <td class="row1" nowrap="nowrap" align="left"><span class="genmed">{_calendar_box._row._cell.switch_filled._event.switch_event.EVENT_TYPE}<a rel="nofollow" href="{_calendar_box._row._cell.switch_filled._event.switch_event.U_EVENT}" {_calendar_box._row._cell.switch_filled._event.switch_event.OVERVIEW_MESSAGE} class="{_calendar_box._row._cell.switch_filled._event.switch_event.EVENT_CLASS}" style="font-style:normal;font-weight:normal;">{_calendar_box._row._cell.switch_filled._event.switch_event.EVENT_TITLE}</a></span></td>
               <!-- BEGIN _more -->
               <td class="row1" align="right"><span class="genmed"><a href="#" onClick="hdr_toggle('calendar_display_extend_{_calendar_box._row._cell.switch_filled.EVENT_DATE}','calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}', '{DOWN_ARROW}', '{UP_ARROW}'); return false;" class="gensmall">...<img src="{_calendar_box._row._cell.switch_filled.TOGGLE_ICON}" id="calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}" hspace="2" border="0" /></a></span></td>
               <!-- END _more -->
               <!-- BEGIN _more_no -->
               <td></td>
               <!-- END _more_no -->
            </tr>
            <!-- END switch_event -->
            <!-- BEGIN switch_event_no -->
            <tr>
               <td class="row1"><span class="genmed">&nbsp;</span></td>
               <!-- BEGIN _more -->
               <td class="row1" align="right"><span class="genmed"><a href="#" onClick="hdr_toggle('calendar_display_extend_{_calendar_box._row._cell.switch_filled.EVENT_DATE}','calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}', '{DOWN_ARROW}', '{UP_ARROW}'); return false;" class="gensmall">...<img src="{_calendar_box._row._cell.switch_filled.TOGGLE_ICON}" id="calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}" hspace="2" border="0" /></a></span></td>
               <!-- END _more -->
               <!-- BEGIN _more_no -->
               <td></td>
               <!-- END _more_no -->
            </tr>
            <!-- END switch_event_no -->
            <!-- BEGIN _more_header -->
            <tbody id="calendar_display_extend_{_calendar_box._row._cell.switch_filled.EVENT_DATE}" style="display:{_calendar_box._row._cell.switch_filled.TOGGLE_STATUS}">
            <!-- END _more_header -->
            <!-- BEGIN _more_footer -->
            </tbody>
            <!-- END _more_footer -->
            <!-- END _event -->
            </table>
         </td>
      </tr>
      </table>
   </td>
   <!-- END switch_filled -->
   <!-- END _cell -->
</tr>
<!-- END _row -->
<tr>
   <td class="catbottom" align="center" colspan="{_calendar_box.SPAN_ALL}" width="100%">
   &nbsp;
   <!-- BEGIN switch_add_event -->
   <form action="{S_CREATE_EVENT}" method="post"><input type="submit" value="{L_ADD_EVENT}" /></form>
   <!-- END switch_add_event -->
   &nbsp;
   </td>
</tr>
</table>
<!-- END _calendar_box -->

Je me suis perdu en route entre toutes ces annotations. Qu'est-ce que je dois réellement modifié pour avoir un résultat comme décrit au-dessus.

Bonne journée.

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coin arrondi dans le calendrier (calendar + Widget)

Message par Archimus le Jeu 19 Nov 2015 - 13:37

UP !

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coin arrondi dans le calendrier (calendar + Widget)

Message par R-max le Jeu 19 Nov 2015 - 22:17

bonsoir ,remplacé le contenu de votre Template calendar_boxpar celui ci >
Code:
<!-- BEGIN _calendar_box -->
<!--fond couleur-->
<table align="center" cellpadding="0" cellspacing="1" border="0" width="100%" id="calendar_forum" class="forumline">
<tr>
   <td align="center" class="catHead" colspan="{_calendar_box.SPAN_ALL}" width="100%">
      <form name="_calendar" method="post" action="{_calendar_box.S_ACTION}">
      <table cellpadding="0" cellspacing="0" border="0">
      <tr>
         <td>&nbsp;</td>
         <td class="gensmall">&nbsp;
            <!-- BEGIN switch_not_anonymous -->
            <b><a href="{_calendar_box.U_PREC}" class="gen" rel="nofollow">«</a></b>&nbsp;
            <!-- END switch_not_anonymous -->
      </td>
         <td width="100%" align="center">{_calendar_box.S_MONTH}{_calendar_box.S_YEAR}&nbsp;{_calendar_box.S_FORUM_LIST}&nbsp;<input type="submit" value="{_calendar_box.L_GO}" class="liteoption" /></td>
         <td class="gensmall">&nbsp;
            <!-- BEGIN switch_not_anonymous -->
            <b><a href="{_calendar_box.U_NEXT}" class="gen" rel="nofollow">»</a></b>&nbsp;
            <!-- END switch_not_anonymous -->
         </td>
         <td>&nbsp;</td>
      </tr>
      </table>
      </form>
   </td>
</tr>
<tr>
   <!-- BEGIN _cell -->
   <th class="th_1" width="{_calendar_box.switch_full_month._cell.WIDTH}%" nowrap="nowrap">{_calendar_box._cell.L_DAY}</th_1>
   <!-- END _cell -->
</tr>
<!-- BEGIN _row -->
<tr>
   <!-- BEGIN _cell -->
   <!-- BEGIN switch_filled_no -->
   <td class="row3_3" colspan="{_calendar_box._row._cell.SPAN}" width="{_calendar_box._row._cell.WIDTH}%">&nbsp;</td>
   <!-- END switch_filled_no -->
   <!-- BEGIN switch_filled -->
   <td class="row1_1" valign="top" colspan="{_calendar_box._row._cell.SPAN}" width="{_calendar_box._row._cell.WIDTH}%">
      <table  cellspacing="0" cellpadding="0" width="100%" height="94" valign="top">
      <tr>
         <td class="row2_2" align="center" height="4" nowrap="nowrap">
            <span class="genmed">{_calendar_box._row._cell.U_DATE}</span>
            <!-- BEGIN switch_add_event_day -->
            &nbsp;<a href="{_calendar_box._row._cell.switch_filled.switch_add_event_day.U_CREATE_EVENT}"><img src="http://illiweb.com/fa/subsilver/icon_mini_calendar.gif" border="0" alt="{L_ADD_EVENT}" title="{L_ADD_EVENT}" /></a>
            <!-- END switch_add_event_day -->
         </td>
      </tr>
      <tr valign="top">
         <td class="row1_1" nowrap="nowrap">
            <table cellspacing="0" cellpadding="0" width="100%" valign="top">
            <!-- BEGIN _event -->
            <!-- BEGIN switch_event -->
            <tr>
               <td class="row1_1" nowrap="nowrap" align="left"><span class="genmed">{_calendar_box._row._cell.switch_filled._event.switch_event.EVENT_TYPE}<a rel="nofollow" href="{_calendar_box._row._cell.switch_filled._event.switch_event.U_EVENT}" {_calendar_box._row._cell.switch_filled._event.switch_event.OVERVIEW_MESSAGE} class="{_calendar_box._row._cell.switch_filled._event.switch_event.EVENT_CLASS}" style="font-style:normal;font-weight:normal;">{_calendar_box._row._cell.switch_filled._event.switch_event.EVENT_TITLE}</a></span></td>
               <!-- BEGIN _more -->
               <td class="row1_1" align="right"><span class="genmed"><a href="#" onClick="hdr_toggle('calendar_display_extend_{_calendar_box._row._cell.switch_filled.EVENT_DATE}','calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}', '{DOWN_ARROW}', '{UP_ARROW}'); return false;" class="gensmall">...<img src="{_calendar_box._row._cell.switch_filled.TOGGLE_ICON}" id="calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}" hspace="2" border="0" /></a></span></td>
               <!-- END _more -->
               <!-- BEGIN _more_no -->
               <td></td>
               <!-- END _more_no -->
            </tr>
            <!-- END switch_event -->
            <!-- BEGIN switch_event_no -->
            <tr>
               <td class="row1_1"><span class="genmed">&nbsp;</span></td>
               <!-- BEGIN _more -->
               <td class="row1_1" align="right"><span class="genmed"><a href="#" onClick="hdr_toggle('calendar_display_extend_{_calendar_box._row._cell.switch_filled.EVENT_DATE}','calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}', '{DOWN_ARROW}', '{UP_ARROW}'); return false;" class="gensmall">...<img src="{_calendar_box._row._cell.switch_filled.TOGGLE_ICON}" id="calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}" hspace="2" border="0" /></a></span></td>
               <!-- END _more -->
               <!-- BEGIN _more_no -->
               <td></td>
               <!-- END _more_no -->
            </tr>
            <!-- END switch_event_no -->
            <!-- BEGIN _more_header -->
            <tbody id="calendar_display_extend_{_calendar_box._row._cell.switch_filled.EVENT_DATE}" style="display:{_calendar_box._row._cell.switch_filled.TOGGLE_STATUS}">
            <!-- END _more_header -->
            <!-- BEGIN _more_footer -->
            </tbody>
            <!-- END _more_footer -->
            <!-- END _event -->
            </table>
         </td>
      </tr>
      </table>
   </td>
   <!-- END switch_filled -->
   <!-- END _cell -->
</tr>
<!-- END _row -->
<tr>
   <td class="catbottom" align="center" colspan="{_calendar_box.SPAN_ALL}" width="100%">
   &nbsp;
   <!-- BEGIN switch_add_event -->
   <form action="{S_CREATE_EVENT}" method="post"><input type="submit" value="{L_ADD_EVENT}" /></form>
   <!-- END switch_add_event -->
   &nbsp;
   </td>
</tr>
</table>
<!-- END _calendar_box -->

insérer ensuite dans votre css ceci >
Code:
#calendar_forum{/**agi sur la couleur de fond **/
  background:blue;
  border-radius:25px;
  border:1px solid white;
}
td.row2_2{/**agi sur la date **/
  background-color: blue;
    border-radius: 5px 5px 5px 5px;
  border:1px solid white;
}
td.row1_1, td.row3_3 {/**agi sur les cases **/
    background-color: #495cff;
    border-radius: 10px 10px 10px 10px;
}
th.th_1{/**agi sur les jours de la semaine**/
  background:#495cff;
    background-image: url(http://illiweb.com/fa/empty.gif);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    height: 25px;
    padding: 2px 3px;
  border-radius:5px;
  border:1px solid white;
  width:0%;

}

il vous restera a changé les couleurs , les valeurs ,ect a votre convenance

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coin arrondi dans le calendrier (calendar + Widget)

Message par Archimus le Ven 20 Nov 2015 - 14:09

Bonjour,

Un grand merci pour ce code personnalisé Smile Il fonctionne totalement de A et Z et j'ai ajouté ma touche personnel et personnalisé certains paramètres sur le CSS Angel

Voici un petit rendu pour celui qui le souhaiterait : lien

Ce sujet est résolu Smile Merci de ta patience R-max.

Bonne journée.

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus 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