mise au point d'un nouveau thème

bg62 · octobre 2013

bonjour

j'ai commencé à modifier quelques peu le thème par défaut, mais juste pour 2 choses :
- changement du look
- adaptation au niveau du SEO

et bien sur, question 'look' ... j'ai besoin de critiques, de conseils, petits coups de mains pour le finaliser et pouvoir l'envoyer dans les ressources ...
il est pour l'instant ici : thème pour PluXml

dîtes-moi ce que vous en pensez, MAIS surtout, niveau codage, si vous avez mieux et ce ne serait pas étonnant, donnez-moi la solution ....
une fois terminé, il sera présenté dans la rubrique 'vos créations' et envoyé dans la partie 'ressources'
merci
@+

chriss · octobre 2013

Bonjour,

bg62 a écrit:

bonjour
..........
dîtes-moi ce que vous en pensez, MAIS surtout, niveau codage, si vous avez mieux et ce ne serait pas étonnant, donnez-moi la solution ....
.........
merci
@+

J'ai juste regardé 5mns,

, le temps me manque en ce moment !!!
Il y a des erreurs surtout à la fin de la page des </p> et des </li> mal placés ou en trop (si tu as Firefox, vérifie ta page en cliquant sur "code source de la page", les erreurs sont en rouge)

sinon 27 erreurs avec W3C: http://validator.w3.org/check?uri=http%3A%2F%2Fsite.unesourisetmoi.info%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Moi, il va falloir que je finisse mes thèmes, 2 sont presque finis mais pas responsive.... grrrr!!

bg62 · octobre 2013

merci pour la remarque, vais voir tout cela,mais mon premier soucis est surtout la CSS :
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fsite.unesourisetmoi.info%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=fr
3 erreurs
20 avertissement
!!!
comment corriger tout cela ?

et ensuite ceci :

An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

…norama_6.jpg" title="panorama_6.jpg" /><span>création de site internet pour to…

pour l'attribut "alt" comment l'introduire, ce code étant généré par " plxMyCoinSlider " .... ???

bg62 · octobre 2013

bon pour "plxMyCoinSlider' Stéphane est dessus est ça commence à passer bien mieux

+ 1 erreur de moins ...
mais pour le reste : HELP !!!

chriss · octobre 2013

bonjour,
ce n'est plus:

[== CSS ==]
 background:         linear-gradient(top,  #CCCCCC, #F3F3F3); /* css3 */

mais la nouvelle syntaxe est:

[== CSS ==]
 background:         linear-gradient(to bottom,  #CCCCCC, #F3F3F3); /* css3 */

https://developer.mozilla.org/fr/docs/CSS/linear-gradient

Les avertissements ...... tu peut laisser tomber si tu veux que le thème fonctionne dans les différents navigateurs.

Pour la première erreur:

[== CSS ==]
.coin-slider {
	...
	zoom: 1;
	...
}

en as tu vraiment besoin, normalement l'attribut zoom n'était que pour IE6/IE7 et depuis a été déprécié par le W3C ??

bg62 · octobre 2013

merci

mais pour la propriété " linear-gradient " pourrais-tu me donner un peu plus de précision ???
je ne trouve pas ce terme dans ma feuille de style ....
@+

chriss · octobre 2013

de rien ..

c'est une propriété de la feuille de style de coin slider et non de ton style. Sur ta feuille CSS il n'y a pas d'erreurs mais des avertissements ....pour les couleurs qui sont les mêmes. (pas de contrastes !)

[== CSS ==]

/** Coin Slider additional styles **/
.cs-buttons a {
    border-radius: 50%;
    background: #CCC;
    background: -webkit-linear-gradient(top,  #CCCCCC, #F3F3F3); /* webkit browsers */
    background:    -moz-linear-gradient(top,  #CCCCCC, #F3F3F3); /* firefox 3.6+ */
    background:      -o-linear-gradient(top,  #CCCCCC, #F3F3F3); /* opera */
    background:     -ms-linear-gradient(top,  #CCCCCC, #F3F3F3); /* IE10 */
    background:         linear-gradient(top,  #CCCCCC, #F3F3F3); /* css3 */
}
a.cs-active {
    background: #599BDC;
    background: -webkit-linear-gradient(top,  #599BDC, #3072B3); /* webkit browsers */
    background:    -moz-linear-gradient(top,  #599BDC, #3072B3); /* firefox 3.6+ */
    background:      -o-linear-gradient(top,  #599BDC, #3072B3); /* opera */
    background:     -ms-linear-gradient(top,  #599BDC, #3072B3); /* IE10 */
    background:         linear-gradient(top,  #599BDC, #3072B3); /* css3 */
    border-radius: 50%;
    box-shadow: 0 0 3px #518CC6;
    border: 1px solid #3072B3 !important;
}

Par contre dans le codage HTML à 2 endroits tu as du doubler la fermeture de dune DIV

[== XHTML ==]
<li id="archives-201309"><a class="noactive" href="http://site.unesourisetmoi.info/index.php?archives/2013/09" title="septembre 2013">septembre 2013</a> (5)</li><li id="archives-201308"><a class="noactive" href="http://site.unesourisetmoi.info/index.php?archives/2013/08" title="août 2013">août 2013</a> (9)</li><li id="archives-201307"><a class="noactive" href="http://site.unesourisetmoi.info/index.php?archives/2013/07" title="juillet 2013">juillet 2013</a> (3)</li><li id="archives-201305"><a class="noactive" href="http://site.unesourisetmoi.info/index.php?archives/2013/05" title="mai 2013">mai 2013</a> (2)</li><li id="archives-201304"><a class="noactive" href="http://site.unesourisetmoi.info/index.php?archives/2013/04" title="avril 2013">avril 2013</a> (2)</li><li id="archives-201303"><a class="noactive" href="http://site.unesourisetmoi.info/index.php?archives/2013/03" title="mars 2013">mars 2013</a> (3)</li><li id="archives-201302"><a class="noactive" href="http://site.unesourisetmoi.info/index.php?archives/2013/02" title="février 2013">février 2013</a> (1)</li><li id="archives-201301"><a class="noactive" href="http://site.unesourisetmoi.info/index.php?archives/2013/01" title="janvier 2013">janvier 2013</a> (2)</li><li id="archives-2012"><a class="noactive" href="http://site.unesourisetmoi.info/index.php?archives/2012" title="2012">2012</a> (4)</li>	
	</ul>
			</DIV>
		</div>

et là

[== XHTML ==]
CSS by : <a href="http://www.unesourisetmoi.info" title="fonds d'écran">fonds d'écran</a></p>
	</div>
	</DIV>

</footer>

bg62 · octobre 2013

ok donc si je comprends bien ...
- pour le premier point, je modifie ET je signale à Stéphane pour le plugin
- pour les 2 autres ... je fouine pour trouver ce qu'il y a en trop ...

chriss · octobre 2013

Pour le premier point oui....
pour le deuxième, je ne sais plus....
Je viens de trouver une erreur dans un <div>, en html5 l'attribut align est obsolète, utilise plutôt une class. Ceci peut contribuer aux erreurs de </div>

[== XHTML ==]
<div align="center">
  <!-- begin footer1 -->
</div>

ensuite ne pas mettre de balise <span>....</span> dans les balises <ul>...</ul> ceci dans le "paragraphe" des "les mots clés".

te voilà du travail pour ce samedi soir ....

bg62 · octobre 2013

re ... j'ai mis ceci, pour le premier point :

[== CSS ==]
/** Coin Slider additional styles **/
.cs-buttons a {
    border-radius: 50%;
    background: #CCC;
    background: -webkit-linear-gradient(to bottom,  #CCCCCC, #F3F3F3); /* webkit browsers */
    background:    -moz-linear-gradient(to bottom,  #CCCCCC, #F3F3F3); /* firefox 3.6+ */
    background:      -o-linear-gradient(to bottom,  #CCCCCC, #F3F3F3); /* opera */
    background:     -ms-linear-gradient(to bottom,  #CCCCCC, #F3F3F3); /* IE10 */
    background:         linear-gradient(to bottom,  #CCCCCC, #F3F3F3); /* css3 */
}
a.cs-active {
    background: #599BDC;
    background: -webkit-linear-gradient(to bottom,  #599BDC, #3072B3); /* webkit browsers */
    background:    -moz-linear-gradient(to bottom,  #599BDC, #3072B3); /* firefox 3.6+ */
    background:      -o-linear-gradient(to bottom,  #599BDC, #3072B3); /* opera */
    background:     -ms-linear-gradient(to bottom,  #599BDC, #3072B3); /* IE10 */
    background:         linear-gradient(to bottom,  #599BDC, #3072B3); /* css3 */
    border-radius: 50%;
    box-shadow: 0 0 3px #518CC6;
    border: 1px solid #3072B3 !important;
}

mais toujours une "remarque" :

52 La propriété -webkit-linear-gradient(to bottom,#CCCCCC,#F3F3F3) est une extension propriétaire inconnue
53 La propriété -moz-linear-gradient(to bottom,#CCCCCC,#F3F3F3) est une extension propriétaire inconnue
54 La propriété -o-linear-gradient(to bottom,#CCCCCC,#F3F3F3) est une extension propriétaire inconnue
55 La propriété -ms-linear-gradient(to bottom,#CCCCCC,#F3F3F3) est une extension propriétaire inconnue
60 La propriété -webkit-linear-gradient(to bottom,#599BDC,#3072B3) est une extension propriétaire inconnue
61 La propriété -moz-linear-gradient(to bottom,#599BDC,#3072B3) est une extension propriétaire inconnue
62 La propriété -o-linear-gradient(to bottom,#599BDC,#3072B3) est une extension propriétaire inconnue
63 La propriété -ms-linear-gradient(to bottom,#599BDC,#3072B3) est une extension propriétaire inconnue

???
comprends plus là ....

maintenant ... "40 Errors, 1 warning(s) " : http://validator.w3.org/check?uri=http%3A%2F%2Fsite.unesourisetmoi.info%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
et pour la css :
"Avertissements (20)"
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fsite.unesourisetmoi.info%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=fr
@+

chriss · octobre 2013

re ....

bg62 a écrit:

re ...
mais toujours une "remarque" :

52 La propriété -webkit-linear-gradient(to bottom,#CCCCCC,#F3F3F3) est une extension propriétaire inconnue
53 La propriété -moz-linear-gradient(to bottom,#CCCCCC,#F3F3F3) est une extension propriétaire inconnue
54 La propriété -o-linear-gradient(to bottom,#CCCCCC,#F3F3F3) est une extension propriétaire inconnue
55 La propriété -ms-linear-gradient(to bottom,#CCCCCC,#F3F3F3) est une extension propriétaire inconnue
60 La propriété -webkit-linear-gradient(to bottom,#599BDC,#3072B3) est une extension propriétaire inconnue
61 La propriété -moz-linear-gradient(to bottom,#599BDC,#3072B3) est une extension propriétaire inconnue
62 La propriété -o-linear-gradient(to bottom,#599BDC,#3072B3) est une extension propriétaire inconnue
63 La propriété -ms-linear-gradient(to bottom,#599BDC,#3072B3) est une extension propriétaire inconnue

???
comprends plus là ....

oui, les extensions -webkit-, -moz- et -o- (celle-ci a ou va disparaître au profit de -webkit-) sont le propre de chaque navigateur et donc pas reconnus comme extensions par W3C.

chriss · octobre 2013

bg62 a écrit:

re ...
maintenant ... "40 Errors, 1 warning(s) " : http://validator.w3.org/check?uri=http%3A%2F%2Fsite.unesourisetmoi.info%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
et pour la css :
"Avertissements (20)"
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fsite.unesourisetmoi.info%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=fr
@+

commençons par les avertissements....Tu peut laisser comme cela (ce ne sont pas des erreurs,) ou alors tu modifie la couleur soit du background, soit des borders. Puisque les couleurs sont identiques.
Par contre pour l'erreur. "Zoom: 1;" n'est reconnu que dans IE6/IE7... personnellement je la supprimerais!

maintenant dans le html; <div align="center"> l'attribut "align" n'est pas reconnu en HTML5.
ensuite dans les balises <ul> ...</ul> il ne doit y avoir aucun attribut <span> </span>, seulement <li></li>.
Une fois ceci réparer le nombre d'erreurs devraient baisser..... :cool:

bg62 · octobre 2013

chriss a écrit:
Je viens de trouver une erreur dans un <div>, en html5 l'attribut align est obsolète, utilise plutôt une class. Ceci peut contribuer aux erreurs de </div>
[== XHTML ==]
<div align="center">
  
</div>

bon là, j'ai "repéré" et corrigé , ça doit être bon

mais pour "ensuite dans les balises <ul> ...</ul> il ne doit y avoir aucun attribut <span> </span>, seulement <li></li>. "...
alors là, pour les trouver .... ^^ ???

si tu me dis où je peux trouver dans le php ( fichier ... ?) ce qui génère tout ça je pourrais peut-être essayer de modifier ....

chriss · octobre 2013

bg62 a écrit:
chriss a écrit:
Je viens de trouver une erreur dans un <div>, en html5 l'attribut align est obsolète, utilise plutôt une class. Ceci peut contribuer aux erreurs de </div>
[== XHTML ==]
<div align="center">
  
</div>
bon là, j'ai "repéré" et corrigé , ça doit être bon

juste oublier d,enlever </div>

mais pour "ensuite dans les balises <ul> ...</ul> il ne doit y avoir aucun attribut <span> </span>, seulement <li></li>. "...
alors là, pour les trouver .... ^^ ???

peut tu donner le code php?

cette erreur ce trouve dans les tags il faut remplacer les <span> par des <li> et les </span> par des ............. </li> :cool:

bg62 · octobre 2013

" peut tu donner le code php? " de quel fichier ??? là est le problème ...

et pour "juste oublier d,enlever </div>" .... vois pas non plus où ?

chriss · octobre 2013

bg62 a écrit:

" peut tu donner le code php? " de quel fichier ??? là est le problème ...

et pour "juste oublier d,enlever </div>" .... vois pas non plus où ?

avec le fichier source je ne sais pas où tu làs mis mais c,est ce lui des TAgs ou Mots Clés.

cela devrait être-celui de PluXml 5.2:

[== HTML ==]
<h3>
			<?php $plxShow->lang('TAGS'); ?>
		</h3>

		<ul >
			<?php $plxShow->tagList('<li class="tag #tag_size"><a class="tags-aside" href="#tag_url" title="#tag_name">#tag_name </a></li>') ?>
		</ul>

chriss · octobre 2013

bg62 a écrit:

et pour "juste oublier d,enlever </div>" .... vois pas non plus où ?

dans le fichier source (le seul que je peut voir) il se trouve en dessous de

bg62 · octobre 2013

j'ai ceci dans le footer:

[== PHP ==]
		<div class="boxfooter1">
				<h3>
			<?php $plxShow->lang('TAGS'); ?>
		</h3>

		<ul>
		<?php $plxShow->tagList('<span class="tag #tag_size"><a class="#tag_status" href="#tag_url" title="#tag_name">#tag_name</a></span>', 27); ?>
			<!--<?php $plxShow->tagList('<li class="tag #tag_size"><a class="#tag_status" href="#tag_url" title="#tag_name">#tag_name</a></li>', 36); ?>-->
		</ul>
		 <center><a href="index.php?static3/tags-cloud" title="Tous les tags"><em>[ Tous les tags ]</em></a></center></p>
			
		</div>

bg62 · octobre 2013

chriss a écrit:

bg62 a écrit:

et pour "juste oublier d,enlever </div>" .... vois pas non plus où ?

dans le fichier source (le seul que je peut voir) il se trouve en dessous de

ok chapeau !!!
fait

bg62 · octobre 2013

j'ai corrigé la ligne dans le footer ... restent plus que ... 1 erreurs 1 alerte ...:)
mais du coup j'ai perdu une partie de la CSS comme on peut la voir sur:
http://site.unesourisetmoi.info/index.php?static3/tags-cloud
....
paumé dans la CSS maintenant ...

chriss · octobre 2013

Bon, j'ai repris des forces ....mangé 2 hot-dogs

dans le CSS

[== CSS ==]
#footer1Inner .boxfooter1 ul li a {
text-decoration : none;
color : #2365B0;
font-size : 12px;
font-style : normal;

supprime la ligne: color : #2365B0; les couleurs réapparaitrons ....
et celle ci: font-size: 12px;

et dans:

[== CSS ==]
#footer1Inner .boxfooter1 ul li {
font-size : 10px;
font-style : italic;
}

supprime font-size: 10px;
normalement cela devrait être bon.....

bg62 · octobre 2013

ok c'est bon pour ça + CSS valide ( sauf les "avertissements) ....
+ je viens de modifier " supprime font-size: 10px; + le reste ...
[del]mais un peu génant l'espacement entre les lignes, surtout pour les tags ( dans le footer ) ....[/del]
j'en avais oublié une ....
maintenant faut que je vois le reste ...
@+

chriss · octobre 2013

en Html

pour [ Tous les tags ] supprime l'attribut <center> pas reconnu en HTML5 (même si cela fonctionne!, jusqu'à quand ?)
crée plutôt une <div> avec une classe CSS exemple: <div class="center">...</div>

[== CSS ==]
.center       {
display: flex;
justify-content: center;
}

chriss · octobre 2013

Maintenant dans le paragraphe " Liens Utiles", pour les 2 premières lignes remplace les <p> par des <li>

[== HTML ==]
<p class="rss"><a href="http://site.unesourisetmoi.info/feed.php?rss" title="Fil Rss des articles">
			Fil des articles</a>
		</p>
		<p class="rss"><a href="http://site.unesourisetmoi.info/feed.php?rss/commentaires" title="Fil Rss des commentaires">
			Fil des commentaires</a>

par

[== HTML ==]
<li class="rss"><a href="http://site.unesourisetmoi.info/feed.php?rss" title="Fil Rss des articles">
			Fil des articles</a>
		</li>
		<li class="rss"><a href="http://site.unesourisetmoi.info/feed.php?rss/commentaires" title="Fil Rss des commentaires">
			Fil des commentaires</a>
                  </li>

Ce qui me permet de voir que le pour le 2eme <p> il n'était pas fermé.

bg62 · octobre 2013

ouf ça commence à venir, grand merci !!!
me reste une erreur à cause du code de twitter et de la class ....

[== PHP ==]
		<p align="center">
		<a class="twitter-timeline" href="https://twitter.com/unesourisetmoi"  data-widget-id="337499403235504129">Tweets de @unesourisetmoi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>

mais là encore ???

chriss · octobre 2013

Là encore l'erreur est le align="center" qui n'est pas reconnu il faut donc créer une classe pour l'attribut <p>
Peut-être en réutlisant la class .center , si tu l'a créée.
{)

bg62 · octobre 2013

ben je suis déjà beaucoup moins bête qu'avant

super !
erreurs = 0 warnings = 1
donc, grand, grand merci
il va falloir maintenant que j'arrive à nettoyer tout ça et à essayer de supprimer certains 'doublons'
... ensuite je pourrai commencer à l'optimiser pour le SEO ....

chriss · octobre 2013

Bravo!

Je préfère le vert au rouge.

PS: le warning c'est pour le HTML5 qui est pour le W3C en expérimental 8)

bg62 · octobre 2013

moi aussi

grand merci encore je vais nettoyer tout ça et le proposer dans les ressources ...
je te tiens au courant

bg62 · octobre 2013

encore une chose : dans la sidebar, il y a pour les catégories une 'class' qui s'applique bien ( exemple : selcted = plus foncé)
mais ça ne le fait pas pour les 'derniers articles' ....
le code:

[== PHP ==]
		<h3>
			<?php $plxShow->lang('CATEGORIES'); ?>
		</h3>

		<ul>
			<?php $plxShow->catList('','<li id="#cat_id"><a class="#cat_status" href="#cat_url" title="#cat_name">#cat_name</a> (#art_nb)</li>'); ?>
		</ul>

		<h3>
			<?php $plxShow->lang('LATEST_ARTICLES'); ?>
		</h3>

		<ul>
			<?php $plxShow->lastArtList('<li class="#art_status"><a href="#art_url" title="#art_title">#art_title</a></li>', 30); ?>
		</ul>

j'ai essayé li id="art....
mais pas bon ...
une solution ???

... on va y arriver

chriss · octobre 2013

en ce mardi bonjour,

doit être mal réveillé, je ne comprends pas la question...

J[del]e ne vois pas de différence entre "catégorie" Et "derniers articles"[/del]
ok je viens de voir (enfin je pense !!)
le problème est que pour 'catégorie' la class "active" est appliquée dans <a> et que pour "les derniers articles" elle est appliquée sur <li>

tu pourrais dupliquer cette class dans le CSS en supprimant le "a"

[== CSS ==]
aside li a.active {


en


aside li .active

au lieu de dupliquer, tu peut faire ceci:

[== CSS ==]
aside li a.active, aside li .active {

je ne sais pas ce que cela va donner.

PS: il seras moins facile pour moi cette semaine pour t,aider (je travaille de soir 7jours / 10h/j

)

mise au point d'un nouveau thème

Réponses