[Blogger] "Agrandir" son blog

**le Mar Mai 01, 2007 8:49**

Bonjour !

Tout d'abord je m'excuse pour le vocabulaire qui risque d'être peu spécifique, mais je ne m'y connais pas assez pour pouvoir être plus précis que ce que je vais essayer de faire :oops:

Voilà, ce que je souhaiterai c'est augmenter de plusieurs pixels mon blog. Je m'explique, je souhaiterai que le côté droit de mon blog en gris (la marge qui contient Ouverture / Catégories / Archives) soit plus large pour pouvoir y incruster un nouveau module qui ne tient pas actuellement (un lecteur flash pour les photos, mais ça ce n'est pas très important). Comment puis-je faire cela ?

De plus, si je modifie la marge de droite, je devrais aussi modifier la partie principale (fond blanc, là où se trouve les articles)... Mais aussi la bannière verte dans lequel est écrit Exyntigor's Bloug ! Comment puis-je faire cela également ?

Voici l'adresse de mon blog pour que vous puissiez mieux vous représentez ce que j'ai écrit : http://exyntigor.blogspot.com/
Et ci-dessous voici un screen avec le nouveau module, vous comprendrez pourquoi je souhaite agrandir cette fameuse marge : en effet, les photos sont coupés, le module nécessite plus de place.

J'ai tout d'abord voulu diminuer la taille du module (ce qui est déjà beaucoup plus simple), mais ça ne rend vraiment pas bien.

Ci-dessous voici mon template. Pourriez-vous me dire ce que je dois modifier ?

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<link href='http://membres.lycos.fr/ultralevure/favexy.ico ' rel='shortcut icon' type='image/png'/>
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
Blogger Template Style
Name: TicTac
Author: Dan Cederholm
URL: www.simplebits.com
Date: 1 March 2004
Updated by: Blogger Team
*/

/* Variable definitions
====================

<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">

<Variable name="pagetitlecolor" description="Page Header Color"
type="color" default="#FFF" value="#FFFFFF">

<Variable name="datecolor" description="Date Header Color"
type="color" default="#f93" value="#ff9933">

<Variable name="titlecolor" description="Post Title Color"
type="color" default="#f63" value="#ff6633">

<Variable name="footercolor" description="Post Footer Color"
type="color" default="#999" value="#999999">

<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#999" value="#999999">

<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#666" value="#666666">

<Variable name="linkcolor" description="Link Color"
type="color" default="#69c" value="#6699cc">

<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#666699" value="#666699">

<Variable name="bodyfont" description="Text Font"
type="font"
default="normal normal 100% Verdana, sans-serif" value="normal normal 116% Times, serif">

<Variable name="pagetitlefont" description="Page Header Font"
type="font" default="normal normal 100% 'Lucida Grande','Trebuchet MS'" value="italic normal 100% Times, serif">

<Variable name="titlefont" description="Post Title Font"
type="font" default="normal bold 130% 'Lucida Grande','Trebuchet MS'" value="normal bold 130% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="sidebarheaderfont" description="Sidebar Title Font"
type="font" default="normal bold 130% 'Lucida Grande','Trebuchet MS'" value="normal bold 143% Georgia, Times, serif">
*/

/* ---( page defaults )--- */

body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: $textcolor;
background: #e0e0e0;
}

blockquote {
margin: 0 0 0 30px;
padding: 10px 0 0 20px;
font-size: 88%;
line-height: 1.5em;
color: #666;
background: url(http://www.blogblog.com/tictac/quotes.gif) no-repeat top left;
}

blockquote p {
margin-top: 0;
}

abbr, acronym {
cursor: help;
font-style: normal;
border-bottom: 1px dotted;
}

code {
color: #f63;
}

hr {
display: none;
}

img {
border: none;
}

/* unordered list style */

ul {
list-style: none;
margin-left: 10px;
padding: 0;
}

li {
list-style: none;
padding-left: 14px;
margin-bottom: 3px;
background: url(http://www.blogblog.com/tictac/tictac_orange.gif) no-repeat 0 6px;
}

/* links */

a:link {
color: $linkcolor;
}

a:visited {
color: $visitedlinkcolor;
}

a:hover {
color: #693;
}

a:active {
color: #cc3333;
text-decoration: none;
}

/* ---( layout structure )---*/

#outer-wrapper {
width: 847px;
margin: 0px auto 0;
text-align: left;
font: $bodyfont;
background: url(http://www.blogblog.com/tictac/tile.gif) repeat-y;
}

#content-wrapper {
margin-left: 42px; /* to avoid the border image */
width: 763px;
}

#main {
float: left;
width: 460px;
margin: 20px 0 0 0;
padding: 0 0 0 1em;
line-height: 1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar {
float: right;
width: 259px;
padding: 20px 0px 0 0;
font-size: 85%;
line-height: 1.4em;
color: $sidebartextcolor;
background: url(http://www.blogblog.com/tictac/sidebar_bg.gif) no-repeat 0 0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

/* ---( header and site name )--- */

#header-wrapper {
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
}

#header {
margin: 0;
padding: 25px 60px 35px 160px;
color: $pagetitlecolor;
background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom left;
}

#header h1 {
font-size: 200%;
text-shadow: #81A75B 2px 2px 2px;
}

#header h1 a {
text-decoration: none;
color: $pagetitlecolor;
}

#header h1 a:hover {
color: #eee;
}

/* ---( main column )--- */

h2.date-header {
margin-top: 0;
padding-left: 14px;
font-size: 90%;
color: $datecolor;
background: url(http://www.blogblog.com/tictac/date_icon.gif) no-repeat 0 50%;
}

.post h3 {
margin-top: 0;
font: $titlefont;
letter-spacing: -1px;
color: $titlecolor;
}

.post {
margin: 0 0 1.5em 0;
padding: 0 0 1.5em 14px;
border-bottom: 1px solid #ddd;
}

.post h3 a,
.post h3 a:visited {
color: $titlecolor;
text-decoration: none;
}

.post-footer {
margin: 0;
padding: 0 0 0 14px;
font-size: 88%;
color: $footercolor;
background: url(http://www.blogblog.com/tictac/tictac_grey.gif) no-repeat 0 8px;
}

.post img {
padding: 6px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

/* comment styles */

#comments {
padding-top: 10px;
font-size: 85%;
line-height: 1.5em;
color: #666;
background: #eee url(http://www.blogblog.com/tictac/comments_curve.gif) no-repeat top left;
}

#comments h4 {
margin: 20px 0 15px 0;
padding: 8px 0 0 40px;
font-family: "Lucida Grande", "Trebuchet MS";
font-size: 130%;
color: #666;
background: url(http://www.blogblog.com/tictac/bubbles.gif) no-repeat 10px 0;
height: 29px !important; /* for most browsers */
height /**/:37px; /* for IE5/Win */
}

#comments ul {
margin-left: 0;
}

#comments li {
background: none;
padding-left: 0;
}

.comment-body {
padding: 0 10px 0 25px;
background: url(http://www.blogblog.com/tictac/tictac_orange.gif) no-repeat 10px 5px;
}

.comment-body p {
margin-bottom: 0;
}

.comment-author {
margin: 4px 0 0 0;
padding: 0 10px 0 60px;
color: #999;
background: url(http://www.blogblog.com/tictac/comment_arrow.gif) no-repeat 44px 2px;
}

.comment-footer {
border-bottom: 1px solid #ddd;
padding-bottom: 1em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

/* ---( sidebar )--- */

.sidebar h2 {
margin: 0 0 0 0;
padding: 25px 0 0 40px;
font: $sidebarheaderfont;
color: $sidebarcolor;
height: 32px;
background: url(http://www.blogblog.com/tictac/sidebar_icon.gif) no-repeat 10px 15px;
height: 32px !important; /* for most browsers */
height /**/:57px; /* for IE5/Win */
}

.sidebar .widget {
margin: 0;
padding: 0 0 10px 10px;
border-bottom: 1px solid #ddd;
}

.sidebar li {
background: url(http://www.blogblog.com/tictac/tictac_green.gif) no-repeat 0 5px;
}

.profile-textblock {
clear: both;
margin-left: 0;
}

.profile-img {
float: left;
margin: 0 5px 5px 0;
border: 1px solid #ddd;
padding: 4px;
}

/* ---( footer )--- */

.clear { /* to fix IE6 padding-top issue */
clear: both;
}

#footer-wrapper {
margin: 0;
padding: 0 0 9px 0;
font-size: 85%;
color: #ddd;
background: url(http://www.blogblog.com/tictac/bottom_sill.gif) no-repeat bottom left;
}

#footer {
margin: 0;
padding: 20px 320px 20px 95px;
background: url(http://www.blogblog.com/tictac/bottom_sash.gif) no-repeat top left;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #main,
body#layout #sidebar {
padding-top: 0;
margin-top: 0;
}

body#layout #outer-wrapper,
body#layout #content-wrapper {
width: 740px;
}

body#layout #sidebar {
margin-right: 0;
margin-bottom: 1em;
}

body#layout #header,
body#layout #footer,
body#layout #main {
padding: 0;
}

body#layout #content-wrapper {
margin: 0px;
}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Exyntigor"s Bloug (en-tête)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Messages blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Text1' locked='false' title='Ouverture' type='Text'/>
<b:widget id='Label1' locked='false' title='Catégories' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Archives' type='BlogArchive'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> 
</body>
</html>

Je vous remercie par avance !

Pierre

**le Mar Mai 01, 2007 11:05**

Tu vas chercher dans ton code tout ce qui a une propriété width=" "
Tu vas regarder comment les zones s'imbriquent entre elles, tu vas changer au moins le outer-wrapper, content-wrapper, le main, et le sidebar

Tu vas xharger toutes les images background, et vérifie si tu as besoin de les modifier (uniquement pour celles qui sont en no-repeat)

Voilà

Maintenant ton site est trop large pour un écran 800*600

**le Mar Mai 01, 2007 11:10**

Je n'avais pas pensé à cela en effet.

Je vais voir si je ne peux pas rétrécir les photos, le module et voir si je peux pas mettre un lien vers les photos en grand format.

Merci bien pour l'aide en tout cas.

[Blogger] "Agrandir" son blog

[Blogger] "Agrandir" son blog

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne