Design Extensible / Liquid expandable design

[moncler]

Bonjour,

Je voudrais faire un theme avec un design extensible.

Le probleme est que pour cela il faudrait inverser l'ordre d'apparation des colonnes: par default on a left_column, center_column, right_column.

Pour avoir ces 3 div bien centrer et extensible avec le css il faudrait : left_column, right_column, center_column.

 

Une idée? j'imagine qu il faut modifier le code de generation mais etant encore debutant je ne sais pas trop par ou commencer et ou chercher..

 

Merci.

 

__________________________

 

 

Hi,

I would like to make a theme with an expandable design.

The problem is that it should reverse the order of apparation columns: by default on a left_column, center_column, right_column and it should be instead :left_column, right_column, center_column.

 

An idea? I imagine that it is necessary to modify the code generation but still being beginer I do not really know or begin a search and or ..

 

Thank you.

[moncler]

Il y a 2 variables $HOOK_LEFT_COLUMN et  $HOOK_RIGHT_COLUMN qui se situent respectivement dans les fichiers header.tpl et footer.tpl, ce qui semble correspondre a la génération des 2 colonnes.

Entre les 2 il y a bien un div "center_column" mais pas de variable du genre $HOOK_CENTER.

J'ai tenté de placer $HOOK_RIGHT_COLUMN juste aprés $HOOK_LEFT_COLUMN mais le problème est que le div "right_column" est vide

???

 

_______________________

 

 

 

 

There is  $HOOK_LEFT_COLUMN and $HOOK_RIGHT_COLUMN that lie respectively in the files header.tpl and footer.tpl, which seemed a generation of 2 columns.

Between 2 there is a div "center_column" but not the kind of variable $HOOK_CENTER.

I tried to put $HOOK_RIGHT_COLUMN just after $ HOOK_LEFT_COLUMN but the problem is that the div "right_column" remains empty

???

[Pursuant]

Two columns next to eachother is illogical... ?

[moncler]

Two columns next to eachother is illogical... ?

Hi Ox40,

I am not a css specialist but if you can make a completely expandable design with 3 // column and right column, center and left tell me how.

I tried a while without sucess 

Here is some sample of expandable design

http://css.alsacreations.com/modeles/modele6.htm

http://gcyrillus.free.fr/xkgc11/

 

If the center column is before, the right column is displayed below in the right (float: right) ???

 

Thank you

[Pursuant]

global.css: line 168

- Remove "width:980px;"

 

global.css: line 192

- change width to "width: 65%;"

 

ta-da!

 

--Kevin

[moncler]

Hi Kevin,

 

This is not a true expandable design: if the browser size is < 1200px, the right column go down under the left column. Also the center column is not really in the center.

I think the column must be "float: left/right" for this

 

 

However,, thank you for your help.

[Pursuant]

Heh, yeah, you are right. I did mess up a little. My resolution is 1280x1024, and I didn't test it. But, it is a definite start.

[shagshag]

Hi moncler

 

La colonne de droite est vide parce que son contenu n'est pas encore calculé.

le contenu des colonnes est calculé dans les fichiers header.php et footer.php à la racine de la boutique. il suffit donc de déplacer la ligne

	'HOOK_RIGHT_COLUMN' => Module::hookExec('rightColumn'),

de footer.php (ligne 6)

en dessous de

	'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),

dans header.php (ligne 10)

 

et ça devrait fonctionner

 

---

 

 

The right column is empty because its contents are not yet calculated.

the content of columns is calculated in the files header.php and footer.php at the root of the shop. you can move the line

 'HOOK_RIGHT_COLUMN' => Module: hookExec ( 'rightColumn'),

of footer.php (line 6)

below

 'HOOK_LEFT_COLUMN' => Module: hookExec ( 'leftColumn'),

in header.php (line 10)

 

and it should work

[don_kassim]

thanks Kevin

it worked!

now prestashop is in fluidwidth! finally!!!!

[Paul C]

I've tried several different ways, and found that I had to move both columns into the header to get it to work. Still trying to work out a solution without altering the php code (i.e. purely in the template) but I'm not confident

Paul

[don_kassim]

does moving the columns to the header work ?

[Paul C]

Because the left and right columns are fixed width, and the center column is the variable one, the browser needs to draw the right and left columns (or at least know their size) first, before it can calculate how to draw the center one.

By default;

header.php : generates the contents for the left column (displayed by header.tpl)
footer.php : generates the contents of the right column (displayed by footer.tpl)
"others".php : generate the center content as appropriate (div opened by header.tpl, and closed by footer.tpl)

So header.tpl can only draw the left column and footer.tpl can only draw the right column, by default. I'm a bit of a purist and try and avoid editing the core .php files if possible. Makes it easier to upgrade that way!

Paul

[don_kassim]

alright then, will wait for the solution

[Mike146]

I have spent the last couple hours working on this. I got it pretty close except there are a few problems. One,
This is the generated code used to display the links to "your account and the "cart". The problem is they are rendered on top of all three columns, which can pose an alignment issue. I can't figure out how to place them in the right column to keep them on top of it.
Any suggestions would be good....

Welcome,
<*a href="http://SUPERDOMAIN.com/my-account.php">Log in

• 
  
• 
  <*a title="Your Shopping Cart" href="http://SUPERDOMAIN.com/order.php">Cart:
  
  product
  products
  
  (empty)
  
  
• 
  
  

[/size]

After I solve this problem I have nearly completed the liquid layout.(except for the image repeats). I have attached my style sheet for people to take a look at. Most of the changes are in the columns. I will also post it below. PS> Be sure to back up your original global.css file in case you need to go back!!!!

/* ------------Back up your Style sheet ----------------------*/

/* global layout */

#page {
   width: 93%;
   text-align:left;
}
h1#logo {
   float: left;
   width: 29%;
   margin-top:0.5em;
}
#header {
   margin: 0 auto 0 auto;
   height:100px;
   width: 100%;
   text-align: right;
}

/*---= Changed to 20% Width, and 25px right padding =---*/
#left_column {
   float:left;
   width:20%;
   padding-right: 25px;
}

/*---= Added 10px Padding along with 60% width =---*/
#center_column {
   float:left;
   padding: 10px;
   width: 60%;
}

/*---== Added padding to column and 10% width =---*/
#right_column {
   float:left;
   width: 10%;
   padding: 15px 25px 10px 10px;
}

It works until it breaks under 1024px screen width. I don't know about you guys but I am not too concerned, I always develop for that size. If your screen rez is smaller than 1024, UPGRADE your screen!

[Mike146]

Oh ya if you want to take a look:

http://prestashop.photocenterpieces.com/

[Tung]

wait for the solution