aide pour personnalisation

Aides sur les thèmes PHPBoost aide pour personnalisation

EDN Concerné(e)

Rang

Inscrit le : 29/11/2010 à 14h49

Le 03/12/2010 à 21h16

Bonsoir à tous,

Je viens pour que vous puissiez m'éclairer, j'ai installer le theme "cameleon" pour mon site pro et je souhaiterais avoir mon theme qui soit extensible ... Pour ça j'ai consulté le tuto que vous avez mis en ligne .
Le petit "hique" est que je souhaiterais intégrer des images sur la gauche et la droite de mon theme .
J'ai mis en fondx.png un dégradé rouge (

et comme vous pouvez le constater le fondx ne se repete pas sur la largeur .

Donc dans un premier temps, comment dois je m'y prendre pour que celui ci soit extensible ?
Comment intégrer mes images dans le code ?

Je vous mets ci joint le

Code CSS :

/* --------------------------------------
design.css
Contient les conteneur, fortement dépendant du design.
--------------------------------------*/ /* Corps du site 
--------------------------------------*/
* {
    margin:auto;
    padding:0;
    font-size:100%;
}
 
body {
    background:#e03333 url(images/fondx.png) no-repeat;/*background-attachment: fixed ; */
    font-size:12px;
 
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana,
        'Bitstream Vera Sans', Times, serif;
    color:#0E2A48;
    margin:auto;
    padding:0;
width:1020px;
 
 
}
/* Conteneurs 
--------------------------------------*/
    /* ##### Conteneur global du site ###### */
div#global {
    margin:auto;
    margin-bottom:auto;
}
 
div#header_container,div#header_admin_container {
    background: url(images/header.png) no-repeat;
    background-position:22px 0px;
margin-bottom:3px;
}
 
/* ##### Entéte de la page ###### */
div#header,div#header_admin {
height:300px;
}
 
/* #####  Conteneur en dessous de l'entéte ###### */
div#sub_header{
background: url(images/sub_header2.png) no-repeat center;/*agrandire*/
    height:auto;
padding-top:50px;
text-align:center;
    padding-right:18px;
position:absolute;
height:50px;
width:1000px;
margin-top: 72px;
position:absolute;
top:150px;
 
 
}
div#sub_header_admin {
    height:auto;
text-align:left;
    padding-right:10px;
position:absolute;
height:34px;
width:846px;
margin-left:120px;
}
 
div#sub_header p a {
    color:#000;
margin-right:20px;
font-size:13px;
 font-family:"trebuchet ms";
 
 
 
}
 
/* Lien du subheader */
div#header .dynamic_menu h5.links {
 
    border:none;
    color:#888;
    width:140px;
height:10px;
    background:url(images/bouton.png) no-repeat;
    padding:15px 0px;
    font-size:11px;
    margin-right:0px;
}
 
div#header .dynamic_menu h5.links:hover {
    color:#888;
    cursor:default;
background:url(images/bouton.png) no-repeat;
margin-top:-5px;
 
}
 
div#header .dynamic_menu h5 a {
    color:#888;
    text-decoration:none;
}
 
/* ##### Compteur de visites  ###### */
div#compteur {
position:absolute;
left:770px;
top:55px;
padding:10px;
padding-top:15x;
padding-left:50px;
background: url(images/comp.png) no-repeat;
width : 180px;
height: 60px;
color: #888;
}
 
/* ##### Menu de gauche ###### */
div#left_menu {
    float:left;
    width:200px;
    margin:0;
    margin-top:10px;
    margin-right:10px !important;
    margin-right:0px;
    padding:0;
}
 
/* ##### Menu droit ###### */
div#right_menu {
    float:right;
    width:220px;
    margin:0;
    margin-top:10px;
    margin-left:-9px !important;
    margin-left:0px;
}
 
/* #####  Contenu de la page ###### */
div#main {
    width:auto;
    min-width:450px;
    overflow:hidden !important;
    height:auto !important;
    overflow:visible;
    height:1%;
    padding:0;
padding-top:0px;
    margin:0;
 
}
 
div#header .module_mini_top  {
margin:auto;
background:url(images/bouton.png) no-repeat center;
font-weight:bold;
height:40px;
margin-top:-5px;
padding-left:10px;
padding-right:20px;
padding-top:10px;
margin-right:20px;
text-align:center;
width:auto;
}
div#header .module_mini_top :hover {
margin:auto;
background:url(images/bouton.png) no-repeat center;
font-weight:bold;
height:40px;
margin-top:-10px;
padding-left:10px;
padding-right:20px;
padding-top:10px;
margin-right:20px;
text-align:center;
width:auto;
}
div#header .module_mini_contents  {
margin:auto;
background:none;
}
div#header .module_mini_bottom  {
margin:auto;
background:none;
}
 
/* ##### Barre de lien rapide ###### */
div#links { /*width:96%;*/
    text-indent:10px;
    margin-bottom:20px;
}
 
/* ##### Emplacement au dessus de contenu de la page ###### */
div#top_contents {
    margin-top:15px;
margin :0;
margin-left: 20px;
    margin-bottom:15px;
    background: none;
height:29px;
width:auto px;
}
 
/* ##### Emplacement en dessous de contenu de la page ###### */
div#bottom_contents {
    padding-top:15px;
    padding-bottom:15px;
    float:left;
}
 
/* ##### Bloc au dessus du pied de page ###### */
div#top_footer {
    clear:both;
    padding:0.75em;
    margin-top:50px;
    border-spacing:1px;
    height:auto;
 
 
}
 
/* ##### Pied de page ###### */
div#footer {
     clear:both;
    height:50px;
    margin:auto;
    margin-top:0px;
    padding:0px;
    padding-top:10px;
    padding-bottom:15px;
    text-align:center;
   margin-left:10px;
    background:url(images/footer.png) no-repeat center;
width :1035px;
}
 
div#footer span {
    color:#445766;
    font-size:10px;
}
 
div#footer span a {
    color:#445766;
    font-size:10px;
}
 
/* ##### Liens rapides ###### */
div#links_vertical {
    display:block !important;
    display:none;
    position:fixed;
    background:url(images/vertical_menu_repeat.png) repeat-y;
    top:45%;
    margin-left:989px;
    width:27px;
    text-align:center;
    padding-left:2px;
}
 
div#links_vertical_top {
    width:29px;
    background:url(images/vertical_menu_top.png) no-repeat;
    text-align:center;
    margin-left:-2px;
    padding-top:8px;
}
 
div#links_vertical_central {
    width:27px;
    text-align:center;
    margin-left:-2px;
    padding:4px 0px;
}
 
div#links_vertical_bottom {
    width:29px;
    background:url(images/vertical_menu_bottom.png) no-repeat;
    text-align:center;
    height:32px;
    margin-left:-2px;
}
 
.bglinks {
    background:url(images/bgmenu_links.jpg) no-repeat bottom right;
    margin:0px;
    padding:0px;
    list-style-type:none;
    padding-bottom:7px;
    margin-bottom:5px;
}
 
.block {
    margin:10px auto;
    padding:10px;
    border-spacing:1px;
    border:1px #cccccc solid;
    background-color:#ffffff;
    -moz-border-radius:12px;
    -khtml-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
    background:#F7F8F5 url(images/contentbg.png) repeat-x;
}
/* ##### Contenu central ###### */
div#main_content {
width:auto;
margin-right:0px;
margin-left:10px;
 
 
}
.main_content_borderl{
background:url(images/left_left.png) repeat-y left;
padding-left:8px;
padding-right:8px;
overflow:hidden !important;
height:auto !important;
overflow:visible;
height:1%;
clear:both;
}
.main_content_borderr{
background:url(images/right_right.png) repeat-y right;
padding-left:0px;
padding-right:0px;
overflow:hidden !important;
height:auto !important;
overflow:visible;
height:1%;
clear:both;
 
}
.main_top_l{
margin-right:22px !important;
 
width:22px;
height:41px;
background:url(images/top_l.png) no-repeat left;
float:left;
}
.main_top_r{
margin-left:0px !important;
margin-left:-3px;
width:21px;
height:41px;
background:url(images/top_r.png) no-repeat right;
float:right;
}
.main_top{
height:35px;
background: url(images/top_top.png) repeat-x;
padding-top:6px;
padding-left:6px;
margin-left:22px !important;
margin-left:0px;
margin-right:21px !important;
margin-right:0px;
}
.main_bottom_l{
 
width:22px;
height:25px;
background:url(images/bottom_l.png) no-repeat left;
float:left;
margin-top:-20px;
}
.main_bottom_r{
width:22px;
height:25px;
background:url(images/bottom_r.png) no-repeat right;
float:right;
margin-top:-20px;
margin-right:8px;
}
.main_bottom{
height:25px;
background: url(images/bottom_bottom.png) repeat-x bottom;
margin-right:5px;
margin-left:22px !important;
margin-left:0px;
margin-right:28px !important;
margin-right:0px;
margin-top:-20px;
}
.contenu { /* pour la couleur du contenu */
 
background: #f6f6f6;
margin-left:10px;
margin-right:10px;
}

Voili voilou si vous pouviez deja m'aiguiller !

Merci par avance

Edité par Steph___ Le 03/12/2010 à 21h17

Site web

pegasetkc

EDN Maitre-Sage

Rang

Inscrit le : 15/04/2010 à 19h37

Messages: 1940

Le 03/12/2010 à 21h30

tu déclare un no-repeat a ta classe body, voila la raison de la non répétition de ton fond ^^

Code CSS :

body {
    background:#e03333 url(images/fondx.png) repeat;/*background-attachment: fixed ; */
    font-size:12px;
 
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana,
        'Bitstream Vera Sans', Times, serif;
    color:#0E2A48;
    margin:auto;
    padding:0;
width:1020px;
}

Le plus simple tu fait une image de 1px de large et de 1000px de haut que tu vas répeter sur toute la largeur de l'écran comme ceci :

Code CSS :

body {
    background:#e03333 url(images/ton-image.png) repeat-x;
    background-attachment: fixed ;
    font-size:12px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, 'Bitstream Vera Sans', Times, serif;
    color:#0E2A48;
    margin:auto;
    padding:0;
    width:1020px;
}

Edité par pegasetkc Le 03/12/2010 à 21h33

Citation made in pegasetkc : "Sauvez un arbre mangez un castor"
Depuis que je connais Saturnin mon humour ressemble a cela : j'ai un string dans l'array

Site web

Steph___

EDN Concerné(e)

Rang

Inscrit le : 29/11/2010 à 14h49

Messages: 221

Le 03/12/2010 à 22h01

coucou pegasetkc

Merci pour tes reponses ... Ok pour le fondx je vais faire la modif dans la foulée !
(voilà c'est fait pour le fondx )

Mais pour incruster des images ensuite je vais m'y prendre comment ? Edité par Steph___ Le 03/12/2010 à 22h54

Site web

pegasetkc

EDN Maitre-Sage

Rang

Inscrit le : 15/04/2010 à 19h37

Messages: 1940

Le 03/12/2010 à 22h56

je vois pas trop ce que tu veut ^^

tu souhaite ajouter des images fixes par dessus le fond ?
Tu souhaite ajouter des images dynamiques sur le fond ?

Citation made in pegasetkc : "Sauvez un arbre mangez un castor"
Depuis que je connais Saturnin mon humour ressemble a cela : j'ai un string dans l'array

Site web

Steph___

EDN Concerné(e)

Rang

Inscrit le : 29/11/2010 à 14h49

Messages: 221

Le 03/12/2010 à 23h08

Citation:

tu souhaite ajouter des images fixes par dessus le fond ?

oui voilà, je voudrais faire cela

Site web

pegasetkc

EDN Maitre-Sage

Rang

Inscrit le : 15/04/2010 à 19h37

Messages: 1940

Le 03/12/2010 à 23h24

Alors il vas falloir choisir entre ton dégradé et tes images ou alors faire comme moi :

- faire une image de fond (background) très large genre 1920px et 800px de haut.
- Tu fait donc ton dégradé de haut en bas obligatoirement.
- Tu positionne les images en fonction de tes envies.

dans la classe global tu vas renseigné la couleur de fond avec le code de la couleur en bas de ton dégradé

et voila tu fait un no-repeat et le tour et joué

Citation made in pegasetkc : "Sauvez un arbre mangez un castor"
Depuis que je connais Saturnin mon humour ressemble a cela : j'ai un string dans l'array

Site web

Steph___

EDN Concerné(e)

Rang

Inscrit le : 29/11/2010 à 14h49

Messages: 221

Le 03/12/2010 à 23h31

ok , merci pour les précisions

Alors ceci va nous donné :

Code CSS :

body {
    background:#e03333 url(images/fondx.png) no-repeat;/*background-attachment: fixed ; */
    font-size:12px;
 
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana,
        'Bitstream Vera Sans', Times, serif;
    color:#0E2A48;
    margin:auto;
    padding:0;
width:1020px;
}

Et donc le "background:#e03333" qui correspond a la classe global ( le rouge du dégrader) .

Si c'est tout bon comme ça je fais mes tests et je tiens au courant .

Merci en tout cas pour ton aide

ps: j'ai trouver un exemple sympas de ce que je voulais faire ... Edité par Steph___ Le 03/12/2010 à 23h39

Site web

pegasetkc

EDN Maitre-Sage

Rang

Inscrit le : 15/04/2010 à 19h37

Messages: 1940

Le 03/12/2010 à 23h39

tout a fait

tu peut même mettre le fond en fixe en supprimant les balise /* et */ avant et après background-attachement , ce qui fait que ton background ne bouge pas c'est le contenu
un exemple concret ici

Citation made in pegasetkc : "Sauvez un arbre mangez un castor"
Depuis que je connais Saturnin mon humour ressemble a cela : j'ai un string dans l'array

Site web

Steph___

EDN Concerné(e)

Rang

Inscrit le : 29/11/2010 à 14h49

Messages: 221

Le 03/12/2010 à 23h50

Effectivement c'est pas mal non plus ... Je vais tester les deux et voir ce qui rendrais le mieux .
Apres sur le fond fixe ce qui me gene plus, c'est que si tu as pas un grand ecran , tu peux pas beneficier de tout le fond . exemple , j'ai un imac 27'' et pour moi no souci, je vois bien tout .
Par contre qq un qui se retrouve avec un 17'' ou meme 19'' ne verra pas tout ...

Donc a voir ...

Je test et je vous tiens au courant .

Merci de l'aide

(tres sympas ton site au passage

)

Site web

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

Les 10 derniers messages du forum...