Joomla! Tutorials
Build Free Joomla! Templates
This is a step by step tutorial on how to create a responsive Joomla template using Linelabox in 10 minutes!
How does it work?
Login at Linelab.org go to your account and:
- a) pick some of the predefined free Joomla! templates that you can further customize,
- b) or select a blank template and design a new unique template from a scratch.
1. Setup module positions
As soon as the Blank template that you selected for editing and renamed loads into editor,
click on the „Rows“ tab.
It displays a grid with rows called abox, bbox, cbox… and columns „abox1,abox2,abox3. Columns abox1, abox2, abox3 are positions for modules – spots where the modules such as menu, login, search and other modules are displayed.
- Selecting checkboxes on the „Rows“ tab will activate the lines, while deselecting them will deactivate
- You can also use the slider in line editing to create columns.
- Width of lines can be changed by selecting from boxed options (fixed width in pixels) or fluid (responsive width in %).
- Width of colums can be changed by dragging after clicking on the double arrow icon at each column – ideally to prevent the columns to reach on next line.
Template grid has individual setup for desktop, tablet and mobile! So you need to setup 3 different grids. It is important to display the template correctly on different devices and make the template responsive.
E.g. you may not want to show 4 modules in a row for a mobile while on desktop it looks fine. You will want to show one module per one row to see everything nice and big.
Once you save the desktop grid, switch the view using the tablet or mobile icon in the top toolbar and continue with setup of grid for these views. You can go back to your previous settings anytime.
If you make a mistake, you can simply use the left arrow icon to revert the step. You can use the Undo and Redo features without any limit.
Bootstrap grid offers also other functions – e.g. by deselecting column title checkbox you can hide this column for the selected view. So this position will not be shown for mobile etc.
You can also disable spaces between single columns using the „No gutters“ feature. (This applies for Blank template only, other templates have lines and positions defined already.
This video tutorial shows a setup of a Joomla template grid:
2. Drag modules into template
- Click on the „Modules“ tab and:
- choose from default Joomla! modules,
- or modules from selected extensions such as K2, Phoca Cart, Virtuemart, Acymailing and others.
Easily drag modules into selected positions abox1, abox2 etc.
If you want to add custom HTML and CSS code, drag a module „Custom HTML“ to any position.
Design of „Skin“ module is always basic and you can completely changed on the „Edit Page“ page (as described below). Here you can also clone, delete and move modules using the drag&drop feature after clicking on ani con in blue toolbar for each module. You can return to this settings anytime later.
This applies only for the Blank template, other templates have already preset modules.
Check the template design to see how it looks in front-end anytime by clicking the „Quick View“ button in the top editor toolbar. Don’t forget to check mobile and tablet view as well!
This video tutorial shows how you can add modules from Joomla!, K2 component, Phoca cart, Virtuemart and other 3rd Party components:
3. Editing of basic CSS of the template, colors and fonts selection
Fonts addition
Click on the „Custom CSS“ tab. Here you can add various fonts and their versions (Light, Extra Light, Medium, Bold etc.) that you want to use for selected template for example for headlines etc.
We recommend you to keep the number of fonts low. You can choose from standard fonts and Google web fonts. There are over 850 fonts to choose from. Selected fonts can be applied to any item of the Joomla! template.
If you decide to delete any of the fonts, editor notifies you where it’s been used. All changes apply in real-time.
Colors and color schemes of template
By clicking the „Add New Color“ button you can define colors used in the template. These colors can be changed anytime so you can completely change the color scheme anytime you want. Clicking the icon at used colors allows you to find out, where the color is used.
This video tutorial shows how you can add fonts and their versions (Light, Extra Light, Medium, Bold etc.) into a Joomla! template.
Editing of basic CSS
In this section you can edit basic template selectors such as body, headlines h1 or h2, paragraphs, lists, forms, buttons and many others.
We recommend you to edit basic CSS on the „Typography“ page that can be accessed through the „Pages“ link in top left corner of the editor.
You can also edit CSS styles by clicking the „Edit code“ button (suitable for experienced users), so you have full control over basic CSS.
Every feature and every selector has a help, so if you do not know how to set outer margin of the element that you are editing, you can just move your mouse over the icon of each selector.
Those who do not want to learn CSS, will do great with the right panel of the editor. If you want to skip the basic CSS editing, the basic Bootstrap CSS framework will be used instead. This only applies to a „Blank template“ – other templates have basic CSS setup already.
If you make a mistake, you can easily fix it by going back using the arrow icon in the top toolbar.
This video tutorial shows you how you can style basic template selectors such as body (body of the document), headlines (h1, h2), paragraphs, links, lists, forms, buttons and many others.
4. Edit Page
On the „Edit Page“ tab you can change the parameters and layout of newly added modules, component pages or Snippets.
Snippet is custom HTML and CSS code that you add to a module called Custom HTML. Some of the advanced parameters are the same as the settings of modules in Joomla! administration.
To edit the layout of component pages, modules, snippets, lines and columns you can use the right panel of the editor, or again, you can use the „Edit code“ function that lets you create basically any design. Also modules titles can be renamed.
If you mouse over the top left corner of modules, you will see a blue toolbar with icons.
- If you click on the edit icon , you can change the layout of module’s contents or component page.
- If you click on the folder icon , you can load any of preset module skins
- If you drag a custom HTML module into a position, instead of skins you’ll be choosing from snippets
- By clicking the floppy icon you can save the skin or snippet into a library for later use
When you mouse over the bottom right corner of the module, you will see another blue toolbar with icons.
- By clicking the edit icon , you can change the module layout (module title, parameters of items that surround the module including the columns and lines that you have defined in the „Bootstrap Grid“ tab.
- „Section“ tab allows you to setup background image using the Parallax feature.
- If you click the folder icon in the bottom right corner, you can load any of predefined module styles.
- If you click the floppy icon , you can save your module layout style into a library for further use.
Just like in Joomla!, you can assign modules to homepage only, or to selected or all pages. This setting can be later changed in the Joomla! administration.
To check the template layout on the front-end, click the „Quick View“ button in the top editor toolbar. Don’t forget to check the look of the template for tablet and mobile too.
Custom Background Image + Parallax
Image „img“ or background can be added not only from right panel but also by clicking on the „Edit code“ button in various sections of the editor, so you can add them basically anywhere you want. That’s not all! You can add „paralax scrolling“ effect for background image simply by selecting the option from the select box under button used for image selection. Any action committed can be reversed using the Undo and Redo buttons, even when you make hundreds of changes. You can choose from more than 1 000 000 of images. You can search for pictures by orientation (vertical, horizontal), keywords and categories. This brings templating to another level.
This video tutorials shows how you can set an image as a background of any item in your Joomla! template.
How to install Joomla
How to install Joomla 3.x: www.docs.joomla.org/J3.x:Installing_JoomlaFor installing a version of Joomla! please use one of the links below to navigate to the appropriate installation instructions for your specific version. Installing Joomla! is very easy. We recommend you to select Default Sample Data option, you can delete all Joomla sample data at any time.
How to install VirtueMart
Are you new to Joomla and VirtueMart? We recommend to download the Full Installer including Joomla and VirtueMart.
Download VirtueMart: www.virtuemart.net/downloads
- Unzip the downloaded archive
- Move the unzipped archive to your website folder
- Open your browser and enter the URL of you website
- The installation process starts. Follow the instructions
You already have Joomla installed? Download VirtueMart component (core and AIO)
- Unzip the downloaded archive
- Install first VirtueMart core component via Joomla installer
- Install VirtueMart AIO component. AIO contains VirtueMart plugins and modules
How to install a Joomla template
- Go to the Joomla! administrator area of your website.
- Select the Extensions menu and Extensions Manager menu.
- Select the "Browse" button and choose the template zip file you have downloaded from our website to your computer.
- Select the "Upload & Install" button to install Linelabox Joomla! template. Your template contains all of Linelabox modules.
- Joomla! attempts to install Linelabox template, and if it is successful, you will see a confirmation message.
- To activate the new template go to Extensions > Template Manager, choose the installed template and click on "Make Default".
Module positions
A module position is a placeholder in a template. Placeholders identify one or several positions within the template and tell the Joomla! application where to place output from modules assigned to a particular position. For example, the module position "cbox1" could be defined to be on the top side of the template to display a site navigation menu. So if a module is assigned the "cbox1" position, it will be displayed wherever the designer puts that "cbox1" module position. It's possible to visualize all modules set on a template by calling the "tp=1" query string on the front-end.
- Example: http://www.example.com/index.php?tp=1
- Joomla Joomla 3.x will show the template positions with ?tp=1 or &tp=1
Preview Module Positions mode in the Template Manager must be enabled. Go to Admin Joomla > Extensions > Template Manager then click the Options button in the toolbar. Under the Templates Tab, make sure Preview Module Positions is set to Enabled.
Please check the article below to know the structure and module positions of all Linelabox templates.
