osCommerce France : Accueil Forum Portail osCommerce France Réponses aux questions Foire aux contributions

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Problème changement de couleur
elbandito
posté 3 Aug 2011, 00:31
Message #1


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 25
Inscrit : 27-July 11
Lieu : 28500
Membre no 30085



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

Go to the top of the page
 
elbandito
posté 4 Aug 2011, 00:06
Message #2


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 25
Inscrit : 27-July 11
Lieu : 28500
Membre no 30085



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
Go to the top of the page
 
elbandito
posté 4 Aug 2011, 23:15
Message #3


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 25
Inscrit : 27-July 11
Lieu : 28500
Membre no 30085



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
Go to the top of the page
 
FoxP2
posté 5 Aug 2011, 07:17
Message #4


Ceinture marron OSC
Icône de groupe

Groupe : Modérateurs
Messages : 1665
Inscrit : 3-June 09
Membre no 25501



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


--------------------


Go to the top of the page
 
elbandito
posté 5 Aug 2011, 12:03
Message #5


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 25
Inscrit : 27-July 11
Lieu : 28500
Membre no 30085



C'est bien le problème wacko.gif
Du coup je galère un peu ...
Go to the top of the page
 
krokus
posté 13 Aug 2011, 06:55
Message #6


Ceinture orange+ OSC
Icône de groupe

Groupe : Membres
Messages : 337
Inscrit : 23-February 07
Membre no 15518



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


--------------------
Ms2.3+Category Description+Ckeditor+Colissimo+EasyPopulate+Header tags seo+Otf autothumb+PIM osSlideshow+Theme switcher+Ultimate Seo Urls+Icone stock+crawlprotect+Who's Online Enhancement+Master password+lien suivi colis
Go to the top of the page
 
fastspirit
posté 31 Aug 2011, 13:07
Message #7


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 18
Inscrit : 31-August 11
Lieu : belgique
Membre no 30165



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

Ce message a été modifié par fastspirit - 31 Aug 2011, 13:07.
Go to the top of the page
 
francois21
posté 1 Sep 2011, 13:45
Message #8


Ceinture orange OSC
Icône de groupe

Groupe : Membres
Messages : 225
Inscrit : 4-September 06
Lieu : dijon
Membre no 11890



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


--------------------
Francois

Osco 2.31 avec pas mal de modifs qui fonctionnent.
Go to the top of the page
 
bikeuse45
posté 19 Jan 2012, 11:53
Message #9


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 1
Inscrit : 26-July 11
Membre no 30078



wacko.gif Bonjour,
Je te rassure j'ai exactement le même problème, c'est assez galère
Go to the top of the page
 
carrefour2
posté 23 Feb 2012, 13:27
Message #10


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 3
Inscrit : 23-February 12
Membre no 30628



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-...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.
Go to the top of the page
 
francois21
posté 23 Feb 2012, 16:24
Message #11


Ceinture orange OSC
Icône de groupe

Groupe : Membres
Messages : 225
Inscrit : 4-September 06
Lieu : dijon
Membre no 11890



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....hl=largeur+2.31
Et l'utilisation de http://960ls.atomidata.com/
expliqué dans ce meme post.

Rien de tres compliqué


--------------------
Francois

Osco 2.31 avec pas mal de modifs qui fonctionnent.
Go to the top of the page
 
carrefour2
posté 23 Feb 2012, 17:05
Message #12


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 3
Inscrit : 23-February 12
Membre no 30628



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.
Go to the top of the page
 
Kawaii77
posté 6 Jul 2012, 21:39
Message #13


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 21
Inscrit : 15-December 08
Membre no 23957



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


--------------------
version 2.3
Go to the top of the page
 
gregfk9
posté 2 Aug 2012, 22:22
Message #14


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 1
Inscrit : 2-August 12
Membre no 31364



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
Go to the top of the page
 
FoxP2
posté 3 Aug 2012, 09:42
Message #15


Ceinture marron OSC
Icône de groupe

Groupe : Modérateurs
Messages : 1665
Inscrit : 3-June 09
Membre no 25501



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.


--------------------


Go to the top of the page
 
reflet
posté 23 Mar 2013, 11:55
Message #16


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 12
Inscrit : 19-November 04
Membre no 3852



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
Go to the top of the page
 
fscalda
posté 10 Oct 2013, 13:34
Message #17


Ceinture jaune+ OSC
Icône de groupe

Groupe : Membres
Messages : 128
Inscrit : 26-January 06
Lieu : Alès
Membre no 8748



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.


--------------------
OSC 2.3.3.1 | superfish_horizontal_navbar | Shipping in cart | generic_box_1.1.1 | modular_seo_header_tags_1.4.6_min | Nivo Slider with admin for OsC 2.3.3 |En cours remplacement de bxGallery and FancyBox avec PhotosetGrid and ColorBox ... pt1 que c'est long ...
Go to the top of the page
 
FoxP2
posté 11 Oct 2013, 05:37
Message #18


Ceinture marron OSC
Icône de groupe

Groupe : Modérateurs
Messages : 1665
Inscrit : 3-June 09
Membre no 25501



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 :


web developper toolbar par foxp2projects, sur Flickr

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


--------------------


Go to the top of the page
 
fscalda
posté 11 Oct 2013, 11:26
Message #19


Ceinture jaune+ OSC
Icône de groupe

Groupe : Membres
Messages : 128
Inscrit : 26-January 06
Lieu : Alès
Membre no 8748



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


--------------------
OSC 2.3.3.1 | superfish_horizontal_navbar | Shipping in cart | generic_box_1.1.1 | modular_seo_header_tags_1.4.6_min | Nivo Slider with admin for OsC 2.3.3 |En cours remplacement de bxGallery and FancyBox avec PhotosetGrid and ColorBox ... pt1 que c'est long ...
Go to the top of the page
 
Patrick10222
posté 24 Mar 2014, 19:03
Message #20


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 5
Inscrit : 22-March 14
Membre no 32590



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:


Et encore plus mal avec firefox:


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

Merci.
Go to the top of the page
 

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



RSS Version bas débit Nous sommes le : 21st April 2014 - 10:36
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)