[Solved] CSS Help for block colours please

[Dave L]

Hi,

 

I'm using 1.5.4.1 and want to make some changes to the block header, block background and text to the My account block (not the footer my account block).

 

I'm not particularly knowledgeable about CSS but have managed to completely change a theme up to now.

 

I know that the module blocks attributes are controlled as a whole with something like:

[/size]
.block h4 {
padding: 6px 11px;
font-size: 12px;
color: #fff;
text-shadow: 0 1px 0 #000;
text-transform: uppercase;
background: #ff0000;
border-radius: 17px 17px 0 0;
[size=4]

Any changes her affect all the blocks. I would like to change the my account block only. I believe this means changing the my-account.css but I really don't know how to begin.

 

my-account.css

#my-account  #left_column {display:none}
#my-account #center_column {width:747px}
#my-account #center_column h1 {margin-bottom:20px}[/size]
[size=4]#my-account #center_column h4 {
font-weight:normal;
font-size:12px;
color:#666;
margin-left:15px
}[/size]

[size=4]#my-account .myaccount_lnk_list {
list-style-type:none;
background:#fff;
padding:15px}
#my-account .myaccount_lnk_list li {
font-size:13px;
line-height:36px;
border-bottom:1px dotted #D2D2D2
}
#my-account .myaccount_lnk_list img.icon,
#my-account p img.icon {
position:relative;
top:6px;
left:0
}[/size]
[size=4]

 

My website is http://sudyod.net

 

Appreciate any help.

Edited May 23, 2013 by Dave L (see edit history)

[Paulito]

Good morning

I am using Android as I am out but I would try changing:

backgound: #fff;

To what colour you require

Paul

 

[Dave L]

Good morning

I am using Android as I am out but I would try changing:

backgound: #fff;

To what colour you require

Paul

 

Hi Paul,

 

Many thanks for the quick reply.

 

I tried changing that but unfortunately had no effect.

 

The only time I can see a change is with the global.css change in the first code above (sorry, neglected to say that was the global.css file) but that effects all the blocks.

 

Thanks

Edited May 21, 2013 by Dave L (see edit history)

[vekia]

if you want to change only my account block, you have to add unique ID or .class for my account block, then you can create in your global.css stylesheet for new object (ID / class)

[Dave L]

if you want to change only my account block, you have to add unique ID or .class for my account block, then you can create in your global.css stylesheet for new object (ID / class)

 

Hi vekia,

 

Thanks for the advice. Unfortunately I'm a little lost with that.

 

Would you mind explaining a little more how and where to create the unique ID and the new object.

 

Appreciated.

[vekia]

Hi vekia,

 

Thanks for the advice. Unfortunately I'm a little lost with that.

 

Would you mind explaining a little more how and where to create the unique ID and the new object.

 

Appreciated.

 

okay, so as i said you have to add unique ID or .class for my account block. Open the file:

modules/blockmyaccount/blockmyaccount.tpl (remember that this file may exists also in themes/modules/blockmyaccount/blockmyaccount.tpl file - if so - you have to edit this file)

 

your block code starts with:

<!-- Block myaccount module -->
<div class="block myaccount">

 

as you can see, this div has got unique class "myaccount" - so you don't have to create unique class / ID

 

now you can go to the global.css file (themes/css/global.css)

 

and add somewhere something like this:

 

.myaccount {background:red;}

[Dave L]

H vekia,

 

Many thanks for pointing me in the right direction. Unfortunately it didn't quite work as anticipated. The edit gave background colour behind the my account block.

As you gave me the direction to look in I looked at the code for other blocks and added .block_content after the .myaccount in the my-account.css. That did the trick.

 

Then I noticed that the theme/css/modules/blockmyaccountfooter.css also contained code for the side block as well as the footer. So I transferred the code to that file.

 

I'm not sure that this was the correct way to do it but it did give the desired result.

 

Now I am looking to change the colour of the my account block header without all of the block headers changing. Now that you have given me the direction, I'll try figure out how to do that.

 

Many thanks for you help.

[vekia]

try with this:

 

myaccount .h4 {
background:red!important;
color:#FFF!important;
}

[Dave L]

try with this:

 myaccount .h4 { background:red!important; color:#FFF!important; } 

 

Thanks once again but unfortunately it didn't work for me but I did get a result with this:

.myaccount .block_content{
 background: #00ff00
}
.myaccount .title_block {
color: #fff;
background: #0000ff;
}
a, a:active, a:visited {
color:#ff0000;

 

Thanks again for your advice. I helped me a lot in understanding a little more of CSS.

[vekia]

okay, you're welcome :-)

 

the problem is finally solved?

[Dave L]

A final question if I may.

 

So if I install a module and copy it's modules/mymodule/file.css file to the theme/css/modules/mymodule/file.css would this be the correct way.

 

Would this also be the case for modules/mymodule/file.tpl being copied to theme/modules/mymodule/file.tpl

 

Once again, many thanks for you advice.

[vekia]

this is the best thing, because sometimes after upgrade prestashop, the files located in /modules/ directory were updated too. So you will lost all changes.

 

move all of your modifications to your theme directory

[Dave L]

Thanks vekia,

 

Very helpful.