Theme/CSS Customization - Any design guru out there?

[JustStarted]

Theme customization is a challange for the people who are not from design background. Requesting help /suggestion from expert ppl. Infact this will help other presta developers too.

I want to design a home page like the attached image. How can i add another block on top of footer or at the bottom of middle contents. After adding that new block i want to put few image link and special product block there like the attached screen shot. I am not expert in CSS, if possible please provide the solution as details as possible. Also please leave some suggestion to learn temeplete customization quickly?

- Is there any editor to edit prestashop theme?

[Kalastudio]

JustStarted:
1. Blocklink on footer for cms: add code to php to set this module on footer.Then with css modifications you may position this module as you wan to.

function hookFooter($params)
   {
       return $this->hookLeftColumn($params);
   }

2. Newsletter Block on footer: add code to php to set this module on footer. Then with css modifications you may position this module as you wan to.

function hookFooter($params)
   {
       return $this->hookLeftColumn($params);
   }

3. Images with link on footer: duplicate payment logo block and add code to php to set this module on footer. Then with css modifications you may position this module as you wan to.

function hookFooter($params)
   {
       return $this->hookLeftColumn($params);
   }

4. Specials on footer: add code to php to set this module on footer. Then with css modifications you may position this module as you wan to.

function hookFooter($params)
   {
       return $this->hookLeftColumn($params);
   }

I hope this light help you.

[JustStarted]

Thank you very much for taking time to reply on that.
I really need more details on that specially the CSS part.

Just to summerize:

1. How can i carete those css block
2. How can i call those function
3. Which .php , tpl, .css file i need to modify.

It would be great if anyone can show some working examples.

[Kalastudio]

Waw...!!! CSS on detail... ammmmm.... thats so extensive better Use Firefox and Firebug to help you edith global.css
and the modification for php files... look inside each module folder there is every php file with the name of every module.
I hope this help you... sorry if not.

always please read this link before:
http://www.daveegerton.com/prestashop-guides/Prestashop-Designers-Guide/Themes/modifying-the-default-prestashop-theme.html

[JustStarted]

Thank you again.
If you look at the screen shot, i want to create those 3 blocks in the home page editorial section(i.e. center column) not in left or footer area.
From my basic understanding i think i need to add some

in editorial.tpl . After that i need to figure out how to place my expected contents there.

It would be great if somebody can explain me(in details) how to place "special" blocks in the

that i created in .tpl file.

[Kalastudio]

Thank you again.
If you look at the screen shot, i want to create those 3 blocks in the home page editorial section(i.e. center column) not in left or footer area.
From my basic understanding i think i need to add some

in editorial.tpl . After that i need to figure out how to place my expected contents there.

It would be great if somebody can explain me(in details) how to place "special" blocks in the

that i created in .tpl file.

My mistake, sorry, change "Footer" hook to "Home".
Let me Describe like I am tryin to help you or the way a take for this design.

1. You have a big picture on center home flash maybe? in this case you need an module to display flash, else editorial is Ok

2. Left Bottom side: 3 cms links over a subscribe to Newsletter maybe:

2.a. 3 cms links: why complicate the world Prestashop already have a "blocklink" module to display links just edith the module to works for you from the php file adding this code under "function hookRightColumn" after close brakets:

function hookHome($params)
   {
       return $this->hookLeftColumn($params);
   } 

Why this? because if you later need to translate the Shop this module do this for you, and another more advantage this module let you admin the links.

2.b. Is a subscribe to NewsLetter do not make more difficult to you PrestaShop have a NewsLetter Module configurated so, just make the same process for set this module on Home Hook as before with "blocklink", advantage is configurated and you may download the mails, another one you can translate this module.

3. Block with 3 Image Links, ones again PrestaShop have a module "blockpaymentlogos" just set this module as before to Home Hook and just change the images and links, just like that.

4. And at last for "Specials block" set as before this module to "Home Hook"

5. With css you can change the look, size, position, what to display or not in every module. as example: hide the modules tittle.

If you try to make just "Divs" on Editorial Module you need more experience to program this.. because you can position a module inside a hook but inside a div... ufff

Remmember I am just trying to help you.
But after all you need a little knowledge for css.
PD: after you change modules to Home Hook remmeber to translate the module to this hook by Back Offfice>Modules>Transplant a Module to Hook: and choice the Module name and Home Hook to transplant.

I wish you look.

[JustStarted]

I took time to understand and practise the solution you mentioned.Dont wanna bother ppl too much. Now it make sense to me.. its better to reuse the exisiting module. After the code change now i am able to bring those block in the 'Home' hook. But the problem is all those blocks are displaying vertically. As mentioned before i need them horizontally aligned. Can you please help me on that?

- If i change the css style of those blocks in home page, it will be affected in other pages. But I want different color,heading and alignment of those modules in home page. i can think about following solutions:

1. Duplicate the entire module and rename it. Create new css ids for that module.
2. In module .tpl file i need to write logic like (if $page=='index' then use css id 1 else existing css id )

May be none of them are good, any better solution?


Thank you in advance.

[Ameenullah]

if you are willing to have your own design, you have to work on it.

some tips.

play with css, in prestashop css for block is same for all block... if you want to have different look for homepage, copy-paste the blcok code and edit the schemes as you like.

in template file you can edit the hooks you want.

you can use single css for entire shop, no need to go for different css for different page.

[Kalastudio]

Hi
JustStarted,

Sorry my delay, but, I have a lot of work by my side.
Let you 2 links that can help you and anyone beginner on PrestaShop:

Developping Themes for Prestashop:
http://www.daveegerton.com/prestashop-guides/Prestashop-Designers-Guide/Themes/modifying-the-default-prestashop-theme.html

Learning CSS:
http://www.w3schools.com/css/default.asp

I hope this can help you..!!!

Best Regards..!!!

[inner]

I get some good ideas in this post, thanks it was very helpful for me.
But i need to go more deep in CSS because i have the same problem, the modules display vertically.

[CalloSmart]

Theme customization is a challange for the people who are not from design background. Requesting help /suggestion from expert ppl. Infact this will help other presta developers too.

I want to design a home page like the attached image. How can i add another block on top of footer or at the bottom of middle contents. After adding that new block i want to put few image link and special product block there like the attached screen shot. I am not expert in CSS, if possible please provide the solution as details as possible. Also please leave some suggestion to learn temeplete customization quickly?

- Is there any editor to edit prestashop theme?

Hi

I have over 13 years of software development in Microsoft based software development technologies. But I am a newbie to PHP and especially to Prestashop framework. I am learning the framework and in the process, started to write a series of posts(Creating a Prestashop 1.4 theme from scratch) to outline the creation of a new Prestashop theme using Visual Studio and other tools. The posts primarily are targeted towards a PHP/Prestashop newbie.

Please visit Creating a Prestashop 1.4 theme from scratch and share my experiences through my learning phase. I hope active participation from other novice Prestashop programmers like me and advices from Prestashop experts to make the posts helpful for others who require it.