[thème] Masonic

Pierre

Une demande spéciale d'un thème classique avec bannière, colonne de droite et pied de page. Il se nomme Masonic sous sa version Wordpress originale.

Les pages de type catégorie sont semblables à l'accueil avec des boîtes de type masonry qui se chevauchent en "responsive" au besoin.

Jerry Wham

Cool. Merci pour le partage. Je vais m'en servir, c'est sûr.

Pierre

La question a été posée à propos de la grande image d'entête, elle fixe jusqu'à nouvel ordre. Plusieurs options s'offrent au webmestre, prenons l'exemple de simplement la changer pour une autre (fixe elle aussi).

Changer l'image dans le répertoire n'y fera rien, l'image est tirée (pour l'instant) d'un lien web du designer original, c'est pratique en attendant mais probablement pas la meilleure idée. L'image dans le thème est forcée dans le fichier header.php vers la ligne 70, on y voit le lien en question, suffit de le changer. Il serait suggéré d'utiliser le préfixe qui pige dans le thème <?php $plxShow->template(); ?> plutôt qu'un lien trop dur.

Pierre

Je parlais d'autres alternatives, la mienne serait probablement de créer une catégorie unique au nom évitant la confusion, du genre "grosse image en haut" où je mettrais un (ou plusieurs) article(s) avec une accroche et les autres champs simplement pour l'identifier. L'appel de l'image se ferait alors avec la fonction lastArtList() qui n'appellerait qu'un seul article et n'affichant que son image d'accroche. Si plusieurs "articles-images" existent, on peut même se payer une rotation aléatoire qui met un peu de vie avec une sélection qui change à chaque page.

webasso

Bonjour à tous
Je suis en test sur le thème masonic MERCI PIERRE de l'avoir transcrit de wp
je commence juste mais je rencontre quelques difficultés dont je ne sais pas me débrouiller : voir http://www.gite-des-aubes.com/zetest/

D'abord y a t-il un moyen de faire des modifs et quelles restent permanentes malgré les MàJ ultérieurs du thème ?

1/ comment changer la photo de l'entête ?
- depuis la partie admin cela ne semble pas possible, alors je suis aller par ftp dans le dossier du thème où se trouve l'image initiale (wp) /httpdocs/zetest/themes/theme-masonic/img et je l'ai remplacé par la mienne... mais une fois le navigateur rechargé, j'ai toujours l'image wp en entête
Comment faire ?

2/ Ma description du site est trop longue, c'est à quel endroit que je peux modifier le css ?

Merci d'avance pour votre aide

webasso

ice a écrit:

Bonjour,

webasso a écrit:

… 2/ Ma description du site est trop longue, c'est à quel endroit que je peux modifier le css ? …

J'ai eu le problème. bazooka07 m'a fait une bricole qui fonctionne parfaitement. Tu la trouveras ici

Cordialement.
Stéphane.

Stéphane, je ne suis pas sur que ça réponde à ma question car je ne cherche pas à mettre la description sur 2 lignes mais à allonger la largeur disponible pour la description

Pierre

Difficile de prévoir quels changements arriveront avec la prochaine version de PluXml mais les chances sont bonnes pour que très peu de choses soient à modifier le jour venu. Les quelques fonctions utilisées pour intégrer les articles seront rapidement étudiées et adaptées si nécessaire. Pour le reste, tout vient du thème, donc de la feuille de style qui n'a rien avoir avec les versions PluXml.

La description semble s'afficher au complet sous le titre, svp expliquer à quel endroit le problème se pose.

webasso

Bonjour
Le problème est là Pierre, en haut à droite sur l'impécran ci dessous

le mot Site est isolé du reste de la ligne
... je pense qu'il faut allonger la largeur avec le css, c'est dans le fichier stile.css du thème qu'il faut le faire ?

Jerry Wham

Ligne 861 du thème, supprimer la marge négative pour que le sous-titre soit écrit en entier...

Pour l'image d'entête, c'est toujours celle du designer. Plutôt que de passer par ftp, passe par l'administration de PluXml pour modifier les fichiers du thème. C'est peut-être un problème de droits qui fait que les modif faites par ftp ne sont pas prises en compte.

Si tu veux une coloration syntaxique du code, tu peux utiliser le plugin ace que j'ai écrit il y a peu (voir section plugins).

webasso

A propos de l'image de l'entête
Dans le code du header.php à partir de la ligne 68 j'ai:

[== PHP ==]
<div class="header-image">
                    <figure><img src="https://demo.themegrill.com/masonic/wp-content/themes/masonic/img/header.jpg" width="1350" height="500" alt="">
                        <div class="angled-background"></div>
                    </figure>
                </div>
                <!-- .header-image -->

                <div class="site-branding clear">
                    <div class="wrapper site-header-text clear">

                        <div class="logo-img-holder ">

                        </div>

                        <div class="main-header">
                            <h1 class="site-title"><a href="https://demo.themegrill.com/masonic/" rel="home"><?php $plxShow->mainTitle('link'); ?></a></h1>
                            <p class="site-description">
                                <?php $plxShow->subTitle(); ?>
                            </p>
                        </div>
                    </div>
                </div>

Sachant que j'ai nommé mon image du même nom (soit: header.jpg) que l'image initiale du thème qu'est-ce qu'il y a à modifier sur ce fichier header.php ?

Jerry Wham

À la place de

[== Indéfini ==]
https://demo.themegrill.com/masonic/wp-content/themes/masonic/img/header.jpg

mettre

[== Indéfini ==]
<?php echo $plxShow->urlRewrite('data/images/header.jpg');?>

si l'image est dans le dossier data/images
ou

[== Indéfini ==]
<?php $plxShow->template(); ?>/img/header.jpg

si elle est dans le dossier images du thème

Jerry Wham

À la place de

[== Indéfini ==]
<h1 class="site-title"><a href="https://demo.themegrill.com/masonic/" rel="home"><?php $plxShow->mainTitle('link'); ?></a></h1>

mettre

[== Indéfini ==]
<h1 class="site-title"><a href=<?php echo $plxUtils::getRacine();?>" rel="home"><?php $plxShow->mainTitle('link'); ?></a></h1>

Je suis étonné que Pierre n'ait pas fait cette modif d'emblée

Pierre

Merci à Jerry Wham pour les réponses, c'est un habitué de mes thèmes en plus.

C'est important pour les nouveaux de voir quelque chose quand le thème est fraîchement installé, sans donner des instructions compliquées qui demandent de mettre quelque chose dans /data. Comme j'expliquais, plusieurs options sont possibles, une image fixe tirée du répertoire serait probablement le premier choix de plusieurs mais le dernier choix dans mon cas.

Pour la question du sous-titre qui se coupe, je regarderai le CSS quand j'aurai quelques minutes. C'est une erreur de designer qui n'a pas tout prévu au niveau responsive. C'est le titre qui influence la longueur disponible du sous-titre, une économie de temps qui va nous faire payer le prix. On trouvera bien un moyen.

webasso

... Que ce soit par ftp ou directement en modifiant le thème dans la partie admin, Il doit y avoir un problème car je n'obtiens que l'image de l'entête, tout le site a disparu !
Mais quel problème ?

Pierre

C'est le risque qu'on prend quand la modification est faite en direct sur le site dans l'admin. J'ai pris l'habitude de travailler avec Notepad++ en utilisant son plugin ftp qui permet d'éditer le texte d'un fichier et de sauvegarder en une seconde. Quand on casse tout, un petit CTRL-Z et on recule d'un pas (ou plus) pour revoir le site.

Pour revoir l'admin d'un site qui n'affiche plus, il y a toujours le nom-du-site/core/admin pour revenir à l'interface.

webasso

Merci Pierre j'avais la main sur la partie admin du site que j'avais laissé ouverte ... au cas où justement
et j'utilise aussi ta méthode (où approximativement) puisque j'ai Notepad++ d'un côté et Filezilla de l'autre, je modifie mon fichier sur le dd et j'envoie avec Fifezilla et je peux revenir en arrière car Notepad++ reste ouvert jusqu'à ce que ce soit concluant
Question: maintenant que la dernière modif s'est faite en modifiant le thème du site par la partie admin est-ce qu'en téléchargeant le fichier header.php avec Filezilla en remplacement de l'autre, suffit pour revenir à zéro, ou faut-il passer par le site ?

Et sinon pour en revenir à ma question initiale, quel est le problème avec cette image avec le code inséré ?

Jerry Wham

Arg, c'est ma faute. Il ne faut pas écrire $plxUtils mais plxUtils tout court... Désolé :8

Jerry Wham

Ligne 861 du thème, supprimer la marge négative pour que le sous-titre soit écrit en entier...

C'est la ligne 864 du fichier css/style.css qu'il faut supprimer pour que le sous-titre s'affiche correctement.

Pierre

Superflu de s'encombrer de Filezilla dans le cas d'édition d'un fichier, Notepad++ a un plugin NppFTP qui fait cette partie du travail avec un simple CTRL-S comme tous les autres logiciels. J'y passe des heures par jour, l'économie de temps est indéniable.

Toutes nos modifications ici ne touchent que le thème, on laisse les fichiers "racine" bien tranquilles juste au cas où le thème changerait encore. Le fichier header.php fait partie du thème, sa dernière version présente sera celle qui démarre. Peu importe comment les modifications sont effectuées, de l'admin ou de l'extérieur, le fichier présent démarre, advienne que pourra. Revenir à zéro, ça se fait en rechargeant le fichier original téléchargé de Ressources et dézippé il y a quelques jours.

L'image insérée dans le header.php original est simplement un point de départ. Il est suggéré de changer ce chemin web pour un lien plus "local" qui peut être le répertoire d'images du thème ou le sous-répertoire /medias dans /data, c'est un choix personnel, il n'y a pas de bonne ou de mauvaise façon ici. Jerry Wham a présenté les deux méthodes très clairement, reste plus qu'à choisir.

Je verrai pour le CSS, le dernier sujet.

Pierre

J'opte pour une modification du CSS en dur pour simplifier le cas, les puristes nous dirigeraient vers le fichier style.css mais une mise à jour future viendrait tout écraser. Nous sommes dans header.php, aussi bien y rester. je donne la partie "main-header" au complet avec deux modifications sous forme d'injection de style:

[== PHP ==]
						<div class="main-header">
							<h1 class="site-title" style="width:100%;">
								<a href="https://demo.themegrill.com/masonic/" rel="home">
									<?php $plxShow->mainTitle('link'); ?>
								</a>
							</h1>
							<p class="site-description" style="float:left; margin-top: 10px;">
								<?php $plxShow->subTitle(); ?>
							</p>
						</div>

Pierre

Désolé, je vois que Jerry Wham avait déjà offert la version "des puristes" de modifier la feuille de style. Rien de mal à choisir cette méthode, évidemment.

webasso

Merci à tous,
merci à Jerry Wham ce que tu proposais marche
et ce que propose Pierre aussi, tout est rentré dans l'ordre

webasso

Pierre a écrit:

Superflu de s'encombrer de Filezilla dans le cas d'édition d'un fichier, Notepad++ a un plugin NppFTP qui fait cette partie du travail avec un simple CTRL-S comme tous les autres logiciels.

Je ne vois pas dans Notepad++ le plugin en question... Mais en fait c'est peut-être parce que c'est pas Notepad++ que j'ai sur cette ordi mais son équivalent pour Linux: Geany
Sais tu Pierre si en actionnant la première ligne j'obtiendrais l'équivalent de NppTTP (j'en doute mais...) ?

webasso

Pierre est-ce raisonnable de te demander si c'est possible qu'à la place de l'image statique de l'entête on puisse inclure un carrousel de 3-4 photos qui défilent-apparaissent l'une après l'autre automatiquement ?

Pierre

Je me rappelle avoir un jour cherché un équivalent sous Linux, avec comme premier critère d'y voir un équivalent de NppFTP d'une façon ou d'une autre. Les éditeurs très étoffés abondent mais peu semblaient offrir cette caractéristique, j'avais opté pour Bluefish. Ceci dit, je me rappelle surtout que c'était loin d'être clair dans les instructions. J'y étais arrivé tout de même mais les circonstances m'ont ramené sous Windows et Notepad++ est à nouveau mon outil de choix. Certain que d'autres outils existent, possiblement des meilleurs, mais je n'ai pas cherché depuis longtemps. Pas tous les programmeurs partage mon appétit pour la sauvegarde immédiate d'un fichier en production, c'est probablement pourquoi cette fonction n'est pas habituelle.

Pierre

Un carrousel, c'est toute une aventure à incorporer dans un thème existant. C'est habituellement un critère de sélection avant de commencer. Mon option de d'utiliser une fonction qui tire les images d'accroche est certainement plus simple. Reste à choisir si on veut:

1- tirer cette image d'une catégorie à part, simplement pour piger une image dans les accroches des "faux" articles qui lui sont assignés
2- utiliser tout bonnement l'image d'accroche des articles réguliers du site

Dans les deux options, la fonction à utiliser serait lastArtList(), et dans les deux cas il est possible de faire une rotation aléatoire pour faire plus vivant et ne pas toujours voir la même image.

Le deuxième choix implique le critère maintenant célèbre parmi mes thèmes, celui de l'image d'accroche obligatoire avec tous les articles, c'est à prendre ou à laisser...

D'autres options existent mais je me limiterais à celles-ci pour rester dans la simplicité. Sinon, de retour au catalogue de thèmes.

webasso

... Pierre, j'ai utilisé le terme carrousel parce que je ne savais pas comment nommer la fonction adéquat

Mon idée c'est d'utiliser quelques images spécifiques à l'entête et qui tournent sur elles-mêmes...Parce qu'utiliser les images des articles ça va sûrement alourdir le site dans sa consultation et impliquer que ces images soient de taille acceptable pour qu'elles soient bien nettes (celle du thème fait 1350x500 px)

Il semble d'après ce que je comprends que c'est l'option 1 qui convienne, c'est ça ?
Comment la mettre en oeuvre ?

Pierre

Le mot carrousel est le bon terme si les images changent sans rafraîchir la page. La taille des images, accroche ou pas, sera toujours un facteur. Il suffit de charger les images avec une taille raisonnable et le roulement se fera sans problèmes. Un véritable 1350X500 est tout à fait acceptable, le danger est de charger une gigantesque image qui se "redimensionne" pour entrer dans le gabarit de 1350X500.

La méthode 1 demande de créer une catégorie bidon du genre "grosse image" et d'y assigner quelques articles (tout aussi bidon) avec un titre et un contenu qui n'apparaîtront nulle part mais une image d'accroche. Ensuite c'est une lastArtList() classique avec la catégorie (son numéro) comme paramètre.

webasso

Pierre a écrit:

La méthode 1 demande de créer une catégorie bidon du genre "grosse image" et d'y assigner quelques articles (tout aussi bidon) avec un titre et un contenu qui n'apparaîtront nulle part mais une image d'accroche. Ensuite c'est une lastArtList() classique avec la catégorie (son numéro) comme paramètre.

Ok partons avec cette méthode 1
je vais bien choisir 3 images et les préparer
Par contre comment c'est une lastArtList(), comment ça se met en oeuvre ?

Pierre

[== PHP ==]
                <div class="header-image">
                    <figure>
			<?php $plxShow->lastArtList('<img src="#img_url" width="1350" height="500" alt=""img_alt">',1,'99',, $sort='random'); ?>
                        <div class="angled-background"></div>
                    </figure>
                </div>

si la catégorie avait par exemple le numéro 99

Jerry Wham

Le changement ne se verra qu'à chaque chargement de page...