nouveau thème : help !

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

Réponses

  • kowalskykowalsky Member
    février 2017 modifié
    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
  • bg62bg62 Member
    février 2017 modifié
    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à !
    @+
  • kowalskykowalsky Member
    février 2017 modifié
    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.
  • 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 :)
  • 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 !!!
    @+
  • 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)
  • 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 :)
  • kowalskykowalsky Member
    février 2017 modifié
    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.
  • bg62bg62 Member
    février 2017 modifié
    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 :)
    @+
  • 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 :)
  • 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 '
    @+
  • bg62bg62 Member
    février 2017 modifié
    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 ' :
    GBsrafCNjiI_mauve.jpg
    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 ...
  • kowalskykowalsky Member
    février 2017 modifié
    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
  • 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 à !
    diplome-2005-bachelier-29423.gif
  • bg62bg62 Member
    mars 2017 modifié
    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
Connectez-vous ou Inscrivez-vous pour répondre.