Augmenter la largeur et hauteur d'un bloc

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

  • [RÉGLÉ] Augmenter la largeur et hauteur d'un bloc

    Bonjour,

    Je viens de mettre en ligne www.WebZic.fr

    Je voudrais augmenter la police du titre et du slogan. C'est dans #logo h2, et #logo h3, du template.css, genre:
    #logo h3 {
    font-size: 15px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0px;
    margin: -2px 0 0 0px;
    padding: 0;

    Le problème si j'augmente la pôlice, c'est que les écriture passent sous la barre du menu. simple me direz-vous, déplace le menu...oui, mais les écritures passent quand même sous le bloc prévu au menu (position1)
    Voici ce qui se passe quand j'augmente les polices:
    Cliquez sur l'image pour l'afficher en taille normale

Nom : top.jpg 
Affichages : 1 
Taille : 100,5 Ko 
ID : 1820068

    Il en manque un bout à droite...
    Donc il faudrait que j'augmente la taille du bloc #logo h2, et #logo h3, mais comment?
    Dans la foulée si vous pouvez me dire comment ne pas afficher le nom du fichier des photos...
    Template: a4joomla-darksunset-free
    Photos en top: Responsive Photo Gallery

    Voilà, une petite aide serait sympa. Merci.
    Dernière édition par mlamer à 11/02/2014, 17h36

  • #2
    Re : Augmenter la largeur et hauteur d'un bloc

    Bonjour,


    Envoyé par mlamer Voir le message
    Je voudrais augmenter la police du titre et du slogan.
    Code:
    #logo h2 {
      font-size: 40px; /* + 8px */
    }
    #logo h2 {
      font-size: 14px; /* + 3px */
    }
    Le problème si j'augmente la police, c'est que les écritures passent sous la barre du menu.
    Code:
    #logo {
      width: 300px; /* + 40px */
      height: 120px; /* + 30 px */
    }
    Dans la foulée si vous pouvez me dire comment ne pas afficher le nom du fichier des photos...
    Code:
    .rg-caption p {
      display: none;
    }
    ...Conseil : ces changements dans un fichier de surcharge (du genre custom.css) plutôt que dans template.css. De cette façon, les mises à jour de votre template préserveront vos modifications.


    Bonne continuation musicale,



    PhilJ
    Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

    Commentaire


    • #3
      Re : Augmenter la largeur et hauteur d'un bloc

      Merci. Cette solution me permet d'aller plus vers la droite, donc OK, je peux avoir tout sur une ligne, c'est bon.

      Par contre, j'ai pas trouvé de custop.css...
      Et je ne peux augmenter assez les polices, car même si ont augment la taille du bloc, elles passent sous la barre des menus, même si il n'y a pas de menu (petite ligne en pointillé sur la photo).

      Cliquez sur l'image pour l'afficher en taille normale

Nom : top2.jpg 
Affichages : 1 
Taille : 50,3 Ko 
ID : 1803257

      Il doit s'agir d'un bloc de position Top ou position1, je crois, mais comment le faire se bouger vers le bas?
      Il a l'air d'avoir sa position et de s'y tenir. D'ailleurs quand j'augmente beaucoup la police, la suite réapparait plus bas, en dessous de ce bloc.


      Pour le code qui supprime l'affichage des titres de photos, c'est dans quel fichier?

      Merci de ta réponse, A+

      Commentaire


      • #4
        Re : Augmenter la largeur et hauteur d'un bloc

        EN fait, il faudrait que je puisse baisser le block de position-1 qui est écrit là:

        <div id="topmenuwrap" class="gainlayout">
        <?php if($this->countModules('position-1')) : ?>
        <div id="topmenu" class="gainlayout" style="width:<?php echo $pageWidth + $outermargin - 12; ?>px;">
        <jdoc:include type="modules" name="position-1" style="xhtml" />
        <div class="clr"></div>
        </div>
        <?php endif; ?>
        <div class="clr"></div>

        Mais comment baisser ce bloc qui correspond à la barre avec les pointillés. Je vais remettre le menu là, comme ça je ne verrais plus ces pointillés, mais du coup le titre et le slogan sont trop prés...

        Commentaire


        • #5
          Re : Augmenter la largeur et hauteur d'un bloc

          Bonjour,


          Envoyé par mlamer Voir le message
          Merci. Cette solution me permet d'aller plus vers la droite, donc OK, je peux avoir tout sur une ligne, c'est bon. Par contre, j'ai pas trouvé de custom.css...
          ...En effet, il n'y en a pas dans votre configuration actuelle, et c'est ce qui vous contraint à modifier votre template.css, qui est un fichier sensible qu'il vaut mieux ne pas altérer. Il faut créer ce fichier et indiquer à Joomla qu'il faut le charger — si possible après template.css. Pour cela, le plus simple est d'installer un plugin. Par exemple JT Custom JS / CSS, que vous trouverez à partir d'ici : http://extensions.joomla.org/extensi...ead-code/22997.

          Vous déclarerez tous vos changements CSS dans cet unique nouveau fichier (que vous appelerez par exemple custom.css). Tous, c'est-à-dire tous les changements devant affecter le template, mais aussi, je vous le conseille, tous ceux qui devront affecter vos extensions — par exemple celle qui fait défiler vos photos. De cette façon, lorsque vous mettrez à jour votre template et / ou vos extensions, les mises à jour n'écraseront pas vos modifications. Votre custom.css ne sera en effet jamais affecté par ces mises à jour.


          Et je ne peux augmenter assez les polices, car même si on augmente la taille du bloc, elles passent sous la barre des menus, même si il n'y a pas de menu (petite ligne en pointillé sur la photo). Il doit s'agir d'un bloc de position Top ou position1, je crois, mais comment le faire se bouger vers le bas? Il a l'air d'avoir sa position et de s'y tenir. [...]
          ...Non : il « suit le mouvement » (= il n'a pas de position fixe / absolue par rapport au haut du document), et donc vous n'avez pas besoin d'intervenir sur le container #topmenuwrap. Il suffit d'augmenter la hauteur du container du dessus, c'est-à-dire #headerwrap et #logo. De cette façon, le menu (= #topmenuwrap) descendra autant que vous l'aurez décidé.

          => Essayez ceci par exemple (toujours dans votre
          custom.css) :

          Code:
          #header {  height: 120px; /* au lieu de 90px */
          }
          #logo {
            display: block; /* au lieu de inline */
            height: 120px; /* au lieu de 90px */
            float: none; /* au lieu de left */
          }
          Une autre possibilité, si vous n'excluez pas d'utiliser un jour ou l'autre la zone située à droite de #logo, serait :

          Code:
          #header {
            height: 120px; /* au lieu de 90px */
          }
          #logo {
            display: block; /* au lieu de inline */
            height: 120px; /* au lieu de 90px */
          }
          #topmenuwrap {
            clear: both; /* + */
          }

          Enfin, quelle que soit la solution adoptée, ajoutez à la suite, toujours dans le même custom.css, pour faire disparaître la zone d'affichage sous les photos qui se succèdent :

          Code:
          .rg-caption p {
            display: none;
          }
          Pour le code qui supprime l'affichage des titres de photos, c'est dans quel fichier ?
          ...Aucune importance si vous faites comme indiqué ci-dessus. Sinon, si vous voulez vraiment altérer le fichier original (ce qui, je vous le redis, n'est pas conseillé), il se trouve ici : /modules/mod_responsivegallery/css/style_dark.css.

          Donnez de vos nouvelles.


          Cordialement,


          PhilJ
          Dernière édition par PhilJ à 03/02/2014, 17h08
          Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

          Commentaire


          • #6
            Re : Augmenter la largeur et hauteur d'un bloc

            Bon, j'ai téléchargé, installé et publié le plg.
            Je lui ai mis ça:

            #header { height: 120px; /* au lieu de 90px */
            }
            #logo {
            display: block; /* au lieu de inline */
            height: 120px; /* au lieu de 90px */
            float: none; /* au lieu de left */
            }

            .rg-caption p {
            display: none;
            }

            Puis enregistré.
            Mais il ne m'a créé aucun fichier css, il a créé des php, des ini, des xml...
            Donc du coup je ne sais pas quoi faire d'autre avec ce plg?

            Commentaire


            • #7
              Re : Augmenter la largeur et hauteur d'un bloc

              Envoyé par mlamer Voir le message
              Bon, j'ai téléchargé, installé et publié le plg. [...] Puis enregistré. Mais il ne m'a créé aucun fichier css [...] Donc du coup je ne sais pas quoi faire d'autre avec ce plg?
              ...C'est ma faute :-\

              Oubliez ce plugin svp, car en effet il n'insère pas de fichier custom.ccs : il injecte des instructions CSS, ce qui est différent et un peu moins pratique.

              Utilisez plutôt celui-ci, créé tout exprès par l'un des nôtres sur le forum : http://forum.joomla.fr/attachment.ph...0&d=1384120422. Installez-le et activez-le (<= à ne pas oublier !), puis créez un fichier custom.css dans le dossier /templates/system/css et insérez-y vos codes.

              Le seul inconvénient que vous pourrez rencontrer vient de ce que custom.css pourrait se charger avant vos autres feuilles de style, notamment template.css. Si tel est le cas (pour le savoir, regardez le code source de l'une de vos pages), vos instructions ne seront pas prises en compte, et vous devrez ajouter !important à la suite des directives concernées, de façon à forcer les choses. Par exemple :

              Code:
              #header {
                height: 120px;
              }
              devra s'écrire :

              Code:
              #header {
               height: 120px [COLOR=#ff0000]!important[/COLOR];
              }
              Ça devrait marcher cette fois :-)


              Bonne soirée,



              PhilJ
              Dernière édition par PhilJ à 03/02/2014, 21h08
              Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

              Commentaire


              • #8
                Re : Augmenter la largeur et hauteur d'un bloc

                Ca ne change rien et voilà mon code source...

                <head>
                <base href="http://localhost/webzic/" />
                <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                <meta name="keywords" content="musique, concert, rock" />
                <meta name="description" content="Le blog de la musique et des concerts ROCK !" />
                <meta name="generator" content="Joomla! - Open Source Content Management" />
                <title>Accueil</title>
                <link rel="stylesheet" href="/webzic/cache/widgetkit/widgetkit-d0b91070.css" type="text/css" />
                <link rel="stylesheet" href="/webzic/modules/mod_responsivegallery/css/style_dark.css" type="text/css" />
                <link rel="stylesheet" href="/webzic/modules/mod_responsivegallery/css/elastislide_dark.css" type="text/css" />
                <link rel="stylesheet" href="/webzic/modules/mod_responsivegallery/css/demo.css" type="text/css" />
                <link rel="stylesheet" href="/webzic/modules/mod_responsivegallery/css/jquery.fancybox.css" type="text/css" />
                <link rel="stylesheet" href="http://localhost/webzic/modules/mod_maximenuck/themes/default/css/moo_maximenuhck.css" type="text/css" />
                <link rel="stylesheet" href="http://localhost/webzic/modules/mod_maximenuck/themes/default/css/maximenuhck.php?monid=maximenuck" type="text/css" />
                <link rel="stylesheet" href="http://localhost/webzic/modules/mod_maximenuck/templatelayers/beez_20-position1.css" type="text/css" />
                <style type="text/css">
                div#maximenuck ul.maximenuck li.maximenuck > a span.titreck {color:#E8E8E8 !important;} div#maximenuck ul.maximenuck li.maximenuck > span.separator span.titreck {color:#E8E8E8 !important;}div#maximenuck ul.maximenuck li.maximenuck > a span.descck {color:#FF8F66 !important;} div#maximenuck ul.maximenuck li.maximenuck > span.separator span.descck {color:#FF8F66 !important;}div#maximenuck ul.maximenuck li.maximenuck > a:hover span.titreck {color:#3B3B3B !important;} div#maximenuck ul.maximenuck li.maximenuck > span.separator:hover span.titreck {color:#3B3B3B !important;}div#maximenuck ul.maximenuck li.maximenuck > a:hover span.descck {color:#730316 !important;} div#maximenuck ul.maximenuck li.maximenuck > span.separator:hover span.descck {color:#730316 !important;}
                </style>
                <script src="/webzic/media/system/js/mootools-core.js" type="text/javascript"></script>
                <script src="/webzic/media/system/js/core.js" type="text/javascript"></script>
                <script src="/webzic/media/system/js/caption.js" type="text/javascript"></script>
                <script src="/webzic/media/widgetkit/js/jquery.js" type="text/javascript"></script>
                <script src="/webzic/cache/widgetkit/widgetkit-5a41a513.js" type="text/javascript"></script>
                <script src="/webzic/media/system/js/mootools-more.js" type="text/javascript"></script>
                <script src="/webzic/modules/mod_responsivegallery/js/gallery_NL.js" type="text/javascript"></script>
                <script src="/webzic/modules/mod_responsivegallery/js/jquery.fancybox.js" type="text/javascript"></script>
                <script src="/webzic/modules/mod_responsivegallery/js/jquery.tmpl.js" type="text/javascript"></script>
                <script src="/webzic/modules/mod_responsivegallery/js/jquery.easing.1.3.js" type="text/javascript"></script>
                <script src="/webzic/modules/mod_responsivegallery/js/jquery.elastislide.js" type="text/javascript"></script>
                <script src="http://localhost/webzic/modules/mod_maximenuck/assets/moomaximenuck.js" type="text/javascript"></script>
                <script src="http://localhost/webzic/modules/mod_maximenuck/assets/fancymenuck.js" type="text/javascript"></script>


                Ce qui ne me dit rien du tout...(là je fais en local avant, quand ce sera OK, de le faire sur www.webZine.fr

                Merci.
                Dernière édition par mlamer à 04/02/2014, 01h34

                Commentaire


                • #9
                  Re : Augmenter la largeur et hauteur d'un bloc

                  Cliquez sur l'image pour l'afficher en taille normale

Nom : top3.jpg 
Affichages : 1 
Taille : 83,4 Ko 
ID : 1803260


                  Si je mets:
                  #header { height: 120px; /* au lieu de 90px */
                  }
                  #logo {
                  display: block; /* au lieu de inline */
                  height: 120px; /* au lieu de 90px */
                  float: none; /* au lieu de left */
                  }

                  A la fin de template.css pour tester, j'ai un souci autre.

                  Les lignes blanches de petits points sont encore là, à la place du menu. Et le menu descend sur le responsive galery...
                  Donc il faudrait faire pareil pour le module responsive galery...

                  Commentaire


                  • #10
                    Re : Augmenter la largeur et hauteur d'un bloc

                    Envoyé par mlamer Voir le message
                    Ca ne change rien et voilà mon code source...

                    <head>

                    [...]
                    ...On ne voit pas </head> dans votre code, donc ce que vous avez collé est incomplet, mais je suis fatigué et j'ai écrit quelque chose d'incorrect :
                    créez un fichier custom.css dans le dossier /templates/ system /css
                    Il fallait lire :
                    créez un fichier custom.css dans le dossier /templates/a4joomla-darksunset-free/css
                    Rappel : pour que l'opération marche, il vous faut (1°) créer un fichier custom.css que vous déposerez dans le dossier /templates/a4joomla-darksunset-free/css, et bien sûr (2°) le plugin doit être publié / activé. Si ces deux choses ont été faites, il n'y a aucune raison pour que ça ne réussisse pas. Votre code source devrait finalement contenir la ligne <link rel="stylesheet" href="/templates/a4joomla-darksunset-free/css/custom.css" type="text/css" />.

                    [...] là je fais en local
                    ...Bien, mais du coup il sera plus difficile de vous aider :-\
                    Dernière édition par PhilJ à 04/02/2014, 03h20
                    Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                    Commentaire


                    • #11
                      Re : Augmenter la largeur et hauteur d'un bloc

                      Envoyé par mlamer Voir le message
                      Les lignes blanches de petits points sont encore là, à la place du menu. Et le menu descend sur le responsive galery...
                      A essayer :

                      1 - Pour vous débarrasser des lignes pointillées :
                      Code:
                      #topmenuwrap {
                        border: 0;
                      }
                      2 - Pour augmenter l'espace entre le menu et la galerie :
                      Code:
                      #topmenuwrap {
                        margin: 0 auto 20px; /* remplacez 20px par la valeur de votre choix */
                      }
                      Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                      Commentaire


                      • #12
                        Re : Augmenter la largeur et hauteur d'un bloc

                        #topmenuwrap {
                        height: 31px;
                        margin: 0;
                        padding: 0;
                        position: relative;
                        z-index: 2000;
                        }

                        Pour moi c est un probleme de z-index: vu la valeur il est au dessus dans le flux, donc c est normal que ton bloc passe en dessous.
                        Vu que les deux ne sont pas au meme niveau, il est impossible qu une marge ou un espacement repousse le menu.

                        Commentaire


                        • #13
                          Re : Augmenter la largeur et hauteur d'un bloc

                          En fait lefabdu51, tu mets ton code ou?
                          Car en le mettant à la place du #topmenuwrap, le menu se retrouve complétement à gauche de la page, mais pas plus vers le bas.

                          Sinon, PhilJ, je n'ai pas de résultat avec le custom...
                          Voici ce que j'ai avec l'inspecteur de FireFox:


                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                          <html lang="fr-fr" xml:lang="fr-fr" xmlns="http://www.w3.org/1999/xhtml" slick-uniqueid="3">
                          <head></head>
                          <body>
                          <div id="headerwrap" class="gainlayout"></div>
                          <div id="topmenuwrap" class="gainlayout"></div>
                          <div id="allwrap" class="gainlayout"></div>
                          <div id="footerwrap" class="gainlayout"></div>
                          <div id="lightbox-tmp"></div>
                          <div id="lightbox-loading"></div>
                          <div id="lightbox-overlay" style="display: none;"></div>
                          <div id="lightbox-wrap"></div>
                          </body>
                          </html>
                          Dernière édition par mlamer à 04/02/2014, 11h34

                          Commentaire


                          • #14
                            Re : Augmenter la largeur et hauteur d'un bloc

                            Bon, à force de tatonnement, voici ce que j'ai fait et qui marche:

                            ligne 85:
                            #topmenuwrap {
                            margin: 50px;
                            padding: 0 0 0 0;
                            position: relative;
                            height:31px;
                            z-index:2000;

                            Lignes vers 270 et +

                            #logo h2 {
                            line-height: 0.8;
                            font-size: 72px;
                            font-family: "Georgia", serif;
                            font-weight: 400;
                            letter-spacing: 1px;
                            margin: 20px 0 0 0px;
                            padding: 0;

                            #logo h3 {
                            font-size: 28px;
                            font-family: Verdana, Arial, Helvetica, sans-serif;
                            width: 800px;
                            height: 340px;
                            Ce qui me permet d'avoir ça:
                            Cliquez sur l'image pour l'afficher en taille normale

Nom : top4.jpg 
Affichages : 1 
Taille : 120,5 Ko 
ID : 1803263Cliquez sur l'image pour l'afficher en taille normale

Nom : top4.jpg 
Affichages : 1 
Taille : 120,5 Ko 
ID : 1803263

                            Par contre si je le mets dans le fichier custom.css, rien à faire...il doit se charger avant, mais comment le faire se charger aprés ???

                            une dernière chose, pourquoi si je veux changer la couleur, par exemple en rajoutant la ligne :
                            color:#40013b;
                            Ca ne change rien?

                            Merci.
                            Dernière édition par mlamer à 04/02/2014, 12h00

                            Commentaire


                            • #15
                              Re : Augmenter la largeur et hauteur d'un bloc

                              Bonjour,


                              Envoyé par mlamer Voir le message
                              [...] si je le mets dans le fichier custom.css, rien à faire...il doit se charger avant, mais comment le faire se charger aprés ???
                              ...Comment savoir si le custom.css n'est pas pas chargé sur votre site visible par tous ?


                              une dernière chose, pourquoi si je veux changer la couleur, par exemple en rajoutant la ligne :
                              color:#40013b; Ca ne change rien?
                              ...Concernant quelle classe ou quel container ?
                              Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X