how to change the colours in category block

[matteomont]

Hi there,

 

i'm pretty new in prestashop and on develping websites...

 

I'd like to edit different colours in the modues block, for example into the category block.

 

I followed some tutorials and topic online but I got nothing :-(

 

my best result was the editing of blockcategories.css file in the "theme\mysite\css\modules\blockcategories" folder

 

I was able to change the background only, but header and borders still keep the default color

 

categories.bmp

 

any tip?

 

cheers

[Paulito]

Good Morning.

 

Please read this:

 

Hope it helps

 

Paul

[matteomont]

Hi Perfumeskunk,

 

thanks for your help, your link was really useful!!

 

Before asking support writing this topic, I looked up several topic over this forum and I understood there are a lot of different approaches in order to change the block modules appearance.

 

for first I tried to change the image file but nothing happened.

 

For sure modifying the blockcategories.css file I got a partial change.

 

So far can you provide me more details about the approach you suggested or some tips related my approach?

 

I don't mind which way to follow I just want it's working

 

Thanks a lot

 

Matteo

[matteomont]

may be I got it, may be it's nothing special...

 

I think there are two (or even more...) different approaches depending on what you are aming exactliy!

 

The 2 option:

• just change the colours and still keep the same design of the block as in the default template (with edges/corners rounded off)
  
• changing the colours and moving to corner's block squared off
  

I tested the latter one

 

I remark I'm just a novice in prestashop and web developing

 

that's why I'd like to share with you what i did to change the categories' block clours and getting the corners squared off. I hope someone will suggest a best practice :-)

 

I started using firebug to detect which file and line need to be edited

 

I took action only into the global.css file (...themes\prestashop\css\global.css)

 

the area to be modified is into the left column:

 

<div id="columns">
<div id="left_column" class="column">
<div id="categories_block_left" class="block">
<h4>Categories</h4>
<div class="block_content">
<ul class="tree dynamized" style="display: block;">
<li>
<li>
<li class="last">
</ul

 

through the home page firebug will show you which file (global.css) and line need to be modified.

 

keep on mind the modules is composed by different areas:

 

footer <div id="categories_block_left" class="block">

 

header <h4>Categories</h4>

 

body <div class="block_content">

 

subcategories <ul class="tree dynamized" style="display: block;">

 

I think this way is definitiely easier, but put some restriction: i'm not able to make different customization into the same level of the module (i.e. the colour of the text beetwen body and subcategories or different background for each categories and subs) and some editing affect also other modules on the same column (that's not so bad, but it's out of my control)

 

Any suggestion it's really apreciated :-)

[Paulito]

Good Morning Matteo,

 

I thought you just wanted to change the block colours from grey to what ever colour you wanted.

 

All I did to achieve this was:

 

background: white; <!-- transparent url('../img/block_header.png') no-repeat top left -->

 

and as you rightly say a few other blocks in different parts of global css.

 

Paul