Thème w3css

niqnutnniqnutn Member
juin 2016 modifié dans Réalisations
Un petit thème à tester pour PluXml 5.5.
https://github.com/nIQnutn/PluXml-W3css

Le thème se base sur w3css http://www.w3schools.com/w3css/default.asp
J'ai gardé une structure classique avec un dégradé d'une couleur.
On peut modifier très facilement la couleur utilisée grâce à l'outil : http://www.w3schools.com/w3css/w3css_color_themes.asp et on recopie le tout dans css/w3-theme.css ou en éditant directement css/w3-theme.css comme on veut.
On reprend également les icônes font-awesome et j'ai repris le plugin MyPager que j'ai modifié.
Le menu déroulant est également disponible.
J'ai un peu modifié la partie commentaire mais il manque les miniatures pour le moment.

Les plugins nécessaires pour assurer le bon fonctionnement du thème:
[list=*]
[*]plxFontAwesome pour ajouter des icônes PluXml http://forum.pluxml.org/viewtopic.php?pid=45813[/*]
[*]plxSimplePager pour la navigation https://github.com/nIQnutn/plxSimplePager[/*]
[/list]

les plugins optionnels:
[list=*]
[*]plxW3cssThemeSelect pour changer la couleur du thème https://github.com/nIQnutn/plxW3cssThemeSelect/tree/master/themes[/*]
[/list]




1465170405.png 1465170674.png 1465171306.png

N'hésitez pas à donner votre avis.
«1

Réponses

  • JosJos Member
    Bonjour,

    Merci pour le partage. J'aime bien la simplicité de ces thèmes. Sont t'ils valide W3C du coup?
  • pas vérifié mais il le sera.
  • Super travail, le thème est très propre :)
  • je vais corriger quelques erreurs que j'ai repérées et publier le plugin MyPager modifié pour le thème.
    j'ai pas regarder sur les autres thèmes, mais je ne sais pas comment intégrer les dates (publication, modification, création).
    idem pour les vignettes (aucun style définit pour le moment).
    un petit guide pour utiliser les différentes fonctions de w3css (tableaux, slideshow, etc. ..) devrait être ajouté.

    les suggestions sont toujours le bienvenu.
  • j'ai créé un plugin pour la navigation: plxSimplePager https://github.com/nIQnutn/plxSimplePager .
    il s'agit uniquement d'une modification pour le thème W3css et une simplification du plugin (suppression de l'administration) de Stéphane.
  • niqnutnniqnutn Member
    juin 2016 modifié
    J'ai créé un plugin pour choisir le thème de couleur.
    Il suffit d'installer le plugin et dans la configuration du plugin on peut choisir la feuille CSS (plus de 30 couleurs différentes pour le moment).
    Vous pouvez également créer les vôtres depuis http://www.w3schools.com/w3css/w3css_color_themes.asp

    Note: c'est totalement optionnel pour le fonctionnement du thème.

    Pour télécharger: https://github.com/nIQnutn/plxW3cssThemeSelect/tree/master/themes
  • Le thème est plutôt bien avancé.
    Après quelques corrections et des retouches cosmétiques, ça devrait être bon.
    J'ai vérifier la validité du thème et ça me semble OK (excepté au niveau du menu principal, j'ai des id dupliqués et j'ai pas encore de solutions).


    Si quelqu'un peut tester et dire s'il y a des bugs ou des améliorations possibles ça permettrait de le publier plus rapidement dans les Ressources.
  • niqnutnniqnutn Member
    juin 2016 modifié
    J'ai apporté quelques corrections et le thème est maintenant disponible en version stable.
    Avec le plugin plxW3cssThemeSelect, on a le choix entre 50 couleurs différentes.

    Téléchargement: https://github.com/nIQnutn/PluXml-W3css

    1465758309.png
  • Kube17Kube17 Member
    juin 2016 modifié
    Bonjour :)
    J'ai installé votre thème sur mon site (http://kube17.tk/site) seulement il y a un problème que je n'ai pas su résoudre: Lorsque je clique sur le bouton pour ouvrir le menu (Lorsqu'il est compacté pour petits écrans), j'obtiens une erreur javascript:void(0) mais pas dans la console, dans l'url, donc erreur 404 puisque la page existe pas...
    ladupo80511.png
    Avez-vous une idée du problème?
    -Kube17.

    EDIT: En affichant la source de la page, voici comment le bouton est interprété:
    opauld8051b.png
    Au lieu de simplement href="javascript:void(0);".
    J'utilise Opera habituellement, mais c'est la même chose depuis FF ou Edge.

    Et cela fonctionne correctement depuis la démo de w3.css (ici) donc je sais pas, je suis dépassé :/

    EDIT 2: Quand je désactive la réecriture d'url ça fonctionne. Comment est-ce que je pourrais avoir la réecriture d'urls et le menu en même temps?

    FR/EN MP - Mail - unkorneglosk.fr - Twitter - Je suis modérateur, je dois donc modérater. Ou modérationner. Ou je sais plus. Mais je le fais. En ce moment j'ai des problèmes d'accès à internet je peux mettre du temps à répondre.

  • Bonjour Kube17,

    C'est un bogue de PluXml 5.5 dont on parle ici : http://forum.pluxml.org/viewtopic.php?id=5565

    La solution consiste à rectifier une ligne dans le fichier core/lib/class.plx.utils.php, tout est détaillé ici : https://github.com/pluxml/PluXml/issues/174
    Il faut prendre la dernière version de la ligne $patterns = array(...); => c'est celle qui se trouve tout en bas de la page.
  • Kube17Kube17 Member
    Merci beaucoup Francis :)
    Ça fonctionne correctement maintenant :)

    FR/EN MP - Mail - unkorneglosk.fr - Twitter - Je suis modérateur, je dois donc modérater. Ou modérationner. Ou je sais plus. Mais je le fais. En ce moment j'ai des problèmes d'accès à internet je peux mettre du temps à répondre.

  • Un article pour détailler pour l'installation du thème et quelques captures d'écran supplémentaire.
    On retrouve les explications pour modifier la couleur du thème.

    http://blog.niqnutn.com/index.php?article54/w3css
  • niqnutnniqnutn Member
    août 2016 modifié
    si quelqu'un peut finir le travail en déposant le thème dans les ressources http://ressources.pluxml.org/?contribuer
    je rencontre toujours le même pb avec le .zip même avec les indications de Pierre http://forum.pluxml.org/viewtopic.php?pid=50927#p50927

    * Type et nom de votre thème : w3css
    * Thème adapté pour la version de Pluxml : PluXml 5.5
    * Numéro de version du thème : 1.0
    * Licence : MIT License
    * Adresse de support (e-mail ou adresse URL) : http://forum.pluxml.org/viewtopic.php?id=5576

    Informations supplémentaires (les balises "a" et "strong" sont autorisées) :
    Thème W3css pour PluXml

    W3css est un thème simple et facile à modifier.

    Fonctions principales:
    * Thème responsive design pour s'adapter à tous les écrans
    * Intégration de la police d'icônes FontAwesome
    * Une pagination simplifiée
    * Un menu déroulant pour les pages statiques
    * De nombreux thèmes de couleur disponibles
    * La possibilité de créer un thème de couleur facilement


    Pré-requis:
    * PluXml 5.5
    * Thème W3css 1.0
    * Plugin plxFontAwesome 0.3
    * Plugin plxSimplePager 1.0

    Lire le fichier readme.md pour plus d'informations.

    * Visuel JPG du thème de la meilleure qualité possible : https://cloud.githubusercontent.com/assets/13441278/18036109/69edb666-6d63-11e6-9f2d-a0643e6522bc.jpg
    * Archive ZIP du thème (l'archive doit contenir un unique répertoire theme contenant vos fichiers) : https://github.com/nIQnutn/PluXml-W3css/archive/master.zip
  • salut a tous,

    je débute sur pluxml, que je fait tournée en local pour le moment, les possibilité sont énorme avec .
    le thème w3css est un super thème, je pense d’ailleurs que ce serais un super thème par défaut, simple et personnalisable a souhait.

    cepandant je connais que peu les langages css php ( je me débrouille mais je peu mettre longtant a faire un truc simple )

    j'ai regarder un peu le css, et je pense qu'une bonne idée serais de mettre des commentaire sur chaque lignes par exemple :

    .w3-col.l4,.w3-third{width:25%} = taille sidebar
    .w3-col.l8,.w3-twothird{width:50%} = taille cadre article

    j'ai essayer de modifier d'autre valeur, cela n'a pas influer sur le design de mon site ( peu être que c'est des modification subtile ? ) toutes les valeurs servent dans le css ?

    j'aime ce thème, je pense qu'il faudrait se pencher dessus pour le rendre un poil plus facile d'accée au néophyte car avec une structure simple comme celle ci, rien n’empêchera la personnalisation extrême tel que rajouter un background img, arondire les bordures, déplacer les cadres .... tous sa simplement.
  • Bonjour oneil4 :)
    Si jamais tu commente toutes les lignes d'un fichiers CSS ou HTML, le risque est de ralentir le chargement de ton site.

    C'est une partie essentielle pour l'optimisation.
  • en fait le css n'est pas touché (w3.css).
    c'est surtout dans le thème qu'il faut ajouter / modifier des classes.

    je peux essayer de rajouter quelques commentaires pour identifier certains éléments importants du thème (sidebar / article / menu / ...).
    Après, il faut regarder la doc : http://www.w3schools.com/w3css/default.asp
    Si tu m'envoies des explications sur les points importants, on peut essayer d'ajouter des explications dans la doc du thème.

    il existe quelques classes css qui ne servent pas mais la plupart sont utiles.
    pour voir les modifications, tu peux utiliser Firefox en mode développeur. ça permet de voir les changements facilement et modifier directement la page.

    Sinon, il est important de comprendre les bases de css, php et la structure des thèmes pluxml pour pouvoir modifier son thème.
    C'est pas compliqué et tu trouveras des explications facilement. https://developer.mozilla.org/fr/docs/Outils/Inspecteur

    @bankai: je ne pense pas que le poids des commentaires puisse ralentir le chargement d'un site (en tout cas, pas de manière significative).
  • salut a tous, merci pour vos réponse,

    deja dans le thème, il y a 3 css,

    w3
    w3-custom
    w3-theme

    pouvons nous tourner qu'avec w3.css et supprimer les autres?

    a quoi sert le w3 js ?
  • pour le moment, w3 js ne sert à rien.
    w3-theme et w3-themes ne sont pas utiliser, c'était juste pour pouvoir changer la couleur du thème. ils seront supprimés.
    pour w3.css, c'est la feuille de style du projet w3css qui n'est pas modifié (pour faciliter les mises à jour).
    les modifications pour s'adapter à PluXml se font dans dans custom.css

    de toute façon, il y a seulement w3.css et w3-custom de charger dans le header.php.
  • Bonjour,
    J'utilise votre thème sur mon site http://wendling.xyz/ je souhaiterai supprimer le contenu du cadre de droite qui contient le rappel des catégories, les flux...
    Je souhaiterai remplacer cette zone par la visualisation d’images géré avec le plugin MySlippry: http://forum.pluxml.org/viewtopic.php?pid=52109#p52109
    Est il possible de réaliser cela? En vous remerciant pour les pistes que vous pourriez me proposer.
  • il faut modifier le fichier sidebar.php.

    ça devrait ressembler à ça:
    [== PHP ==]
    <?php if(!defined('PLX_ROOT')) exit; ?>
    
    	<aside class="w3-col l4 s12" role="complementary">
    		<div class="w3-card-4 w3-theme-light w3-margin w3-padding">
    
    		          <?php eval($plxShow->callHook("MySlippry")) ?>
    			
    		</div>
    	</aside>
    
  • Merci beaucoup, bonne soirée
  • Bonsoir,
    Pensez-vous faire une mise à jour pour pluxml 5.6?
  • michelw a écrit:
    Bonsoir,
    Pensez-vous faire une mise à jour pour pluxml 5.6?
    J'ai pas vu de pb en testant la 5.6
    Je corrigerai les bugs s'il y en a.
  • iceice Member
    Bonjour,

    Bravo et merci pour ce thème que je trouve super.

    Il y a 2 points que je n'arrive cependant pas à résoudre.

    Je n'ai pas activé les commentaires sur les articles. En bas de l'article, j'ai cela qui apparait :
    nNb0n6g4JWpF.png
    Je n'arrive pas à le supprimer. Peux tu me dire comment faire ?

    Les liens ne sont pas visibles. Ici, j'ai mis un lien sur site internet.
    kwTeF605nJ3L.png
    Rien ne permet de distinguer le lien.
    Lorsque je le survol, j'ai bien un souligné qui apparait
    qxjWuMTLsQgy.png
    J'aimerai par exemple que le lien soit identifié par une couleur de police différente. Peux tu me dire comment faire ?

    Te remerciant de ton aide,
    Cordialement.
    Stéphane.
  • je regarde ça
  • iceice Member
    Ok, cool.

    Merci.
  • Pour le flux RSS, il faut modifier le fichier "commentaires.php"
    et remplacer:
    [== PHP ==]
    	<!-- Link to RSS feed -->
    	<p><i class="fa fa-rss" aria-hidden="true"></i> <?php $plxShow->comFeed('rss',$plxShow->artId()); ?></p>
    
    
    par:
    [== Indéfini ==]
    	<!-- Link to RSS feed -->
    
    	<?php if($plxShow->plxMotor->plxRecord_arts->f('allow_com') AND $plxShow->plxMotor->aConf['allow_com']): ?>
    	<p><i class="fa fa-rss" aria-hidden="true"></i> <?php $plxShow->comFeed('rss',$plxShow->artId()); ?></p>
    	<?php endif; # Fin du if sur l'autorisation des commentaires ?>
    
    
    

    pour changer le style des liens, tu peux modifier le fichier "/css/w3-custom.css".
    [== CSS ==]
     /* unvisited link */
    a:link {
        color: red;
    }
    
    /* visited link */
    a:visited {
        color: green;
    }
    
    /* mouse over link */
    a:hover {
        color: hotpink;
    }
    
    /* selected link */
    a:active {
        color: blue;
    } 
    

    chez moi, j'ai juste (pour les liens présents dans un article ou une page statique):
    [== CSS ==]
    article section a {color:#af9483 }  /* w3-text-theme */
    

    sinon, regarde la doc: https://www.w3schools.com/css/css_link.asp
  • iceice Member
    Bonjour,

    Merci bien pour toutes ces explications.

    Pour le fil RSS des commentaires, j'ai modifié. Parfait, cela fonctionne.

    Pour les liens, j'ai fait les modifications dans le fichier "/css/w3-custom.css" mais le problème est que cela modifie aussi les liens des menus, titres, sidebar … bref c'est pas top.
    niqnutn a écrit:
    chez moi, j'ai juste (pour les liens présents dans un article ou une page statique):
    [== CSS ==]
    article section a {color:#af9483 }  /* w3-text-theme */
    
    Tu vas me trouver empoté mais je ne vois pas où faire cette modification uniquement pour les liens présents dans un article ou une page statique. Tu peux me dire ?

    T'en remerciant,
    Cordialement.
    Stéphane
  • ça dépend de ce que tu veux faire.
    [== CSS ==]
    article section a {color:#af9483 } 
    
    le code permet de modifier la couleur des liens que pour les articles et pages statiques.
    si tu mets uniquement:
    [== CSS ==]
    a {color:#af9483 } 
    
    c'est pour tous les liens.
  • iceice Member
    Ah, excuse-moi. Je n'avais pas capté qu'il fallait mettre devant les pseudos-classes link "article section" pour que cela ne s'applique qu'aux articles et pages statiques. Je suis vraiment une brelle en html/css. Mais, ça y est j'ai compris. Je quitte le mode boulet :D … pour l'instant.

    Te remerciant de ta patience,
    Cordialement.
    Stéphane.
Connectez-vous ou Inscrivez-vous pour répondre.