comment ajouter des classes à un template yootheme ; exemple pratique d'un tableau

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • comment ajouter des classes à un template yootheme ; exemple pratique d'un tableau

    bonjour,
    j'ai installé yootheme showroom et je souhaite ajouter du style dans mes articles.
    comment procéder ?

    Dans la gestion des templates je vois les css et en particulier un custom.css.
    dois-je utiliser celui-là pour mes styles et classes ? ou dois-je créer un nouveau "mestyles.css" pour ne pas être écrasé par les updates du thème ou par un nouveau thème; si oui comment ajouter un css à cette liste de css ?
    dois-je ajouter un entête ?


    reprenons l'exemple de developper com
    http://a-pellegrini.developpez.com/t...-css/tableaux/

    Comment voyez-vous la rédaction d'un article "mes résultats" dans jce consistant en un tableau appelant du css (qui ne devrait pas interférer avec celui du thème showroom) :


    Code HTML:
    <table summary="Comparaison des statistiques des différents navigateurs sur la période du 1er janvier 2007 
    	au 31 décembre 2007 sur le domaine a-pellegrini.developpez.com">
        <caption>Statistique des navigateurs sur l'année 2007 de a-pellegrini.developpez.com</caption>
        
        <colgroup>
        	<col span="1" width="200" style="background-color:#B8C7D3" />
            <col span="1" width="150" style="background-color: #CCCCCC" />
        </colgroup>
       
        <thead>
            <tr>
                <th id="nav" abbr="Nav" scope="col">Navigateurs</th>
                <th id="nb" abbr="Nb" scope="col">Nombre</th>
            </tr>
        </thead>
        
        <tfoot>
        	<tr>
                <td rowspan="2">Créé par</td>
                <td>Adrien Pellegrini</td>
            </tr>
            <tr>
                <td>PhpMyVisite</td>
            </tr>
        </tfoot>
    
        <tbody>
            <tr>
                <td id="ff2" headers="nav">Firefox 2.0</td>
                <td headers="ff2 nb">34778 (50.7 %)</td>
            </tr>
            <tr>
                <td id="ie6" headers="nav">Internet Explorer 6.0</td>
                <td headers="ie6 nb">15176 (22.1 %)</td>
            </tr>
            <tr>
                <td id="ie7" headers="nav">Internet Explorer 7.0</td>
                <td headers="ie7 nb">9957 (14.5 %)</td>
            </tr>
        </tbody>
    </table>


    CSS :


    Code:
    #tab, #tab caption
    {
        margin: auto;
    }
    
    #tab
    {
        border: #DDEEFF 2px solid;
        border-collapse: separate;
        border-spacing: 2px;
        empty-cells: hide;
    }
    
    #tab caption
    {
        background-color: #DDEEFF;
    	font-size: 0.8em;
    }
    
    #tab th
    {
        color: #996600;
        background-color: #FFCC66;
        border: #FFCC66 1px solid;
        font-variant: small-caps;
        font-size: 0.8em;
        letter-spacing: 1px;
    }
    
    #tab td
    {
        border: #DDEEFF 1px solid;
        padding-left: 10px;
    }
    
    #navcol
    {
        width: 200px;
        background-color: #F4FAFD;
    }
    
    #numcol
    {
        width: 150px;
    }
    
    #tab tfoot
    {
        font-size: 0.7em;
        background-color: #FFCC66;
        color: #996600;
        letter-spacing: 1px;
    }

    merci
    marc

  • #2
    Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

    Bonjour,

    je ne connais pas ton thème mais si le fichier custom.css est vide, on peut supposer qu'il est destiné à recevoir tes règles css.
    A vérifier quand même au niveau de la documentation du thème (si elle est disponible).
    Sinon il te faudra créer un nouveau fichier css et insérer l'entête correspondante dans le fichier index.php
    Code PHP:
    <link rel="stylesheet" type="text/css" href="monfichier.css" /> 
    Ensuite, pour que tes règles n'interfèrent pas avec le reste du css, le mieux est de donner un ID inédit à ton tableau et de préfixer toutes tes règles avec cet ID.

    Pour garder l'exemple que tu nous donnes, si tu donnes à ton tableau l'ID groslouou, il faudra mettre #grosloulou à la place de #tab pour toutes les règles.
    Folcomedia - Agence Web
    Développeur Joomla depuis 1724
    http://www.folcomedia.fr
    Sites internet | E-commerce | Hébergement | Application mobiles & Facebook
    Présent au JoomlaDay 2014

    Commentaire


    • #3
      Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

      Envoyé par Folcomedia Voir le message
      Bonjour,

      je ne connais pas ton thème mais si le fichier custom.css est vide, on peut supposer qu'il est destiné à recevoir tes règles css.
      A vérifier quand même au niveau de la documentation du thème (si elle est disponible).
      Sinon il te faudra créer un nouveau fichier css et insérer l'entête correspondante dans le fichier index.php
      Code PHP:
      <link rel="stylesheet" type="text/css" href="monfichier.css" /> 
      Ensuite, pour que tes règles n'interfèrent pas avec le reste du css, le mieux est de donner un ID inédit à ton tableau et de préfixer toutes tes règles avec cet ID.

      Pour garder l'exemple que tu nous donnes, si tu donnes à ton tableau l'ID groslouou, il faudra mettre #grosloulou à la place de #tab pour toutes les règles.
      bonjour,
      je n'ai toujours pas compris comment écrire un article qui utilise du css

      je n'ai pas compris où et comment faire :
      Sinon il te faudra créer un nouveau fichier css et insérer l'entête correspondante dans le fichier index.php

      où sont rangés les css de joomla (j'utilise un thème showroom de yootheme) ?
      un de ces fichiers est-il déjà prêt pour recevoir du code custom (custom.css ?) ?
      sinon, comment ajouter un css "moncss.css" ?
      une fois le css du tableau copié dedans, comment lier mon article à cette feuille de style ?
      en effet, je suppose que mon article va utiliser les css par défaut de yoothem pour les ul,li,p, titles,... et les miens pour le tableau ?

      si je fournis un site à quelqu'un de pas très doué en informatique et html/css et que je mets le css en place, sera-t-il facile pour lui de créer des nouveaux articles avec ce même tableau ou devra-t-il faire des copier coller de code qui appellent le css ?


      merci
      marc

      Commentaire


      • #4
        Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

        j'ai trouvé :
        https://www.yootheme.com/themes/docu.../customization
        mais je comprends rien !
        je ne cherche pas à modifier leur thème mais à customiser un article

        j'ai parcouru avec filezilla mes répertoires et j'ai trouvé (par rapport à cet article) :


        /www/templates/yoo_showroom folder which contains :
        dossiers : css, fonts, html,images, js,layout, styles, warp et config.php

        dans le dossier css je vois layout.css, custom.css (le fameux custom.css de folcomedia ??? aucune idée s'il est vide ou non, je suppose que je dois le télécharger pour l'ouvrir ? pas possible d'ouvrir et modifier des fichiers en ligne dans filezilla ?),...

        dans le dossier layout on trouve :
        com_content folder, module.php, template.config.php, template.php, notheme.php

        pas de trace là-bas de leur /custom/layouts

        marc

        Commentaire


        • #5
          Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

          salut,
          peux-tu svp expliquer comment utiliser un "ID" pour mon tableau ?
          si j'ai bien compris, dans le css, je remplace tous les "tab" par "mon_tableau" et dans le html je change seulement la première ligne en :
          <table id="mon_tableau" summary="Comparaison des statistiques des différents navigateurs sur la période du 1er janvier 2007
          au 31 décembre 2007 sur le domaine a-pellegrini.developpez.com">

          pas besoin d'ajouter un id à chaque ligne comme :
          <td id="mon_tableau">
          ou <td id="mon_tableau_titre"> ?


          merci
          marc

          Commentaire


          • #6
            Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

            Salut,
            on va reprendre la question de départ, si tu veux bien.
            Détails et précisions:
            template yootheme showroom, framework Warp Version 6.
            * c'est un template payant, tu peux t'adresser au support Yootheme.

            re custom.css

            Dans /templates/yoo_tontemplate/layouts/template.config.php
            +- ligne 84

            tu vérifies si custom.css est bien appelé :
            $this['asset']->addFile('css', 'css:extensions.css');
            $this['asset']->addFile('css', 'css:custom.css');
            sinon, tu rajoutes simplement la ligne :

            $this['asset']->addFile('css', 'css:custom.css');
            Maintenant, tu peux insérer dans ce fichier toutes les modifs dont tu as besoin.

            Regarde quand même ce que yootheme propose comme CSS pré-composées :
            http://www.yootheme.com/demo/themes/...res/typography
            “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

            Commentaire


            • #7
              Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

              Envoyé par grosloulou Voir le message
              salut,
              peux-tu svp expliquer comment utiliser un "ID" pour mon tableau ?
              si j'ai bien compris, dans le css, je remplace tous les "tab" par "mon_tableau" et dans le html je change seulement la première ligne en :
              <table id="mon_tableau" summary="Comparaison des statistiques des différents navigateurs sur la période du 1er janvier 2007
              au 31 décembre 2007 sur le domaine a-pellegrini.developpez.com">


              pas besoin d'ajouter un id à chaque ligne comme :
              <td id="mon_tableau">
              ou <td id="mon_tableau_titre"> ?


              merci
              marc
              Avant de commencer à aller plus loin et ajouter des feuilles de style dans le fichier custom.css, je pense qu'il faut visiblement commencer par le commencement. Avoir au moins les informations de base sur ce à quoi servent les feuilles de styles, leurs règles de base et leur utilisation et les bases du langage utilisé.

              Tu peux par exemple avant d'aller voir plus loin regarder des sites d'information assez simples comme : http://slaout.linux62.org/html_css/index.html
              Il y a 10 sortes de gens. Ceux qui savent compter en binaire et ceux qui ne savent pas ...

              Commentaire


              • #8
                Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

                merci pour ta patience
                je suis sous maintenance 6 mois pour les themes et widgetkit et j'avais demandé de l'aide au support qui est vraiment très performant sauf que moi je le suis vraiment moins

                j'ai une installation locale dans laquelle j'ai trouvé ton fichier (nom différent) :
                wamp>www>site1-avenue>templates>yoo_avenue>layout>theme.config.ph p
                que j'ai ouvert avec le wordpad et dans lequel j'ai trouvé ta ligne custom.css (mais pas extensions.css) :

                $config->set('body_config', json_encode($body_config));

                /*
                * Add assets
                */

                // add css
                $this['asset']->addFile('css', 'css:theme.css');
                $this['asset']->addFile('css', 'css:custom.css');

                // add scripts
                $this['asset']->addFile('js', 'js:uikit.js');
                $this['asset']->addFile('js', 'js:social.js');
                $this['asset']->addFile('js', 'js:theme.js');

                // internet explorer
                if ($this['useragent']->browser() == 'msie') {

                j'ai trouvé :
                wamp>www>site1-avenue>templates>yoo_avenue>css contenant :
                bootstrap.css, custom.css, ie8.css et theme.css


                et :
                wamp>www>site1-avenue>templates>yoo_avenue>styles>graphite>css> contenant :
                bootstrap.css et theme.css

                le contenu de custom.css est évocateur :
                /* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

                /* ================================================== ======================
                Use this file to add custom CSS easily
                ================================================== ======================== */

                c'est là que j'écris mes classes ?
                elles ne seront pas écrasées par les mises à jour de joomla et du thème avenue ?

                il suffit que j'appelle cette classe dans mon tableau dans l'article et le tour est joué ?

                Avant de cloturer, je te cite ce que yootheme signale

                http://www.yootheme.com/themes/docum.../customization
                je comprends rien tellement il y a des cas différents

                ce que j'ai compris c'est surtout que pour avoir un thème avec mla propre image de fond sans risque de détruire ceux d'usine, il vaut mieux faire un nouveau style par copie puis l'éditer
                ensuite ils disent (tu reconnais la suggestion faite sur le forum joomla) :
                All CSS you want to change must be add to the custom.css file as below, that is all

                You can add the following to a styles/YOUR_STYLE/css/custom.css . Please read the tips below for how to load a custom.css file .

                What is the name of your style ?
                Does it have a custom.csws already ? Use it.
                Does it not have a custom.css file ? create one.

                You do not need to add the following , no add.

                <link rel="stylesheet" type="text/css" href="monfichier.css" />

                Must Read Tips

                If you do customization on WARP 7 themes, see Customization - YOOtheme, in particular, the Add custom CSS or JavaScript section, so future upgrades of the template are easy .

                Some useful customization tips can be found here, How to Customize .

                YOOgards

                je pense que je vais commencer par créer un style par copie.
                tu crois qu'il y a un custom.css unique ou un custom.css par style choisi ?
                ensuite tu confirmes que je dois toujours utiliser assets...

                merci
                marc

                Commentaire


                • #9
                  Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

                  concernant ton lien pour html et css, il est très chouette.
                  toutefois, malgré les apparences, j'ai déjà fait du html, css, feuilles de style,... dans dreamweaver mais je dois avouer que je fais un peu une soupe avec classe et id. quand je lis je comprends (ex: id une seule fois pour un footer...) mais quand je dois faire c'est autre chose.

                  docn si on revient à l'exemple avec le tableau que je compte utiliser dans tous mes articles de catégorie sport par exemple, peux-tu svp modifier le css pour que je puisse le copier dans custom.css et le html en conséquence pour que je puisse le visualiser dans un article ?

                  à partir de là je pense que le reste c'est copier des balises,... en suivant les exemples pour une image à droite avec bordure,...
                  le plus dur à ce moment est de démarrer un custom css pour la première fois

                  je m'étonne que je sois le seul à avoir besoin de ce genre de tuto de base

                  merci
                  marc

                  Commentaire


                  • #10
                    Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

                    Salut,
                    j'ai repris ta table (telle que décrite plus haut) et apporté des corrections possibles :

                    http://codepen.io/ghazalp/pen/vimKd
                    PS : tu peux télécharger le fichier en cliquant sur Share, puis export.zip

                    Tu peux coller la partie CSS dans le fichier custom.css

                    J'ai rajouté une classe à "table"--> class="matable"
                    pour éviter qu'il y ait confusion entre les CSS de yootheme et les tiennes.

                    PS : pour apprendre les CSS, il existe des sites un peu plus interactifs que celui cité plus haut.
                    Seulement en anglais :

                    Learn HTML & CSS Programming | Codecademy Online Tutorials
                    http://www.codecademy.com/tracks/web

                    Click sur le chapitre "Introduction to CSS", paragraphe "CSS: an overview" and have fun.
                    “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                    Commentaire


                    • #11
                      Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

                      Envoyé par grosloulou Voir le message
                      concernant ton lien pour html et css, il est très chouette.
                      toutefois, malgré les apparences, j'ai déjà fait du html, css, feuilles de style,... dans dreamweaver mais je dois avouer que je fais un peu une soupe avec classe et id. quand je lis je comprends (ex: id une seule fois pour un footer...) mais quand je dois faire c'est autre chose.

                      merci
                      marc
                      C'est assez simple les 'id' sont attachés à un élément de ta page et sont uniques, une double définition d'id est normalement interdite, donc attacher des définitions de style à une id (préfixe #) #toto, ne s'appliquera qu'à cet id et donc qu'à cet élément.

                      Passer par une classe (préfixe. en css) .titi, s'appliquera à tous les éléments de la page ayant été affublé de la classe titi.

                      Attacher une définition de style à un élément directement s'appliquera à tous les éléments quel que soit leur classe et leur id.

                      Pour finir l'ordre des définitions est important Cascaded Style Sheet (Feuille de style en cascade) signifie bien que les définitions sont examinées et appliquées en cascade.

                      Juste pour le fun :
                      pour le CSS

                      TABLE { background-color : red;}
                      .titi {background-color : blue; }
                      #toto : {background-color : green;}

                      de quelle couleur va s'afficher l'élément HTML définit par

                      <table id="toto" class="titi"> .... </table>


                      hmmmm ?
                      Il y a 10 sortes de gens. Ceux qui savent compter en binaire et ceux qui ne savent pas ...

                      Commentaire


                      • #12
                        Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

                        merci à tous pour votre aide
                        je bosse dessus mais le week-end était un peu chargé

                        marc

                        Commentaire


                        • #13
                          Re : comment ajouter des classes à un template yootheme ; exemple pratique d'un table

                          class parce qu'il est après. Dans le cas le plus général:

                          <div id="item1" class="class1 class2 class3" style="propriété:valeur;">

                          Meme si propriété est définie dans l'id et dans les classes, il ne prendra, après écrasement des valeurs successivement dans l'idée et les classes, la valeur de style.

                          Je sais pas si j'ai été très clair. Tu peux facilement voir le phénomène d'ecrasement de style suceesif dans Firebug.

                          A+ Michel

                          Commentaire

                          Annonce

                          Réduire
                          1 sur 2 < >

                          C'est [Réglé] et on n'en parle plus ?

                          A quoi ça sert ?
                          La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                          Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                          Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                          Comment ajouter la mention [Réglé] à votre discussion ?
                          1 - Aller sur votre discussion et éditer votre premier message :


                          2 - Cliquer sur la liste déroulante Préfixe.

                          3 - Choisir le préfixe [Réglé].


                          4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                          2 sur 2 < >

                          Assistance au forum - Outil de publication d'infos de votre site

                          Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                          Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                          Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                          UTILISER À VOS PROPRES RISQUES :
                          L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                          Problèmes connus :
                          FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                          Installation :

                          1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                          Archive zip : https://github.com/AFUJ/FPA/zipball/master

                          2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                          3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                          4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                          5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                          6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                          et remplacer www. votresite .com par votre nom de domaine


                          Exemples:
                          Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                          Télécharger le script fpa-fr.php dans: /public_html/
                          Pour executer le script: http://www..com/fpa-fr.php

                          Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                          Télécharger le script fpa-fr.php dans: /public_html/cms/
                          Pour executer le script: http://www..com/cms/fpa-fr.php

                          En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                          Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                          Voir plus
                          Voir moins
                          Travaille ...
                          X