nouveau thème : help !

bg62 · 12/02/2017 19:16:16

Bonjour wink
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 · 12/02/2017 21:16:12

Un premier petit retour smile

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 wink

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 smile

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 smile

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

Dernière modification par kowalsky (12/02/2017 21:31:52)

bg62 · 12/02/2017 22:01:47

merci wink
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>

~~où et comment placer le lien vers ' index.php' ?~~
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 smile

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

~~??? dans quel fichier ?~~ = OK j'ai trouvé smile
au moins pour cette erreur là !
@+

Dernière modification par bg62 (13/02/2017 00:18:36)

kowalsky · 13/02/2017 00:29:30

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"> smile

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

Dernière modification par kowalsky (13/02/2017 00:31:35)

kowalsky · 13/02/2017 00:36:39

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

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 smile

bg62 · 13/02/2017 01:13:43

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 ! smile
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 · 13/02/2017 09:56:09

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 · 13/02/2017 12:38:31

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 smile

kowalsky · 17/02/2017 22:38:44

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

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.

Dernière modification par kowalsky (17/02/2017 22:43:25)

bg62 · 18/02/2017 12:03:34

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 smile
@+

Dernière modification par bg62 (18/02/2017 16:11:37)

kowalsky · 18/02/2017 12:26:46

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 smile

bg62 · 18/02/2017 16:16:53

ok, alors merci quand même wink
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 · 18/02/2017 17:38:39

regarde dans la doc:
http://devzone.pluxml.org/index.php?pag … w-subTitle
http://devzone.pluxml.org/index.php?pag … -mainTitle

bg62 · 18/02/2017 18:43:04

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 ?
smile

ensuite au niveau des fameux ' traits noirs ' :
mauve
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 ...

Dernière modification par bg62 (18/02/2017 19:02:53)

kowalsky · 18/02/2017 21:01:27

Pour le "alt", tu l'avais dans ma solution, puisque l'image et le titre étaient liés via <?php $plxShow->mainTitle('link'); ?> smile 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 {
~~border-top: 1px solid #444;~~

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

Dernière modification par kowalsky (18/02/2017 21:11:53)

bg62 · 18/02/2017 22:09:03

super !!!
vous êtes TOP tous les deux smile
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 à !
prof

bg62 · 07/03/2017 18:12:10

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

Dernière modification par bg62 (07/03/2017 18:41:23)

PluXml.org

#1 12/02/2017 19:16:16

nouveau thème : help !

#2 12/02/2017 21:16:12

Re : nouveau thème : help !

#3 12/02/2017 22:01:47

Re : nouveau thème : help !

#4 13/02/2017 00:29:30

Re : nouveau thème : help !

#5 13/02/2017 00:36:39

Re : nouveau thème : help !

#6 13/02/2017 01:13:43

Re : nouveau thème : help !

#7 13/02/2017 09:56:09

Re : nouveau thème : help !

#8 13/02/2017 12:38:31

Re : nouveau thème : help !

#9 17/02/2017 22:38:44

Re : nouveau thème : help !

#10 18/02/2017 12:03:34

Re : nouveau thème : help !

#11 18/02/2017 12:26:46

Re : nouveau thème : help !

#12 18/02/2017 16:16:53

Re : nouveau thème : help !

#13 18/02/2017 17:38:39

Re : nouveau thème : help !

#14 18/02/2017 18:43:04

Re : nouveau thème : help !

#15 18/02/2017 21:01:27

Re : nouveau thème : help !

#16 18/02/2017 22:09:03

Re : nouveau thème : help !

#17 07/03/2017 18:12:10

Re : nouveau thème : help !

Pied de page des forums