Premium Kindergarten and School Joomla Template

Chico - Premium Kindergarten and School Joomla Template

Quickstart package for Joomla 3.x +  Template Only

Author: PixelHut

Thank you for choosing our theme! We hope Chico will suit your needs in developing your site. With Chico - Premium Kindergarten and School Joomla Template you can build your corporate, business, creative and even freelancer Joomla website. The templae is oriented towards all schools and kindergartens and also all websties related to children. You can develop and boost your business. We hope to use our Joomla Template for your brand new site or to redesign your existing one.

Enjoy Chico design, features and ideas!

You can choose to install the template with its full demo package - the Quickstart package, or only the template itself. Note that we Highly Recommend the Full Demo Quickstart installation, rather than only the template itself.

1. How to install the Quickstart Demo package:

To make it easier and more clear for you we made a short video on how to install the quickstart for our Joomla templates.

2. Template Only installation:


All your customization (custom code) should be placed in your "Custom Style Sheet" file. This is the custom.css file. By default, the custom.css file does not exists, so you will need to create it. You need to create this file in templates/TEMPLATE-NAME/css/custom.css.

Customizations from the template settings page:

First you need to go to Joomla administration > Extensions > Template manager > and choose the template you're using (it will be called TEMPLATE-NAME - Default). You will find 9 tabs as follows:

  1. Basic (basic template options)
  2. Presets (define main color theme)
  3. Layout (template layout and module positions)
  4. Menu (menu options)
  5. Typography (define heading, menu and content fonts)
  6. Custom Code (add custom css or js)
  7. Advanced (cache and LESS settings)
  8. Blog (comments, social share and post format)
  9. Assignment (assign the template to specific menus)

1. Basic Tab:


Boxed Layout: choose between boxed or full-width layout.


Body Background Image:


Social Icons:

Contact Information:

Coming Soon:

Error Page:

2. Presets:

By default you have 4 preset styles with color schemes included.

Please note that all the colors will work if the LESS option from the Advanced tab is enabled! This way the LESS files will automatically generate your CSS files with those colors.

3. Layout:

By default in the Layout tab you will find the preset module positions and template layout. You can either use the created module positions or create your own module positions.

Customizing module position or entire row from the template settings:

Customize entire row settings: click on the Settings button on the right of the row you want to customize and change the options depending to your needs. Per example, you can change the row background, text color, add background image, or disable it on desktop, tablet or mobile views.

Same applies for a module position: by clicking on the 3 cogs icon you will load the settings applied to this particular module position.

4. Menu:

5. Typography:

From this tab you can choose different fonts for different headings, menu, content or add a custom font which can be assigned to specific classes.

6. Custom Code: here you can add custom lines of code if needed.

7. Advanced:

Cache Settings:

Compile LESS to CSS: with this option enalbed the CSS files will be autogenerated from the LESS files.

8. Blog:

9. Assignment: assign any of your menus to the template.

This option is used mostly when you want to display different preset on a different menu.

If you want to have a different color theme on any of your menus you need to:

Site admin > Extensions > Template Manager -> click on Chico.

In the Basic Tabs:

Sticky Header: Yes

Select your favicon and save it.

Boxed Layout
Enable No, but if you want to use the boxed version, you can just switch to Yes.

Everything is explained in Changing the Logo section in the documentation.

To use the presets and change colors go to:

Module Positions:

To add or rearrange modules you need to go to:

Site admin > Extensions > Template manager;
click on Chico template;
click on the Layout tab;
You can drag and drop the modules or content or create new positions/ rows.

Module variations:

Chico template comes with 9 different module title variations (Module Class Suffix):
default (leave the module class suffix empty), title1, title2, title3, title4, title5, title6, title7, title8, title9

Layout Builder:

You can open the layout builder from Joomla admin > Extensions > Template manager > Chico > click on the Layout tab. You can create new rows or change the columns layout of a current position. You can change both columns settings and column/ position settings.

To create new module positions you need to:

1. Open templates/chico/templateDetails.xml and locate the following lines:


2. Copy one line - per example <position>title</position> and paste it below the other one, then rename it (in this example the new position will be called "newposition"):


- save and close the file

3. Open the Layout tab in the template settings > choose wherever to place the new position (the position should first have a row and then click on the cogs icon) > when you click on the cogs icon you'll see the drop down list Module Position > choose the "newposition" from the list and save.

4. Go to templates/chico/less/theme.less and add the new css style for the new position. The class of the new position should be:


5. Finally create a module and publish it in the new position.

The default Joomla editor (TinyMCE) is known for stripping the code in articles or Custom HTML modules, or any other modules that use an editor.
We recommend to use JCE as a text editor or disable the text editor at all.

1. JCE - download and install JCE from

You can turn it on by going to Site Admin > Global Configuration > Default Editor * > select "Editor - JCE" and save.
Thus, when you open an article or a module, you will see the "Toggle Editor" button, from which you can switch between HTML editor and Text editor.

Let's say you open a module and this module is "Social Icons". When you open it with TinyMCE you won't see any code and you might think that the icons are there - if you save the code will get stripped.
Now if you have enabled JCE as a default editor and open the module, again you won't see the icons, BUT if you click on the "Toggle Editor" button the code will be displayed. You can edit it and save. Thus you will not lose any code neither from article or module.

2. No Editor - You can turn off the editor by going to Site Admin > Global Configuration > Default Editor * > select "Editor - None" and save.
Thus when you open any article or module you will see the original code and when saving no code will get stripped.

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name.

<i class="fa fa-camera-retro"></i> fa-camera-retro

More icons can be found here.

SP Page Builder Pro version is built-in in QuickStart only. We have used this drag and drop Joomla page builder to develop our pages. This way we make it possible for you to create your site without coding. It includes more than 40 addons, uses Joomla Modules as addon (so you can place your modules as a part of the page trought the page builder). You can use it as Module on desired menu and as a Page, directly built with SP Page Builder. Another amazing thing about the builder is that you have both Backend and Frontend Editor. In the brief video below you can see how you can work with SP Page Builder Pro.

The following video is for our The Hills template, which shows how the SP Page Builder is working. Same Page Builder is coming packed with Chico and the working process is the same.

Stock and Free Images used in the demo site and NOT included in the download package: