Available Templates

The Protostar template for Joomla 3+ has a limited number of options available for customization through Styles in Template Manager. To do any major modifications to the look of the template, you need to be able to edit the template files themselves, such as the user.css, the index.php and the templateDetails.xml.

To get to these options in the Administrative Menu go to:

Extensions -> Template Manager -> protostar (in the Style column)

Details Tab

This tab has only the information about the template and does not allow any modifications.

Advanced Tab

Template Colour: this hex color sets things like the Menu Buttons, the bar at the top and a few other styling accents.

Background Colour: this changes the color of the background of the site within the container div.

Logo: Upon clicking on Select, you can insert a logo image that is already been uploaded or you can scroll down in the dialog box and upload an image file from your own computer. By default this is placed in the logo module position, in the upper left side of the web page.

Refer to Protostar Module Positions to see how the framework looks by default.

The default layout with the Protostar Template allows for either having a logo image OR the site title show up in the <header> section of the page. By inserting your logo with this method, Protostar automatically makes the logo image a link to your home page.

Title: If you don't have a logo file, the template will show your title shown here. The title comes from the Global Configuration settings when you first set up Joomla. You can change this under System -> Global Configuration under the Site Settings tab.

Description: By default, Protostar will place the description underneath your logo. You can use this to show a site title if you want both the logo and the title of your site appearing at the top of the web page.

Google Font for Headings:  If you want your site to go fetch the font for the headings from Google Fonts, select Yes.  By default this is Open+Sans.  You can go and look through Google's Fonts at their website and select another font for your sites headings.  If you want to use your own fonts, select No.

To specify a different Google font, you must use the proper name in this box. Fonts with more than one name, like "Roboto Condensed" must have the "+" sign between each name, so you would enter Roboto+Condensed in the text field. The PHP in the index.php is written to create a link to load this Google font, you do not have to manually insert a link to that font if you use this method. This will be the font used for the site title and the headings <h1> through <h6>.

Google Font Name:  If you found a font on Google that you like for your site's headings, enter it here.  If the font has a name with spaces, simply add a "+" between the words where the space is.

Fluid v Static Layout: Protostar is responsive if you choose static or fluid, they are just different approaches.

Fluid: Fluid is good for sites where the content takes up the full width of a large screen. With Fluid, your site will continually reduce in size as the browser window reduces.  The width of the side columns and the content area are all a percentage of the screen width and narrow as the viewing window narrows. This may not work well for all content or for all modules along the side.

Static: With Static, the content area and side columns remain a set width of 980 pixels in the center of large monitors. If the screen is narrower than 980px wide, the columns and the content area all become more narrow. Eventually at screen widths below 767px, the elements stack on top of each other, including horizontal menu items.

Menus Assignment Tab

If you wish to use different templates for different pages, you can select the pages here. Of course the pages must already exist within the Menus before you can select anything. If your pages are part of a Category Blog or Category List and not a separate Menu Item, you will not see the individual pages on this list.

Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts

Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.