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

[mlamer]

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:


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.

[PhilJ]

Re : Augmenter la largeur et hauteur d'un bloc

Bonjour,

Je voudrais augmenter la police du titre et du slogan.

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

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

.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

[mlamer]

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



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+

[mlamer]

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

[PhilJ]

Re : Augmenter la largeur et hauteur d'un bloc

Bonjour,

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) :

#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 :

#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 :

.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

[mlamer]

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?

[PhilJ]

Re : Augmenter la largeur et hauteur d'un bloc

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 :

#header {
  height: 120px;
}

devra s'écrire :

#header {
 height: 120px [COLOR=#ff0000]!important[/COLOR];
}

Ça devrait marcher cette fois :-)


Bonne soirée,



PhilJ

[mlamer]

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.

[mlamer]

Re : Augmenter la largeur et hauteur d'un bloc




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

[PhilJ]

Re : Augmenter la largeur et hauteur d'un bloc

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 :-\

[PhilJ]

Re : Augmenter la largeur et hauteur d'un bloc

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 :

#topmenuwrap {
  border: 0;
}

2 - Pour augmenter l'espace entre le menu et la galerie :

#topmenuwrap {
  margin: 0 auto 20px; /* remplacez 20px par la valeur de votre choix */
}

[lefabdu51]

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.

[mlamer]

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>

[mlamer]

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:


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.

[PhilJ]

Re : Augmenter la largeur et hauteur d'un bloc

Bonjour,

[...] 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 ?