Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forum osCommerce-fr _ Design OsC2.3 _ Problème changement de couleur

Écrit par : elbandito 3 Aug 2011, 00:31

Hello,
je commence à y voir plus clair (merci la FAQ et les conseils de ce forum).
Néanmoins j'ai un soucis avec le changement de couleurs du théme d'origine.

J'ai installé une boutique en V2.3 VF hier.
J'ai bien suivi les conseils prodigués ici dans "base de compréhension du design" et particulièrement le sujet "Modification rapide de l'ambiance de la boutique.(couleurs)".

J'ai donc éditer la feuille de style "stylesheet.css" , qui est dans "catalog".
Je ne retrouve pas tout à fait la même chose que dans l'aide citée ci dessus, mais néanmoins ca s'en approche.
J'ai trouvé ma couleur (#0000FE = bleu marine), et je voulais l'appliquer à tous les cadres à la place du bleu clair d'origine.

Le problème c'est que j'ai beau changer toutes les valeurs, sauvegarder, uploader le fichier modifié, ca ne change rien !!!
Mon upload est ok puisque les autres modifs faites sur la taille du header, sont bien prises en compte, mais niveau couleur que dalle, ca ne change rien.

Ce qui m'étonne, c'est que dans le thème par défaut, les contours ne sont pas d'une couleur unie, mais c'est un bleu en deux teintes (ca fait comme une vague)

Ai-je raté quelque chose ? Pouvez vous me donner un coup de main pour ne pas rester "d'origine" ?

Merci smile.gif


Écrit par : elbandito 4 Aug 2011, 00:06

Je continue à me répondre tout seul tongue.gif
En fait par défaut, le fond du skin est composé d'une image (il me semblait bien que ce n'était pas une couleur unie, mais deux bleus différents en forme de vague.
L'image est ici : ext/jquery/ui/redmond/images/ui-bg_gloss-wave_55_5c9ccc_5.png

Je l'ai remplacé par un fond qui me plait et ca fait top wink.gif

Écrit par : elbandito 4 Aug 2011, 23:15

Mon problème n'est pas complètement résolu !
Mes titres de box, on un fond carbone (image), mais les cadres qui entourent toutes mes box sont toujours bleus !

J'ai tout essayé, cherché partout sur le net, mais je n'y arrive pas !

La FAQ dit : << J'aimerais changer la couleur bleu qui entoure tout mes modules (boxes), j'ai déjà essayé de le chercher dans le stylecss du thème adéquat mais j'ai pas trouvé ? -> Faut aller voir dans le stylesheet.css sur la class "infoBox"

J'y ai été, j'ai mis toutes les couleurs des "infoBox" sur #000000 (noir), j'ai rajouté "background: #000000" à celles qui n'avaient pas de couleur (et j'ai rajouté les titres d'infobox absents avec cette valeur). Du coup j'ai obtenu du noir partout : dans les box, en dehors des box, mais j'ai toujours ces lignes bleus qui entourent mes box !!!

La FAQ dit aussi " va dans le fichier : includes/classes/thema_boxes.php, class infoBox extends tableBox " , mais je n'ai pas ce fichier !!!


Je donne donc ma langue au chat.
C'est pas faute d'avoir cherché, tout lu et galeré, donc si une bonne âme veut bien me donner un coup de main, ca serait vraiment sympa wacko.gif

Écrit par : FoxP2 5 Aug 2011, 07:17

les conseils données dans la faq, voir dans les tutos épinglés ne s'appliquent pas pour la version oscommerce 2.3.x

Écrit par : elbandito 5 Aug 2011, 12:03

C'est bien le problème wacko.gif
Du coup je galère un peu ...

Écrit par : krokus 13 Aug 2011, 06:55

Bonjour , installez l'addon Theme switcher shop , facile a installer

Écrit par : fastspirit 31 Aug 2011, 13:07

Citation (krokus @ 13 Aug 2011, 06:55) *
Bonjour , installez l'addon Theme switcher shop , facile a installer

C'est très bien mais comment on instale se module?

on est pas tous caler

Écrit par : francois21 1 Sep 2011, 13:45

Bonjour
Pour intaller on le telecharge et ensuite on suit le mode d'emploi (instal).
Si on a une boutique vierge et sans aucune contribution installée, on ecrase avec les nouveaux fichiers. IL FAUT DE TOUTE FACON SAUVEGARDER SES FICHIER ET SA BDD!!!
Si on a une boutique avec des contributions deja installées, on compare les fichiers avec winmerge par exemple et on applique les differences.

Il faut etre rigoureux et attentif, mais il faut quand meme un minimum de connaissance en php, html, css.
Mais bon tout s'apprend avec de la patience et de la volonté (et du temps).

Pour l'addon Theme switcher shop , c'est un bon debut, il est tres simple a mettre en place.

Francois

Écrit par : bikeuse45 19 Jan 2012, 11:53

wacko.gif Bonjour,
Je te rassure j'ai exactement le même problème, c'est assez galère

Écrit par : carrefour2 23 Feb 2012, 13:27

Citation (elbandito @ 4 Aug 2011, 23:15) *
Mon problème n'est pas complètement résolu !
Mes titres de box, on un fond carbone (image), mais les cadres qui entourent toutes mes box sont toujours bleus !

J'ai tout essayé, cherché partout sur le net, mais je n'y arrive pas !

La FAQ dit : << J'aimerais changer la couleur bleu qui entoure tout mes modules (boxes), j'ai déjà essayé de le chercher dans le stylecss du thème adéquat mais j'ai pas trouvé ? -> Faut aller voir dans le stylesheet.css sur la class "infoBox"

J'y ai été, j'ai mis toutes les couleurs des "infoBox" sur #000000 (noir), j'ai rajouté "background: #000000" à celles qui n'avaient pas de couleur (et j'ai rajouté les titres d'infobox absents avec cette valeur). Du coup j'ai obtenu du noir partout : dans les box, en dehors des box, mais j'ai toujours ces lignes bleus qui entourent mes box !!!

La FAQ dit aussi " va dans le fichier : includes/classes/thema_boxes.php, class infoBox extends tableBox " , mais je n'ai pas ce fichier !!!


Je donne donc ma langue au chat.
C'est pas faute d'avoir cherché, tout lu et galeré, donc si une bonne âme veut bien me donner un coup de main, ca serait vraiment sympa wacko.gif


j'ai trouvé, il faut aller dans le fichier :
/ext/jquery/ui/redmond/jquery-ui-1.8.6.css

et modifier cette ligne :
.ui-widget-content { border: 1px solid #a6c9e2; background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; }

au niveau de cette couleur : #a6c9e2

Moi aussi je viens d'installer cette version, c'est vraiment pas simple. Par exemple j'ai beau chercher, je ne trouve pas comment modifier la largeur des boites.

Je suis allé sur le forum anglophone, on peut trouver des infos ici :
http://forums.oscommerce.com/topic/367912-basics-for-design-v23/

je suis allé voir dans les fichiers qu'ils citent :
includes/template_top.php
includes/template_bottom.php
stylesheet.css

includes/header.php
includes/footer.php

et aussi :
ext/960gs/ (plutôt la structure générale des pages du site)
ext/jquery/ui/ (plutôt couleurs, dessins et effets divers)

mais ils sont très difficile à comprendre. Alors je modifie certaines valeurs valeurs et je regarde l'effet sur le site. Parfois ça change un peu, mais souvent rien du tout. Dommage qu'un pro de la programmation ne puisse pas nous donner les trucs pour changer facilement quelques aspects importants du site (largeur des boites par exemple^^, ou bordures, couleurs de fond des boites, etc.). Mieux, il aurait fallu prévoir un menu dans l'administration avec lequel on puisse régler ces aspects.

Écrit par : francois21 23 Feb 2012, 16:24

Bonjour
au debut la demande est les couleurs.
Donc deja repondu.
Utiliser theme switcher ou avec firefox se servir de l'addon "theme roller dev tool".
Maintenant c'est la largeur==>donc un peu de recherche sur le forum et on a le tres bon post de FoxP2
http://www.oscommerce-fr.info/forum/index.php?showtopic=67642&hl=largeur+2.31
Et l'utilisation de http://960ls.atomidata.com/
expliqué dans ce meme post.

Rien de tres compliqué

Écrit par : carrefour2 23 Feb 2012, 17:05

oui, pour les boites, entretemps, j'ai trouvé le sujet et j'ai réussi avec http://960ls.atomidata.com/#

Sinon, je répondais simplement à la question de la couleur du cadre s'il ne veut pas installer l'addon. Sur la ligne que j'ai indiqué, on peux aussi modifier l’épaisseur du cadre des boites et la couleur du fond.

Écrit par : Kawaii77 6 Jul 2012, 21:39

J'ai pas mal ramé aussi de voir que tous les tests dans le stylesheet.css sont totalement ignorés !
Suite aux différents messages de ce post, j'ai testé quelque chose de radical mais d'efficace.
Dans le fichier ext/jquery/ui/redmond/jquey-ui-1.8.6.css j'ai supprimé les lignes 57 à 66 :

CODE

/* Component containers
----------------------------------*/
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #a6c9e2; background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }


Et là, miracle, on peut gérer les css dans styleshee.css

Écrit par : gregfk9 2 Aug 2012, 22:22

Salut,

Pour revenir au changement de couleur de fond des box... la modif dans le stylesheet.css ne fonctionne pas avec V2.3 de oscommerce. Quelqu'un a-t-il une idée ?

Merci

Écrit par : FoxP2 3 Aug 2012, 09:42

par deux fois, dans ce sujet, je vois que vous opérez des modifications directement sur les fichiers css de jquery.
c'est une erreur. à la prochaine mise à jour, vous perdrez l'ensemble des modifications.
le fichier stylesheet à la racine du dossier catalog est fait pour oveerider les class css.
qq exemples pour comprendre :
-changement de la couleurs des headers :

Code
.infoBoxHeading {
  padding: 2px;
  font-size: 11px;
  background: blue;
}

modification individuelle d'une boxe :
catalog\includes\modules\boxes\bm_specials.php :
remplacer :
Code
                  '  <div class="ui-widget-header infoBoxHeading"><a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . MODULE_BOXES_SPECIALS_BOX_TITLE . '</a></div>' .

avec :
Code
                  '  <div class="ui-widget-header infoBoxHeading infoBoxHeadingSpecial"><a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . MODULE_BOXES_SPECIALS_BOX_TITLE . '</a></div>' .

et ajouter dans le fichier stylesheet :
Code
.infoBoxHeadingSpecial {
  background: red;
}

tous les headers sont bleus, sauf celle de la boxe 'promotions'

Ceci est la méthode à appliquer pour l'ensemble des changements.

Écrit par : reflet 23 Mar 2013, 11:55

Citation (FoxP2 @ 3 Aug 2012, 03:42) *
par deux fois, dans ce sujet, je vois que vous opérez des modifications directement sur les fichiers css de jquery.
c'est une erreur. à la prochaine mise à jour, vous perdrez l'ensemble des modifications.
le fichier stylesheet à la racine du dossier catalog est fait pour oveerider les class css.
qq exemples pour comprendre :
-changement de la couleurs des headers :
Code
.infoBoxHeading {
  padding: 2px;
  font-size: 11px;
  background: blue;
}

modification individuelle d'une boxe :
catalog\includes\modules\boxes\bm_specials.php :
remplacer :
Code
                  '  <div class="ui-widget-header infoBoxHeading"><a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . MODULE_BOXES_SPECIALS_BOX_TITLE . '</a></div>' .

avec :
Code
                  '  <div class="ui-widget-header infoBoxHeading infoBoxHeadingSpecial"><a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . MODULE_BOXES_SPECIALS_BOX_TITLE . '</a></div>' .

et ajouter dans le fichier stylesheet :
Code
.infoBoxHeadingSpecial {
  background: red;
}

tous les headers sont bleus, sauf celle de la boxe 'promotions'

Ceci est la méthode à appliquer pour l'ensemble des changements.

Bonjour,
Ca marche très bien, mais comment changer l'hauteur des "infoboxheading" et changer la couleur des bordures.
Merci

Écrit par : fscalda 10 Oct 2013, 13:34

Je remonte ce sujet, car effectivement cela marche très bien avec des couleurs, mais pour une image en fond, ça ne fonctionne pas, ou du moins, il ne trouve ou je ne lui indique pas le bon chemin. Par contre, si je mets :

Code
.infoBoxHeading {
      background-image:url(http://www.monsite.fr/ext/jquery/ui/redmond/images/entete.png);


ou

Code
.infoBoxHeading {
      background-image:url(http://www.monsite.fr/images/entete.png);


ça fonctionne.

Écrit par : FoxP2 11 Oct 2013, 05:37

ce sont des questions basiques de modification des feuilles de style en dehors de toute courbe d'apprentissage dans la prise en main d'osCommerce.
ce forum n'a pas pour vocation de vous apprendre les bases du développement, mais bien de vous faire progresser sur le script lui même.
il est pourtant simple d'utiliser les bons outils tel que le plugin firefox Web Developper Toolbar afin de pouvoir identifier chaque balise au sein d'une page et la modifier en fonction de vos besoins.

illustration :

http://www.flickr.com/photos/foxp2projects/10201496543/
http://www.flickr.com/photos/foxp2projects/10201496543/ par http://www.flickr.com/people/foxp2projects/, sur Flickr

Des forums, des tutos existent et résolument dédiés au design/style (ex : alsacreation) : abusez en. wink.gif

Écrit par : fscalda 11 Oct 2013, 11:26

Je suis d'accord utilisant web developper pour Firefox, c'est juste que je trouvais bizarre le coup des chemins mais je ne m'y suis pas agacé non plus.
J'avoue que la prise en main de la 2.3 n'a rien à voir avec les anciennes versions. Mais bon, je commence à comprendre la logique, j'étais étonné que des fois, la feuille de style ne prennent pas tout le temps de le dessus, mais en fait, je n'avais pas bien compris la mise en oeuvre des déclarations. C'est chose faite, et la boutique commence à ressembler à quelques choses, voire même, j'arrive à la fin de ce que je voulais faire pour le Design biggrin.gif

Écrit par : Patrick10222 24 Mar 2014, 19:03

Bonjour, j'ai un problème un peu dans le genre, j'ai mis:

Citation
.infoBoxHeading {
background: #1B0B3C
padding: 2px;
font-size: 11px;
}

.infoBoxContents {
color: #FFFFFF;
background: #1B0B3C;
padding: 5px;
font-size: 11px;
line-height: 1.5;
}

Dans stylesheet.css, mais ça sort mal avec chrome:
http://www.casimages.com/img.php?i=140324070844232807.png

Et encore plus mal avec firefox:
http://www.casimages.com/img.php?i=140324071044687825.png

Je cherche également à mettre des images dans les boxes de la collone de gauche.

Merci.

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)