Pour l'utilisation du mode CSS, il faud savoir une chose essentielle...
-> Evitez d'utiliser le menu flottant de la partie admin pour allez dans les préférences du module piCal.
Donc allez sur l'adresse :
Citation :Sinon va falloir, activer un bloc pour tous les utilisateurs : Bloc - Mode CSS (piCal)
Ce bloc est invisible mais permet d'intégrer le fichier "pical_block.css" quand celà est nécessaire.
Incidence du mode utilisé :
-> CSS OFF (Mode Standard) : cas d'un fonctionnement normal de piCal, aucun fichier CSS ne sera utilisé.(Bloc - Mode CSS (piCal) n'est pas actif)
-> CSS ON : mode CSS actif
-----> CSS Présent dans le dossier skin : les feuilles de styles sont présentes dans le dossier ciblé par le champs "Nom des chemins de skin" (Bloc - Mode CSS (piCal) est actif)
-----> CSS Présent dans le dossier du thème : les feuilles de styles doivent être dans le dossier piCal du thème sélectionné (/themes/montheme/piCal/). S'il ne les trouvent pas il ira dans le dossier du skin.(Bloc - Mode CSS (piCal) est actif)
-----> CSS Intégré dans celui du thème courant : les feuilles de style de piCal ne seront pas utilisé et les pages utiliseront le mode CSS. Il faudra donc mettre dans la feuille de style de votre thème toutes les définitions utiles (Bloc - Mode CSS (piCal) n'est pas actif)
Maintenant voici les deux fichiers CSS que j'utilise sur "mon" site, leur aventage c'est qu'ils rendent piCal indépendant des définitions faites dans votre thème courant. Ce sont donc de légère correction qui peuvent être utilisé si vous le souhaitez... attention, les couleurs sont celle défini sur le site
-> pical_block.css
/******* DAY COLOR *******/
#minical td.name-weekday-color, #minical_ex td.name-weekday-color {
color: #000066;
}
#minical td.name-sunday-color, #minical_ex td.name-sunday-color {
color: #DD6900;
}
#minical td.name-saturday-color, #minical_ex td.name-saturday-color {
color: #006699;
}
#minical td.weekday-color, #minical_ex td.weekday-color, #minical td.weekday-color a {
background: transparent;
color: #000066;
}
#minical td.sunday-color, #minical_ex td.sunday-color, #minical td.sunday-color a,
#minical td.holiday-color, #minical_ex td.holiday-color, #minical td.holiday-color a {
background-color: #eefeff;
color: #DD6900;
}
#minical td.saturday-color, #minical_ex td.saturday-color, #minical td.saturday-color a {
background-color: #eef7ff;
color: #006699;
}
#minical td.targetday-color, #minical_ex td.targetday-color, #minical td.targetday-color a {
background-color: #006699;
color: #d6ffff;
}
/******* MINI CALENDAR *******/
table#minical {
width: 147px;
line-height: normal;
margin: auto;
border-collapse: collapse;
}
table#minical th {
padding: 0px;
vertical-align: middle;
text-align: center;
font-size: small;
color: #d6ffff;
border: 1px solid #d6ffff;
background-color:#006699;
}
table#minical th img {
width: 18px;
height: 14px;
border: 0px;
vertical-align: top;
}
table#minical td {
text-align: center;
font-size: small;
}
table#minical td.spacer-day {
width: 20px;
height: 12px;
}
table#minical td span.event-day {
text-decoration:underline;
}
table#minical td.add-linktoday {
text-align: center;
vertical-align: middle;
}
/******* MINI CALENDAR EX *******/
table#minical_ex {
width: 147px;
margin: auto;
line-height: normal;
border-collapse: collapse;
}
table#minical_ex th {
padding:3px 1px;
vertical-align: middle;
text-align: center;
font-size: small;
color: #d6ffff;
border: 1px solid #d6ffff;
background-color:#006699;
}
table#minical_ex th img {
width: 18px;
height: 14px;
border: 0px;
vertical-align: top;
}
table#minical_ex td {
text-align: center;
font-size: small;
}
table#minical_ex tr.minidayname td {
padding:3px 1px;
}
table#minical_ex td.miniday {
height: 20px;
text-align:center;
}
table#minical_ex td.miniday img.spacer_day {
width: 20px;
height: 20px;
}
table#minical_ex td.plugin_legend {
font-size: x-small;
text-align: right;
padding: 3px;
}
table#minical_ex td.plugin_legend span {
height:1.5em;
white-space:nowrap;
float: right;
}
table#minical_ex td img {
width: 8px;
height: 8px;
}
/******* COMING SCHEDULE *******/
/******* TODAYS SCHEDULE *******/
/********** NEWS EVENT *********/
dl.list_event, dl.add_newevent {
font-size: small;
margin-top: 2px;
}
dl.list_event dd {
margin-left: 25px;
}
dl.list_event img {
border: 0px;
}
dl.list_event img {
margin-left: 20px;
}
div.rest_event {
font-size: x-small;
text-align: right;
}
dl.add_newevent img {
border: 0px;
width: 14px;
height: 12px;
}
-> pical.css
#pical_calendar_body {
width: 98%;
border-collapse: collapse;
margin:auto;
}
#pical_calendar_copyright { text-align: right; margin: 2px;}
#pical_calendar_print { text-align: right; margin: 2px;}
#pical_calendar_selectday {
width: 100%;
border: 0px;
text-align: center;
}
#pical_calendar_body a {
font-weight: normal;
}
#pical_calendar_body a:hover {
text-decoration: underline;
}
#pical_calendar_body img {
border: 0px;
}
/********* DAY COLOR *********/
.saturday-color, .yearly-month .saturday-color a {
background-color: #eef7ff;
color: #006699;
}
.saturday-color span, #saturday-color span {color: #006699;}
.sunday-color, .yearly-month .sunday-color a,
.holiday-color, .yearly-month .holiday-color a {
background-color: #eefeff;
color: #DD6900;
}
.holiday-color span, .sunday-color span, #sunday-color span, #holiday-color span {color: #DD6900;}
.weekday-color, .yearly-month .weekday-color a, .weekday-color span {
background: transparent;
color: #000066;
}
.weekday-color span, #weekday-color span {color: #000066;}
#selectday, .targetday-color, .targetday-color .monthly-day a, .yearly-month .targetday-color a {
background-color: #eaedf4;
}
/******* FIN DAY COLOR *******/
/******* CATEGORY FORM *******/
table.pical-categoryform {
table-layout:fixed;
width: 100%;
text-align: center;
white-space:nowrap;
border: 1px solid #98aab1;
background-color: #E1E8F1;
}
td.pical-categoryform-nav {
width: 18px;
vertical-align: middle;
}
td.pical-categoryform-nav img {
width: 18px;
height: 14px;
}
td.pical-categoryform-selform {
text-align: center;
vertical-align: middle;
}
td.pical-categoryform-selform img {
width: 350px;
height: 4px;
}
td.pical-categoryform-selform form {
margin: 0px;
}
td.pical-categoryform-selform2 {
text-align: left;
vertical-align: middle;
}
td.pical-categoryform-spacer, td.pical-categoryform-spacer img { /*spacer img for separate selectform and title */
width: 8px;
height: 4px;
}
td.pical-categoryform-title {
width: 220px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
font-size: large;
font-weight: bold;
color: #006699;
}
td.pical-categoryform-title .calhead-day {
color: #000066;
font-size: small;
}
td.pical-categoryform-title img { /*spacer img for center title */
width: 200px;
height: 4px;
}
td.pical-categoryform-smode {
text-align: right;
vertical-align: middle;
}
/******* FIN CATEGORY FORM *******/
/******* CALENDAR DAILY *******/
ul.pical-calendar-daily {
display: table;
width: 98%;
height: 350px;
margin: 10px;
border: 1px solid #DEDEDE;
font-size: small;
}
li.pical-calendar-timepart {
float: left;
width: 150px;
margin: 0px;
padding-top: 5px;
text-align: center;
}
li.pical-calendar-timepart pre {
display: inline;
font-size: medium;
}
li.pical-calendar-link, li.pical-calendar-needadmit, li.pical-calendar-plugin {
padding-top: 5px;
font-size: medium;
}
li.pical-calendar-needadmint a {
color: #00FF00;
}
li.pical-calendar-daily-insert {
margin-left: 30px;
padding-top: 5px;
}
li.pical-calendar-desc, li.pical-calendar-plugindesc {
margin-left: 150px;
padding-top: 5px;
padding-bottom: 5px;
}
li.pical-calendar-hr {
margin: 5px 30px;
font-size: 1px;
border-bottom: solid 1px #006699;
}
/******* FIN CALENDAR DAILY *******/
/******* CALENDAR WEEKLY *******/
table#pical-calendar-weekly {
width: 98%;
border: 0px;
border-collapse: collapse;
margin: 10px;
}
table#pical-calendar-weekly td {
height: 80px;
border: 1px solid #DEDEDE;
}
table#pical-calendar-weekly td.weekly-cday {
width: 100px;
height: 80px;
text-align: center;
vertical-align: middle;
font-size: medium;
font-weight: bold;
}
table#pical-calendar-weekly td.weekly-cevent {
vertical-align: top;
}
table#pical-calendar-weekly dl {
margin: 5px;
padding: 0px;
}
table#pical-calendar-weekly dt.pical-calendar-timepart {
width: 120px;
padding: 0px;padding-top: 3px;
margin: 0px;
text-align: left;
}
table#pical-calendar-weekly dt.pical-calendar-timepart pre {
font-size: small;
}
table#pical-calendar-weekly dd.pical-calendar-link {
margin-left: 120px;
}
/******* FIN CALENDAR WEEKLY *******/
/******* CALENDAR MONTHLY *******/
table#pical-calendar-monthly {
width:100%;
border: 0px;
border-collapse:collapse;
margin: auto;
margin-top: 10px;
}
table#pical-calendar-monthly th {
width: 14%;
padding: 0px;
vertical-align: middle;
text-align: center;
font-size: medium;
font-weight: lighter;
border: 1px solid #DEDEDE;
}
table#pical-calendar-monthly th.saturday-color, table#pical-calendar-monthly th.weekday-color,
table#pical-calendar-monthly th.sunday-color {
background-color: #eaedf4;
}
table#pical-calendar-monthly th.pical-weekmark {
width: 10px;
height: 20px;
border: 0px;
background-color: white;
}
table#pical-calendar-monthly td {
vertical-align: top;
border: 1px solid #DEDEDE;
}
table#pical-calendar-monthly td a {
font-size: 10px;
font-weight: normal;
}
table#pical-calendar-monthly td.pical-goto-weekly {
width :10px;
height: 70px;
border: 0px;
vertical-align: middle;
}
table#pical-calendar-monthly td.pical-end-monthly {
border: 0px;
background-color: white;
}
table#pical-calendar-monthly td.pical-start-monthly {
background-color: white;
}
table#pical-calendar-monthly td.pical-end-monthly img, table#pical-calendar-monthly td.pical-start-monthly img {
width : 90px;
height: 70px;
}
table#pical-calendar-monthly ul {
margin: 0px;
padding: 0px;
}
table#pical-calendar-monthly ul span {
font-size: medium;
font-weight: bold;
}
table#pical-calendar-monthly td * li {
list-style-type: none;
list-style-position: outside;
}
table#pical-calendar-monthly ul .monthly-day {
width: 45%;
text-align: left;
}
table#pical-calendar-monthly ul .monthly-addevent {
float: right;
width: 45%;
text-align: right;
}
table#pical-calendar-monthly ul .monthly-event {
list-style-position: inside;
list-style-type: disc;
color: black;
margin-left: 4px;
}
table#pical-calendar-monthly ul .monthly-plugin {
margin-left: 4px;
}
table#pical-calendar-monthly ul .holiday-name {
color: #cc0000;
}
table.pical-monthly-info {
width: 600px;
border: 0px;
margin: auto;
}
td.pical-monthly-legend {
width: 150px;
vertical-align: top;
}
td.pical-monthly-legend table {
width: 100%;
border: 0px;
border-collapse: collapse;
}
td.pical-monthly-legend .spacer-up {
width: 150px;
height: 8px;
}
td.pical-monthly-legend tr.list-legend img {
width: 20px;
height: 20px;
}
td.pical-monthly-legend tr.list-legend td {
font-size: 10px;
font-weight: normal;
}
td.pical-monthly-minical {
width: 150px;
vertical-align: top;
text-align: center;
}
td.pical-monthly-jumpdate {
width: 100px;
vertical-align: top;
text-align: center;
}
/******* FIN CALENDAR MONTHLY *******/
/******* CALENDAR YEARLY *******/
table.pical-calendar-yearly {
width: 98%;
border-collapse: collapse;
margin: 10px;
}
table.pical-calendar-yearly img {
width: 4px;
height: 10px;
}
#pical_calendar_body table.yearly-month {
width: 150px;
line-height: normal;
margin: auto;
border-collapse: collapse;
border: solid 1px #DEDEDE;
}
#pical_calendar_body table.yearly-month th {
padding: 0px;
vertical-align: middle;
text-align: center;
font-size: medium;
color: #006699;
border: solid 1px #DEDEDE;
background-color:#eaedf4;
}
#pical_calendar_body table.yearly-month td {
text-align: center;
font-size: small;
}
#pical_calendar_body table.yearly-month td.spacer-day {
width: 20px;
height: 12px;
}
#pical_calendar_body table.yearly-month td span.event-day {
text-decoration:underline;
}
/******* FIN CALENDAR YEARLY *******/
/********** EVENT LIST **********/
#pical-sortedby {
text-align: center;
}
#pical-sortedby img {
vertical-align: middle;
}
#pical-pagnav-info {
}
#pical-pagnav {
float: right;
text-align:right;
}
table#pical-listevent {
width: 100%;
border-spacing: 1px;
}
table#pical-listevent th {
vertical-align: middle;
text-align: center;
}
table#pical-listevent div.pical-admission {
text-align: center;
}
table#pical-listevent div.pical-admission img {
width: 14px;
height: 12px;
}
table#pical-listevent div.pical-center {
text-align: center;
}
/******** FIN EVENT LIST ********/
J'espère avoir bien répondu à ta question ^^
A+
Tous les messages (PinMaster)
Transférer
