PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 28/02/2013 19:06:19

k610i
Membre
Lieu : Paris
Inscription : 07/11/2011
Messages : 323
Site Web

Thème Responsive Design : Flak

Bonjour tout le monde,


Je finalise actuellement un thème simpliste, responsive design et en HTML5 / CSS3.


Ici, le site de démo : Thème Flak


J'aimerais personnaliser l'affichage des groupes de pages statiques, mais je ne comprends pas très bien comme ça fonctionne (le StaticGroup qui traine dans le menu). Pareil pour le nuage de Tag, je dois rajouter quelque chose ?
Il fonctionne là avec les plugins : HamGravatar, plxMySearch et scrollToTop.


Lachez vos remarques sur le design, le code, etc que je puisse l'améliorer et le rendre le plus complet possible.


Merci !

Dernière modification par k610i (28/02/2013 19:14:25)


> Mon site de test PluXml feukya.free.fr
> Mon blog-portfolio : kaysix.fr
> Qui suis-je : abomont.fr

Hors ligne

#2 28/02/2013 19:22:30

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 550
Site Web

Re : Thème Responsive Design : Flak

C'est propre et épuré. Ça donne envie de lire.

Peut-être un peu trop carribus ??? Il faudrait trouver un moyen d'adoucir un peu plus les angles (pas forcément en mettant des border-radius)...


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#3 28/02/2013 19:31:53

k610i
Membre
Lieu : Paris
Inscription : 07/11/2011
Messages : 323
Site Web

Re : Thème Responsive Design : Flak

Effectivement très carré, c'est ce que j'avais dans la tête.
Les marges en pourcentage accentuent p'tèt encore plus l'effet.
Je me posais une question d'ailleurs, dois-je limiter à une largeur max' ? Je ne vois pas trop l'intérêt de lire un blog qui fait plus de 2000px de large (ça doit d'ailleurs nuir à la lecture), donc là, je l'ai bloqué à 2000px.


J'peux le dupliquer et faire la version arrondi avec Radius, haha !


> Mon site de test PluXml feukya.free.fr
> Mon blog-portfolio : kaysix.fr
> Qui suis-je : abomont.fr

Hors ligne

#4 28/02/2013 22:02:58

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

Re : Thème Responsive Design : Flak

Moi personnellement j'aime bien de design, même si c'est carré. Essai juste de corriger quelques ereurs de css. Parcontre dans la barre de menu j'ai le mot StaticGroup qui apparaît, je sais pas si c'est normal, mais çà fait bizarre. Bon boulot.

Hors ligne

#5 28/02/2013 22:32:28

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 278

Re : Thème Responsive Design : Flak

cool de prendre toute la largeur, j'aime bien (et c'est pas souvent que je le dit ! devil ) ... cependant des longues lignes nuisent à la lisibilité.
Je ferais plutôt un ratio entre la largeur de l'écran et la taille du texte ... à partir d'une certaine largeur (1280 par exemple) et sans limite max. On fait souvent du responsive dans le micro mais jamais dans le macro !
Alors que les télé connectées arrivent (ou sont déjà là), du coup un thème fluide dans le max avec un ratio sur la typo moi j'dis merci. ( @llez voir un ptit coup dans le futur ici )
D'autre part les images des commentaires n'ont pas de taille fluide. A partir d'une certaine largeur l'image prend le pas sur le texte ...


une petite ligne rouge pour rythmer la verticale et/ou l'horizontale
un ptit cursor:pointer en hover sur le bouton submit,
un rapprochement de la ligne des mots-clefs vers la ligne des "Posté le" et en espaçant la marge entre le chapo et ces 2 lignes
enfin soyons fou hein, vu qu'il y a de la place dans la largeur des grands écrans : pourquoi ne pas utiliser les colonnes pour lister les articles, voir le contenu de celui-ci ?


un bon début qui peut-être personnalisable par les autres.

Dernière modification par danielsan (28/02/2013 22:49:00)


Que l'inspiration soit avec vous, à jamais !

Hors ligne

#6 01/03/2013 10:43:42

k610i
Membre
Lieu : Paris
Inscription : 07/11/2011
Messages : 323
Site Web

Re : Thème Responsive Design : Flak

Essai juste de corriger quelques ereurs de css.

Tu as raison, lààà, c'est le fouillis !



dans la barre de menu j'ai le mot StaticGroup

Comment fonctionne les groupements de pages ?


D'autre part les images des commentaires n'ont pas de taille fluide. A partir d'une certaine largeur l'image prend le pas sur le texte ...

C'est à dire ?
Tu parles des images gravatar ?
Là, j'ai fait en sorte que le texte 'encadre' l'avatar, mais je peux changer bien sûr.


une petite ligne rouge pour rythmer la verticale et/ou l'horizontale

Une ligne rouge ?


enfin soyons fou hein, vu qu'il y a de la place dans la largeur des grands écrans : pourquoi ne pas utiliser les colonnes pour lister les articles, voir le contenu de celui-ci ?

Tu veux dire, faire apparaitre une 2e sidebar avec plus de contenus dès qu'on dépasse Xpixels de large  (x compris entre 1500 et 2500) ?
Si c'est ça, ça peut super intéressant (surtout que là, j'ai deux écrans de PC, je peux tester !).


un ptit cursor:pointer en hover sur le bouton submit,
un rapprochement de la ligne des mots-clefs vers la ligne des "Posté le" et en espaçant la marge entre le chapo et ces 2 lignes

Je vais corriger, rajouter ! smile


> Mon site de test PluXml feukya.free.fr
> Mon blog-portfolio : kaysix.fr
> Qui suis-je : abomont.fr

Hors ligne

#7 01/03/2013 11:20:35

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 278

Re : Thème Responsive Design : Flak

*/ oui les images gravatar devraient être légèrement réduites en plus d'avoir le texte qui les entoure


*/ la ligne rouge, enfin une ligne de la même couleur que tes boutons, en bordure de tes blocs (en bottom sur #header et en left sur #aside par exemple)
(note : pense à regrouper les infos de couleurs dans ta CSS afin de pouvoir en changer rapidement.
Soit sur une seule ligne, soit avec une classe spécifique par ex:

/* couleurs */
.bg_0			{background-color: #FFFFFF}
.bg_1			{background-color: #BBBBBB}
.bg_2			{background-color: #888888}
.bg_3			{background-color: #444444}
.bg_4			{background-color: #000000}

.border_0		{border: none}
.border_1		{border: 1px solid #000000}
.border_2		{border: 2px solid #000000}
.border_3		{border: 3px solid #000000}
.border_4		{border: 4px solid #000000}

.borderT_1		{border-top: 1px solid #000000}
.borderB_1		{border-bottom: 1px solid #000000}
.borderL_1		{border-left: 1px solid #000000}
.borderR_1		{border-right: 1px solid #000000}

.borderT_2		{border-top: 2px solid #000000}
.borderB_2		{border-bottom: 2px solid #000000}
.borderL_2		{border-left: 2px solid #000000}
.borderR_2		{border-right: 2px solid #000000}

.borderT_3		{border-top: 3px solid #000000}
.borderB_3		{border-bottom: 3px solid #000000}
.borderL_3		{border-left: 3px solid #000000}
.borderR_3		{border-right: 3px solid #000000}

.borderT_4		{border-top: 4px solid #000000}
.borderB_4		{border-bottom: 4px solid #000000}
.borderL_4		{border-left: 4px solid #000000}
.borderR_4		{border-right: 4px solid #000000}

.borderC_0		{border-color: #FFFFFF}
.borderC_1		{border-color: #BBBBBB}
.borderC_2		{border-color: #888888}
.borderC_3		{border-color: #444444}
.borderC_4		{border-color: #000000}

.txtC_0, .txtC_0 a,
.txtC_0 a:link,
.txtC_0  a:visited,
.txtC_0  a:active	{color: #FFFFFF}

.txtC_1, .txtC_1 a,
.txtC_1 a:link,
.txtC_1  a:visited,
.txtC_1  a:active	{color: #BBBBBB}

.txtC_2, .txtC_2 a,
.txtC_2 a:link,
.txtC_2  a:visited,
.txtC_2  a:active	{color: #888888}

.txtC_3, .txtC_3 a, a:link, a:visited, a:active,
.txtC_3 a:link,
.txtC_3  a:visited,
.txtC_3  a:active	{color: #444444}

.txtC_4, .txtC_4 a,
.txtC_4 a:link,
.txtC_4  a:visited,
.txtC_4  a:active	{color: #000000}

du coup si tu veux une bordure de 2px de couleur foncée en bas de #header, tu lui rajoutes les class .borderB_2 et .borderC_4
c'est la CSS orientée objet comme ils disent devil


*/ je ne pensais pas à une 2ème sidebar mais à la liste des articles de #content sur 2 colonnes.
tu pourrais avoir éventuellement les 3 premiers articles (les plus récents donc) qui prennent toute la largeur, puis les autres placés sur 2 colonnes. un peu comme sur l'accueil du Lapin bleu. On donne une importance différente aux articles selon leur ancienneté ... tu es jeune, tu es beau et fort, tu es vieux, tu rapetisse jusqu'à disparaître ...  devil  devil  devil


M'enfin d'une manière générale, je trouve qu'il y a trop peu d'info pour un premier coup d'oeil (tu es sur la page d'accueil, sans scroller tu ne vois qu'un seul article ... il a intérêt à être super accrocheur !)
J'imagine peut-être un truc en haut à droite genre à-propos ou dernier article ou un slide des images d'article. Un truc qui bouge wouai wink


bonne continuation

Dernière modification par danielsan (01/03/2013 11:22:13)


Que l'inspiration soit avec vous, à jamais !

Hors ligne

#8 01/03/2013 11:34:11

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 278

Re : Thème Responsive Design : Flak

une borderTop sur le footer, un background-color: red en :hover sur ta go2Top et un décallage des mots-clefs dans #aside

Dernière modification par danielsan (01/03/2013 11:35:24)


Que l'inspiration soit avec vous, à jamais !

Hors ligne

#9 01/03/2013 11:44:59

k610i
Membre
Lieu : Paris
Inscription : 07/11/2011
Messages : 323
Site Web

Re : Thème Responsive Design : Flak

Oulààà !
Bon j'ai une todo maintenant. big_smile
(Par contre, vais bientôt partir en vacances 3 semaines, j'vais pas trop avancer).


> Mon site de test PluXml feukya.free.fr
> Mon blog-portfolio : kaysix.fr
> Qui suis-je : abomont.fr

Hors ligne

#10 01/03/2013 12:12:10

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 278

Re : Thème Responsive Design : Flak

bientôt ça veut dire que t'es pas partie ? alors au boulot !  devil


Que l'inspiration soit avec vous, à jamais !

Hors ligne

#11 01/03/2013 13:14:20

philou87
Membre
Lieu : Limoges
Inscription : 19/01/2013
Messages : 53
Site Web

Re : Thème Responsive Design : Flak

bonjour,

Tu peux peux peut être aussi t'inspirer de celui ci
http://www.tendance-mobil-home.fr/

Hors ligne

#12 20/03/2013 11:35:28

Dunkel
Membre
Inscription : 19/03/2013
Messages : 4

Re : Thème Responsive Design : Flak

Bonjour,

Ton thème me plait énormément smile. J'espère que tu le rendras disponibles prochainement smile. En tout cas je suis son évolution.

Cordialement.

Hors ligne

#13 21/03/2013 02:59:54

Den
Membre
Lieu : Québec
Inscription : 22/10/2009
Messages : 393
Site Web

Re : Thème Responsive Design : Flak

Salut K610i,

Super beau et sobre comme thème!

Félicitations! wink

Hors ligne

#14 25/03/2013 18:51:12

k610i
Membre
Lieu : Paris
Inscription : 07/11/2011
Messages : 323
Site Web

Re : Thème Responsive Design : Flak

Plop,


I'm back !
Je vais donc replonger dedans prochainement.


k6 smile


> Mon site de test PluXml feukya.free.fr
> Mon blog-portfolio : kaysix.fr
> Qui suis-je : abomont.fr

Hors ligne

#15 30/04/2013 11:36:05

k610i
Membre
Lieu : Paris
Inscription : 07/11/2011
Messages : 323
Site Web

Re : Thème Responsive Design : Flak

Yop,


J'ai mis en ligne les fichiers : Thème Flak
Je m'attaque à la mise en ligne sur le site PluXml.


> Mon site de test PluXml feukya.free.fr
> Mon blog-portfolio : kaysix.fr
> Qui suis-je : abomont.fr

Hors ligne

#16 30/04/2013 11:44:59

k610i
Membre
Lieu : Paris
Inscription : 07/11/2011
Messages : 323
Site Web

Re : Thème Responsive Design : Flak

Votre archive doit comporter un dossier "theme" où se trouve les fichiers de votre thème

J'arrive pas... :'(


> Mon site de test PluXml feukya.free.fr
> Mon blog-portfolio : kaysix.fr
> Qui suis-je : abomont.fr

Hors ligne

#17 30/04/2013 12:41:29

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 550
Site Web

Re : Thème Responsive Design : Flak

k610i a écrit :

Votre archive doit comporter un dossier "theme" où se trouve les fichiers de votre thème

J'arrive pas... :'(

Je sais, c'est la misère, d'autant que tu utilises des plugins, donc tu peux laisser tomber. Un lien vers ton site est bien suffisant.
Sinon, tu peux t'inspirer de ce que j'ai fait pour poster le thème dailypost. Tu places des fichiers vides avec un dossier pluxml qui comporte tout un pluxml complet avec tes plugins, ton thème et le thème par défaut.

Télécharges l'archive, tu comprendras mieux.

Sinon, j'adore tes thèmes. Ils sont simples et épurés mais efficaces. Et c'est souvent le plus dur à faire. Chapeau.


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#18 30/04/2013 12:45:05

Frédéric
Membre
Inscription : 03/06/2009
Messages : 2 533

Re : Thème Responsive Design : Flak

Chapeau pour le thème, magnifique.

Je me suis permis de te laisser l'archive démuni de tout plugins (mieux vaut l'indiquer sur la description où les télécharger), qui devrait passer la vérification des ressources wink

Téléchargement: Flak.zip

Hors ligne

#19 30/04/2013 15:20:13

k610i
Membre
Lieu : Paris
Inscription : 07/11/2011
Messages : 323
Site Web

Re : Thème Responsive Design : Flak

Merci !


> Mon site de test PluXml feukya.free.fr
> Mon blog-portfolio : kaysix.fr
> Qui suis-je : abomont.fr

Hors ligne

#20 16/07/2013 11:36:47

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 550
Site Web

Re : Thème Responsive Design : Flak

Pour avoir la sidebar de la même hauteur que la partie content, quels que soient leurs contenus, je te propose la modif suivante :
Dans le fichier header.php ajouter à la dernière ligne, le début du bloc mainwrap, qui va envelopper le bloc content et le bloc sidebar.

<div id="mainwrap" class="content w100">

Je lui donne la classe content afin qu'il se place bien sous le header et la classe w100 afin qu'il occupe la totalité de la largeur.

Le bloc sera fermé dans le footer.php avant le bloc footer.

Ensuite, au niveau css, la sidebar doit être en position absolue et sans marge en haut et en bas, ce qui donne :

/* ---------------------------------------*/
/* ==sidebar */
/* ---------------------------------------*/

.sidebar {
padding:3% 4%;
position:absolute;
top:0;
bottom:0;
left:60%;/*égal à la largeur du bloc content*/
}

Le bloc mainwrap doit être en position relative sans padding. Ainsi, la sidebar sera en position absolue mais en prenant comme référence le bord haut gauche du bloc mainwrap.

Les propriétés du bloc mainwrap doivent être placées après celles du bloc content (aux alentours de la ligne 547) :

#mainwrap {
position:relative;
padding:0;
}

Ensuite, pour le responsive design, il faut remettre en relative la position de la sidebar afin qu'elle se replace en dessous du bloc content, avec aucune marge à gauche et le bloc mainwrap doit avoir une largeur de 100% comme les autres blocs :

@media (max-width:640px;) {
.sidebar {position:relative;margin-top:1em;margin-left:0;left:0;}
#mainwrap,.content, .sidebar,.header,.footer {width:100%;}
}

Avec tout ça, les blocs content et sidebar auront la même hauteur, quel que soit leur contenu.

Petit bémol : je n'ai pas testé avec IE, sur aucune version. Si une âme charitable veut bien nous faire un retour...


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#21 18/07/2013 12:05:21

bg62
Membre
Inscription : 18/05/2007
Messages : 1 782
Site Web

Re : Thème Responsive Design : Flak

à mettre dans les ressources, non ?
on en manque !!!
http://ressources.pluxml.org/


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

#22 18/07/2013 15:26:05

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 550
Site Web

Re : Thème Responsive Design : Flak

Oui k610i a essayé mais elle n'a pas réussi. Toujours l'interface qui fait des siennes. Frédéric lui a créé une archive mais k610i ne l'a pas mise en ligne dans les ressources...


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#23 18/07/2013 17:22:55

k610i
Membre
Lieu : Paris
Inscription : 07/11/2011
Messages : 323
Site Web

Re : Thème Responsive Design : Flak

@Jerry
J'ai essayé ton code, mais, lorsque la sidebar est plus longue que le content, ça marde !
J'ai essayé de voir pour corriger mais mon fichier css a disparu dans la nature > c'est un bug que j'avais déjà constaté, je suis incapable de le refaire (c'est pour ça que mon site de test pour Flak n'a pas de CSS, je ne l'ai pas remis ! big_smile)

Sinon, mettez la dans les ressources, j'avoue galérer pour le faire hmm.
J'ai toujours ce message : "Les fichiers de votre thème n'ont pas passé le test de sécurité !"


> Mon site de test PluXml feukya.free.fr
> Mon blog-portfolio : kaysix.fr
> Qui suis-je : abomont.fr

Hors ligne

#24 19/07/2013 01:55:13

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 550
Site Web

Re : Thème Responsive Design : Flak

Je viens de m'en apercevoir. Pour corriger le problème, il faut mettre un min-height de la hauteur de la sidebar.
Je sais, c'est foireux mais j'ai pas trouvé mieux, sauf avec la technique des colonnes factices.


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#25 21/08/2013 19:17:23

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 550
Site Web

Re : Thème Responsive Design : Flak

Bonsoir. Je remonte le topic car je viens de finaliser un site qui utilise le thème Flak modifié par mes soins et je tenais à remercier une nouvelle fois k610i. Zenpensezkoi?


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés