Nettoyer et optimiser ma CSS

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

Résolu Nettoyer et optimiser ma CSS

Message par Ancients le Jeu 17 Mar 2016 - 13:49

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://nsp-d3.forumofficiel.com/

Description du problème

Bonjour,

En avançant dans mon forum, je résous pleins de problèmes plus ou moins important, et cela m'invite à ajouter à chaque fois des lignes de codes dans ma CSS.

Je me retrouve perdu avec pleins de lignes de code et beaucoup sans commentaire.

J'aurais aimé avoir une sorte de nettoyage de ma CSS :

- supprimer les lignes inutiles
- regrouper les lignes qui peuvent être ensemble et les optimiser
- remettre des commentaires sur chaque ligne

Voici ma CSS :

Code:
.postbody .content {
    margin-left: 10%!important;
    margin-right: 10%!important;
}

#cp-main .panel {
    background-color: transparent;
}

.content {
    line-height: 1.7em;
}

.postprofile .label,
.postprofile .label img[alt="Battle Tag"]{
  display: inline-block;
  vertical-align: middle;
}

ul.navlinks{border:none;}

#page-header{margin-top:300px;}

#search-box {
    margin-top: 0px!important;

}

.inputbox {
    color:#00B4FF;
}

.inputbox:hover {
    border: 1px solid #00B4FF;
}

input.search {
    background: #ffffff!important;
    padding: 5px 6px;
    border: none;
    font: 12px Arial, sans-serif;
    border-radius: 5px;
    box-shadow: 0 0 5px #000;
}

form[action="/privmsg"] dl:nth-last-of-type(2) label:nth-last-of-type(1):not(:first-child) {
  display: none !important;
}

.signature_div img{
    max-width: 500px !important;
    max-height: 200px !important;
}

/*Couleur pour les Admins*/
#M14_Color_Admin.inner .postbody .content
{
color:#00B4FF !important;
}

/*Couleur pour les Modos*/
#M14_Color_Modo.inner .postbody .content
{
color:red !important;
}

.headerbar, #logo {
    padding: 0;
}

    /*Le bouton twitch*/
#M14_btn_slide:before
{
  content:"";
  position:absolute;
  background:url(http://i84.servimg.com/u/f84/19/42/85/35/14573010.png)no-repeat;
  width:64px;
  height:64px;
  margin-left:200px;
}
 
 
 
#frametwitch {width: 100%; height: 100%; border: 1px solid black; position:relative; }
 
    /*Le bloc du slide*/
 
    #M14_btn_slide
    {
    position:fixed;/*on fixe le slide*/
    top:60px;/* on le positionne a 60px du haut du fofo*/
    width:200px;/*on lui donne une largeur en relation avec l image*/
    height:64px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
    left:-205px;/*on cache le bloc*/
    background:#;/*couleur de fond*/
    text-align:center;/*on centre le lien*/
      /*La transition*/
    -webkit-transition: left 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;
    }
    /*Le slide effectue par le script*/
    #M14_btn_slide.margin{left:0px;}
 
 
 .lien-sous-forum{
    display: inline-block;
    width: 252px;
    word-wrap: break-word;
}
 
 
 .table-index1 > div{
    display: inline-block;
    width: 252px;
    word-wrap: break-word;
    color: #000000
}

/*---  Index HOME Image 1 ---*/
.table-index1 {
    background: url(http://i65.tinypic.com/1zluhlj.png) no-repeat center -7px;
    height: 185px;
    width: 307px;
}
 
.table-index1:hover {
    background-position: center -201px;
}
 

/*---  Index HOME Image 2 ---*/
.table-index2 {
    background: url(http://i65.tinypic.com/bj5x8j.png) no-repeat center -7px;
    height: 185px;
    width: 307px;
}
 
.table-index2:hover {
    background-position: center -199px;
}

/*---  Index HOME Image 3 ---*/
.table-index3 {
    background: url(http://i67.tinypic.com/257odxy.png) no-repeat center -7px;
    height: 185px;
    width: 307px;
}
 
.table-index3:hover {
    background-position: center -199px;
}


.qeel {
    background-image:url("http://i84.servimg.com/u/f84/19/42/85/35/fond_a14.png");
}


h2.topic-title img {
    display: none;
}

div#main-content{
    background-image:url(http://oi63.tinypic.com/1zldtgl.jpg);
    background-repeat:repeat;
    padding:5px;
    border:2px solid #000;
    border-radius: 10px
}

#video-background {
    position: fixed;
    top: 50%;
    left: 50%;

    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url('http://eu.battle.net/d3/static/images/reaper-of-souls/bg/malthael.jpg') repeat-x;
    background-size: cover;
    transition: 1s opacity;
}


.img-whois {
    display: none;
}

.avatar-mini strong {
}

.footer-home {
    position: absolute;
    left: -500px;
    top: -500px;
    max-width: 1px;
    max-height: 1px;
}

#page-footer ul.linklist li.rightside {
    float: none;
}

#page-footer .inner {
    text-align: center;
}

.online {
    background-position: ;
}

.postprofile {
    background: url('');
    background-repeat: no-repeat;
    border-color: #322e2e;
    padding-top: 5px;
    padding-left: 8px;
    font-family: "Arial", sans serif!important;
    font-size: 11px!important;
    text-align: center;
}

/* On redonne leur taille de base aux images */
form[action="/privmsg?folder=inbox"] .postprofile img {
    width: inherit;
    height: inherit;
}
 
/* Mais on fait en sorte que l'avatar fasse 64px*64px */
 
form[action="/privmsg?folder=inbox"] .postprofile > dt > img:first-child,
.postprofile dt img {
    background-color: #000;
    background-position: 1px 1px;
    background-repeat: no-repeat;
    border: 1px solid #483A30;
    border-bottom-color: #3D2F26;
    border-radius: 3px;
    border-top-color: #887465;
    height: 64px;
    overflow: hidden;
    padding: 1px;
    width: 64px;
}

#wrap, td.avatar-mini img, .headerbar {
    background-color: transparent;
}

.post {
    background-color: #12110f;
    opacity: 0.9!important;
    border:2px solid #000;
    background: url('http://eu.battle.net/d3/static/images/layout/cms/post_bg.jpg');
    background-size: cover;
}

.portal {
    opacity: 0.9;

}

a.forumtitle {
    font-size: 12;
}

@font-face {
    font-family: NSPFONT;
    src: url(http://us.battle.net/d3/static/fonts/exocet/exocet-blizzard-light.woff);
}

.inner h2 {
    color: #f3e6d0;
    font: normal 18px/100% "NSPFONT","Palatino Linotype", "Arial", serif;
    letter-spacing: -1.5px;
    text-shadow: 0 0 5px #241209;
}
 
h1.page-title {
    font-size: 12;
}

/*suppression boutons code, date, heure et mode*/
a.sceditor-button-code, a.sceditor-button-date, a.sceditor-button-time, a.sceditor-button-source {
    display: none;
}

#textarea_content {
    min-width: 702px;
}

a:hover {
    text-decoration: none!important;
}

select {
    color: #999999;
}


/*--- Bloc réponse rapide ---*/
 
.sceditor-container.ltr.sourceMode {
    width:100% !important;
    max-height: 450px!important;
    background-color: #12110f !important;
    border-color: #131210!important;
}
.sceditor-container.ltr.wysiwygMode {
    width:100% !important;
    max-height: 450px!important;
    background-color: #12110f !important;
    border-color: #131210!important;
}

/*---  Citation ---*/

blockquote {
    background-color: #1b1915!important;
    border-color: #999999!important;
    border-width: 1px!important;
    border-style: double;
}

/*---  Partie texte area : fond ---*/
 
.sceditor-container iframe, .sceditor-container textarea {
    line-height: 16px;
    width: 100% !important;
    color: #00B4FF !important;
    font-size:12px !important;
}



/*---  Groupe de boutons ---*/
 
div.sceditor-group {
    background-color: # !important;
}

/*---  Boutons ---*/
 
a.sceditor-button {
    background: url('');
    border-color: #!important;
}


/*---  Boutons sélectionnés ---*/
 
a.sceditor-button.hover {
    background-color: # !important;
}

Changer la largeur de l'éditeur
/* largeur de l'éditeur */
.sceditor-container {
    width: 710px!important;
}

/* fond de groupe de bouton */
body div.sceditor-group {
    background: #white;
}

/* fond d'un bouton survolé ou activé */
 
.sceditor-button.hover, a.sceditor-button:hover {
    background: #00B4FF;
}

/*---  Partie supérieur contenant les outils ---*/
 
div.sceditor-toolbar {
    background-color: #131210 !important;
    border-color: #00B4FF!important;
    border-width: 2px!important;
}

.sceditor-group
{
    background: #333333 !important;
    border: 1px outset #000000 !important;
    border-radius: 5px !important;
}

a.sceditor-button
{
    background: #777777 !important;
    border-radius: 30px !important;
}
a.sceditor-button:hover
{
    background: #AD835A !important;
}

a.sceditor-button.active
{
    background: #c2c2c2 !important;
}

fieldset dl:hover dt label {
    color: #FAF8F7;
}

a.button1, a.button2, button.button2, input.button1, input.button2 {
background-image: url('http://image.noelshack.com/fichiers/2016/09/1456834048-envoyer.png');
height:31px;
width:auto!important;
color:#000!important;
border:none;
font-size:10px;
}

#page-footer .inner {
}

ul.profile-icons {
    list-style: none;
    margin-top: 10px;
    margin-right: 0px!important;
}

/*---  Couleur barre profil signature ---*/
#cp-main .panel.sig {
    background-color: #12110f;
}

#tabs .activetab a span {
    color: #00B4FF;
}

a.mentiontag.tooltipstered {
    color: #00B4FF;
}

.signature_div {
    color: #00B4FF!important;
    font-family: "Arial", sans serif!important;
    font-size: 12px!important;
    text-align: center!important;
}

dd.dterm {
    background-position: 85%!important;
}

.pagination span a:active, .pagination span a:link, .pagination span a:visited {
    background-color: #12110e;
    border: 1px solid #000000;
    color: #AD835A!important;
    display: inline-block;
    font-size: 9px;

    text-decoration: none;
}

.pagination span strong {
    background-color: #12110e;
    border: 1px solid #000000;
    color: #999999;
    font-size: .9em;
 
    text-decoration: none;
}


/*Suppression de la couleur de fond des Notifications*/
#fa_notifications
{

background-color:#000000 !important;
color:#fff !important;
}

/*La partie notification*/
#notif_list
{
position:fixed !important;
bottom:0% !important ;
right:0px !important;
}

/*Le bouton de fermeture partie Notifications*/
#M14_close_see_all
{
text-decoration:none !important;
text-align:left !important;
color:red !important;
cursor:pointer !important;
position: absolute !important;
left: 10px !important;
width:10px !important;
height:10px !important;
}

#BDN
{
background: url('http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png') no-repeat 0px 0px;
    height: 111px;

}

Merci d'avance,
Bien à vous


Dernière édition par Ancients le Jeu 17 Mar 2016 - 15:07, édité 1 fois

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nettoyer et optimiser ma CSS

Message par demeter1 le Jeu 17 Mar 2016 - 14:23

http://www.dirtymarkup.com

http://www.css-validator.org

Pour les commentaires, il vous faudra les apposer vous même

demeter1
+ Hyperactif +

Masculin
Messages : 8106
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nettoyer et optimiser ma CSS

Message par Ancients le Jeu 17 Mar 2016 - 15:06

Bonjour,

Je vais faire avec vos liens,

Merci pour votre aide,
Bien à vous.

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum