CMS page to use all the available space by disabling left and right column

Ulisses Ramos · October 15, 2011

I need to have some CMS pages occupying all the layout on "homepage" block.

I´m using the default theme with right and left column.

I´ve added the name of the cms page test "cms.php?id_cms=11" to all the modules on the right and left block and they do not appear on that page. The problem is that i still have the that CMS block with the default width (550 ou 560) and not occupying all the space. (990px ou something like that)

Does anyone have any idea how to change this ?

Is it possible to change those CMS Page´s width ?

Thanks

jhnstcks · October 16, 2011

Not sure what you mean by adding the name of the cms page to all the modules . But to remove the columns from the cms pages you just need to add the following code to cms.css file.

#left_column, #right_column { display: none }

Ulisses Ramos · October 17, 2011

Not sure what you mean by adding the name of the cms page to all the modules . But to remove the columns from the cms pages you just need to add the following code to cms.css file.
#left_column, #right_column { display: none }

I added the exception on "Modules -> Positions.

I want some CMS pages to have the left and right columns, and others not to have them and use all the page area ( about 990px)

jhnstcks · October 18, 2011

As far as I am aware you cannot currently specify exceptions like that, only php pages.

Ulisses Ramos · October 18, 2011

As far as I am aware you cannot currently specify expections like that, only php pages.

Maybe the way to go is to create a new hook and insert those pages as html on that hook and not as cms pages.

Not sure how to do it but i will try

alenbrcic · April 18, 2012

Hello,

Can you indicate where the cms file is usually located to add this change?

#left_column, #right_column { display: none }

alenbrcic · April 18, 2012

Under my theme I do not have a cms.css, rather I have global.css, maintenance.css, and scenes.css

Under the global.css there is the following code related to cms

body#cms div.content_only {padding:0 20px 20px 20px;background:#fff;color:#000;text-align:left;}

body#cms div.content_only h1 {padding:14px 0 0 0;font:normal 18px "Arial";color:#777;text-transform:uppercase;}

body#cms div.content_only h2 {padding:14px 0 0 0;font:bold 14px "Arial";color:#777;text-transform:uppercase;}

body#cms div.content_only h3 {padding:14px 0 0 0;font:bold 12px "Arial";color:#777;text-transform:uppercase;}

body#cms div.content_only h4,

body#cms div.content_only h5,

body#cms div.content_only h6 {padding:14px 0 0 0;font:normal 12px "Arial";color:#777;text-transform:uppercase;}

body#cms div.content_only p {padding-top:12px;font:normal 12px "Arial";color:#000;}

body#cms div.content_only a {font:normal 12px "Arial";color:#0753b4;text-decoration:none;}

body#cms div.content_only a:hover {color:#000;}

body#cms div.content_only ul {list-style-type:circle;list-style-position:inside;}

body#cms div.content_only ol {list-style-type:decimal;list-style-position:inside;}

div.rte strong {font-weight:bold;}

div.rte em {font-style:italic;}

div.rte table {border-collapse:separate;border-spacing:1px;width:auto;}

div.rte caption,

div.rte th,

div.rte td,

div.rte table {text-align:left;font-weight:normal;background:none;height:inherit;border:1px #eee solid;font:normal 12px "Arial";color:#000;text-align:center;}

div.rte th {height:24px;padding:0 7px;background:#eee;font-weight:bold;}

Please advise.

Eihwaz · April 18, 2012

It seems CSS alone won't do it, you'll need a small module to determine what page we're currently on. I presume you're using Prestashop v 1.3 or lower, so here's two probable solutions (test first, as this was thrown together really quickly):

<?php
class cmsClass extends Module
{
public function __construct()
{
	$this->name = 'cmsclass';
	$this->version = '0.1';
	$this->tab = 'Tools';

	parent::__construct();

	$this->displayName = 'CMS Page Class';
}

public function install()
{
	return (parent::install() && $this->registerHook('header'));
}

public function hookHeader()
{
	global $page_name, $smarty;

	$body_class = false;

	if ($page_name == 'cms')
	{
		$id_cms = Tools::getValue('id_cms', false);

		if ($id_cms && Validate::isUnsignedId($id_cms))
		{
			$body_class = 'cms_' . (int)$id_cms;
		}
	}

	$smarty->assign('body_class', $body_class);
}
}

This solution requires changes to your header.tpl file - you need to add "{if $body_class}class="{$body_class}"{/if}" to your <body> tag. And then you can style it in CSS like this:

body.cms_1 #left_column {display: none;}

The second solution does not require changes, but it uses an inline CSS. It is more flexible in some ways, because you can use it not only for cms, but for other pages as well:


<?php
class cmsClass extends Module
{
   private static $_column_settings = array(
       'cms' => array(
           'identifier' => 'id_cms',
           'settings' => array(
               1 => 'l',
               2 => 'lr'
           )
       ) 
   );

   public function __construct()
   {
       $this->name = 'cmsclass';
       $this->version = '0.1';
       $this->tab = 'Tools';

       parent::__construct();

       $this->displayName = 'CMS Page Class';
   }

   public function install()
   {
       return (parent::install() && $this->registerHook('header'));
   }

   public function hookHeader()
   {
       global $page_name;

       $body_class = false;

       if (array_key_exists($page_name, self::$_column_settings)
           && array_key_exists('identifier', self::$_column_settings[$page_name]))
       {
           $identifier = Tools::getValue(self::$_column_settings[$page_name]['identifier'], false);

           if ($identifier && Validate::isUnsignedId($identifier))
           {
               $page_settings = (array_key_exists('settings', self::$_column_settings[$page_name]) && is_array(self::$_column_settings[$page_name]['settings'])) ? self::$_column_settings[$page_name]['settings'] : false;

               if ($page_settings && array_key_exists($identifier, $page_settings))
               {
                   $selectors = array();

                   if (strpos(strtolower($page_settings[$identifier]), 'l') !== false)
                   {
                       array_push($selectors, '#left_column');
                   }

                   if (strpos(strtolower($page_settings[$identifier]), 'r') !== false)
                   {
                       array_push($selectors, '#right_column');
                   }

                   if (sizeof($selectors))
                   {
                       return '<style type="text/css">' . (implode(',', $selectors) . ' {display: none;}') . '</style>';
                   }
               }
           }
       }
   }
}

See this part:

private static $_column_settings = array(
'cms' => array(
	'identifier' => 'id_cms',
	'settings' => array(
		1 => 'l',
		2 => 'lr'
	)
)
);

The "cms" key is the page that you want to remove columns from. "Identifier" is a _GET parameter to look for, so, in cms case (cms.php?id_cms=1) it is "id_cms". The "settings" contains cms ids and column settings for them, 1 => 'l' means that the left column will be REMOVED from this particular cms page.

That's about it.

Cheers!

khaledsaied · December 26, 2013

It seems CSS alone won't do it, you'll need a small module to determine what page we're currently on. I presume you're using Prestashop v 1.3 or lower, so here's two probable solutions (test first, as this was thrown together really quickly):

<?php
class cmsClass extends Module
{
	public function __construct()
	{
		$this->name = 'cmsclass';
		$this->version = '0.1';
		$this->tab = 'Tools';
	  
		parent::__construct();
	  
		$this->displayName = 'CMS Page Class';
	}
  
	public function install()
	{
		return (parent::install() && $this->registerHook('header'));
	}
  
	public function hookHeader()
	{
		global $page_name, $smarty;
	  
		$body_class = false;
	  
		if ($page_name == 'cms')
		{
			$id_cms = Tools::getValue('id_cms', false);
		  
			if ($id_cms && Validate::isUnsignedId($id_cms))
			{
				$body_class = 'cms_' . (int)$id_cms;
			}
		}
	  
		$smarty->assign('body_class', $body_class);
	}
}

This solution requires changes to your header.tpl file - you need to add "{if $body_class}class="{$body_class}"{/if}" to your <body> tag. And then you can style it in CSS like this:

body.cms_1 #left_column {display: none;}

The second solution does not require changes, but it uses an inline CSS. It is more flexible in some ways, because you can use it not only for cms, but for other pages as well:

<?php
class cmsClass extends Module
{
    private static $_column_settings = array(
        'cms' => array(
            'identifier' => 'id_cms',
            'settings' => array(
                1 => 'l',
                2 => 'lr'
            )
        ) 
    );

    public function __construct()
    {
        $this->name = 'cmsclass';
        $this->version = '0.1';
        $this->tab = 'Tools';

        parent::__construct();

        $this->displayName = 'CMS Page Class';
    }

    public function install()
    {
        return (parent::install() && $this->registerHook('header'));
    }

    public function hookHeader()
    {
        global $page_name;

        $body_class = false;

        if (array_key_exists($page_name, self::$_column_settings)
            && array_key_exists('identifier', self::$_column_settings[$page_name]))
        {
            $identifier = Tools::getValue(self::$_column_settings[$page_name]['identifier'], false);

            if ($identifier && Validate::isUnsignedId($identifier))
            {
                $page_settings = (array_key_exists('settings', self::$_column_settings[$page_name]) && is_array(self::$_column_settings[$page_name]['settings'])) ? self::$_column_settings[$page_name]['settings'] : false;

                if ($page_settings && array_key_exists($identifier, $page_settings))
                {
                    $selectors = array();

                    if (strpos(strtolower($page_settings[$identifier]), 'l') !== false)
                    {
                        array_push($selectors, '#left_column');
                    }

                    if (strpos(strtolower($page_settings[$identifier]), 'r') !== false)
                    {
                        array_push($selectors, '#right_column');
                    }

                    if (sizeof($selectors))
                    {
                        return '<style type="text/css">' . (implode(',', $selectors) . ' {display: none;}') . '</style>';
                    }
                }
            }
        }
    }
}

See this part:

private static $_column_settings = array(
	'cms' => array(
		'identifier' => 'id_cms',
		'settings' => array(
			1 => 'l',
			2 => 'lr'
		)
	)
);

The "cms" key is the page that you want to remove columns from. "Identifier" is a _GET parameter to look for, so, in cms case (cms.php?id_cms=1) it is "id_cms". The "settings" contains cms ids and column settings for them, 1 => 'l' means that the left column will be REMOVED from this particular cms page.

That's about it.

Cheers!

Hi I am running PrestaShop 1.5.6.1 and leo shoe template (not default template)

Your solution looks to be the one I am searching for. But can I use it for the PrestaShop version I am running and where can I place this code? I wan't to remove the left column on some or all of my cms pages. Thanks.

My site URL: http://buyzaaptv.dk/...-zaaptv-kanaler

Edited December 26, 2013 by khaledsaied (see edit history)

vekia · December 26, 2013

hello

i inspected your website once again, there is no right column on the cms pages.

problem solved? where the problem was?

CartExpert.net · December 26, 2013

Hi I am running PrestaShop 1.5.6.1 and leo shoe template (not default template)

Your solution looks to be the one I am searching for. But can I use it for the PrestaShop version I am running and where can I place this code? I wan't to remove the right column on some or all of my cms pages. Thanks.

My site URL: http://buyzaaptv.dk/...-zaaptv-kanaler

Problem solved now.

For anyone else, solution is: http://www.prestashop.com/forums/topic/172764-remove-left-and-right-column-only-in-authentication-page/

Regards.

Robin.

The CartExpert Team

khaledsaied · December 26, 2013

hello

i inspected your website once again, there is no right column on the cms pages.

problem solved? where the problem was?

sorry I meant left column. don't know why I wrote right..it's corrected now

CMS page to use all the available space by disabling left and right column

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in