nouveau thème : help !

bg62 · février 2017

Bonjour

Je me suis lancé dans de petites modifications de thème ' navan ' de Stéphane ( au moins ça me fait apprendre et découvrir certaines choses ), mais là où j'en suis arrivé je rencontre encore une foule d'erreurs ^^
donc = SOS !
la demo est ici :
http://refok.fr/navanbg/index.php
( je supprimerai ce lien après, quand le thème sera OK, pour le mettre à disposition de tous )
Alors, maintenant, je vous laisse regarder, triturer le code, le visuel, les pages ... et trouver les défauts et ... me donner des solution ( il y a du boulot !!! )
grands mercis à l'avance
bg

des exemples:
déjà lorsque l'on clique sur 'rubrique 1 " apparait en haut de la sidebar un trait noir que je ne parviens pas à supprimer ..., comment rendre cliquable ( vers la racine ) l'image en haut de la sidebar ?, etc etc ...

kowalsky · février 2017

Un premier petit retour

bg62 a écrit:

déjà lorsque l'on clique sur 'rubrique 1 " apparait en haut de la sidebar un trait noir que je ne parviens pas à supprimer ...

Ça vient de ton... footer

il y a un problème de positionnement de celui-ci puisqu'il se retrouve en haut et bas de ta page. Supprime celui que tu as mis entre les balises </section> et </main> et cela devrait s'améliorer un peu

Concernant le choix des couleurs du fond et celui des polices utilisées, je t'invite à utiliser le site http://contrast-finder.tanaguru.com/form.html pour t'assurer du bon contraste et de l'accessibilité de tes choix.
theme.css lignes 28 et 31
a {
color: #444;
}
a:hover {
color: #747474;
}

Quand au logo cliquable, il manque juste le lien vers la page d'accueil

Et si tu te poses la question de savoir pourquoi la bordure de ta barre de navigation est noire et blanche, c'est parce que tu as encadré dans ton footer.php le code <div class="responsive-menu">...</div> de 2 <hr>, supprime les

bg62 · février 2017

merci

pour le logo, pour l'instant j'ai ceci :

[== Indéfini ==]
<div id="logo1"> 
	<img src="<?php $plxShow->template(); ?>/img/photos.png"  title="<?php $plxShow->lang('PLUXML_DESCRIPTION') ?>"alt="notre site" /> </div>

[del]où et comment placer le lien vers ' index.php' ?[/del]
voici ce que j'ai mis finalement:

[== Indéfini ==]
	<div id="logo1"> 
	<a  href="index.php" rel="external"><img src="<?php $plxShow->template(); ?>/img/photos.png"  title="<?php $plxShow->lang('PLUXML_DESCRIPTION') ?>"alt="notre site" /></a>
	</div>

MAIS j'aimerais maintenant réussir à générer la balise 'alt' pour quelle affiche le ' titre du site '
je vais aller fouiner donc en plus du côté du footer comme tu me le dis

Supprime celui que tu as mis entre les balises </section> et </main> et cela devrait s'améliorer un peu smile

[del]??? dans quel fichier ?[/del] = OK j'ai trouvé

au moins pour cette erreur là !
@+

kowalsky · février 2017

Il y a plusieurs fichiers à modifier :
archives.php
article.php
categorie.php
erreur.php
static.php
tags.php

Actuellement tu as un <footer class="footer" role="contentinfo">¶</footer> en trop juste avant </section></main></div>

Pour le lien sur le logo, la version simple étant :

<div id="logo1">
<a title="Accueil" href="index.php"><img src="<?php $plxShow->template(); ?>/img/photos.png" title="<?php $plxShow->lang('PLUXML_DESCRIPTION') ?>"alt="notre site" /></a>
</div>

La version moins simple étant de supprimer la div "logo1" et de l'incorporer via CSS dans le <h1> de la partie <header role="banner">

Je te laisse tester les deux et faire les corrections nécessaires dans le CSS quel que soit ton choix.

kowalsky · février 2017

rel="external" n'a rien à faire dans ton lien qui pointe vers la racine de ton site, et non vers un autre site

bg62 a écrit:

MAIS j'aimerais maintenant réussir à générer la balise 'alt' pour quelle affiche le ' titre du site '

alors c'est la version moins simple que je te proposais qu'il te faut

bg62 · février 2017

kowalsky a écrit:

rel="external" n'a rien à faire dans ton lien qui pointe vers la racine de ton site, et non vers un autre site

bg62 a écrit:

MAIS j'aimerais maintenant réussir à générer la balise 'alt' pour quelle affiche le ' titre du site '

alors c'est la version moins simple que je te proposais qu'il te faut

1 - ok 'external' était une erreur de copier/coller = bien vu !

2 - pour les fichiers à modifier je pense que ce doit être bon ...
3 - et ensuitel'histoire de la div à paser en css alors = je rame
Si tu as le temps de voir quel codage il faudrait mettre ce serait top !!!
@+

kowalsky · février 2017

Pour cela merci de recopier l'intégralité de ton fichier sidebar.php (par contre la semaine de travail recommençant, tu n'auras pas de retour avant quelques temps)

bg62 · février 2017

kowalsky a écrit:

Pour cela merci de recopier l'intégralité de ton fichier sidebar.php (par contre la semaine de travail recommençant, tu n'auras pas de retour avant quelques temps)

ok voici le sidebar.php:

[== Indéfini ==]
<?php if(!defined('PLX_ROOT')) exit; ?>
	<aside class="aside col sml-0 med-3" role="complementary">
	<div id="logo1"> 
	<a  href="index.php"><img src="<?php $plxShow->template(); ?>/img/photos.png"  title="<?php $plxShow->lang('PLUXML_DESCRIPTION') ?>"alt="notre site" /></a>
	</div>
		<div id="logo1"> 
		<header role="banner">
			<h1 class="no-margin"><?php $plxShow->mainTitle('link'); ?></h1>
			<h2 class="h5 no-margin"><?php $plxShow->subTitle(); ?></h2>
		</header>
		<h3>
			<?php $plxShow->lang('CATEGORIES'); ?>
		</h3>
		<ul class="cat-list unstyled-list">
			<?php $plxShow->catList('','<li id="#cat_id"><a class="menu3" "#cat_status" href="#cat_url" title="#cat_name">#cat_name</a> (#art_nb)</li>'); ?>
		</ul>
		<h3>
			<?php $plxShow->lang('LATEST_ARTICLES'); ?>
		</h3>
		<ul class="lastart-list unstyled-list">
			<?php $plxShow->lastArtList('<li><a class="menu3" "#art_status" href="#art_url" title="#art_title">#art_title</a></li>'); ?>
		</ul>
		<h3>
			<?php $plxShow->lang('TAGS'); ?>
 </h3>
		<ul class="tag-list">
			<?php $plxShow->tagList('<li class="tag #tag_size"><a class="menu3" "#tag_status" href="#tag_url" title="#tag_name">#tag_name</a></li>', 20); ?>
		</ul>
		<h3>
			<?php $plxShow->lang('LATEST_COMMENTS'); ?>
		</h3>
		<ul class="lastcom-list unstyled-list">
			<?php $plxShow->lastComList('<li><a class="menu3" href="#com_url">#com_author '.$plxShow->getLang('SAID').' : #com_content(34)</a></li>'); ?>
		</ul>
		<h3>
			<?php $plxShow->lang('ARCHIVES'); ?>
		</h3>
		<ul class="arch-list unstyled-list">
			<?php $plxShow->archList('<li id="#archives_id"><a class="menu3"" #archives_status" href="#archives_url" title="#archives_name">#archives_name</a> (#archives_nbart)</li>'); ?>
		</ul>
	</aside>

@+ et encore merciS à l'avance

kowalsky · février 2017

le temps passe vite... voici la version moins simple

1) modifie le début du code de sidebar.php jusqu'à ton premier <h3> comme suit :

[== PHP ==]
<?php if(!defined('PLX_ROOT')) exit; ?>

	<aside class="aside col sml-0 med-3" role="complementary">
		<header class="header sml-text-center med-text-left" role="banner">
			<h1 class="no-margin logo"><?php $plxShow->mainTitle('link'); ?></h1>
			<h2 class="h5 no-margin"><?php $plxShow->subTitle(); ?></h2>
		</header>

2) ajoute ce code CSS dans theme.css

[== CSS ==]
@media (min-width: 1024px) {
	h1.logo{
		padding-top: 128px;
	}
	.header .maintitle {
		background-image: url('../img/logo.png');
		background-repeat: no-repeat;
		height: 128px;
		width: auto;
		padding-top: 128px;
	}
	.header .maintitle:hover {
		background-image: url('../img/logo180.png');
	}
}

(j'ai ajouté un mediaquery car le logo a un comportement bizarre en mode adaptatif, et comme je n'ai pas trouvé pourquoi, le plus simple est de le faire disparaitre)

3) renomme ton fichier "photos.png" en "logo.png"
4) duplique le et renomme la copie en "logo180.png" (désolé l'usage de la propriété CSS "transform" ne fonctionne pas dans ce cas)
5) avec un logiciel de dessin, applique un retournement vertical à "logo180.png"

et normalement cela répond à ton besoin.

bg62 · février 2017

merci, je viens de tester, l'affichage se fait MAIS la 'rotation' de l'image n'est plus du tout la même, apparemment 180° en une seule fois alors que en ligne ...ça tourne fou, ce que je voudrais conserver

@+

kowalsky · février 2017

Oui, c'est normal car ce que je te propose utilise juste 2 images de fond inversées pour le logo, alors que via la propriété CSS "transform" tu appliquais une rotation à l'image directement au niveau de la page.

Je ne sais pas faire mieux, mais c'était juste pour t'apporter un début de solution à ta demande. Peut-être que d'autres auront une autre proposition

bg62 · février 2017

ok, alors merci quand même

pourrais-tu revoir, pour la question 'initiale' :

MAIS j'aimerais maintenant réussir à générer la balise 'alt' pour quelle affiche le ' titre du site '

même avec le script d'origine, cela serait bien suffisant ...

[== Indéfini ==]
<div id="logo1"> 
	<a  href="index.php" rel="external"><img src="<?php $plxShow->template(); ?>/img/photos.png"  title="<?php $plxShow->lang('PLUXML_DESCRIPTION') ?>"alt="notre site" /></a>
	</div>

title = ok ça va
alt = là je netrouve pas la ligne de commande pour afficher le ' titre du site '
@+

niqnutn · février 2017

regarde dans la doc:
http://devzone.pluxml.org/index.php?page=plxShow-subTitle
http://devzone.pluxml.org/index.php?page=plxShow-mainTitle

bg62 · février 2017

voici où j'en suis :

[== Indéfini ==]
	<a class="logo1" href="index.php"><img src="<?php $plxShow->template(); ?>/img/photos.png" 
	title="<?php $plxShow->lang('PLUXML_DESCRIPTION') ?>"alt="<?php $plxShow->mainTitle() ?>" /></a>

et pour la CSS:

[== CSS ==]
 .logo1  img:hover{
	  transform: rotate(720deg);
    transition: all 1s ease 0s;
}

mais si l'affichage est bien ce que je recherchais, pour la css je ne sais pas si la seconde ligne est valable car je ne connais pas ces paramètres ?

ensuite au niveau des fameux ' traits noirs ' :

là je coince, les 'hr' ( eux ils encadre la barre de navigation ... je pense ! ) n'en sont pas responsables et je ne vois pas comment les supprimer ...

kowalsky · février 2017

Pour le "alt", tu l'avais dans ma solution, puisque l'image et le titre étaient liés via <?php $plxShow->mainTitle('link'); ?>

D'ailleurs, je me demande si pour le logo, une image gif animée en :hover ne pourrai pas faire la rotation que tu veux au final.

A noter que dans ta dernière version c'est la description du site que tu affiches au survol de l'image et non le titre de celui-ci :

<a class="logo1" href="index.php"><img src="<?php $plxShow->template(); ?>/img/photos.png"
title="<?php $plxShow->mainTitle() ?>" alt="<?php $plxShow->mainTitle() ?>" /></a>

Pour les barres noires, c'est dans theme.css ligne 188 que ça se passe :
.footer {
[del]border-top: 1px solid #444;[/del]

Le trait du bas venant de footer.php, et celui du haut parce que tu as du code en trop ailleurs, cf la première partie de mon commentaire #4

bg62 · février 2017

super !!!
vous êtes TOP tous les deux

Il ne me reste plus qu'une seule chose, je pense, c'est au niveau des " tags " dans la sidebar:
selon les cas ils essaient de d'afficher à quatre par exemple, mais sur une seule ligne, du coup = pas joli
il faudrait que j'arrive à pouvoir en afficher ( au hasard 5 ou6 ou ... ) et que cela tienne par paquets de trois maximum ( par exemple ) et passe ensuite automatiquement à la ligne ...
@mitiés
bg

en tous cas au moins ... j'apprends l à !

bg62 · mars 2017

Bon, ok, le thème est terminé ET dispo !
MerciS à TouS ...
je viens de le mettre ici :Thème pour PluXml
... je n'arrive pas à le placer dans les " ressources " = SI quelqu'un pouvait s'en occuper ce serait plus que sympa !
@+
bg

nouveau thème : help !

Réponses