modification template joomla CSS ou HTML + autres ! SVP !!

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

  • [Problème] modification template joomla CSS ou HTML + autres ! SVP !!

    Bonjour à tous !

    Voici mon site internet actuel : www.gossip-hair.fr

    Je souhaite changer beaucoup de chose et j'aimerai vraiment votre aide !! Je suis débutante... Le template de base est siteground-j15-66 sur joomla 1.5

    1 - Je souhaiterai mettre un arrière plan aux extrêmes droite et gauche, avec une ligne d'une autre couleur pour souliger la séparation (comme le template beez de joomla).

    2- J'aimerai mettre un pied de page également avec une ligne d'autre autre couleur comme le template beez de joomla (car actuellement c'est en image que je l'ai mis), et pouvoir écrire quelque chose aussi.

    3- Et pour finir, je souhaiterai mettre la barre noire (avec "Accueil/Qui sommes nous ?/ Trouver votre couleur/ect ) complètement à droite.


    J'espère vraiment trouver des réponses, car je ne sais vraiment plus quoi faire et surtout ou chercher... Merci d'avance...

    Céline.

    ____________________________________________


    Bonjour à tous !

    Désoler de relancer le sujet, mais mon problème de footer persiste, il est toujours de grande taille est impossible de mettre plus petit !!


    Dernière édition par celine06 à 22/12/2009, 16h42

  • #2
    3- dans template.css :

    on a #pillmenu li a ligne 250
    modifie le float: left; en float: right;

    Commentaire


    • #3
      1- dans template.css (ligne 177)
      on a div.center
      rajouter les lignes :
      Code:
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      tu peux bien sur modifier l'épaisseur en modifiant le 1px, et la couleur en modifiant le #ccc

      2- pas tout compris

      Commentaire


      • #4
        Merci beaucoup pour ton aide. C'est adorable !
        J'ai réussi à changer ma barre à droite sauf que c'étais dans
        #pillmenu li {
        float: right
        ;

        J'ai pu mettre de la couleur en arrière plan des deux côté, en revanche, je l'ai réglé à 239px de chaque coté, et j'ai un écran 17 pouces, cela ne risque pas de varier suivant la taille de lécran ?

        De plus, je souhaite ajouter une autre bordure très fine juste avant les deux côté gris, comment faire ?

        Je te met une photo pour te montrer l'exemple de ce que je voudrais.

        MILLES MERCI !!!
        Fichiers joints

        Commentaire


        • #5
          Envoyé par celine06 Voir le message
          Merci beaucoup pour ton aide. C'est adorable !
          J'ai réussi à changer ma barre à droite sauf que c'étais dans
          #pillmenu li {
          float: right
          ;

          J'ai pu mettre de la couleur en arrière plan des deux côté, en revanche, je l'ai réglé à 239px de chaque coté, et j'ai un écran 17 pouces, cela ne risque pas de varier suivant la taille de lécran ?

          De plus, je souhaite ajouter une autre bordure très fine juste avant les deux côté gris, comment faire ?

          Je te met une photo pour te montrer l'exemple de ce que je voudrais.

          MILLES MERCI !!!
          Pour faire celà, plutôt que de faire une bordure énorme, il va falloir créer une image pour ton background (avec photoshop ou the gimp).
          Crée ton image au format png de la largeur de ton div.center (celle que tu veux au final) en faisant attention de ne pas avoir une image trop large de manière à passer sur tous les écrans. La hauteur de ton image doit faire 1px.

          Quand tu auras crée cette image, tu la placeras dans le dossier images du template.
          ensuite on modifiera le div.center en rajoutant :
          Code:
          div.center {
          background: url(../images/tonimage.png) repeat-y top left;
          border-left: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          }

          Commentaire


          • #6
            PARFAIT ! Ca marche !

            Petit hic, il ne le met qu'a droite ?... et comment faire ma bordure supplémentaire toute fine

            Envoyé par Dens Voir le message
            Pour faire celà, plutôt que de faire une bordure énorme, il va falloir créer une image pour ton background (avec photoshop ou the gimp).
            Crée ton image au format png de la largeur de ton div.center (celle que tu veux au final) en faisant attention de ne pas avoir une image trop large de manière à passer sur tous les écrans. La hauteur de ton image doit faire 1px.

            Quand tu auras crée cette image, tu la placeras dans le dossier images du template.
            ensuite on modifiera le div.center en rajoutant :
            Code:
            div.center {
            background: url(../images/tonimage.png) repeat-y top left;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            }

            Commentaire


            • #7
              Bon, on ne s'est pas compris.
              ton image fait 240px, alors qu'elle devrait être beaucoup plus large si tu veux du rose des 2 côtés du contenu.
              tu dois alors avoir une image du style de celle que je mets en pièce jointe.

              Sinon, pour le border-left et border-right, ce que je t'ai dis précédemment ne fonctionne pas dans ton cas.

              Par contre tu as supprimé pas mal de choses qu'il fallait laisser dans ton div.content. Entre autre, il fallait garder margin: 0 auto; (qui te permet de centrer), il fallait garder aussi le width: xxxpx (à adapter à tes besoins)

              de même pour ton footer.
              Fichiers joints

              Commentaire


              • #8
                Je n'ai pas de div.content mais j'ai ca :

                div.center {
                background: url(../images/FOND.png) repeat-y top left;
                border-left: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                }


                #content_bottom {
                background: #FFFFFF url(../images/content_bottom.jpg) bottom center no-repeat;
                }

                #content {
                width: 920px;
                margin: 0 auto;
                padding: 10px 0 0 0;

                ____________________________________________

                De plus, en agrandissant le fond d'écran, cela me l'a mis de partout... Or je ne le veux que sur les côtés.

                Il n'est pas possible de répéter deux fois.... :

                div.center {
                background: url(../images/FOND.png) repeat-y top left;
                border-left: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                }

                _________________________________

                ....en changeant left par right et peut etre en mettant deux images différente ?


                Merci merci merci merci !

                Commentaire


                • #9
                  Je viens de charger ton template, on va reprendre à zéro, car je pense qu'il y a plus simple

                  Tu veux que le rose prenne toute la largeur à gauche et à droite ?
                  si c'est le cas :

                  Code:
                  #holder {
                      background: #F1B3F2; /* ou le rose de ton choix*/  
                  }
                  
                  div.center {
                      text-align: left;
                      margin: 0 auto;
                      padding: 0 0 20px 0;
                      width: 940px;
                      background: #fff; /*important, si tu ne veux pas que le contenu du site aie un fond rose*/
                      border-left: 2px solid #999; /* ou le gris de ton choix et la largeur de ton choix*/
                      border-right: 2px solid #999; /* ou le gris de ton choix et la largeur de ton choix*/
                  }
                  Dernière édition par Dens à 15/12/2009, 21h49

                  Commentaire


                  • #10
                    Tu es vraiment TROP GENIAL !!

                    Mille merci !

                    Maintenant... LOL comment puis-je centrer le texte de mon footer "gossip hair 2009" ?

                    De plus, quand je vais dans l'onglet de mon site "Nuancier" par exemple, on s'apercoit que en dessous du footer il y a du blanc.... Bizard ... ?

                    Commentaire


                    • #11
                      dans #footer rajoute text-align: center; (sans supprimer le reste )

                      Commentaire


                      • #12
                        Ca ne marche pas...

                        Sinon, ne faudrait'il pas que je modifie mon index.php ?

                        En voici la fin :

                        <div id="footer">
                        <p>
                        <?php echo JText::_('*GOSSIP HAIR 2009*');?>
                        </p>
                        </div>
                        </div>
                        </div>

                        </body>
                        </html>



                        Si c'est le cas, peut-tu me dire ce que je dois changer, car je ne m'y connais pas du tout en html...

                        Merci beaucoup Dens

                        Commentaire


                        • #13
                          Maintenant... LOL comment puis-je centrer le texte de mon footer "gossip hair 2009" ?
                          Pour ce faire ... template.css à la ligne 28

                          p {
                          margin-bottom:5px;
                          margin-top:0;
                          text-align:center;
                          }

                          Commentaire


                          • #14
                            le problème c'est que ça centre tous les <p></p> du site
                            il faut alors rajouter une classe au <p> du footer
                            <p class="perso">

                            de manière à rajouter dans le template.css :

                            Code:
                            .perso {
                            text-align: center;
                            }
                            Dernière édition par Dens à 16/12/2009, 12h02

                            Commentaire


                            • #15
                              que proposes tu ?

                              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