[SOLVED] Increase CMS Page Width for 1.5.4.0

[elektrojo]

Hi,
I have found an article about hiding the right columns from the CMS page and keeping it every where else, but i need the space this column is using , i need to increase CMS page width without changing any other pages

[vekia]

well it is possible but in this case you have to remove one of the column. Which one you want to remove / hide ?

and what template you use?

[elektrojo]

well it is possible but in this case you have to remove one of the column. Which one you want to remove / hide ?

and what template you use?

 

I told you i have hided the right one

[vekia]

you told that you found article about hiding right column, not that you want to hide right column.

anyway, here is the solution for You:

 

open the footer.tpl file

instead the simple definition of the right column, use it with {if} condition:

 

{if !($page_name == "cms")}
	<div id="right_column" class="column grid_2 omega">
	 {$HOOK_RIGHT_COLUMN}
	</div>
{/if}

 

 

then in the header.tpl file:

instead: <div id="center_column" class=" grid_5">

use:

<div id="center_column" class="{if $page_name != "cms"}grid_5{else}grid_7 omega{/if}">

[elektrojo]

you told that you found article about hiding right column, not that you want to hide right column.

anyway, here is the solution for You:

 

open the footer.tpl file

instead the simple definition of the right column, use it with {if} condition:

 

{if !($page_name == "cms")}
	<div id="right_column" class="column grid_2 omega">
	 {$HOOK_RIGHT_COLUMN}
	</div>
{/if}

thanks Sir, could we do this to the left column too

 

then in the header.tpl file:

instead: <div id="center_column" class=" grid_5">

use:

<div id="center_column" class="{if $page_name != "cms"}grid_5{else}grid_7 omega{/if}">

first of all thank you, what will this line do

<div id="center_column" class="{if $page_name != "cms"}grid_5{else}grid_7 omega{/if}">

[vekia]

this line sets up the width of the center column

it mean something like:

 

if page that customer browsing isn't CMS page

then use grid_5 class | width value: 535px;

 

if page that customber browsing is CMS page

then use grid_7 + omega class | width: width:646px; + margin-right: 0; (omega class)

[elektrojo]

this line sets up the width of the center column

it mean something like:

 

if page that customer browsing isn't CMS page

then use grid_5 class | width value: 535px;

 

if page that customber browsing is CMS page

then use grid_7 + omega class | width: width:646px; + margin-right: 0; (omega class)

 

it worked as needed ! thank you! could i ask for one more thing or two.

1. i need to do the same to left column (hide it and add its width to the center column.

2. this is a question: those settings will be applied on all CMS pages or we could make exception according to the page title

[vekia]

if you want to remove left column also use this:

for left column:

{if !($page_name == "cms")}
		    <div id="left_column" class="column grid_2 alpha">
			 {$HOOK_LEFT_COLUMN}
		    </div>
{/if}

 

 

 

those settings will be applied to all CMS pages.

If you want to make exception for another pages, you have to create another if condition based on cms page ID number (not title)

 

for center column:

<div id="center_column" class="{if $page_name != "cms"}grid_5{else}grid_9 alpha omega{/if}">

[JohnADK]

...

those settings will be applied to all CMS pages.

If you want to make exception for another pages, you have to create another if condition based on cms page ID number (not title)

 

for center column:

<div id="center_column" class="{if $page_name != "cms"}grid_5{else}grid_9 alpha omega{/if}">

 

The instructions in this topic are very helpful and I was able to make my CMS pages one full page. However, I have seen that I actually only want this for a single CMS page, leaving the remaining CMS pages to behave in the standard way.

 

Vekia, you wrote that one should create a similar line of code, but identifying the page by CMS ID. How does this appear in the code? Would I replace the above IF statement with this? or would the div id="center_column" line be returned to its default and then add a line just for the single CMS page?

 

How do I identify this single CMS page, so I only change the presentation for that page?

 

Thanks in advance. I hope you can help.

[vekia]

you have to use something like:
 

<div id="center_column" class="{if $page_name != "cms"}grid_5{else}{if $smarty.get.id_cat==2}grid_9 alpha omega{else}grid_5{/if}{/if}">

[JohnADK]

Super. Thanks, Vekia. Just what I needed.

[vekia]

hello

 

thank you for information that this is what you expected

now it's time to mark this thrad as [solved]

 

with regards,

Milos

[Vilas]

Dear Vekia,

 

I wish to also increase width of page.

 

 

 

I am attaching page preview will be great if you can help me to fix this issue.

Edited August 24, 2014 by Vilas (see edit history)

[vekia]

you mean that you want to increase width of whole page? 

if so modify this file: REMOVED

 

 

increase width of

.container_9 {
	margin:0 auto;
	width: 980px;
}

and

.container_9 .grid_9 {width:968px;}

and if it will be necessary also in other definitions of grid elements

[Vilas]

Yes wish to increase width of whole pages.

 

Instead of putting value there if I make below changes then does it will work?

 

width:100% instead of putting values in pixels.

 

Plz confirm.

[Vilas]

Yes thats worked.

 

But now there is alignment changes required to look that properly.

[vekia]

hello

you can use 100% but remember that in grid_prestashop sizes of blocks are defined in pixels it mean that you have to recalculate them in percentages

 

980px = 100%

200px = x

 

calculate x, for each grid_2 grid_3 grid_4 etc.

[Vilas]

Let me try from my end. Will get back to you if I need anything from you end

 

Further, like to know on product pages top menu will be better or an normal vertical menu will be better. I am little bit confused whether to remove left block on product pages

 

As a buyer point of view which will be better?

[Vilas]

Hello Vekia,

 

If possible plz remove that css url from your comment as I am getting unwanted hits to that file

 

I am sorry for trouble.

 

 

you mean that you want to increase width of whole page? 

if so modify this file:

 

 

increase width of

.container_9 {
	margin:0 auto;
	width: 980px;
}

and

.container_9 .grid_9 {width:968px;}

and if it will be necessary also in other definitions of grid elements

 

[vekia]

Hello Vekia,

 

If possible plz remove that css url from your comment as I am getting unwanted hits to that file

 

I am sorry for trouble.

 

done

link removed

[retrodrive]

I am trying to set up a 100px margin on all the pages (including my blog module) except the index page. i have read through this post and in the "header.tpl" all I see is:

 <div id="center_column"> 

There are no references to the classes like "grid_9". what is the best way to accomplish my goal?

 

The web site is:

www.snoretech.com

 

Blog module:

www.snoretech.com/blog-stop-snoring-cure-your-snore-sleep-quietly/4_snoretech-blog-introduction.html

 

Please help