Thème Responsive Design : Flak

k610ik610i Member
février 2013 modifié dans Vos créations
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 !
«1

Réponses

  • Jerry WhamJerry Wham Member
    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)...
  • k610ik610i Member
    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 !
  • JosJos Member
    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.
  • danielsandanielsan Member
    février 2013 modifié
    cool de prendre toute la largeur, j'aime bien (et c'est pas souvent que je le dit ! ]:D ) ... 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.
  • k610ik610i Member
    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 ! :)
  • danielsandanielsan Member
    mars 2013 modifié
    */ 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 ]:D


    */ 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 ... ]:D ]:D ]:D


    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 ;)


    bonne continuation
  • danielsandanielsan Member
    mars 2013 modifié
    une borderTop sur le footer, un background-color: red en :hover sur ta go2Top et un décallage des mots-clefs dans #aside
  • k610ik610i Member
    Oulààà !
    Bon j'ai une todo maintenant. :D
    (Par contre, vais bientôt partir en vacances 3 semaines, j'vais pas trop avancer).
  • danielsandanielsan Member
    bientôt ça veut dire que t'es pas partie ? alors au boulot ! ]:D
  • philou87philou87 Member
    bonjour,

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

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

    Cordialement.
  • DenDen Member
    Salut K610i,

    Super beau et sobre comme thème!

    Félicitations! ;)
  • k610ik610i Member
    Plop,


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


    k6 :)
  • k610ik610i Member
    Yop,


    J'ai mis en ligne les fichiers : Thème Flak
    Je m'attaque à la mise en ligne sur le site PluXml.
  • k610ik610i Member
    Votre archive doit comporter un dossier "theme" où se trouve les fichiers de votre thème
    J'arrive pas... :'(
  • Jerry WhamJerry Wham Member
    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.
  • FrédéricFrédéric Member
    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 ;)

    Téléchargement: Flak.zip
  • k610ik610i Member
    Merci !
  • Jerry WhamJerry Wham Member
    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...
  • bg62bg62 Member
    à mettre dans les ressources, non ?
    on en manque !!!
    http://ressources.pluxml.org/

    mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

  • Jerry WhamJerry Wham Member
    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...
  • k610ik610i Member
    @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 ! :D)

    Sinon, mettez la dans les ressources, j'avoue galérer pour le faire :/.
    J'ai toujours ce message : "Les fichiers de votre thème n'ont pas passé le test de sécurité !"
  • Jerry WhamJerry Wham Member
    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.
  • Jerry WhamJerry Wham Member
    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?
  • FrancisFrancis Member
    août 2013 modifié
    C'est très beau, mais que ce serait plus lisible si on n'avait pas besoin de placer la souris sur les blocs pour les rendre opaques.
    Mais ça fait un style, ça n'est pas mal du tout question esthétique ! :)
  • kirakira Member
    :rolleyes: J'arrive pas à mettre le thème Flak pour mon blog_PluXml version5.2

    Parse error : syntax error, T_STRING inattendu, s'attendant T_OLD_FUNCTION ou T_FUNCTION ou T_VAR ou '}' dans / mnt/153/sdb/e/f/jd97290/pluxml/pluxml/core/lib/class.plx.timezones.php en ligne 13

    et cette ligne13 est identique sur ce thème ou un autre
  • StéphaneStéphane Member, Former PluXml Project Manager
    @mpedro: active PHP5

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • kirakira Member
    Merci beaucoup, c'est bon.
  • kirakira Member
    :cool: cool cool très beau moovance (cf message #25), il y a du travail derrière.
    A ce niveau de compétences en visualisant plusieurs "blog/site" c'est parfois bluffant.
  • Jerry WhamJerry Wham Member
    Merci ;)
Connectez-vous ou Inscrivez-vous pour répondre.