[Thème] Premium

chrisschriss Membres
janvier 2015 modifié dans Vos créations
Bonjour,
A voir mon prochain thème pour PluXml. Toujours en construction.

HTML5 + CSS3 + JS
site Responsive
Menu déroulant responsive utilisant [del]isotope.js[/del] Superfish.js (mais me cause 2 erreurs en rajoutant des ul et li)
Slider avec camera.js
Etc...

[del]Pour l'instant que la page Accueil et les pages services qui fonctionnent.
Démo en test ici: http://chorale.shost.ca/testa/[/del]

Ce nouveau thème, Premium, en démo et en téléchargement ici
«1

Réponses

  • Vraiment pas mal. C'est très pro comme rendu.
    Ligne 58 environ de ton code source final (rendu sans javascript) tu as des balises en trop :
    </li>
    </ul>
    
    juste après le sub-menu.
  • Jerry Wham a écrit:
    Vraiment pas mal. C'est très pro comme rendu.
    Ligne 58 environ de ton code source final (rendu sans javascript) tu as des balises en trop :
    </li>
    </ul>
    
    juste après le sub-menu.

    Malheureusement je sais, Mais pas d'oÙ vient l'erreur, je supposais de superfish Mais non...
    Cela vient il de ce code:
    [== HTML ==]
    <nav role="navigation" class="nav put-right">
                            <ul class="sf-menu">
                                        <?php $plxShow->staticList($plxShow->getLang('HOME'),'<li><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>'); ?>
                                        <?php
                                          $menu = array('001', '002'); // lister ici les catégories à afficher.
                                          foreach($menu as $id_cat) {
                                              $plxShow->catList('','<li>',$id_cat);
                                              echo "\n";
                                              $plxShow->catList('','<a class="#cat_status" href="#cat_url" title="#cat_name">#cat_name</a>',$id_cat); //affiche le lien vers la catégorie
                                              echo "\n";
                                                  echo "<ul>\n";
                                                      $nb_item = 5; // nombre d'articles maxi dans le menu
                                                      $plxShow->lastArtList('<li><a href="#art_url" title="#art_title">#art_title</a></li>',$nb_item,$id_cat); //liste les articles de cette catégorie
                                                      //$nbArtCat = $plxShow->nbAllArt('',$id_cat);
                                                      if($nb_item>$nbArtCat){ // si le nombre d'articles de la catégorie est supérieur à $nb_item, on affiche un lien "Voir tous les articles"
                                                          $plxShow->catList('','<li><a href="#cat_url" title="Voir tous les articles de la cat&eacute;gorie #cat_name">Voir tous les articles</a></li>',$id_cat);
                                                      }else{}
                                              echo "\n";
                                                  echo "</ul>\n";
                                              echo "</li>\n";
                                          } 
                                          ?>
                            </ul>
                        </nav>   
    
    Je l'utilise déjà sur un autre site où je n'ai pas cette erreur ! Code pris sur le site Samare
    http://www.daniel-rolland.com/samare/article8/menu-listant-les-articles-classes-par-categories
  • chrisschriss Membres
    novembre 2014 modifié
    Bonjour,
    bon j'ai trouvé mon erreur, J'ai indiqué dans le code le nombre de catégorie à afficher:
    [== Indéfini ==]
    <?php
        $menu = array('001', '002'); // lister ici les catégories à afficher.
    
    mais une seule des deux était active, du moins avait des articles l'autre non. Dés la création d'un article, la catégorie s'est affichée et donc plus d'erreur.
    Une bonne chose de réglée!!
  • Cool. Mais il ne faudrait pas que ça s'affiche si la catégorie est vide.
    Ça serait bien aussi de styliser les boutons.
  • Bon matin,
    Jerry Wham a écrit:
    Cool. Mais il ne faudrait pas que ça s'affiche si la catégorie est vide.
    Il aurait suffi que Je l,enlève le '002' dans le code
    [== Indéfini ==]
    <?php
        $menu = array('001', '002'); // lister ici les catégories à afficher.
    
    Ça serait bien aussi de styliser les boutons.
    ça non, je veux que cela reste le plus simple (graphisme) possible :)
  • Pour les boutons, tu peux faire simple et en accord avec le reste du design. Je trouve que celui des boutons d'origine jure avec le reste. De plus, tu aurais un rendu identique entre chaque navigateur.
  • Jerry Wham a écrit:
    Pour les boutons, tu peux faire simple et en accord avec le reste du design. Je trouve que celui des boutons d'origine jure avec le reste. De plus, tu aurais un rendu identique entre chaque navigateur.
    Je ne comprends pas, j'ai 7 navigateurs différents et je ne vois pas de différence... ah si je n'ai pas essayé sous IE9
  • DanDan Membres
    Très joli thème, très lisible et agréable, bravo
    Sera t'il partagé en téléchargement ?

    Merci déjà pour la vision.
  • Merci Dan...
    Bien sûr qu'il seras partagé... mais cette semaine je travaille au ralenti donc pour la sorti du thème........pas de dates!
  • DanDan Membres
    Super merci !
    Et encore bravo pour ce très beau thème.
  • J'ai vraiment du mal à croire que le même moteur de blog puisse offrir des rendus de thèmes si différents. C'est vraiment spectaculaire, bravo.
  • chrisschriss Membres
    décembre 2014 modifié
    Bonjour,
    je pensais mettre en téléchargement cette semaine ce nouveau thème, mais suite à un gros problème sur un ordi ( le disque dur se remplissait de 5 à 10 Gigas par semaine sans rien télécharger :mad: ) je prends du retard.
    Mais vous pouvez suivre l'avancement du démo à l'Url donné au 1er post.
  • Bonjour et bonne année à tous,

    en ce début d'année, mon nouveau thème pour PluXml (Premium) est enfin terminé.

    en démo et en téléchargement ici
  • bg62bg62 Membres
    @chriss : comment est réalisé le slider de ce thème ?
    apparemment il n'y a pas son 'code' dans le zip ...
    @+
  • chrisschriss Membres
    janvier 2015 modifié
    Bonjour et bonne année
    bg62 a écrit:
    @chriss : comment est réalisé le slider de ce thème ?
    apparemment il n'y a pas son 'code' dans le zip ...
    @+
    avec camera.js
    le code est dans home (seule page à avoir le slider)
    [== HTML ==]
    <div class="camera-wrapper">
        <div id="camera" class="camera-wrap">
            <div data-src="../testa/themes/primex/images/index_slide01.jpg">
                <div class="fadeIn camera_caption">
                    <h2 class="text_1 color_1">Les solutions que vous désirez!</h2>
                    <a class="btn_1" href="#">Plus d'info</a>
                </div>
            </div>
           <div data-src="../testa/themes/primex/images/index_slide02.jpg">
                <div class="fadeIn camera_caption">
                    <h2 class="text_1 color_1">Lorem ipsum dolor sit!</h2>
                    <a class="btn_1" href="#">Plus d'info</a>
                </div>
            </div>
            <div data-src="../testa/themes/primex/images/index_slide03.jpg">
                <div class="fadeIn camera_caption">
                    <h2 class="text_1 color_1">Lorem ipsum dolor sit amet, consectetur!</h2>
                    <a class="btn_1" href="#">Plus d'info</a>
                </div>
            </div>
        </div>
    </div>
    

    et si tu veux des modifications; voir dans script.js
    [== JavaScript ==]
     if(camera.length > 0){
            camera.camera(
                {
                    autoAdvance: true,
                    height: '31.25%',
                    minHeight: '200px',
                    pagination: false,
                    thumbnails: false,
                    playPause: false,
                    hover: false,
                    loader: 'none',
                    navigation: true,
                    navigationHover: false,
                    mobileNavHover: false,
                    fx: 'random'
                }
            );
    

    EDIT: voir camera.js ici
  • bg62bg62 Membres
    merci ;)
    et surtout merci pour le lien vers le script, je pensais le faire avec un plugin .... mais du coup ... ?
  • pour ceux que cela peut interresser
    Les options des fichiers .js sont dans script.js au lieu d'être éparpillés dans le ou les fichiers footer.php
  • Superbe thème : encore une belle réalisation sur Théma ! !

    Et le thème de Théma, tu ne le proposes pas en téléchargement ?
  • ComputingFroggy a écrit:
    Superbe thème : encore une belle réalisation sur Théma ! !

    Et le thème de Théma, tu ne le proposes pas en téléchargement ?

    Il faudrai....Mais pas mal de modifs à faire, à l'origine je l'ai créé pour ce site sans penser à le distribuer. :rolleyes:
  • J'aime beaucoup ton thème mais une remarque : Ce serait plus esthétique que les "lire plus" soient alignés :/

    mini_818968Capture.jpg
  • chrisschriss Membres
    février 2015 modifié
    Bonjour,
    joebart a écrit:
    J'aime beaucoup ton thème mais une remarque : Ce serait plus esthétique que les "lire plus" soient alignés :/

    http://img11.hostingpics.net/thumbs/mini_818968Capture.jpg

    [del]Oui, mis cela dépends du nombre de ligne du texte au dessus. La hauteur du texte est de 120px. Si tu désires mettre plus de lignes il faut modifier cette hauteur[/del]
    Bon j'ai revu le code est là c'est dû que j'ai mis une liste <ul> dans le block et j'ai oublié de mettre un maxheight dans l'élément <ul>
    le code corrigé:
    [== XHTML ==]
    <!--<p class="text_3 color_2 maxheight">-->
                        <ul class="list_2 text_3 color_5 left maxheight">
                        <li>MyBreadcrumb - Version 1.1</li>
                        <li>MyContact - Version 1.6</li>
                        <li>MySocialButtons - Version 1.4.1 (modifié pour ce thème)</li>                        
                        </ul>
                   <!-- </p> -->
    
    si on ne se sert pas de la list:
    [== XHTML ==]
    <p class="text_3 color_2 maxheight">
                        
                        MyBreadcrumb - Version 1.1
                        MyContact - Version 1.6
                        MySocialButtons - Version 1.4.1 (modifié pour ce thème)                     
                        
                   </p> 
    

    EDIT: voilà modifié sur le site et dans l'archive à downloader.... Mais pas sur l'image de l'article :D
  • J'ai un peu joué avec ce thème-ci.

    Quelques remarques :
    - j'ai remplacé tous les "../testa/themes/primex" dans home.php par <?php $plxShow->template();?> ... du coup, les images apparaissent bien ! ;)
    - pour les icônes de FontAsome (petite typo), les numéros de ligne sont 567, 571, 575, 579. (tu peux changer l'URL de la cheatsheet par http://fontawesome.io/cheatsheet/)
    - les icônes des social media ne fonctionnent pas, à part celle de Twitter ... même sur http://chorale.shost.ca/Thema/ :(

    Enfin une petite question pour finir : d'où viennent les photos ? sont-elles libres de droit ?

    C'est un thème bien sympa, il lui manque peut-être un chapitre "call to action" sur la home page mais il est bien dans l'esprit des thèmes actuels.
  • chrisschriss Membres
    mars 2015 modifié
    ComputingFroggy a écrit:
    J'ai un peu joué avec ce thème-ci.

    Quelques remarques :
    - j'ai remplacé tous les "../testa/themes/primex" dans home.php par <?php $plxShow->template();?> ... du coup, les images apparaissent bien ! ;)
    cela avait était fait, mais juste dans la démo, pas dans le zip
    EDIT: après vérification, cela avait été fait aussi dans le zip
    - pour les icônes de FontAsome (petite typo), les numéros de ligne sont 567, 571, 575, 579. (tu peux changer l'URL de la cheatsheet par http://fontawesome.io/cheatsheet/)
    je vais regarder cela. EDIT: Bonne idée! à réaliser EDIT 2: Mauvaise idée, ne fonctionne pas :(
    Voir: http://fortawesome.github.io/Font-Awesome/get-started/
    - les icônes des social media ne fonctionnent pas, à part celle de Twitter ... même sur http://chorale.shost.ca/Thema/ :(
    bizarre fonctionne chez moi !!
    Enfin une petite question pour finir : d'où viennent les photos ? sont-elles libres de droit ?
    Bien sûr, je les ai pris qui fourni des photos pour les webmasters, mais je me souviens plus duquel, oublié de le noter
    C'est un thème bien sympa, il lui manque peut-être un chapitre "call to action" sur la home page mais il est bien dans l'esprit des thèmes actuels.
    merci...
  • chriss a écrit:
    je vais regarder cela. EDIT: Bonne idée! à réaliser EDIT 2: Mauvaise idée, ne fonctionne pas :(
    Voir: http://fortawesome.github.io/Font-Awesome/get-started/
    J'ai pas compris ! ? ! ?

    Par contre, pour les icones social media quelque soit le browser web que j'utilise rien ne se passe quand je clique sur facebook, et google + ... pour toi que se passe t'il ?
  • chrisschriss Membres
    mars 2015 modifié
    ComputingFroggy a écrit:
    chriss a écrit:
    je vais regarder cela. EDIT: Bonne idée! à réaliser EDIT 2: Mauvaise idée, ne fonctionne pas :(
    Voir: http://fortawesome.github.io/Font-Awesome/get-started/
    J'ai pas compris ! ? ! ?
    Explications pour installer Font-Awesone
    Par contre, pour les icones social media quelque soit le browser web que j'utilise rien ne se passe quand je clique sur facebook, et google + ... pour toi que se passe t'il ?
    Tout fonctionne normalement....je ne comprends pas, tu aurais testé sur un site local?? peut être le pare-feu ?
    EDIT: En relisant ton post,Là c'est moi qui est pas compris. Veut tu dire que tu ne voit pas les icônes ou aucun effet si tu cliques? pour le 2ème cas, c'est normal n'ayant pas d'UrL précise à donner
  • Je veux dire qu'il n'y a aucun effet quand je clique à part pour twitter ... du coup, à quoi ça sert ?
  • ComputingFroggyComputingFroggy Membres
    mars 2015 modifié
    J'ai un autre gros problème avec ce thème : tous les éléments sont "déstylés" !
    grid.css supprime les mises en formes des éléments du texte d'un : du coup les h2 apparaissent comme du texte ordinaire, les listes ul/li ne sont plus stylés, les strong n'apparaissent pas en gras, les em pas en italique etc

    J'ai aussi remarqué que les titres sont bizarrement taggés : les titres de page statique sont en h2, les titres d'articles sont en h3, et les titres de pavés de la home page sont en h1 (ce qui est très mauvais pour le référencement - d'avoir plusieurs h1 sur une même page).

    Avec tout ceci, en l'état, ce thème n'est pas vraiment utilisable.
  • Pour les h1, ce n'est pas forcément vrai. Avec HTML5, tu as la possibilité de créer des sections qui contiennent des articles qui peuvent avoir un ou plusieurs h1 qui leur est (sont) propre.
  • Oui, mais est-ce que Google le prend vraiment en compte ? Aux dernières nouvelles, Google n'aimait pas plusieurs h1 ... après ça change tout le temps !
  • bg62bg62 Membres
    lut;)
    pour l'histoire de 'multiplication' des h1 sur une même page = là normal à 100% , GG n'aime pas ... il faut donc réussir à moduler entre h1 , h2, h3 et surtout 'contenu texte' de la page :)
Connectez-vous ou Inscrivez-vous pour répondre.