Thème w3css

niqnutn · juin 2016

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]

N'hésitez pas à donner votre avis.

Jos · juin 2016

Bonjour,

Merci pour le partage. J'aime bien la simplicité de ces thèmes. Sont t'ils valide W3C du coup?

niqnutn · juin 2016

pas vérifié mais il le sera.

vinc[E] · juin 2016

Super travail, le thème est très propre

niqnutn · juin 2016

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.

niqnutn · juin 2016

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.

niqnutn · juin 2016

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

niqnutn · juin 2016

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.

niqnutn · juin 2016

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

Kube17 · juin 2016

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...

Avez-vous une idée du problème?
-Kube17.

EDIT: En affichant la source de la page, voici comment le bouton est interprété:

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?

Francis · juin 2016

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.

Kube17 · juin 2016

Merci beaucoup Francis

Ça fonctionne correctement maintenant

niqnutn · juillet 2016

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

niqnutn · août 2016

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

oneil4 · octobre 2016

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.

bankai · octobre 2016

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.

niqnutn · octobre 2016

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

oneil4 · octobre 2016

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 ?

niqnutn · octobre 2016

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.

michelw · janvier 2017

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.

niqnutn · janvier 2017

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>

michelw · janvier 2017

Merci beaucoup, bonne soirée

michelw · février 2017

Bonsoir,
Pensez-vous faire une mise à jour pour pluxml 5.6?

niqnutn · février 2017

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.

ice · août 2017

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 :

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.

Rien ne permet de distinguer le lien.
Lorsque je le survol, j'ai bien un souligné qui apparait

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.

niqnutn · août 2017

je regarde ça

ice · août 2017

Ok, cool.

Merci.

niqnutn · août 2017

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

ice · août 2017

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

niqnutn · août 2017

ç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.

ice · août 2017

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

… pour l'instant.

Te remerciant de ta patience,
Cordialement.
Stéphane.

Thème w3css

Réponses