Augmenter la largeur et hauteur d'un bloc

**PhilJ** · 04/02/2014, 14h24

Re : Augmenter la largeur et hauteur d'un bloc

Envoyé par mlamer Voir le message

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>

...Il manque l'essentiel, entre <head> et </head>. Montrez plutôt le code source de votre page entre <head> et </head> puisque c'est dans cet intervalle que doit apparaître l'appel au custom.css. Avec CTRL+U par exemple sous Chrome ou Firefox.

**PhilJ** · 04/02/2014, 14h40

Re : Augmenter la largeur et hauteur d'un bloc

Envoyé par mlamer Voir le message

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;
}

...C'est de plus en plus difficile à suivre car le code source que nous pouvons consulter en ligne est bien différent des codes ci-dessus. De plus, certaines directives ne se comprennent pas. Par exemple #topmenuwrap { margin: 50px; }. Pourquoi cette marge tout autour du menu ? Pourquoi pas plutôt plus modestement #topmenuwrap { margin-top: 50px; } ou bien { margin-top: 50px 0; } ?

**mlamer** · 04/02/2014, 14h52

Re : Augmenter la largeur et hauteur d'un bloc

Oui, je teste toput ça chez moi, et je mettrais en ligne aprés...

Pour les couleurs à changer, c'est pour les tittres et slogans, toujours...

SInon, mon code source en localhost:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr" >

<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" />
<link rel="stylesheet" href="/webzic/templates/a4joomla-darksunset-free/css/custom.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>
<script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
function keepAlive() { var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(1740000); });
window.addEvent('domready', function() {new DropdownMaxiMenu(document.getElement('div#maximenu ck'),{mooTransition : 'Quad',mooEase : 'easeOut',useOpacity : '0',dureeIn : 0,dureeOut : 500,menuID : 'maximenuck',testoverflow : '0',orientation : '0',style : 'moomenu',opentype : 'open',direction : 'normal',directionoffset1 : '30',directionoffset2 : '30',mooDureeout : '500',showactivesubitems : '0',mooDuree : 500});});
window.addEvent('domready', function() {new SlideList(document.getElement('div#maximenuck ul'),{fancyTransition : 'Quad',fancyEase : 'easeOut',fancyDuree : 500});});
</script>

<link rel="stylesheet" href="/webzic/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/webzic/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/webzic/templates/a4joomla-darksunset-free/css/template.css" type="text/css" />
<link rel="stylesheet" href="/webzic/templates/a4joomla-darksunset-free/css/color1.css" type="text/css" />



<style type="text/css">
#logo {
width:350px;
}
#headerright {
width:570px;
}
#slideshow-container {
width:940px;
height:380px;
}
#slideshow-container img {
width:940px;
height:380px;
}
#slcontrol {
width:940px;
top:43.421052631579%;
}
a#slprev {
background: url("/webzic/templates/a4joomla-darksunset-free/images/previous-black.png") no-repeat scroll left center transparent;
}
a#slnext {
background: url("/webzic/templates/a4joomla-darksunset-free/images/next-black.png") no-repeat scroll right center transparent;
}
</style>
<script src="/webzic/templates/a4joomla-darksunset-free/js/verysimpleslideshow.js" type="text/javascript"></script>
</head>
<body>

<div id="headerwrap" class="gainlayout">
<div id="header" class="gainlayout" style="width:980px;">
<div id="logo" class="gainlayout">
<h2><a href="http://localhost/webzic/" title="WebZic">WebZic</a></h2>
<h3>Tous les concerts Pop/Rock de France</h3>
</div>
<div id="headerright" class="gainlayout">
<div id="hsocial" class="gainlayout">
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>

<div id="topmenuwrap" class="gainlayout">
<div id="topmenu" class="gainlayout" style="width:968px;">
<div class="moduletable">

<div class="maximenuckh" id="maximenuck" style="z-index:10;">
<div class="maxiroundedleft"></div>
<div class="maxiroundedcenter">
<ul class="menu maximenuck" style="background:#40013B">
<li class="maximenuck item101 current active first level1 " style="z-index : 12000;"><a class="maximenuck " href="/webzic/"><span class="titreck">Accueil</span></a>
</li>
<li class="maximenuck item110 level1 " style="z-index : 11999;"><a class="maximenuck " href="/webzic/index.php/blog"><span class="titreck">Blog</span></a>
</li>
<li class="maximenuck item103 last level1 " style="z-index : 11998;"><a class="maximenuck " href="/webzic/index.php/contact"><span class="titreck">Contact</span></a></li> </ul>
</div>
<div class="maxiroundedright"></div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>

</div>
<div class="moduletable">

<ul class="menu">
<li class="item-113"><a href="/webzic/index.php/creer-un-article" >Créer un article</a></li></ul>
</div>

<div class="clr"></div>
</div>
<div class="clr"></div>

</div>

<div id="allwrap" class="gainlayout">

<div id="wrap" class="gainlayout" style="width:980px;">

<div id="pathway" class="gainlayout">
<script type="text/javascript">
jQuery(function(){
doTimer()
})
var t;
var timer_is_on=0;

function timedCount()
{
jQuery('.rg-image-nav-next').click()
t=setTimeout("timedCount()",4000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount(4000);
}
}

function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
<style type="text/css">
.rg-image img{
max-height:150 !important;
max-width: !important;
}
</style>
<noscript>
<style type="text/css">
.es-carousel87 ul{
display:block;
}
</style>
</noscript>
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
<div class="rg-image-wrapper">
{{if itemsCount > 1}}
<div class="rg-image-nav">
<a href="#" class="rg-image-nav-prev">Previous Image</a>
<a href="#" class="rg-image-nav-next">Next Image</a>
</div>

**mlamer** · 04/02/2014, 14h53

Re : Augmenter la largeur et hauteur d'un bloc

Oui, je teste toput ça chez moi, et je mettrais en ligne aprés...

Pour les couleurs à changer, c'est pour les tittres et slogans, toujours...

SInon, mon code source en localhost:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr" >

<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" />
<link rel="stylesheet" href="/webzic/templates/a4joomla-darksunset-free/css/custom.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>
<script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
function keepAlive() { var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(1740000); });
window.addEvent('domready', function() {new DropdownMaxiMenu(document.getElement('div#maximenu ck'),{mooTransition : 'Quad',mooEase : 'easeOut',useOpacity : '0',dureeIn : 0,dureeOut : 500,menuID : 'maximenuck',testoverflow : '0',orientation : '0',style : 'moomenu',opentype : 'open',direction : 'normal',directionoffset1 : '30',directionoffset2 : '30',mooDureeout : '500',showactivesubitems : '0',mooDuree : 500});});
window.addEvent('domready', function() {new SlideList(document.getElement('div#maximenuck ul'),{fancyTransition : 'Quad',fancyEase : 'easeOut',fancyDuree : 500});});
</script>

<link rel="stylesheet" href="/webzic/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/webzic/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/webzic/templates/a4joomla-darksunset-free/css/template.css" type="text/css" />
<link rel="stylesheet" href="/webzic/templates/a4joomla-darksunset-free/css/color1.css" type="text/css" />



<style type="text/css">
#logo {
width:350px;
}
#headerright {
width:570px;
}
#slideshow-container {
width:940px;
height:380px;
}
#slideshow-container img {
width:940px;
height:380px;
}
#slcontrol {
width:940px;
top:43.421052631579%;
}
a#slprev {
background: url("/webzic/templates/a4joomla-darksunset-free/images/previous-black.png") no-repeat scroll left center transparent;
}
a#slnext {
background: url("/webzic/templates/a4joomla-darksunset-free/images/next-black.png") no-repeat scroll right center transparent;
}
</style>
<script src="/webzic/templates/a4joomla-darksunset-free/js/verysimpleslideshow.js" type="text/javascript"></script>
</head>
<body>

<div id="headerwrap" class="gainlayout">
<div id="header" class="gainlayout" style="width:980px;">
<div id="logo" class="gainlayout">
<h2><a href="http://localhost/webzic/" title="WebZic">WebZic</a></h2>
<h3>Tous les concerts Pop/Rock de France</h3>
</div>
<div id="headerright" class="gainlayout">
<div id="hsocial" class="gainlayout">
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>

<div id="topmenuwrap" class="gainlayout">
<div id="topmenu" class="gainlayout" style="width:968px;">
<div class="moduletable">

<div class="maximenuckh" id="maximenuck" style="z-index:10;">
<div class="maxiroundedleft"></div>
<div class="maxiroundedcenter">
<ul class="menu maximenuck" style="background:#40013B">
<li class="maximenuck item101 current active first level1 " style="z-index : 12000;"><a class="maximenuck " href="/webzic/"><span class="titreck">Accueil</span></a>
</li>
<li class="maximenuck item110 level1 " style="z-index : 11999;"><a class="maximenuck " href="/webzic/index.php/blog"><span class="titreck">Blog</span></a>
</li>
<li class="maximenuck item103 last level1 " style="z-index : 11998;"><a class="maximenuck " href="/webzic/index.php/contact"><span class="titreck">Contact</span></a></li> </ul>
</div>
<div class="maxiroundedright"></div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>

</div>
<div class="moduletable">

<ul class="menu">
<li class="item-113"><a href="/webzic/index.php/creer-un-article" >Créer un article</a></li></ul>
</div>

<div class="clr"></div>
</div>
<div class="clr"></div>

</div>

<div id="allwrap" class="gainlayout">

<div id="wrap" class="gainlayout" style="width:980px;">

<div id="pathway" class="gainlayout">
<script type="text/javascript">
jQuery(function(){
doTimer()
})
var t;
var timer_is_on=0;

function timedCount()
{
jQuery('.rg-image-nav-next').click()
t=setTimeout("timedCount()",4000);
}

**PhilJ** · 04/02/2014, 15h34

Re : Augmenter la largeur et hauteur d'un bloc

Envoyé par mlamer Voir le message

Oui, je teste tout ça chez moi, et je mettrais en ligne aprés...

...Après quoi donc ? Pourquoi ne pas nous permettre de vous aider dès maintenant ?

[...] mon code source en localhost:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr" >

<head>
[...]
<link rel="stylesheet" href="/webzic/templates/a4joomla-darksunset-free/css/custom.css" type="text/css" />
[...]
<link rel="stylesheet" href="/webzic/templates/a4joomla-darksunset-free/css/template.css" type="text/css" />
<link rel="stylesheet" href="/webzic/templates/a4joomla-darksunset-free/css/color1.css" type="text/css" />
[...]
</head>

...On voit ici que custom.css est bien chargé, mais avant template.css. Donc si vous insérez des directives CSS dans custom.css sans prendre la précaution de les accompagner de !important, il y a un risque élevé qu'elles ne soient pas prises en compte.

Il y a probablement une autre solution pour faire en sorte que custom.css se charge après template.css (= juste avant </head>). Je vous indiquerai cette solution si vous êtes d'accord pour travailler en ligne plutôt qu'en local.

Au passage, une dernière feuille de style se charge après template.css (cf. l'extrait de votre code source ci-dessus) : color1.css. Vous pourriez bien sûr entrer vos modifications dans ce fichier, car elles seraient respectées à la lettre, et cela — sauf dans de très rares cas — sans utiliser la précision !important... Mais vous devriez alors garder à l'esprit qu'une mise à jour du template risque un jour de l'écraser. Donc dans ce cas, une sauvegarde à jour de ce color1.css serait absolument indispensable.

...Cela dit, encore une fois, altérer le template n'est pas une bonne solution en général. La meilleure est toujours une surcharge dans une feuille de style de type custom.css totalement indépendante du template. La plupart des templates commerciaux ainsi que certains templates gratuits sont d'ailleurs livrés d'emblée avec cette possibilité (ce n'est manifestement pas le cas de votre template).

Bonne continuation,

PhilJ

**mlamer** · 04/02/2014, 18h20

Re : Augmenter la largeur et hauteur d'un bloc

Je vais donc mettre en ligne et revenir ici...

**lefabdu51** · 04/02/2014, 18h35

Re : Augmenter la largeur et hauteur d'un bloc

cherches dans ton fichier css la regle que j ai indiquée.
et dans les propriétés changes la valeur de z-index:2000 pour un chiffre tel que 0. a toi de tester pour determiner la valeur exacte.

Une valeur trop petite et l effet serat inverse ton module passerat en dessous au lieu d etre au dessus

**mlamer** · 05/02/2014, 03h26

Re : Augmenter la largeur et hauteur d'un bloc

Merci,

Oui, j'ai testé, c'est OK, mais dans le fichier template.css

Pas dans le custom.css

Et pour changer la couleur de ces titres, je peux faire quoi?
J'ai bien changé la police, mais rien à faire avec la couleur...

Et c'est en ligne: www.WebZic.fr

**mlamer** · 06/02/2014, 11h32

Re : Augmenter la largeur et hauteur d'un bloc

Le site est en ligne, il me reste 2 choses que j'aimerai modifier:
1° la couleur du titre et du slogan
2° la couleur du fond, un peu trop noire...

SI vous pouviez m'aider?

Merci.

Pour le fichier custom, il se lit avant, et je ne sais comment changer ça...

**PhilJ** · 07/02/2014, 11h02

Re : Augmenter la largeur et hauteur d'un bloc

Bonjour,

1° -

Envoyé par mlamer Voir le message

Le site est en ligne, il me reste 2 choses que j'aimerai modifier:
1° la couleur du titre et du slogan

...Les couleurs évoquées sont définies dans /templates/a4joomla-darksunset-free/css/color1.css :

Code:

#logo h2 {
  color: #EEEEEE;
}
#logo h2 a:link,
#logo h2 a:visited,
#logo h2 a:hover,
#logo h2 a:active {
  color: #EEEEEE;
}
#logo h3 {
  color: #EEEEEE;
}

2° -

2° la couleur du fond, un peu trop noire...

...Dans la même feuille de style :

Code:

body {
  background: none repeat scroll 0 0 #252524;
}

3° -

Pour le fichier custom, il se lit avant, et je ne sais comment changer ça.

Solution radicale et immanquable :

a) Désinstallez le plugin précédemment installé.
b) Téléchargez et installez à la place 'OpenPotion Head and Body' : http://www.openpotion.com/website-de...gin-for-joomla –
c) Dans les paramètres de ce plugin, volet « Just before </head> », collez ce code :

Code:

<link rel="stylesheet" href="/templates/a4joomla-darksunset-free/css/custom.css" type="text/css" />

d) Activez et enregistrez ce plugin 'OpenPotion Head and Body'.
e) Rafraîchissez la page de votre site puis regardez son code source : custom.css est maintenant chargé en tout dernier, juste avant </head>. Donc toutes vos modifications CSS ne devraient plus se faire que dans ce fichier (vous pouvez même rétablir le template.css d'origine). Elles l'emporteront toujours sur les directives des autres feuilles de style, notamment template.css et color1.css.

4° -

Corrigez :

a) Dans custom.css, enlevez les instructions <head> et </head> qui n'ont rien à voir avec CSS.
b) Enlevez également la directive height dans

Code:

#logo h3 {
  height: 340px;
}

c) Si vous n'utilisez pas la zone située à droite du titre & du slogan du site, vous pouvez la rendre invisible en ajoutant cette ligne dans custom.css :

Code:

#headerright {
  display: none;
}

d) Attention aussi : vous avez défini des polices de caractères non standard, c.-à-d. qui ne sont pas installées sur tous les ordinateurs. C'est le cas de "Comic Sans MS", "book antiqua", "palatino". Il existe plusieurs moyens de faire appel à ces polices non standard, mais là, sans autre précaution, vous ne pouvez pas du tout contrôler le rendu de votre sites sur les ordinateurs de vos visiteurs.

...Et bien sûr : faites tout ceci sur le site en ligne si vous souhaitez continuer d'être aidé :-)

Bonne journée,

PhilJ

**mlamer** · 08/02/2014, 15h41

Re : Augmenter la largeur et hauteur d'un bloc

Suyper, plein de choses qui marchent en local.

Je vais donc faire ça en ligne. Pour la place à droite du titre et slogan, en fait j'aimerai y mettre le logo qui est un peu plus bas, mais je n'y arrive pas. J'ai fait un module avec ce logo et position "j'ai tout cherché)...

Il faudrait faire quoi pour l'avoir à la suite du logo et titre?

Et dans templates/a4joomla-darksunset-free/css/color1.css, j'ai bien changé les couleurs, mais ça ne change pas sur le site

Grand merci en attendant.

**PhilJ** · 08/02/2014, 18h43

Re : Augmenter la largeur et hauteur d'un bloc

Envoyé par mlamer Voir le message

Pour la place à droite du titre et slogan, en fait j'aimerai y mettre le logo qui est un peu plus bas, mais je n'y arrive pas. J'ai fait un module avec ce logo et position "j'ai tout cherché)...

...Vous avez plusieurs fois

Code:

<p style="text-align: right;">&nbsp;</p>

=> Enlevez-les, et ajoutez dans votre custom.css :

Code:

#logo {
  float: left; /* au lieu de none */
}
#hsocial {
  margin: 0; /* au lieu de 35px 0 0 */
}

dans templates/a4joomla-darksunset-free/css/color1.css, j'ai bien changé les couleurs, mais ça ne change pas sur le site

...Vous êtes libre, bien sûr, mais vous devriez plutôt faire tout cela dans votre custom.css (qui pour le moment ne se charge pas dans la version accessible en ligne).

Bonne soirée,

PhilJ

**mlamer** · 09/02/2014, 01h32

Re : Augmenter la largeur et hauteur d'un bloc

Oui, je vais le faire...j'ai juste peur de me gourrer...

Pour les couleurs c'est OK? il y a eu un temps de latence entre le changement en FTP et le site...

Dans quel fichier j'ai ça: ?

<p style="text-align: right;"> </p>

Car je ne le trouve pas...et donc si il y en plusieurs je vire tout ou j'en laisse un ?

Et donc le fichier custom.css devrait ressembler à ça:?

/* Add your own custom css to this file. You may wish to use css !important calls to override css from the template css files.
----------------------------------------------------------- */

#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;
}
#header {
height: 120px !important;
}

#logo h2 {
color: #EEEEEE;
}
#logo h2 a:link,
#logo h2 a:visited,
#logo h2 a:hover,
#logo h2 a:active {
color: #EEEEEE;
}
#logo h3 {
color: #EEEEEE;
}
body {
background: none repeat scroll 0 0 #252524;
#logo {
float: left; /* au lieu de none */
}
#hsocial {
margin: 0; /* au lieu de 35px 0 0 */

}

**PhilJ** · 10/02/2014, 02h26

Re : Augmenter la largeur et hauteur d'un bloc

Bonjour,

Envoyé par mlamer Voir le message

Oui, je vais le faire...j'ai juste peur de me gourrer...

...Il est certain qu'il faut s'astreindre à faire des sauvegardes. Chaque nouvelle intervention dans custom.css devrait être précédée d'une copie de sauvegarde. Le plus simple pour cela est d'aller dans l'explorateur Windows, dans le dossier contenant votre custom.css local. Une fois là, appuyez sur CTRL, puis cliquez le fichier en question en le « tirant ». Vous obtiendrez ainsi, à partir de custom.css : Copie de custom.ccs, puis Copie (2) de custom.css, Copie (3) de custom.css, etc.

Dans quel fichier j'ai ça: ? <p style="text-align: right;"> </p>

...Ce n'est pas dans un fichier, c'est dans le module qui contient le logo que vous avez introduit à droite de l'en-tête. Ces lignes parasites sont juste au-dessus de votre logo. il faut les retirer car elles font descendre votre logo inutilement.

Concernant justement votre logo, il vaudrait mieux, pour la même raison, l'insérer plutôt dans un container de type <div>...</div> que comme vous le faites dans un paragraphe (= <p>...</p>), car vos paragraphes ont par défaut une marge, en haut et en bas, en l'occurrence de 6 px, alors qu'un <div> n'aurait aucune marge, ce qui permettrait de mieux le loger.

Et donc le fichier custom.css devrait ressembler à ça:?

...Le mieux serait de mettre en ligne votre custom.css, car pour le moment il n'y est toujours pas.

Bonne journée,

PhilJ

**mlamer** · 10/02/2014, 13h17

Re : Augmenter la largeur et hauteur d'un bloc

Pour le module logo, si je ne mets pas des espaces en haut, (<p style="text-align: right;"> </p> ), le logo arrive dans la barre de menus.

Mais OK, je prends le risque ce soir je mets le custom avec le plg donné...mais devrait-il être comme demandé ci-dessus? Car si je le mets il faut qu'il soit bon, sinon, je vais galérer...

Et ça, "l'insérer plutôt dans un container de type <div>...</div>", je ne sais pas faire...
Encore merci de ta patience...

Augmenter la largeur et hauteur d'un bloc

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association