Creating a Website - Modifying Joomla 3.8.2 Default Template, Protostar

This article teaches how to modify the default Joomla site template (Protostar) to create a more unique, as opposed to cookie-cutter, website. Primarily this tutorial will be using the template.css file to effect changes. Most Joomla templates can be modified in this way. But, not all modifications need be done in the template.css file. Depending on the template to be altered the template may already include options in the Joomla (administrator) back-end, the Template Manager, to alter certain aspects of the website. Screen captures showing the effects of each customization are included. This tutorial will also show for a given HTML element how to figure out which CSS properties  need to be changed. Firefox and the Inspector within Firefox will be used to locate the HTML elements and the CSS properties.

Beginning with a fresh installation of Joomla v3.8.1

Install Joomla

A basic installation of Joomla 3.8.1 will be used and was setup using these basic steps:

  • Copy the unzipped Joomla core files to the root of the website.
  • Create a MySQL database.
  • Visit the Joomla based website for the first time, which will cause the installation to begin.
  • Step through the Joomla installation process choosing to load the "Learn Joomla English (GB) Sample Data" sample data.
  • Choose the option at the end of the installation process to delete the installation folder.

Now visit the new website in a web browser and it will look something like this screen capture excerpt:

 

Screen capture of default Joomla 3.8.1 installation

Back It Up!

Before making any changes, it is recommended that you make a backup of any files that are changed.

If you are using a locally hosted web server, such as WAMP or LAMP, this can be done by navigating to the Joomla v3.8.1 templates folder, clicking on the name of the Protostar template and pressing Ctrl-C then Ctrl-V (Copy & Paste) and wait for the copy process to complete before making any changes.

If you are using a web hosting service such as WebHostingBuzz.com this can be done within the CPanel of your hosting service. After logging into your hosting service CPanel, click on "File Manager". Browse to the Protostar template and click to select it. Next click the "Copy" button from the menu above the directory and files list. In the dialog box that pops up enter the name of the directory to be copied and add the extension ".000". I use ".000" in the directory or filename anytime a modification is to be performed. Then I never alter a file or the contents of a directory that contains "000" in it's name.

Starting the Firefox Element Inspector

The first item to be modified is the background. This is the background of the entire page. To find out which HTML element this is, open the website in a the Firefox web browser. Right-click on an open/blank area of the page and on the context menu that appears click on "Inspect Element (Q)". Click or double-click any of the images below to open full image in a new browser window.

 

Opening the Firefox Inspector to view and discover applied css styles.

 

Now the page appears with the HTML Element Inspector at the bottom. The Inspector can also be positioned to the right-hand side of the screen or even in a separate Firefox window. Here is how the screen appears now, with the mouse hovering over the HTML body element.

Finding the Background Color Setting

All the visible HTML elements are contained within the <body></body> tags. The Inspector is composed of two panels. While the contents of the panels can be changed, for this tutorial we will use the default view which shows the left pane displaying the "Tnspector" which shows the pages rendered HTML. If this is not the case select "Inspector" from the tabs above the pane. The use of the term rendered is to indicate that the pages are written in PHP, which is a server-side scripting language. When a site visitor views the page, they are viewing the output of the PHP preprocessor and not the actual PHP script. The right-hand pane shows the CSS applied to the selected element. In the Inspector (left pane) hover your mouse over and then click on

<body class="site com_content view-featured no-layout no-task itemid-435">

 

Firefox web browser with the HTML Element Inspector open.

If you cannot see this line then use the scroll bar to move up and down through the code until you find the body tag. It will be near the top of the HTML document. As you move your mouse over the HTML entities different parts of the visible page will become highlighted. This is how you select an HTML element for closer inspection, in order to determine what CSS styles have been applied to the element. Note: this does not guarantee that you are able to see all CSS styles applied to an element.

 

Firefox web browser with the HTML Element Inspector open.

 

After clicking on the body element the right-hand pane updates to show the CSS styles applied to the selected element, also called an HTML tag. The right-hand pane should be displaying CSS rules (styling) similar to:

element {
}
body.site {
border-top: 3px solid #0088cc;
padding: 20px;
background-color: #f4f6f7;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333;
background-color: #fff;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;

From the body element HTML tag it can be seen that the CSS classes applied to the body element are:

site, com_content, view-featured, no-layout, no-task and itemid-435

Changing the Back Ground Color for the Entire Site

The only one of these to effect the background color of the page is site. The site class currently sets the page background color to "background-color: #f4f6f7;". I mention this item first because this is one of those alterations that can be performed using the Joomla website administrator back-end.

Change the Background Color Using the Template's Style Settings in the Site Back-end

To change this color open the website as an administrator. Vist your website http://{mywebsite}/administrator. Enter the administrator name and password which you entered when you performed the site installation. You did write the site admin user name and password down somewhere, right?

Next, from the menu click on "Extensions" then, on the drop-down list click on highlight "Templates" then on the context sub-menu click on Styles".

Using Joomla Template Style Editing Feature

Next click on "My Default Style (Protostar)".

 

Selecting the default style within Joomla to customize.

 

On the "protostar - Default" template page click on the "Advanced" tab.

 

Using the Joomla Template Manager to change the website background color.

 

Here we can see that there are two color settings which we can customize, the template color (which is mostly the links) and the background color of all site pages. When in the Joomla administration back-end hover your mouse over a label to see a tooltip with additional information. Let's use a Tetradic color set composed of #511849, #FF8D1A, #EDDD53, #2A7B9B, white and black.

For the background let's use the darkest of the colors in this set, #511849. In the "Background Colour" box replace #f4f6f7 with #511849. And for general "Template Colour" we will employ #FF8D1A, so change this color in a similar fashion as the background color. Click the big green "Save" button near the top of the page.

Now go back to the website, not the administrator side, refresh the page and see what we have. The differences are obvious, but nothing earth shattering here.

Joomla default website after changing template and background colors.

Change the Background Color by Editing the Templats CSS File

First, Decide On A Method On How To Document The Changes Made In The Event Things Get Weird!

The website root directory (webroot) is the directory containing the "administrator" directory. We will be editing {webroot}\templates\protostar\css\template.css. Open this file in a plain text editor such as Notepad. DO NOT use a word processor such as MS-Word. I use EditPad Pro, I even liked it so much I purchased it.

Since I'm already editing the template.css file, that seems like  reasonable place to record all changes. Now that you have the Protostar template.css file opened up in a plain text editor, add a two blank lines to the bottom of this file. Take note of the number of the last line (EditPad Pro supports line numbering, Notepad does not). Go to the top of the document and add one line to the top of the file:

/* Customizations start at line 7739 */

Then go to that line to begin customizing the website. I like to keep a record of changes not just make a change and then sometime afterwards when I want to make the same change on a different website, wonder what changes were made. At the bottom of the template.css add the following:

/**********************************************************/
/* Images added to this installation & their copyright    */
/* license - see file NotesGLB.txt in the template        */
/* directory.                                             */
/* Files added to webroot/                                */
/*  templates/images/thisfile.png                      */
/*  templates/images/thatfile.png                         */
/*  templates/images/andanotherfile.png                  */
/**********************************************************/

/* ********************************************************/
/* Files which have been modified                         */
/* {webroot}/templates/protostar/css/                     */
/*     template.css                                       */
/*                                                        */
/* {webroot}/language\en-GB\en-GB.com_content.ini         */
/*     +fm: COM_CONTENT_ARTICLE_INFO="Details"            */
/*     +to: COM_CONTENT_ARTICLE_INFO=""                   */
/**********************************************************/

/**********************************************************/
/* CSS Overrides                                          */
/**********************************************************/

Now we can begin placing our modifications, overriding most other CSS styles with the new styles to be applied to the HTML elements.

Remember the background color change to #ff8d1a, let's have a look at it here in the CSS file. Open up the Firefox Inspector, and in the left pane find and click on the body HTML tag. Then look in the right pane look at the styles and you'll see the change made in the Joomla Template manager is reflected in the styling.

 

Changes made in the Joomla Template Manager appear in the CSS styling for the HTML body element.

Before making this change in the CSS file, first go back to the site administrator page and change the colors back to #0088cc and #f4f6f7, Template Colour and Background Colour, respectively and save the changes. Then it's back to the website front-end, what the visitors see, and refresh the page. Bring up the Inspector if it has closed. We have found that the element we want to style is the body and the class applied to it is site. To test this double-click on the number portion of the background-color property. You should see the it has been selected. You can edit this value and if you have changed the correct style the change can be seen immediately. Making a change here is not persistent. Next we will make this change persistent. To see this refresh the page and the color will revert back to the value that was seen in the Template Manage.

Another, easier method for inspecting an element is to use the Inspector's selection tool. In the Inspector click on the icon that is, by default, positioned all the way to the left in the same row as the Inspector tab.

Use the Firefox Inspector element selector to discover CSS styles applied to an element.

 

Then hover the mouse over the various page elements on the screen and then click on an element for which you want to see the applied styles. This is how you find the CSS styling used on a specific HTML page element.

Back to the CSS templat.css file, in the CSS file at the very bottom add this:

body.site {background-color: #511849;}

Then save the CSS file and refresh the web page and you'll see the change to the background is once again in effect and now they are persistent across page refreshes.