Jump to content

Couleurs d'arriere plan pour chaque catégorie

Glouba Nounette
 Share

Recommended Posts

Glouba Nounette Newbie

Glouba Nounette

Posted
Posted

Bonjour,

J'aimerai pouvoir transformer la rubrique catégorie, tel que le fichier que j'ai mis ici en pièce jointe.
Je voudrais faire en sorte que l'arrière plan et la couleur de chaque rubrique change, une fois sur deux...et je ne sais pas comment, ni où il faut paramétrer ça. Parce que je pense que changer le css de peut pas fonctionner, vu que ça touche toujours l'ensemble des catégories...

Pouvez vous m'aider?? Merci d'avance.

Link to comment
Share on other sites
nico46 Newbie

nico46

Posted
Posted

Je pense sans me tromper que pour résoudre ton problème, il faut utilisé une image déjà faite pour avoir le fond comme tu le désire.
Tu dois créer ton image comme bon te semble et l'inclure à la place de celle utilisée de base mais je suis pas tout à fait sur que ça ne touche que les catégories.
Il te faut déjà modifier cet image:

block_bg.jpg

A voir et surtout à tester mais je le répette je ne suis pas sur à 100% et je ne peux pas tester.

Link to comment
Share on other sites
nico46 Newbie

nico46

Posted
Posted
oui d'accord, j'avais compris que je devais changer l'image, mais en fait,ce que je cherche à faire, c'est que le texte soit blanc ou noir, une fois sur 2, et ça, je sais pas où ça se passe..

Merci de votre aide

Alors là je passe la main désolé je peux pas t'aider je ne sais pas faire ça on peux changer la couleur au passage de la souris facilement mais le changer une fois sur deux là je sèche.
Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

bonjour,

en css3 il y a un sélecteur qui permet cela (jamais testé)
par exemple :
li:nth-child(even) {}

ou

li:nth-child(odd) {}

problème : CSS3 n'es pas vraiment encore supporté (ou alors sur les navigateurs vraiment très récents)


sinon tu peux passer par jquery (mais attention, cet effet ne sera pas pris en compte chez ceux qui ont javascript désactivé)
par exemple en faisant un truc du style

${

$("li:odd").addClass("odd"); 

}



à adapter bien sur à ton menu.

Il ne reste plus alors qu'à définir ta classe odd dans global.css

.odd {

background-color : ...etc.

}


note : odd veut dire pair et even veut dire impair... ou l'inverse :)

Link to comment
Share on other sites
Glouba Nounette Newbie

Glouba Nounette

Posted
  • Author
Posted

Merci pour ta réponse ;)

J'ai commencé à expérimenter ça, mais par contre, je ne sais pas où je dois mettre ça

${

$("li:odd").addClass("odd");

}

Parce qu'il y a plusieurs fichiers qui régissent les catégories et je ne voudrais pas faire de grosse bêtise...

Merci d'avance

Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

Bonjour,

c'est en forgeant que l'on devient forgeron, si tu gardes une sauvegarde des fichiers que tu modifies il n'y a aucune raison d'avoir peur de faire une bêtise :)
c'est le seul moyen que je connaisse pour avancer.

Pour faire les choses bien et commencer par le commencement, le site officiel de jQuery propose plein de lien vers des tutoriels en Français : http://docs.jquery.com/Tutorials#Tutoriaux_en_Fran.C3.A7ais

je te conseille celui là qui est simple clair et précis : http://www.jquery.info/spip.php?article21

Une petite heure sur ces sites te donnera une vision plus précise de ce que tu manipules, tu verras c'est vraiment bien fait et simple.

Pour ta question, comme il s'agit de code javascript, il s'insère comme tout code javascript entre les balises <head></head> de ton thème
soit depuis un fichier .js externe < script type="text/javascript" src="tonFichier.js">< /script>
soit entre des balises < script type="text/javascript"> ...ton code... < /script>

:exclaim: enlever les espaces au début des balises < script> et < /script>

note : même pour ça, Firebug (plugin pour firefox) est indispensable.

Link to comment
Share on other sites
bruno76 Newbie

bruno76

Posted
Posted

Alors une solution graphique acceptable est de créer des images PNG 24 bits pour chaque catégorie. avec une règle de nommage stricte, par exemple :

1-bcat.png

où "1" est le numéro (ID) de la catégorie dans la base MySql de Prestashop (affichée dans l'admin->catalogue)
Ensuite pour que cela fonctionne correctement, il faudra modifier le module :

prestashop/modules/blockcategories/category-tree-branch.tpl

de la manière suivante :

>


<!-- Debut affichage catégorie sous forme d'images PNG -->   



<!-- Fin de la bouckle d'affichage des catégories sous forme d'images PNG -->



   {if $node.children|@count > 0}
</pre>
<ul>
       {foreach from=$node.children item=child name=categoryTreeBranch}
           {if $smarty.foreach.categoryTreeBranch.last}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='true'}
           {else}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='false'}
           {/if}
       {/foreach}
</ul>
<br>   {/if



Entre la balise il faudra donc supprimer l'ensemble du code HTML existant dans votre module et le remplacer par







Où sauvegarder les images crées pour les catégories ?
Tout simplement dans le dossier

prestashop/img/c/

:)



			
		


		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






	

	

	

		

			

				


	
		Peha
	

				
				
					
						
Newbie
					
				
			

		

		

			

				


Peha
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			
pour modifier category-tree-branch.tpl tout en restant dans le cadre du thème,

il suffit, dans le dossier du thème de créer un dossier /module/
puis un dossier /blockcategories/

et y placer le fichier .tpl modifié qui sera surchargé à la place du fichier normal
(ici category-tree-branch.tpl)

le problème de cette méthode est que les noms des catégories sont en dur, il faut donc ouvrir photoshop et faire une image pour rajouter une simple catégorie.


			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
					
					
				

					

					
					






	

	

	

		

			

				


	
		Atch
	

				
				
					
						
Newbie
					
				
			

		

		

			

				


Atch
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			
je ne suis pas un pro du PHP mais je me souviens qu'il était possible via une portion de code d'attibuer des class différentes aux balises .

ça donnait deux classes différentes - Pair ou impair, 1 sur 2 quoi.

Il suffirait de modifier category-tree-branch.php et tpl pour y inclure cette portion de code. mais le code je ne le connais pas, désolé :(

peut etre un début de voie à suivre...

V++

Atch


			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				

					

					
					






	

	

	

		

			

				


	
		Peha
	

				
				
					
						
Newbie
					
				
			

		

		

			

				


Peha
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			

Je pense que la solution de Rémi est la meilleure :

dans le ton dossier de ton thème, 
tu crées un dossier module,
dans ce dossier tu fais un dossier blockcategories
dans ce dossier tu met une copie du fichier category-tree-branch.tpl

la modif à faire dans ce fichier est simple :
remplacer







par ça :










Ainsi, chaque ligne aura une classe paire ou impaire...

ensuite dans global.css tu peux leur donner le style que tu veux :


.ligneImpaire {
...
}
.lignePaire {
...
}








			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
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
					

				

			

		

	


			
		

	

	
		

			

				
					


    
          Share
    

    

        
        
            

            
        
    


				
					


				
			

		

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


					

				

			

			
		

		
		


	

		×
		

			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    •