PrestaShop Forums: [Resolu] Questions sur la modification d’un thème - PrestaShop Forums

Jump to content


Welcome to the PrestaShop Forum! We hope you'll share your comments and suggestions with us. We ask that you please post in English to the main sections of the PrestaShop Forum. If you want to write in another language, please post in the corresponding PrestaShop Community section below.

Please note that PrestaShop Community sections are largely self-moderated. PrestaShop team members may or may not participate in non-English sections. To improve the chances of receiving feedback to your question or comment, please post it in English to the main sections of our Forum.

NYC

Vous parlez français ? par ici !


[Resolu] Questions sur la modification d’un thème


[Resolu] Questions sur la modification d’un thème

#1 Arnaud84FR

    PrestaShop Newbie

  • 12 Oct 2008
  • Members
  • Pip
  • 2 posts

Posted 17 March 2010 - 01:38 PM

Bonjour à toutes et à tous,

je découvre Prestashop et je suis en train de faire des tests pour voir s'il est facile à utiliser ou pas.
Pour le moment j'utilise le thème gratuit Earth et j'essaye de le modifier à mon goût.

Mon cœur de métier étant les réseaux, mes connaissances en css, dev web sont médiocres. En ce sens, j'ai une soucis pour régler un bloc.

Je ne comprends pas comment déplacer le bloc de "connexion utilisateur" qui se trouve en haut à droite de la page.
Malgré mes recherches et mes modifications dans le fichier global.css, je n'arrive pas à le mettre dans la barre blanche située en haut à droite. En recherchant cette modification, je ne parviens pas à agrandir la hauteur de la barre blanche du haut contenant "le change monétaire", l'option de recherche...

Voici un imprimé écran de mon erreur :

http://guinnessfranc...estions/sc2.jpg

ainsi que la vue d'ensemble de ma page :

http://guinnessfranc...estions/sc1.jpg

J'ai envoyé à cette adresse le thème modifié pour ceux qui veulent directement voir l'erreur dans Prestashop:

http://guinnessfranc...ssFrance.fr.zip

Je vous remercie par avance pour vos commentaires, et je reste à votre disposition pour toutes éventuelles questions.

Arnaud

Version Prestashop : 1.2.5
serveur local Wamp 2.0

Attached File(s)


IDOLS Rock Merchandising
Spécialiste de la vente de produits et mode US/UK depuis 1986,
Adresse : 52 rue carnot 84000 AVIGNON FRANCE
Tel : 04 90 82 24 41. Ouvert du mardi au samedi de 10H/12H - 15H/19H
Site internet :
http://www.idols.fr
Vous y trouverez les marques :
Fred Perry, Lonsdale, DrMartens, West Coast Choppers,
Guinness, Black Label Society, Hardoce United
http://www.idols.fr/ban/idolspit2.jpg

#2

    PrestaShop Newbie

  • 15 Dec 2011
  • Members
  • Pip
  • 0 posts

Posted 17 March 2010 - 04:30 PM

Vous pouvez modifiez ceci
à la ligne
#header { float: right*; height:100px; width: 71%; text-align: left*;
}

Modifiez dans un 1er temps les fonctions left et “right “ marqué par *
~ le symbole " * " n'est pas a saisir dans votre code

Vous pouvez également modifier le width au niveau de son %

cordialement

Ps:Désolé; pour la mise à page

#3

    PrestaShop Newbie

  • 15 Dec 2011
  • Members
  • Pip
  • 0 posts

Posted 18 March 2010 - 10:46 AM

From 1268839806:

Vous pouvez modifiez ceci
à la ligne
#header { float: right*; height:100px; width: 71%; text-align: left*;
}

Modifiez dans un 1er temps les fonctions left et “right “ marqué par *
~ le symbole " * " n'est pas a saisir dans votre code

Vous pouvez également modifier le width au niveau de son %

cordialement

Ps:Désolé; pour la mise à page



Merci pour votre réponse, j'ai réussi à résoudre mon problème au bout de presque 2 heures, je me suis également aidé de ce site SiteduZero-liste-des-proprietes-css.
En plus de mon problème de placement du bloc, je me suis aperçu que le bloc de recherche d'en haut gênait mon bloc utilisateur pour l'affichage de celui-ci.

Lors de ma recherche et des différents tests de valeurs suite à vos conseils, j'ai utilisé un outils sous Firefox (Web developper tools) qui affiche le style CSS d'un élément en pointant la souris dessus.

En effectuant cette manipulation, j'ai ainsi pu identifier plus clairement les différents blocs et éléments du CSS qui interfèrent sur le Template.


Ma nouvelle question est la suivante :

Ai je suivi la bonne procédure pour identifier, modifier et utiliser le CSS avec le Template ? Car je trouve la manipulation très fastidieuse ; d'une part il faut utiliser la barre d'outils "web developper tools", ensuite activer le module "element css" et ensuite je modifiais le CSS avec Crimson Editor, tout en actualisant la page web sous Firefox.

Cela peut sembler farfelu, mais je n'ai pas connaissance d'une autre façon de faire.

Dois t'on utiliser un logiciel spécifique pour étudier et comprendre le CSS d'un Template ? J'entends par là, l'utilisation d'un éditeur WYSIWYG (dreamweaver ou autre ..)

Dois t'on l'analyser ligne par ligne et identifier les différentes classes comme pour des scripts Shell ?

Car à la lecture du css du Template Earth, j'ai pu constater que des blocs "enfants" utilisent des propriétés générales d'affichages des "parents", en ce sens, je trouve la lecture et la compréhension, ou la représentation visuelle assez difficile à imaginer.

Par exemple :

#header #header_user a {color:red;} /*Partie Bienvenue, identifiez vous */
#header_user p { color: red;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
margin-top: -3pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;


Quelle est la bonne façon de procéder pour comprendre un Template avec son CSS, et quelles étapes suivre pour ne pas avoir l'impression de se perdre dans le code ?

Merci

Arnaud

Attached File(s)



#4

    PrestaShop Newbie

  • 15 Dec 2011
  • Members
  • Pip
  • 0 posts

Posted 18 March 2010 - 11:02 AM

Bonjour,
je pense que la meilleure des façons pour l'analyser est Firefox avec firebug. Il y a un tuto sur le forum. Avec cet outil tout deviendra plus clair ! Web developper tool, pour l'avoir utilisé pour corriger quelques problèmes de compatibilité avec IE6, c'est vraiment pas terrible...

#5

    PrestaShop Newbie

  • 15 Dec 2011
  • Members
  • Pip
  • 0 posts

Posted 18 March 2010 - 11:31 AM

Pour ouvrir votre Css ,

1/un simple éditeur de texte comme bloc note est demandé, ensuite un transfert directe sur votre Ftp du rendu
et hop :)

Le template que vous utilisez actuellement pour ce site ,n'étant pas celui d'origine
je vous invite à regarder le template de base fourni sur le site, afin de mieux comprendre sa structure.

Personnellement Je l'utilise que
- Bloc note
-FireBug ,sous FireFox,
- Debugbar, sur I.Explorer

Ensuite, pour mes codes couleurs soit par le site color combo
ou par ce soft (Color Pix)
(en piece ci-besoin)



Ayant à l'époque, testé du Os commerce ( Beurk...) ;)
Je préfère nettement Prestashop , car plus simple d'accès pour des utilisateurs lambda.


2/Les tutos à prendre en compte

- Topic liste de tutoriels sur Prestashop très complet (certes un peu ancien) mais pratique Ici
-Utilisation de Firebug

Cordialement,

Ps: Si nous avons répondu à votre demande ,
Merci de bien vouloir mettre devant et dans le titre de votre 1er Post la mention [Resolu]

Attached File(s)



#6

    PrestaShop Newbie

  • 15 Dec 2011
  • Members
  • Pip
  • 0 posts

Posted 18 March 2010 - 06:06 PM

From 1268908307:

Pour ouvrir votre Css ,

1/un simple éditeur de texte comme bloc note est demandé, ensuite un transfert directe sur votre Ftp du rendu
et hop :)

Le template que vous utilisez actuellement pour ce site ,n'étant pas celui d'origine
je vous invite à regarder le template de base fourni sur le site, afin de mieux comprendre sa structure.

Personnellement Je l'utilise que
- Bloc note
-FireBug ,sous FireFox,
- Debugbar, sur I.Explorer

Ensuite, pour mes codes couleurs soit par le site color combo
ou par ce soft (Color Pix)
(en piece ci-besoin)



Ayant à l'époque, testé du Os commerce ( Beurk...) ;)
Je préfère nettement Prestashop , car plus simple d'accès pour des utilisateurs lambda.


2/Les tutos à prendre en compte

- Topic liste de tutoriels sur Prestashop très complet (certes un peu ancien) mais pratique Ici
-Utilisation de Firebug

Cordialement,

Ps: Si nous avons répondu à votre demande ,
Merci de bien vouloir mettre devant et dans le titre de votre 1er Post la mention [Resolu]



Un grand Merci pour ces précieux renseignements, je ne manquerai pas de les utiliser au maximum.

#7

    PrestaShop Newbie

  • 15 Dec 2011
  • Members
  • Pip
  • 0 posts

Posted 19 March 2010 - 10:13 AM

De rien on est tous passé par là
Et parfois je galère encore , surtout sur le kit actuel que je développe pour la communauté ;)





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users