Charte graphique, habillage et mise en page

5 messages dans ce sujet

Posté(e) · Signaler ce message

Bonjour,

Je suis novice dans la création de sites web, ne maîtrisant que le HTML.

De ce fait, et malgré mes recherches sur ce forum, je ne trouve pas comment je peux modifier la mise en page et l'habillage de la boutique, à l'image de ce site :

http://gentile.99k.org/peel5/

Voilà le code du style.css du site web auquel je souhaiterai rajouter la boutique. Si quelqu'un peut m'indiquer comment procéder, pour chaque parties (backround, logo, couleurs des textes etc.), merci d'avance.

body {

margin : 0 ;

padding : 0 ;

background : #212121 url(images/bg-site.jpg) center repeat-y;

text-align : center;

font-size : 0.7em;

color : #777474 ;

font-family : arial ;

}

/* SITE

********************************************************************/

#site {

width : 896px;

margin : 0 auto;

text-align : left ;

}

/* HEADER

********************************************************************/

#header {

position : relative ;

height : 219px;

background : url(images/header.jpg) ;

}

/* HEADER >> TITRE DU SITE >> H1

********************************************************************/

#header h1 {

position : absolute ;

bottom : 10px ;

right : 50px ;

margin : 0;

padding : 0 ;

font-size : 2em ;

font-weight : normal;

}

#header h1 a {

color : #9CDA07;

text-decoration : none;

}

/* HEADER >> MENU PRINCIPAL

********************************************************************/

#menu {

position : absolute ;

bottom : 0 ;

left : 25px;

}

#menu ul{

list-style : none ;

margin : 0;

padding : 0 ;

}

#menu li{

float : left ;

text-transform : uppercase ;

height : 46px;

line-height : 42px;

background : url(images/bg-li-menu.jpg) right no-repeat;

}

#menu li a{

margin : 0 ;

padding : 0 15px ;

text-decoration : none ;

color : #97D408 ;

font-weight : bold ;

}

#menu li a:hover {

color : #F7F4D5

}

/* CONTENT

********************************************************************/

#main {

overflow : auto ;

background : url(images/bg-content.jpg) center repeat-y;

}

/* CONTENT >> CENTRAGE

********************************************************************/

#centrage {

padding : 0 0 0 6px;

}

/* CONTENU

********************************************************************/

#contenu {

width : 458px ;

float : left ;

margin : 0;

padding : 20px 10px 0 20px ;

}

/* CONTENU >> POST

********************************************************************/

.post {

padding : 0 0 20px 0;

}

.post h2 {

font-size : 1.6em ;

padding : 0 ;

margin: 0 ;

color : #000;

font-weight : normal;

}

.post .sous-h2 {

margin : 0 ;

padding : 0;

color : #97D408 ;

font-size : 110%;

font-weight : bold ;

}

.post img {

float : right ;

margin : 0 10px 5px 20px;

}

.post a {

color : #97D408

}

/* SIDE RIGHT

********************************************************************/

#side {

width : 196px ;

float : left ;

padding : 0 ;

text-align : justify;

}

#side h2 {

font-size : 1em ;

margin : 0 ;

padding : 0 0 0 10px ;

color : #000 ;

background : url(images/side-h2.jpg);

height : 35px;

line-height : 35px;

text-transform : uppercase;

font-weight : normal;

}

#side ul{

list-style : none ;

margin : 5px 0 15px 0 ;

padding : 0;

color : #000

}

#side li{

margin : 0 ;

padding : 0 0 5px 0;

border-top : 1px solid #ccc;

}

#side li a{

padding : 0 0 0 20px;

display : block ;

height : 25px;

line-height : 25px;

text-decoration : none ;

color : #000;

}

#side li:first-child {

border-top: 0;

}

#side li a:hover{

color : #3F3F3F ;

}

#side p{

margin : 10px 0 25px 0 ;

padding : 0;

}

#side form {

margin : 0;

padding : 20px 0 0 0;

height : 50px;

}

#side input {

float : left ;

margin : 0;

padding : 0;

}

#side .champ {

width : 115px ;

height : 23px;

border-top : 1px solid #E2E2E2;

border-left : 1px solid #E2E2E2;

border-bottom : 1px solid #E2E2E2;

border-right : 0;

}

#side .recherche {

background : url(images/search.jpg);

height : 25px;

width : 67px;

border : 0;

}

/* SIDE LEFT

********************************************************************/

#side-left {

width : 176px ;

float : left ;

padding : 20px 0 0 10px ;

text-align : justify;

color : #A3A3A3;

}

#side-left h2 {

font-size : 1.4em ;

margin : 0 0 10px 0 ;

padding : 0 ;

color : #97D408 ;

}

#side-left h3 {

font-size : 1em ;

margin : 10px 0 0 0 ;

padding : 0 ;

color : #97D408 ;

}

#side-left p {

margin : 0 0 5px 0;

padding : 0;

}

/* FOOTER

*******************************************************************/

#footer {

height :63px;

text-align : center ;

background : url(images/footer.jpg) ;

}

#footer p {

margin : 0 ;

padding : 15px 0 0 0;

color : #97D408;

}

#footer a {

color : #97D408;

text-decoration : none ;

}

#footer a:hover {

text-decoration : underline ;

}

Partager ce message


Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

Tout ne se change pas à partir du code du .css

Il te faudra créer de nouveau bouton, ...

Partager ce message


Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

Bonjour Azerty,

Après l'installation de la boutique PEEL, il vous faut choisir un répertoire "template" (par défaut, "standard" ou bien "blog").

Une fois ce choix fait, pour modifier le design de la boutique, vous devez modifier les fichiers screen.css et left_right.css du répertoire sélectionné.

Par ailleurs, il n'est pas exclu que vous ayez à modifier certains fichiers de code PHP, template.php, haut.php, bas.php.

La question étant très générale, je vous propose de commencer par essayer d'obtenir le résultat que vous souhaitez, et de solliciter notre aide si vous rencontrez une difficulté bien ciblée.

Cordialement,

Partager ce message


Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

Bonjour Azerty,

Après l'installation de la boutique PEEL, il vous faut choisir un répertoire "template" (par défaut, "standard" ou bien "blog").

Une fois ce choix fait, pour modifier le design de la boutique, vous devez modifier les fichiers screen.css et left_right.css du répertoire sélectionné.

Par ailleurs, il n'est pas exclu que vous ayez à modifier certains fichiers de code PHP, template.php, haut.php, bas.php.

La question étant très générale, je vous propose de commencer par essayer d'obtenir le résultat que vous souhaitez, et de solliciter notre aide si vous rencontrez une difficulté bien ciblée.

Cordialement,

Merci pour votre aide, j'ai précisé ma question dans un nouveau sujet ;)

Partager ce message


Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

Bonjour Azerty,

Je clos donc ce sujet, et je vous réponds dans celui que vous venez d'ouvrir.

Cordialement,

Partager ce message


Lien à poster
Partager sur d’autres sites
Ce sujet ne peut plus recevoir de nouvelles réponses.

Twitter Advisto ecommerce

Facebook PEEL Shopping