Join Jen Kramer for an in-depth discussion in this video Including the mobile logo, part of Templating with Joomla! 3 and Bootstrap.
One of the great features that are built into Bootstrap, are some styles that are designed to show content depending on the device. And I want to show you how those styles are configured here inside of Bootstrap. So I'm at get bootstrap.com and if we go over to the Scaffolding portion of this website and then click on Responsive Design, this is going to show us the documentation pertaining to the Responsive Design inside of Bootstrap. If you scroll on down it'll talk about the Supported devices. So this is Bootstrap's visualization of what the devices are that it's supporting and what does that correspond to in terms of pixel widths for various devices.
So Phones are considered to be 480 pixels and below. Phones and tablets are 767 pixels below. Portrait tablets are greater than 768 pixels. Then anything larger than 980 is considered Desktop, and then super large display is anything larger than 1200. Those values here are reflected through the media queries and these are the media queries that appear inside of the Bootstrap CSS. If you take a look there you'll find these media queries in place. You'll also find these utility classes.
So there are a series of classes to show if you want to have something that's visible on the phone only, but not visible on tablet, not visible on the Desktop, or whatever configuration you want of those kinds of things. There are classes that are available for that, and this is the documentation. And you can see this in action down here at the bottom of the screen. So right now I have my browser window here, it's open at 1280 pixels. Currently, this is designed to show in my Desktop, but anything that was set up for tablet or phone is currently hidden.
If I make my screen smaller, right now this would be visible on the tablet, but hidden on the Desktop and the phone, and as I make my screen even smaller, this will change again, down here at the bottom. So now things are visible on my phone, but they're hidden on my tablet and my Desktop. That can be accomplished using these classes here. So what I like to have happen now is here on my website in my header here I have this logo over here in the side. That logo is present for a fairly good long way where this website is concerned.
Because what really happens, we have a breakpoint around 979 and that is where the button appears here on the page. As I make this smaller still, we have another breakpoint that's happening right here. This is about 767 pixels or so, and that is where the logo resizes again. Past this point, it starts to not look so good. We get this white border here on either side. The nice curve here is really kind of lost. It looks odd over here on the left side of the page and then we have this Search that's sort of coming in, the logo feels like it's floating out in space.
The flags are even worse. So we definitely need a different layout as we get down to smaller screen sizes here. So one of things that I'm going to need to do is I'm going to need to take this logo graphic up here in the upper left-hand corner. And I really only want this to display on screen widths for Desktop and possibly for tablet, sort of around that 767 pixel range. I'd like to swap this out for a different logo. So if you look in your exercise files, you will find that different logo. So I'm going to go here now into my exercise files inside of my folder for Chapter 7, in folder number three, you'll find my mobile-logo here.
What I would like you to do is copy that logo and if you go to your file structure, your Windows Explorer or your Macintosh Finder, go to your C Drive, go to the WAMP folder PC people, and the www folder. Mac people, you're going to go to your applications folder and then you're going to find MAMP. Then you're going to go to HT docs. Inside of here we're going to go to templates, we're going to go to our Kineteco template, and we're going to go to the images folder. And I'd like you paste that mobile-logo right on into that images folder.
We don't have that mobile logo listed inside of our XML file, but that's okay. We're adding this now after the fact, and we don't need to go back and modify our XML file to reflect that new image. So go ahead and put that mobilelogo.png right there into your images folder inside of your Kineteco template inside of your Joomla! website. Now what I'm going to do is I'm going to hop in Dreamweaver and I'm going to look at my index.php file. This is my template index.php file. And I'm going to scroll on down here to around line 28.
So right here at line 28, I have the logo that works for, oh! What I'd like it to work for is my Desktop and sort of larger tablets. So I need to add a class to this. I'm actually going to add two classes. I'm going to make this visible for tablet and I'm going to make this visible for desktop. So while this logo is showing, it will only show now on tablets and at the desktop. If I save this File>Save and I go back to my web browser and I Refresh, that logo now disappears at the smaller screen sizes.
As I make the screen bigger, the logo will come back. So it's gone. Now what I want to do is add my mobile logo to this particular page. So what I'm going to do is, right here just directly inside of this a tag even I can do this. I'm going to put in my image tag with the source of templates/kineteco/images/mobile-logo.png.
You can give this an alt tag of same thing KinetECO, Inc., click for home. Then we'll give it a class of just one thing, visible-phone. That's all we need to do for this particular item. So we now have two images, at least it looks like we have two main images here showing inside of our logo location.
So we have a desktop logo and we have a mobile logo, both of these. We are loading both of them, but they're only going to be visible on certain devices. So if I Save this now here in my index.php and I come back to my web page and I Refresh, now I have my mobile logo showing up here at the top of the screen. That's going to actually be stuck and stay in position here, until my screen gets wide enough that I switch back to my other logo. So that at the start of the change of the way this web page is going to look and how it's going to function, as we move on and I do a little bit more customization for a mobile version of this particular 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