[Thème] Loki

Lokoyote · mars 2014

Hello à toutes et à tous !

Je voulais vous présenter mon thème tiré du thème de base avec pas mal de changement (plus ou moins visible), version stable !

Qu'en pensez-vous ? Démo disponible ici :

http://lokoyote.eu/pluxml/index.php

----
Spécificités :

- Formulaire de contact HTML 5 intégré
- Message d'erreur du captcha et avertissement de la modération en haut de page
- Valide W3C (CSS et HTML)
- Compatible avec les plugins Mysearch, filAriane et plxMyPager
- 100% responsive
- Menu déroulant jusqu'à 5 liens de navigation principaux (hors sous-menu)
- 100% CSS ! (0% javascript)

Disponible ici : http://lokoyote.eu/dl/Loki_v2.8.zip

- - - - - - - - - - - - - - - - - - - - -

## MÀJ du 29/03/14 - v2.8 STABLE##
+ Ajout de 2 pages pour le formulaire (succès et échec d'envoi)
+ Ajout d'un PDF pour les explications annexes
+ Modification de quelques bug d'affichage
+ Passage au 100% CSS et HTML5

## MÀJ du 19/03/14 - v2.7 ##
+ Ajout d'un menu déroulant ! (enfin !)
+ Rebasculement du nombre de catégories du menu à 5
+ Formulaire de commentaire de nouveau visible par défaut
+ Modification de certaines couleurs
+ Refonte de certaines parties de la version mobile

## MÀJ du 15/03/14 - v2.4 ##
+ Ajout d'un bouton de type "checkbox" pour l'envoi de mail
+ Modification de certaines couleurs
+ Changement des dimensions des commentaires
+ Personnalisation de la page d'erreur
+ et d'autres petits trucs...

## MÀJ du 12/03/14 - v2.3 ##
+ Correction des marges du format petit écran
+ Ajout du script pour l'envoi des mails (avec prises en charge des accents et des apostrophes)
+ Réajustement de la taille de certaines polices

N'hésitez pas à faire des retours (positifs ou négatifs) !
Compatible Pluxml 5.3.1

Jessy28 · mars 2014

Pas mal du tout

j'aime vraiment beaucoup !
Par contre sur téléphone je trouve dommage que les icones (rss, message) ne soit pas rassemble comme sur la version PC ]:D
Sinon, un des plus beau (surement le plus beau) thème que j'ai jamais vu :P

Lokoyote · mars 2014

Merci pour le retour !

Ahah faut pas abuser, y en a des très beaux aussi que j'ai vu !

Ah vi ! J'ai pas fait attention à ce détails, t'as l’œil ! Je vais voir comment je peux modifier ça

Lokoyote · mars 2014

Voilà, c'est à jour

[del]
Mouarf, nan problème de marge...[/del]

Edit : Voilà, ça devrait être bon

"Ctrl + Maj + m" sous Firefox pour changer les résolutions.

Den · mars 2014

Pas mal, tu devrais quand même essayer de corriger ton code.
Tu as 215 erreurs pour la validation du W3C, ici... Validation

Et CSS

Bye!

Lokoyote · mars 2014

@Den :

Merci bien ! Voilà ! Au moins pour la partie HTML (dire que j'avais tout rectifié la semaine dernière...), quant au CSS le validator est encore moins à jour que moi, ou alors il ne reconnaît pas les balises spécifiques à certains navigateurs...

chriss · mars 2014

Bonjour,

Lokoyote a écrit:

@Den :

Merci bien ! Voilà ! Au moins pour la partie HTML (dire que j'avais tout rectifié la semaine dernière...), quant au CSS le validator est encore moins à jour que moi, ou alors il ne reconnaît pas les balises spécifiques à certains navigateurs...

Pour les -moz- et les -webkit- ne sont pas reconnus par le W3C, mais ce ne sont pas des erreurs mais que des avertissements.

par contre pour "height", "margin" et padding, il ne faut pas mettre none (qui n'est une valeur) mais O (zero).

Lokoyote · mars 2014

Ahhhh ! D'acc !
Bon bah je me coucherai moins bête :P

Merci pour les précisions

Jessy28 · mars 2014

Bref quelque petites erreurs (dommage) mais très beau thème

Après correction se sera un des plus beau à mes yeux ]:D Merci pour le ctrl mag + M

chriss · mars 2014

Re,

dernière ligne de style.css supprimer " } ", en trop !.
@keyframes et non @-webkit-keyframes

Dans les avertissements, il est inutile de mettre des "border" si ils sont de la même couleur que le background !

pour les linear-gradients tu peux supprimer les vendeurs (-moz- et -webkit-)
Pour

[== CSS ==]
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #AD1414), color-stop(1, #DE5757) );
background:-moz-linear-gradient( center top, #AD1414 5%,  #DE5757 100% );
}

cela serait pour FF ou Chrome:

[== CSS ==]
background: linear-gradient( -45deg, #ad1414 5%, #de5757 100%);

Lokoyote · mars 2014

Ah merci, j'arrivais pas à trouver le pourquoi de cette erreur !

Par contre, pourquoi il me dit que les thèmes pour petits écrans sont faux ?

chriss · mars 2014

Lokoyote a écrit:

Ah merci, j'arrivais pas à trouver le pourquoi de cette erreur !

Par contre, pourquoi il me dit que les thèmes pour petits écrans sont faux ?

parce que tu as mis cela:

[== CSS ==]

input.searchbutton[type=submit]{
	margin-top: -60px;
	margin-bottom: 20px;
	margin-left: 180px;
}

			/*-----------------------------------------*/



@media screen and (max-width: 899px) {

et tu as oublier une " } " pour fermer le media suivant:

[== CSS ==]
@media screen and (max-width: 1100px) {

corrigé:

[== Indéfini ==]
input.searchbutton[type=submit]{
	margin-top: -60px;
	margin-bottom: 20px;
	margin-left: 180px;
}
}           /* celui-ci a été oublié */

			/*-----------------------------------------*/

@media screen and (max-width: 899px) {

Lokoyote · mars 2014

@chriss :

tout ce qu'il y a en avertissement je ne peux pas y modifier, tu remarqueras que pour le reste je n'y ai pas accordé plus d'importance et il y a une raison purement pratique, les effets ne sont pas les mêmes s'ils n'y sont pas.

D'autant qu'en théorie mon code est en grosse partie faux car il faudrait que je mette toutes les prépositions pour tous les navigateurs à chaque fois, il y a certes un w3c mais l'interprétation parfaite entre tous les navigateurs c'est pas encore ça...

Lokoyote · mars 2014

Oh nice !

J'étais devant depuis tout à l'heure et j'ai pas vu cet oubli !

chriss · mars 2014

encore moi ...

je voudrais savoir si ce qui a après la ligne 1433

[== CSS ==]
	/* Advanced Checkbox Hack -- unknown source */

appartient au media

[== CSS ==]
@media screen and (max-width: 899px) {

si oui replacer la " } " en derniere ligne, erreur dû à la précédente avant réparation.

J'espère être assez clair

Lokoyote · mars 2014

encore moi ... smile

Pas de souci ! Bien au contraire

je voudrais savoir si ce qui a après la ligne 1433

[== CSS ==]
/* Advanced Checkbox Hack -- unknown source */

appartient au media

[== CSS ==]
@media screen and (max-width: 899px) {

Oui en effet, j'avais trouvé cette ligne je ne sais vraiment plus où, mais sans ça, le changement du menu en bouton ne fonctionne pas.

si oui replacer la " } " en derniere ligne, erreur dû à la précédente avant réparation.

En théorie il manque bien une accolade fermante tout à la fin, cependant elle est considérée comme erronée si elle est présente.

En tout cas, je te remercie grandement pour ton aide !

chriss · mars 2014

Lokoyote a écrit:

@chriss :

tout ce qu'il y a en avertissement je ne peux pas y modifier, tu remarqueras que pour le reste je n'y ai pas accordé plus d'importance et il y a une raison purement pratique, les effets ne sont pas les mêmes s'ils n'y sont pas.

pourquoi???

D'autant qu'en théorie mon code est en grosse partie faux car il faudrait que je mette toutes les prépositions pour tous les navigateurs à chaque fois, il y a certes un w3c mais l'interprétation parfaite entre tous les navigateurs c'est pas encore ça...

corriger les erreurs permet d'apprendre...
si si l'interpretation des navigateurs est bonne sauf pour les transitions et les nouvelles propriétés CSS à venir. (sauf pour IE9 et avant)
pour les linear-gradients tu peut supprimer sans crainte ... surtout que FF30 n,en tiendra plus compte (des -moz-linear-gradient )

chriss · mars 2014

Lokoyote a écrit:

En théorie il manque bien une accolade fermante tout à la fin, cependant elle est considérée comme erronée si elle est présente.

considérée erronée parce qu'il y avait l'erreur précedente.

Lokoyote · mars 2014

pourquoi???

[del]Bah là je t'avoue ne rien y comprendre, je viens de ré-enlever les préfixes et c'est bien pris en compte...[/del]
Je rectifie, je fais un gif.

corriger les erreurs permet d'apprendre...
si si l'interpretation des navigateurs est bonne sauf pour les transitions et les nouvelles propriétés CSS à venir. (sauf pour IE9 et avant)
pour les linear-gradients tu peut supprimer sans crainte ... surtout que FF30 n,en tiendra plus compte (des -moz-linear-gradient )

Ça... IE a jamais fait comme tout le monde, du coup j'ai plus envie de le prendre en compte.
Ok ok ! J'en prends bonne note, je ne le savais pas

Lokoyote · mars 2014

Voilà, en fait certains préfixes ne peuvent être enlevés, comme ceux-ci :

On a ça :
http://lokoyote.eu/test/avec.mkv

et si j'enlève les préfixes :

On obtient ça :
http://lokoyote.eu/test/sans.mkv

chriss · mars 2014

excuse, j,avais mal écrit un précédent message.

il ne suffit pas d,enlever les vendeurs (vendor en anglais) ou préfixes. mais réécrire la propriété.
Ce qui donnerait maintenant pour tout navigateurs sauf IE9 ceci:

[== CSS ==]
background: linear-gradient( -45deg, #ad1414 5%, #de5757 100%);

cela fonctionne je l'ai vérifié sur http://jsfiddle.net/chrisss/aULp7/

Lokoyote · mars 2014

Oki je ne connaissais pas cette écriture ! Au temps pour moi

J'ai rectifié en

[== CSS ==]
	background: linear-gradient( to bottom, #ad1414 5%, #de5757 100%);

C'est nickel !

Lokoyote · mars 2014

A priori ça devrait être bon. Cependant n'utilisant que Firefox (nunux oblige), si quelqu'un a un IE sous la main et me dire comment ça rend, ce serait vraiment super !

chriss · mars 2014

bon matin..

Lokoyote a écrit:

A priori ça devrait être bon. Cependant n'utilisant que Firefox (nunux oblige), si quelqu'un a un IE sous la main et me dire comment ça rend, ce serait vraiment super !

pour IE9 tout est ok sauf lemenu du haut, IE9 ne reconnaissant pas la propriété animation... donc pas de clignotement.

Lokoyote · mars 2014

Ouais j'arrivais pas à dormir, du coup ça m'a motivé un peu.

pour IE9 tout est ok sauf le menu du haut, IE9 ne reconnaissant pas la propriété animation... donc pas de clignotement.

Ok ça marche, merci chriss

tant que c'est au moins souligné je pense que ça ira.

J'ai testé sous IE 10 et ça m'a l'air d'être bon, y avait que la hauteur des boutons qui était un peu petite.

J'ai modifié quelques trucs :
[list=*]
[*]nombre de commentaire en bas à droite du header[/*]
[/list]
[list=*]
[*]commentaires cachés par défaut, mais pouvant être affichés[/*]
[/list]
[list=*]
[*]Légère modif des marges sur la version tel (Faut-il enlever le RSS dans la version mobile ?)[/*]
[/list]
[list=*]
[*]message d'erreur du captcha en haut du site[/*]
[/list]

et je crois que c'est tout

chriss · mars 2014

Lokoyote a écrit:

Ouais j'arrivais pas à dormir, du coup ça m'a motivé un peu.

..............

et moi je suis en train d'écrire un article sur les gradients O:)

Lokoyote · mars 2014

Ahah sympa !
Au passage, sympa ton site ! L'aide mémoire est pas mal !

Den · mars 2014

Bravo mon vieux!

Ça regarde toujours mieux un code valide... :cool:

Lokoyote · mars 2014

@Den :
J'avoue ! Le pire c'est que j'avais tout mis au propre la semaine d'avant...
En tout cas je remercie encore chriss pour son coup de main !

J'ai encore quelques idées mais non essentielles. Je vais essayer de compiler un thème avec des fichiers vierges et des explications pour les quelques modif qu'il faudra peut-être faire.

Je vais essayer d'y mettre à disposition courant cette semaine mais je promets rien, j'ai pas mal de cours. Au mieux cette semaine, au pire je mettrai tout ça dans ce topic une fois que ce sera clean

En attendant si vous voyez quelque chose qui ne va pas ou à améliorer ou mieux, des idées, n'hésitez pas à en faire part soit à la suite, soit dans l'article sur mon site http://lokoyote.eu/article9/new-skin, j'y prendrai en considération du mieux que je peux avec les quelques bases que je sais faire

Jos · mars 2014

Bonjour,

$Très original ton thème. Jsute encore des erreurs de CSS (si tu souhaite que se soit valide W3C) et ce sera nickel.

Lokoyote · mars 2014

Salut Jos !

Merci du retour

Juste encore des erreurs de CSS

Ah ? Où ça ? J'ai fait tout le ménage niveau HTML et CSS pourtant... (cf poste n°5 de Den)

*entre 2 bouchées de pain*

Edit :
[list=*]
[*]"Menu" version mobile centré en fonction de la largeur (minimum = 250px)[/*]
[/list]

[Thème] Loki

Réponses