How to change the design of footer? (I want to design my own footer based on default)

[mechwr]

Problem #1

I'm a newbie wanting to design my own footer for a school project but have no idea how to do so. I'm trying to edit things of the default footer such as:

• Colour
  
• Padding/Shadow
  
• Text positions/Font
  
• Adding image
  

Knowing how to change it to something like http://happycog-sansom.myshopify.com/ would be good enough.

 

My questions:

• What files do I have to change to achieve the above? Global.css? A module's css?
  
• Any tips for the design of the footer?
  

Hope any pros will be offer some insight, thanks!

 

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

Problem #2 (SOLVED)

In addition, how do I edit these texts/links(what are they really called?). There seems to be a lot of conflicting information regarding this, such as editing:

• footer.tpl
  
• blockvariouslink(couldn't even find this in my modules)
  
• global.cs
  

Which one is it?

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

Problem #3

I got into a minor problem here, I can't seem to change the dark grey colour to a colour I want as seen in this picture, went around global.css and blockmyaccount.css but am still unable to change the dark grey.

Also, I would like to change the "MY ACCOUNT" text to something resembling one of these buttons, how would I do this? Add something like:

background: url(www.picture.com/mypicture.jpeg);?

Edited January 20, 2013 by mechwr (see edit history)

[Alex Simonchik BelVG]

Hi,

 

you will need edit footer.tpl and global.css

 

Regards

[mechwr]

Hi thanks for the reply. What software would you recommend using footer.tpl? Would achieving a footer exactly like this website http://san-francisco-cupcakes.myshopify.com/ purely based on the editing of the footer.tpl file?

[mechwr]

Bump could use some help!

[Alex Simonchik BelVG]

Hi again, you can use any text editor for this purpose.

 

Regards

[yaniv14]

try to read prestashop tutorials so you get a bigger picture of how to work with prestashop.

you can start here: http://doc.prestasho...age+using+hooks

 

basically you don't need to edit footer.tpl, the only thing that footer.tpl does is to call for modules in the right column and the footer.

to edit/change style in the footer, look for #footer in global.css (located at 'themes/default/css').

some module comes with there own css file that usually located in the module folder.

 

the block various links in footer is part of block cms. if you go to the module configure in back office you will see the module options.

the other module you marked in problem #2 is called block reinsurance

Edited January 18, 2013 by yaniv14 (see edit history)

[ciptanegara]

Problem #2

In addition, how do I edit these texts/links(what are they really called?). There seems to be a lot of conflicting information regarding this, such as editing:

• footer.tpl
  
• blockvariouslink(couldn't even find this in my modules)
  
• global.cs
  

Which one is it?

 

Problem 2..

upper row. module "block reinsurance"

left column. module "myaccount block on footer"

center column. module "block social"

right column. module "block contact infos"

 

you may edit the text at those modules.

[mechwr]

Thanks a lot for the replies guys really helped me in my learning process. Now comes problem 3..

Edited January 19, 2013 by mechwr (see edit history)

[yaniv14]

did you tried in: modules/blockmyaccountfooter/blockmyaccount.css

 

and yes it should work with image background like, background: url('your_image');

[mechwr]

I went a little crazy for testing purposes and it still came out the same. There is no change whatsoever when I refresh my website.

[yaniv14]

you are missing the " ' " in the background url:

 

you have: background: url(your_image)

you should have: background: url('your_image')

[mechwr]

I've tried your

 

you are missing the " ' " in the background url:

 

you have: background: url(your_image)

you should have: background: url('your_image')

 

but it still doesn't work, I looked around my global.css file to find an example of how the background: url code is implemented properly as seen in my uploaded png file but nothing changes.

The grey "ACCOUNT" area of problem 3 still can't be changed!

Can someone help me with this? It doesn't seem to want to change no matter what I do!

 

 

Also, it also seems the ' doesn't matter in using a background url code as there seems to be some lines in the global css which uses it and others that don't can I also get a comment on this too?

Edited January 22, 2013 by mechwr (see edit history)

[mechwr]

bump, need help! for the post above this!