Implementing Welcome Popup in CakePHP Part : 2

This post is the second part of my previous article Implementing Welcome Popup in CakePHP. As I told you we'll add some more feature in the simple popup, so in this post what we are going to add is color fields for dynamic background, font color in popup and some route related stuff.

New fields added are,

bg     : background color 
fcl     : title font color  
mbg  : middle div background color
mfcl  : middle div font color 

Please run the below SQL command to create our popups table with new fields.

  `title` varchar(200) NOT NULL,
  `content` text NOT NULL,
  `firstvisit` tinyint(2) NOT NULL,
  `delay` int(10) NOT NULL,
  `bg` char(7) NOT NULL DEFAULT '0085FF',
  `fcl` char(7) NOT NULL DEFAULT 'FFF',
  `mbg` char(7) NOT NULL DEFAULT '81BDF3',
  `mfcl` char(7) NOT NULL DEFAULT 'FFF',
  PRIMARY KEY (`id`)

Add New Fields

Now we add the new input fields in our index.ctp which resides in app/View/Popups folder.After adding new fields file looks like,

 echo $this->Form->create();
 echo $this->Form->input('title');
 echo $this->Form->input('content',array('type'=>'textarea'));
<label>First time</label>
 echo $this->Form->checkbox('firstvisit');
 echo $this->Form->input('delay');
 echo $this->Form->input('id', array('type' => 'hidden'));
 echo $this->Form->input('bg');
 echo $this->Form->input('fcl');
 echo $this->Form->input('mbg');
 echo $this->Form->input('mfcl');
 echo $this->Form->end('Save');

As we are saving the color code in the database , its recommended to have color picker as a input. Please read below post:

So now with the Farbtastic helper new inputs will be as below,

echo $this->Farbtastic->input('','Background Color');
echo $this->Farbtastic->input('Popup.fcl','Font Color');
echo $this->Farbtastic->input('Popup.mbg','Middle Background Color');
echo $this->Farbtastic->input('Popup.mfcl','Middle Font Color');  

add script code,

<script charset="utf-8" type="text/javascript"> 
    $(document).ready(function() { 
            echo $this->Farbtastic->readyJS('');  
            echo $this->Farbtastic->readyJS('Popup.fcl'); 
            echo $this->Farbtastic->readyJS('Popup.mbg'); 
            echo $this->Farbtastic->readyJS('Popup.mfcl'); 

Open element "popup.ctp" add the following code at the end of file.
 background: <?php echo $data['Popup']['bg'];?>;

 background: <?php echo $data['Popup']['mbg'];?>;
 color:<?php echo $data['Popup']['mfcl'];?>

color:<?php echo $data['Popup']['fcl'];?>


Let's say you have admin prefixes setup(this means you have admin prefix added in core.php file),

       Configure::write('Routing.prefixes', array('admin'));

then definitely you don't want this popup to be displayed for all of the admin actions. To restrict the popup for such actions do as suggested below,

Add the below code in your AppController.php file

public function beforeRender() {
Configure::write('admin.prefixes', true);

Add this condition in the default.ctp file.(you can add other conditions also as per you requirements)

echo $this->element('popup');

Change the request action in the popup.ctp element from




Popup module as admin action, 

Add the prefix "admin" against the  below actions of PopupsController.php file. 

 -- index()
 -- display()

Change the view file name of popups ,from index.ctp to admin_index.ctp


Thats it..!! now you have new welcome popup with new color fields, you can change the colors of the background , font color as your wish. you can access you popup configuration with admin prefix in the URL.

Let me know if you face any issue in implementing this changes.