Perso.css non pris en charge avec option css compréssé.

Gaston

Octobre 2016

Bonjour,

Je suis en SPIP 3.1.3,
Avant, quuand je personnalisai mon css, je copiais le fichier : typo.ccs, layout.css etc, avec le 3.1, je trouve (dans ma logique) que c’est devenu un trop compliquer de gérer tout se qui est textes / liens, typo chargée, textes formulaires, dans pleins de fichiers .css différents etc.

J’ai donc utilisé pour la première fois perso.css, et j’ai mis tout ce qui concerne les titres, les paragraphes, les liens etc... et c’est là que je charge aussi mes typos.

Tout ceci marche très bien, mais j’ai remarqué que en actionnant dans l’interface privé "Activer la compression des feuilles de style (CSS)" très utile pour rendre le site google smartphone compatible. Mon fichier perso.css n’est plus du tout pris en charge...

Il y a-il un truc a faire, est-ce un bug ?

Résolu

Par note Par date Par date chronologique

Indiquez l’intérêt que vous portez à cette réponse

1

b_b

Octobre 2016

Hmmm il y a un truc étrange avec ton site, je vois deux fois la css compressée dans les outils de debug. De plus, on dirait bien que le problème provient du contenu de squelettes/css/theme.css, si je le vire, je vois bien le style appliqué pour les balises mark.

Bref, il y a un sacré paquet de nœuds là dessous, le mieux est de venir en discuter en direct sur IRC : http://irc.spip.net
Indiquez l’intérêt que vous portez à cette réponse

0

b_b

Octobre 2016

Salut, quelle est l’adresse du site pour qu’on jette un œil au problème ?
Indiquez l’intérêt que vous portez à cette réponse

0

Gaston

Octobre 2016

Salut,

C’est dans ce lien
Indiquez l’intérêt que vous portez à cette réponse

0

b_b

Octobre 2016

Ok, vu pour le lien, par contre, la compression n’étant pas activée sur le site, pas facile de te dire ce qui cloche...
Indiquez l’intérêt que vous portez à cette réponse

0

Octobre 2016

Oui, c’est ce que je me suis dit, mais impossible là de le faire, le site est en ligne, faudrait que je je le remette en ligne sur une autre adresse...
Indiquez l’intérêt que vous portez à cette réponse

0

Gaston

Octobre 2016

Alors voila,
j’ai mis le site sur une autre adresse, j’ai mis du faux texte pour limiter le référencement, mais j’ai vu une option du pluging en travaux "pour se proteger des robots et indexation". donc ça devrait alller.

Donc j’ai activé : compression javascript et css,
La seule chose différente de mes autres sites et que j’ai crée des "inclures" pour chaque partie (inclure / présentation / inclure programme etc). Mais avec une veille sauvegarde de mes squelettes sans "inclure", ça me fait le même résultat...

Voici le lien ici : mon perso.ccs n’est pas pris en charge mais le layout.css lui est pris en charge :
Indiquez l’intérêt que vous portez à cette réponse

0

b_b

Octobre 2016

Re, et bien, comme tu peux le voir, ta css perso est bien prise en compte, cf :

squelettes/css/perso.css

http://www.monsite.web4me.fr/local/cache-css/39b0b72e27eba8b1acb84ce446d1a313.css?1477475831
Indiquez l’intérêt que vous portez à cette réponse

0

Gaston

Octobre 2016

Oui , j’ai vu, mais pourtant, mon texte n’est pas justifié, ma typo , n’est pas pris en compte, la balise mark non plus, etc,
Indiquez l’intérêt que vous portez à cette réponse

0

Gaston

Octobre 2016

Oui , j’ai vu, mais pourtant, mon texte n’est pas justifié, ma typo , n’est pas pris en compte, la balise mark non plus, etc,

Mais m^me ma typo Georgia pour la balise P, n’est plus pris en compte.
Indiquez l’intérêt que vous portez à cette réponse

0

b_b

Octobre 2016

Heu, tu appliques ce sélecteur dans ta css perso pour tenter de justifier le texte :

#section-presentation p

Mais je ne vois aucune trace d’élément avec cet id dans ta page, c’est voulu ?
Indiquez l’intérêt que vous portez à cette réponse

0

Gaston

Octobre 2016

Alors, je sais pas si je vais bien répondre, j’ai un
<article id="section-presentation">
Pour cette partie, et dans mon perso.css j’ai
mark {color:#F00B21; background:none;} p,.p {margin-bottom: 1.5em; color:#153637; font-family:georgia; font-size:20px; } #section-presentation p{margin-bottom: 1.5em; color:#153637; font-family:georgia; text-align: justify;}
Je ne sais pas si le problème est là, c’est l’ensemble des paramètres perso.css qui saute, je charge aussi la typo Branding qui a sauté, remplacé par l’arial etc...

Je viens de faire une expèrience simple : j’ai mis
mark {color:#F00B21; background:none;}
Dans le layout.css, au lieu de perso.css et tout se qui est dans cette balise est en rouge comme je le souhaite, au lieu du fond jaune par defaut.
Indiquez l’intérêt que vous portez à cette réponse

0

b_b

Octobre 2016

Tu tentes d’appliquer du justifier sur une ancre qui ne contient aucun contenu, voilà pourquoi tu ne vois pas de résultat :p

Pour le reste, ta page html et ta css ne sont pas valides (33 erreurs dans la css), du coup il y a de grande chances que ton problème vienne de là. Corrige ces erreurs, et ça devrait aller mieux :)
Indiquez l’intérêt que vous portez à cette réponse

0

Gaston

Octobre 2016

Ok, merci de tes conseils, je vais voir de se coté aussi pour nettoyer mon css, mais si c’étais qu’une question de css, le reste devrait marcher, pour la balise mark ? la typo et tout le reste ne marche pas non plus ? et ça marche quand ce n’est pas compréssé...

Si je met tout mon code qui est dans perso.css dans typo.css ou layout.css, ça marche normalement, m^me compréssé...

Je remet le lien du site normal.(non compréssé)

ET compresser ici
Indiquez l’intérêt que vous portez à cette réponse

0

Gaston

Octobre 2016

Bon alors,
Suite a la discussion sur le irc.spip.net
Il s’agissait d’une erreur de ma part, il manquait une accolade en toute fin du code de mon theme.css, et ça buguer tout le reste, j’avais aussi un ; qui manquait quelque part.

C’est bon maintenant, merci à tous !
Indiquez l’intérêt que vous portez à cette réponse

0

Amire

Décembre 2017

Bonjour,

J’ai le même problème après la compression la personnalisation est perdue. ci-dessous mon code je ne sais pas qu’est ce qui ne va pas !
/************************************* Mes couleurs: #c0dfd9 entete #e9ece5 background #b3c2bf aside #3b3a36 footer darkred cornsilk crimson mes lignes hr: hr.style18 { height: 30px; border-style: solid; border-color: #8c8b8b; border-width: 1px 0 0 0; border-radius: 20px; } hr.style18:before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: #8c8b8b; border-width: 0 0 1px 0; border-radius: 20px; } **************************************/ /*-------------------------------------- mes fonts: font-family: 'Cairo', sans-serif; font-family: 'Mirza', cursive; pour les titres font-family: 'Scheherazade', serif; ----------------------------------------------*/ /* feuille layout */ body { text-align: left; background:#fff; font-size: large;} /* Entete et barre de navigation ------------------------------------------ */ /*.header .spip_logo_site a:hover { color:#c85000; } */ .nav li a {display: inline-block; padding:0.25em 0.5em; margin:0 0.25em 0.5em 0; border-radius:0.25em; text-decoration: none; background: #EED; color: #222;} .nav li.on a {background:#EED; color:#fff; font-weight:400; color: black;} .nav li a:active {background: #fff; color:#222;} /* feuille link */ a:hover {outline: 0; cursor: pointer; text-decoration: none;} .navbar {margin-bottom: 15px;} #titrub {font-weight: bolder; color:crimson;} /* yamm nav menu */ .yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown {position: static;} .yamm .container {position: relative;} .yamm .dropdown-menu {left: auto;} .yamm .yamm-content {padding: 5px 30px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 0;} .yamm .dropdown.yamm-fw .dropdown-menu {left: 0; right: 0;} a:focus {outline: thin dotted; background-color: transparent!important; border-color: #222222 !important;} a:hover, a:focus {color: #000; text-decoration: none;} a {background-color: transparent;} .list-unstyled {list-style: none;} .nav li a { display: block;} /*li { display: list-item; text-align: -webkit-match-parent; }*/ ul, menu, dir {display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 5px;} /*bootstrap*/ .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px;} /* Bandeau */ .jumbotron {padding-top: 30px; padding-bottom: 30px; margin-bottom: inherit; color: inherit; background-color: #c0dfd9;} #slogan {display:none;} .col-sm-3 {width: 50%;} /* Bouton d'iscription */ .formulaire_spip .boutons {clear: both; font-size: small; margin: 0; padding: 0; text-align: center;} /* -------------------------------- Séparation entre blocs, section etc .. -----------------------------------*/ hr.style1 {height: 30px; border-style: solid; border-color: #8c8b8b; border-width: 1px 0 0 0; border-radius: 20px;} hr.style1:before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: #8c8b8b; border-width: 0 0 1px 0; border-radius: 20px;} hr.style2 { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0))} hr.style17 {border-top: 2px dashed #8c8b8b; text-align: center;} hr.style17:after {content: '§'; display: inline-block; position: relative; top: -14px; padding: 0 10px; background: #f0f0f0; color: #8c8b8b; font-size: 14px; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg);} hr.style13 {height: 10px; border: 0; box-shadow: 0 10px 10px -10px darkred inset;} /*======================================== Footer design =========================================*/ .pied {background-color:#EED;} .destacados{padding: 20px 0; text-align: center;} .destacados > div > div{padding: 10px; border: 1px solid transparent; border-radius: 4px; transition: 0.2s;} .destacados > div:hover > div{ margin-top: -10px; border: 1px solid rgb(200, 200, 200); background: rgba(200, 200, 200, 0.1); transition: 0.5s;} .spip_logo {margin: 0 10px 10px 10px; padding: 0; border: none; float: left;} h3, h5, h6 {font-family: 'Mirza', cursive; font-size: 1.8em; color: crimson;} .clair p {color: #000; font-family: 'Cairo', sans-serif; font-size: 1.3em;} h1, h4, h2{font-family: 'Mirza', cursive; font-size: 1.8em; color:black;} p {font-family: 'Scheherazade', serif; font-size: 1.5em; color: #505050; text-align: justify;} ul.spip {list-style-type: square; font-size: 1.5em; font-family: 'Scheherazade', serif; color: #505050;} b, strong { color: #000;} a, #rouge, .structure, .langue_contexte, .tel { font-size: 110%; color: crimson;} a:visited {color: crimson;} .cs_visiteurs {font-family: 'Mirza'; font-size: 1.5em; text-align: center; color: forestgreen; } .navfont {font-family: 'Scheherazade', serif; font-size: 1em; color: #7c7c7c;} .bgnd {color:darkcyan;} .bgndfooter {color:aliceblue;} .arbo {color: crimson;} .small {font-size: 1.1em;} .news {font-size: small; color: crimson; text-align: center;} .img-thumbnail {padding: 0px;} /*----------------------- Autres plan etc ------------------------*/ .ligne_verticale {width:5px; border-left:1px solid gray; height:70px;} /*----------------------- Menu lang -------------------------*/ #menu_lang {list-style: none outside none; margin-top: 15px; padding-left: 10px; padding-right: 10px; float: right;} .traductions { font-family: 'Mirza'; font-size: 1.1em; text-align: justify; color: cadetblue;} .info-publi, .auteurs { font-family: 'Mirza'; font-size: 1.3em; text-align: justify; color:darkred} /*--------------------- Formulaire contact -----------------------*/ .text { display:block;} #session_email { margin-left: auto; margin-right: auto; width: 200px;} /*-------------------------- petit écran -----------------------*/ @media screen and (max-width: 768px) {}
Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Décembre 2017

Une adresse où on peut constater le problème ?