Wiki

Fichier cssmenu.css

Mon, 18 Feb 2019 21:19:37 +0100

Le fichier cssmenu.css contient les éléments associés aux menus phpboost.

Classes multi niveaux

Classes générales cssmenu

Code CSS :

.cssmenu,
.cssmenu ul,
.cssmenu ul li,
.cssmenu ul li .cssmenu-title {
    display: block;
    position: relative;
    margin: 0;
    list-style: none;
    line-height: 1;
    left: auto;
}
.cssmenu:after,
.cssmenu > ul:after {
    display: block;
    visibility: hidden;
    height: 0;
    content: "";
    line-height: 0;
    clear: both;
}
.close {
    left: -9999px !important;
    height: 0;
    overflow: hidden;
}
#menu-left .cssmenu   { margin-right: -9px; }
#menu-right .cssmenu  { margin-left: -9px;  }
#menu-left .cssmenu.small-screen  { margin-right: 0; }
#menu-right .cssmenu.small-screen  { margin-left: 0; }
.cssmenu li:hover > .cssmenu-title {
    text-decoration: none;
}
.cssmenu .cssmenu-title img {
    margin: 0 5px 0 0;
    vertical-align: bottom;
}
#top-header .cssmenu ul > li:first-child > .cssmenu-title                 { border-radius: 0 5px 0 0;   }
#top-header .cssmenu ul > li:last-child > .cssmenu-title                  { border-radius: 0 0 5px 5px; }
#top-header .cssmenu ul > li.has-sub:first-child:hover > .cssmenu-title { border-radius: 0 0 0 0;     }
#top-header .cssmenu ul > li.has-sub:last-child:hover > .cssmenu-title  { border-radius: 0 0 0;       }
 
.cssmenu.small-screen {
    width: 100%;
}
.cssmenu.small-screen ul {
    display: block;
    width: 100%;
}
.cssmenu.small-screen ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
}
.cssmenu.small-screen > ul > li:last-child.has-sub {
    border-bottom: 1px solid rgba(120, 120, 120, 0.2);
}
.cssmenu.small-screen ul ul li,
.cssmenu.small-screen li:hover > ul > li {
    height: auto;
}
.cssmenu.small-screen ul li .cssmenu-title,
.cssmenu.small-screen ul ul li .cssmenu-title {
    padding: 17px;
    width: 100%;
    border-bottom: 0;
}
.cssmenu.small-screen ul ul li .cssmenu-title {
    padding: 11px;
}

Variante cssmenu-horizontal

Code CSS :

#main .cssmenu-horizontal {
    background-color: #FFFFFF;
    border: 1px #BEBEBE solid;
}

Variante cssmenu-group

Code CSS :

div.cssmenu-group {
    position: relative;
    display: inline-block;
    padding: 2px 8px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%);
    background-color: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #999999;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25);
    color: #444444;
    cursor: pointer;
}
div.cssmenu-group .cssmenu-title {
    color: #444444;
    font-size: 1.2rem;
    font-weight: 300;
    text-decoration: none;
}
.cssmenu-group.small-screen {
    margin: 0 0 5px 0;
}

Variante cssmenu-actionslinks

Code CSS :

.cssmenu-actionslinks {
    margin: 0 0 20px 0;
}
.cssmenu-actionslinks {
    float: right;
    margin: 0 5px 5px 5px;
}
.cssmenu-actionslinks.small-screen {
    float: none;
    margin: 0;
}
.cssmenu.cssmenu-actionslinks ul li .cssmenu-title,
.cssmenu.cssmenu-actionslinks ul li ul li .cssmenu-title {
    padding: 5px;
    border: none;
    font-weight: normal;
    font-size: 11px;
}
.cssmenu-actionslinks.small-screen ul li {
    border: none;
}
.cssmenu.cssmenu-actionslinks.small-screen ul li .cssmenu-title,
.cssmenu.cssmenu-actionslinks.small-screen ul li ul li .cssmenu-title {
    padding: 10px 5px;
}

Autres variantes

Code CSS :

@media (min-width: 769px) {
    #cssmenu-galleryfilter ul {
        min-width: 130px;
    }
}
.cssmenu.cssmenu-static li.has-sub > .cssmenu-title:after,
.cssmenu.cssmenu-static li.has-sub > .cssmenu-title:before {
    display: none;
}

Classes Niveau 1

Classes générales cssmenu

Code CSS :

.cssmenu > ul > li {
    float: left;
}
#sub-header .cssmenu-horizontal > ul > li {
    position: relative;
    border-right: 1px solid #444444;
}
#sub-header .cssmenu-horizontal > ul > li:after {
    position:absolute;
    right: 1%;
    top: 50px;
    height: 100%;
    width: 1px;
    border-right: 1px solid #333333;
}
#main .cssmenu-horizontal > ul > li:last-child,
#sub-header .cssmenu-horizontal > ul > li:last-child {
    border-bottom: none;
}
#main .cssmenu-horizontal > ul > li:last-child:after,
#sub-header .cssmenu-horizontal > ul > li:last-child:after {
    width: 0;
    height: 0;
}
#main .cssmenu-horizontal > ul > li {
    position: relative;
    border-right: 1px solid #EFEFEF;
}
#main .cssmenu-horizontal.small-screen > ul > li {
    border-right: none;
}
#main .cssmenu-horizontal > ul > li:after {
    position:absolute;
    right: 1%;
    top: 50px;
    height: 100%;
    width: 1px;
    border-right: 1px solid #EEEEEE;
}
header .cssmenu-horizontal > ul > li:hover {
    border-radius : 5px 5px 5px 5px;
}
header .cssmenu-horizontal > ul > li.has-sub:hover {
    border-radius : 5px 5px 0 0;
}
.cssmenu-left > ul > li,
.cssmenu-right > ul > li {
    float: none;
    text-align: left;
}
.cssmenu > ul > li > .cssmenu-title {
    padding: 17px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

Code CSS :

.cssmenu > ul > li.has-sub > .cssmenu-title {
    padding-right: 30px;
}
.cssmenu > ul > li.has-sub > .cssmenu-title:after,
.cssmenu > ul > li.has-sub > .cssmenu-title:before {
    position: absolute;
    display: block;
    content: '';
}
.cssmenu > ul > li.has-sub > .cssmenu-title:after {
    width: 8px;
    height: 2px;
}
.cssmenu > ul > li.has-sub > .cssmenu-title:before {
    width: 2px;
    height: 8px;
    transition: all 0.25s ease;
}
.cssmenu > ul > li.has-sub:hover > .cssmenu-title:before {
    height: 0;
}
.cssmenu-vertical > ul > li > .cssmenu-title {
    padding: 5px 17px 5px 6px;
}
.cssmenu > ul > li.has-sub > .cssmenu-title:after             { top: 22px; right: 11px; }
.cssmenu > ul > li.has-sub > .cssmenu-title:before             { top: 19px; right: 14px; }
.cssmenu > ul > li.has-sub:hover > .cssmenu-title:before     { top: 23px; }
.cssmenu-vertical > ul > li.has-sub > .cssmenu-title:after  { top: 11px; }
.cssmenu-vertical > ul > li.has-sub > .cssmenu-title:before { top: 8px;  }

Code CSS :

.cssmenu li:hover > ul                                 { left: auto ;                }
aside .cssmenu-left li:hover > ul                     { left: 100% ;     top: 0;        }
aside .cssmenu-right li:hover > ul                     { right: 100%;     top: 0;        }
aside .cssmenu-left.cssmenu-static li:hover > ul    { left: 0;         top: 0;        }
aside .cssmenu-right.cssmenu-static li:hover > ul     { right: 0;        top: 0;        }
.cssmenu.cssmenu-actionslinks li:hover > ul         { right: 0;        top: 100%;    }
.cssmenu.cssmenu-actionslinks ul li:hover > ul         { right: 100%;    top: 0;        }
.cssmenu.small-screen li:hover > ul                 { left: 0;                  }
.cssmenu.cssmenu-right.small-screen li:hover > ul     { right: 0;                 }
.cssmenu.cssmenu-left.small-screen li:hover > ul     { left: 0;                  }

Variante cssmenu-group

Code CSS :

.cssmenu-group > ul {
    text-align: center;
    font-size: 0;
}
.cssmenu-group > ul > li {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%);
    background-color: #FFFFFF;
    border: 1px solid #999999;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25);
    color: #444444;
    cursor: pointer;
}
.cssmenu.cssmenu-group > ul > li {
    display: inline-block;
    float: none;
}
.cssmenu.cssmenu-group > ul > li:hover {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 40%,rgba(56, 56, 56, 0.18) 100%);
    background-color: #F0F0F0;
    border-bottom-color: #B3B3B3;
}
.cssmenu-group > ul > li:first-child {
    border-radius: 4px 0 0 4px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.cssmenu-group > ul > li:last-child {
    border-radius: 0 4px 4px 0;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.cssmenu-group > ul > li.current {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%);
    background-color: #F0F0F0;
    border-top-color: #B3B3B3;
}
.cssmenu.cssmenu-group > ul > li > .cssmenu-title {
    padding: 4px 12px;
    color: #444444;
    font-size: 1.1rem;
    font-weight: 300;
    text-decoration: none;
}
.cssmenu-group.small-screen > ul.open {
    display: table !important;
    margin: auto;
    width: auto;
}
.cssmenu-group.small-screen > ul > li,
.cssmenu-group.small-screen > ul > li:hover {
    float: left;
    width: auto;
    background: transparent;
    border-radius: 0;
    border: none;
    clear: both;
}
.cssmenu.cssmenu-group.small-screen > ul > li > .cssmenu-title {
    padding: 10px 12px;
}
.cssmenu-group.small-screen > ul > li:first-child {
    border-radius: 4px 4px 0 0;
}
.cssmenu-group.small-screen > ul > li:last-child {
    border-radius: 0 0 4px 4px;
}

Variante cssmenu-actionslinks

Code CSS :

.cssmenu-actionslinks.small-screen > ul > li:last-child {
    padding: 0 0 10px 0;
    border-bottom: 1px solid rgba(120, 120, 120, 0.2);
}
.cssmenu.cssmenu-static li > .cssmenu-title {
    border: none;
}
.cssmenu.cssmenu-static > ul > li > .cssmenu-title {
    text-align: center;
}

Variante cssmenu-static

Code CSS :

#main .cssmenu.cssmenu-static,
#top-footer .cssmenu.cssmenu-static {
    margin: 5px 0;
    background-color: #ffffff;
    border: 1px solid #BEBEBE;
}
.cssmenu.cssmenu-static > ul > li {
    padding: 0 10px 0 10px;
}
footer .cssmenu.cssmenu-static > ul > li         { border-right: 1px solid #2A2A2A; }
#top-footer .cssmenu.cssmenu-static > ul > li     { border-right: 1px solid #DDDDDD; }
footer .cssmenu.cssmenu-static > ul > li:last-child,
#top-footer .cssmenu.cssmenu-static > ul > li:last-child {
    border-right: none;
}
.cssmenu.cssmenu-static > ul > li > .cssmenu-title {
    margin: 0 0 20px 0;
    padding-bottom: 5px;    
    border-bottom: 1px solid #25466C;
    font-size: 17px;
    font-weight: bold;
}

Classes Niveau 2

Classes générales cssmenu

Code CSS :

.cssmenu ul ul {
    position: absolute;
    left: -9999px;
    z-index: 10;
}
.cssmenu ul ul li {
    height: 0;
    transition: all 0.25s ease;
}
.cssmenu li:hover > ul > li {
    height: auto;
    vertical-align: middle;
}
.cssmenu ul ul ul {
    top: 0;
}
.cssmenu ul ul li .cssmenu-title {
    padding: 11px 15px;
    font-size: 12px;
}
.cssmenu ul ul li .cssmenu-title {
    padding: 11px 30px 11px 15px;
    border-bottom: 1px solid rgba(150, 150, 150, 0.15);
    white-space: nowrap;
}

Code CSS :

.cssmenu ul ul li:last-child > .cssmenu-title,
.cssmenu ul ul li.last-item > .cssmenu-title {
    border-bottom: 0;
}
.cssmenu ul ul li.has-sub > .cssmenu-title:after,
.cssmenu ul ul li.has-sub > .cssmenu-title:before {
    position: absolute;
    display: block;
    content: '';
}
.cssmenu ul ul li.has-sub > .cssmenu-title:after {
    width: 8px;
    height: 2px;
}
.cssmenu ul ul li.has-sub > .cssmenu-title:before {
    width: 2px;
    height: 8px;
    transition: all .25s ease;
}
.cssmenu ul ul li.has-sub > .cssmenu-title:after     { top: 16px; right: 11px; }
.cssmenu ul ul li.has-sub > .cssmenu-title:before     { top: 13px; right: 14px; }
.cssmenu ul ul > li.has-sub:hover > .cssmenu-title:before  {
    top: 17px;
    height: 0;
}
.cssmenu.small-screen ul ul li.has-sub > .cssmenu-title:after,  
.cssmenu.small-screen ul ul li.has-sub > .cssmenu-title:before {
    display: none;
}
.cssmenu.small-screen ul.level-1 li .cssmenu-title  {
    padding-left: 25px;
}
.cssmenu.small-screen ul.level-2 li .cssmenu-title,
.cssmenu.cssmenu-actionslinks.small-screen ul li ul li ul li .cssmenu-title  {
    padding-left: 35px;
}
.cssmenu.small-screen ul.level-3 li .cssmenu-title {
    padding-left: 45px;
}
.cssmenu.small-screen ul.level-4 li .cssmenu-title {
    padding-left: 55px;
}
.cssmenu.small-screen ul ul li .cssmenu-title {
    background: none;
}
.cssmenu.small-screen ul ul,
.cssmenu.small-screen ul ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    border: none;
    text-align: left;
}

Variantes

Code CSS :

.cssmenu-horizontal ul ul ul {
    margin-left: 100%;
}
.cssmenu-vertical ul ul {
    position: relative;
}
aside .cssmenu-vertical ul ul {
    position: absolute;
    margin-top: -1px;
    border: 1px solid #BEBEBE;
}
header .cssmenu-vertical ul ul li .cssmenu-title,
#main .cssmenu-vertical ul ul li .cssmenu-title {
    padding: 5px 15px;
    width: 100%;
    border-bottom: none;
}
.cssmenu-static ul ul {
    position: relative;
    left: 0;
    z-index: 0;
}
.cssmenu-static ul ul li {
    height: auto;
}
.cssmenu-static ul ul ul {
    margin-left: 0;
}
.cssmenu.cssmenu-static ul ul > li > .cssmenu-title {
    padding-left: 10px;
}
.cssmenu.cssmenu-static ul ul ul > li > .cssmenu-title {
    padding-left: 20px;
}
.cssmenu-actionslinks ul li.has-sub .cssmenu-title:after  { top: 9px; }
.cssmenu-actionslinks ul li.has-sub .cssmenu-title:before { top: 6px; }

Personnalisation graphique

Niveau 1

Code CSS :

header .cssmenu > ul > li > .cssmenu-title                     { color: #DDDDDD; }
.cssmenu.cssmenu-vertical > ul > li > .cssmenu-title        { color: #444444; }
#main .cssmenu > ul > li > .cssmenu-title                     { color: #444444; }
.cssmenu-actionslinks > ul > li > .cssmenu-title             { color: #666666; }
footer .cssmenu-static > ul > li > .cssmenu-title             { color: #DDDDDD; }
#top-footer .cssmenu-static > ul > li > .cssmenu-title         { color: #444444; }
header .cssmenu li:hover > .cssmenu-title                     { color: #FFFFFF; }
.cssmenu.cssmenu-vertical li:hover > .cssmenu-title         { color: #666666; }
#main .cssmenu li:hover > .cssmenu-title                     { color: #666666; }
@media (min-width: 769px) {
    header .cssmenu-horizontal > ul > li:hover                { background-color: #333333; }
    #main .cssmenu-horizontal > ul > li:hover                  { background-color: #F9F9F9; }
}

Niveau 2

Code CSS :

.cssmenu ul ul li .cssmenu-title                             { color: #DDDDDD; }
#main .cssmenu ul ul li .cssmenu-title                         { color: #333333; }
.cssmenu.cssmenu-vertical ul ul li .cssmenu-title              { color: #333333; }
.cssmenu-actionslinks li ul li .cssmenu-title                { color: #666666; }
aside .cssmenu-static li ul li .cssmenu-title, 
#top-footer .cssmenu-static li ul li .cssmenu-title         { color: #666666; }
.cssmenu ul ul li:hover > .cssmenu-title                    { color: #333333; }
header .cssmenu ul ul li:hover > .cssmenu-title             { color: #FFFFFF; }
#main .cssmenu ul ul li:hover > .cssmenu-title                 { color: #555555; }
.cssmenu.cssmenu-vertical ul ul li:hover > .cssmenu-title     { color: #555555; }
.cssmenu-actionslinks li:hover > .cssmenu-title             { color: #333333; }
footer .cssmenu-static ul ul li:hover > .cssmenu-title         { color: #FFFFFF; }
#top-footer .cssmenu-static ul ul li:hover > .cssmenu-title { color: #262626; }
.cssmenu.cssmenu-vertical ul ul li .cssmenu-title                  { background-color: #FFFFFF;    }
.cssmenu-actionslinks ul li:hover > .cssmenu-title:after         { background-color: #333333;    }
header .cssmenu ul ul li .cssmenu-title                            { background-color: #333333;    }
.cssmenu-actionslinks li:hover > .cssmenu-title                 { background-color: #DDDDDD;    }
.cssmenu-actionslinks.small-screen li:hover > .cssmenu-title     { background-color: transparent;}
#main .cssmenu-horizontal ul ul                                    { background-color: #F9F9F9;    }
#main .cssmenu-horizontal ul ul    > li:hover                        { background-color: #F1F1F1;    }
#cssmenu-galleryfilter ul ul li .cssmenu-title                    { background-color: #FFFFFF;    }
#cssmenu-galleryfilter ul ul li:hover .cssmenu-title            { background-color: #DDDDDD;    }

Code CSS :

.cssmenu li.has-sub > .cssmenu-title:after,
.cssmenu li.has-sub > .cssmenu-title:before              { background-color: #DDDDDD; }
.cssmenu-vertical li.has-sub > .cssmenu-title:after,
.cssmenu-vertical li.has-sub > .cssmenu-title:before     { background-color: #444444; }

Bouton responsive

Classes générales cssmenu

Code CSS :

.cssmenu #menu-button {
    display: none;
    position: relative;
    list-style: none;
    line-height: 1;
}
.cssmenu #menu-button:before {
    font-size: 1.3rem;
}
.cssmenu.small-screen #menu-button {
    display: block;
    padding: 17px 40px 17px 17px;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
}
#top-footer .cssmenu.small-screen #menu-button {
    color: #444444;
}
.cssmenu.small-screen #menu-button:after, 
.cssmenu.small-screen #menu-button:before {
    position: absolute;
    display: block;
    content: '';
}
.cssmenu.small-screen #menu-button:after {
    height: 4px;
    width: 20px;
    border-width: 2px 0 2px 0;
    border-style: solid;
}
.cssmenu.small-screen #menu-button:before {
    height: 2px;
    width: 20px;
    background-color: #DDDDDD;
    font-size: 1.3rem;
}
.cssmenu.small-screen #menu-button.menu-opened:after {
    height: 2px;
    border: 0;
    transform: rotate(45deg);
}
.cssmenu.small-screen #menu-button.menu-opened:before {
    transform: rotate(-45deg);
}

Position du bouton

Code CSS :

.cssmenu.small-screen #menu-button:after                 { top: 22px; right: 17px; }
.cssmenu.small-screen #menu-button:before                 { top: 16px; right: 17px; }
.cssmenu.small-screen #menu-button.menu-opened:after,
.cssmenu.small-screen #menu-button.menu-opened:before     { top: 23px; width: 15px; }

Variante cssmenu-actionslinks

Code CSS :

.cssmenu #menu-button:before {
    font-size: 1.3rem;
}
.cssmenu-actionslinks #menu-button {
    float: right;
    position: relative;
    display: inline-block;
    padding: 4px 12px 4px 12px;    
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56,56, 56, 0.18) 100%);
    background-color: #FFFFFF;
    border: 1px solid #999999;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1)  #B3B3B3 rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    font-size: 0;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color: #444444;
    text-align: center;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
}
#main .cssmenu-actionslinks.small-screen #menu-button {
    float: none;
    background-color: transparent;
    background-image: none;
    border: none;
    font-size: 100%;
    font-family: "Trebuchet MS",Verdana,"Bitstream Vera Sans",Times,serif;
    text-align: left;
}
.cssmenu-actionslinks #menu-button + ul {
    left: -9999px;
}
.cssmenu-actionslinks #menu-button:hover + ul,
.cssmenu-actionslinks #menu-button + ul:hover{
    left: auto;
}
.cssmenu-actionslinks.small-screen #menu-button:hover + ul,
.cssmenu-actionslinks.small-screen #menu-button + ul:hover {
    left: -9999px;
}
.cssmenu-actionslinks.small-screen #menu-button + ul.open,
.cssmenu-actionslinks.small-screen #menu-button + ul:hover.open {
    left: auto;
}
.cssmenu-actionslinks #menu-button:before {
    content: "\f013";
}
.cssmenu-tools #menu-button:before {
    content: "\f0c9";
}
.cssmenu-actionslinks ul {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 23px;
    padding: 5px 0;
    width: 170px;
    background-color: #FFFFFF;
    border-radius: 3px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #AAAAAA;
    font-size: 11px;
}
.cssmenu-actionslinks.small-screen ul {
    top: 100%;
    border: none;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.cssmenu-actionslinks.small-screen li.has-sub > a,
.cssmenu-actionslinks.small-screen li.has-sub > .submenu-button {
    display:none;
}
.cssmenu-actionslinks.small-screen li.has-sub > ul {
    display: block !important;
    padding: 0;
}

Variante Static

Code CSS :

.cssmenu-static.small-screen #menu-button {
    cursor: default;
}
.cssmenu-static.small-screen #menu-button:after,
.cssmenu-static.small-screen #menu-button:before {
    display: none;
}
.cssmenu-static.small-screen ul li {
    border-top: none;
}
.cssmenu-static.small-screen > ul > li > .cssmenu-title,
.cssmenu-static.small-screen ul ul > li > .cssmenu-title {
    padding-bottom: 5px;
}

Personnalisation graphique du bouton responsive

Code CSS :

.cssmenu.small-screen #menu-button:after {
    border-color: #DDDDDD;
}
#main .cssmenu.small-screen #menu-button {
    color: #111111;
}
.cssmenu.small-screen #menu-button:before                                 { background-color: #DDDDDD; }
.cssmenu.small-screen #menu-button.menu-opened:after,
.cssmenu.small-screen #menu-button.menu-opened:before                     { background-color: #DDDDDD; }
header .cssmenu.small-screen #menu-button.menu-opened:after,
header .cssmenu.small-screen #menu-button.menu-opened:before             { background-color: #FFFFFF; }
header .cssmenu-vertical.small-screen #menu-button.menu-opened:after,
header .cssmenu-vertical.small-screen #menu-button.menu-opened:before     { background-color: #DDDDDD; }

Bouton submenu

Classes générales cssmenu

Code CSS :

.cssmenu.small-screen > ul > li.has-sub > .cssmenu-title:before,
.cssmenu.small-screen > ul > li.has-sub > .cssmenu-title:after {
    display: none;
}
.cssmenu.small-screen .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    height: 46px;
    width: 46px;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    cursor: pointer;
}
.cssmenu.small-screen ul ul .submenu-button {
    height: 34px;
    width: 34px;
}
.cssmenu.small-screen .submenu-button:after,
.cssmenu.small-screen .submenu-button:before {
    position: absolute;
    display: block;
    content: '';
}
.cssmenu.small-screen .submenu-button:after {
    width: 8px;
    height: 2px;
}
.cssmenu.small-screen .submenu-button:before {
    width: 2px;
    height: 8px;
}
.cssmenu.small-screen .submenu-button.submenu-opened:before {
    display: none;
}
.cssmenu-actionslinks.small-screen .submenu-button {
    height: 31px;
    width: 31px;
    border: none;
}

Variante Static

Code CSS :

.cssmenu-static.small-screen .submenu-button,
.cssmenu-static.small-screen .submenu-button:after,
.cssmenu-static.small-screen .submenu-button:before {
    display: none;
}
.cssmenu-static.small-screen ul ul,
.cssmenu-static.small-screen ul ul ul {
    display: block !important;
}

Personnalisation background Bouton submenu

Code CSS :

.cssmenu.small-screen .submenu-button:after                          { background-color: #DDDDDD; }
.cssmenu.small-screen .submenu-button:before                         { background-color: #DDDDDD; }
.cssmenu.small-screen .submenu-button.submenu-opened:after             { background-color: #FFFFFF; }
.cssmenu.small-screen .submenu-button.submenu-opened                 { background-color: #262626; }
#top-header .cssmenu.small-screen .submenu-button.submenu-opened     { background-color: rgba(255, 255, 255, 0.05); }
.cssmenu-actionslinks.small-screen .submenu-button.submenu-opened     { background-color: #DDDDDD; }
#menu-left .cssmenu.small-screen .submenu-button.submenu-opened     { background-color: rgba(120, 120, 120, 0.2); }
#menu-right .cssmenu.small-screen .submenu-button.submenu-opened     { background-color: rgba(120, 120, 120, 0.2); }

Postion icone Submenu

Code CSS :

.cssmenu.small-screen .submenu-button:after                 { top: 22px; right: 19px; }
.cssmenu.small-screen .submenu-button:before                  { top: 19px; right: 22px; }
.cssmenu.small-screen ul ul .submenu-button:after              { top: 15px; right: 13px; }
.cssmenu.small-screen ul ul .submenu-button:before             { top: 12px; right: 16px; }
.cssmenu-actionslinks.small-screen .submenu-button:after     { top: 14px; right: 11px; }
.cssmenu-actionslinks.small-screen .submenu-button:before     { top: 11px; right: 14px; }

Fichier content.css

Mon, 18 Feb 2019 20:29:22 +0100

Introduction

Cet article va décrire le contenu du fichier content.css qui inclut le design de tout ce qui touche aux modules, minis modules, commentaires et encore bien d'autres choses que vous allez découvrir au fur et à mesure.

Les conteneurs

Code CSS :

section,
article {
    position: relative;
    margin: 0 auto;
    width: 100%;
    vertical-align: top;
}
@media (min-width: 769px) {
    section,
    article {
        margin: 1em auto;
        width: 98%;
    }
}
/* --- articles --- */
.article-several.block,
.article-several.small-block,
.article-several.medium-block {
    clear: none!important;
}
.article-several {
    clear: both;
}
/* --- Titre d'une page ou d'un element d'un module --- */
section header h1,
article header h1 {
    border-bottom: 1px solid #336397;
}
section header h1 a:hover {
    text-decoration: none;
}
section header h2,
article header h2 {
    margin-left: 15px;
    border-bottom: 1px solid #336397;
}
section header h3,
article header h3 {
    margin-left: 15px;
    border-bottom: 1px solid #336397;
}
@media (min-width: 769px) {
    section header,
    article header {
        margin: 0 0 1em 0;
    }    
}
/* --- Titre d'un bas de page --- */
@media (min-width: 769px) {
    section footer,
    article footer {
        margin-bottom: 1.5em;
    }
}
section footer,
article footer {
    clear: both;
}
/* --- Icones actions (edition, suppression, etc) --- */
span.actions {
    float: right;
}
header span.actions a {
    font-size: 1.2em;
}
header span.actions a {
    font-size: 1.2rem;
}
.more {
    padding: 10px 5px 0;
    font-size: 11px;
    font-size: 1.1rem;
    font-style: italic;
}
@media (min-width: 769px) {
    .more {
        margin: 0 0.2em 2em 1.2em;
        padding: 0;
    }
}
/* --- Contenu --- */
.content {
    padding: 0 1em;
    text-align: justify;
}
@media (min-width: 769px) {
    div#main.main-with-left.main-with-right section .content {
        padding: 0 5px;
    }
}
@media (max-width: 768px) {
    .content {
        padding: 1em 0;
    }
}
.content + aside {
    clear: both;
}

Les balises section et article permettent de délimiter notamment les zones des modules. Elles font parties des nouvelles balises HTML5 qui permettent de structurer de façon cohérente le code.
Les conteneurs ont aussi leurs propres titres comme les balises h1. On retrouve donc dans le content.css les éléments nécessaires à leur personnalisation.
Voici un exemple classique de structure :

Code TEXT :


  Articles
 
  
       ...

Les blocks

Code CSS :

.block,
.medium-block,
.small-block {
    padding: 0.8em;
    background-color: #F2F8FF;
    border-style: solid;
    border-width: 2px 1px 1px 1px;
    border-color: #366393 #CCCCCC #99B1CB #CCCCCC;
}
.block .content,
.medium-block .content,
.small-block .content {
    margin: 0;
}
.block h1,
.medium-block h1,
.small-block h1 {
    border: none;
}
.block {
    width: auto;
}
.block header {
    margin: 0 0 1% 0;
}
.block footer {
    margin: 0;
}
.medium-block,
.small-block {
    float: left;
    margin: 1% 0.5%;
}
/* ---- Affiche 2 blocs côte a côte ---- */
.medium-block {
    width: 49.00%;
}
/* ---- Affiche 3 blocs côte a côte ---- */
.small-block {
    width: 32.33%;
}
/* ---- Affiche des blocs en vertical ---- */
@media (max-width: 480px) {
    .small-block,
    .medium-block {
        width: 100%;
        margin: 1% 0%;
    }
}
@media (max-width: 768px) {
    .block {
        width: 100%;
        margin: 1em 0;
    }
}

Les classes block ou similaires permettent un affichage sous forme de bloc côte à côte. On les retrouvent par exemple dans le profil.

La pagination

Code CSS :

section footer ul.pagination {
    text-align: center;
}
ul.pagination {
    margin: 0;
}
ul.pagination .fa:before {
    font-size: 0.8em;
}
ul.pagination-block {
    margin: 5px 0;
}
ul.pagination-block li {
    padding: 2px 2px;
}
ul.pagination-block li a {
    display: inline-block;
    padding: 2px 7px;
    outline: none;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    text-decoration: none;
}
ul.pagination-block li a {
    background-image: linear-gradient(to bottom,  rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%);
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC;
    border-color: #E1E1E1 #E1E1E1 #BFBFBF #CFCFCF;
    border-radius: 4px;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
}
ul.pagination-block li a:hover {
    background-color: #FDFDFD;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
    transition: all 0.1s linear;
}
ul.pagination-block li a:active {
    background-color: #F1F1F1;
    border: 1px solid #DDDDDD;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
}
ul.pagination-block li a.current-page {
    background-color: #3B6B9F;
    border-color: #366393;
    color: #FEFEFE;
    text-decoration: none;
}
ul.pagination-block li a.current-page:hover {
    background-color: #366393;
    border-color: #315A86;
}
ul.pagination-block-bis li a.prev-page,
ul.pagination-block-bis li a.next-page {
    border: none;
    background: none;
    box-shadow: none;
    text-shadow: none;
}
ul.pagination-block-bis li a.prev-page:hover,
ul.pagination-block-bis li a.next-page:hover {
    text-decoration: underline;
}
.pages-pagination a {
    text-decoration: none;
}

La plupart des modules utilisent la pagination lorsqu'il y a trop d’éléments sur une page. Il existe deux types de pagination: l'une normale et l'autre en forme de block.

L'explorateur des catégories

Code CSS :

.explorer .cats,
.explorer .files {
    display: inline-block;
    margin: 5px 0.33%;
    width: 48%;
    vertical-align: top;
}
@media (max-width: 480px) {
    .explorer .cats,
    .explorer .files {
        width: 100%;
    }
}
.explorer .cats {
    min-width: 200px;
}
.explorer h1 {
    margin: 5px 0;
    color: #666666;
    font-size: 13px;
}
.explorer .content {
    padding: 5px 0;
    min-height: 120px;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
}
.explorer .content ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.explorer .content ul ul {
    margin-left: 22px;
}
.explorer .content ul a.parent {
    float: left;
    height: 0;
}
.explorer .content ul a.parent i[id^="img2_"] {
    margin-left: -18px;
}
.explorer .content ul a {
    display: block;
    padding: 3px 0;
    color: #666666;
    text-decoration: none;
    text-align: left;
}
.explorer .content > ul > li > a {
    padding: 3px 5px;
}
.explorer .content ul .fa {
    width: 20px;
    vertical-align: top;
}
.explorer .content ul .fa:before {
    vertical-align: middle;
}
.explorer .content ul a.parent .fa:first-child {
    width: 14px;
}
.explorer .content ul a.parent .fa:first-child:before {
    width: 14px;
    font-size: 11px;
}
.explorer .content ul a:hover,
.explorer .content ul a:hover + a {
    background-color: #EEEEEE;
}
.explorer .content ul .sub a.parent {
    padding-left: 4px;
}
.explorer .selected {
    background-color: #DDDDDD;
}
.options {
    float: right;
    margin: 5px;
    padding: 6px 12px;
    max-width: 100%;
    background-color: #EEEEEE;
    border: 1px solid #DDDDDD;
    border-radius: 3px;    
}
.options h6 {
    margin: 10px 3px;
    font-size: 14px;
}
.infos {
    margin-left: 20px;
}
@media (max-width: 480px) {
    .infos {
        float: none;
        width: 100%;
        margin: 0 0 10px;
    }
}

Certains modules comme le wiki utilisent un système d'explorateur de fichier et de répertoire. Le code ci-dessus permet d'en personnaliser le rendu.

La gestion des catégories Drag&Drop

Code CSS :

.cat-description {
    margin: 10px 5px;
}
.subcat-container {
    margin: 10px 0 5px 0;
    font-size: 0;
}
.subcat-element {
    margin-bottom: 20px;
    font-size: 13px;
    display: inline-block;
    text-align: center;
}
@media (max-width: 540px){
    .subcat-element {
        width: 50% !important;
    }
}
@media (max-width: 360px){
    .subcat-element {
        width: 100% !important;
    }
}
.subcat-content {
    margin: auto;
    padding: 0 5px;
}
.subcat-content img {
    margin-bottom: 10px;
}
/* --- Systeme de drag&Drop --- */
.sortable-block .sortable-element > .sortable-block {
    margin-left: 30px;
}
.sortable-block {
    margin: 0;
    padding: 0;
    min-height: 24px;
    list-style-type: none;
    list-style-position: outside;
}
.sortable-block .sortable-element {
    display: table;
    margin-bottom: 6px;
    padding: 0;
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #D6DEE7;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s;    
}
.sortable-block .sortable-element:hover {
    border: 1px solid #d0d8e1;
    box-shadow: 0 0 5px #EAEAEA;
}
@media (min-width:769px){ 
    .sortable-block .sortable-element .sortable-selector {
        display: table-cell;
        position: relative;
        width: 20px;
        opacity: 0.3;
        background-color: #81A4C8;
        transition: opacity 1s;
        cursor: move;
    }
 
    .sortable-selector:after {
        position: absolute;
        content: "\f047";
        top: 34%;
        left: 4px;
        color: #FFFFFF;
        font-family: fontawesome;
    }
}
.sortable-block .sortable-element:hover .sortable-actions {
    opacity: 1;
}
.sortable-block .sortable-element:hover .sortable-selector {
    opacity: 0.6;
}
.sortable-block .sortable-title {
    padding: 8px 5px 5px 10px;
    background-image: linear-gradient(to bottom, #FFFFFF 50%, #FAFAFA 100%);
}
.sortable-block .sortable-title:hover {
    background-image: linear-gradient(to bottom, #FFFFFF 25%, #F2F5F8 100%);
}
.sortable-block .sortable-title > span {
    font-size: 1.5em;
    font-weight: bold;
}
.sortable-block .sortable-title span.cat-desc {
    font-size: 0.8em;
    font-weight: normal;
    font-style: italic;
}
.sortable-block .sortable-title img {
    cursor: move;
}
.sortable-block fieldset {
    padding: 0 30px;
}
.sortable-block .sortable-actions {
    float: right;
    padding: 3px 3px;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.sortable-block .sortable-element hr {
    margin-top: 5px;
    background-color: #999999;
}
.sortable-block .sortable-element label {
    margin-left: 14px;
    color: #1F507F;
}
.sortable-block .sortable-actions img,
.sortable-block .sortable-element:hover label,
.sortable-block .sortable-element .fa:hover {
    cursor: pointer;
}
.dragged {
    position: absolute;
    opacity: 0.9;
    z-index: 2000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
body.dragging,
body.dragging * {
    cursor: move !important;
}
.dropzone {
    margin: 10px 0;
    padding-top: 5px;
    height: 30px;
    opacity: 0.6;
    border: 1px dashed #AAAAAA;
    border-radius: 5px;
    text-align: center;
    color: #AAAAAA;
}
.preview img {
    overflow: hidden;
}

Lorsqu'un système de catégories existe sur un module, il est possible de gérer l'ordre avec un système de drag&drop.

Les mini-modules

Code CSS :

.module-mini-container {
    margin: 0 0 10px 0;
    padding: 5px;
    background-color: #FFFFFF;
    border: 1px #BEBEBE solid;
    border-bottom: 2px #99B1CB solid;
    border-spacing: 1px;
    clear: both;
}
.module-mini-top {
    padding: 0.2em 0 0.2em 0;
    min-height: 24px;
    border-bottom: 2px #336397 solid;
    text-align: center;
}
.module-mini-container h5,
.module-mini-container h3 {
    color: #515C68;
}
.module-mini-contents {
    padding: 5px 4px 0 4px;
    border-top: none;
    border-bottom: none;
    text-align: center;
}
.module-mini-bottom {
    height: 15px;
}

Chaque mini-module est délimité par la class "module-mini-container". Le titre du mini-module sera lui délimité par la class "module-mini-top" tandis que le contenu du mini-module sera englobé par la class "module-mini-contents".

Les messages

Code CSS :

#comments-list {
    clear: both;
}
#comments-list > header { 
    display: none;
}
.message {
    width: 98%;
    margin-bottom: 20px;
    overflow: auto;
}
#comments-list .message > header {
    display:none;
}
.message > footer {
    clear: both;
}
.view-topic {
    margin-top: 10px;
}
.view-topic i {
    margin: 0 0 1px 5px;
}
/* --- infos du message --- */
.message-date {
    margin-left: 150px;
}
.message-date i {
    vertical-align: top;
}
.message-user-infos {
    float: left;    
    width: 120px;
    text-align: center;
}
.message-message {
    position: relative;
    margin: 5px 0 0 140px;
    padding: 15px;
    min-height: 80px;
    background-color: #ECEFFA;
    border: 1px solid #D6DEE7;
    border-radius: 4px;
    color: #333333;
}
.message-message::before {
    position: absolute;
    top: 15px;
    bottom: auto;
    left: -25px;
    display: block;
    width: 0;
    border-width: 15px 25px 15px 0;
    border-color: transparent #D6DEE7;
    border-style: solid;
    content: "";
}
.message-message::after {
    position: absolute;
    content: "";
    top: 16px;
    bottom: auto;
    left: -24px;
    display: block;
    width: 0;
    border-width: 14px 24px 14px 0;
    border-color: transparent #ECEFFA;
    border-style: solid;    
}
.message-avatar {
    width: 80px;
}
.message-user-infos img.message-avatar {
    padding: 10px 0;
}
article .message-user-infos .message-user-group {
    display: none;
}
@media (max-width: 480px) {
    .message-user-infos img.message-avatar {
        float: left;
        margin: 5px 5px 0 15px;
        padding: 4px;
        max-height: 54px;
        width: auto;
    }
    .message-message {
        border-top: 1px solid #CAD1EB;
    }
    .message-pseudo {
        float: right;
        padding: 20px 10px 0 0px;
    }
    .message-level {
        display: none;
    }
    .message-date {
        float: right;
        margin: 0 15px 0 0;
        padding: 20px 0 0 0;
        max-width: 120px;
        text-align: right;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    .message-container {
        padding-left: 70px;
    }
    .message-pseudo {
        padding: 20px 10px 0 15px;
    }
 
    .message-user-infos img {
        position: absolute;
        top: 20px;
        left: 15px;
        max-width: 54px;
    }
    .message-date {
        margin: 0;
        padding: 23px 0 0 0;
        text-align: left;
    }
}
@media (max-width: 768px) {
    .message-container {
        position: relative;
        min-height: 80px;
        background-color: #ECEFFA;
        border: 1px solid #D6DEE7;
        border-radius: 4px;
        color: #333333;
    }
    .message-message {
        background-color: none;
        border: none;
        border-radius: 0;
    }
    .message-message::after,
    .message-message::before {
        display: none;
    }
    .message-user-infos {
        display: inline-block;
    }
    .message-pseudo {
        text-align: left;
    }
    .message-pseudo a {
        color: #555555;
        font-size: 1.2em;
        font-weight: bold;
    }
    .message-pseudo a:hover {
        color: #222222;
        text-decoration: none;
    }
 
    .message-user-infos {
        width: auto;
    }
    .message-user-infos img {
        padding: 3px;
        background-color: #fff;
        box-shadow: 0 1px 9px #e0e0e0,inset 0 0 2px rgba(215,215,215,0.75);
    }
    .message-date {
        display: inline-block;
        font-size: 0.8em;
    }
    .message-date span.actions {
        position: absolute;
        bottom: 0;
        right: 6px;
        z-index: 1;
        display: block;
        text-align: right;
        font-size: 1.2em;
    }
    .message-date span.actions a {
        display: inline-block;
        padding: 5px 2px 5px 2px;
    }
    .message-message {
        margin: 0 auto 10px auto;
        clear: both;
    }
    .message-message::before {
        top: auto;
        bottom: 100%;
        left: 204px;
        border-width: 15px;
        border-color: transparent;
        border-bottom-color: #D6DEE7;
        border-style: solid;
    }
 
    .message-message::after {
        top: auto;
        bottom: 100%;
        left: 205px;
        border-width: 14px;
        border-color: transparent;
        border-bottom-color: #ECEFFA;
        border-style: solid;
    }
}
/* --- Moderation des messages --- */
.message-moderate {
    margin-bottom: 10px;
    padding: 4px 0 4px 0;
    width: 98%;
    background-color: #ECEFFA;
    border: 1px solid #D6DEE7;
    border-radius: 4px;
    text-align: center;
    vertical-align: middle;
}
.message-moderate a {
    vertical-align: top;
}
i.message-announce,
i.message-announce-new,
i.message-announce-track {
    font-size: 1.6em;
}
i.message-announce {
    color: #D1D2D4;
}
i.message-announce-new {
    color: #4372AA;
}

L'affichage des messages et des commentaires est géré par les classes "message-"

Profil User

Code CSS :

ul#profile-container {
    margin: 30px auto;
    width: 99%;
    list-style-type: none;
}
ul#profile-container li {
    margin-right: 2px;
    padding: 10px;
    text-align: center;
}
.preview-img {
    max-height: 180px;
    vertical-align: top;
}
.user-agreement {
    width: 90%;
    max-width: none;
    max-height: 250px;
    overflow-y: auto !important;
}

L'affichage dans le profil est réalisé sous forme de block.

La maintenance

Code CSS :

#maintain {
    margin: 10px 0;
}
div.delay {
    margin: 20px 0;
}
#global.global-maintain {
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
}
div#message-maintain {
    position: absolute;
    top: 5px;
    width: 100%;
    opacity: 0.98;
    text-align: center;
}
div#message-maintain > div {
    margin: 0 auto;
}
div#release {
    margin-top: 20px;
}

Lorsque votre site est en maintenance, il est possible d'y appliquer un visuel spécifique. Il suffit d'utiliser la classe unique #maintain pour surcharger le code classique.

Le module contribution

Code :

#module-user-contribution-list hr {
    margin: 20px 0;
}
.module-contribution-element {
    float: left;
    margin: 20px 0;
    text-align: center;
}
.unprocessed-contribution {
    margin: auto;
    width: 300px;
    overflow: hidden;
    text-align: center;
}
.unprocessed-contribution div {
    float: left;
    width: 50%;
}
#module-user-moderation-panel .content {
    padding-bottom: 75px;
}
#module-user-moderation-panel .bt td:before {
    display: none;
}
#module-user-moderation-panel .bt-content {
    display: block;
    width: 100%;
    text-align: center;
}
.contribution-module-container {
    float: left;
    margin: 20px 0;
    text-align: center;
}
.convers-announce {
    padding-right: 0;
}
.convers-title {
    width: 50%;
    text-align: left;
}
table.announce-legend td {
    width: 33%;
}
@media (min-width: 769px) {
    .post-pm {
        margin: auto;
        width: 80%;
    }
}
.available-modules-msg {
    margin-bottom: 15px;
    text-align: center;
}

Plusieurs pages du modules user permettent de gérer la modération et les contributions. Chaque page possède une classe CSS unique comme #module-user-modération-panel.

Error 403/404

Code CSS :

#module-user-error-403 .content,
#module-user-error-404 .content {
    text-align: center;
    font-size: 1.5em;
}
#module-user-error-403 .fa-warning:before,
#module-user-error-404 .fa-warning:before {
    content: "\f071"; 
}
#module-user-error-403 .fa-warning,
#module-user-error-404 .fa-warning {
    display: block;
    margin: 40px auto 20px auto;
    color: #C19954;
}
#module-user-error-403 .message-error,
#module-user-error-404 .message-error {
    padding: 20px 0;
}
#module-user-error-403 .type-error,
#module-user-error-404 .type-error {
    padding: 10px 0;
}

Nous avons intégré depuis la version 5.0 un système de template pour les erreurs 403 et 404 afin de les personnaliser à votre goût.

Structure d'un thème

Mon, 18 Feb 2019 20:17:22 +0100

Nous allons présenter, ici, la structure d'un thème PHPBoost 5.0.

Nous avons pris pour exemple le thème de base.
De plus au niveau de l'architecture globale, les thèmes se situent dans le dossier /templates/

Introduction

Un thème est composé de plusieurs types de fichiers :

CSS : CSS (Cascading Style Sheet ou feuilles de style en cascade) est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrière-plan, les positionnements évolués et bien d'autres choses. Le CSS est la partie concernant la mise en forme du document, les fichiers ont l'extension .css.
Templates : Un fichier template (patron en français) permet de faire l'interface entre PHP (générateur de contenu) et le code HTML généré. Ces fichiers sont en langage HTML (HyperText Markup Language) et contiennent les emplacements des variables que PHP doit assigner. Le HTML concerne le fond du document. Ces fichiers ont l'extension .tpl.
Images : En plus du CSS, la mise en forme est appuyée par des images. Les images d'un thème se trouvent dans le dossier images du thème.

Le répertoire d'un thème est constitué de la manière suivante :

/images
/lang
/theme
body.tpl
config.ini
frame.tpl

La racine du thème

On retrouve à la racine du thème les fichiers body.tpl, config.ini et frame.tpl.

Le fichier body.tpl

Le fichier body.tpl contient les éléments de la balise html qui encadre le code html.
On y retrouve l'architecture même du site web avec le positionnement des éléments tels que l'en-tête, la colonne de gauche, le contenu central ou le pied de page. Si vous souhaitez positionner les éléments d'une manière différente, c'est le fichier à modifier.

Code HTML :

    # INCLUDE MAINTAIN #
    <header id="header">
        <div id="top-header">
            <div id="site-infos">
                <div id="site-logo" # IF C_HEADER_LOGO #style="background-image: url('{HEADER_LOGO}');"# ENDIF #></div>
                <div id="site-name-container">
                    <a id="site-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a>
                    <span id="site-slogan">{SITE_SLOGAN}</span>
                </div>
            </div>
            <div id="top-header-content">
            # IF C_MENUS_HEADER_CONTENT #
                # START menus_header #
                {menus_header.MENU}
                # END menus_header #
            # ENDIF #
            </div>
        </div>
        <div id="sub-header">
            <div id="sub-header-content">
            # IF C_MENUS_SUB_HEADER_CONTENT #
                # START menus_sub_header #
                {menus_sub_header.MENU}
                # END menus_sub_header #
            # ENDIF #
            </div>
            <div class="spacer"></div>
        </div>
        <div class="spacer"></div>
    </header>
    <div id="global">
        # IF C_COMPTEUR #
        <div id="compteur">
            <span class="text-strong">{L_VISIT} : </span>{COMPTEUR_TOTAL}
 
            <span class="text-strong">{L_TODAY} : </span>{COMPTEUR_DAY}
        </div>
        # ENDIF #
        # IF C_MENUS_LEFT_CONTENT #
        <aside id="menu-left">
            # START menus_left #
            {menus_left.MENU}
            # END menus_left #
        </aside>
        # ENDIF #
        <div id="main" class="# IF C_MENUS_LEFT_CONTENT #main-with-left# ENDIF ## IF C_MENUS_RIGHT_CONTENT # main-with-right# ENDIF #" role="main">
            # IF C_MENUS_TOPCENTRAL_CONTENT #
            <div id="top-content">
                # START menus_top_central #
                {menus_top_central.MENU}
                # END menus_top_central #
            </div>
            <div class="spacer"></div>
            # ENDIF #
            <div id="main-content" itemprop="mainContentOfPage">
                # INCLUDE ACTIONS_MENU #
                <nav id="breadcrumb" itemprop="breadcrumb">
                    <ol>
                        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                            <a href="{START_PAGE}" title="{L_INDEX}" itemprop="url">
                                <span itemprop="title">{L_INDEX}</span>
                            </a>
                        </li>
                        # START link_bread_crumb #
                        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" # IF link_bread_crumb.C_CURRENT # class="current" # ENDIF #>
                            # IF link_bread_crumb.C_CURRENT #
                            <span itemprop="title">{link_bread_crumb.TITLE}</span>
                            # ELSE #
                            <a href="{link_bread_crumb.URL}" title="{link_bread_crumb.TITLE}" itemprop="url">
                                <span itemprop="title">{link_bread_crumb.TITLE}</span>
                            </a>
                            # ENDIF #
                        </li>
                        # END link_bread_crumb #
                    </ol>
                </nav>
                # INCLUDE KERNEL_MESSAGE #
                {CONTENT}
            </div>
            # IF C_MENUS_BOTTOM_CENTRAL_CONTENT #
            <div id="bottom-content">
                # START menus_bottom_central #
                {menus_bottom_central.MENU}
                # END menus_bottom_central #
            </div>
            # ENDIF #
        </div>
        # IF C_MENUS_RIGHT_CONTENT #
        <aside id="menu-right">
            # START menus_right #
            {menus_right.MENU}
            # END menus_right #
        </aside>
        # ENDIF #
        <div class="spacer"></div>
    </div>
        # IF C_MENUS_TOP_FOOTER_CONTENT #
        <div id="top-footer">
            # START menus_top_footer #
            {menus_top_footer.MENU}
            # END menus_top_footer #
            <div class="spacer"></div>
        </div>
        # ENDIF #
    <footer id="footer">
        # IF C_MENUS_FOOTER_CONTENT #
        <div class="footer-content">
            # START menus_footer #
            {menus_footer.MENU}
            # END menus_footer #
        </div>
        # ENDIF #
        <div class="footer-infos">
            <span>
                {L_POWERED_BY} <a href="http://www.phpboost.com" title="PHPBoost">PHPBoost</a> {L_PHPBOOST_RIGHT}
            </span>
            # IF C_DISPLAY_BENCH #
            <span>
                 | 
                {L_ACHIEVED} {BENCH}{L_UNIT_SECOND} - {REQ} {L_REQ} - {MEMORY_USED}
            </span>
            # ENDIF #
            # IF C_DISPLAY_AUTHOR_THEME #
            <span>
                | {L_THEME} {L_THEME_NAME} {L_BY}
                <a href="{U_THEME_AUTHOR_LINK}">{L_THEME_AUTHOR}</a>
            </span>
            # ENDIF #
        </div>
    </footer>

Le fichier config.ini

Le fichier config.ini permet d'afficher des informations sur le thème et de lui attribuer une configuration par défaut qui sera appliquée lorsque celui-ci sera installé.
L'article Fichier de configuration d'un thème config.ini détaille le contenu du fichier afin de vous permettre de le modifier simplement.

Code TXT :

author="PHPBoost"
author_mail="contact@phpboost.com"
author_link="http://www.phpboost.com"
version=5.0.1
date="24/02/2016"
compatibility=5.0
require_copyright=0
html_version=5.0 Strict
css_version=3.0
columns_disabled=right
variable_width=0
width="1024px"
pictures="theme/images/theme.jpg,theme/images/admin.jpg"

Sur les thèmes officiels autres que celui de base, vous trouverez une dernière ligne qui permet de surveiller les mises à jour pour le thème.

Code TXT :

repository="https://dl.phpboost.com/unofficial_templates.xml"

Le fichier frame.tpl

Le fichier frame.tpl contient la partie structurante de la page html. Il contient la balise d'en-tête HTML .
La modification de ce fichier n'est nécessaire que si vous souhaitez ajouter un nouveau fichier css ou du code javascript sur l'ensemble du site.

Code HTML :

 

<html lang="{L_XML_LANGUAGE}">
<head>
<title>{TITLE}</title>
<meta charset="windows-1252" />
# IF C_DESCRIPTION #<meta name="description" content="{SITE_DESCRIPTION}" /># ENDIF #
<meta name="generator" content="PHPBoost" />
# IF C_CANONICAL_URL #<link rel="canonical" href="{U_CANONICAL}" /># ENDIF #
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

# IF C_CSS_CACHE_ENABLED #
<link rel="stylesheet" href="${CSSCacheManager::get_css_path('/templates/default/theme/default.css;/kernel/lib/css/font-awesome/css/font-awesome.css;/templates/{THEME}/theme/design.css;/templates/{THEME}/theme/content.css;/templates/{THEME}/theme/table.css;/templates/{THEME}/theme/form.css;/templates/{THEME}/theme/global.css;/templates/{THEME}/theme/cssmenu.css')}" type="text/css" media="screen, print" />
# ELSE #
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/table.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/form.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/cssmenu.css" type="text/css" media="screen" />
# ENDIF #
# IF C_CSS_LOGIN_DISPLAYED #<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/login.css" type="text/css" media="screen" /># ENDIF #

{MODULES_CSS}
# IF C_FAVICON #
<link rel="shortcut icon" href="{FAVICON}" type="{FAVICON_TYPE}" />
# ENDIF #
# INCLUDE JS_TOP #
</head>
<body itemscope="itemscope" itemtype="http://schema.org/WebPage">
# INCLUDE BODY #
# INCLUDE JS_BOTTOM #
</body>
</html>

Le répertoire images

Le répertoire images contient les images du thème qui ne sont pas associées à un fichier CSS.
Par défaut, le répertoire ne contient que l'image no_avatar.png.

Le répertoire lang et le fichier desc.ini

Le répertoire lang contient un répertoire par langue.
Par défaut, celui-ci contient un répertoire english et french.
Chaque répertoire ne contient qu'un seul fichier desc.ini.
Le fichier desc.ini contient les éléments identifiants le thème que l'on retrouve dans l'administration des thèmes du panneau d'administration. On y retrouve le nom du thème name, la description desc et les couleurs principales main_color. La valeur de name peut être différente du nom du répertoire.

Code TEXT :

name="Base"
desc="The PHPBoost official theme."
main_color="White, Blue"

Le répertoire thème

Le répertoire thème contient les différents fichiers CSS du thème ainsi que les images associées à ce thème.

Les fichiers CSS

Chaque thème est constitué des 7 fichiers CSS suivant :

content.css : Il contient les classes propres au contenu du site (messages, modules).
cssmenu.css : Il contient toutes les classes qui permettent la gestion des menus.
design.css : Il contient toutes les classes de mises en forme du site (Le gros du Design)
form.css : Il contient toutes les classes pour la mise en forme des formulaires.
global.css : il contient toutes les classes utiles sur le site et communes aux différents modules.
login.css : il contient les classes pour un affichage uniquement du login.
table.css : il contient les classes de mise en forme des tableaux.

Vous retrouverez le contenu de chaque fichier dans l'article associé à chaque fichier.

Le répertoire images

Le répertoire images du sous dossier theme, contient les images appelées par les fichiers CSS ou TPL du thème.
Pour le thème de base on y trouve :

admin.jpg : Un rendu du panneau d'administration
logo.png : Le logo de base
theme.png : Un rendu du thème (Vu du site)

La grande différence avec les versions 4.0 et antérieures est la quantité d'images. L'utilisation de la librairie Font-Awesome a permis de réduire considérablement le nombre d'image dans un thème et donc la taille. Si néanmoins vous souhaitez revenir à des images, lisez l'article suivant Remplacer les icones FontAwesome par des images pour voir un exemple de modification.

Le répertoire modules

Ce répertoire n'est pas obligatoire, il est nécessaire uniquement lorsque vous souhaitez appliquer des modifications au design d'un module de façon spécifique à un thème.
S'il existe, son contenu serait le suivant :

/connect
- connect_mini.css
- connect_mini.tpl
- ...
/forum
...

Il contient un répertoire par module.
Le nom du répertoire doit être identique au module que l'on souhaite surcharger. Les fichiers contenus dans ce répertoire remplacent les fichiers des modules.
Chaque répertoire de module peut contenir le ou les fichiers .tpl ou .css que l'on souhaite remplacer.
Pour en savoir plus sur la personnalisation d'un thème, vous pouvez consulter cet article.

Il est préférable de modifier un thème que de modifier le module. Cela permet notamment de faciliter les mises à jours des modules.

Fichier table.css

Fri, 04 Mar 2016 19:15:08 +0100

Le fichier table.css contient les éléments pour l'affichage des tableaux HTML et responsive.

Affichage des tableaux basic

Code CSS :

table {
    margin: 8px 0;
    padding: 0;
    width: 100%;
    border-spacing: 0;
}

Entête du tableau

Code CSS :

table caption {
    margin: 5px 0 5px 20px;
    border-bottom: 1px solid #D1D2D5;
    color: #757679;
    font-size: 13px;
    text-align: left;
}
table thead th {
    padding: 8px;
    background-color: #4D4C50;
    color: #E5E6E6;
    font-size: 1.1em;
    text-align: center;
    font-weight: normal;
}
table thead th:first-child { border-top-left-radius: 3px;  }
table thead th:last-child  { border-top-right-radius: 3px; }
table thead th a         { color: #E5E6E6; }
table thead th a:hover     { color: #FFFFFF; }

Le contenu du tableau

Code CSS :

table tbody td {
    padding: 8px;
    background-color: #F5F5F5;
    border-top: 1px solid #D1D2D4;
    border-left: 1px solid #D1D2D4;
    color: #676A74;
    text-align: center;
}
tr:nth-child(even) td {
    background-color: #FFFFFF;
}
table tbody tr:last-child td {
    border-bottom: 1px solid #D1D2D4;
}
table.bt tbody tr:last-child td {
    border-bottom: none;
}
table.bt tbody tr:last-child td:last-child {
    border-bottom: 1px solid #D1D2D4;
}
table tbody tr td:last-child {
    border-right: 1px solid #D1D2D4;
}
table tbody tr.no-separator td {
    border-top: none;
}
table tbody tr td.no-separator {
    border-left: none;
}
table tbody tr td.no-separator:first-child {
    border-left: 1px solid #D1D2D4;
}

Le pied de tableau

Code CSS :

table tfoot tr th {
    padding: 8px;
    background-color: #F0F0F0;
    border-bottom: 1px solid #D1D2D4;
    color: #AAAAAA;
}
table tfoot tr th:first-child {
    border-left: 1px solid #D1D2D4;
    border-bottom-left-radius: 3px;
}
table tfoot tr th:last-child {
    border-right: 1px solid #D1D2D4;
    border-bottom-right-radius: 3px;
}
table tfoot tr th:only-child {
    text-align: right;
}
table tfoot tr th * {
    vertical-align: middle;
}
table tfoot tr th a {
    color: #676A74;
}
table tfoot tr th select {
    padding: 2px 5px;
}

Patch thead tableaux formates

Code CSS :

table.formatter-table th.formatter-table-head {
    padding: 8px;
    background-color: #4D4C50;
    color: #E5E6E6;
    font-size: 1.4em;
    text-align: center;
    font-weight: normal;
}
table.formatter-table th.formatter-table-head:first-child { border-top-left-radius: 3px;  }
table.formatter-table th.formatter-table-head:last-child  { border-top-right-radius: 3px; }
table.formatter-table th.formatter-table-head a       {    color: #E5E6E6; }
table.formatter-table th.formatter-table-head a:hover {    color: #FFFFFF; }
table.formatter-table th.formatter-table-head p {
    margin-bottom: 0;
}

Taille des colonnes

Code CSS :

.col-smaller { width: 3em;  }
.col-small   { width: 6em;  }
.col-large   { width: 9em;  }
.col-larger  { width: 12em; }
.col-xlarge  { width: 15em; }

Les mini tableaux

Code CSS :

table.mini th,
table.mini td {
    padding: 3px 1px;
    font-size: 11px;
}
@media (max-width: 768px) {
    table.mini th,
    table.mini td {
        padding: 7px 1px;
    }
}
table.mini th a,
table.mini td a {
    font-size: 11px;
}

Pagination footer tableaux

Code CSS :

table tfoot nav.pagination a {
    color: #8B8D90;
    text-decoration: none;
    padding: 3px 3px;
}
table tfoot nav.pagination a span.current-page {
    color: #CED0D0;
    text-decoration: none;
}

Affichage des tableaux responsive sur les petits ecrans

Code CSS :

@media (max-width: 768px) {
    table thead th,
    table tbody td,
    table tfoot tr th {
        padding: 4px;
        font-size: 0.9em;
    }
}

Table responsive basictable.js

Afin de simplifier l'affichage des tableaux sur smartphone, nous avons choisis d'utiliser le plugin jQuery "basictable". il permet de basculer d'un affichage classique multi-colonne en un affichage condensé sur une colonne.

Code CSS :

table.bt thead th {
    display: none;
}
table.bt thead th:first-child{
    display: block;
    border-radius: 0;
}
@media (min-width:769px){
    table.bt thead th:first-child {
        border-radius: 3px 3px 0 0;
    }
}
table.bt tbody td {
    display: block;
    width: 100%;
    border-right: 1px solid #D1D2D4;
    text-align: left;
    vertical-align: top;
}
table.bt tbody td.no-separator {
    border-left: 1px solid #D1D2D4;
}
table.bt tbody td:before {
    display: inline-block;
    width: 35%;
    content: attr(data-th) " ";
    font-weight: bold;
}
table.bt tbody td.bt-hide {
    display: none;
}
table.bt tbody td .bt-content {
    display: inline-block;
    padding-left: 6px;
    max-width: 100%;
    vertical-align: top;
}
.bt-wrapper.active {
    max-height: 310px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

Fichier login.css

Fri, 04 Mar 2016 19:09:08 +0100

Le fichier login.css contient les éléments pour afficher la page de connexion a l'administration ou au site lorsqu'il est en maintenance.

Code CSS :

 
.fieldset-content {
    margin: 0 auto;
    width: 450px;
    max-width: 100%;
}
 
body {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -ms-align-items: center;
    -webkit-align-items: center;
    margin: 0;
    padding: 0;
    height: auto;
    background-color: #E8EDF3;
}
 
div#global {
    padding: 20px;
    min-height: 0;
    width: 100%;
    background-color: #FFFFFF;
    border-spacing: 1px;
    border: 1px #bebebe solid;
}
 
#connect {
    margin-bottom: 40px;
}

Fichier form.css

Fri, 04 Mar 2016 19:06:31 +0100

Le fichier form.css contient l'ensemble des classes CSS qui servent pour l'affichage des boutons et des formulaires.

Boutons et class boutons

Les classiques

Code CSS :

button,
.button {
    padding: 0.3em 1em;
    height: auto;
    background-image: linear-gradient(to bottom,  rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%);
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC;
    border-color: #E1E1E1 #E1E1E1 #BFBFBF #CFCFCF;
    border-radius: 4px;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
    white-space: nowrap;    
}
 
button:hover,
.button-hover {
    background-color: #FDFDFD;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
    transition: all 0.1s linear;
}
 
button:active,
.button-active {
    background-color: #F1F1F1;
    border: 1px solid #DDDDDD;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
}

Les petits boutons

Code CSS :

button.small,
.button-small {
    padding: 0.2em 0.5em;
    font-size: 1.1rem;
}

Les boutons de formulaire

Code CSS :

button.submit {
    background-color: #3B6B9F;
    border-color: #366393;
    color: #FEFEFE;
}

button.submit:hover {
background-color: #366393;
border-color: #315A86;
}

Les boutons "basic"

Code CSS :

.basic-button {
    display: inline-block;
    margin: 1px;
    padding: 1px 6px;
    background-color: #2F5B8A;
    border-radius: 2px;
    font-weight: bold;
    text-align: center;    
    color: #FFFFFF;
 
}
 
.basic-button:hover {
    background-color: #3D6997;
    color: #FFFFFF;
    text-decoration: none;
}

Bouton basic avec couleur alternative

Code CSS :

.basic-button.alt     { background-color: #AAAAAA; }
.basic-button.alt:hover { background-color: #BBBBBB; }

Les field button

Code CSS :

.field-button {
    display: inline-block;
    font-size: 0;
    white-space: nowrap;
}
 
.field-button input {
    border-radius: 4px 0 0 4px;
}
 
.field-button button {
    margin-left: -1px;
    padding: 4px 8px;
    border-radius: 0 4px 4px 0;
    font-size: 11px;
}

Les formulaires

Le conteneur de formulaire

Code CSS :

.fieldset-mini {
    margin: 20px auto auto auto;
    width: 540px;
}
 
fieldset {
    margin: 1.5em 0;
    background: none;
    border: none;    
}
 
fieldset img {
    max-width: 250px;
}
 
@media (min-width: 769px) {
    fieldset img {
        max-width: 450px;
    }
}
 
fieldset.fieldset-submit {
    width: 100%;
    background: none;
    border: none;
    text-align: center;
}
 
fieldset.fieldset-submit legend {
    display: none;
}
 
.horizontal-fieldset-desc,
.horizontal-fieldset-element  {
    display: inline-table;
    vertical-align: middle;
}
 
.horizontal-fieldset-element .form-field-select {
    max-width: none;
}
 
optgroup {
    border: none;
    border-bottom: 1px solid #5B5A5A;
    font-weight: bold;
}
 
option {
    padding: 0 3px;
}
 
legend {
    display: block;
    margin: 0 0 0.6em 0;
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
    text-transform: none;
    color: #474747;
    font-size: 1.5em;
}

la Prévisualisation

Code CSS :

.xmlhttprequest-preview {
    padding: 0 2px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    color: #2E3B5F;
}
 
.xmlhttprequest-preview img {
    max-width: 600px;
}

les éléments de saisie

Code CSS :

input[type=text],
input[type=email],
input[type=url],
input[type=number],
input[type=color],
input[type=tel],
input[type=search],
input[type=password],
input[type=file],
textarea,
select {
    padding: 4px 18px 4px 6px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);
    color: #555555;
}
 
input[type=text]:hover,
input[type=email]:hover,
input[type=url]:hover,
input[type=number]:hover,
input[type=color]:hover,
input[type=tel]:hover,
input[type=search]:hover,
input[type=password]:hover,
input[type=file]:hover,
textarea:hover,
select:hover {
    background-color: #FFFFFF;
    border: 1px solid #BBBBBB;
    color: #333333;
}
 
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=color]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=file]:focus,
textarea:focus,
select:focus {
    border-color: #BBBBBB;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01), 0 0 6px rgba(0, 0, 0, 0.2);
    outline: 0;
    color: #222222;
}
 
input[type=color] {
    padding: 0 2px 0 2px;
    width: 25px;
}
 
form input:focus:invalid,
form textarea:focus:invalid,
form .constraint-status-right input,
form .constraint-status-right textarea {
    border-color: rgba(196, 60, 43, 0.3);
    box-shadow: 0 0 3px rgba(196, 60, 43, 0.1);
}
 
form input:focus:valid,
form textarea:focus:valid,
form .constraint-status-right input,
form .constraint-status-right textarea {
    border-color: rgba(71, 137, 72, 0.3);
    box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}
 
input.field-smaller     { width: 29px;  }
input.field-small       { width: 77px;  }
input.field-large       { width: 200px; }
input.field-xlarge         { width: 250px; }
 
input.input-date         { width: 100px; }
input.input-hours         { width: 50px;  }
input.input-minutes     { width: 50px;  }
 
input[name$="_hours"]     { width: 50px;  }
input[name$="_minutes"] { width: 50px;  }

Surcharge générateur de mot de passe sur chrome

Code CSS :

.cip-icon-key-small {
    display: none !important;
}

Les élément du formulaire (englobe le label et l'input d'un champ)

Code CSS :

.form-element,
.form-element-textarea {
    position: relative;
    margin: 0 1em 1em 1em;
}
 
@media (min-width: 769px) {
    div#main.main-with-left.main-with-right section .form-element,
    div#main.main-with-left.main-with-right section .form-element-textarea {
        margin: 5px 0;
    }
}
 
.fieldset-description {
    margin: 0 1em 1.5em 1em;
}
 
@media (max-width: 768px) {
    .form-element,
    .form-element-textarea {
        margin: 0 0.6em 1em 0.6em;
    }
 
    .fieldset-description {
        margin: 0 0.6em 1.3em 0.6em;
    }
}
 
@media (max-width: 480px) {
    .form-element,
    .form-element-textarea {
        margin: 0 0.6em 0.5em 0.6em;
    }
 
    .fieldset-description {
        margin: 0 0.6em 0.9em 0.6em;
    }
}
 
@media (max-width: 768px) {
    .form-element-textarea + div.center button,
    .fieldset-content > div.center button {
        margin-top: 5px;
    }
}
 
.form-element [id$="user_avatar"] img {
    max-width: 200px;
}
 
.form-field {
    position: relative;
    display: inline-block;
    max-width: 600px;
}
 
@media (max-width:360px) {
    .form-field {
        max-width: 270px;
    }
}
 
.form-field-free-large {
    width: 100%;
    max-width: none;
}
 
.form-field-action-link {
    text-align: center;
}
 
/* --- Label pour les checkbox et radio --- */
.form-field label {
    display: block;
    margin: 0 10px 0 0;
}

Les labels pour les inputs [for] et pour les elements sans associations

Code CSS :

.form-element > label {
    display: inline-block;
    padding-right: 10px;
    width: 40%;
    text-align: left;
    vertical-align: top;
}
 
.field-description {
    display: block;
    font-size: 0.8em;
    line-height: 12px;
}
 
@media (max-width: 768px) {
    .form-element > label {
        width: 100%;
    }
 
    span.field-description {
        display: inline-block;
        font-size: 0.7em;
        font-style: italic;
    }
}
 
@media (min-width: 769px) {
    .form-field-select {
        max-width: 59%;
    }
}
 
.form-field-select select {
    max-width: 100%;
}
 
input[disabled=disabled],
input[disabled=disabled]:hover,
input[disabled=disabled]:focus,
textarea[disabled=disabled],
textarea[disabled=disabled]:hover,
textarea[disabled=disabled]:focus,
select[disabled=disabled],
select[disabled=disabled]:hover,
select[disabled=disabled]:focus {
    background-color: #F1F1F1;
    border: 1px solid #CCCCCC;
    color: #AAAAAA;
    cursor: not-allowed;
}
 
input[readonly=readonly],
input[readonly=readonly]:hover,
input[readonly=readonly]:focus,
textarea[readonly=readonly],
textarea[readonly=readonly]:hover,
textarea[readonly=readonly]:focus,
select[readonly=readonly],
select[readonly=readonly]:hover,
select[readonly=readonly]:focus {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
    color: #888888;
}
 
.form-field-checkbox {
    display: inline-block;
}

Les champs Textarea

Code CSS :

.form-field-textarea {
    position: relative;
    display: inline;
    margin: 5px auto;
    width: 99%;
}
 
textarea {
    width: 100%;
    overflow: auto;
    resize: vertical;
}
 
.form-element-textarea {
    width: 98%;
    margin: 0 1% 1em;
}
 
.form-element-textarea textarea {
    width: 100%;
}
 
.form-element-textarea .form-field-textarea {
    display: block;
}
 
.form-element-textarea .form-field-textarea div {
    float: left;
}
 
.form-element-preview {
    margin: 5px auto 0 auto;
    text-align: center;
}

Les choix des permissions

Code CSS :

.form-element-auth .form-field {
    display: inline-block;
    margin: 2px 0 0 0;
}
 
.form-element-auth .form-field div[class^="advanced-auth"] {
    float:left;
}
 
.form-element-auth .field-description {
    display: inline;
    font-style: italic;
}
 
.advanced-auth-group select {
    padding-right: 5px;
    max-width: 153px;
    overflow-x: auto;
}
 
.advanced-auth-select select {
    padding-right: 5px;
    max-width: 132px;
    word-wrap: normal;
    overflow-x: auto;
}
 
.advanced-auth-select {
    margin-left:5px;
}
 
.advanced-auth-input {
    margin-left: 5px;
    width: 144px;
}
 
.advanced-auth-input input {
    padding: 4px 24px 4px 6px;
}
 
.advanced-auth-input button {
    margin-left: -29px;
    padding: 5px 5px 6px 5px;
    border-width: 0 0 0 1px;
    border-radius: 0 4px 4px 0;
}
 
.advanced-auth-input-result {
    margin: 2px 0 0 0;
    width: 138px;
    height: 100px;
}
 
.bbcode ~ .form-field-textarea textarea {
    border-radius: 0 0 4px 4px;
    border-width: 0 1px 1px 1px;
}
 
@media (min-width: 769px) {
    .form-element-textarea-small {
        width: 49%;
    }
}
 
@media (max-width: 480px) {
    .form-element-auth .form-field .advanced-auth-input {
        float: none;
        margin: 5px 0 0 0;
    }
}

Le vérification des contraintes de formulaire

Code CSS :

.constraint-status-error input,
.constraint-status-error textarea {
    border-color: rgba(196, 60, 43, 0.3);
    box-shadow: inset 0 0 3px rgba(196, 60, 43, 0.1);
    color: #C43C35;
}
 
.constraint-status-error input:hover,
.constraint-status-error input:focus,
.constraint-status-error textarea:hover,
.constraint-status-error textarea:focus {
    border-color: rgba(196, 60, 43, 0.5);
    box-shadow: inset 0 0 6px rgba(196, 60, 43, 0.3);
    color: #C43C35;
}
 
.text-status-constraint {
    position:absolute;
    display: block;
    z-index: 1;
    padding: 6px 5px;
    left: 5px;
    min-width: 20em;
    background-color: #FEFEFE;
    border: 1px solid #EAEAEA;
    box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    font-size: 0.8em;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
 
input + .text-status-constraint {
    top: 25px;
}
 
.text-status-constraint:after,
.text-status-constraint:before {
    content: " ";
    position: absolute;
}
 
.text-status-constraint:before {
    left: 8px;
    top: -9px;
    border-bottom: 9px solid rgba(230, 230, 230, 1);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}
 
.text-status-constraint:after {
    left: 9px;
    top: -8px;
    border-bottom: 8px solid rgba(250, 250, 250, 1);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
 
div.field-required:after,
div.picture-status-constraint:after {
    display: inline-block;
    position: absolute;
    right: 4px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
div.field-required:after {
    top: 10px;
    opacity: 0.6;
    color: #C43C35;
    font-size: 0.8rem;
    content: "\f069";
}
 
.form-field-date.field-required:after,
.form-field-date.picture-status-constraint:after {
    right: 24px;
}
 
.form-field-select.field-required:after,
.form-field-number.field-required:after,
.form-field-decimal.field-required:after {
    right: -10px;
}
 
.form-field-datetime.field-required:after {
    right: -15px;
}
 
.form-field-checkbox.field-required:after {
    right: -20px;
    top: 0;
}
 
.form-field-upload-file.field-required:after {
    right: 43px;
    top: 12px;
}
 
.constraint-status-right .form-field-upload-file.picture-status-constraint:after {
    right: 40px;
    top: 8px;
}
 
.constraint-status-right .form-field-color:after,
.constraint-status-right .form-field-select:after,
.constraint-status-right .form-field-number:after,
.constraint-status-right .form-field-decimal:after {
    right: -20px;
}
 
.constraint-statuts-right .form-field-checkbox:after {
    top: 4px;
}
 
.constraint-statuts-right .form-field-datetime:after {
    right: -22px;
}
 
.form-field-number input,
.form-field-decimal input,
.form-field-datetime input {
    padding-right: 2px;
}
 
.form-element-date .constraint-status-error div.field-required:after,
.form-element-date .constraint-status-right div.field-required:after {
    right: 10px;
}
 
.form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after {
    top: 45%;
}
 
.constraint-status-right div.field-required:after {
    content: " ";
}
 
.constraint-status-right div.form-field-checkbox.picture-status-constraint:after {
    top: 0;
}
 
.constraint-status-right div.picture-status-constraint:after {
    opacity: 1;
    font-size: 1.5rem;
    top: 6px;
}
 
.constraint-status-error .form-field-textarea .picture-status-constraint:after,
.constraint-status-right .form-field-textarea .picture-status-constraint:after {
    top: 40%;
}
 
.constraint-status-right div.picture-status-constraint:after {
    content: "\f00c";
    color: #57A957;
}
 
.constraint-status-error i.picture-status-constraint {
    content: "\f056";
    color: #C43C35;
}
 
.form-field-multi-select.field-required:after {
    display: none;
}
 
.constraint-status-right .form-field-multi-select select {
    border-color: rgba(71, 137, 72, 0.3);
    box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}
 
.form-field-radio-button.field-required:after,
.form-field-multiple-checkbox.field-required:after {
    top: 4px;
    right: -10px;
}
 
.form-field-radio {
    display: inline-block;
}

les champs d'auto-complétion

Code CSS :

.autocomplete-suggestions {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    overflow: auto;
}
 
.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399FF;
}
 
.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
 
.autocomplete-selected {
    background-color: #F0F0F0;
}
 
.autocomplete-no-suggestion {
    text-align: center;
}

Fichier global.css

Fri, 04 Mar 2016 18:56:51 +0100

Le fichier global.css contient les classes globales du site, qui peuvent être utilisées par les modules et le noyau.

La mise en forme du texte

Commençons par les éléments de mise en forme du texte

Les liens du site

Chaque fois qu'un lien est cliquable, c'est la balise qui se cache derrière. Pour gérer la couleur des lien par défaut, il suffit de remplacer les valeurs de l'attribut color ci-dessous.

Code CSS :

a {
    color: #4372AA;
    text-decoration: none;
}
a:hover {
    color: #2D4D73;
    text-decoration: underline;
}

Les liens des utilisateurs

Lorsque le lien correspond à un pseudo, nous attribuons une couleur particulière et notamment pour les admin, modo et membre. Vous pouvez personnaliser ces éléments avec le code ci-dessous.

Code CSS :

a.admin  { color: #FFA34F; }
a.modo   { color: #006699; }
a.member { color: #000000; }

Couleur de texte

Un certain nombre de couleur sont prédéfini pour afficher des élements actifs ou des alertes.

Code CSS :

.color-alert { color: #B22222; }
.color-notavailable     { color: #B22222; }
.color-available     { color: #008000; }
.color-unknown         { color: #004b80; }
.bkgd-color-visible         { background-color: #CCFFCC; }
.bkgd-color-unvisible         { background-color: #FFEE99; }
.bkgd-color-unaprobed     { background-color: #FFCCCC; }
.bkgd-color-fixed         { background-color: #7FFF9C; }
tr td.bkgd-color-fixed     { background-color: #7FFF9C; }
.bkgd-color-processing     { background-color: #FFD86F; }
tr td.bkgd-color-processing { background-color: #FFD86F; }
.bkgd-color-unknown     { background-color: #FF796F; }
tr td.bkgd-color-unknown     { background-color: #FF796F; }

Les différentes tailles de polices

Afin de facilité la personnalisation, nous avons créer des tailles pour redéfinir la taille du texte dans certains cas. Nous utilisons l'unités de mesure "em" qui permet d'adapter automatiquement la taille en fonction de celle de son parent.

Code CSS :

.smaller { font-size: 0.7em; }
.small   { font-size: 0.9em; }
.normal  { font-size: 1.0em; }
.big     { font-size: 1.2em; }
.bigger  { font-size: 1.5em; }
.biggest { font-size: 2.0em; }

les titres (la balise h)

Les balises sont les en-têtes des différents éléments de votre site. Des tailles ont été définies pour assurer une cohérence dans la page. Cette fois-ci nous utilisons l'unité "rem" qui permet de définir la taille par rapport à la première taille (celle du body).

Code CSS :

h1 { font-size: 2.2rem; }
h2 { font-size: 2.0rem; }
h3 { font-size: 1.9rem; }
h4 { font-size: 1.8rem; }
h5 { font-size: 1.6rem; }
h6 { font-size: 1.4rem; }
h1, h2, h3, h4, h5, h6 {
    overflow: hidden;
}

Les titres "BBcode"

Lorsque les titres sont utilisés dans un contenu tel que le forum, ils sont associés à une classe supplémentaire

Code CSS :

.formatter-title {
    display: inline-block;
    margin: 0.5rem 0;
}
h1.formatter-title {  }
h2.formatter-title { margin-left: 1.5rem; }
h3.formatter-title { margin-left: 3rem; }
h4.formatter-title { margin-left: 5rem; }
h3.formatter-title,
h4.formatter-title {
    border-bottom: 1px solid #366393;
}

Mise en forme du contenu

La partie suivante correspond à la mise en forme du contenu tel que le mini-calendrier, le selecteur de couleur, les blocs.

Affichage du mini calendrier

Les formulaires demandes parfois la saisie d'une date. Le sélecteur est géré par le code suivant.

Code CSS :

.calendar-block-container {
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
}
.form-field .calendar-container {
    display: inline-block;
    position: relative;
}
.calendar-block {
    position: absolute;
    border: 1px solid #999999;
    z-index: 10;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.calendar-block {
    top: 25px;
    left: -104px;
}
.calendar-block .date-picker {
    margin: 0;
    width: 250px;
    table-layout: fixed;
}
.calendar-block .date-select-container {
    background-color: #F5F5F5;
    padding: 2px 0;
    border-radius: 3px 3px 0 0;
}
.calendar-block .date-select-previous {
    float: left;
    margin: 1px 4px 0 4px;
}
.calendar-block .date-select-next {
    float: right;
    margin: 1px 4px 0 4px;
}
.calendar-block .date-select-next i,
.calendar-block .date-select-previous i {
    color: #666666;
}
.calendar-block .date-select-content {
    margin: auto;
    width: 185px;
    text-align: center;
}
.calendar-block .date-select-content select,
.calendar-block .date-select-content select:focus {
    padding: 1px 1px;
    font-size: 0.9em;
    border: none;
    background: none;
    box-shadow: none;
}
.calendar-block .date-select-month {
    width: 92px;
    margin: 0 1px 0 5px;
}
.calendar-block .date-select-year {
    width: 55px;
    margin: 0;
}
.calendar-block .date-picker select,
.calendar-block .date-picker select:focus {
    box-shadow: none;
    max-width: 75px;
}
.calendar-block .date-picker thead tr th {
    border-top: 1px solid #CCCCCC;
    padding: 5px 0;
    border-radius: 0;
    background-color: #FFFFFF;
    font-weight: bold;
    color: #666666;
}
.calendar-block .date-picker tbody tr:last-child {
    border-bottom: none;
}
.calendar-block .date-picker tbody td {
    height: 23px;
    padding: 1px 2px;
}
.calendar-block .date-picker tbody td:first-child { border-left: none;  }
.calendar-block .date-picker tbody td:last-child  { border-right: none; }
.calendar-block .date-picker tbody td.calendar-none        { background-color: #FFFFFF; }
.calendar-block .date-picker tbody td.calendar-today     { background-color: #B5E5B9; }
.calendar-block .date-picker tbody td.calendar-event     { background-color: #DBE5EE; }
.calendar-block .date-picker tbody td.calendar-weekend     { background-color: #FFE3B6; }
.calendar-block .date-picker tbody tr:last-child td {
    border-bottom: none;
}
.calendar-block .date-picker tbody tr:last-child td:first-child { border-radius: 0 0 0 2px; }
.calendar-block .date-picker tbody tr:last-child td:last-child    { border-radius: 0 0 2px 0; }
td.calendar-week {
    border-right: 1px solid #BBBBBB;
}

Les blocs bbcode

De nombreux éléments dans le bbcode utilise un bloc pour délimiter leur zone.

Code CSS :

.bbcode-block-container {
    position: absolute;
    z-index: 20;
    top: 26px;
    left: -4px;    
    margin: 0;
    padding: 0;
    text-align: center;
}
.bbcode-block {
    margin: 0;
    background-color: #F3F3F3;
    border: 1px solid #AAAAAA;
    border-radius: 3px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.bbcode-block a {
    cursor: pointer;
    text-decoration: none;
}

Le sélecteur de couleurs

Il s'agit du bloc permettant de sélectionner une couleur. Il est notamment utilisé dans la barre bbcode ou les formulaires.

Code CSS :

.color-picker {
    position: absolute;
    z-index: 100;
}
.color-picker .bbcode-block table {
    margin: auto;
    border: none;
    border-collapse: collapse;
}
.color-picker td {
    padding: 0;
    border: 1px solid #F3F3F3;
}
.color-picker td a {
    display: block;
    width: 14px;
    height: 14px;
}

les blocs de quotes, de code, ou cachés

Lorsque vous souhaitez afficher une quote, du code ou masqué un texte, vous pouvez utiliser les class suivantes : "blockquote", "code", "hide". La class "text-" correspond à l'élément précédent le bloc.

Code CSS :

.formatter-hide,
.formatter-code,
.formatter-blockquote {
    display: block;
    margin: auto;
    padding: 2px 0;
    width: 93%;    
    font-weight: bold;    
}
.hide,
.code,
.blockquote {
    margin: 0 25px;
    padding: 8px;
    max-height: 500px;
    background-color: #FAFAFA;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    overflow: auto;
    color: #444444;    
}
.hide {
    height: 10px;
    overflow: hidden;
    cursor: pointer;
}
.hide2 {
    visibility: hidden;
    overflow: auto;
}

Les autres éléments de positionnement

Autres codes associés aux éditeurs de texte

Code CSS :

.indent {
    margin-left: 30px;
}
.formatter-acronym {
    cursor: help;
}
.formatter-block {
    display: block;
    margin: 5px 20px;
    padding: 5px;
    border: 1px solid #C4CED6;
    overflow: hidden;
}
.formatter-fieldset {
    margin: 10px;
}
.formatter-ul {
    text-align: left;
}

Les listes numérotées

La balise

Code CSS :

.code ol {
    margin-left: 3em;
}

Code CSS :

.feed-list {
    margin: 5px 0;
    list-style-type: none;
    text-align: left;
}
@media (max-width: 768px) {
    .feed-list li a {
        margin: 1px 0;
        padding: 7px 0;
        display: inline-block;
    }
}

La recherche de membres (en AJAX)

Code CSS :

.xmlhttprequest-result-search {
    margin: 2px 0 0 0;
    padding: 2px;
    min-height: 40px;
    width: 100px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);
    overflow: auto;
}

La barre de progression

Code CSS :

.progressbar-container {
    position: relative;
    margin: 4px 0 10px;
    background-color: #F5F5F5;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progressbar-container .progressbar-infos {
    position: absolute;
    width: 100%;
    line-height: 13px;
    font-size: 11px;
    text-align: center;
}
.progressbar {
    border-radius: 3px 0 0 3px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.progressbar[style*="100"] {
    border-radius: 3px 3px 3px 3px;
}
.progressbar-container .progressbar {
    height: 13px;
    background-color: #8ECF67;
    transition: width .6s ease;
}

Le système de notation

Code CSS :

.notation,
.static-notation {
    display: inline-block;
}
.notation .star,
.static-notation .star {
    padding-right: 5px;
    color: #E3CF7A;
    font-size: 14px;
    text-decoration: none;
}

Les Icônes spécifiques PHPBoost de FontAwesome

Les couleurs spécifiques

Code CSS :

.fa-syndication:before { color: #F57900; }
.fa-success:before     { color: #478948; }
.fa-forbidden:before   { color: #BA4B49; }
.fa-error:before       { color: #BA4B49; }
.fa-warning:before     { color: #C19954; }
.fa-ban:before         { color: #BA4B49; }
.fa-unban:before       { color: #478948; }
.fa-male:before        { color: #8DC3E9; }
.fa-female:before      { color: #F49CC4; }
.fa-online:before      { color: #52D132; }
.fa-offline:before     { color: #E05759; }
.fa-trend-up:before    { color: #478948; }
.fa-trend-down:before  { color: #BA4B49; }

les alertes

Code CSS :

li.small-block .fa-stack {
    height: 2.34em;
}
.fa-circle-alert {
    position: absolute;
    z-index: 1;
    top: -3px;
    left: 20px;
    font-size: 1.32em;
    color: #BA4B49;
}
.fa-circle-alert span {
    position: absolute;
    top: 4px;
    display: block;
    margin: 0 auto;
    width: 100%;
    color: #FFFFFF;
    font-size: 0.7em;
    text-align: center;
}

Les message d'erreurs

Code CSS :

div.message-helper-small {
    width: 50%;
}
.error,
.notice,
.warning,
.success,
.question {
    position: relative;
    display: block;
    margin: 5px auto 15px auto;
    padding: 10px 10px 10px 40px;
    height: auto;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    line-height: 20px;
    text-align: left;
    overflow: hidden;
}
.error:before,
.notice:before,
.warning:before,
.success:before, 
.question:before {
    position: absolute;
    left: 6px;
    top: 7px;
    width: 28px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-size: 2em;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.error:before    { content: "\f00d"; }
.notice:before   { content: "\f12a"; }
.warning:before     { content: "\f071"; }
.success:before     { content: "\f00c"; }
.question:before { content: "\f128"; }
.error, .error:before       { color: #BA4B49; }
.notice, .notice:before     { color: #888888; }
.warning, .warning:before   { color: #C19954; }
.success, .success:before   { color: #478948; }
.question, .question:before { color: #3B88AE; }
.error    { background-color: #F3DFDF; border-color: #ECCDD2; }
.notice   { background-color: #F0F0F0; border-color: #E2E2E2; }
.warning  { background-color: #FDF9E4; border-color: #FBECCD; }
.success  { background-color: #E0F1D9; border-color: #D7EAC7; }
.question { background-color: #DAEEF8; border-color: #BDE9F2; }

Le système d'upload

Code CSS :

#module-user-upload {
    margin: 5px;
}
.upload-address-bar {
    margin: 0 25px;
    padding: 6px;
    background-color: #FAFAFA;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    color: #444444;
}
.upload-address-bar-links {
    float: right;
    margin: 0 25px 25px 25px;
}
.upload-address-bar-links a {
    margin-left: 10px;
}
#empty-folder {
    width: 70%;
}
.upload-elements-container {
    margin: 10px 0 0 20px;
    overflow: hidden;
}
.upload-elements-file,
.upload-elements-repertory {
    float: left;
    margin: 10px;
}
.upload-elements-repertory {
    height: 60px;
}
a.upload-recent-file {
    color: #BA4B49;
}
.upload-input-bbcode {
    margin-top: 2px;
    cursor: pointer;
}
.upload-cat-list,
.upload-cat-explorer {
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height: normal;
}
.upload-cat-explorer {
    padding-left: 30px;
}
.upload-no-sub-cat {
    padding-left: 17px;
}
/* --- Deplacement des fichiers --- */
.upload-selected-cat {
    background-color: #F5FBFF;
    border: 1px solid #2C5169;
}
.upload-elements-move-to,
.upload-elements-move-file,
.upload-elements-move-to-cat,
.upload-elements-move-folder {
    float: left;
    width: 33%;
    text-align: center;
}
.upload-elements-move-to {
    margin-top: 50px;
}
.upload-elements-move-file img {
    width: 100px;
    height: auto;
}
.upload-root-cat {
    padding: 0 0 0 17px;
}

Les icônes réseaux sociaux

Code CSS :

a.social-connect {
    display: inline-block;
    margin: 10px 0;
    width: 30px;
    height: 30px;
    vertical-align: top;
    border-radius:4px;
    color: #DEDEDE;
    text-align: center;
}
.horizontal-fieldset a.social-connect {
    margin: 0;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .horizontal-fieldset a.social-connect {
        display: block;
        width: 100%;
        margin: 5px auto;
    }
    .horizontal-fieldset a.social-connect i {
        margin-right: 5px;
    }
}
a.social-connect i:before {
    color: #DFDFDF;
    transition: 0.2s ease-out;
}
a.social-connect:hover i:before {
    color: #EFEFEF;
    transition: 0.2s ease-out;
}
a.fb i:before         { font-size: 1.9em; }
a.google i:before     { font-size: 1.7em; }
a.fb         { padding: 8px 0 0 4px; }
a.google     { padding: 6px 1px 0 0; }
@media (max-width: 768px) {
    a.fb {
        padding: 5px 0 0 3px;
    }
}
a.fb         { background: #3B5998; }
a.google     { background: #D8432E; }    
a.twitter     { background: #5EA9DD; }
a.social-connect span {
    display: none;
}

Fichier design.css

Fri, 04 Mar 2016 18:43:47 +0100

Le fichier design.css définit en fait l'aspect général de votre thème. On y trouve les éléments importants comme la largeur de votre site, la couleur d'arrière plan, et l'organisation des zones tels que l'en-tête, le menu de gauche ou le pied de page.
Commençons par le commencement :

Fixe ou extensible ?

Le thème peut être fixe, ou extensible.

Mais qu'est ce que cela veut dire ?

C'est simplement la taille que va prendre votre site, un thème fixe a une taille défini cela veut dire qu'en fonction de la taille de la fenêtre du visiteur ou de sa résolution, le site ne s'y adaptera pas. Un thème extensible en revanche s'adapte a la résolution d'écran et la taille de la fenêtre du navigateur, donc il va s'étirer.

La partie concernée :

Code CSS :

/* Conteneurs 
--------------------------------------*/
/* ##### Conteneur global du site ###### */
div#global {
width: 980px;
margin: 18px auto 0px auto;
padding-bottom: 42px; /* Taille du footer */
}

Le thème base est fixe mais cela peut vite se modifier en changeant simplement la taille ( width/largeur )
Il vous suffira donc de faire ça comme ceci :

Code CSS :

/* Conteneurs 
--------------------------------------*/
/* ##### Conteneur global du site ###### */
div#global {
    width:auto;
    margin:auto;
    padding-bottom: 42px; /* Taille du footer */
}

Vous constaterez aussi le padding-bottom qui correspond à la taille du footer. Sans cette astuce, le footer ne reste pas en bas de page lorsque le contenu est petit (vide en fait).

L'arrière plan, la couleur, taille de la police :

Code CSS :

body {
position: relative;
min-height: 100%;
height: auto;
background: #E8EDF3 url(images/body.png) repeat-x;
color: #555555;
font-size: 13px;
font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
}

Le body est le premier élément du site. Tous les éléments ont donc une répercutions sur les classes suivantes.
La taille du texte ainsi que la police doivent être définit ici pour éviter les déclarations multiples.
Pour changer l'arrière plan ( background ) il vous suffira simplement de changer l'image global ainsi que la valeur de son code couleur :

Code CSS :

background:#E9ECEF url(images/global.png)  repeat-x;

repeat-x veut dire que l'on va répéter l'image tout le long (à l'horizontal).
Pour répéter une image verticalement il vous suffira de mettre :

Code CSS :

repeat-y

Et pour que l'image ne soit pas répétée mettre :

Code CSS :

no-repeat

Bien sûr il existe encore de grandes possibilités à ce niveau.
Pour la police, c'est toujours quelque chose de très simple

Code CSS :

color:#0E2A48;

Il vous suffira de changer le code couleur, pour la taille c'est à ce niveau que ça ce passe :

Code CSS :

font-size:12px;

Les éléments génériques

Code CSS :

html {
    font-size: 100%;
    font-size: 10px;
}
body {
    position: relative;
    height: auto;
    min-height: 100%;
    background-color: #E8EDF3;
    color: #555555;
    font-size: 1.3em;
    font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
}
@media (max-width: 768px) {
    body {
        font-size: 1.4em;
    }
}

L’élément HTML englobe tout votre site. L'élément BODY va englober toute la partie visible. On retrouve déja dans ces quelques lignes le système de media-queries qui nous permet de gérer l'affichage en fonction de la taille de l'écran (ordinateur, tablette, smartphone).

L'en-tête et le sous en-tête

Code CSS :

header#header {
    background-color: #366393;
}
/* --- Partie superieure du header --- */
div#top-header {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    margin: auto;
    min-height: 139px;
    max-width: 1024px;
}
div#top-header-content {
    flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}
@media (max-width: 768px) {
    div#top-header {
        flex-direction: column;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
    }
 
    div#top-header-content {
        align-self: flex-end;
        -ms-align-self: flex-end;
        -webkit-align-self: flex-end;
    }
}
/* --- Partie inferieur du header --- */
div#sub-header {
    min-height: 35px;
    background-color: #353535;
    border-top: 1px solid #8B9193;
}
div#sub-header-content{
    margin: auto;
    max-width: 1024px;
}
/* --- Logo et Nom du site web --- */
div#site-infos {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    margin: 1.5em 0 0 1.5em;
    max-width: 940px;
    flex: 1 1 auto;
}
div#site-logo {
    margin: 0 1em 0 0;
    width: 60px;
    height: 60px;
    background-image: url('images/logo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
}
div#site-name-container {
    margin: 0.4em 0 0 0;
}
a#site-name {
    color: #F9FCFF;
    font-size: 3em;
    font-weight: bold;
    line-height: 1em;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-shadow: 0 0 0 rgb(0, 0, 0), 1px 0 0 rgb(0, 0, 0), 2px 0 0.1px rgba(0, 0, 0, 0.1), 2px 0 0.1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, .1);
}
span#site-slogan {
    display: block;
    padding: 0.1em 0 0 0.1em;
    color: #FFFFFF;
    font-size: 1em;
    letter-spacing: 0.1em;
}
@media (min-width: 769px) {
    div#site-logo {
        width: 90px;
        height: 90px;
    }
    div#site-name-container {
        margin: 1em 0 0 0;
    }
    a#site-name {
        font-size: 4em;
    }
 
}

Les classes ci-dessous permettent de définir le header et le sub-header du site ainsi que la position du logo et du nom du site.

Conteneurs

Code CSS :

div#global {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    margin: 1.5em auto 0 auto;
    padding: 0 10px;
    max-width: 1024px;
}
div#main {
    padding: 0 0 10px 0;
    max-width: 100%;
    order : 1;
    -ms-flex-order: 1;
    -webkit-flex-order: 1;
}
aside#menu-left,
aside#menu-right {
    width: 100%;
}
aside#menu-left  {
    order : 2;
    -ms-flex-order: 2;
    -webkit-flex-order: 2;
}
aside#menu-right {
    order : 3;
    -ms-flex-order: 3;
    -webkit-flex-order: 3;
}
@media (min-width: 769px) {
    div#global {
        min-height: 100vh;
        flex-direction: row;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
    }
    div#main {
        padding: 0 10px;
        order : 2;
        -ms-flex-order: 2;
        -webkit-flex-order: 2;
        flex: 1 0 auto;
        -ms-flex: 1 0 auto;
    }
    aside#menu-left,
    aside#menu-right {
        width: 200px;
    }
    aside#menu-left  { 
        order : 1;
        -ms-flex-order: 1;
        -webkit-flex-order: 1;
    }
    aside#menu-right { 
        order : 3;
        -ms-flex-order: 3;
        -webkit-flex-order: 3;
    }
 
    .main-with-left,
    .main-with-right {
        width: calc(100% - 200px);
    }
 
    .main-with-left.main-with-right {
        width: calc(100% - 400px);
    }
}
div#top-footer {
    padding: 2% 0;
}

En dessous du header, on retrouve le corps de la page avec le conteneur principal "main" qui sera entourée de colonne "left" et "right".

Le contenu de la page

Code CSS :

div#main-content {
    padding: 1.5em 0.8em;
    border: 1px #BEBEBE solid;
    background-color: #FFFFFF;
}
div.block-container {
    margin-top: 15px;
}
/* --- Emplacement au dessus et en dessous du contenu de la page --- */
div#top-content {
    margin: 0 0 2% 0;
    padding: 0.1em 0.8em;
    background-color: #FFFFFF;
    border: 1px solid #BEBEBE;
}
/* --- Emplacement au dessus du pied de page --- */
div#bottom-content {
    margin: 2% 0 0 0;
    padding: 0.1em 0.8em;
    background-color: #FFFFFF;
    border: 1px solid #BEBEBE;
}

Le contenu de la page est aussi intégré un élément #main-content. On retrouve en plus un élément au dessus #top-content, et un élément en dessous #bottom-content. Tous ces éléments peuvent intégré des modules via l'administration.

Le pied de page

Code CSS :

footer#footer {
    width: 100%;
    background-color: #212121;
    border-top: #336397 2px solid;
    clear: both;
}
 
footer#footer .footer-content {
    margin: 0 auto 0 auto;
    padding: 1.5em 0;
    max-width: 1024px;
    border-bottom: 2px groove #444444;
}
 
footer#footer .footer-infos {
    padding-top: 10px;
    min-height: 40px;
    text-align: center;
}
 
footer#footer .footer-infos span {
    color: #FFFFFF;
    font-size: 0.8em;
}

Le bas du site est géré par les classe footer. La zone supérieur ".footer-content" est personnalisable avec des modules alors que la zone inférieure ".footer-infos" est reversé aux informations du site tel que le nom du thème, ou le copyright.

Les éléments spécifiques

Le compteur de visite

Code CSS :

div#compteur {
    position: absolute;
    right: 0;
    margin-right: 15px;
    font-size: 0.9em;
    color: #E9ECD9;
    text-align: right;
}
 
@media (min-width: 769px) {
    div#compteur {
        top: 100px;
    }
}

Color définit la couleur de la police,
font-size la taille,
text-align l'alignement du texte ( center pour centrer, left pour aligner à gauche et right pour aligner à droite ).

Pour définir l'espace entre le site et le compteur ont fait toujours appelle au margin, ici on choisit un margin-right:15px, se qui veut dire qu'on aura un décalement de 15 pixels par la gauche.

Barre de lien rapide

Code CSS :

nav#breadcrumb {
    margin: 0 0 20px 10px;
    text-indent: 10px;
}
 
nav#breadcrumb ol {
    margin: 0;
    list-style: none;
}
 
nav#breadcrumb ol li {
    display: inline;
}
 
nav#breadcrumb ol li:not(.current):after {
    content: '/';
    color: #616161;
}

Afin de toujours savoir ou nous sommes et pouvoir revenir en arrière une navigation rapide est présente sur l'ensemble du site. Elle est facilement personnalisabile avec la classe unique "#breadcrumb".

Fichier de configuration d'un thème "config.ini"

Mon, 07 Jul 2014 16:42:50 +0200

Situés dans chaque dossier de langue des templates, les fichiers config.ini permettent d'afficher des informations sur le thème et de lui attribuer une configuration par défaut qui sera appliquée lorsque celui-ci sera installé.
Nous allons au fil de cet article décortiquer et expliquer en détails ce fichier très simple.

Code TEXT :

author="PHPBoost"

Nom ou pseudo de l'auteur du thème

Code TEXT :

author_mail="contact@phpboost.com"

Adresse mail de contact de l'auteur

Code TEXT :

author_link="http://www.phpboost.com"

Site web de l'auteur

Code TEXT :

version=2.0

Version du thème

Code TEXT :

date="05/08/12"

Date de la dernière mise à jour du thème

Code TEXT :

compatibility=4.1

Version de PHPBoost avec laquelle le thème est compatible

Code TEXT :

require_copyright=0

Si le 'require_copyright' est à 0, c'est que l'auteur n'oblige pas à mettre le copyright du thème dans le footer et vice-versa.

Code TEXT :

html_version=5.0 Strict

Version du HTML/XHTML

Code TEXT :

css_version=3.0

Version des CSS utilisés

Code TEXT :

columns_disabled=right

Emplacements de menus à désactiver à l'installation du thème
Voici la liste des emplacements :

Valeur	Description
header	Tête de page
sub_header	Sous-entête
top_central	Menu central haut
bottom_central	Menu central bas
top_footer	Sur pied de page
footer	Pied de page
left	Colonne gauche
right	Colonne droite

Les éléments doivent être séparés par un ";".

Code TEXT :

variable_width=0

0 si la largeur du fixe, 1 si le thème est extensible

Code TEXT :

width="947px"

Largeur du thème

Code TEXT :

pictures="theme/images/theme.jpg,theme/images/apercu2.png"

Chemin vers les images illustrant le thème.
Séparer chaque image par une virgule.

Wiki

Fichier cssmenu.css

Classes multi niveaux

Classes générales cssmenu

Variante cssmenu-horizontal

Variante cssmenu-group

Variante cssmenu-actionslinks

Autres variantes

Classes Niveau 1

Classes générales cssmenu

Indicateur de sous menu

Position des sous menu

Variante cssmenu-group

Variante cssmenu-actionslinks

Variante cssmenu-static

Classes Niveau 2

Classes générales cssmenu

Indicateur de sous menu

Variantes

Personnalisation graphique

Niveau 1

Niveau 2

Personnalisation de l'indicateur de sous-Menu

Bouton responsive

Classes générales cssmenu

Position du bouton

Variante cssmenu-actionslinks

Variante Static

Personnalisation graphique du bouton responsive

Bouton submenu

Classes générales cssmenu

Variante Static

Personnalisation background Bouton submenu

Postion icone Submenu

Fichier content.css

Introduction

Les conteneurs

Articles

Les blocks

La pagination

L'explorateur des catégories

La gestion des catégories Drag&Drop

Les mini-modules

Les messages

Profil User

La maintenance

Le module contribution

Error 403/404

Structure d'un thème

Introduction

La racine du thème

Le fichier body.tpl

Le fichier config.ini

Le fichier frame.tpl

Le répertoire images

Le répertoire lang et le fichier desc.ini

Le répertoire thème

Les fichiers CSS

Le répertoire images

Le répertoire modules

Fichier table.css

Affichage des tableaux basic

Entête du tableau

Le contenu du tableau

Le pied de tableau

Patch thead tableaux formates

Taille des colonnes

Les mini tableaux

Pagination footer tableaux

Affichage des tableaux responsive sur les petits ecrans

Table responsive basictable.js

Fichier login.css

Fichier form.css

Boutons et class boutons

Les classiques

Les petits boutons

Les boutons de formulaire

Les boutons "basic"

Bouton basic avec couleur alternative

Les field button