Nouveau site sous PluXml

Chad10

Bonsoir à tous,

Je viens de terminer un nouveau site sous PluXml. Ce site s'intitule Plux'Planet.
C'est un site perso pour télécharger mes thèmes en version Dev ou Finale, des goodies (wallpapers sur PluXml...)

Je vous invite à le découvir en cliquant ici.

Voici une petite capture également


Bonne soirée à tous

EDIT du 10/09/2015: Petite mise à jour de la capture avec le nouveau thème Plux'Planet

mr-toc

C'est sympa mais j'accroche pas du tout avec le menu fixe avec l'effet de transparence, c'est pas très lisible.

Pour le reste, c'est une très bonne initiative et j'attends de voir la suite.

kowalsky

Attention : l'image de fond pour ton "body" est beaucoup trop lourde à charger -> 1Mbit en jpeg ! Pas loin de 4 secondes chez moi alors que le reste de la page s'affiche en 0,5 sec.

Tout ça pour seulement afficher un effet halo lumineux au centre de la page, qui de plus ne se remarquera quasiment pas sur la plupart des configurations (1366*768 ou 1920*1200 pour les écrans 16/9) car les dimensions de ton images sont de 2560x1600 et que tu l'as positionnée en "fixed".

Tu devrais pouvoir l'optimiser un poil plus parce que c'est un coup à bouffer le forfait mobile de tes visiteurs, qui en plus n'en profiteront pas ]:D

(et puis vu l'url, ça ressemble fort à du hotlinking... double po bien)

bankai

Il est vrai que l'image de fond est lourde et lente en chargement, sur mon site j'ai deux articles qui pourront t'aider sur ce chemin.
Sinon sympa pour le téléchargement et Goodies pour PluXml

Chad10

Bonjour à tous,

@kowalsky et @bankai ,une petite modif vient d'être apportée sur le background. Pour le lancement je n'avais pas encore fais le fond (pas bien !!!) et donc c'était un wallpaper gratuit d'un autre site ( re pas bien !!!). C'est maintenant modifié avec un background de 36Ko .

@mr-toc pour le menu, il faut dire qu'il est "facultatif" et donc la navigation se fera plus via la sidebar c'est pour cela qu'il y a une petite transparence

Sinon merci à vous pour vos avis et bonne fin de journée

Chad10

Changement du thème Plux'Planet et ajout de deux goodies.

Bonne soirée à tous

kowalsky

Bah ça change tout le temps, on a pas le temps de suivre

Sur ta dernière version, essaye de faire en sorte que la hauteur de tes articles soit la même, sinon cela va te faire des décalages pas harmonieux lorsque tu en auras plus.

à ligne 117 du thème, supprime le float:left et utilise à la place display:inline-block, ça te fera l'effet de tuile recherché

.articlehome {
display: inline-block;
[del]float: left;[/del]
}

au lieu de définir une largeur width à .articlehome (32,26% ligne 117 et 97% ligne 149) utilise les helpers grids de plucss pour faire ton positionnement responsive (tu peux aussi les utiliser pour ton menu)

<article id="post-0" role="article" class="articlehome sml-12 med-4">

et rajoute dès maintenant un max-width:400px (par exemple) à cause des images, car il y a un souci d'affichage de celles-ci dans tes articles : dans le span c'est affiché en fond, mais juste après tu l'affiches de nouveau en image que tu désactives en ajoutant opacity:0. Je n'en vois pas l’intérêt, ni la finalité. De même que de forcer la hauteur/largeur des images qui les font dépasser de ta box "article" quand on redimensionne la page.

Tu peux simplifier tout cela pour un meilleur visuel :

[== HTML avant ==]
<div class="imart">
<span class="image-wrap " style="background: transparent url("http://pluxplanet.sitewebtroyes.fr/data/medias/pluxwallpaper1.jpg") no-repeat scroll center center; display: inline-block; height: 378px; position: relative; width: 604px;">
<img src="http://pluxplanet.sitewebtroyes.fr/data/medias/pluxwallpaper1.jpg" style="width: 604px; height: 378px; opacity: 0;">
</span>
</div>

[== HTML apres ==]
<div class="imart">
<img src="http://pluxplanet.sitewebtroyes.fr/data/medias/pluxwallpaper1.jpg" alt="wallpaper1">
</div>

Et tu devrais utiliser des miniatures pour tes vignettes : parce qu'une image de 2500x1600 c'est pas top avec les width:100%, ou quand on désactive le style (ne pas oublier l'accessibilité web, en rajoutant un attribut "alt")

Accessoirement toute la partie style devrait être dans ta page css, et non codée en dur dans la page html, mais cela doit peut-être venir d'un plugin qui expliquerait tout cela ?

kowalsky

ah aussi un truc que je viens de voir et qui explique pourquoi j'avais pleins de valeurs différentes pour une même balise : faut jongler avec 4 fichiers CSS, dont 2 faisant office de reset : plucss.css et foundation.min.css

<link media="screen" href="http://pluxplanet.sitewebtroyes.fr/themes/flat/css/plucss.css"; rel="stylesheet">
<link media="screen" href="http://pluxplanet.sitewebtroyes.fr/themes/flat/css/theme.css"; rel="stylesheet">
<link href="http://cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css"; type="text/css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"; rel="stylesheet">

Chad10

Bonjour Kowalsky,

Je viens de faire des modifs avec une max-width à 400px, basé sur FlexyBox pour faciliter les centrages. Au niveau de la classe imart, les styles d'affichage étaient modifiés à cause de champArt que j'utilise pour les vignettes de mes articles. J'ai également réglé afin que les images est une max-width à 400px. Les miniatures ne sont plus générées automatiquement, j'upload donc deux fichiers (original et miniature) afin de faire mon affichage. J'ai remarqué également que le logo, le bouton de menu, avaient tendance à "merder" donc la taille de chacun a été modifiée.
Il ne me reste plus que le css à nettoyer, baliser pour se repérer.
Bonne soirée

kowalsky

Bah ça rend super bien avec tes dernières modifs. Beau travail.

Tu peux éventuellement passer le max-width des articles et images imart à 450px ou 500px, ce qui évitera d'avoir de trop grandes marges latérales sur une tablette, (et rajouter un peu d'espace avant le texte).

.flex-item {
max-width: 500px;
padding: 0 1em 1em;
}

Au niveau cosmétique, il faut que tu sois cohérent avec les codes couleurs des liens : un coup c'est bleu, l'autre fois c'est blanc. Pas très intuitif pour tes lecteurs. En bas de page on ne sait plus où cliquer

Il faudra aussi revoir la couleur du hover au niveau du rsshome et footer qui passe tes liens en gris sur le fond foncé.

Chad10

Salut à tous,

en mémoire aux victimes des attentats de Paris, j'ai fais (vite fait...) un wallpaper PluXml plus sobre avec le drapeau français. je vous invite à le découvrir ici et à laisser un commentaire si vous le souhaitez.

Bonne journée à tous