Joomla! is a great content management system - one of the best in the world, in my opinion. But how can you make a simple website with it and make it in a responsive template?
It is probably easier than you think.
The way this is all done is through Bootstrap. At this point, you should be somewhat familiar with Bootstrap. If not, that’s okay. I’ll still walk you through it. But you should read up to find out what cool things you can do with Bootstrap.
Let’s get started
First, you have to download and install the most recent version of Joomla. As of now, it is 3.1.1. Joomla 3 installs lightning quick. You just need a database ready to go and then you can walk through the guide. Here’s the official documentation on how to get started.
When you are installing, you will be prompted to install sample data. Make sure you install the sample data to help show you where things belong, especially if you’ve never done this before. Otherwise, if you are comfortable, opt not to install the data, since you would eventually have to delete it. Now that you have Joomla installed, you will be able to log into your back end administrator panel by clicking the initial button, or just by adding /administrator to the end of your site URL. Let’s log in and take a look.
Diving into Protostar
We need to work with the template, since that is what is responsive. Go to the template by navigating to Extensions > Template Manager
Once you open the page, you will see a list of all of the templates. I will try and spell out what is important on this page
You will see here that the default template is Protostar. The great thing here is, Protostar is responsive out of the box! It utilizes Bootstrap to make everything you do in the website responsive. We need to make sure that this template is set as the default so that we utilize it for its responsiveness. That is the template that we will work with.
Here is how the template integrates Bootstrap, which makes it responsive. Click on the name Protostar, where I highlighted it as edit files. This allows you to see the CSS and template’s index file.
Now, if you click on edit main page template, you will see the actual code used on the site’s template. In here, we see 2 chunks of code that incorporate Bootstrap using Joomla’s framework:
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
and
// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);
These chunks of code can be used in a template that even you create from scratch for example. Let’s leave them in there because we want to keep this template as responsive. By clicking the close button, we now are back at the templates overview page.
To see what kind of options there are for Protostar, let’s click the Style name on the left.
Here we can change the name and style name. This isn’t important at this stage of the game. We need to see if it is Bootstrap-ready and what we can do with it. Next let’s click the Options tab.
Here there are many options. Template Colour changes the overall color on most significant areas of the site. These areas include
- The border at the top of the web page
- Hyperlink color
- Navigation link color
Background Colour affects the actual background of the website. What’s great about these two is that you just change the color here, and it applies throughout the entire site automatically.
Next, you can insert your own custom logo, which is a pretty important feature if you ask me. You also have the option of adding the title and description as well. Even better, you can easily incorporate Google Fonts. Just make sure Google Fonts for Headings is set to yes, and type in the font name in the box below. You can even choose between a static and a fluid layout. This is Bootstrap-specific: static just changes pixel dimensions at certain breakpoints, while fluid adjusts according to the screen size by percentages.
Now, just by inserting content into Joomla! and using the core template of Protostar, you will have content that is fully responsive. If you add modules, they will display in a responsive manner. Everything will scale and adjust according to screen size, which is what responsive is all about. This is the true definition of getting responsive “out of the box”.
Previewing your site
Now that you have your template configured, and you have some content in the site, let’s preview our handiwork. Previewing is simple. Click the name in the top left corner to view your site
Otherwise you can just type in your URL in the address bar. You should now see your site.
You can see I made a simple site with one article, and some filler Bacon Ipsum text. I added a few modules too.
Now your site is configured the way you want it to be, and it is fully responsive! Go ahead, scale your browser. Check on your tablet, or your smartphone. It fits perfectly!
Now get out there and get responsive!