Jump to content
Sign in to follow this  
C2LABOMB

[ global.css ] [RESOLU]->arriere plan!!![RESOLU]->icones 32x32!!![PAS RESOLU]Probleme de marge!!!

Recommended Posts

Bien le bonjour a vous.
je debarque de oscommerce et je decouvre prestashop!

voila ma question:
dans le fichier global.css
ou se trouve la ligne permetant de changer l'arriére plan.
un numero de ligne ou une indication du type /* Menu AJOUT*/ ou /* Useful */ m'aiderais bien
Par exemple sur image ci-jointe
comment changer ce qui reste de blanc en noir???
est il possible d'inserer une image de fond???

j'ai deja lu sur ce forum ce qui se trouve a propos du background.

En attente de vos réponse
Cordialement
C2LABOMB

4916_XByTTZfGR7mPmo6jqFXM_t

Share this post


Link to post
Share on other sites

Autre question pertinante:
comment centrer l'image du logo (logo.jpg)
et peut on la remplacer par un flash???

En attente de vos réponse
Cordialement
C2LABOMB

Share this post


Link to post
Share on other sites

comment reduire l'ensemble de la boutique
voir shema reduire zone 1 a zone 2.

En attente de vos réponse
Cordialement
C2LABOMB

4919_WjL6f2e0dCLqbhvsfxNU_t

Share this post


Link to post
Share on other sites

hmmm c'est tout a ton honneur de vouloir modifier ton theme, mais je crois, vu les questions que tu poses, un passage sur le site du zéro ou alsacréation te serais bénéfique avant de te lancer:

http://www.siteduzero.com/

http://www.alsacreations.com/


De plus, il existe un outil sympa pour modifier ton Global css en live : Firefox+ plugin Firebug.

V++

Atch

Share this post


Link to post
Share on other sites

Merci Atch pour ta réponse,
mais sa ne m'eclaire pas plus.
Pour modifier mon global.css j utilise dreamweaver.
ou firebug OK...

Ensuite je lis tes 2 sites
que je regarde deja depuis plusieurs annnée...

ma question etais simple

ou se trouve la ligne permetant de changer l’arriére plan.
un numero de ligne ou une indication du type /* Menu AJOUT*/ ou /* Useful */ m’aiderais bien



il y a bien un developpeur de theme
dans les parage qui pouras me répondre.
la sa ressemble a débrouille toi...
je pense que cette ligne peut intéresser toute la communauté NON....

En attente de vos réponse
Cordialement
C2LABOMB

Share this post


Link to post
Share on other sites

pour modifier background

dans le fichier global.css
a la ligne 18

body {
   background: #87ceeb url('../img/infoboxcontentsbg.jpg') no-repeat; background-position: top center; background-attachment:fixed;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #3F96CD;
   text-align:center;
   margin-top: 12px; 
}



modifier la ligne

background: #87ceeb url('../img/infoboxcontentsbg.jpg') no-repeat; background-position: top center; background-attachment:fixed;

sachant que

background: #87ceeb   ###->>>egal couleur
url('../img/infoboxcontentsbg.jpg') ###->>>Url de l'image
no-repeat  ###->>> ne pas repeter image
background-position: top center  ###->>>position de l'image au centre en haut
background-attachment:fixed ###---> je seche un peu!!!



une réponse de ce type me plairais bien
a bon entendeur
En attente de vos réponse
Cordialement
C2LABOMB

Share this post


Link to post
Share on other sites

ok esta
on parle bien de cette ligne

#center_column {
   width: 566px;
   margin: 0 0 30px 0;

Share this post


Link to post
Share on other sites

dans le fichier global.css

vers la ligne 216

dans la rubrique

/* global layout */



on trouve ceci

#page { 
   width: 980px;
   margin: 0 auto 2px auto;
   text-align:left;
   background-color: #FFFFFF;
}
h1#logo {
   float: center;
   width: 100%;
   margin-top: 0px;
   padding-left: 0px;
   background-color: #055C77;
}

#header {
background : #055C77 url(../img/header.jpg) no-repeat center top; 
   float: left;
   height:109px;
   width: 99%;
   text-align: right;
   margin: 0 0 0 0px;
}
#left_column, #center_column, #right_column {
   float:left;
}
#left_column {
   clear:left;
   width:190px;
   margin-left: 3px;
padding-right: 12px;
}
#center_column {
   width: 566px;
   margin: 0 0 30px 0;
}
#right_column {
   width: 190px;
   padding-left: 15px;
}

Share this post


Link to post
Share on other sites

Si tu veux un fond de page noir:

#page {
width: 980px;
margin: 0 auto 2px auto;
text-align: left;
background-color: #000000;
border: thin solid #FF0000;

Si tu veux uniquement la colonne du centre noire :

#center_column {
background-color: #000000;
width: 556px;
margin: 0 0 30px 0;
}

Share this post


Link to post
Share on other sites

Merci Esta
Voici une premiere réponse
donc pour la couleur de l'arriere plan de vos page
modifier cette ligne

dans le fichier global.css

vers la ligne 216

dans la rubrique

/* global layout */



#page { 
   width: 980px;
   margin: 0 auto 2px auto;
   text-align:left;
   background-color: #FFFFFF;


indiquer la couleur ici
  background-color: #FFFFFF;  ###->>> #FFFFFF etant blanc



Voila Esta nous a tous eclairé
j'espere que cette réponse vous servira

Pieces jointes AVANT et APRES

5320_B4brv3BHobUb1zk7ZId7_t

5321_yO0VFETuLGTQrA6XtCH5_t

Share this post


Link to post
Share on other sites

C2LABOMB, juste pour info je trouve tes posts pénibles à lire... Si les autres sont du même avis que moi, tu n'auras pas beaucoup de réponses...

Share this post


Link to post
Share on other sites

Je parlais pas du contenu, je parlais de la mise en forme (gras, couleurs)

Share this post


Link to post
Share on other sites

je reviens a la charge avec une question!!!

-Comment redimensionner les icones sur la photo si jointe
-j'ai lu que c'etais pas modifiable le $HOOK_TOP
-y as t'il un moyen de le faire par global.css

-Peut on les remplacer par des bouttons???

en attente de vos réponse
Cordialement
C2LABOMB

5314_qLn87NwnIlHx393kYeti_t

Share this post


Link to post
Share on other sites

Bonjour C2LABALLE,

Tu peux modifier la taille des icônes ou les remplacer par des boutons en allant dans prestashop 1.105>themes>prestashop>img>icon et tu vas dans un éditeur graphique ou dans photofiltre (gratuit et simple)où tu redimensionnes les images.
Tu peux les remplacer par des boutons que tu renommeras avec le même nom que l'image que tu remplaceras au même format (.gif si l'image à la base est en gif, etc...)et que tu replaceras dans le dossier icon après avoir supprimé les images d'origine.
Voilà!

Cordialement,

Mandrake.

PS: poste un message à la fois, sinon tout le monde t'enverra aux oubliettes ;-)
Perso j'ai fréquenté les coquibus à Corbeille-Essonne...spécial dédicace...

Share this post


Link to post
Share on other sites

j'ai deja tester cette solution sachant que les icones ne depasse pas 16 x 16
comment augmenté la taille a 32 x 32 ou plus???

Share this post


Link to post
Share on other sites

As-tu déjà essayé de modifier la taille et de rimplanter les icones malgré tout ?

Share this post


Link to post
Share on other sites

oui remplacement standar ca marche en 16 x 16
mais quand j'essaie en 32 x 32 ils sont coupé
le but et de trouvé l'endrois ou ce trouve les lignes
sinon en remplacement par boutton c'est pas possible!!!

je remet l'image ici

5340_QyZADD7OqskPNxTiIa4K_t

Share this post


Link to post
Share on other sites

en cherchant un peu j'ai trouvé ça
sur un site australien
image jointe

la les icones c'est du 32 x 32
et c'est donc possible de le faire

5341_kaZBrB2dXN9iDPsvOocX_t

Share this post


Link to post
Share on other sites

Si tu es sous firefox, utilises firebug pour trouver la ligne qui correspond à la taille maxi de ces icones puis modifie-la dans le fichier correspondant.
Cet outil te servira pour tous les éléments que tu désires changer sur ton site.

Share this post


Link to post
Share on other sites

ok je viens d'essayé
voila ce que sa donne.

contact



aucune trace de l'icone???

a si en faite

#header_link_contact a {global.css (ligne 787)
background-image:url(../img/icon/contact.gif);
}



c surement ça

#header_links a {global.css (ligne 773)
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
color:#595A5E;
display:block;
height:15px;
padding-top:19px;
text-align:center;
text-decoration:none;
}

Share this post


Link to post
Share on other sites

En fait il faut que tu trouves le "container"css qui contient les icônes, c'est sa taille que tu dois modifier avant de pouvoir modifier celle de tes icônes.

Share this post


Link to post
Share on other sites

Mon icone est toujours coupé
voila ce qu'il y a dans global.css

#header_user #your_account a {global.css (ligne 849)
background-image:url(../img/icon/my-account.gif);
}
#header_user #shopping_cart a, #header_user #your_account a {global.css (ligne 840)
background-position:left top;
background-repeat:no-repeat;
height:20px;
padding:2px 0 4px 26px;
text-decoration:none;
}
a {global.css (ligne 142)
color:#5D717E;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
text-decoration:underline;
}
* {global.css (ligne 11)
margin:0;
padding:0;
}
Hérité deli#your_account
#header_user #shopping_cart, #header_user #your_account {global.css (ligne 839)
font-size:0.9em;
}
#header_user li {global.css (ligne 833)
line-height:2em;
white-space:nowrap;
}
Hérité deul#header_nav
#header ul {global.css (ligne 688)
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
Hérité dediv#header_user
#header #header_user {global.css (ligne 824)
text-align:right;
}
Hérité dediv#header
#header {global.css (ligne 192)
text-align:right;
}
Hérité dediv#page
#page {global.css (ligne 182)
text-align:left;
}
Hérité debody#index
body {global.css (ligne 16)
color:#5D717E;
font-family:Verdana,Arial,Helvetica,Sans-Serif;
font-size:11px;
text-align:center;



peut etre bordure et marge

* {global.css (ligne 11)
margin:0;
padding:0;
}

Share this post


Link to post
Share on other sites

bon voila aprés avoir tout essayé
changer cette ligne pour agrandir vos icones

#header_user #shopping_cart a, #header_user #your_account a {global.css (ligne 840)
background-position:left top;
background-repeat:no-repeat;
height:20px;
padding:2px 0 4px 26px;
text-decoration:none;
}



changé

height:20px;
padding:2px 0 4px 26px;



par

height:32px;
padding: 2px 0 4px 26px;



et le tour est joué

Merci Mandrake
pour ton aide
et n'oublié pas
sous firefox, j'utilises firebug

5342_qniJS7KsPotTrkbf55h7_t

5343_mmkAQlToN1JRzcpaVAA9_t

Share this post


Link to post
Share on other sites

tous est OK sur firefox
par contre
erreur internet explorer
icone a nouveau coupé
voir image

5346_mKLuex18dzDs437sANHF_t

5347_y95pqi6r9bRSFhMm0481_t

Share this post


Link to post
Share on other sites

CHANGER VOS ICONES 16 x 16 PAR DES ICONES 32 x 32

aprés quelques heure j'ai réglé le probleme pour internet explorer

marche a suivre
rendez vous vers la ligne 833 de votre global.css

#header_user li {
   float: right;
   line-height: 2em;
   margin-left: 0.5em;
   white-space: nowrap;



remplacer 2em par 6em

#header_user li {
   float: right;
   line-height: 6em;
   margin-left: 0.5em;
   white-space: nowrap;

simple
line-height: 2em;
par
line-height: 6em;



ensuite juste en dessous ligne 840

#header_user #shopping_cart a, #header_user #your_account a {
   background-repeat: no-repeat;
   background-position: top left;
   padding: 2px 0 4px 26px;
   height: 20px;
   text-decoration: none;
}



remplacer la ligne
padding: 2px 0 4px 26px;
par
padding: 20px 0 20px 32px;

#header_user #shopping_cart a, #header_user #your_account a {
   background-repeat: no-repeat;
   background-position: top left;
   padding: 20px 0 20px 32px;
   height: 20px;
   text-decoration: none;
}

simple
padding: 2px 0 4px 26px;
par
padding: 20px 0 20px 32px;



Voila au boulot maintenant
je veux voir des icones
32 x 32 sur toutes les boutiques prestashop

A bon entendeur
See Ya...

ci-joint Avant Aprés

5349_7Q5aVYiFEM1GdhFZCF2L_t

5351_OMvzAIqgHmgT1aQCedvi_t

Share this post


Link to post
Share on other sites

je vais faire contact plan du site et favoris
je vous tiens au courant

Si Si...
C2LABOMB

5352_qpYhbZQO43X0CiZ2XgED_t

5353_gJH4mRNX0PJS4bvlvuYP_t

Share this post


Link to post
Share on other sites

un petit peu plus compliqué
contact plan du site favoris

chercher vers la ligne 773

#header_links a {
   display: block;
   height: 15px;
   color: #595a5e;
   padding-top: 19px;
   text-align: center;
   text-decoration: none;
   background-repeat: no-repeat;
   background-position: top center;
   background-color: transparent;
}



modifier

padding-top: 19px;

par

padding-top: 28px;

Ensuite rendez vous vers la ligne 824

#header #header_user {
   width: 99%;
   text-align: right;
   clear: left;
   margin:0.6em 0.6em 0 0;
}



modifier

margin:0.6em 0.6em 0 0;

par

margin:0em 0em 0 0;

on est obligé de remonté un peu
bienvenue identifier vous
mon compte
mon panier

ensuite
pour les drapauds des pays
modifier juste l'icones c bon
voila tout est dans l'ordre

a part que je travaille de droite a gauche
a bon entendeur
See Ya

5358_EW1IWEmL2JpUcCr60nJj_t

Share this post


Link to post
Share on other sites

j'ai un petit probleme de marge
est ce que quelqu'un peu m'aidé
la je seche!!!

voir image jointe

En attente de vos réponse
Cordialement
C2LABOMB

est ce lié a ce code

#left_column, #center_column, #right_column {
   float:left;
}

5498_1kWWfsi5BJM8Gms9OtTq_t

5499_njij6C1RxJTjvWvcBoNI_t

Share this post


Link to post
Share on other sites

j'ai egalement
le probleme sur un Block pourtant le code
dans le global.css est bon

/* block myaccount */
   background: #000 url('../img/block_bg_myaccount.jpg') repeat-x bottom left;
   border-left: 2px solid #00ffff;
   border-right: 2px solid #00ffff;
}
.account_input {
   margin-left: 0px;
   width:15em;
}


   border-left: 2px solid #00ffff;
   border-right: 2px solid #00ffff;


c'est bien indiqué
               border-left: 2px solid #00ffff;
   border-right: 2px solid #00ffff;
pourquoi les barres n'apparaissent pas???


piece jointe regarder BLOCK MON COMPTE

5500_73bFTc2BBwYRqUsEP4Vn_t

5501_cxwKyJ89pP1ms6l0KkgB_t

Share this post


Link to post
Share on other sites

je vous donne le code complet
du block

/* block myaccount */
#left_column div.myaccount, #right_column div.myaccount { background: #000 url('../img/block_footer_myaccount.jpg') no-repeat bottom left; }
div.myaccount h4 { background: #000 url('../img/block_header_myaccount.jpg') no-repeat top left; }
div.myaccount h4 a, div.myaccount h4 { color: #00ffff; }
div.myaccount, div.myaccount a { color: #E0FFFF; }
div.myaccount ul.bullet { margin-top: 0.6em; }
div.myaccount ul.bullet li { background-image: url('../img/bullet_myaccount.gif'); }
div.myaccount ul.bullet .icon { display: none; }
div.myaccount p.logout { padding: 0.3em 0 0.3em 2em; }
div.myaccount p.logout, div.myaccount p.logout a { color: #dd2a81; }
div.myaccount p.logout a { text-decoration: underline; }
div.myaccount p.logout a:hover { text-decoration: none; }
div.myaccount .block_content {
   background: #000 url('../img/block_bg_myaccount.jpg') repeat-x bottom left;
   border-left: 2px solid #00ffff;
   border-right: 2px solid #00ffff;
}
.account_input {
   margin-left: 0px;
   width:15em;
}

Share this post


Link to post
Share on other sites

J'ai pas tester en local mais ca vient certainement des padding, avec firebug tu devrais trouver facilement

Share this post


Link to post
Share on other sites

deja tester firebug merci

border-left: 2px solid #00ffff;
border-right: 2px solid #00ffff;
}

Share this post


Link to post
Share on other sites
Guest

wesh wesh, C 2 LA BALLE le rap de l'essonne ? passe écouter le rap du 45 ^^ (le site underground dans ma signature) ! On est voisin khei, c'est la miff' ;)

Sinon pour ton problème de marge, tes réglage à faire sont au niveau du /* global layout */

essaye avec ça :

/* global layout */
#page {
   width: 980px;
   margin: 0 auto 2px auto;
   text-align:left;
}
h1#logo {
   float: left;
   width: 29%;
   margin-top:0.5em;
}
#header {
   float: left;
   height:100px;
   width: 71%;
   text-align: right;
}
#left_column, #center_column, #right_column {
   float:left;
}
#left_column {
   clear:left;
   width:190px;
   padding-right: 15px;
}
#center_column {
   width: 556px;
   margin: 0 0 30px 0;
}
#right_column {
   width: 190px;
   padding-left: 15px;
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More