Basics
Protostar is Joomla's own template for Joomla 3. It is the further development of the space themes (Solarflare in Joomla 1.0 and Milkyway in Joomla 1.5). Since it is already included in the Joomla core, no installation is required.
The Protostar is a modern responsive template and looks good on all types of devices (desktop, tablet, smartphone ...). Furthermore, it is easy to use and very functional. Due to a large number of well-arranged module positions, it offers a good basis for an individual design. It is based on Bootstrap 2.
Many settings in the Protostar template are made directly in the template style. It is possible to create several template styles for one template. Thus, for example, a different style can be selected for each menu item.
Create multiple template styles
To create a new template style, proceed as follows:
- Go to Extensions -> Templates -> Styles in the backend!
- Select the template style to be copied and click on the button "Duplicate"!
- Rename the now generated new template style (2) if necessary!
Important: With every update of Joomla, the template files could also be overwritten by the Protostar. It is therefore advisable to work with a copy of the Protostar template. You can find out how to create a template copy at the bottom of this page. Please do not confuse the template copy with the copy of a template style!
Style editing view
Changing the template color
Here you define the general color for the website template. Use the color palette to select a color for the menu items, headings (H1, H2, ...) and buttons! If the field is left blank, the default value #0088cc is automatically set.
Changing the background color
The background color defines the color outside the container in the static layout. If the field is left blank, the default value # f4f6f7 is automatically set.
Adding a logo
Here you can define your own logo from the Joomla image directory for your website. This can also be uploaded from your computer. Joomla will automatically display the logo in the designated logo position.
Adding a title and description
You can enter an alternative page title and description for your website here. It is better if you set the meta titles and meta descriptions in the menu items! (SEO)
Using Google fonts for headings
If you want to use a Google font for headings (H1, H2, ...), select "Yes"! Enter the exact name of the Google font in the field below, e.g. Open + Sans or Source + Sans + Pro.
This setting is effective for article headings and module titles, but not for the normal text in an article.
Choosing between a static or fluid layout
The two responsive layouts "Static" and "Fluid" determine how your website is displayed in the frontend. The static layout shows the website content within a container in the front end. With the fluid layout, the container is removed and the website extends over the entire width of the browser.
Align the main menu horizontally
By default, the main menu is displayed in the right sidebar (position-7) of Protostar. Position-1 is recommended for a horizontal alignment. To do this, the position for the "Main Menu" module must be changed as follows:
- Go to Extensions -> Modules in the backend!
- Open the module "Main Menu"!
- Select the position "Navigation - position-1" in the selection field for the module position! Make absolutely sure that you select the correct position of the Protostar template and not that of another template!
- Save the setting! The main menu is now displayed horizontally in position-1.
You have the opportunity to vary the design of the individual menu items:
- Switch to the "Advanced" tab in the module!
- Enter the desired suffix under "Menu class suffix"!
- Save the setting!!
The following suffixes are available:
" nav-pills": Creates a horizontal menu with a rounded background
" nav-tabs": Generates a horizontal menu with table cells
" nav-pills nav-stacked": Creates a vertical menu with a rounded background
Important: The quotation marks must not be entered! Be sure to note the space at the beginning of the respective suffix! The menu class suffix is often confused with the module class suffix.
Create a custom css file (user.css)
Important: With the Protostar template, the user-defined file is called user.css and not custom.css, as is the case with many other templates!
Changes to the css files could in principle be made directly in the Protostar css files. However, if these files are overwritten during a Joomla update, the changes would have to be carried out again. To avoid this, there is a more sensible alternative. A user.css is created in which all changes are written. This user.css will not be overwritten during a Joomla update.
To create the user.css, proceed as follows:
- Go to Extensions -> Templates -> Templates in the Backend!
- Open Protostar (or a copy of Protostar) by clicking on "Protostar - Details and Files"!
- Click the "New File" Button!
- Select the directory "css" in the opened modal window!
- Enter user in the "File name field"!
- Choose the file type css below!
- Click the "Create" Button!
Joomla has now created the following css file: templates/protostar/css/user.css
Every time a page is called, Joomla checks whether there is a user.css and then calls it up as the last css file. Only the css changes are written to user.css. Under no circumstances should the entire content of template.css be copied into user.css!
An editor such as Notepad ++, PSPad or similar can be used for editing. Editing in the backend (template manager) is also possible.
Changes are not displayed in the frontend
Did you make changes to your website, but your browser is still showing the old version? Then this is very likely due to the cache problem.
So that web pages can be displayed faster, they are usually cached. The cache of the server, the Joomla cache and the cache of the browser used or all of them can be used simultaneously. When a page is displayed, the cache is checked first and, if this page is available, it is then loaded directly from the cache. The changes are not yet included on this page.
If you change a website and the change is not displayed, you have to ensure that the caches are emptied so that the new page is loaded into the caches.
It is usually sufficient to empty the browser cache and the Joomla cache:
1. Clear Joomla cache: Go to System -> "Clear Cache" in the backend and empty the Joomla cache!
2. Clear Browser cache: How you empty the browser cache depends on the browser and device used (computer, tablet, smartphone ...). Usually you can find the cache options a bit hidden under the settings!
3. OPCache, APC, XCache or similar: Since these caches only affect the execution of PHP scripts, manual emptying is in principle not necessary, which is why it will not be discussed in more detail at this point.
Tip: When designing a website or when making major changes, it is advisable to deactivate the caches in order to save yourself the permanent emptying!
Work with a copy of Protostar (template copy)
With every update of Joomla, the template files could also be overwritten by the Protostar. It is therefore advisable to work with a copy of the Protostar template right from the start.
Important: Please note that this is a template copy and not a copy of a style within a template.
To make a copy of the template, proceed as follows:
- Got to Eextensions -> Templates -> Templates in the Backend!
- Select the template to be copied and click on the "Copy Template" button!
- Enter a name for the template copy and click on the "Copy Template" button!
- Click the "Close" button!
The new template is now displayed in the template list. You can use it just like the original template. However, it will not be overwritten during a Joomla update.
Tip: You cannot delete a template in the template manager! However, a template can be deactivated or uninstalled. Go to Extensions -> Manage -> Manage, mark the template there and carry out the desired action!
