Join Jen Kramer for an in-depth discussion in this video Reviewing the graphic designs, part of Templating with Joomla! 3 and Bootstrap.
- View Offline
I am at joomla.kinetecoinc.com. This is the starting state of the website that we will be building a custom template for. This is the finished state of Joomla! 3 Essential Training. This is the site that we built in that course. We're using the Protostar template that comes with Joomla! So you can see here on the site that we have a multiple language website. We have both Italian and English versions of the site available. If you click on the Italian portion of the site you'll see that we have just two pages available here in Italian, but we have some pages available.
The bulk of the site is on the English side. On the Home page here we have some testimonials. We have a big picture down here on the bottom which is a random image module, which as I refresh the page may load a different picture every time from a series of pictures. Down at the very bottom here I have a link to a Site Map. This is X map, one of Joomla!'s third-party extensions that generates the site map here for us, as well as a Login screen and the Login screen here. You can login to see the website. There is a portion of this website behind the scenes for distributors.
And if you log in with joe, 123456, you will see that you get some information for Distributors here, as well as a Log Out button on the side where you can log back out of the website. You'll see that we have some information here like blogs, so we have some blog information here, we have some pages of Products here available on the website as well as a list of Contacts. And of course, if you click through on those Contact pages, you'll see more information in a contact form.
So we have configured a whole bunch of stuff here as a result of the Joomla! 3 Essential Training Course. What I'm going to show you now is what this site will look like when we're done with Responsive Templates in Joomla! So this is the design for the website now. So we've custom coded this template and we had a design here that was given to us and we have created this here in the backend of Joomla! So our testimonials are a little bit jazzier here on the homepage and we have a very attractive looking footer down here on the bottom. None of the content on this website has changed at all and none of the modules have changed.
If you go through and check out some of these pages here you'll see that we still have blogs and so forth. You see we still have dropdown menus although they're formatted somewhat differently. And if you switch to the Italian side of the website, we have a different color version that's available here on the Italian side of things. And you'll notice that the Search Bar button is different color here on the Italian side than it is on the English side. So we've made a number of different tweaks and changes to the way this website looks. So this is that responsive.kinetecoinc.com.
You're welcome to come and take a look at the website and you can see how it is working, you can compare it to the various stages we'll go through as we are building that custom template for this website.
- Reviewing the graphic designs
- Creating HTML based on the Bootstrap framework
- Converting the HTML to a Joomla! template
- Installing the custom Joomla! template
- Using Firebug and the Firefox Web Developer Toolbar
- Styling the navigation bars
- Creating a dropdown menu
- Modifying the template for tablets and phones
- Working with advanced template features, like overrides