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

[Arnaud84FR]

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://guinnessfrance.fr/_Questions/sc2.jpg

ainsi que la vue d'ensemble de ma page :

http://guinnessfrance.fr/_Questions/sc1.jpg

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

http://guinnessfrance.fr/_Questions/GuinnessFrance.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

GuinnessFrance.fr.zip

[Maury Girard]

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

[Arnaud84FR]

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

[clemclem]

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...

[Maury Girard]

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]

colorpix.zip

[Arnaud84FR]

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.

[Maury Girard]

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é