How to install a new theme

To install a new theme it is fairly easy. Usually the theme is in a folder structure to just copy it to your project. For example Bootstrap theme has the below folder structure:

assets/
––– grocery_crud/
––––––– themes/
––––––––––– bootstrap/
–––––––––––––––– css
–––––––––––––––– fonts
–––––––––––––––– images
–––––––––––––––– index.html
–––––––––––––––– js
–––––––––––––––– ...

So you just need to copy the folders into your already existing codeigniter and grocery CRUD project. If you don't know how to install grocery CRUD to your project then you can see installation guide for grocery CRUD

Once you actually copy the folder to your project the bootstrap theme is installed.

Note: Be aware that the bootstrap theme is mobile and tablet compatible so you will need to add the below code at the tags in your template file (e.g. application/views/example.php) in order to make it work for mobile and tablet devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

If you already done that, the only remaining thing that you need to do is to set the theme. You can do that but adding this line below at your basic controller functions (e.g. application/controllers/example.php):

$crud = new grocery_CRUD();
$crud->set_theme('bootstrap');
...

Adding a default theme at the config file

If you are sure that this theme is your favorite one, then you can also add it to your configuration file as a default theme. More specifically if you go at the file: application/config/grocery_crud.php and change the below line:

// Default theme for grocery CRUD
$config['grocery_crud_default_theme'] = 'bootstrap';

You will not need to add the same line again and again to your CRUD functions!

A full working example

A full working example can be find below:

public function bootstrap_theme() 
{
        $crud = new grocery_CRUD();
 
        $crud->set_theme('bootstrap');
 
        $crud->set_subject('Customer', 'Customers'); 
        $crud->set_table('customers');
        $crud->columns('customerName','contactLastName','phone','city',
                                   'country','salesRepEmployeeNumber','creditLimit');
        $crud->display_as('salesRepEmployeeNumber','from Employeer')
            ->display_as('customerName','Name')
            ->display_as('contactLastName','Last Name');
 
        $crud->set_relation('salesRepEmployeeNumber','employees','lastName');
 
        $output = $crud->render();
}

will give the below results. It is that simple! You don't need to configure anything else in order to make it work

Note: The below example is an iframe so it might appeared with a scroll bar. If you like you can view the example on a new tab