IntroductionWelcome| 00:00 | (music playing)
| | 00:04 | Hi! I am Jen Kramer.
| | 00:06 | Welcome to Responsive Design with
Joomla! In this course, you'll learn about
| | 00:11 | Joomla! 3's integration
with the Bootstrap Framework.
| | 00:14 | We'll make a powerful template
that's flexible and adapts easily to
| | 00:18 | desktops, tablets and phones.
| | 00:21 | I'll show you how to make some content
device specific, and I'll show you how to
| | 00:25 | set up Bootstrap's menu bar which
collapses at lower screen resolutions.
| | 00:31 | I'll also throw in a few tools and
tips about working with CSS in Joomla!
| | 00:34 | So let's get started with
Responsive Design with Joomla!
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the
lynda.com online training library,
| | 00:05 | you have the access to the exercise files
used throughout this title.
| | 00:08 | Simply download the exercise files to your computer
and place them on the desktop for ease of access.
| | 00:14 | These exercise files are organized
by chapter number.
| | 00:18 | Whenever an exercise file is available for a video,
you'll see an overlay at
| | 00:22 | the bottom of the screen that indicates
the location and the name of that exercise file.
| | 00:27 | Jump-in files are available at the start of each chapter.
| | 00:31 | This is the current state of the Joomla!
site at that point in time.
| | 00:34 | You do not need to install these jump-in files
to follow along with the course.
| | 00:38 | They are provided only in case you get lost
during a chapter or if you'd like
| | 00:43 | to jump forward to a specific chapter.
| | 00:45 | It's expected that most viewers will follow along
with this course in video order,
| | 00:49 | so the jump-in files will not be required
except at the very beginning of the course.
| | 00:54 | I will cover how to install the jump-in files
in the video installing the starting state exercise files.
| | 01:00 | For those of you who do not have a subscription
to lynda.com that includes the exercise files,
| | 01:05 | I have made some files available for you
as free exercise files.
| | 01:11 | These files include a lot of the code
that's covered in the video.
| | 01:16 | And if you and if you take a look for those files
you'll find that code that you can incorporate
| | 01:20 | into your own website designs.
| | 01:22 | Working with the exercise files can
add great value to the training.
| | 01:26 | However, if you don't have access to
the exercise files you can still follow along
| | 01:30 | with the videos, often using your own files
and have a fulfilling learning experience.
| | Collapse this transcript |
| Course prerequisites| 00:01 | Responsive Design with Joomla!
is not a beginner level course.
| | 00:04 | I am assuming that you have a background
in a number of areas before you watch this video.
| | 00:09 | First of all, you should have a good knowledge
of HTML and CSS from a hand-coded perspective.
| | 00:15 | I will be working with HTML5 and
with some CSS3 in this course.
| | 00:20 | I'll be copying and pasting some CSS
from some locations,
| | 00:23 | while other CSS I'll be writing by hand.
| | 00:26 | I'll be writing all of the HTML by hand as well.
| | 00:29 | There's lots of training courses in
the Online Training Library at lynda.com
| | 00:33 | where you can brush up on these skills if needed.
| | 00:36 | I done a search here for HTML on the
lynda.com website, and as you can see this
| | 00:41 | has pulled up a great big long list o
f HTML and HTML5 courses that you can take
| | 00:45 | a look at, as well as a bunch of CSS courses here.
| | 00:51 | And I just did a search for CSS,
and you can see here there are a ton of courses
| | 00:56 | that cover CSS here as well.
| | 00:57 | Second, you should also have
a working knowledge of Bootstrap.
| | 01:02 | My course, Up and Running with Bootstrap,
is available in the lynda.com online
| | 01:07 | training library, and this will be sufficient
to follow along with this course.
| | 01:11 | You can also read about Bootstrap at getbootstrap.com.
| | 01:14 | While you may be able to follow my instructions
without this background
| | 01:18 | knowledge, you will have more flexibility i
n your custom templates if you fully
| | 01:22 | understand Bootstrap's capabilities.
| | 01:24 | Third, you should know a thing or two
about Joomla! 3.
| | 01:27 | My course, Joomla! 3 Essential Training,
goes through Joomla! in depth
| | 01:32 | including managing content, images, users,
extensions, access control lists and multiple
| | 01:38 | languages among many other topics.
| | 01:40 | In fact, the starting state of this course
is the finishing state of the
| | 01:44 | Essential Training course.
| | 01:46 | I will also be doing a bit of work
with PHP and XML in this course.
| | 01:50 | You do not need to have any background
with PHP and XML.
| | 01:54 | You can copy and paste all this information and make
edits to it and I'll walk you through this process.
| | 01:59 | Now that you have a sense of the technical
level for this course, let's get
| | 02:03 | started installing the starting state exercise files.
| | Collapse this transcript |
|
|
1. What's New with Joomla! 3 TemplatesInstalling the starting state exercise files| 00:00 | So before we can get started building
our custom template what we'll need to do
| | 00:04 | is start by installing the copy of Joomla!
that I've provided for you, so that
| | 00:08 | you have some articles and modules and
components and things that you can work
| | 00:13 | with inside of your Joomla! site.
| | 00:14 | If you have just completed Joomla! 3
Essential Training and you have that already
| | 00:18 | installed on your computer;
| | 00:20 | you can just continue to follow this course
using the files that you already have in place.
| | 00:25 | If you don't have those files or if you
want to be sure that you're following along
| | 00:29 | with the copy of Joomla! that I've generated here,
then I will show you how
| | 00:33 | to install the files that I have provided for you.
| | 00:36 | So what you're going to do is start
by going to, in the case of Windows,
| | 00:41 | inside of Windows Explorer, I'm going to go to
my C Drive, I'm going to go to the WAMP
| | 00:46 | and I am going to go to www.
| | 00:48 | Mac people, you're going to open up the Mac Finder.
| | 00:51 | You are going to go to your applications folder.
| | 00:54 | You're going to find the MAMP installation
and then you're going to look for your htdocs folder.
| | 00:59 | If you have any files or folders that are inside of
your www or your htdocs folder you can just erase those.
| | 01:06 | Unless it's a website that you want to keep.
And it may be that you want to keep
| | 01:11 | your files from Essential Training
and now you want to reinstall this as its own site.
| | 01:16 | If that's the case, what you should do
is just make another folder inside of
| | 01:20 | your www or your htdocs folder
and you're going to install Joomla! there.
| | 01:25 | Then when you look at the website you'll have
to include that folder in your path to find your web page.
| | 01:31 | So what I'm going to do now is in my
exercise files, inside of Chapter 1, video number 1,
| | 01:36 | I'm going to open up my Zip here
and I'm going to select all of the
| | 01:41 | files that I have here and drag
those on over into my www folder.
| | 01:47 | So while those are copying over, I am
going to go to localhost/phpMyAdmin.
| | 01:54 | This assumes of course that you already
have your copy of WAMP or MAMP running.
| | 01:58 | Macintosh people you may have a link
right on your MAMP opening page that will
| | 02:02 | take you right to that phpMyAdmin interface.
| | 02:06 | So from here what you want to
do is you make a new database.
| | 02:09 | So go to the Databases tab and I'm going
to create a database called responsive,
| | 02:15 | and I'm going to say Create.
| | 02:17 | So it will tell you that the database
responsive has been created.
| | 02:20 | And you'll see it show up over here
on the left side of the screen.
| | 02:24 | Click on responsive, and now what you're going to do
is import the data from your exercise files.
| | 02:30 | So we're going to click on the Import tab here.
| | 02:32 | I'm going to browse my computer.
| | 02:36 | In your exercise files, inside of Chapter 1
and find the one called 01_01.sql
| | 02:42 | and say Open, and then I'm going to say Go,
and that will import the data into that database.
| | 02:50 | You'll see all of the tables for the
database listed over here on the side.
| | 02:54 | And that's all you need to do
for the database side of things.
| | 02:57 | By this point hopefully you have
unzipped all those files into your www
| | 03:03 | or your htdocs folder or a folder where they
are in, where you're going to put these files.
| | 03:09 | So what you can do now is you're
going to need to edit this file right here
| | 03:13 | called configuration.php.
| | 03:16 | You can use any program you want to edit this file,
you can use Notepad,
| | 03:20 | you can use TextEdit, you can use BBEdit.
| | 03:22 | I am going to use Dreamweaver, but you
absolutely do not need Dreamweaver to edit this file.
| | 03:28 | When you open this, you will see inside
of your copy of Dreamweaver a series of
| | 03:35 | these public $ and some sort of words after it.
| | 03:39 | This is a whole bunch of variables
that are used inside of Joomla!
| | 03:43 | You're going to need to modify this file.
| | 03:45 | So what I would like for you to do is
scroll on down to line number 16.
| | 03:52 | On line 16 is your username for the database.
That username is root, whether you are
| | 03:57 | working with WAMP or you're working
with MAMP, either one it's still root.
| | 04:03 | On line 17 is your database password.
If you are working with WAMP you're all set.
| | 04:09 | There is no password, just leave it the way it is.
| | 04:12 | If you're working on a Macintosh you
need to change this password.
| | 04:17 | The password will be root, and the way you
can do that is just click here inside of
| | 04:22 | the quotes and type the word root in
place and that's all you need to do.
| | 04:26 | But again, PC people, the password is
nothing at all, just leave it the way it is.
| | 04:31 | And then finally on line 18 is the name
of the database you're going to work with.
| | 04:35 | Because this is coming from the
Joomla! 3 Essential Training Course,
| | 04:40 | the database is currently set to joomla, which is the
name of the database that I used in that course.
| | 04:45 | What you need to do now, since you've
just created a database called responsive,
| | 04:48 | is you need to change this database
from joomla to responsive,
| | 04:55 | a very important step,
and then go ahead and say File>Save.
| | 05:00 | Once you've got that in place you're
done with configuration.php.
| | 05:05 | You should now be able to go to your website.
| | 05:08 | On a PC that's just localhost.
On a Macintosh that will probably be localhost:8888.
| | 05:14 | That should get you to a website
that should look very familiar to those of you
| | 05:20 | who completed Joomla! 3 Essential Training
and your site should look like this.
| | 05:24 | That's where we'll be starting in this particular course.
| | 05:27 | The login is located on the administrator side of this.
| | 05:30 | If you go to localhost/administrator
you can Login with a username of the admin,
| | 05:36 | and a password of admin; and that will put you directly
into the Control panel screen here in Joomla! 3.
| | 05:43 | If you happened to install Joomla! in another folder,
because you wanted to keep what you had
| | 05:47 | in your www or your htdocs folder, what you'll need
to do is modify your path to the web page.
| | 05:56 | So if for example you created a folder inside
of your www folder called responsive
| | 06:01 | and you've unzipped all of your files
into that folder called responsive,
| | 06:05 | your path to that website would then be
localhost/responsive on a PC
| | 06:12 | or on a Mac it would be
localhost:8888/responsive.
| | Collapse this transcript |
| Exploring template changes in Joomla! 3| 00:00 | A Joomla! template controls
the look and feel of the website.
| | 00:03 | A template in Joomla! is the same thing
as a theme in WordPress or Drupal.
| | 00:08 | Many designers think that they're limited
in how a CMS website can be designed.
| | 00:13 | They believe that there are many limitations about
what can be put where and how things can look.
| | 00:18 | This may be true for some commercially
available templates,
| | 00:21 | but it's not true when you design your own.
| | 00:23 | As with any medium there are indeed some boundaries
when designing a Joomla! template or any CMS template.
| | 00:30 | Remember that since your client can
input anything, anywhere on the website
| | 00:34 | your design must be graceful enough to handle this.
| | 00:37 | My course, Preparing CMS web Graphics and Layouts
using Open Source Tools
| | 00:43 | covers some of these principles
that you should watch out for in your design.
| | 00:46 | For example, your design should be flexible no matter
how far down the page that content might reach.
| | 00:51 | Fixed type designs are very bad idea
for a Content Management System.
| | 00:55 | You may have as many Joomla! templates
as you wish for your particular website.
| | 00:59 | In fact, you can have a different template
for every page.
| | 01:02 | But just because you can, doesn't mean you should.
| | 01:06 | I recommend trying to incorporate as
much code as possible into a single template,
| | 01:10 | such that you can get several looks from it.
| | 01:13 | For example, maybe on some pages you
want to have a left column, or a right column,
| | 01:17 | where on other pages you don't want
to have one of those or both.
| | 01:20 | I'll cover how to do that later in this video.
| | 01:23 | One template, which could be the only template
for the website, will become the default template.
| | 01:27 | This is the template that's used when no specific template
is assigned to a specific page on your website.
| | 01:33 | New in Joomla! 3 the Twitter Bootstrap Framework
ships bundled with Joomla!
| | 01:38 | Bootstrap is an HTML5, CSS3, jQuery
framework that is useful for creating
| | 01:43 | responsive designs created originally
by Twitter, the company not the product.
| | 01:47 | While Bootstrap ships with Joomla!, you're not required
to use it in your designs and your work.
| | 01:53 | However, using Bootstrap gives you
plenty of high quality code to put together a
| | 01:57 | responsive design quickly and relatively easily.
| | 01:59 | I'll be using Bootstrap as a critical piece
of designing this template in this video.
| | 02:03 | If you'd like to learn more about Bootstrap,
please watch my video,
| | 02:07 | Up and Running with Bootstrap
also available here at lynda.com.
| | Collapse this transcript |
| Discussing CSS and LESS| 00:00 | One of the more advanced concepts incorporated
into the Bootstrap Framework
| | 00:04 | is the use of LESS for CSS management.
| | 00:06 | You can read more about LESS
here at lesscss.org,
| | 00:11 | and you can read about Bootstrap's integration
of LESS at getbootstrap.com.
| | 00:15 | LESS is a CSS method that allows you to
have centralized variables in your CSS.
| | 00:21 | So for example, you could set
a certain shade of blue once, assign it to a
| | 00:25 | variable name and then incorporate
that variable throughout your CSS.
| | 00:29 | If you wanted to change that shade of blue
you could simply change the value
| | 00:33 | of the variable and that shade of blue
would change every time you've used
| | 00:37 | thatblue throughout your style sheet.
| | 00:39 | That becomes incredibly valuable when
you're working with Bootstrap where there
| | 00:42 | are thousands and thousands of lines of CSS code.
| | 00:45 | However, to show you how to use LESS
as part of this course, I would have
| | 00:50 | to teach you LESS first, and that's not
really the focus of the course, unfortunately.
| | 00:54 | I'm just focusing on building a responsive template
in Joomla! using the Bootstrap Framework.
| | 00:58 | What I'll say is that if you have
the deep background in CSS you should
| | 01:02 | certainly spend some time learning LESS and learning
about how Joomla! and Bootstrap incorporate it.
| | 01:07 | If you want to learn LESS take a look
at this recently released course here in
| | 01:11 | the lynda.com online training library,
CSS with LESS and SASS and Joe Marini
| | 01:17 | will walk you through how to use LESS.
| | 01:20 | If you want to know about how Joomla!
and Bootstrap incorporate LESS,
| | 01:25 | you can take a look here at this website.
| | 01:27 | This is kyleledbetter.com/jui.
| | 01:30 | KyLe Ledbetter is the Joomla! volunteer
who incorporated Bootstrap into Joomla! 3
| | 01:35 | and he also designed the ISIS administrator template
and the Protostar frontend template for the website.
| | 01:42 | If you click on his link here for LESS CSS
you can take a look at his code
| | 01:47 | and how he's put all of LESS together here.
| | 01:49 | And if you take a look at Joomla!'s file
structure inside of your www folder
| | 01:55 | here in the backend, if you go to the media
folder and you go to the jui folder
| | 02:00 | you will discover here is where a lot of
the Joomla! user interface is located,
| | 02:04 | including a folder with all of the relevant LESS files
if you choose to incorporate those into your website.
| | 02:11 | You can also make a LESS folder
incorporated in your template site.
| | 02:15 | So if you look at the protostar folder
for example, there is a less folder here
| | 02:20 | and inside of that you can see the LESS files
that were used to make the Protostar template.
| | 02:24 | For the purposes of this course, I will show you
how you can link to the existing Bootstrap stylesheets.
| | 02:31 | You can then override these Bootstrap styles
with your own customizations
| | 02:35 | by making a second custom stylesheet
and adding your overrides there.
| | 02:38 | That's a perfectly acceptable way to manage
your CSS inside of your Joomla! website,
| | 02:42 | and it's fine to do this with Bootstrap as well.
| | 02:45 | It just means that you don't have the
centralized variables for your CSS,
| | 02:49 | so you may repeat more code with this
method than you would with LESS.
| | 02:53 | I would also like to see Joomla! offer
more tools for working with LESS.
| | 02:56 | Right now the LESS files are located in
Joomla!'s file structure,
| | 03:00 | but you can't edit them without a separate editor.
| | 03:02 | Fortunately, you can still edit CSS
directly in Joomla!'s backend.
| | 03:06 | Furthermore, LESS files have to be
compiled before they can be used.
| | 03:10 | You can download LESS compilers for Mac, Windows
and even some compilers will run on your web server.
| | 03:15 | However, Joomla! 3 does not come with
a LESS compiler as of this recording.
| | 03:20 | I think this is an area where we might
see some improvement in Joomla!
| | 03:24 | So it could be then in a future version, LESS files
will be more accessible and easily customized.
| | 03:29 | But until then I'm going to work with the CSS files
that we've been given for the Joomla! website.
| | 03:34 | And you're more than welcome to go explore
LESS and incorporate those files
| | 03:38 | into your Joomla! website on your own.
| | Collapse this transcript |
|
|
2. Creating the HTML Starting FileReviewing the graphic designs| 00:00 | I am at joomla.kinetecoinc.com.
This is the starting state of the website
| | 00:07 | that we will be building a custom template for.
| | 00:09 | This is the finished state of
Joomla! 3 Essential Training.
| | 00:11 | This is the site that we built in that course.
We're using the Protostar template
| | 00:16 | that comes with Joomla!
| | 00:18 | So you can see here on the site
that we have a multiple language website.
| | 00:22 | We have both Italian and English
versions of the site available.
| | 00:26 | If you click on the Italian portion
of the site you'll see that we have just
| | 00:31 | two pages available here in Italian,
but we have some pages available.
| | 00:35 | The bulk of the site is on the English side.
| | 00:38 | On the Home page here we have some testimonials.
| | 00:40 | We have a big picture down here on
the bottom which is a random image module,
| | 00:44 | which as I refresh the page may load a different
picture every time from a series of pictures.
| | 00:50 | Down at the very bottom here
I have a link to a Site Map.
| | 00:53 | This is X map, one of Joomla!'s third-party
extensions that generates the site map here for us,
| | 00:57 | as well as a Login screen and the Login screen here.
| | 01:02 | You can login to see the website.
There is a portion of this website
| | 01:06 | behind the scenes for distributors.
| | 01:07 | And if you log in with joe, 123456, you
will see that you get some information
| | 01:16 | for Distributors here, as well as a Log
Out button on the side where you
| | 01:20 | can log back out of the website.
| | 01:23 | You'll see that we have some information
here like blogs, so we have some
| | 01:27 | blog information here, we have some
pages of Products here available
| | 01:32 | on the website as well as a list of Contacts.
| | 01:36 | And of course, if you click through
on those Contact pages,
| | 01:39 | you'll see more information in a contact form.
| | 01:42 | So we have configured a whole bunch of
stuff here as a result of
| | 01:46 | the Joomla! 3 Essential Training Course.
| | 01:47 | What I'm going to show you now is what
this site will look like when we're done
| | 01:52 | with Responsive Templates in Joomla!
So this is the design for the website now.
| | 01:55 | So we've custom coded this template and
we had a design here that was given
| | 02:00 | to us and we have created this
here in the backend of Joomla!
| | 02:03 | So our testimonials are a little bit jazzier
here on the homepage
| | 02:07 | and we have a very attractive looking
footer down here on the bottom.
| | 02:11 | None of the content on this website
has changed at all
| | 02:14 | and none of the modules have changed.
| | 02:17 | If you go through and check out some
of these pages here you'll see that
| | 02:21 | we still have blogs and so forth.
| | 02:22 | You see we still have dropdown menus
although they're formatted somewhat differently.
| | 02:27 | And if you switch to the Italian side
of the website, we have a different color
| | 02:31 | version that's available here
on the Italian side of things.
| | 02:34 | And you'll notice that the Search Bar
button is different color here on the
| | 02:37 | Italian side than it is on the English side.
| | 02:40 | So we've made a number of different tweaks
and changes to the way this website looks.
| | 02:45 | So this is that responsive.kinetecoinc.com.
| | 02:49 | You're welcome to come and take a look at the website
and you can see how it is working,
| | 02:53 | you can compare it to the various stages
we'll go through as we are building
| | 02:57 | that custom template for this website.
| | Collapse this transcript |
| Understanding Joomla! template file structures| 00:01 | Before we start out our Joomla! template I wanted
to familiarize you with Joomla!'s template structure.
| | 00:06 | It's important to understand what
Joomla! is expecting as a template file
| | 00:10 | structure before you start building your website.
| | 00:13 | The reason why it is the templates are expected
to have a certain folder and file structure.
| | 00:20 | If you don't follow this folder or file structure
as you put together your template
| | 00:24 | you can't expect Joomla! website to work.
| | 00:26 | Whatever Joomla! wants provided that you give
it Joomla! everything is going to go just fine for you.
| | 00:31 | Don't get too creative with your file
and your folder structure.
| | 00:34 | Just do exactly what Joomla! wants
and everything is going to be great.
| | 00:37 | So let me walk you through what
that file and folder structure looks like.
| | 00:40 | I'm here inside of my www or my HT docs folder.
| | 00:44 | This is inside of WAMP or inside of MAMP.
| | 00:47 | If you find the templates folder that here,
take a look at the protostar template.
| | 00:51 | If you double-click on that you will
see the following files and folders.
| | 00:55 | Let me tell you a little bit about these.
| | 00:57 | First of all you will see a folder here called css and
shockingly that will contain the CSS for your website.
| | 01:03 | It's not all of your CSS.
| | 01:05 | This particular folder contains, as
you see here, just a handful of files.
| | 01:10 | Right now the way the Protostar template
was built, it was built using LESS CSS.
| | 01:16 | What that means is that it's been
compiled CSS is located here.
| | 01:21 | The LESS files are located elsewhere.
The bootstrap files are located elsewhere.
| | 01:25 | So this is just that.
| | 01:26 | Editor is a CSS file that we made
in the Essential Training course,
| | 01:31 | That contains styles that you can use inside of your
editor like TinyMCE in this particular case.
| | 01:40 | The html folder is designed for template overrides.
| | 01:44 | It is possible to override the HTML that Joomla!
writes out to a module or a component.
| | 01:50 | So if you don't like the HTML that a certain module
or component is writing out to a web page,
| | 01:54 | you can write an override for that.
This html folder becomes handy for that.
| | 02:00 | In this particular case we have just a few files here,
but that is where you can
| | 02:03 | put your template overrides for your specific template.
| | 02:07 | The images folder is where you would
put things like the logo for the website.
| | 02:12 | Notice here this one has got a folder
called system and it's got a couple
| | 02:17 | of additional little icons that are here.
| | 02:19 | I think these are overrides
of Joomla!'s main system here.
| | 02:22 | But for the most part these are just images
that are used within the templating structure of Joomla!
| | 02:27 | The logo for the website is something
that your client would never need access
| | 02:31 | through the Media Manager, for example.
| | 02:33 | You would put the logo in this template file structure,
which you can only access to Joomla!'s file structure.
| | 02:38 | You can't access it through the Joomla! interface itself.
| | 02:42 | That's actually a really good thing.
| | 02:43 | You don't what your client changing
the logo for the web page necessarily,
| | 02:47 | particularly if you've got custom template
and perhaps no interface for changing that logo.
| | 02:52 | Any of those kinds of images that you
never want your client to touch,
| | 02:55 | you don't even want your client to know that they
exist, put them here inside of the images folder.
| | 03:00 | The js folder is JavaScript of course
and in this case that is unused.
| | 03:07 | But if you happen to have custom JavaScript files
for your template, you could place them here.
| | 03:11 | If you are working with jQuery or any
of the Bootstrap JavaScript, then that is
| | 03:16 | actually going to be loaded for you
behind the scenes inside of Joomla!
| | 03:19 | from another area of Joomla! files and don't
need to worry about that and you don't
| | 03:23 | need to include that separately here.
| | 03:26 | The language folder has to do with languages.
| | 03:28 | In this particular case the Protostar template
is designed to work with multiple languages
| | 03:33 | and have some translation strings.
And that is what this particular folder is all about.
| | 03:37 | You don't have to have a language folder,
but you can if you want.
| | 03:41 | The less folder here has to do with the LESS files
that are in use for this particular template.
| | 03:46 | Then down here in the files that are hanging out
all by themselves, the two here
| | 03:51 | called template preview and template_thumbnail,
these are small and large versions of the template
| | 03:57 | as a screenshot that you're going to see used
| | 03:59 | in the backend of Joomla! and I will show you
exactly where those come up in a later video.
| | 04:04 | templateDetails is an XML file that's used
for installing Joomla! I am going
| | 04:09 | to walk you through how to build one of those.
| | 04:10 | index.php is the main html for your template,
and we are going to build one of those from scratch.
| | 04:17 | The favicon of course is the little icon
that will show up in a tab in a web browser,
| | 04:23 | or sometimes in a new window,
and I'll show you how to make one of those.
| | 04:27 | Then the last two files that are here,
component and error, are some overrides
| | 04:31 | of Joomla!'s standard component in error pages.
| | 04:34 | The error page as you might expect is a 404 error page.
| | 04:38 | The component page usually has to do
with printer friendly versions.
| | 04:42 | These are actually overrides of some core files
that already exist inside the system folder.
| | 04:47 | That's a little quick overview that
Joomla!'s file and folder structure.
| | 04:52 | You don't have to have all of
these folders that are here.
| | 04:55 | You don't have to have every single one of them.
| | 04:57 | In fact, when we build our template we
won't have a less folder, we won't have language folder,
| | 05:01 | we won't have JavaScript folder,
and we won't have an html folder to start with.
| | 05:04 | But there are certain core files
that are required.
| | 05:07 | I am going to be going through
all of those in a later video.
| | 05:10 | But please use this structure when
putting together your Joomla! website.
| | 05:13 | You will have to make a folder
called css and put your stylesheets in it.
| | 05:16 | You will have to make a folder called images,
and you have put your images in there.
| | 05:19 | That's what the structure is here for.
| | Collapse this transcript |
| Configuring a Dreamweaver site and populating it with Bootstrap CSS| 00:00 | So the next thing I want to do to get started
on this template is to set up
| | 00:03 | my work environment and I will be writing
my code inside the Dreamweaver CS6.
| | 00:10 | Why Dreamweaver CS6?
| | 00:12 | Because I've been working with Dreamweaver
for 12 years now and I love Dreamweaver
| | 00:16 | and I know Dreamweaver very, very well.
| | 00:19 | It's the tool that I use for writing
all of my HTML, CSS, and PHP.
| | 00:24 | Does that mean you have to use it?
No, not at all.
| | 00:26 | Don't feel like you have to go run out and buy
a copy of Dreamweaver to make Joomla! websites.
| | 00:30 | Particularly, if you're a big open-source person.
| | 00:33 | All I'm doing with Dreamweaver inside
of this course is I'm going to be working
| | 00:37 | with files and file structures.
| | 00:39 | I am just going to be editing my HTML
and my CSS by hand.
| | 00:43 | If you feel more comfortable working
in some other environment, whether
| | 00:47 | that's something as simple as Notepad
or TextEdit, or if you like to download
| | 00:52 | and work with some other kind of program like,
Notepad++ or BBEdit or even something
| | 00:59 | more complicated like an Eclipse or Aptana.
| | 01:02 | You can use anything you want
for editing your files here for Joomla!
| | 01:07 | I just happen to be using Dreamweaver.
| | 01:09 | What I am going to start by doing is
I am going to go my desktop.
| | 01:13 | I am going to start by making a new folder
right here on my desktop.
| | 01:17 | I am going to call this template.
| | 01:19 | Inside of this folder called template
I am going to put all of the files
| | 01:23 | that I am going to been building over this
next chapter that will eventually
| | 01:27 | become my Joomla! Template.
| | 01:28 | In fact, I'm going to be building this folder
over Chapter 2 and Chapter 3.
| | 01:32 | This is where all of my files are going to live
while I'm assembling the template right here.
| | 01:36 | We are actually not going to do any work
inside of Joomla! for quite a while.
| | 01:40 | We are just going to be assembling the website
right here on the computer
| | 01:44 | that's in front us before we installed this in
Joomla! some time farther down the line.
| | 01:48 | Inside of the template folder I would
like you make two folders to start with.
| | 01:52 | I would like you make a folder called css,
and I would like you make a folder called images.
| | 02:00 | Be sure to spell out the word images.
| | 02:02 | This is the start of our Joomla! structure
for our template and we will just go ahead
| | 02:07 | and we'll put our files in here.
| | 02:09 | Inside of your exercise files folder I have
given you some images to work with.
| | 02:14 | So if you take a look at logo and footer logo,
these are two of the images
| | 02:18 | that I will be using on the website,
that are part of a template,
| | 02:21 | that I never want my client to touch.
| | 02:22 | So they are going become
part of my template structure.
| | 02:25 | I'm going to go ahead and copy these
Ctrl+C or Cmd+C to copy
| | 02:29 | and into the images folder
Ctrl+V or Cmd+V to paste this in place.
| | 02:34 | Then the last thing that I want you to
do here with your files is in your CSS folder
| | 02:39 | we are going to put in some copies of Bootstrap.
| | 02:41 | Now I have given you some copies of
these Bootstrap files here inside
| | 02:46 | of your exercise files folder and you can
just copy those over, but let me show you
| | 02:50 | where these files live.
| | 02:52 | Because as Joomla! grows and
evolves it's likely that they are going
| | 02:56 | to incorporate different versions of Bootstrap.
| | 02:58 | These happen to correspond to Bootstrap 2.1.
| | 03:01 | Bootstrap 2.2 is already out the door.
| | 03:03 | So these files are going to be tweaked
over time to make sure you have
| | 03:06 | the most recent version of these files.
| | 03:08 | Here's what you need to do.
| | 03:10 | Go on into your Windows Explorer, PC people
or go into your Mac finder, Mac people,
| | 03:16 | and we are going to go into
www folder or to our HT docs folder.
| | 03:21 | WAMP people we are going to C-Drive,
we are going to go to the WAMP folder,
| | 03:26 | and we are going to www.
| | 03:27 | Mac people you're going to go to your
Applications area, and you're going to
| | 03:32 | go into MAMP, and you're going to go to the HT
docs folder, and you'll be in the same place.
| | 03:37 | Here inside of Joomla! if you go to the
media folder and you to go to the jui folder.
| | 03:43 | That stands for Joomla! user interface.
| | 03:45 | Go into the jui folder.
| | 03:47 | This is where you can find core files
associated with Joomla!
| | 03:52 | Now what do I mean my core files with Joomla!?
| | 03:54 | Joomla! is made up of over 4,000 files
and most of these are considered to be core.
| | 04:00 | What that means by core is that they are administered
and maintained centrally by the Joomla! Project.
| | 04:07 | When there are new updates that come out
where Joomla! where is concerned
| | 04:11 | anything that's considered a core file
is subject to being updated.
| | 04:16 | It's possible that files that are located here
inside the jui folder may be updated
| | 04:20 | with recent versions or debugged versions
or freshly changed versions of all of these files.
| | 04:27 | What that means is that, if you edit
these files inside of the jui folder and then
| | 04:33 | you upgrade your version of Joomla!, may
be not this time but at some point in time,
| | 04:38 | it's likely that any changes
that you have made to these files
| | 04:42 | will be completely erased
and you will lose them.
| | 04:45 | Now there are always around this problem,
notably it has to do with copying files
| | 04:50 | into your templates folder and working
with them there since Joomla!
| | 04:54 | does not update your custom template files for you.
| | 04:57 | But for right now, just know that here inside of
the jui folder you should never edit any of these files.
| | 05:04 | In fact what I am doing right now is
I'm just making a copy of the files that are here
| | 05:08 | so that I can work on my computer,
I can work with the Bootstrap framework,
| | 05:12 | and have some stylesheets
to refer to along the way.
| | 05:16 | When I finally make my Joomla! template
and I upload it to the server,
| | 05:21 | the files that I'm downloading now
will not become part of that template.
| | 05:23 | I will link to these files here
inside of Joomla! from my custom template.
| | 05:29 | Here inside the CSS folder I am going
to go and I am going to grab three files.
| | 05:34 | I am going to grab Bootstrap and I am holding down
my Ctrl key to select a bunch of these,
| | 05:39 | Bootstrap, bootstrap-extended,
and bootstrap-responsive.
| | 05:42 | There is a couple of other files
that are in here as well.
| | 05:45 | The min files are the minimized files.
| | 05:48 | This is where they take the CSS and they
take out all the Spaces and Returns
| | 05:52 | and put all the CSS onto one line,
which is machine readable just fine.
| | 05:55 | It's very hard to have it human readable,
and I maybe wanting to look at these files.
| | 06:00 | So I am going to take the
human readable formats of these.
| | 06:03 | A bootstrap-rtl is the right to left version
of Bootstrap's styles.
| | 06:08 | So if you are building a template for
some kind of language that reads
| | 06:13 | from right to left instead of from left to right,
you may want to grab that as well.
| | 06:16 | There are some other stylesheets in here.
| | 06:18 | We don't really need to worry about them right now.
| | 06:20 | I am going to go ahead and copy these
three stylesheets and I am going paste
| | 06:25 | that right here into my css folder.
| | 06:27 | Again, I am going to delete these and these
are not going to become part of my template.
| | 06:30 | These are just here for the moment
for me to work with.
| | 06:35 | Now that I have some CSS, now that I have
some images, I am going to go into Dreamweaver,
| | 06:40 | and I'm going to make a new HTML web page.
| | 06:44 | So File>New and I'm going to be
building this site using HTML 5.
| | 06:49 | In Dreamweaver the way I set that up is
I say I want to Blank Page, the page
| | 06:53 | type of HTML, no layout associated with it,
and then over here for the DocType
| | 06:58 | make sure you pick HTML5, not XHTML1.0,
which is what's chosen by default.
| | 07:04 | Go ahead and say Create.
| | 07:06 | So Dreamweaver creates a blank document for me.
| | 07:08 | This is the design view.
| | 07:10 | So I can see what going on, on the front end here,
but I really want to be working in the code view.
| | 07:14 | I'm going to click on this button here
in the upper left to switch over to code view
| | 07:18 | and now I can see the code here on my web page.
| | 07:21 | The last step that I need to do now
is link myself up to these Bootstrap stylesheets.
| | 07:28 | I am going to go ahead and do that now.
| | 07:31 | So the fastest and easiest way to work
with files here inside of Dreamweaver
| | 07:35 | is to use the Dreamweaver site function.
| | 07:37 | If you're working in some other program other
than Dreamweaver, you may not need to do this step.
| | 07:41 | But for those of you who are familiar with
Dreamweaver and are following along
| | 07:45 | with Dreamweaver, let's go ahead
and make a Dreamweaver site.
| | 07:47 | I am going do this by going to Site>New Site.
| | 07:50 | I am going to give this a Site name of
joomla template and my local site folder
| | 07:56 | will be my folder on my desktop.
| | 07:59 | That's called template.
| | 08:00 | I am going to say Select, and I am
going to say Save, and my files over here
| | 08:05 | will show up over here on the right side
of the screen so I can see what I'm doing.
| | 08:09 | What I want do now is I want to link to the
three stylesheets that I have present here.
| | 08:14 | So I am going to go ahead and do that now.
| | 08:15 | You can this in Dreamweaver by
clicking the Link icon right here.
| | 08:19 | I'm going to link to first of all in my css folder,
the Bootstrap file, and say OK.
| | 08:26 | It'll give me a message that I haven't saved my HTML.
| | 08:28 | So I'll do that in just a second.
| | 08:29 | Say OK and OK again.
| | 08:34 | Let me go ahead and save this real quick.
| | 08:35 | So File>Save and I am going to save
this as index.html and then
| | 08:42 | that will correct my path to the Bootstrap stylesheet.
| | 08:44 | Now that I have the Bootstrap stylesheet in place
I am going to hit the link icon again.
| | 08:49 | This time I'm going to link to bootstrap-responsive.
| | 08:52 | That should be the second stylesheet
that you linked to and say OK.
| | 08:56 | Then the third stylesheet we will link to is
the bootstrap-extended stylesheet and say OK again.
| | 09:04 | It's very important that you link
your stylesheets in this order.
| | 09:07 | bootstrapped.css is default Bootstrap_styling.
| | 09:10 | bootstrap_responsive is a second stylesheet
that extends Bootstrap to include
| | 09:15 | the responsive layout configurations.
| | 09:17 | This is particularly where the grid is concerned
and where media queries are concerned.
| | 09:21 | Then bootstrap-extended is some additions
to Bootstrap that have been written
| | 09:26 | specifically for Joomla! So that's why
that becomes in as the third stylesheet.
| | 09:30 | As you know the ordering of these stylesheets
is part of the big C in CSS the cascade.
| | 09:35 | So it's very important you get these in the right order.
| | 09:37 | Now that we have everything in place,
we have all of our stylesheets linked up
| | 09:43 | to our document, we have a blank HTML document,
we are ready to start writing some code in the next video.
| | Collapse this transcript |
| Building the grid| 00:00 | Now that we've got our files and our folder
structure here configured inside of
| | 00:04 | Joomla! I'm ready to start writing some HTML.
| | 00:07 | Let me remind you again about
what this website is going to look like.
| | 00:12 | So, here's a picture of what it is that we're building.
| | 00:14 | So, as you can see going across the top of the page,
we have an image over on the side,
| | 00:19 | and on the right side, we have some flags,
those are the switching the
| | 00:24 | language functionality, and the search box.
| | 00:27 | We have a big long row here for our search,
and then underneath, we have our
| | 00:32 | main content and a column of information.
| | 00:35 | Then down in the footer, we have that
stretching all the way across,
| | 00:39 | on the left side we have some text that
pertains to the copyright statement,
| | 00:44 | and the footer menu, and then on the
right side, we have an image.
| | 00:47 | So, you can get a sense for how
we are going to chunk this up into a grid.
| | 00:50 | We have a series of rows that
we're going to need to put in place,
| | 00:54 | and we'll build those rows out here with Bootstrap.
| | 00:57 | I am going to show you how to do that now. All right.
| | 01:00 | Let's go ahead and start building some code here.
| | 01:02 | So, everything of course is going
to go inside of these body tags.
| | 01:05 | Right now, we are just working with HTML,
and we are working with Bootstrap.
| | 01:09 | If you need to learn a little bit about
Bootstrap's framework and the scaffolding,
| | 01:13 | in particular, if you go to getbootstrap.com,
you can read the documentation,
| | 01:17 | or go watch my course Up and Running with Bootstrap,
and I'll walk you through the process of working with that.
| | 01:22 | I am going to start with the header of the document.
| | 01:24 | This of course is where the site identification
is going to go.
| | 01:28 | And in HTML5, we have a tag for dealing with that,
it's the header tag.
| | 01:31 | So, I am going to go ahead and
start by using that header tag.
| | 01:34 | I am going to start with header, and
then in Bootstrap, we need to give this
| | 01:37 | a class of "row-fluid" and "row-fluid"
is the containing element that's going to
| | 01:45 | contain all of our content here inside of our header.
| | 01:49 | So, then inside of this, I am
going to break this into two pieces.
| | 01:52 | I am going to start with a div with a class of span4.
| | 01:56 | And this side of the header is going to
refer to just the picture, the logo side of this.
| | 02:04 | So, I am going to go ahead and add that now.
| | 02:08 | First of all, I am going to say <a href="/">.
| | 02:13 | This is a link back to the homepage,
so that when somebody clicks this logo,
| | 02:17 | they can go back to the homepage.
| | 02:19 | The link that I'm coding in here just
by putting a slash in here indicates that
| | 02:22 | it should go back to the root of the website.
That is what that little bit of code there is doing.
| | 02:27 | Then I am going to add '<image src="' and then
Dreamweaver gives me this handy little browse function.
| | 02:36 | I can go ahead and go to my Images folder,
and pick the first logo here, the one
| | 02:40 | with the green and yellow and say OK.
| | 02:43 | And then I'm going to put an alt tag always;
| | 02:45 | so, alt="kinetECO, Inc., click for home.
| | 02:54 | This is something I always
like to do with my alt tags here.
| | 02:57 | This is an accessibility thing.
| | 02:58 | So, of course first of all you always want to have
the Alt tag, it's readable by search engines and so forth.
| | 03:04 | And of course, I am going to include
the name of the company in that alt tag.
| | 03:06 | But I am adding the 'click for home' for those people
who are using this website using a screen reader.
| | 03:11 | Now they know what will happen if
they click on this particular image.
| | 03:15 | That's what the additional little bit of text is here for.
| | 03:17 | And for screen readers, I've added a
period at the end of that followed by a
| | 03:21 | space so that if a screen reader
happens to be reading this page,
| | 03:24 | it will sound like a sentence as opposed to a
few words that will run right on into the next few words.
| | 03:29 | The last thing I am going to do is I am going
to apply a class to this particular image.
| | 03:33 | So, that class is going to be "pull-left".
| | 03:38 | This is a floating kind of thing.
| | 03:40 | That is the way you float an image inside of Bootstrap.
| | 03:43 | I am going to go ahead, and close my
image tag, and I am going to close my link.
| | 03:47 | And so, that's the end of the
first part of that particular row.
| | 03:50 | We have div with a class of span4.
| | 03:52 | Now I need to add the second part of
the row, so I am going to go ahead,
| | 03:55 | and put in a div with a class of "span8"
because of course 8 and 4 is 12, and
| | 04:02 | Bootstrap has a 12 column grid.
| | 04:04 | What will ultimately go here is going
to be the language switcher, the two little flags,
| | 04:08 | and the search box.
| | 04:10 | Both of those are modules, and there's really no point
in me trying to recreate these at the HTML level.
| | 04:16 | In the end, I am going to drop in a little bit of code
that will call for those modules that will go in this spot.
| | 04:21 | So, for right now, I'm just going to put-in some text
that says 'Put language switcher and search here'.
| | 04:30 | And that's just a placeholder, we'll go
back and we'll replace that with actual
| | 04:34 | code at some point in time later.
| | 04:36 | The next thing I need to code is my navigation bar.
| | 04:38 | So, I am going to go ahead and add that now.
| | 04:41 | This will have a div with a class of "row-fluid".
| | 04:50 | That of course is always how you start a row in Bootstrap.
| | 04:53 | And in this row of information, we are
just going to have the navigation bar.
| | 04:57 | So that will be nav, and it will have a class of "span12.
| | 05:05 | I am actually going to come back to this later,
and I'm going to be adding some
| | 05:09 | more code where this is concerned.
| | 05:10 | But for right now, obviously this is where my module,
| | 05:14 | that will be the main menu
was going to go in the long run.
| | 05:17 | So, I am just going to go ahead
and say 'navigation goes here</nav>';
| | 05:23 | nav of course is an HTML5 tag that indicates
where navigation is supposed to go and /div.
| | 05:28 | In my next row, I need to have breadcrumb.
| | 05:31 | So, I am going to go ahead and put that in,
div with a class of once again
| | 05:35 | "row-fluid" followed by a div with a class of "span12".
| | 05:46 | And of course this is where
the breadcrumbs are going to go.
| | 05:48 | The breadcrumbs are modules, so I'll
just put in some placeholder text;
| | 05:51 | 'breadcrumbs go here' and close that div.
| | 06:01 | And I hit Return a few times, so that I move the
code up here on the screen so you can see it better.
| | 06:06 | Now, I have the part of the website that is the main body.
| | 06:09 | So, I have the content on the left side of the screen,
| | 06:12 | and I have some testimonials on the right side
of the screen, at least on the homepage.
| | 06:17 | On some of the inside pages of this website,
I don't have a right column.
| | 06:21 | So we'll deal with that later.
There are many, many videos to come.
| | 06:24 | But for right now, let's just go ahead
and rough this out.
| | 06:27 | So, we are going to have a div
with a class of once again "row-fluid".
| | 06:34 | And inside of this div,
we are going to have two areas here.
| | 06:38 | So, I'm going to have a div with a class of "span9"
| | 06:46 | 'This is where the content goes'
and we'll have a div with a class of "span3"
| | 06:57 | 'This is where the right column goes'
| | 07:03 | So, think about those as big areas.
Obviously the content is quite long and
| | 07:08 | quite involved on some pages, but
ultimately, it also comes out of Joomla!
| | 07:12 | under one call, we say the component goes
here, and then in the column over on the right side,
| | 07:16 | we are just going to spell this out.
| | 07:19 | This is where the right columns goes.
| | 07:20 | Any modules that you have assigned to the
right column of the web page will go here.
| | 07:24 | And as I said, we'll deal with what happens
if we don't have a right column
| | 07:27 | later on in some later videos.
| | 07:30 | Then finally, we'll add a footer to this website.
| | 07:32 | So, I am going to add my footer tag.
And that will have a class once again of
| | 07:38 | "row-fluid", and inside of this footer,
we have two sides to the footer as well.
| | 07:47 | So, I'm going to go ahead and
put-in a div class of "span9".
| | 07:55 | I am just going to drop in a
paragraph of information here.
| | 08:00 | So, © is the code for a copyright symbol;
| | 08:05 | 2012 KinetECO, Inc.
| | 08:10 | All rights reserved.
| | 08:13 | Now, I am hard-coding this into my template.
| | 08:16 | I could certainly make a custom HTML
module, and assign it to this position.
| | 08:20 | That way, my client would be able
to go in, and update that copyright
| | 08:23 | statement if they wanted to.
| | 08:25 | If you're a JavaScript wiz and you
want to have some kind of JavaScript in
| | 08:28 | here instead of the date, you're
certainly more than welcome to do that.
| | 08:31 | You could also pull the date down from PHP.
| | 08:33 | There are all kinds of ways you can make this
little copyright statement more complicated than it is.
| | 08:38 | You're welcome to do any of those
things that you would like to do.
| | 08:40 | I'm just going to put this in as a paragraph,
and just hard-code it here into my template.
| | 08:44 | And then once we have that in place,
then over here on the side, I'm going to
| | 08:49 | have my div with a class of "span3".
| | 08:54 | And this is where I am going to put my image.
| | 08:57 | That is the image that's going to go in my footer.
| | 09:00 | So, I am going to go ahead and say 'image src="'
once again browse for that inside of Dreamweaver.
| | 09:09 | I can say alt="KinetECO, Inc."
| | 09:14 | Just like I did before, I am going
to give this a class of "pull-right"
| | 09:22 | to float this to the right side of the screen.
| | 09:24 | Close my image tag, close my div tag, and
my footer tag is closed. So, there we go!
| | 09:32 | We've just roughed out the entire grid
here that we need to put together our web page.
| | 09:36 | We've called out where all
the content is going to go.
| | 09:40 | We've dropped some images in.
| | 09:41 | If we look at this on the front end of the website,
it's not really going to look all that fabulous.
| | 09:46 | You see that we have an image for our logo;
we have an image in the footer;
| | 09:49 | we have a bunch of stuff here on the page.
| | 09:51 | It never looks like much in Dreamweaver.
| | 09:53 | But if I go ahead and say File>Save,
I can preview this in my web browser
| | 09:57 | by clicking the little globe icon here,
and saying Preview in Firefox.
| | 10:02 | And this is what the page looks like right now.
| | 10:04 | Again, doesn't look like much,
we have a lot of work left to do.
| | 10:07 | But at least we've roughed in
where this content is going for the moment.
| | Collapse this transcript |
| Adding the Google font| 00:00 | In the design that we've been given for
the website, our designer has fallen in
| | 00:05 | love with this font called Ubuntu, and she
wants to use Ubuntu everywhere on the website.
| | 00:11 | Ubuntu? Seriously? You thought that was
open source operating system that you
| | 00:15 | could download and install on your computer.
| | 00:17 | No, actually it's a font too.
| | 00:18 | So, I am here on the google.com/webfonts website,
and here, today, we are up to
| | 00:26 | 573 fabulous fonts that you can include
for your particular web page.
| | 00:32 | As you know, in the old days,
we used to have to code our web pages according to
| | 00:37 | the fonts that were available on the computer that
was in front of us, and what was consistently available.
| | 00:42 | Then Google launched this wonderful directory
of all these web fonts and now we
| | 00:46 | have available to us fonts that
are located on Google servers.
| | 00:50 | We can use these fonts for free, and
I'm going to show you now how you can
| | 00:55 | incorporate one of these Google
fonts into your Joomla! web page.
| | 00:58 | So, I'm going to search for Ubuntu, and
this has pulled up the Ubuntu font right here.
| | 01:04 | It's this first one that I want, just the regular Ubuntu.
| | 01:08 | And if I go ahead and say Add to Collection,
and then I click my Use button down
| | 01:14 | here in the bottom, it's going to ask me which specific
styles do I want for this particular point in time?
| | 01:21 | The more styles that you add, the longer
it may impact for page load time as you
| | 01:27 | can see with a little dial over
here on the right. So, if I say, oh!
| | 01:30 | I want absolutely everything,
let's just go ahead and take all of these.
| | 01:34 | Notice that my Page Load time adds quite a bit.
| | 01:36 | And this is a really big deal
when you're working with mobile.
| | 01:40 | Remember, you have a data plan.
| | 01:41 | You only have so much data you can use every month.
| | 01:44 | Do you really want to spend it on downloading
different fonts for your particular web page?
| | 01:49 | I think the answer to that is probably not.
| | 01:51 | It also can make loading your web page
much slower overall anyway.
| | 01:55 | So, the only one that I really want here
is just normal, that's totally fine.
| | 01:59 | I don't really need all of these other ones.
That's all I need to do.
| | 02:02 | So, now I can scroll down, and down here,
it's given me the code that I need
| | 02:08 | to add to my website, right here, this little window.
| | 02:10 | So, I'm going to go ahead and I am
going to highlight this little bit of code.
| | 02:14 | I'm going to say Ctri+C or Cmd+C to copy that.
| | 02:18 | Now, I'm going to hop back into Dreamweaver,
and over in my Code View, I'm going
| | 02:21 | to scroll back on up to the top of the page here.
| | 02:24 | And after bootstrap-extended.css,
I'm just going to hit Return, and I'm going to
| | 02:29 | paste-in my code for my Google font.
| | 02:33 | And that's all I need to do to add a
Google font here to my particular design.
| | 02:38 | I'll need to of course, to write some
styles that incorporate this font.
| | 02:41 | But this is the first step to incorporating
that font into my website design.
| | 02:46 | Make sure you save your file
before you move on to the next video.
| | Collapse this transcript |
| Adding a custom style sheet| 00:00 | This is our web page as it currently stands.
| | 00:03 | We're still working just in Dreamweaver.
We haven't touched Joomla! yet at all.
| | 00:06 | All we've done so far is we've built out
the grid inside of Bootstrap.
| | 00:10 | Using this grid, we see here, I've basically
placed these images on my web pages,
| | 00:16 | I have put-in some placeholder text
for where I want my modules and
| | 00:19 | my component to go here inside of Joomla! but
I haven't even gotten to putting that stuff in.
| | 00:23 | It will look much better once we
have real content into this web page.
| | 00:26 | But even though we've got some great
stuff coming in from Joomla!
| | 00:31 | even though we have great stuff coming in from
Bootstrap, it's absolutely a given
| | 00:34 | that we're going to have to do some
custom styling here as well.
| | 00:38 | The way we're going to do that
is by adding a custom style sheet.
| | 00:41 | Let me go ahead and show you how we can add
that custom style sheet to our Joomla! design.
| | 00:46 | So I'm going to hop here back into Dreamweaver.
And in Dreamweaver, I'm going to say File>New.
| | 00:53 | And this time, I'm going to create
a style sheet; so Blank Page>CSS.
| | 00:58 | There aren't any other choices.
Go ahead and say Create.
| | 01:01 | And here is our blank style sheet.
So, now I'm going to go ahead and say File>Save.
| | 01:08 | I'm going to put this in my CSS folder,
and I'm going to call this custom.css.
| | 01:13 | You can call this file whatever you want.
Any name at all is totally fine.
| | 01:17 | But I like to call mine Custom because I know
that this is where my custom styles are going to go.
| | 01:21 | Go ahead and say Save.
And now we have a custom style sheet.
| | 01:26 | But we have not yet told our HTML to take a
look at that custom style sheet. So let's do that.
| | 01:31 | I'm going to switch back to my HTML.
| | 01:33 | Here after the Google font declaration,
I'm going to add a link now to my custom style sheet.
| | 01:41 | Over here in Dreamweaver, I'm going
to click on the Link icon down here in the bottom,
| | 01:46 | and I'm going to hit my Browse button, browse to
the custom style sheet, and say OK, and OK again.
| | 01:53 | And that will add a link to my custom style sheet here.
| | 01:56 | So now, I'm ready to start adding
some custom styles to this design
| | 02:00 | when I'm ready to start doing that step.
| | Collapse this transcript |
|
|
3. Converting the HTML Composition to a Joomla! TemplateUnderstanding the index.php file| 00:00 | Inside of your exercise files folder,
I've given you this file called index.php;
| | 00:05 | just to take a look at, and you can
also get this in Joomla!'s! folder structure.
| | 00:09 | From www go to the templates folder,
go to the Protostar folder
| | 00:13 | and open up index.php and you'll see the same thing.
| | 00:16 | I just wanted to talk to you a little bit about
what is inside of this index.php file
| | 00:21 | before we start working with this code ourselves.
| | 00:24 | So if you look at index.php, it looks a little bit scary,
particularly if you don't know PHP.
| | 00:30 | But there's a lot of stuff here that we
can copy and paste over to our template
| | 00:33 | and in fact we're going to do exactly that.
| | 00:36 | So it's helpful to know what these lines of
code mean, so that you can work with them.
| | 00:40 | Line 1 anytime, you see this little <?
followed by php,
| | 00:45 | this is an opening PHP tag.
It's the equivalent of the left
| | 00:49 | angle bracket inside of HTML,
all we're saying is this is where PHP starts.
| | 00:53 | This is a comment, so it looks like a CSS comment,
the /* followed by the */,
| | 01:01 | So this is a comment indicating the ownership
of this particular template in this particular case.
| | 01:06 | You don't have to include that
comment on the top of your template file.
| | 01:09 | Then on line 10 we have this wonderful
line that says defined ('_JEXEC') or die.
| | 01:15 | What does that mean?
| | 01:16 | Well, this is a test to find out
about the variable called _JEXEC.
| | 01:21 | Basically it's a test to see if this is Joomla! that
you're trying to install this template into.
| | 01:25 | If you're trying to install a template
into Joomla! it should install and this is
| | 01:30 | going to go on to the next line of code to execute.
| | 01:32 | But if you're trying to take say a Joomla! template
and install it in WordPress,
| | 01:36 | that's not going to work out too well.
| | 01:37 | So what will happen is WordPress would see
this line of code, it wouldn't find that variable
| | 01:42 | _JEXEC defined and it would, well, die.
| | 01:45 | It just wouldn't execute any of the rest of the code.
| | 01:48 | That is what that first line of code
is designed to do here on line 10.
| | 01:51 | Then we're going to have a whole bunch
of stuff here that has to do with variables,
| | 01:55 | and using variables inside of your templates,
but there's some other
| | 01:59 | interesting lines here we're going to have to include.
| | 02:01 | Here on line 35, we want to load the
bootstrap.framework.
| | 02:05 | So this is a very important line of code.
| | 02:07 | We're going to copy and paste that into our index.php.
| | 02:10 | We also want to make sure
that we load the Bootstrap bug fixes.
| | 02:13 | So that's down here on line 41.
| | 02:15 | We're going to make sure we include that.
| | 02:17 | And then if we just scroll on down here
past this other stuff, down into the
| | 02:21 | main part of the document here, we're
going to see some other little bits of code
| | 02:23 | that are going to be useful to us.
| | 02:25 | So first of all, here on line 82, you'll see this
| | 02:29 | jdoc: include statement.
What is jdoc: include statement?
| | 02:32 | It's a statement that is designed to pull in certain
kinds of content from Joomla! into this template.
| | 02:38 | So in this case, the type is head. So what will go here?
Head code. What does that mean?
| | 02:44 | Well, your HTML page title, your meta
descriptions and meta keywords and all the
| | 02:49 | other things that you can customize
inside of Joomla! that might go in the head
| | 02:53 | of the document that are currently
there inside of this code.
| | 02:56 | We're still looking at the head of the document.
| | 02:58 | All this PHP that we saw before that that becomes before
we even actually get into the rest of the document.
| | 03:05 | Further down here on the page, we actually
start the body of the document here on line 132.
| | 03:11 | There are little bits of code
here that are important as well.
| | 03:14 | For example, down here on line 143,
you'll see the line of code that calls in a module
| | 03:19 | Again is that jdoc: include kind of thing.
| | 03:22 | This one though is set up to be a type
of modules followed by a module position name.
| | 03:27 | In this case its position zero and a module style.
I will show you exactly how to
| | 03:30 | include this code it in the next video
and tell you about those styles and what they do.
| | 03:36 | And then further down on this page,
you may see several modules. obviously.
| | 03:40 | But there's only one component inside of Joomla!
and that is located down here on lines 167 and 168.
| | 03:47 | So on line 167 we have here the
jdoc:include type= "message"
| | 03:52 | And what that is, is say you submit a contact form,
and you get the little message on the top
| | 03:58 | that says thank you for your message,
that comes from this particular little bit of code.
| | 04:01 | It's usually positioned right on top
of the component, and of course,
| | 04:05 | the component in Joomla! is anything
that goes in that big area of the web page,
| | 04:09 | so any of your content, including
your articles, your blogs, any sort of
| | 04:13 | component-based piece of content
like your site map, all of that
| | 04:17 | is going to go into line 168 there;
it'll call that and display it there.
| | 04:21 | So those are the important little bits of code that come
out of the Protostar template that we're going to borrow.
| | 04:25 | There is a whole lot more going on here in terms of code.
| | 04:29 | If you have a background in PHP, by all
means come through this file and take a
| | 04:34 | look at it and see what's going on.
| | 04:35 | Some of this other code that's in here,
we'll revisit later in the video, but for right now
| | 04:40 | there's just a few little lines of code
that we need to focus on,
| | 04:43 | and we're going to copy and paste those
into our index.html in the next video.
| | Collapse this transcript |
| Converting from index.html to index.php| 00:01 | So even though we have very little content
inside of our index.html and we have
| | 00:05 | even less styling associated with this page, we're going
to start converting this to a Joomla! template now.
| | 00:10 | The reason why it don't spend the time
building out this design in great detail
| | 00:15 | here inside of Dreamweaver and making it
look pretty before I move it to Joomla!
| | 00:18 | is that so much of the HTML that's
going to make up my final web page,
| | 00:24 | whatever gets displayed to the person visiting
the website comes from Joomla! itself
| | 00:28 | and it's hard to style HTML that you can't see.
| | 00:31 | So I tend to be very light in terms of
putting together this starting
| | 00:35 | web page here and then later we're
going add lots and lots and lots of
| | 00:39 | styling to make the web page look
pretty once it's actually in Joomla!
| | 00:44 | So I actually do very little here at the Dreamweaver level,
and this is what works for me, for my workflow.
| | 00:49 | If it works better for you to do more styling
where this template is concerned,
| | 00:53 | or more tweaking of content,
you're certainly welcome to do that.
| | 00:56 | So I'm here inside my index.html and what I need to do,
-- because Joomla! doesn't
| | 01:02 | read index.html, it reads index.php --
what I need to do here is do a File>Save As
| | 01:07 | and then I'm going to Save this As
write in my template folder index.php.
| | 01:14 | that's all there is to it. Boom!
We're now working in index.php, not bad.
| | 01:20 | I'm going to go head and close my index.html,
and if you Open up in your
| | 01:28 | exercise files on your Desktop in
Chapter 3 in 03_02, you'll see that there is
| | 01:33 | a protostarindex.php file, go head and open that.
This is the index.php file from Protostar.
| | 01:41 | If you don't have the exercise files,
you can get the same file by going to
| | 01:45 | your www or your ht docs folder, go to templates,
go to protostar, and find index.php there.
| | 01:52 | We're just going to use this file for copying
and pasting a bunch of content out of it
| | 01:56 | and including it in to our index.php file.
| | 02:00 | I've renamed it protostarindex.php, so we
don't get confused between our 2 indexes.php.
| | 02:05 | Okay, so what I need to do is
I need to start with here on line 1,
| | 02:10 | this opening <?php and I'm always going
to Ctrl+C or Cmd+C to copy and then over here
| | 02:16 | on my new index.php page, this is going
to go before my doc type, so up here the top,
| | 02:22 | I'm going to paste,
Ctrl+V or Cmd+V to paste.
| | 02:26 | You may see some errors come up here in Dreamweaver.
This particular error indicates that
| | 02:29 | we have an opening <?php tag,
but no closing PHP tag,
| | 02:33 | which, well, we haven't put it in yet.
So that's why we see that.
| | 02:36 | In fact we can make this error go away
very quickly simply by putting in a <?
| | 02:42 | down a little bit further and that
will make Dreamweaver happy again.
| | 02:46 | Okay, back to our Protostar page,
what I want to do is copy line 10 here.
| | 02:52 | the ('_JEXEC') or die that I explained in the previous video,
and I'm going to paste that in here at line 2.
| | 02:59 | If you feel like putting a comment at
the top of your index.php file,
| | 03:02 | you're certainly welcome to do that.
| | 03:04 | Then I'm going to scroll on down the
page here to line 34, and where it says
| | 03:09 | Add JavaScript Frameworks, we're
going to go ahead and we're going to copy this,
| | 03:13 | this is the JavaScript part of Bootstrap
that we're including,
| | 03:16 | highlight that on lines 34 and 35 and
copy that, and we're going to paste that
| | 03:21 | still inside of this php tag here, you
can put a little space, so that you can
| | 03:26 | paste that in, back here inside of
the protostarindex, we're going to go to
| | 03:32 | where it says load Bootstrap bugfixes.
| | 03:35 | Here on line 40 we're going to highlight that line,
Ctrl+C or Cmd+C to copy
| | 03:40 | and Ctrl+V or Cmd+V to paste.
| | 03:42 | Now notice that the comment here says
that Load the optional right to left
| | 03:47 | Bootstrap.css and the Bootstrap bugfixes.
| | 03:50 | My particular website doesn't need the
right to left Bootstrap css, and it would
| | 03:55 | mean that I'll be loading in an
extra stylesheet that I don't need.
| | 03:58 | So I'm going to go ahead and edit this,
just get rid of the comma and $this ->direction,
| | 04:04 | just go ahead and highlight that and erase that.
| | 04:08 | So this would say JHtmlBootstrap::loadCss
and then includeMaincss.
| | 04:12 | Right now it's indicated as false,
so in other words, don't load the CSS.
| | 04:17 | Well, we want to load that CSS, you
might include this line if you wanted to
| | 04:22 | include the right to left stylesheets,
but you don't want to include the other
| | 04:26 | Bootstrap stylesheets and that would be
because you're using the LESS CSS.
| | 04:30 | So in this case we're not, so we're going to
set this to true, a very, very important
| | 04:35 | little tweak there we make.
| | 04:36 | And that is all that we need to do here
with the top of this document in terms
| | 04:41 | of the .php preamble, and I will put
this in your exercise files for you.
| | 04:45 | So you can just copy this directly.
if that is what you prefer.
| | 04:49 | I'm going to add some additional code
now a little bit further down inside of my
| | 04:53 | HTML head, so what I need to add here is,
after head and after the meta
| | 04:59 | character set I'm going to add a line here.
| | 05:01 | And that line is going to be <meta name="viewport"
content="width=device-width, initial-scale=1.0">
| | 05:28 | What does that mean?
| | 05:29 | Well, this is a little line here that's
used in Responsive Design
| | 05:33 | and it has to do with resizing your page
for Desktops and mobile designs.
| | 05:38 | So it's very important that you remember to include
that if you're going to be building a Response Design.
| | 05:44 | The next thing that we have here is
our title tag, our HTML title tag.
| | 05:49 | Remember I told you about these three
Bootstrap files that we included?
| | 05:52 | Those Bootstrap files we only included
because we wanted have access to them
| | 05:57 | while we built out the grid portion of this website.
| | 06:00 | I don't need these anymore because
Joomla! is going to load those Bootstrap
| | 06:04 | stylesheets for me up here from line 8.
| | 06:07 | So I'm going to get rid of that.
| | 06:09 | I'm also going to get rid of my
HTML title tag here that currently says
| | 06:12 | untitled document, that's the dynamic piece
of content that will come from Joomla! as well.
| | 06:16 | What I could do is, when I get rid of
all this, I can simply substitute this in
| | 06:21 | with jdoc:include type="head".
| | 06:28 | And that will include the head content
for Joomla! including meta descriptions,
| | 06:33 | meta keywords, HTML title tag, and some other things.
| | 06:37 | The last thing I'm going to add is a little fix
that a number of people
| | 06:41 | like to include when working with HTML5;
| | 06:43 | it's for earlier versions of Internet Explorer.
It's here inside the Protostar file.
| | 06:49 | So if we scroll on down here,
it's all the way down on line 127.
| | 06:56 | What I want you to do is copy the lines 127 to 129.
And as you see here it says,
| | 07:02 | if it's an earlier version than IE 9,
we're going to load in a little bit of JavaScript.
| | 07:06 | And this little bit of JavaScript is to help
with HTML5 compatibility
| | 07:11 | inside of earlier versions of Internet Explorer.
| | 07:14 | So I'm going to go head and copy that,
and go back to my index.php,
| | 07:20 | and I'm going to paste that right on in here.
| | 07:22 | Okay, so that's a lot of little things
that we need to be sure to copy and paste
| | 07:26 | into the head of our document to
make this a Joomla! compatible template.
| | 07:30 | I will put all the stuff for you in the exercise files;
the exact code that we have here
| | 07:35 | going in the head of our document,
so that you can copy and use this
| | 07:38 | on your future Joomla! templates.
| | Collapse this transcript |
| Using the module and component insertion code| 00:00 | Now that we have adapted the head of our
document to the little codes that Joomla!
| | 00:05 | needs in order to run this as a Joomla! template,
| | 00:07 | let's go ahead and place in the codes
that are required to load our modules
| | 00:12 | and the components in the rest of our index.php page.
| | 00:15 | So I'm going to scroll on down here to our body tag,
| | 00:20 | and right now I have a little note here that says
Put language switcher and search here.
| | 00:24 | Well, our language switcher, our navigation,
our breadcrumbs, the content
| | 00:28 | in the right column and our menu down
in the footer are all modules.
| | 00:32 | So let's go ahead and deal with his module code first.
| | 00:35 | So I've given you a little exercise file
down here that has some module code in it.
| | 00:40 | I'm going to go ahead and copy that line.
Ctrl+C or Cmd+C to copy.
| | 00:46 | Where it says Put language switcher and search here,
| | 00:49 | I'm going to highlight that and
say Ctrl+V or Cmd+V. That is the little bit
| | 00:53 | of code that you need in order to
include a module in your web page.
| | 00:57 | And I'm going to go ahead and just
clean up the formatting there a little bit.
| | 01:01 | So what does this line of code mean?
| | 01:03 | Well, let's take a look at it.
| | 01:05 | So jdoc:include indicates that this is something for
Joomla! to include, right here in this document.
| | 01:10 | What kind of thing am I including?
| | 01:12 | Well, this time it's modules as opposed to the head,
which was up at the top of the page.
| | 01:16 | Then it's going to ask us for a module position.
| | 01:19 | Right now this is position-0.
| | 01:21 | Now Joomla! core templates tend to use
this position-0, position-1, position-2,
| | 01:28 | position-3 and so forth.
The reason that they went with module position
| | 01:31 | names like that is because then your
module positions are not tied to the way
| | 01:36 | that your template is put together.
| | 01:38 | If you want to take position-0 and you
want it at the top of the page,
| | 01:42 | and then you decide you want it at the bottom
of the page, you just simply move it.
| | 01:45 | My take on this is no client in the world
will ever remember what position-0,
| | 01:49 | position-1, position-2 are.
They're just not going to remember it.
| | 01:54 | So I tend not to name my modules these sorts of names.
| | 01:58 | There's nothing wrong with it.
It's just a philosophical difference.
| | 02:01 | What I prefer to do is name my module positions
by functionality or by positions on the page.
| | 02:07 | Now that's particularly great for a
custom extension where we really can hone
| | 02:11 | down to exactly what it is that we
want to appear in our Joomla! template.
| | 02:15 | As opposed to a more generic commercially available
template or a template
| | 02:19 | that ships with Joomla! where every
position may be used for every kind of module.
| | 02:24 | So I'm going to change this name of position-0 to search,
because that is really what's going to go in that spot.
| | 02:30 | In fact the language switcher will go there too,
but it's that search position
| | 02:34 | up in the upper portion of the page.
| | 02:36 | The last part here is a style of HTML 5.
| | 02:39 | Now there are several values that can go here.
| | 02:42 | This style refers to what kind of HTML
will be wrapped around this module
| | 02:47 | before it appears on the web page.
Historically that's been a table that's been
| | 02:51 | wrapped around the module before it appears.
In the last versions of Joomla!
| | 02:56 | it was a simply a div with a class of module table on it
and it was always a div with a class of module table.
| | 03:02 | These styles are still available to you.
| | 03:04 | So if you make your style have a value of XHTML
you will always have a div.
| | 03:09 | It will always have a class of
module table associated with it.
| | 03:13 | However, this style of HTML 5 is new
in Joomla! 3, and it will allow you to do some
| | 03:20 | interesting things where your module is concerned.
| | 03:22 | So here with the style of HTML 5, if we
take a quick look at our Joomla! site,
| | 03:28 | if I go to localhost/administrator and
I login, and I go to Extensions Module Manager
| | 03:38 | and I just take a look at one of these modules,
let's say Search for example.
| | 03:42 | Under my Advanced Options one of the
things I can do if my module is assigned
| | 03:49 | the type of HTML 5, is I can use these
items here inside of my module editing screen
| | 03:56 | and I can choose what HTML 5 tag
I want associated with that module.
| | 04:01 | So as I said, the style of XHTML
always wraps a div tag around it.
| | 04:06 | With the HTML 5 style, I can choose which tag I want.
| | 04:10 | So, do I still want a div?
| | 04:12 | Do I want it to be a section, aside, nav,
address or article around my module instead?
| | 04:18 | I can also choose my Bootstrap Size.
| | 04:21 | This refers to that span 1, span 2, span 3, span 4
that we use to put together
| | 04:27 | the Bootstrap framework.
| | 04:28 | So I can specify a Bootstrap Size
to include with that HTML that wraps around
| | 04:34 | that module, so that it will fit correctly on my page.
| | 04:38 | I can also choose which Header Tag I would
like associated with that particular module.
| | 04:44 | Do I want it to be an h3?
| | 04:45 | Do I want it to be h1?
| | 04:46 | Do I need it to be an h6
or just simply a paragraph?
| | 04:50 | And I can alter that here as well.
| | 04:52 | So why is this important?
| | 04:54 | This is really important with third-party extensions
that may not necessarily
| | 04:57 | be Bootstrap compatible yet.
| | 04:59 | What you can do by using these widgets
here in the backend of Joomla! is
| | 05:04 | you can essentially wrap an HTML tag
with the correct Bootstrap markup around it,
| | 05:10 | so that it will fit correctly into your Joomla! template.
| | 05:13 | That's why these tags are so important.
| | 05:15 | What I would recommend to you at this point in time is
unless you have a very good reason
| | 05:19 | to not have a style of HTML 5 associated
with your module,
| | 05:24 | I would recommend you just use the style of
HTML 5 now, here, inside of your modules.
| | 05:29 | So I'm going to take this same code,
and I'm going to now copy that
| | 05:33 | and I'm going to paste it into
several spots here on my web page.
| | 05:36 | Here, where it says my navigation is going to go here.
| | 05:39 | This is where I am going to include my navigation
and I'm just formatting my
| | 05:46 | code here a little bit to keep it clean.
| | 05:47 | This is going to have a name of nav.
| | 05:50 | Here where it says my breadcrumbs are
going to go here, I am going to go ahead
| | 05:54 | and paste this in and this will be breadcrumbs.
| | 06:00 | And a little bit of further down;
| | 06:03 | that's where the content goes.
I'm going to skip that for the moment.
| | 06:07 | Here is the right column, go ahead and paste this
one in and I'm just going to call this right.
| | 06:13 | And then down here at the bottom of the page
I didn't put in a note that said
| | 06:17 | that I wanted to have the footer menu
display down here,
| | 06:20 | but I'll go ahead and I'll add the code for doing that
and this will be a name of footer.
| | 06:25 | Okay, so then the last thing I need to do is
add my code for where the component is going to go.
| | 06:30 | This is where the articles will display on the web page,
where the site map is going to display.
| | 06:35 | There's only one component per page,
so there's one batch of code for doing this.
| | 06:38 | Back in my little Joomla! cheat sheet here,
there's just these two lines I need to copy.
| | 06:43 | That's the message and the component.
| | 06:45 | Ctrl+C or Cmd+C to copy and then up
here at the top of the page,
| | 06:50 | Ctrl+V or Cmd+V to paste those.
If I just hit Tab while those two lines are
| | 06:54 | highlighted here in Dreamweaver, I can tab both lines
together and keep my code here looking clean.
| | 07:00 | So there we go, we have our lines of code now
for all of the modules on the website.
| | 07:05 | We've set them all to the style of HTML 5.
| | 07:07 | I've assigned them all positions that
will mean something to a client in the long run.
| | 07:11 | I've also included the codes here for
the message like the thank you for
| | 07:15 | sending email message, and the
component, which would be my articles,
| | 07:20 | my site map and so forth for my website.
| | 07:22 | That's all in place now,
and we're done with index.php.
| | Collapse this transcript |
| Creating a template thumbnail and preview| 00:00 | I've logged into the backend of Joomla! here
because I want to show you about the
| | 00:04 | template thumbnail and the template preview
images that come with every Joomla! template,
| | 00:09 | and show you where they're in use on the website.
| | 00:11 | So if we go to Extensions>Template Manager
and I'm going to go to the template side of this.
| | 00:18 | So if I just click on Templates here, this
will go to a page of all my template masters.
| | 00:22 | So these are where I would go
to edit HTML and CSS files.
| | 00:26 | And you can see in the left column here that we
have template thumbnails one right after the other.
| | 00:31 | These are little versions of what the websites
are going to look like.
| | 00:36 | In some cases people have actually just a screenshot
of the page, like here on the Beez3 site.
| | 00:42 | This little thumbnail. In some cases
they've incorporated other images together.
| | 00:46 | Here is the Hathor template,
and you can see that it has a couple of
| | 00:50 | color variations with it, or in some cases
they are pretty different.
| | 00:54 | So here's the Protostar thumbnail.
When you click on it, you actually get a
| | 00:59 | little mobile phone shot here as well.
| | 01:00 | So the thumbnail is the little image
that you see here in the column.
| | 01:04 | When you click on something and you get this larger
format picture that is the template preview.
| | 01:10 | So we need to incorporate template thumbnails
and template previews into our bunch of files
| | 01:15 | that we're putting together to make our Joomla! template.
| | 01:18 | This is the way they're going to be used on the website.
| | 01:21 | Now I tend to be pretty simple in what I do.
I just take a screenshot and I format that
| | 01:26 | into something that will wind up going on the web page.
| | 01:30 | You can certainly, if you got Photoshop skills,
you can certainly put together a graphic like this
| | 01:34 | inside of Photoshop to represent your template.
| | 01:37 | Whatever it is that works for you is just fine.
But if you take a screenshot and
| | 01:41 | you just resize these, that works great.
| | 01:43 | Most of these template previews you'll find
are about 800 pixels wide.
| | 01:47 | You can certainly make them a little bit wider
if you want, but be aware that people that are
| | 01:50 | working with narrower screens
may windup scrolling off,
| | 01:54 | if they need to take a look at your big version.
| | 01:56 | And the thumbnails are usually around 200 pixels wide.
| | 01:59 | So I've gone ahead and created those for you.
| | 02:01 | Inside of your exercise files,
inside of Chapter 3, video number 4,
| | 02:06 | you'll see that I've given you here a
template_preview and a template_thumbnail.
| | 02:09 | If you just highlight both of these
and Ctrl+C or Cmd+C,
| | 02:15 | in your template folder we're going to Ctrl+V
or Cmd+V. Now the template_preview and the
| | 02:19 | template_thumbnail will go into the root
of your template folder.
| | 02:22 | They should not go in the images folder.
And that's because Joomla! expects them
| | 02:27 | to be called template_preview.png
and template_thumbnail.png.
| | 02:35 | Don't call them JPEGs. Don't make them GIFS.
They need to be PNGS.
| | 02:38 | They need to be all lowercase letters
with an underscore template_preview and
| | 02:42 | template_thumbnail, and they need to
be located in the root of your website.
| | 02:45 | If you do all of this, then they will show up
in those places in Joomla!'s! backend automatically.
| | Collapse this transcript |
| Creating a favicon| 00:00 | A favicon is the little image that you see
on up here, this is Firefox,
| | 00:06 | so it happens to appear right here in the corner of this tab.
| | 00:08 | It's a little graphic, it will show up in the list of Bookmarks
| | 00:12 | and it might show up at the top of a Window.
| | 00:15 | It can be shown in a number of different places
in a Browser Window and in Bookmark Bars.
| | 00:19 | And a favicon is a great little addition to your website.
They are very, very easy to build.
| | 00:25 | So favicon.cc is one of the websites
I particularly like for making favicons.
| | 00:29 | It's got a great little interface for drawing,
or you can import a picture
| | 00:35 | and have that become the favicon for you.
| | 00:36 | And that's in fact what we are going to do.
| | 00:39 | So over here on the left side of the screen,
if you click on Import Image,
| | 00:43 | and you click on the Browse button here.
| | 00:45 | If you go to the exercise files in
Chapter 3, this is video number 5.
| | 00:51 | Pick a fav_icon graphic here from the exercise files
folder and say Open and then say Upload.
| | 00:59 | This is going to go ahead and convert this
to a favicon for you.
| | 01:02 | You can see here in the editing window, I can use
my little pencil icon here to edit the individual pixels.
| | 01:09 | I can pick colors over here from the side
and then down here on the bottom,
| | 01:13 | it'll show me a Preview of what
this favicon is going to look like.
| | 01:17 | I'm actually pretty happy with the way
this little windmill looks right now.
| | 01:21 | You can certainly click on it and change
colors or do whatever you want,
| | 01:24 | but I'm just going to leave it the way it is.
| | 01:27 | So I'm going to click right here where
it says Download Favicon and it's going
| | 01:30 | to try to save this on down to my computer.
I'm just going to say Save File, there it is.
| | 01:35 | And now if I right-click on this
and say Open Containing Folder;
| | 01:38 | that will show me the favicon
inside of my Downloads folder.
| | 01:43 | And I'm going to open up my template folder
where I've been building the website up till now
| | 01:47 | and I'm just going to drag favicon from there over here.
| | 01:51 | The reason to run this through
the favicon generator, this will put it into
| | 01:55 | the correct favicon format, we'll call it favicon.ico,
and you can then load this right here,
| | 02:00 | into your template and it will work correctly
when you get it in a browser window.
| | 02:06 | Go ahead and create a favicon for your website.
| | 02:08 | Make sure that it gets put in the root
of the template, not inside the images folder,
| | 02:12 | but in the root of the template, just as I show here
and I'll see you in the next video.
| | Collapse this transcript |
| Understanding the XML file| 00:00 | I am here in Dreamweaver and I'm looking
in a file called templateDetails.xml.
| | 00:07 | You can find it inside of your exercise files folder,
and if you don't have the exercise files,
| | 00:10 | if you go to your WAMP or MAMP directory
inside of the www or HT docs folder,
| | 00:16 | inside of templates, inside of Protostar
| | 00:21 | look for the templateDetails.xml file
and you can follow along here.
| | 00:25 | So this is the templateDetails.xml file
and this is used for installing your
| | 00:31 | templates inside of Joomla!
And I wanted to go through this file and explain
| | 00:36 | to you what everything means on this list.
| | 00:39 | And then in the next video
I'll also you how to edit this, so that the XML file
| | 00:43 | will reflect what it is that we've built
so far with our template.
| | 00:47 | So in line 1 here, this basically says
this is an XML document.
| | 00:50 | Line 2 states that this is an XML document
of the Joomla! 2.5 variety.
| | 00:57 | Yes, I know we're working in Joomla! 3
but the XML file hasn't changed and so
| | 01:02 | you'll see the DOCTYPE set up this way.
Just go ahead and leave it.
| | 01:05 | In line 3, the extension version is 3.0;
| | 01:08 | this is a template for the front end of the
websites so that's what that line is all about.
| | 01:13 | Those first three lines you're
never going to need to touch ever.
| | 01:16 | In fact don't touch them, because if you touch
them maybe you break something
| | 01:20 | and your template won't install.
So just leave those first three lines alone.
| | 01:23 | In line 4 this is your template name.
This one of course was called protostar.
| | 01:27 | The name for your template needs to, preferably,
I would say be in all lowercase.
| | 01:31 | But you could use alternating capital and lowercase letters,
| | 01:35 | provided it's all in one word, no spaces, no
funny characters, just letters and numbers.
| | 01:40 | So that will become your template name,
as well as, it will reflect as the
| | 01:46 | folder name inside your template directory structure.
| | 01:49 | Line 5 is the version of your particular template.
| | 01:52 | Line 6 is when you created it.
| | 01:54 | Line 7 is the author and the author email
and the copyright statement.
| | 01:58 | Line 10, you see this funny thing that says
TPL_PROTOSTAR_XML_DESCRIPTION.
| | 02:04 | This is a variable that's actually
calling a language file.
| | 02:10 | We have many language files inside of Joomla!
It's part of translating the basic front end
| | 02:14 | parameters as well as the backend of the Joomla! website.
| | 02:17 | I talked about this in Joomla! 3 Essential Training.
| | 02:20 | What this is programmed to say is
go find the variable that describes
| | 02:25 | what this XML file is and that could be translated
into many, many different languages.
| | 02:29 | So whatever the language is that
I'm working with right now,
| | 02:32 | pull that description in and put it here.
| | 02:34 | We're only going to be working really
with the English side of this,
| | 02:36 | so I'm just going to put in a
description there in the next video.
| | 02:40 | Then underneath we have a section
of this xml file called files.
| | 02:44 | This is a list of all of the files and folders
that make up the particular template
| | 02:49 | that you will be installing into your website.
| | 02:51 | So there's a lot of stuff here that is
listed that we do not have in our folder
| | 02:56 | and file structure, so we'll be
getting rid of a number of these things.
| | 02:59 | Scroll down a little further, we have a
list of their positions that are used in
| | 03:03 | this particular template and we have
many fewer positions in this as well.
| | 03:06 | So we'll need to edit that.
| | 03:08 | Then we have a chunk of content down here
that describes the language files
| | 03:12 | that I referred to earlier, and these are
those language file names and where they're located,
| | 03:16 | and then finally, down here at the bottom
is from line 49, pretty much to the end,
| | 03:21 | except for the last slash extension tag,
| | 03:24 | This has to do with some variable templates.
| | 03:27 | So when you go into Joomla! and you're
editing a template style and you want to
| | 03:32 | change the background color, upload a
different logo or some things that we did
| | 03:35 | in Joomla! 3 Essential Training, this is
part of the programming that's required
| | 03:39 | to make those template
configuration screens happen.
| | 03:42 | I'll be talking about this later in the
course but for right now we're not going
| | 03:46 | to include this in our template file.
| | 03:48 | So that's what the XML template file
looks like as an overview.
| | 03:51 | Snd in the next video I'm going to show you
how to edit this.
| | Collapse this transcript |
| Creating a new XML file| 00:00 | So in the previous video, I explained
to you exactly what it was that
| | 00:05 | this XML file contained and how it was set up.
| | 00:07 | Now I'm going to show you how
to edit this for your website.
| | 00:09 | So if you're looking your Exercise
Files folder for this particular video,
| | 00:13 | you'll find this file, templateDetails.xml
and this is going to be our starting point.
| | 00:18 | So the first thing I'm going to do
once I have this open in my editor is
| | 00:22 | I'm going to say File>Save As, and I'm
going to put this into my Desktop,
| | 00:28 | into my template folder and templateDetails.xml.
| | 00:34 | Don't change the file name, just put it
here into the root of your template folder.
| | 00:38 | Go ahead and click Save.
| | 00:41 | Do not update the links.
| | 00:42 | That will only be asked
if you're working with Dreamweaver.
| | 00:45 | Okay, so now we can go through here in edit this.
| | 00:47 | So as I said the first three lines of
this XML templateDetails file,
| | 00:51 | you do not want to edit, so don't touch those.
| | 00:54 | We'll start with line 4 here.
Instead of protostar,
| | 00:56 | we're going to give this another name.
I'm just going to call this kineteco.
| | 01:00 | It is indeed version 1.
And now I can list my creationDate.
| | 01:04 | 11/5/2012 by the way this is as an
American date format, month, day and year.
| | 01:11 | You can certainly put this in European format,
so you could say 5/11/2012 if you wish.
| | 01:17 | You could also spell it out as November 5, 2012
or you could say 5 November 2012.
| | 01:22 | However, you want to do it is just fine.
| | 01:24 | It's going to show up in whatever you type in here.
| | 01:27 | It'll show up in the backend of Joomla!
in a listing of all of your templates.
| | 01:32 | The author here is not going to be Kyle Ledbetter.
It's going to be Jen Kramer.
| | 01:37 | I can put an Email address here info@kineteco.com,
and they now have copyright statement.
| | 01:46 | So this will be copyright (C) 2012 kinetECO, Inc.
| | 01:53 | All rights reserved.
| | 01:54 | Then the description is, as I said here before,
this was done with a variable.
| | 01:59 | I'm just going to type in, This is
the template for the kinetECO website.
| | 02:08 | This will show up in one of the template style screens,
is where this description will show up.
| | 02:13 | Now I need to take a look at my list of files.
| | 02:16 | So if you look at your template folder,
what we have here right now is we have a
| | 02:22 | css folder and images folder,
favicon.ico, index.php, template_preview,
| | 02:29 | template_thumbnail, both of those
are PNGS and templateDetails.xml.
| | 02:33 | I skipped our index.html.
If you want to upload that to the server, you can.
| | 02:38 | I'm just not going to include that as
part of my upload to the server,
| | 02:42 | so I've just skipped over that.
| | 02:43 | So let's go ahead and modify our file list here.
| | 02:48 | So we don't have a component.php,
so I'll just erase that line.
| | 02:53 | We do have a favicon.ico and index.php.
| | 02:57 | templateDetails.xml, template_preview
and template_thumbnail. Have all of those.
| | 03:01 | We do not have an html folder,
but we have css and we have images.
| | 03:06 | We don't have an img, JavaScript, language
or less folder, so I'm going to get rid of all of those.
| | 03:12 | So that was pretty simple.
| | 03:14 | Now we need to spell out our
module positions here in this list.
| | 03:17 | By putting your module positions in this list
that will correspond to the drop down
| | 03:22 | that you see in the module manager
when you assign a module position to a specific module.
| | 03:27 | So this is where those positions are coming from
to populate that drop-down list.
| | 03:33 | So we need to edit this list.
What where were our module positions again?
| | 03:37 | Well, if you don't remember you can go ahead and
open up your template folder and open up
| | 03:43 | index.php and just read on through here,
and you'll find your module positions.
| | 03:49 | So there's search, nav, breadcrumbs.
| | 03:53 | So let's go ahead and spell those out to
start with, search, nav and breadcrumbs.
| | 03:58 | So I'm going to switch to my templateDetails.xml
and I'll type in search, breadcrumbs and nav.
| | 04:12 | And if I switch back over to index.php,
I'll scroll down a little bit more.
| | 04:18 | I also have module positions of right and footer.
| | 04:22 | So let me change those also, right and footer.
| | 04:30 | And all of these other positions I don't need,
so I can just get rid of all of these extras.
| | 04:35 | So there we go, search,
breadcrumbs, nav, right and footer.
| | 04:38 | And let me just double check that.
| | 04:43 | So search, nav, breadcrumbs,
right and footer, so we are all set.
| | 04:50 | Then the last part of this is languages.
I'm not going to have a language file
| | 04:54 | associated with these template, so
I don't need this code that's here.
| | 04:57 | If you do have a language file associated
with your template, you will need to put it here.
| | 05:01 | And then as I said this last part here
under config has to do with template variables
| | 05:07 | and template configuration screens,
which we're not going have at least to start with.
| | 05:10 | So I'm just going to go ahead and
highlight all of that from the opening config tag,
| | 05:14 | all the way down to /config,
and I'm just going to erase that.
| | 05:18 | So your XML file should be really quite short.
| | 05:21 | It should just have these three
critical lines at the beginning.
| | 05:24 | And a little bit information about the template itself.
| | 05:27 | A little bit of information about the
files and folders they are in
| | 05:31 | and the list of the module positions.
And that's pretty much it, that's all you need to do.
| | 05:35 | Go ahead and say file Save
and we are done with templateDetails.xml file.
| | Collapse this transcript |
| Creating the ZIP package install| 00:00 | The very, very last step, now we've
propped all these files and images and
| | 00:06 | folders and all kinds of stuff inside of our
Joomla! template folder here on the Desktop,
| | 00:11 | the very last step is to zip everything together
and to get that uploaded to the server.
| | 00:16 | So I'm going to zip it all together in this video.
| | 00:18 | So inside of my template folder, I'm going
to open this up and I'm just going
| | 00:24 | to double check and make sure
everything here I want to include.
| | 00:26 | I already said I'm not going to include index.html.
| | 00:28 | I'm going to leave it here on my Desktop
because who knows if I may need to come back
| | 00:34 | to that or not and then in our css folder,
remember that I copied in these
| | 00:38 | three CSS files at one point in time: bootstrap,
bootstrap-extended and bootstrap-responsive.
| | 00:42 | I had them here just as placeholder stylesheets
while I put together my
| | 00:47 | Dreamweaver grid layout,
way back earlier in Chapter 2.
| | 00:51 | What I'm going to have Joomla! do now
is load those stylesheets in for me.
| | 00:55 | So I don't want to have my
stylesheets here associated with that.
| | 00:58 | I want to pull the Bootstrap
information from Joomla!'s! core.
| | 01:02 | That way I'm always working with
the most recent version of Bootstrap.
| | 01:05 | If I copy these CSS files to my css folder,
as Joomla! updates its version of Bootstrap,
| | 01:11 | my CSS files will never change.
| | 01:14 | And that's potentially a bad thing,
particularly if Bootstrap fixes some bugs.
| | 01:18 | So it's better to rely on the core Bootstrap files,
rather than relying on my copies.
| | 01:24 | So I'm going to go ahead and erase these.
| | 01:26 | I'm just going to highlight those three files,
hit Delete and send them to the Trash.
| | 01:30 | So the only file that I have left in
my css folder is my custom.css document.
| | 01:36 | That's all, and that's exactly what we want.
| | 01:40 | And as I said I'm not going to include
the index.html in my zips.
| | 01:44 | So PC people, if you just highlight all of these
and I'm going to hold down my Ctrl Key
| | 01:49 | and click on index to deselect it
and then I'm going to right-click
| | 01:53 | and I'm going to say Send to a
Compressed (zipped) folder.
| | 01:56 | And I'm going to give this a different name.
| | 01:59 | It doesn't have to be called templateDetails;
I'm just going to call it template.
| | 02:02 | And that will become the installation
mechanism when we put this into Joomla!
| | 02:07 | We're going to upload the zipped file
into Joomla! and then Joomla! will open it up,
| | 02:13 | the zip file and according to the instructions
in the templateDetails.xml, x
| | 02:17 | up, will install this in your website.
| | 02:19 | I'll show you how that works in the next video.
| | Collapse this transcript |
|
|
4. Installing the Joomla! Template Package FileInstalling the package file| 00:00 | So now finally we have the moment
we've all been waiting for.
| | 00:03 | We've spent the last couple of chapters
building out our template in terms of
| | 00:07 | the files and the folders and now we're
ready to upload this and put this into Joomla!
| | 00:12 | So to upload and install our template,
all we need to do is go to
| | 00:16 | Extensions>Extension Manager and
I'm going to Browse for my Desktop.
| | 00:22 | I've got my templates folder, and inside of my templates
folder is that zipped file that I just made for you.
| | 00:29 | Go ahead and hit Open and then say Upload & Install.
| | 00:32 | And you should get a message saying that
Installing the template was successful.
| | 00:36 | If you did not get that message, don't panic.
I'm going to cover that in the next video.
| | 00:40 | What happens if you wound up
with some sort of error here.
| | 00:44 | But for those of you who got your
template to install, Congratulations!
| | 00:47 | Let's take a look at the front end of the website.
| | 00:49 | So I'm going to go ahead and look, and gosh.
That looks a lot like Protostar, doesn't it?
| | 00:54 | Well, that's because we forgot one important step;
and that was we need to make sure
| | 00:58 | that we assign this template as
the default template for the website.
| | 01:02 | So here in the backend of Joomla! if we
go to Extensions>Template Manager,
| | 01:09 | let's take a look at our template structure here.
| | 01:11 | At the moment we have exactly one template style.
It's right here, it's called kineteco,
| | 01:15 | and it's assigned by Default.
| | 01:17 | We also have template styles for English and Italian
down here under protostar.
| | 01:23 | If I just take kineteco's default and I set it
as the Default for the website just by hitting the star,
| | 01:30 | what I've done here is I've said that
this is my template for a language of all
| | 01:35 | and my English side of the website
and my Italian side of the website,
| | 01:39 | they aren't going to change. They're continued to
be assigned to the protostar template.
| | 01:43 | So just because I've made this change and I refresh
my page here, does not mean I'm going to see it.
| | 01:48 | Now, if you are building a single language website
and you just switched your default template
| | 01:54 | just like that, that's all you need to do.
You're good to go.
| | 01:57 | You should be able to see your template
in your Window now.
| | 02:00 | For those of you who are continuing to
work with a Multilanguage website,
| | 02:03 | here's what you need to do.
| | 02:05 | We need to put a check mark next to the
kineteco template and we're going to Duplicate it.
| | 02:09 | And we're going to put a check mark
next to it and Duplicate it second time.
| | 02:14 | So here under kineteco - Default (2),
I'm going to call this kineteco-English.
| | 02:19 | I'm going to set it to the Default
for the English part of the website.
| | 02:23 | Then under menu assignment, I'm going to go ahead
and I'm actually going to toggle everything.
| | 02:28 | I'm going to use this as
everything under the English menu.
| | 02:33 | Everything under the Footer menu,
I'm not going to select the Italian menu of course,
| | 02:37 | and I'm not going to select the Main menu.
| | 02:39 | The Main menu will be assigned
to just the things with the language of all.
| | 02:43 | That's what I need to do here, say Save & Close.
| | 02:47 | Then for the other copy of the kineteco template here,
now it's called Default(3), go ahead and click that.
| | 02:54 | We're going to set this as the Italian version of the site.
| | 02:57 | Switch over to the menu assignment and
we're going to select the two Italian items
| | 03:01 | as the template style for those.
Go ahead and say Save & Close.
| | 03:07 | So now you should have three
copies of the kineteco template style.
| | 03:10 | I forgot to rename this one here.
| | 03:12 | I'm going to click on that and just switch
Default(3) to Italian and say Save & Close.
| | 03:18 | So you should have the three of
these now: default, English and Italian.
| | 03:21 | Default should have a yellow star,
English and Italian have the flags.
| | 03:25 | You'll see that there are some pages that are assigned.
| | 03:27 | Now when I come to the front end of
Joomla! and I hit the Refresh button,
| | 03:30 | now I go to my new template, and here it is.
| | 03:35 | Yeah! It's not terribly beautiful, is it?
| | 03:38 | Well, you know, there's only so much
styling that Bootstrap can do.
| | 03:41 | we have a lot of custom styling to do.
| | 03:43 | Any other thing that you might notice is
we're missing modules.
| | 03:46 | Like, where's my navigation bar? We're also missing
some of the images here for the website.
| | 03:51 | So I'm going to show you how to fix
all of those things in the third video in this chapter.
| | 03:55 | But right now I want to help those of you
who did not get your template installed.
| | 04:00 | Let me walk you through what might be going on.
I'm going to do that in the next video.
| | Collapse this transcript |
| Fixing typical installation problems| 00:00 | So there's a bunch of you sitting there right now,
pouting at your computer screen.
| | 00:04 | You're pouting because you're so jealous
of my particular website right now.
| | 00:09 | Not because it looks fabulous.
| | 00:11 | Oh, I assure you, it's not for that.
| | 00:12 | You're pouting because my template installed
and yours didn't.
| | 00:17 | And you want to know where that problem happened.
| | 00:19 | Well, there are three common ways that this can happen;
| | 00:23 | that you can not have your template
installed on the website.
| | 00:26 | and all three of them track back to templateDetails.xml.
| | 00:29 | So in all likelihood, one of your three problems is
| | 00:33 | you did something wrong with the syntax
inside of your XML files.
| | 00:37 | So you forgot to close a tag and nested them incorrectly.
| | 00:40 | You left off an angle bracket, whatever it is.
| | 00:42 | The second way is,
you have a bunch of files that you put in your zip,
| | 00:46 | but you forgot to list all those files in the XML file.
| | 00:49 | And the third way is you listed files in
your XML file that aren't part of the zip.
| | 00:54 | So that's all Joomla! cares about with the installation step.
| | 00:58 | It wants to make sure that XML file reflects
what you're trying to put into Joomla!
| | 01:02 | and if it doesn't, it'll give you problems.
| | 01:05 | It doesn't care about whether your HTML
or your CSS is formed correctly or whether it's valid.
| | 01:10 | It doesn't care about your images.
| | 01:12 | It just cares about what files are going
into Joomla! and are they all accounted for.
| | 01:17 | That's all the installation step is about.
| | 01:19 | So let's go ahead and take a look at
what these errors look like.
| | 01:23 | I've created three broken templates for you.
| | 01:26 | Hey! Three broken templates!
Yeah, none of them we're going to install.
| | 01:29 | Well, one of them will install,
two of them we won't install at all.
| | 01:33 | And I'm going to walk you through the process
of working with all three of those.
| | 01:37 | So here in the backend of Joomla! if we go to
Extensions>Extension Manager
| | 01:42 | and we hit the Browse button.
| | 01:44 | We're going to go to our exercise files
in 04_02, go to broken1 here.
| | 01:50 | This is one with the syntax problem.
| | 01:52 | I've left off a closing tag
and when I try to upload this file and install it,
| | 01:57 | I'm going to get a message saying
it could not find the Joomla! XML setup file.
| | 02:01 | Now this is where a lot of people get really upset,
because of course,
| | 02:05 | there was an XML setup file, you put it in the zip,
you confirmed it was there.
| | 02:08 | Well, it's just the worst, one of the worst,
error messages in all of Joomla!
| | 02:13 | because it's completely misleading and wrong.
| | 02:16 | The XML file is there, it's just badly formed.
| | 02:19 | There is an error inside of it.
| | 02:21 | One of those tags is missing and that's
why it could not even install broken1.
| | 02:26 | So if you wanted to fix this template,
you'll need to go into your XML file,
| | 02:30 | look for tags that are nested incorrectly,
look for tags that are misspelled,
| | 02:34 | look for tags that are missing angle brackets
or slashes, and look for missing tags altogether.
| | 02:39 | I guarantee you, one of the problems
is located in those areas.
| | 02:43 | So go ahead and look for that.
| | 02:45 | Now for number two.
In this case we have a file included, the index.php file,
| | 02:53 | it's in the zip but it's not listed in the XML file.
| | 02:56 | So let's see what happens there.
| | 02:57 | If I go to broken2 and I say Open and I say
Upload & Install, it'll tell me that
| | 03:02 | the template installed just fine.
| | 03:04 | Hey! Awesome!
| | 03:06 | So now I'm going to go to
Extensions>Template Manager
| | 03:10 | and I'm going to assign this as my
Default English template for the website.
| | 03:14 | So if I go to kineteco2, which is the
name of that particular template,
| | 03:19 | and I click on this and I'm going to set
this as my Default for English(UK)
| | 03:24 | and I'm going to assign it to my English homepage.
| | 03:27 | You'll see why here in just a moment,
and we'll go ahead and say Save & Close.
| | 03:31 | Now when I come back to the front end of
my website and I hit Refresh, I get this.
| | 03:37 | Well, it's kind of a broken, isn't it?
| | 03:40 | It doesn't look anything like the template that we built.
| | 03:43 | And then down here, here's something that says Error -
The template for this display is not available.
| | 03:47 | Please contact a Site administrator.
| | 03:48 | Don't you love those messages
when you are the Site administrator?
| | 03:51 | Well, what this means is, as I told you,
the index.php was included in the zip,
| | 03:57 | but it was not listed in the XML file.
| | 03:59 | So the template installed and Joomla! thinks
that it's available, but without the index.php,
| | 04:04 | it's not even going to show up
on the front end of your website.
| | 04:08 | So we have a real problem here.
| | 04:10 | That's what's going on in this particular display.
| | 04:12 | All right, back to backend of Joomla!
We're going to need to get rid of this kineteco2 template.
| | 04:17 | So I'm going to go back to my kineteco-English template.
| | 04:20 | I'm going to reset this as my Default template.
and under menu assignment
| | 04:24 | I'm going to reassign my English homepage here,
and then I'm going to say Save & Close.
| | 04:29 | Now I can uninstall the template that I just installed.
| | 04:32 | If I go Extensions>Extension Manager,
I'm going to cover right here on the side to Manage
| | 04:39 | and from your Filter drop-down here,
make sure you pick Template.
| | 04:43 | This'll give you a subset of what is here,
because this is going to show you all
| | 04:47 | of the components, the modules, the plug-ins,
languages, the templates and more
| | 04:51 | that you've installed in Joomla!
You will never be able to find anything.
| | 04:55 | So by filtering this by Template, I can find
my kineteco2 template, put a check by it
| | 04:59 | and say Uninstall. So bye, bye!
Thank Goodness!
| | 05:03 | Okay, let's take a look at the last example.
| | 05:06 | So in broken3, I've listed in the XML file
a file called index.html,
| | 05:13 | but I have not put index.html in the zip.
| | 05:16 | So what's going to happen now?
| | 05:17 | If I go ahead and say Upload & Install,
it's going to give me this error
| | 05:21 | and it's telling me that the File does not exist, index.html.
| | 05:25 | In other words, it's reading the instructions in the XML.
| | 05:27 | It's looking for index.html which is called out in the XML.
| | 05:31 | But it can't find it in the zip file, and so it blows up here.
| | 05:34 | So those are the three common errors that you're
going to run into when trying to install your template.
| | 05:39 | And if you run into any of these errors,
now you know how to fix them.
| | 05:42 | And go ahead and fix your template,
get it installed and I'll show you
| | 05:46 | how to reassign those modules and fix
those broken images in the next video.
| | Collapse this transcript |
| Assigning modules to the correct positions| 00:00 | So, now that you've gotten your template
installed, let's fix some of the issues
| | 00:04 | that are present in that template.
| | 00:07 | If you take a look at the front end of your website
we know that we have a ton of modules that are missing.
| | 00:12 | It's like they're gone, and we also don't have
our images displaying the way that they should.
| | 00:17 | What's going on here?
| | 00:18 | Well, remember that when we were running
the Protostar template it had different module positions
| | 00:23 | than the template that we just installed.
| | 00:24 | What's more, the images that we have
installed here, were installed with a relative path,
| | 00:29 | relative to our Dreamweaver installation
and we're going to need to tweak
| | 00:33 | those to reflect our Joomla! file path
instead of our Dreamweaver file path.
| | 00:38 | So I'm going to show you how
to do both of those things.
| | 00:41 | So here in the backend of Joomla!
let's first of all fix these modules.
| | 00:44 | We're going to go to Extensions>Module Manager,
and I'm going to rotate through
| | 00:48 | all of the modules that are here on the website.
| | 00:50 | So first of all the Footer menu
is in a position of footer and in fact this is
| | 00:55 | one of the only working modules
on the website right now.
| | 00:57 | There it is, there's the Footer module right here.
| | 01:01 | So that one I don't need to change.
| | 01:02 | Search however, if I click on this
I'm going to need to change the position.
| | 01:08 | So right now the position is part
of Protostar in the search position.
| | 01:12 | What I need it to do is switch this to the
Kineteco search position and say Save & Close.
| | 01:18 | The English menu is going to go in a position of nav,
so I'm going to switch
| | 01:24 | that to my Navigation position, Save & Close.
| | 01:28 | Likewise, the Italian menu will go to
that same Navigation position.
| | 01:35 | Main menu, I'm not going to bother with right now.
| | 01:37 | It's unpublished, it's in the wrong position
but it's not a published module,
| | 01:41 | so I'm just going to leave it.
| | 01:42 | Breadcrumbs, I'm going to switch to the
Breadcrumbs position here, Save & Close.
| | 01:49 | And then I'm going to go to Languages Available.
| | 01:53 | So here I'm going to switch this
to the Search position as well.
| | 01:57 | So scroll on up here and find Search.
| | 01:59 | Remember, you can have multiple modules
assigned to the same single position.
| | 02:03 | You don't have to have one position for every module.
| | 02:06 | You can have multiple modules assigned
to the same position.
| | 02:09 | My Log Out button is currently on
the right side of the screen
| | 02:13 | and I'm going to keep it there, but in its new position.
| | 02:19 | My Testimonials are assigned a right position as well,
and I'm going to reassign them to
| | 02:27 | the right side of the Kineteco template.
| | 02:31 | And I think that's everything.
| | 02:33 | The Random Image is already assigned
a position of Random and it is still working,
| | 02:36 | that's this big picture right here.
| | 02:38 | When I hit Refresh I get a different
picture most of the time anyway.
| | 02:42 | And the reason that that is working okay
is because that particular module
| | 02:47 | is included inside of a Joomla! article
and we created that article via the loadposition tag,
| | 02:53 | we learned about this in Joomla! 3 Essential Training
| | 02:55 | and that had a position of Random.
That has not changed in this template.
| | 02:59 | Okay, so now that I've refreshed my page here
you see that my testimonials have
| | 03:04 | showed up here on the right side of the screen.
| | 03:06 | Up here at the top I now have my Search box up
closer to where it should be followed by my languages.
| | 03:12 | I probably want to turn off that title for languages.
I just want the two little flags up there on the top.
| | 03:17 | And then you see the Navigation bar.
| | 03:19 | So the Navigation Bar right now has all of
the sub-navigation up here on the top too.
| | 03:24 | That's because in the Protostar template we
had dropdown menus and those were coded in.
| | 03:28 | Here inside of my Custom template,
I do not have the dropdowns coded just yet.
| | 03:32 | I will be adding those.
| | 03:34 | So don't worry about the fact that we're seeing
the secondary navigation for this right now,
| | 03:39 | I will be fixing that in a later video.
| | 03:41 | Then down here is my Breadcrumb.
I'm not sure why that breadcrumb is showing here.
| | 03:45 | Maybe I didn't quite tweak this module correctly
when I was working with
| | 03:49 | some of the multi-language features.
So I'm going to double-check the positions for that.
| | 03:52 | You can certainly go through and you can
check your other pages now on your site,
| | 03:57 | that is your breadcrumb, and things are
looking good down here in the footer.
| | 04:01 | But let's fix those two problems;
| | 04:02 | the Languages Available and the breadcrumb
showing on the Homepage.
| | 04:05 | I don't want the breadcrumb on the homepage.
| | 04:07 | So I'm going to hop back into the back of Joomla!
and I'm going to go to Breadcrumbs
| | 04:12 | and I'm going to go to my menu Assignment.
| | 04:14 | And so right now this is set to be
On all pages except those that are selected.
| | 04:19 | The only one that's selected right now
is my Main menu and my Footer menu.
| | 04:24 | Well, I want to add my Italian menu Home page
and my English menu Home page.
| | 04:28 | I'm going to say Save & Close.
| | 04:31 | So that will get rid of my breadcrumb
here on my homepage.
| | 04:35 | Now I need to fix this languages issue over here.
| | 04:37 | So I'm going to go back to my Languages
Available option here.
| | 04:44 | I'm going to set the Title to Hide,
and say Save & Close.
| | 04:49 | So the last thing I'd like to try to do here is
I'd like to take these flags
| | 04:54 | and have them appear above the Search box.
| | 04:56 | So I just need to change my module
ordering inside of the backend of Joomla!
| | 05:01 | So here in the backend of Joomla!, if I click
on this little icon over here for Ordering,
| | 05:05 | so that I sort my column here.
| | 05:09 | I see that my Search is on top of the
Languages Available.
| | 05:12 | What I want to do is just click and drag my Languages
Available to appear above Search and let that go.
| | 05:19 | So Languages Available should appear
above Search now.
| | 05:22 | If I go in here and I refresh the page,
now that didn't quite work.
| | 05:27 | This seems to be a little bit buggy in Joomla! 3,
that sometimes this reordering thing isn't quite working.
| | 05:32 | To get around this particular problem,
if I click on Languages Available,
| | 05:37 | this is going to show me that it's ordered second.
| | 05:39 | What I'm going to do is switch this here using
the dropdown switch that to Search
| | 05:43 | and say Save & Close.
And in theory nothing has changed here.
| | 05:49 | But if I Refresh here, now they did it in fact reorder.
| | 05:53 | So sometimes that ordering can be a little bit
buggy here inside of the backend of Joomla!
| | 05:57 | But now I've got these in the basic order that I want.
| | 06:01 | I want the flags followed by the Search box.
| | 06:03 | Okay, in the next video I'll show you
how to fix those images.
| | Collapse this transcript |
| Fixing image paths| 00:00 | The last big broken thing I need to fix
before I can start styling my website is
| | 00:05 | I need to get these images fixed.
| | 00:07 | Right now the images here on the home
page of the website, I've got my alt text displaying,
| | 00:11 | but I don't have the image that's supposed to
be up here in the upper left corner.
| | 00:14 | And down here on the bottom over
here where it says kinetECO, Inc.,
| | 00:18 | I was supposed to have an image over here as
well and that's not displaying on the page.
| | 00:22 | So it's time for me to work on those particular issues.
| | 00:25 | So to do that, in the backend of Joomla!,
I'm going to go to Extensions>Template Manager.
| | 00:33 | Here inside of the Template Manager
you'll notice this column here called Template.
| | 00:38 | These are links to the HTML and the CSS side
of all these templates.
| | 00:43 | Now we have made copies of this stuff
before we've made these styles,
| | 00:48 | but styles are simply instances of the templates
that just have different parameters associated with them.
| | 00:54 | Like this template is associated with the language of all.
| | 00:56 | This one is associated with the English homepage.
| | 00:58 | This one is associated with the Italian homepage.
| | 01:01 | But all of the HTML and CSS behind all three
of those template styles is exactly the same.
| | 01:07 | And the way you get to it,
you can either go over here to Templates,
| | 01:12 | find your template in the list and edit from there
or you can click right here, right on these links,
| | 01:18 | where are the names of the templates.
| | 01:20 | So I'm going to click on the name of
the template for Kineteco.
| | 01:23 | Here you'll see we have our template thumbnail.
| | 01:25 | If we click on that we have the full version
of the web page what we we're building.
| | 01:30 | We have the ability to edit the main page template,
that's our index.php, or edit our CSS file.
| | 01:37 | So I'm going to click on Edit the main page template
| | 01:41 | This will give me a little window here for editing my HTML.
| | 01:44 | What I'm going to do is I'm going to scroll on down here
to where I have my images located here.
| | 01:50 | And it's just this images/logo.png,
that is the wrong path to my logo.
| | 01:56 | It's a little bit more in depth than that.
| | 01:58 | So what we need to add in front of this
is templates/kineteco/images/logo.png,
| | 02:08 | that is the correct path to our image.
| | 02:11 | So if we go ahead and hit the Save button here
and I refresh the front-end of my website,
| | 02:16 | now I have my image showing up here
and it's present, which is great.
| | 02:21 | So let's apply that same fix down
here at the bottom of the screen.
| | 02:24 | So if we scroll on down here to the bottom,
| | 02:27 | a lot of returns here.
I'm going to clean that up here real quick.
| | 02:31 | Then we have down here my images/footerlogo.
| | 02:35 | The correct path should be templates/kineteco/images.
| | 02:41 | Now remember where that Kineteco in
here is coming from, templates/kineteco,
| | 02:46 | that is coming from your XML file in line 4
where we specified the name of your template.
| | 02:51 | Remember I told you that would also create the folder
where that template is stored inside of Joomla!
| | 02:55 | So we're going to our templates folder.
| | 02:57 | Once we're in the templates folder,
we're looking for kineteco,
| | 03:00 | which was the name of this particular template.
| | 03:02 | If you called it something else it will
be by that other name.
| | 03:05 | And then /images that will be the images folder
inside of that and then look for that particular image.
| | 03:10 | Go ahead and say Save & Close and when
you refresh the front end of the website
| | 03:15 | you will see down here at the bottom
of the screen our Kineteco footer image.
| | 03:19 | So now finally at this point in time
we have a Joomla! website.
| | 03:25 | We have all of the content in place
for this Joomla! website.
| | 03:28 | We've assigned all the modules
to the correct positions
| | 03:31 | and we've made sure that any images
that are built into this template
| | 03:35 | are now set to display here
on the front end of the website.
| | 03:38 | What's left to do?
Well, tons and tons of styling.
| | 03:42 | I'm going to be covering that in the next chapter.
| | Collapse this transcript |
|
|
5. Working with CSS, index.php, and Joomla!Using the Firefox Web Developer Toolbar| 00:00 | Before I go onto talking about all of the CSS styling
we're going to add to this template
| | 00:05 | to make it look the way it should,
it's helpful to have your web browser
| | 00:08 | configured with the tools that are going
to make this process easier for you.
| | 00:12 | Now you've probably noticed that in
Joomla! 3 Essential Training, as well as here
| | 00:16 | with the Responsive Templates course,
I use Firefox extensively. And why is that?
| | 00:21 | Well, I've always worked with Firefox.
I've always been very happy with it.
| | 00:25 | I've been happy with its development tools.
| | 00:26 | I know that a lot of people these days are
having issues and problems working with Firefox.
| | 00:30 | And a lot of people have switched to Chrome
at this point.
| | 00:34 | There's absolutely nothing wrong with Chrome.
| | 00:36 | I use Chrome as well but Firefox just sort of seems
like where I wind up as ofmy browser of choice.
| | 00:40 | I would encourage you to pick one of
these two browsers, either Firefox or Chrome,
| | 00:45 | as your development browser of choice.
| | 00:46 | Basically the process that we're going to do is
we're going to work on styling inside of Firefox first.
| | 00:52 | Then we can cross browser test
for all of the other browsers.
| | 00:55 | But if it's working in Firefox first
then we can test to make sure it's working
| | 00:59 | in Chrome, in Internet Explorer, in Safari and so forth.
| | 01:03 | That's pretty much a good methodology for developing
a custom design no matter whether it's Joomla!
| | 01:08 | or some other CMS or just a static website
that you happen to be working with.
| | 01:13 | So since I've chosen Firefox as my
primary development browser,
| | 01:16 | I'm going to add a few extensions to it at this point.
| | 01:18 | These extensions are free and they're
available in Chrome formats as well.
| | 01:22 | So if you like what I'm doing here with Firefox,
you can take the same extension
| | 01:26 | and you can install it on Chrome and get
plenty of use out of it as well,
| | 01:31 | if you prefer to work in Chrome instead of Firefox.
| | 01:33 | So I'm going to start here with the
Web Developer Toolbar which is a utility
| | 01:37 | I've been using from many years at this point.
| | 01:39 | It's developed by this great
developer here Chris Pederick.
| | 01:42 | And if you come to his website you can download
a version of this Web Developer Toolbar
| | 01:45 | for either Firefox or Chrome.
| | 01:48 | So here on his website if you scroll on down
the page here, you'll find links
| | 01:53 | down here to download this for Chrome or for Firefox.
| | 01:56 | So I'm going to go ahead and click
on the Download For Firefox link.
| | 02:00 | This is going to pop me on over to the
Mozilla website where I can say Add to Firefox.
| | 02:06 | I'm going to go ahead and hit the
Install Now button, and it's going to tell
| | 02:13 | me it will be installed after I restart Firefox.
| | 02:15 | So I'm going to go ahead and
tell the Firefox to restart now.
| | 02:17 | What you'll notice is that I have
now a toolbar that goes across the top
| | 02:21 | of my screen here; and there's a number
of options on here that I'm going to
| | 02:24 | make use of in the course. I'll just give you
a quick overview of some of those right now.
| | 02:28 | First of all over here on the left side
of the screen is a button for CSS.
| | 02:32 | One of the most helpful things
that I find working with CSS is here.
| | 02:37 | If I say Edit CSS, this is going to
give me a copy of my style sheet down here
| | 02:42 | at the bottom of the screen.
| | 02:44 | If I click this little Grid icon
and I say move this to the left.
| | 02:49 | This will put my Web Developer
Toolbar here on the left side of the screen,
| | 02:51 | that's normally where I like to work with it.
| | 02:54 | And it will show me all of the style
sheets that I have currently on this website.
| | 02:59 | I can just click on through them here
and as well as my Embedded Styles.
| | 03:02 | What's more I can edit this things right
here inside of this editing window.
| | 03:06 | And by editing them here, I can see the
effect immediately right here on the website.
| | 03:10 | So for example, if I add body, and I
say background-color of red,
| | 03:18 | I've just turned Chris Pederick's website to have
this incredibly bright red background color.
| | 03:22 | And that's because I can work in my CSS
right here and immediately see how that
| | 03:27 | CSS is going to affect my website in
Firefox, not in Dreamweaver where you can
| | 03:31 | sort of believe what Dreamweaver is showing you
but in Firefox.
| | 03:34 | This is the way it's really going to look.
| | 03:36 | So that's an incredibly helpful tool,
the Web Developer toolbar.
| | 03:39 | Something else that I've found very helpful here
under the Miscellaneous tab, are the Line Guides.
| | 03:45 | This will give me some lines on the page
like the ones that you work with in Photoshop.
| | 03:49 | So if I want to see if things are
lining up here on my page, I can drag a grid
| | 03:53 | on over and then look for alignment wherever it
is that I need alignment on my page,
| | 03:57 | both horizontally here and vertically.
| | 04:01 | I can add additional grid lines by clicking on
Adding Horizontal or Adding Vertical Line Guides.
| | 04:06 | So that's another very helpful feature.
| | 04:10 | Displaying the Ruler has also been helpful
if I need to know how big something is,
| | 04:14 | like how big is this button here.
| | 04:16 | Well I can use this little grid,
just by clicking and dragging.
| | 04:21 | I can grab my grid and I can measure
something right here on my web page.
| | 04:28 | So that button is 88 pixels wide and 23 pixels high,
which I see up here at the top of the page.
| | 04:34 | So this is an incredibly useful tool
for measuring things on the website,
| | 04:38 | so that you know the pixel dimensions of
something that you may need to replicate,
| | 04:42 | you can just measure right here on the page.
That's a tool I use quite frequently.
| | 04:46 | And then finally one of the additional tools here
that's really helpful in the latest version
| | 04:50 | of the Web Developer Toolbar is under Resize.
| | 04:53 | I can View my Responsive Layouts, so if
I check this, this is going to give me a
| | 04:59 | portrait of what this website looks like on mobile.
| | 05:01 | Here's the mobile version of that website,
Mobile landscape so a phone turned longwise.
| | 05:05 | So here's the way that website looks now.
| | 05:08 | The small tablet portrait, a large tablet
or a small tablet landscape, a tablet portrait,
| | 05:17 | a tablet landscape, this will show me various
mobile versions of how my web page is looking.
| | 05:22 | And very quickly and at a glance it's
just generates these layouts for me.
| | 05:26 | So that's incredibly helpful as we
work on a responsive website.
| | 05:30 | That's a button that we're going to be using a lot.
| | 05:32 | Now I just hit a few of the high points here.
| | 05:35 | Viewing the Source is something
that I use frequently to take a look at my HTML.
| | 05:39 | And there are many many
other features that are here.
| | 05:41 | You can go directly to your Validator to validate
your HTML, your CSS even look at Section 508.
| | 05:47 | You can outline some of the elements on the web page.
| | 05:50 | So if for example we needed to let's say
outline all of my Block Level Elements,
| | 05:56 | this will draw boxes around all those and show me
where the Block Level Elements are
| | 06:00 | versus the Inline elements on my web page.
| | 06:02 | There is a ton of tools here.
They're all incredibly helpful.
| | 06:06 | I encourage you to download the Web Developer
Toolbar and click around a little bit.
| | 06:10 | You're going to find all kinds of great things
buried inside of this website.
| | Collapse this transcript |
| Using Firebug| 00:00 | So in the previous video, I've mentioned the
Web Developer Toolbar,
| | 00:03 | which was one of the first tools out there that lets
you work with HTML and CSS on the web page.
| | 00:08 | But certainly now the most famous by far is Firebug.
I know a lot of people who can't survive
| | 00:13 | without their copy of Firebug anymore.
| | 00:15 | And Firebug is another one that's available for Firefox
as well as I believe there's a Chrome version of this.
| | 00:22 | Of course, Chrome comes with its own web developer
toolbars that are very similar to Firebug.
| | 00:26 | And in fact Internet Explorer at this point also
| | 00:28 | has something that's kind of similar to this.
| | 00:30 | But Firebug is an incredibly useful tool,
particularly as you're trying to track down issues
| | 00:36 | with styling and you've got so many
stylesheets now with Bootstrap and so forth.
| | 00:40 | So we are going to find this to be a very helpful tool
in the process of putting layout of this website.
| | 00:45 | So I'm going to click on this button up here
about Installing Firebug.
| | 00:49 | And this will go ahead and Install Firebug for me.
| | 00:56 | I'm going to download and install
the most recent version here.
| | 00:59 | So I'm just going to click on my Download button
| | 01:02 | and Add to Firefox
and then once my button comes in I'll say Install Now.
| | 01:09 | Interestingly, I don't need to reboot my browser here.
| | 01:11 | I've got Firebug, it's available for me already.
| | 01:14 | If I click on this, this is going to show me
my web page here right now.
| | 01:18 | So I'm looking at the HTML that makes up
this web page here, the Mozilla page.
| | 01:23 | If I roll my mouse server various parts
of the HTML it'll show me where I am.
| | 01:27 | So I'm here on the body tag right now.
| | 01:29 | If I open that up, I've got a div within id
of page div with a div with an id of footer.
| | 01:35 | It's probably off the screen.
| | 01:36 | So if I look inside of my div within id of page,
I have a div within id have global header,
| | 01:39 | a div with a class of amo-header.
| | 01:42 | If I look at consider that I have that navigation bar
look at that I can identify
| | 01:47 | my navigation bar and here's my unordered list
and the li that makes up that unordered list
| | 01:54 | and inside that there is another link.
| | 01:57 | Then I could click on that and then over here
on the side I can see all of the CSS
| | 02:02 | that's going to pertain to this particular link
right here up inside of my Firebug page.
| | 02:11 | As I scroll on down the list here I can see all
the styles, which styles have been counteracted
| | 02:15 | by other styles overriding them, and so forth.
| | 02:19 | So this feature here inside a Firebug is very,
very helpful as well.
| | 02:23 | Firebug is another one of these tools that's very deep.
| | 02:25 | There's a lot here that you can take a look at.
There's a lot that you can cover.
| | 02:29 | Do download Firebug, take a look at
its features and functionality.
| | 02:32 | You're going to find it really helpful as you work on
your Joomla! website to have this tool available to you.
| | 02:37 | When you're ready to get rid of Firebug,
if you click on this button here
| | 02:41 | in the far right-hand corner
that will make that editing window go away
| | 02:45 | and you can move on to looking
at other pages on your website.
| | Collapse this transcript |
| Using ColorZilla| 00:00 | A third extension that I find incredibly
helpful for Firefox, which is also available for Chrome,
| | 00:05 | is ColorZilla and this is the colorzilla.com
| | 00:08 | where you can read about the ColorZilla extension.
| | 00:12 | What I'm going to do is I'm going to
go to ColorZilla for Firefox and Chrome.
| | 00:15 | I'm going to go ahead and click on this.
| | 00:17 | This is going to tell us about
what ColorZilla is available to do.
| | 00:21 | Basically, if you think about your Eyedropper tool
that comes in Fireworks or it comes it Photoshop.
| | 00:27 | The Eyedropper tool will let you pick out a certain
color on your web page.
| | 00:31 | In the old days before we had these Eyedropper tools
for our browser, we would have to take an image
| | 00:37 | or screenshot of our web page and then
put it into Photoshop or Fireworks
| | 00:41 | and then we would have to sample
with the Eyedropper to find out the color code,
| | 00:45 | the hexadecimal code, and then we could
put it into our web page.
| | 00:48 | Well, what ColorZilla does it gives you
this Eyedropper tool and you can sample the color
| | 00:54 | right here inside of your web page
to get that hexadecimal code.
| | 00:58 | Then you can just go right on with your coding.
| | 01:00 | That way you can save all that time of opening up
another application so you can figure out
| | 01:04 | what color you're looking at.
| | 01:06 | I'm going to go ahead and Install ColorZilla 2.8.
It disallowed it, so I'm going to Allow it.
| | 01:11 | There we go and then I'm going to Install Now
and I'm going to Restart Firefox.
| | 01:20 | There we go. So ColorZilla is now Installed.
| | 01:22 | The way that I would use ColorZilla would be
I would right-click on my web page
| | 01:27 | and ColorZilla will be here in my Contextual menu.
| | 01:31 | If you're a Mac use a Cmd+Click
and I can pick my Color Picker from here.
| | 01:36 | So, gosh, it looks just like Photoshop, doesn't it?
| | 01:39 | What I can do now is I can use my Eyedropper here.
| | 01:43 | I can select another color here right from
my Color palette, so that's a very helpful thing.
| | 01:48 | The other thing I can do is I can say Eyedropper
and let's say I want this color here.
| | 01:55 | Notice the bar that shows up at the top of the screen.
| | 01:57 | This tells me exactly what shade of green that is,
both in RGB values as well as
| | 02:02 | in my hexadecimal color value there.
| | 02:04 | If I click that, I've copied it to the clipboard.
| | 02:07 | That hexadecimal color.
| | 02:09 | I could now go to my code and paste
that color right into the web page.
| | 02:13 | Incredibly helpful, saves so much time.
| | 02:15 | So ColorZilla is something else that you're
going to find really helpful for working with.
| | 02:20 | It can also generate color palettes
based on a certain website.
| | 02:23 | There is a gradient generator.
You might have seen an allusion to here.
| | 02:26 | There's much, much more about ColorZilla
that I can cover in a single video.
| | 02:30 | But again this is one of those tools
that I find absolutely indispensable
| | 02:34 | when developing inside of my Firefox web browser
and when working with Joomla!
| | 02:39 | So go check this out and see what you think about it.
| | Collapse this transcript |
| Dreamweaver CS6 and Joomla!: Setup| 00:00 | One of the features in Dreamweaver CS6 is the ability
to integrate a content management system
| | 00:07 | and run that through Dreamweaver so that
you can edit some of the files associated with
| | 00:11 | your content management system based website.
| | 00:14 | Dreamweaver has focused on integrating
this with Word Press, Joomla!, and Drupal.
| | 00:19 | I wanted to show how specifically
this would work with Joomla!.
| | 00:22 | Now Dreamweaver is designed to work
with a Joomla! website,
| | 00:26 | whether that website is on an external hosted
location, some sort of web server somewhere,
| | 00:31 | or it can be integrated to use with WAMP or
MAMP, the computer that's there in front of you.
| | 00:36 | I am going to walk you through how to integrate it
with the computer that's sitting in front of you,
| | 00:40 | assuming that you're running WAMP or MAMP
| | 00:42 | and integrating it with a computer
that might be running in your web host somewhere
| | 00:47 | is relatively straightforward
more or less the same kind of process.
| | 00:51 | The advantage of running Joomla! through
Dreamweaver is that you have a really nice interface
| | 00:56 | in particular for editing your index.php file
that's associated with your template
| | 01:01 | as well as editing any CSS that's involved.
| | 01:05 | If you're a JavaScript wiz and you have
written out some custom JavaScript,
| | 01:08 | you can certainly use this interface
for editing that as well.
| | 01:11 | But the think that you should remember
with Joomla! is that there are thousands
| | 01:14 | and thousands of files that are available.
Just because those styles are available
| | 01:17 | doesn't mean you want to able to edit all of them.
| | 01:20 | I'm pleased to say that Dreamweaver CS6
has come a bit further from CS5,
| | 01:25 | I believe, was the last time I used this feature
with Dreamweaver.
| | 01:29 | Before, it would show us hundreds of files
that were associated with your Dreamweaver template.
| | 01:33 | Now it's really boiled those files down to
just some critical ones you'll need to edit.
| | 01:37 | Mostly CSS and JavaScript files.
| | 01:40 | So it's a little bit easier to use than it was
in previous versions of Dreamweaver.
| | 01:43 | So let me walk you through this process now.
| | 01:45 | The first thing as always anytime you're working in
Dreamweaver it's a good idea to establish a site.
| | 01:51 | So we are going to make
a new site here in Dreamweaver.
| | 01:53 | Site>New Site and I am going to give this a name.
| | 01:57 | I am going to call this joomla dreamweaver integration.
So I know what it is.
| | 02:03 | My Local Site Folder will be on my computer
on my C-drive, inside of WAMP, inside of www,
| | 02:12 | and that will become my Local Site Folder.
| | 02:14 | Mac people you can click on the Folder icon,
go to your Applications, find MAMP,
| | 02:19 | and inside of MAMP find the HTTP docs folder,
and that will be your Local Site Folder.
| | 02:23 | Normally when I am working with Dreamweaver, this
is as far as I ever get and I say Save and I move on,
| | 02:28 | but we are going to need to work with the server
integration features here inside of Joomla!
| | 02:34 | If we go Servers now on this particular
screen as you see this is a place
| | 02:39 | where you can integrate Dreamweaver
with as I say here one of your web hosts.
| | 02:44 | I am going to go ahead and click the + down here
on the bottom, which will add a new server
| | 02:48 | and I'm going to give this a name
and I am just going to say WAMP.
| | 02:53 | Of course, Mac people you can call it MAMP.
How do you want to connect to that server?
| | 02:57 | Well, if I would have this server around on
a web host somewhere, I might use FTP or SFTP,
| | 03:03 | but this is on my same computer.
So I am simply going to pick Local/Network.
| | 03:08 | It's going to ask me for the Server Folder.
That is exactly the same.
| | 03:12 | It's still www for WAMP people
or HT docs for MAMP people.
| | 03:16 | Go ahead and say Select.
| | 03:17 | Then the last part is the web URL.
That will be localhost for PC people,
| | 03:23 | and for Mac people it's likely localhost:8888.
| | 03:28 | Once you have this screen filled out,
switch over to the Advanced tab.
| | 03:32 | The last thing you're going to do here is to
make sure that your Server model is set to PHP MySQL.
| | 03:39 | Then go ahead and say Save and then say Save again.
| | 03:45 | You will get this screen here where Dreamweaver
is updating the website cache.
| | 03:49 | It may take quite a while for that process to happen.
So just be patient.
| | 03:53 | Then you'll see over here on the side that all of
the local files have loaded here for Dreamweaver.
| | 03:59 | That's your entire Joomla! file structure
that's running locally on your computer.
| | 04:04 | Now if you scroll on down this list
what I want you to do is to find index.php
| | 04:09 | that's in the root of the website. This index.php.
| | 04:13 | Not the templates, kinetECO index.php that we
have been working with so much in this course.
| | 04:20 | This in an index.php that we
have never ever touched before.
| | 04:24 | It's one of Joomla!'s core files.
| | 04:26 | It's one of the files that's subject to being updated
when Joomla! moves from one version to another.
| | 04:32 | Any kind of code that you add to index.php
is likely to be overwritten when Joomla! is upgraded.
| | 04:39 | Yes, this is exactly the file that we are going
to load here inside of Dreamweaver,
| | 04:43 | one that you should never touch
and you should never edit.
| | 04:46 | So when I double-click on this what I'm going to see
in this particular index.php.
| | 04:53 | You know that this is not an index.php
that you want to edit, all of you front end people,
| | 04:58 | because if you scroll on down through this file
| | 05:01 | it's actually relatively short, and it's all PHP and it's
calling in a bunch of stuff to generate a Joomla! page.
| | 05:09 | Now remember the template is just part of Joomla! itself.
| | 05:13 | When Joomla! generates a page,
it's going to call in the template,
| | 05:16 | it's going to call in all the modules,
it's going to call in all of the components
| | 05:19 | that make up that page, any other additional
functionality and then it rolls it altogether
| | 05:24 | and displays in your web browser.
| | 05:26 | This particular root level index.php file is
instrumental to making all of that happen.
| | 05:31 | So this file is not what we are going to edit, but this
file is very useful for our working with Dreamweaver.
| | 05:37 | So what I'm going to do here is I am going
to click my button up here on the top.
| | 05:42 | It says dynamically related files cannot
be discovered, because a testing server is not defined.
| | 05:47 | If you have not set up your Dreamweaver site correctly
it will give you this a little error up here on the top.
| | 05:52 | And if you click the button to set up, it will actually
helpfully mark off for you exactly where your error occurred.
| | 05:59 | The step that I forgot was here where my testing server
is defined I have checked off the remote box here.
| | 06:05 | I also need to check off the testing box here
as well and then say Save.
| | 06:09 | Once that is done I will get a different message
up here at the top of page that says
| | 06:12 | this page may have dynamically related files
that can only be discovered by the server.
| | 06:17 | Shall it discover them for you?
Why, yes, Dreamweaver that sounds lovely.
| | 06:20 | I am going to hit the Discover button.
It'll give me this warning. I'll say Yes.
| | 06:25 | It will look through my site and, as you
can see here across the top of the page,
| | 06:30 | I have a number of files that are listed on here
on the top of the page.
| | 06:35 | All of these files are CSS files and JavaScript files.
| | 06:40 | Now if I switch over to Design View,
initially I'm going to see nothing at all,
| | 06:44 | because there's nothing to display associated
with this index.php file by itself.
| | 06:50 | But if I hit the Live button that's next to it
what will happen is I will see my website
| | 06:56 | as it currently exists right here inside of Dreamweaver.
| | 07:00 | You can now see exactly the way that website looks.
| | 07:04 | This is the way that you configure Dreamweaver
to work with Joomla! to set up an editing environment.
| | 07:11 | In next video I'll show you how you can
| | 07:14 | refine your settings here to make this an area
where you can continue to work
| | 07:18 | particularly as you start to set up CSS for this website.
| | Collapse this transcript |
| Dreamweaver CS6 and Joomla!: Workflows| 00:01 | So the last time that I filmed this video
and I worked with Dreamweaver CS 5,
| | 00:05 | one of issues that we had working with
Joomla! inside of Dreamweaver was that
| | 00:09 | we had 140 odd files that would show up
here in this list across the top of page,
| | 00:16 | including 25 variations of index.php and
a whole bunch of other things that loaded.
| | 00:21 | That's just reflecting the nature of Joomla!
| | 00:23 | Joomla! itself is built over several
little files that are located all over the
| | 00:27 | file structure, that are brought
together within this root level index.php file
| | 00:32 | among other places and that are put
together to display on your website.
| | 00:36 | Dreamweaver is simply reflecting all of
the little bits and pieces required to
| | 00:40 | put together a Joomla! web page.
| | 00:41 | In this latest version of Dreamweaver
CS6 it's doing a little bit more filtering
| | 00:46 | for us default which is a really good thing,
because you don't want to be
| | 00:50 | editing just any file inside of Joomla!.
| | 00:52 | Joomla! is built so that it has a bunch of core level
files that you should never ever touch.
| | 00:58 | There are ways of working with these
core level files that if there is code
| | 01:01 | there you need to change,
there are ways of doing that.
| | 01:04 | So we take look at my template overrides
and my layout overrides videos
| | 01:08 | and I'll walk you through how you can change
things inside of Joomla! if you need to.
| | 01:13 | In terms of its functionality you can always write
another extension or edit the extensions that are there.
| | 01:18 | Take a look at Joe LeBlanc's video on
editing extensions with Joomla! 1.7 and 2.5.
| | 01:24 | The next thing then is what can I edit safely
here inside of Joomla! using Dreamweaver?
| | 01:31 | The answer that question is it needs to
be in your templates folder.
| | 01:35 | That is what you can edit.
| | 01:37 | Of course, what's in your templates folder,
what are actually the files that are relevant to you?
| | 01:40 | Well, over here under kineteco these
are the files that are relevant to you.
| | 01:46 | The CSS, the images files and any of
the files that appear here,
| | 01:50 | even these JavaScript files that you
see here listed across the top.
| | 01:53 | These are part of Joomla!'s core and if
you want to override them you can always
| | 01:58 | put them into your Joomla! templates
folder and work with the JavaScript there
| | 02:01 | and make whatever alterations
or additions that you need.
| | 02:04 | Don't edit the core files inside of Joomla!
| | 02:07 | To get to the files that you can actually edit
there is a filter feature here inside of Dreamweaver.
| | 02:14 | By default it's showing you the
CSS files and the JavaScript files.
| | 02:18 | You can turn off the JavaScript.
| | 02:20 | That will cut you down to just your
CSS files which is a wonderful thing.
| | 02:24 | You can actually filter this even more.
| | 02:26 | There is a custom filter setting
so you could come up with some sort of file
| | 02:31 | name convention that would only show the file names
that you wanted to see using this filtering capability.
| | 02:37 | So that exists here for you.
| | 02:38 | The way I am going to work with this template
and with these files here going forward.
| | 02:44 | In my previous Joomla! Creating and Editing
Custom Templates video, I've always worked in Firefox
| | 02:48 | and I've it always worked using the Web Developer
Toolbar and editing CSS on the side of the page.
| | 02:54 | The disadvantage to doing this is that
it's very hard to see what code I'm typing.
| | 02:59 | So this time around in this course
I'm actually going to be using this
| | 03:02 | Dreamweaver interface to edit my index.php file,
the one associate with the template,
| | 03:08 | not the core index.php file that I'm not supposed to edit
| | 03:12 | and I'm going to be editing the stylesheets
that are here inside of Joomla! as well.
| | 03:16 | What I'm going show you is how I'm going
to set up that editing environment now.
| | 03:21 | So here inside of my kineteco folder, which is inside
of templates you'll find the index.php file.
| | 03:29 | By the way should mention if you are working
with Dreamweaver and you don't see
| | 03:33 | this Files panel over here on the side,
you can always get it by going to
| | 03:36 | Window>Files and that panel will show up
over here on the side of the screen.
| | 03:42 | Double-click on index.php. This is your template file.
| | 03:47 | See, the code should look familiar to you at some level.
| | 03:50 | This is going to be the page that I'm going to edit.
| | 03:53 | Now the disadvantage is that I've got an
index.php that's open in here
| | 03:57 | and now I have an index.php that's open here.
| | 03:59 | But in the end this index.php is really
just showing me what the web page is looking like,
| | 04:03 | and it's questionable how valuable that is in.
| | 04:07 | Of course, this is through Dreamweaver's
editing screen which you can
| | 04:11 | never really trust for how something
is good look in the web browser.
| | 04:14 | Remember, the only way that you know how
something is going to look in a web browser
| | 04:17 | is by looking at it in a web browser.
| | 04:19 | So open it up Firefox, open it up Chrome, open it up
in Safari or Internet Explorer if you want to see that.
| | 04:25 | This is helpful as a quick peek to see what's going on,
but I am certainly not going to rely on it,
| | 04:29 | but my index.php associated with my template
| | 04:33 | this is valuable for editing any code here
that I need to edit and I'm also going to
| | 04:37 | make sure that I open up my custom CSS file.
| | 04:40 | I'm going to have that open in a tab as well.
| | 04:41 | Now this will give me some nice big text
so that you can see it in the video
| | 04:45 | what I'm typing and what order I'm typing it in.
| | 04:48 | Then we can put this in a web browser
and view it from here.
| | 04:50 | So Dreamweaver can be helpful as a tool for editing
your Joomla! websites as long as you use it correctly.
| | 04:58 | Don't edit any of the core files.
| | 04:59 | Any of the files that you edit should be
located inside of your templates folder.
| | 05:03 | Make sure your editing the right index.php.
| | 05:06 | The one that's in your templates folder,
not the one that's in the root of the website.
| | 05:10 | Feel free to edit any CSS, JavaScript,
or the index.php that's in those templates folders.
| | 05:16 | Just don't edit anything else from your Joomla! website
if you're choosing to use Dreamweaver in this way.
| | Collapse this transcript |
|
|
6. Styling Your Joomla! Template for the DesktopCSS workflows| 00:00 | Before I get started talking about
all of the custom styling that we'll be
| | 00:04 | doing to this particular Joomla! website
I wanted to mention to you a couple of
| | 00:09 | workflows that you can use for our
working with CSS inside of Joomla!
| | 00:13 | I will be using Dreamweaver.
| | 00:15 | In the previous two videos I just
integrated Dreamweaver and Joomla!
| | 00:19 | The reason I've chosen Dreamweaver for
editing my Joomla! files is because first
| | 00:24 | of all I can blow the code up really
big so that you can see it on video.
| | 00:28 | That's probably not a consideration that
you have for building your Joomla! website.
| | 00:32 | But second of all Dreamweaver is
just a great editing environment.
| | 00:35 | It's got great code coloring.
| | 00:37 | I can easily see what I'm doing and
I've worked with Dreamweaver for years.
| | 00:40 | So I'm very comfortable with it.
| | 00:42 | However, I've often said that if I was
coming into this industry now without
| | 00:46 | many years of experience I might not really
be using Dreamweaver as one of my core tools.
| | 00:50 | Particularly working in an open-source
environment and I know that many of you
| | 00:54 | like open-source software have a very
strong commitment to using open-source
| | 00:57 | software in all aspects of your life.
| | 00:59 | So I wanted you to be sure to mention
that just because I'm using Dreamweaver
| | 01:03 | certainly does not mean that
you need to use Dreamweaver.
| | 01:05 | There are many other ways that
you can edit CSS inside of Joomla!
| | 01:09 | Let me just show you a few of those ways.
| | 01:12 | First of all, of course, inside of the backend of Joomla!
there is an editor for editing your CSS.
| | 01:17 | If you go to Extensions>Template Manager,
and you just find your template here in the list.
| | 01:25 | Here's the kineteco template.
| | 01:26 | If I click on kineteco here, this will
put me into the interface where I can
| | 01:30 | edit either my index.php, which is what's
meant here by edit my main page
| | 01:35 | template or edit my CSScustom.CSS.
| | 01:39 | I can click on either of these and I am
able to get here to my stylesheet and
| | 01:45 | I can go ahead and type my styles on in here.
So I could say body background-color: red and close that.
| | 01:55 | If I say Save now of course every time
I'll make a change to the stylesheet and
| | 02:00 | anytime I type something in here I have to save.
| | 02:03 | Then when I come to the front end to
the website and I hit refresh,
| | 02:06 | I can see what the effect was on that
particular web page right away.
| | 02:10 | As you notice I actually had no
effect there from that stylesheet.
| | 02:13 | The problem that's going on right now
is we currently have a bad path to the
| | 02:17 | stylesheet inside of the backend of Joomla!.
| | 02:20 | When we set up our index.php page
we set it up with a relative path
| | 02:26 | going to the stylesheet inside of Joomla!.
| | 02:27 | It's the same thing that we did with the images,
but we fixed the path to the images now.
| | 02:31 | We've not fixed the path to the stylesheet and I'm
going to show you how to do that in the next video.
| | 02:35 | But in any case once you're path to your stylesheet
is fixed when you come in here and you refresh the page,
| | 02:39 | you would be able to see any changes
that you're making to that particular stylesheet.
| | 02:44 | You'll have to be typing right here
in the backend of Joomla!
| | 02:45 | So this is one methodology that you can follow.
| | 02:49 | If you don't like that and it is a little bit awkward,
you might prefer something that I've done for years,
| | 02:55 | which is, from the front end of my website
I use the Web Developer Toolbar.
| | 02:59 | So if you CSS>Edit CSS, you can see
all of your stylesheets right here.
| | 03:05 | You can look at those styles, you can make changes
to those styles whatever it is that you want to do.
| | 03:10 | Of course, remember that some of these
stylesheets you should not be editing,
| | 03:14 | but it's going to show you every
stylesheet associated with this page.
| | 03:18 | You can look at these and
make whatever changes you want.
| | 03:21 | For example, this is the call to be
Ubuntu stylesheet that we made that's going
| | 03:24 | out to Google to pick up the Ubuntu font.
| | 03:27 | We could go ahead and we could
make changes to these styles.
| | 03:31 | Once you've made changes to your
styles here, you're going have to copy and
| | 03:34 | paste that back in to Joomla! Because
when you use the Web Developer Toolbar here
| | 03:39 | and the CSS editing window, you're
editing your local copy of this web page only.
| | 03:44 | You are not making changes to the
stylesheet in the backend of Joomla!
| | 03:48 | So the moment that you close this window, any
changes that you have made your CSS go away.
| | 03:55 | You'll have to make sure that you
copy the changes that you've made from
| | 03:59 | your Web Developer Toolbar and then go to the backend
of Joomla! and paste them into the stylesheet.
| | 04:04 | So this is another legitimate workflow
and like I said I've used this workflow for years,
| | 04:07 | I find it great when working on a web server.
| | 04:10 | But the disadvantage for me is that I don't think
anybody will be able to read what I'm typing.
| | 04:15 | Another way that you could do this is
with some sort of third-party editor.
| | 04:18 | Here is Notepad++ which is one of these
editors that's free that tons and tons
| | 04:24 | of people love to use on a PC.
| | 04:25 | If you're a Mac person, BBEdit is always
a tool that comes up frequently, and of course
| | 04:30 | there's obviously tons and tons of these editors out there.
| | 04:34 | If you go to File>Open, you're going to
need to find your Joomla! Installation.
| | 04:39 | So on my PC that's under C, under WAMP, under www.
| | 04:44 | Mac people, you would go to your Applications,
go to MAMP, go to the htdocs folders, and then you're
| | 04:50 | going to find your templates folder, and you're going
to find your kineteco folder and you're going
| | 04:56 | to find CSS and you open up custom CSS
and I could continue to edit my stylesheet here.
| | 05:03 | For example, I've made my body background
color red and I could make the text
| | 05:08 | color here yellow for something truly hideous.
| | 05:14 | If I said File>Save that would actually
take effect on my website right away and
| | 05:20 | the reason I know that is because if I
come to my backend of Joomla!
| | 05:23 | and I edit my stylesheet again, you see that
| | 05:26 | that style that I just typed in with Notepad++
is reflected right here inside of Joomla!
| | 05:31 | So there is no copying and pasting
to the backend of Joomla!
| | 05:34 | I can just make those edits in Notepad++
and Save and they show up right here.
| | 05:39 | So whatever workflow you decide
works well for you with CSS.
| | 05:43 | That is just great.
| | 05:44 | You do not have to go out and buy a copy of Dreamweaver,
just so that you can edit your Joomla! CSS files.
| | 05:49 | Whatever tool that you want to is perfectly okay.
| | 05:52 | Just double-check and make sure any changes
that you're making are to the correct CSS file
| | 05:57 | and that those are being reflected in Joomla!
and you're good to go.
| | Collapse this transcript |
| Fixing the path to custom.css| 00:00 | The first problem that we have encountered,
taking a look at our styles here,
| | 00:05 | is that currently our custom style sheet
does not display. How do I know this?
| | 00:10 | Right now I am taking a look at the index.php
that appears in the root of my website.
| | 00:15 | I have hooked this up to Dreamweaver.
I am looking at this in Live mode.
| | 00:19 | If I switch over to the custom.css
style sheet by clicking on it, it tells me
| | 00:23 | that custom.css is not on the local
disk and to get it, which is a bad thing.
| | 00:28 | Because of course we know that
custom.css is indeed on the local disk.
| | 00:32 | You can see it over there in the file structure,
it's just that it can't be accessed from this page.
| | 00:36 | And in fact if you take a look at the
front end of the website here inside
| | 00:40 | of Joomla! and you use the Web Developer
Toolbar to edit CSS and you switch
| | 00:45 | to the custom.css tab here, the error that
you'll see here is a 404 page not found error.
| | 00:51 | So, that's a pretty good indication
that we have some problem
| | 00:54 | hooking up our style sheet to our web page.
So, let's go ahead and fix that problem.
| | 01:00 | I am here inside of Dreamweaver, the
first thing I need to do is make sure
| | 01:04 | I'm looking at the index.php, associated with my
kineteco template, that is what I am looking at here.
| | 01:08 | Now I am going to scrolling down to
where I can find my link to CSS.
| | 01:13 | As I mentioned to you before, we fixed
these URLs here for the images for the
| | 01:19 | website in a previous video, because
the Dreamweaver generated path
| | 01:23 | when we built the page out and in just static
HTML using Dreamweaver, those paths work
| | 01:28 | great in Dreamweaver, but they don't
work inside of Joomla!
| | 01:30 | And likewise this path here
to our custom style sheet is incorrect.
| | 01:34 | So, I can fix this here on line 22, simply by saying
| | 01:38 | templates/kineteco/css/custom.css that
is the correct path to the style sheet.
| | 01:47 | So, now that I have made this change,
if I go ahead and say File>Save and now
| | 01:53 | if I go to my Firefox web browser here,
and I hit Refresh, you can see that the little edits
| | 01:59 | that I made in the previous video showing you
other alternate workflows have taken effect.
| | 02:04 | We now have a red background with
yellow text, it looks absolutely hideous.
| | 02:09 | We're definitely going to need to fix that,
because of course that's not what was intended at all
| | 02:12 | and I will show you how to fix that in the next video.
| | Collapse this transcript |
| Styling the header| 00:00 | Ugh, the web page looks absolutely awful
with this red background and yellow text. Let's fix that.
| | 00:05 | If you switch over to your custom.CSS the
background of color red and the color of yellow,
| | 00:10 | I put in the video, where we are showing you
some alternative workflows
| | 00:13 | that you could use inside of Joomla! to get
your CSS into the system, and I put this in.
| | 00:19 | Just to show you that, yes, you can put in
styles and they are saved, it's horrible.
| | 00:23 | So let's just take those out really quick.
We certainly don't want those.
| | 00:27 | In fact, we don't need this body tag style at all.
| | 00:31 | So I'm just going to go ahead
and take that out altogether.
| | 00:35 | Where I'd like to start styling though
is at the head of my document.
| | 00:39 | So if I just do a File>Save here and
I go back to my web page and I refresh.
| | 00:45 | Here now I can look at it again.
| | 00:47 | What I want to concentrate on first is
just styling the head of this document.
| | 00:50 | So as we know from the completed design
for this website, what we want to have
| | 00:55 | is a big green header and I'm going to want
to align those flags and that search box
| | 00:59 | over to the right side of the screen.
| | 01:02 | So the first step in this is to know
what HTML you have to work with.
| | 01:05 | And easiest way to do that is actually
not to take a look at index.php.
| | 01:10 | Index.php is only going to
show us the following information:
| | 01:14 | If I look at index.php and I scroll on down
to the header portion of my web page,
| | 01:18 | I see that I have my image and then I see
that I have a line here that just calls for the modules.
| | 01:25 | I don't know what HTML I have to work with
and to style when I take a look at this.
| | 01:30 | So the best way to do this is to view the page source.
| | 01:34 | And right here from my Web Developer
Toolbar I can just go to View Source.
| | 01:39 | And this will show me the HTML
that makes up my web page.
| | 01:42 | So I can scroll on down here to my header
and there's my image just like I had before.
| | 01:46 | Then I have my div with a class of span8, in my index.php,
this just calls for jdoc include type of modules.
| | 01:54 | Now this is actually written out as HTML.
| | 01:57 | So I see that I have a div with a class of module table.
I have a Div class of mod languages.
| | 02:02 | And then I have my flags and then after that
I have another div with a class of module table.
| | 02:08 | And div with a class of search
and the stuff associated with the search.
| | 02:12 | And that my header ends down here.
| | 02:14 | Well, this is actually the HTML
that I'll have to work with to style.
| | 02:18 | So what I'm going to do is I'm
going to work with these two classes.
| | 02:21 | That class here of search and the class up here
of mod-languages and assign some styles to those.
| | 02:27 | And I'll also put a background color
on the header over all here,
| | 02:30 | which I can just use my header tag for doing that.
It's the only one that's on the page.
| | 02:36 | So back here in Dreamweaver I'm going
to switch to my custom.CSS tab.
| | 02:41 | And I'm going put a little comment at the top
header styling.
| | 02:47 | After that I'm going to put
in my header as my declaration.
| | 02:51 | I'm just using HTML tag there's no need
to make it any more specific than that,
| | 02:55 | background-color will be afc82e.
| | 03:02 | And that's all I need for my header,
it's just going to be a big green area.
| | 03:06 | If I say File>Save and I go to
Firefox and I refresh this page.
| | 03:12 | There we go, I now have a big green header.
That's exactly what I wanted.
| | 03:15 | Now I need to take care of my styling here for the flags.
| | 03:18 | So I'm going to add now my style of .mod-languages
and that will align it to the right,
| | 03:32 | and I'm going to put in some padding
4em, 1em, 0, 0.
| | 03:38 | Remember when you see CSS written out
this way with four numbers one right after the other.
| | 03:42 | The way that you should remember that is its TRBL.
| | 03:48 | Remember TRBL and stay out of trouble.
| | 03:51 | So what that means is 4ems on the top,
1em on the right, and 0 on the bottom and left.
| | 03:58 | Why am I working with ems here?
I could be working with ems or percents.
| | 04:02 | Either one is okay, this is because
I'm working with Responsive Design.
| | 04:05 | Remember that I want to work with a
unit of measure that's flexible
| | 04:09 | and will adapt to my web page,
so ems or percents are good way of doing that.
| | 04:13 | If you use pixels and you're hard coding in
those values, those pixels unfortunately,
| | 04:18 | may not necessarily adapt to some of your
other layouts on the website, or adapt as easily.
| | 04:23 | That is why I am working with ems.
| | 04:25 | And I'm going to close that off with the curly bracket.
| | 04:29 | And then finally my search box and so
I'm going to call this .search, curly brackets
| | 04:36 | and I am also going to give this a margin
of 2ems, 1em, 0, 0, so 2 on the top.
| | 04:45 | So that will be 2ems between the flags in
the search box, one em over on the right.
| | 04:49 | That way the edges on the right will
line up nicely with the flags and then 0, 0.
| | 04:54 | And I'm going to tell it to float right. Okay.
So now that I have those styles in place,
| | 05:01 | I can say File>Save and when I come back to
the front end of my website and I refresh.
| | 05:07 | Here's my flags over here now
pushed to the side of the screen
| | 05:10 | and my search box is located right under it.
All that has lined up very, very nicely here
| | 05:15 | inside of my web page.
| | 05:17 | So we've got a good start on improving
the look of our website.
| | Collapse this transcript |
| Incorporating Bootstrap markup in the navigation HTML| 00:01 | One of the great features inside of Bootstrap
is the ability to take a
| | 00:04 | navigation bar and have it collapse
as screen widths reduce.
| | 00:09 | That effect is actually on display
here inside of Joomla!'s backend.
| | 00:13 | So if I were to minimize my
Firefox window here just like that.
| | 00:19 | You see that a little button that appears here
and when I click that I have the option
| | 00:23 | of getting to all of my navigation items.
| | 00:25 | And this button is something
that's built right into Bootstrap.
| | 00:31 | As I make my page bigger again my menu appears.
| | 00:34 | It's documented how you can build that
exact collapsible navigation type of widget,
| | 00:38 | here on the Bootstrap website.
| | 00:41 | I'm under components from getbootstrap.com.
If you scroll on down here on the side
| | 00:46 | to the Navbar section of the website,
this describes HTML that's required
| | 00:51 | to make such a navigation bar;
| | 00:53 | the basic navigation bar, its components,
how the links work, how you can
| | 00:57 | integrate search form with it, how you use drop downs,
fix it to the top, fix it to the bottom.
| | 01:03 | And then finally, eventually you
get down to the Responsive Navbar.
| | 01:07 | The Responsive Navebar has an example
right here inside of the page itself.
| | 01:11 | The black bar across the top actually
uses that same Responsive navigation bar.
| | 01:15 | So you have several places
where you can look for an example.
| | 01:18 | But in order to make this Responsive Navbar work
there are certain HTML that's required here.
| | 01:23 | And it's spelled out here on this web page.
| | 01:25 | What you have to have is some kind of container
with a class of Navbar,
| | 01:29 | nested inside of that is another container of
some kind with a class of Navbar inner,
| | 01:34 | followed by another type of container
with a class of container.
| | 01:37 | I'm calling those containers generically.
They're used as divs here on the Bootstrap site.
| | 01:41 | You almost always see these used as divs.
| | 01:43 | But they don't have to be. You could
use for example the Nav tag inside HTML 5
| | 01:48 | instead of one of these Div tags instead.
| | 01:51 | Then you have a little bit of code here.
This is the A tag here, which has two
| | 01:56 | classes associated with it;
the button and button-Navbar.
| | 02:00 | And then you see these things about
data-toggle and data-target.
| | 02:03 | The data-toggle and data-target talk to
jQuery to make the animation happen
| | 02:08 | where the Navbar expands and then it contracts again,
| | 02:10 | followed by three icons with the span class of icon bar.
| | 02:15 | These come from the glyph icon set
that ships with Bootstrap.
| | 02:19 | There are some styles associated with those glyph icons
and that is what that little bit of code is calling there.
| | 02:24 | You optionally have a line of code after that,
which can spell out your project name
| | 02:29 | or your brand name, if you wanted to have
that appear inside of your navigation bar,
| | 02:33 | kind of like Bootstrap that appears here inside
| | 02:36 | of this navigation bar or your site name
that appears inside the administrator toolbar.
| | 02:40 | And then finally you have a div with a
class of nav-collapse, collapse; two classes.
| | 02:46 | And what this little bit of code does is,
you want to have your navigation bar
| | 02:50 | whatever part of that navigation bar that
will hide when the button shows up on the screen.
| | 02:55 | Whatever you want to have hide behind-the-scenes
is going to show up in between those tags.
| | 03:00 | So ideally, what we want to have happen now is,
we need to copy in some part of this code
| | 03:05 | into our Joomla! template for the HTML side of this.
| | 03:09 | And we want to make sure that our
navigation module is called in between
| | 03:15 | the div with a class of nav-collapse, collapse and net/div.
| | 03:17 | This little chunk of code here I have
provided for you as a free exercise file.
| | 03:23 | If you take a look at that particular code
inside of chapter 6 in movie number 4.
| | 03:30 | This is the code that you're going to
want to incorporate into your web page.
| | 03:34 | So what I'm going to do is just the copy this
right now highlight this and say Ctrl+C.
| | 03:39 | It's a lot of typing so didn't want
to type it all in by hand.
| | 03:42 | And then inside of your index.php file
scroll on down to lines 34 through 38.
| | 03:53 | This is currently what we have for our
navigation here inside of Dreamweaver.
| | 03:58 | It's just a row with a class of span 12 because it's
going to go all the way across the page.
| | 04:03 | And that calls our navigation module here.
| | 04:06 | So I'm just going to erase that and
then I'm going to paste in the code that
| | 04:11 | I've given to you inside of that exercise file.
| | 04:14 | So here's what changed in line 34 we
still have a div with a class of row-fluid.
| | 04:19 | That's followed by the nav tag, which
we had before. It's going to have a class
| | 04:24 | of span12 and a class of Navbar.
| | 04:26 | Notice how I've incorporated both of
those items here, so rather than putting in
| | 04:31 | it extra to div inside, I've one div
with its class span12, followed by another
| | 04:36 | div with a class of Navbar, which is
just a lot of extra markup I've tried to
| | 04:41 | combine here a little bit and it seems to work okay.
So I've done that here.
| | 04:45 | Then we have a div with Navbar then container-fluid.
| | 04:49 | Instead of container is called for inside of Bootstrap.
| | 04:53 | Container-fluid, like row-fluid, it is targeted
towards the responsive side of Bootstrap.
| | 04:59 | You could also just use a class of row or class
of just container and have their default grid system,
| | 05:05 | which it doesn't continually resize across the page.
It has more defined breakpoints associated with it.
| | 05:11 | Then I have the information about the
button that will appear in the navbar.
| | 05:15 | Then I have finally down here at line 43,
that very important line of code,
| | 05:20 | the div with a class of nav-collapse, collapse
and inside that is my bit of code calling
| | 05:25 | for my module position of nav to appear there.
| | 05:29 | That's what we need to do to alter the HTML here.
If I now say file save and I go to the front end
| | 05:37 | of my website and I hit refresh,
my navigation bar here has changed somewhat.
| | 05:43 | So you can see now that I have my navigation bar
here is appearing and the spacing isn't good.
| | 05:50 | What's happening here is this K-Eco Low Flow
Shower Head is sort of pushing over that link there,
| | 05:55 | that's why this is looking little bit broad.
| | 05:56 | The Navbar itself does not have dropdowns built into it.
| | 06:00 | So that is another piece of code that I'm going to
have to add to make these dropdowns continue to work.
| | 06:05 | And obviously, I have a bit of styling to do in terms
of making this a light blue color and so forth.
| | 06:09 | But the responsive side of this is already present.
| | 06:13 | If I start to reduce the size of my page here,
you'll notice that I get my button here that shows up.
| | 06:19 | I can drop on down here and there is my
navigation bar exactly the way I want it to appear.
| | 06:26 | So I have not actually added any custom CSS
to this page at all at this point in time.
| | 06:32 | All I have done is added some HTML.
And that HTML is now working with my Bootstrap CSS
| | 06:38 | to pull in the styles that I need to give me
the functionality that I want.
| | 06:42 | Now that I have the functionality in place,
I can worry about how that navbar is going to look.
| | Collapse this transcript |
| Creating and styling a dropdown menu| 00:02 | I am at joomla.kinetecoinc.com.
This is the finished state of the Joomla! 3.0
| | 00:07 | Essential Training Course, and I just wanted
to take a look at the old navigation bar that I had here.
| | 00:12 | So, before what I was able to do,
was I would to mouse over some of these
| | 00:16 | navigation items that have secondary
navigation, and I had a dropdown menu
| | 00:20 | that I was able to use here on this website,
this was driven by the protostar template.
| | 00:25 | In my custom template, right now what I
have is the navigation bar the html,
| | 00:32 | for that we just added in a previous video.
But I don't have these dropdown menus.
| | 00:36 | And the reason why is that the dropdown menu styling,
dropdowns are actually built into Bootstrap,
| | 00:41 | the ability to have the dropdowns, but the specific
| | 00:44 | dropdown implementation that you have here inside
of protostar is part of the protostar template itself.
| | 00:50 | If you like the dropdowns here, why not we just borrow
from those and make those appear on my website.
| | 00:57 | Why re-invent the wheel? Why try to figure out
the whole Bootstrap dropdown implementation?
| | 01:02 | Let's just borrow from protostar,
and borrow the CSS from there,
| | 01:06 | and then incorporate that into our template.
| | 01:10 | That's what I am going to show you
how did you in this particular video.
| | 01:14 | Back here in Dreamweaver, I am going
to go open up File>Open, the protostar.css.
| | 01:24 | I'm going to go to my protostar folder,
and I am going to go to the css folder,
| | 01:30 | and I am going to go to template.css.
| | 01:33 | This is all of the html that's making up
the protostar template.
| | 01:37 | What I can do now is I am going to do a Find
for some kind of .nav followed by .nav-child.
| | 01:46 | Because in the protostar template,
the html is marked up this way.
| | 01:51 | This is where the dropdown menus are located.
| | 01:53 | I am going to go ahead and find this here
inside of the protostar template.css.
| | 01:59 | Where I'm interested in starting
is right here at line 6186.
| | 02:03 | So, this says .navigation .nav-child
and this goes on for quite a while,
| | 02:09 | there are several styles that are associated
with these dropdown menus.
| | 02:13 | We are going to need to get all of this.
| | 02:15 | We are going to scroll on down through the page here.
| | 02:18 | At line 6278 is a media query,
we are going to stop just before that.
| | 02:23 | All of this code that is located here,
all has to do with the dropdown menus.
| | 02:29 | So, I am going to copy all of this,
Ctrl +C or Cmd+C to copy.
| | 02:33 | Then I am going to switch over to my custom.css
style sheet and I am going to put in a little comment here,
| | 02:39 | that says this is the code for
dropdown menus taken from Protostar.
| | 02:50 | And after that I'm going to Ctrl+V or Cmd+V
and so I have pasted in all of those
| | 02:54 | styles that I took from Protostar.
| | 02:57 | This should make our dropdown menus work, right?
| | 03:00 | If you can't go through and find this particular
css inside of the Protostar style sheets
| | 03:05 | by all means, I have given you a free exercise file
that has a copy of the Protostar CSS in it.
| | 03:11 | And I have another file that I'll give you
that has the copy of my modified protostar styles,
| | 03:16 | because we are going to need to modify these a little bit.
| | 03:19 | So, if just say File>Save and I am going to go
back to Firefox and I am going to hit Refresh,
| | 03:27 | absolutely nothing happens. Why is that?
| | 03:30 | Well, if we view the source for this web page,
and we scroll on down here to our navigation bar
| | 03:37 | in the HTML, you will see that we have our nav
appears up here at the top, right our <nav>.
| | 03:45 | But nowhere in here is a class of navigation,
if you read through all of this code.
| | 03:52 | No where will you find a class of navigation
all spelled out.
| | 03:56 | What that means is the CSS that I just
copied over is looking for a class of navigation
| | 04:02 | all spelled out. I don't have it here.
| | 04:04 | What I do have that I can work with is this right here
nav is an html that I can use.
| | 04:11 | Then the items that have these dropdown
navigation bars,
| | 04:17 | if I scroll over here to the right, here's the about tag,
the UL here that is forming the dropdown
| | 04:23 | for the about part of the web page,
the ul has a class of nav-child.
| | 04:28 | So, that is used in the style that we just
copied over from the protostar template.
| | 04:33 | So, if I change those styles from .navigation
to just nav the html tag
| | 04:40 | that CSS should then take effect on this web page.
| | 04:42 | By the way, if you would like to have your code
wrapped here inside of this window,
| | 04:46 | if you go to View, Wrap Long Lines you
might find your html a little bit easier to read,
| | 04:53 | Okay. So, now I am going to go to Dreamweaver here,
and everywhere in this css that I just copied
| | 04:59 | and pasted over, where it says .navigation,
I want to change that nav.
| | 05:03 | I can use Find and Replace to do that.
| | 05:05 | So, if you do a Ctrl+F or Cmd+F,
you will get a window that comes up
| | 05:09 | that will find .navigation, I'm going to
replace it with nav, and you could just hit
| | 05:14 | Replace All, if you're feeling brave,
I like to review each one of these and
| | 05:18 | make sure I really do want to change it.
| | 05:20 | So, I am going to hit Replace,
Replace, Replace and I am just going to go
| | 05:25 | through my list here, and replace these
instance of navigation with the nav tag.
| | 05:33 | So, that's all I've done, I have just made sure
that my CSS selector matches the html
| | 05:39 | I am actually working with.
| | 05:42 | All right. So, now that that change is made,
if I say File>Save and I go back
| | 05:47 | to my Firefox website and I hit the Refresh button,
it looks like my navigation is disappeared.
| | 05:53 | Now when I roll my mouse over, exactly
as expected, I have these dropdowns
| | 05:59 | and they look and they function exactly
the way that they did inside of protostar.
| | 06:05 | So, that is how we've gotten our navigation
dropdowns back.
| | 06:09 | Now what we need to do is style those
along with styling our nav bar.
| | Collapse this transcript |
| Styling the navigation bar| 00:00 | Now that I have my navbar in place and
now that I have dropdowns that are working,
| | 00:05 | the next thing I'd like to do
is spend some time styling this navbar.
| | 00:08 | We needed to have a nice bright blue background,
and the text is all wrong by the way.
| | 00:15 | Right now the text it is Arial, I think,
that would be coming from the Bootstrap stylesheet.
| | 00:20 | Remember the designer wanted to have a font-family
of Ubuntu used everywhere here on the site.
| | 00:25 | So I am going to go ahead and
add that font-family of Ubuntu.
| | 00:29 | I am actually just going to put it on the body tag
because I want to override all of the text,
| | 00:33 | everywhere on the website,
wherever there's text it should be in Ubuntu.
| | 00:37 | Then I am going to show you how to
grab one of the styles that's important
| | 00:42 | for styling this navigation bar and
we'll put that into our stylesheet as well.
| | 00:46 | Here in Dreamweaver what I'd like to do
is I am going to scroll up to the top of my stylesheet
| | 00:51 | and right here at the very beginning of the document,
| | 00:55 | I usually like to have a part of my stylesheet
that's just HTML tag styling
| | 01:00 | and that's just sort of global styles that are
going to be used throughout this document,
| | 01:04 | things that are easily overwritten somewhere later.
| | 01:07 | So I am going to add that body back
| | 01:10 | and I'm going to put in a font-family of Ubuntu.
| | 01:16 | Although, Ubuntu is called out as an
additional style for this website,
| | 01:24 | it's called out from the Google stylesheet that we
added some videos ago, and that should load just fine.
| | 01:31 | Remember that what would happens when
Google's site is down, yeah I know
| | 01:36 | it doesn't happen really often, but it does
occasionally happen the Google's sites are down
| | 01:39 | first of all and second of all what
happens if somebody is on a very slow
| | 01:43 | Internet connection or there is a delayed
connection to Google server to load up
| | 01:47 | that font what are we going to do?
| | 01:49 | So I'd like to provide some alternative fonts t
hat are likely to be on the
| | 01:52 | computer in front of them,
so that they will see something.
| | 01:55 | Otherwise they are likely just to see,
in this particular case, they're likely
| | 01:59 | to see the Bootstrap default font-family,
which is actually okay or if the
| | 02:04 | Bootstrap styling wasn't there they
might just see Times New Roman.
| | 02:07 | So I am going to go ahead and add some
additional styles here, actually just the
| | 02:11 | Arial, Helvetica and Sans Serif
just in case Ubuntu doesn't happen to load.
| | 02:16 | And if I save that and I come to the
front end of the website and I hit Refresh,
| | 02:22 | that will load the Ubuntu font-family
throughout the design of this website,
| | 02:26 | so that's good, that's one of the changes
that needed to happen in the navbar,
| | 02:29 | but of course it's happening
throughout the website at this point.
| | 02:32 | The navbar itself is hooked to some styling
for navbar-inner and remember if we
| | 02:38 | view the HTML for this web page
and I scroll on down to the navbar portion of this page,
| | 02:44 | you'll see that we have a div
with a class of navbar-inner and that's
| | 02:52 | on its own div because there is
some styling that's attached to that that we
| | 02:55 | need to have applied to this particular document.
| | 02:59 | What I am going to do now is I'm going
to hop back into Dreamweaver and I am
| | 03:03 | going to pull up my Bootstrap stylesheet.
| | 03:05 | And so if I go to File>Open, the Bootstrap stylesheet
is located several directories up.
| | 03:12 | So if I hit my up the directory button here
back to my www folder and I go into
| | 03:19 | the media folder, I go into the jui folder and
I go into the css folder, my Bootstrap styles are here.
| | 03:27 | You'll notice that there are several variations
on these Bootstrap styles,
| | 03:31 | so bootstrap-rtl is the right to left version of Bootstrap.
| | 03:35 | We also have bootstrap-responsive and
Bootstrap-responsive.min, responsive is
| | 03:40 | the human readable format of the Bootstrap
stylesheet while the .min has been minimized,
| | 03:44 | so it's had all of the spaces pulled out
so that the file size is a bit smaller.
| | 03:49 | And that generally contains the information
about the grid and making the grid a
| | 03:53 | very flexible grid as well as some of
the media query information.
| | 03:58 | A bootstrap-extended happens to do
with Joomla!'s specific Bootstrap requirements,
| | 04:02 | so there are some additional files in there for overrides.
| | 04:05 | So the ones that I really want are
the Bootstrap or the bootstrap-min.
| | 04:08 | These are the main Bootstrap heavy lifting CSS files,
the .min of course is not human readable.
| | 04:14 | I'd like human readable so I am going
to open up Bootstrap right here.
| | 04:18 | Go ahead and say open and then once
again Ctrl+F or Cmd+F to open our Find
| | 04:23 | and Replace window and I am going to search
for navbar-inner, I am not replacing it with anything,
| | 04:29 | I am just looking for that navbar-inner.
And if I say find that, I have a nice style here.
| | 04:37 | What I can do is I can just copy this whole
style right here from navbar-inner
| | 04:42 | and Ctrl+C or Cmd+C to copy that style
and then over here in custom.css
| | 04:47 | I would like the style to appear above the dropdowns.
| | 04:51 | The reason why is because that is the
source order, you'll actually find this in
| | 04:56 | the Protostar stylesheet, that
you want this navbar styling first.
| | 04:59 | So I am going to make sure
that I preserve that source order.
| | 05:03 | So right here around line 20, I am
going to put in a comment and that is going
| | 05:09 | to be navbar coloring, copied from the bootstrap.css.
| | 05:19 | And then I am going to Ctrl+V, that
will paste in that information here.
| | 05:22 | Oops it looks like I copied something extra;
I am just going to take that out.
| | 05:27 | I just want the navbar-inner style here.
| | 05:30 | Okay and it goes on for quite a while.
Boy, does it look repetitious.
| | 05:33 | So let me just explain to you what's going on here.
| | 05:36 | We have a minimum height for navbar-inner
so the navbar will have a minimum height of 40 pixels.
| | 05:42 | It will never be less tall than that.
There's some padding on the left and the right.
| | 05:47 | There's a background color,
all that's pretty straightforward.
| | 05:49 | Then you'll see this background-image stuff.
Background-image like five times in a row, what is this?
| | 05:54 | Well, this is a little bit of CSS 3, this is a concept
of putting a gradients into your web page.
| | 05:59 | And because of cross browser support there are
some browser-specific ways to include this code.
| | 06:06 | So there's the Mozilla way, there's the
webkit way, there is the Opera way, and
| | 06:11 | then there's actually the
standards compliant way of doing things.
| | 06:14 | And the background-color is also set
because if they ignore all of those gradients,
| | 06:18 | at least they're going to have
some color on the web page.
| | 06:21 | So that is what lines 25 through 30 are doing.
| | 06:25 | Those are the various kinds of
gradients and then a fallback style
| | 06:29 | of the background-color,
in case those gradients don't work.
| | 06:33 | Then of course, we have a background-repeat
there of x and then down a little bit further
| | 06:37 | on line 32 here, this is a Microsoft way for IE
of handling gradients, that's what that's all about.
| | 06:44 | We have a border and then we have a bunch
of the same kind of thing, these lines 33 through 39,
| | 06:49 | again the same kind of principle
of rounded corners that are
| | 06:53 | sometimes browser specific, so we have
the webkit way, the Mozilla way
| | 06:57 | and then the standards compliant
border-radius of four pixels.
| | 07:00 | And then lines 37 through 39
have to do with drop shadows.
| | 07:04 | So again the webkit way, the Mozilla way
and the standards compliant way
| | 07:07 | of applying a drop shadow to the website.
| | 07:10 | What I would like to have happen is
I just want to have a plain bright blue navigation bar,
| | 07:15 | I don't want a gradient on it;
I just want a flat color.
| | 07:17 | So I am going to show you how I'm
going to edit this to make this happen.
| | 07:20 | You might be wondering if you
have to copy all of this code over.
| | 07:24 | I would advise you to go ahead and
copy it all over, you could get rid of the
| | 07:27 | min-height, the padding-left and the
padding-right, because we're not going to
| | 07:30 | make changes to those particular styles,
but there are a bunch of other things
| | 07:34 | that we are going to change about this.
| | 07:37 | Because we are overriding styles that
are coming from the Bootstrap stylesheet,
| | 07:40 | we need to have declarations for all of these.
| | 07:41 | And I've tested this now in Chrome and
Firefox and in Internet Explorer 9 and
| | 07:47 | the changes that I've made are
necessary to work in all of those browsers.
| | 07:50 | So first of all the background color
is going to be 59c0e1
| | 07:58 | and that is that shade of bright blue
that we want to have happen.
| | 08:00 | I am just going to copy that
because I am going to use it a whole lot.
| | 08:04 | So now to get rid of these gradients,
the way that I found that was most
| | 08:09 | effective is just simply to say your
starting color and your ending color
| | 08:12 | are exactly the same for these gradients, so
I am just going to go ahead and put that in.
| | 08:16 | So that way I am overriding this
for all the various kinds of browsers.
| | 08:23 | You can leave in the background-repeat of x;
we don't need to change that.
| | 08:26 | And then down here in the Internet
Explorer declarations here,
| | 08:30 | leave the first two fs and then put in your color.
| | 08:34 | That seems to work.
| | 08:36 | Then it's going to call for a border here in line 33.
| | 08:39 | I set that to 0 pixels, because I don't
actually want a border and by setting it
| | 08:43 | to a width of zero pixels would then
ensure that we don't have a border.
| | 08:47 | And because I don't want a border
I don't want rounded corners either
| | 08:49 | so I'm going to reset all of these to 0.
| | 08:53 | And then finally I don't want any kind
of drop shadow either, so all of these
| | 08:57 | numbers here where I have the 1px and the 4px,
I am going to set all of those to 0 also.
| | 09:02 | Now if you are doing this for your
own website you're more than welcome to
| | 09:06 | change these values to whatever you like,
if you want the drop shadow,
| | 09:10 | if you want the rounded corners, if you want
the gradients, this is where you go to
| | 09:12 | change all of that stuff.
| | 09:14 | I'm actually dialing back the styling
on this bar by quite a bit just looking
| | 09:17 | for a flat blue background.
| | 09:19 | So now when I save this and I go back
to my web browser and I hit Refresh,
| | 09:25 | now I have that nice flat blue navigation bar
here which is exactly what I was looking for.
| | 09:30 | So I am making good progress on styling
the way I want this navbar to look.
| | Collapse this transcript |
| Styling the navigation text| 00:00 | The next thing I'd like to focus on with my nav bar
now that it's blue and it's a solid color,
| | 00:06 | I would like to change the navigation text
to be uppercase.
| | 00:10 | And I'd like to change the way
it's presented here on the page.
| | 00:15 | Right now it's got this funny little drop shadow
thing going on behind that text
| | 00:18 | which makes it hard to read.
| | 00:20 | It worked when the background of this
navigation bar was white,
| | 00:22 | but now that it's blue it looks a little bit odd.
| | 00:25 | I also want to style this you are here indicator
that you see here this white box here on the homepage.
| | 00:31 | I am going to start there, that little
white box, the little rounded rectangle
| | 00:35 | is actually coming from something that
we did in Joomla! 3 Essential Training.
| | 00:39 | We assigned a style of nav-pills.
| | 00:43 | I don't really want that style there anymore
and you can see the style in action
| | 00:48 | if you go to View Source here inside of your
Web Developer Toolbar.
| | 00:52 | Scroll on down to the navigation part of
the web page and you'll see here we have
| | 00:57 | a ul with a class of nav, a class
of menu and a class of nav-pills.
| | 01:03 | And what I'd like to do is get rid of that class
of nav-pills, that's actually really easy to do
| | 01:07 | and we did it through the Joomla! back-end.
Let me remind you of where that was.
| | 01:14 | So if you hop into the backend of Joomla!
here and you go to Extension>Module Manager,
| | 01:19 | and we're going to go to the English menu,
I am going to go to my Advanced Options
| | 01:25 | and I am going to get rid of this style
here for nav-pills and say Save & Close.
| | 01:28 | I am going to repeat that process for the Italian
menu and get rid of that and Save & Close.
| | 01:36 | And now when I go back to the front end
of the website and I Refresh,
| | 01:41 | that little pill rounded corner thing is gone and I now
have a different sort of you are here kind of marker.
| | 01:47 | I like the shape better, it's still the wrong color,
but the shape is better.
| | 01:50 | Okay, so now let's worry about some
of the styling that we have here.
| | 01:54 | Part of the issue with changing styles
where you're working with a enormous stylesheet
| | 01:59 | like Bootstrap is what was the style
that caused that drop shadow to appear,
| | 02:04 | how do I find, how do I change it and fortunately,
this is a great job for Firebug.
| | 02:09 | So I am going to use Firebug to track down
where that little drop shadow style is coming from.
| | 02:14 | So to do that, I am going to click on my Firebug
icon up here at the top and I can follow
| | 02:21 | my HTML on down to where that link
is selected, so if I roll my mouse over
| | 02:26 | the body HTML tag over here on the side, you see
that the whole area here is grayed out or blued out.
| | 02:32 | As I move down a little bit further here
is the row that contains my navigation,
| | 02:36 | the nav HTML tag and I can keep
on moving on down the page here.
| | 02:41 | Eventually I get down to the ul that
makes up that list and then the second li
| | 02:47 | is the one that's responsible here for About.
| | 02:49 | If I click on that, I'll get my styles
over here on the right side of Firebug.
| | 02:54 | So far I am not seeing anything that would indicate
some sort of drop shadowy sort of thing.
| | 02:58 | So if I go to my next style here the a tag,
you'll see that I have a style here that has
| | 03:05 | associated with this text shadow and it's a white color,
so that is where that item is coming from.
| | 03:10 | I can confirm that simply by clicking
on the little no symbol here inside of Firebug
| | 03:15 | and wow look at that, doesn't that look better?
| | 03:17 | That is what I need to get rid of right there.
| | 03:19 | So, this indicates that the style is located
on line 640 in the bootstrap.min.css file,
| | 03:27 | that's the not human readable file.
| | 03:28 | I'm working with just bootstrap.css.
| | 03:30 | the easiest way to do this is just to
highlight the style here
| | 03:35 | and Ctrl+C or Cmd+C to copy it
and I am going to hop here into
| | 03:39 | the back-end of Dreamweaver and I am going
to Ctrl+F or Cmd+F to bring up my find box,
| | 03:44 | paste in my style, my CSS declaration
that I am looking for, and then say Find Next.
| | 03:50 | Here is the style that was referred to.
| | 03:53 | Although it's not on line 640, it's on line 3548.
| | 03:58 | it's a lot of looking if you're trying to track down a style.
| | 04:01 | So what I am going to do is I am going to copy
this style here, Ctrl+C or Cmd+C to copy,
| | 04:06 | and over here in my custom CSS,
somewhere around line 41, 42,
| | 04:11 | this is just after the style for nav bar inner.
| | 04:14 | But before my styling for the dropdown menus
I am going to add a little comment here,
| | 04:18 | nav bar text styling and I am going
to paste my style in here and there is my style.
| | 04:27 | Now a lot of this I am not going to
restyle at all, I am going to keep the
| | 04:32 | padding the same, the float the same,
so I can just erase those out of here and
| | 04:34 | the text-decoration is going to stay the same.
| | 04:37 | But this text-shadow, I'm going to
set to a value of none, and if I say
| | 04:41 | File>Save and I Refresh the front end
of the website, that looks better.
| | 04:49 | But I'd like the text to be a little bit darker
so it's not quite so smudgy with the blue there.
| | 04:55 | So back here in Dreamweaver I am going to change
this color from fives (555555) to 333 and say Save.
| | 05:02 | So now when I Refresh the front end of
the website my text is a little bit darker.
| | 05:07 | But I've lost my hover state here before
we're at a text-color of 555 and when
| | 05:14 | I roll my mouse over it, it would switch to 333.
| | 05:16 | So I need to add an override for that hover as well.
| | 05:20 | Back in my Bootstrap stylesheet,
in the actual bootstrap.css, not the next style
| | 05:26 | but the one right after it is the styling
for a focus and a hover state of the link.
| | 05:32 | So I am going to go ahead and copy that,
Ctrl+C or Cmd+C to copy and back to the custom.css
| | 05:39 | and I'm going to paste this of course
after my style for the a,
| | 05:44 | remember that your hover state has
to come at the very end.
| | 05:46 | I am going to keep the background-color as transparent.
| | 05:48 | I am going to keep the text-decoration as none,
but the color I am going to change.
| | 05:53 | Lets see what happens if we
make this white, so fff as white.
| | 05:58 | Go ahead and save that, let's Refresh
the front end of the website
| | 06:03 | and now we have this darker text, when I roll my
mouse over it, it turns white,
| | 06:07 | so that's a pretty obvious marker of where I am.
| | 06:10 | Okay, so then the last thing I want to do is
I want to make sure that this text is uppercase,
| | 06:15 | which is the way it's shown on our website.
| | 06:18 | So I am going to add one more style to
my stylesheet here, actually back all
| | 06:22 | the way up to the top of the stylesheet,
just after the body tag I am going to add nav,
| | 06:27 | because everything inside of this nav tag I want
to have uppercase, so text-transform: uppercase.
| | 06:38 | We will save that and I will Refresh
the front end of the website.
| | 06:42 | And now I have nice uppercase text,
when I roll over it, it turns white.
| | Collapse this transcript |
| Styling the navigation indicator| 00:00 | The next thing I'd like to style is the white grayish
sort of box around the word HOME here.
| | 00:05 | I am calling it the navigation indicator,
because this is indicating where we
| | 00:08 | are in our navigation, and of course,
this indicator moves depending on what
| | 00:12 | page you are located on within the website.
| | 00:15 | So I need to style this, I'm not sure
where I go to style it so I'm going to start
| | 00:20 | with Firebug, click on Firebug up here
at the top and I am going to navigate on
| | 00:25 | down to the link associated with the
Home link here inside of Firebug. Click on
| | 00:30 | the a tag and then over here on the
side, this will tell me the style that's
| | 00:35 | associated with that particular item on the web page.
| | 00:37 | And so this is showing me that there
is this navbar.nav, active a, as well as
| | 00:44 | the hover and the focus states here that
is controlling the way that this looks,
| | 00:48 | Its a background color of this
light gray, it has a box shadow associated
| | 00:52 | with it, text color of that light
gray and a text decoration of none.
| | 00:56 | That's exactly what I want to style, so I'm
going to go head and copy that from Firebug here.
| | 01:01 | I'm going to switchover to Dreamweaver,
switch over to my Bootstrap stylesheet
| | 01:06 | and then Ctrl+F or Cmd+F to find
that code, paste in that code that I just
| | 01:12 | copied and say Find Next, and there
it is located right here inside of the
| | 01:16 | Bootstrap stylesheet.
| | 01:18 | So I'm going to go ahead and highlight
and copy this entire style here and over
| | 01:25 | here in my custom stylesheet I'm going
to scroll down to where was just putting
| | 01:29 | in my navigation bar text styling, this will be
around line 53, and I'm going to paste in that style.
| | 01:36 | So I'm going to modify this little bit.
| | 01:38 | The background color I want to use is 00738b
the text-color is going to be white, so fff.
| | 01:51 | I'm going to keep the text-decoration
of none, so I'm going to go head and
| | 01:54 | erase that, Then I have these three
lines here this is talking about a drop
| | 01:58 | shadow that's on that box.
| | 02:00 | I don't really want that to appear,
so I'm just going to go ahead and set
| | 02:04 | this to a none in all three cases, none, none
and none, and then I'm going to say File>Save.
| | 02:19 | And now when I Refresh the front end to my website,
turn off Firebug here. Refresh the front end.
| | 02:25 | Now I have a very nice dark indicator
for where I am on the site, as I roll my
| | 02:30 | mouse over the other links here, the text becomes white.
| | 02:33 | I can click on let's say ABOUT, that will
show me I am on the ABOUT portion of the web page.
| | 02:38 | You see that the indicator moves on
down the page depending on where I am.
| | 02:41 | So that's looking really good.
| | 02:43 | The next thing we need to tackle are those
dropdown menus, need to add a little styling there.
| | Collapse this transcript |
| Styling the navigation dropdowns| 00:00 | A few movies back I added some CSS that made us
have dropdowns here on this particular web page.
| | 00:07 | But the dropdowns are taking the styling
that was used on the Protostar template.
| | 00:11 | What I would like to do now is I'd like to tweak
this appearance of these dropdowns.
| | 00:16 | I'd like the dropdown background color to
be the same color as my -- you are
| | 00:21 | here sort indicator here for the website,
and I'd like the text to be white.
| | 00:26 | When I roll my mouse over it,
I want that text to turn orange.
| | 00:29 | So I'm going to need to modify some
of that CSS that I copied into my stylesheet,
| | 00:34 | and so I am going to go through now
what I need to modify to do this.
| | 00:39 | If you're looking for these variables,
you can always use Firebug, as I've used
| | 00:42 | in the previous videos to narrow down
to exactly the style or the attribute that
| | 00:47 | you need to modify in order to achieve something,
or you can read the code
| | 00:51 | that's in the web page and then look
at the dropdown styles to figure out which
| | 00:55 | selector matches up with what you want
to change on that particular page.
| | 00:59 | So I am just going to now go through
and tell you about exactly which of these
| | 01:03 | styles we're going to go through and restyle.
| | 01:05 | So here I am going to go into Dreamweaver again,
and here in my custom.css
| | 01:10 | I am going to scroll down to the dropdown
menu code, which is now around line 65.
| | 01:16 | The one thing I am going to change
here is my background-color.
| | 01:19 | So currently the background-color,
this is for the dropdowns, is set to this fff.
| | 01:24 | I'm going to change that color to 00738b,
and then I am going to Save this.
| | 01:32 | Now so far what you've seen me do is
pretty much save the styles that I'm
| | 01:37 | going to change here in the stylesheet and then
just get rid of the extraneous things that am keeping.
| | 01:41 | But remember, we copied this code here
from Protostar's template;
| | 01:45 | it's not linked to this particular template
for this website at all.
| | 01:49 | So I need to leave all of the styles in here
if I am not going to use them, they
| | 01:54 | may be important particularly in the way
the dropdown displays on the page.
| | 01:58 | Some of these things I could probably
get rid of fairly easily, I could
| | 02:01 | probably get rid of all the border stuff here,
but the border is that nice
| | 02:03 | little line that goes around the outside
of the dropdown menu.
| | 02:06 | So I kind of like that, I am going to leave that here,
but something minor like that I could get rid off.
| | 02:10 | I probably would not want to mess with
things like the position of absolute or
| | 02:14 | the top left positions or the float
or anything like that, those are pretty
| | 02:18 | critical to the functioning of the dropdowns themselves.
| | 02:21 | So if I just change that color
and I go to the front-end of the website
| | 02:27 | and I hit Refresh, you can now see that I
have a very nice dark teal dropdown,
| | 02:31 | exactly the way that I wanted.
| | 02:34 | But obviously there's still a little
bit more to do here for our styling.
| | 02:39 | So the next thing I'm going to change
in terms of the colors is a little bit
| | 02:43 | further down the screen here, we have
this nav.nav-child a, .nav-child are any
| | 02:52 | of these nested lists inside of the
navigation, and if you take a look at the
| | 02:56 | HTML that makes up this page, if you
scroll on down to the navigation bar,
| | 03:02 | you will see for example, here is the link for ABOUT.
| | 03:05 | After that there is another list, this
is the sub navigation for the ABOUT menu
| | 03:09 | and you'll see that the ul has a class
of nav-child, unstyled and small.
| | 03:14 | That stuff is all coming from Joomla!
And it's rendering of this menu.
| | 03:17 | So this nav-child class is something that you'll see
a lot where these subnavigation areas are concerned.
| | 03:24 | So my style here in my stylesheet is
for within the HTML tag of nav, within a
| | 03:30 | class of nav-child, look for any a links, of course those
are the links that appear there on that web page.
| | 03:36 | So here I'm going to change the text-color
from this dark gray to white and I am
| | 03:41 | going to go ahead and Save that and now
when I go to the front end of my website
| | 03:46 | and I Refresh, I have my dropdowns and there
is the white text that I wanted. We're still,
| | 03:51 | obviously have a few more things to change,
so we'll keep going.
| | 03:54 | Let's deal with the hover state of those links right now.
| | 03:57 | So what we have going on at the moment
is that blue bar that shows up behind the
| | 04:03 | links as I hover over them,
plus they're the wrong colors.
| | 04:06 | So if I scroll on down here a little
bit further to this style, this has to do
| | 04:12 | with the styling of the hover states of all of those links.
| | 04:17 | There is a whole bunch of stuff here
that has to do with the gradient.
| | 04:21 | I don't even want to use it.
| | 04:22 | I am going to get rid of all the
gradient stuff that's here, bye, bye!
| | 04:26 | So here where the background-color
is indicated I am going to erase that,
| | 04:31 | and I am going to change this to transparent.
| | 04:33 | I don't want to have a background-color,I just want
to hover over those links and see them turn orange.
| | 04:38 | And then I am going to change the
color here from white to fdcf00.
| | 04:46 | And the text-decoration of none, I am going to keep,
because I definitely want that to happen.
| | 04:51 | So let's save this style and let's look
at the front end of the website.
| | 04:54 | When I Refresh, now you will see, there's my
dropdowns and there's that orange
| | 05:01 | that I want to have happen as I roll over
these items in the dropdown menu.
| | 05:05 | Now the very last thing we need to
style is that pointy little guy right here.
| | 05:08 | It took me a really long time to figure
out how that little triangle showed up here,
| | 05:13 | but I'll show you here inside of the CSS.
| | 05:16 | Right here in the CSS where you have this
nav .nav-child before and nav .nav-child after,
| | 05:22 | with all those border kind of stuff that's going on here,
| | 05:24 | this is what is driving the color of that
little triangle, so it's two borders that
| | 05:29 | are intersecting and making a tiny
little triangle on that dropdown.
| | 05:32 | And to change the color here from white
to our dark teal color, we just need to
| | 05:37 | change the color in two locations.
| | 05:39 | So one is here on line 127, I'm going
to change the border-bottom from this
| | 05:46 | light gray color to 00738b.
| | 05:48 | Oops! I have one too many pound signs (#) there.
| | 05:55 | And then down here in .nav-child after, I am going
to change the white here to the same color 00738b.
| | 06:04 | And if I save this, File>Save and I come
back to the front end of my website and
| | 06:09 | I Refresh, now when I take a look at
my dropdowns that little triangle guy
| | 06:15 | right there, he is finally the right color.
| | 06:18 | That is a pretty tricky little style there to work with.
| | 06:21 | So just be aware of that as you are restyling
any of your navigation dropdowns.
| | 06:26 | Now obviously with the styles that you have
here that you can work with,
| | 06:30 | you can continue to modify these,
you could make the quarters more rounded,
| | 06:33 | less rounded, different background colors, all kinds
of effects that you can have with these dropdowns.
| | 06:38 | But now at least you know where the
styles are located, so you can style your
| | 06:42 | navigation dropdowns to look exactly the way you want.
| | Collapse this transcript |
| Styling the main content area| 00:00 | I am now going to turn my attention to
styling some of the content here on the website.
| | 00:04 | Looking at the Home page for a while,
and I know that some of you are really
| | 00:08 | annoyed by the content ramming into the side
of that browser window here on the Home page.
| | 00:13 | As we flip through and we look at some
of the other pages on the website,
| | 00:16 | we have some other issues that
we might want to clean up here.
| | 00:19 | So the breadcrumb is a little bit off
in its alignment here, maybe we want to
| | 00:24 | have a clean line from the Home here in the navigation,
down through the edges of the web page here.
| | 00:29 | We don't have anything appearing in
the right column on the ABOUT page,
| | 00:32 | so we have a big empty space over here.
| | 00:34 | Don't let that throw you yet, I will be
covering how we can make our design more
| | 00:39 | flexible in a future video, but for
right now we're just going to style with the
| | 00:43 | content that we have at the moment.
| | 00:45 | If I come over here to the NEWS &
INFORMATION page, this is the featured blog
| | 00:49 | here which has some styling issues
with it, the PRODUCTS pages, the LINKS
| | 00:54 | page is not really that attractive, the contacts
are all rammed up against the edge as well.
| | 01:00 | So if you take a look at the HTML of
every single one of these web pages,
| | 01:04 | you will find that the HTML part of this is generally
surrounded by some kind of div tag with a class.
| | 01:12 | So here on the CONTACT page if we View
its Source and we scroll on down to the
| | 01:18 | area where the Contact information is
displaying, you'll see something like we
| | 01:24 | do here, div with a class of contact-category.
| | 01:27 | If I go onto the PRODUCTS page and I view this,
this was just linked to a single article.
| | 01:33 | And if I view my Page Source here and
once again scroll on down to the main
| | 01:37 | content area, this has a div with a class of item-page.
| | 01:42 | If we go over to the NEWS & INFORMATION page,
let's say the Solar Blog and I view this here,
| | 01:47 | and View the Page Source here
and I scroll on down a little bit
| | 01:51 | further, you will see that this has a
wrapper class here with a div with a class of blog.
| | 01:57 | What I've done is I've gone through and
I've looked at the HTML for every single
| | 02:01 | one of these Joomla! pages that I've built.
| | 02:04 | And what I am going to do is I am
going to add some padding to these divs.
| | 02:09 | The reason I am adding padding to these
divs is rather than something like the
| | 02:12 | Bootstrap layout here, is I don't want
to mess with all of those classes
| | 02:16 | of span 1, span 2, span 3, span 4.
| | 02:19 | I don't want to change the padding on
those and potentially affect my grid
| | 02:22 | system, potentially affect the way that
this page is going to resize as we put
| | 02:27 | in into tablets on our mobile phones.
| | 02:28 | So I am going to attach some padding
here to the actual content coming out of
| | 02:33 | Joomla! itself and those divs
which are Joomla! generated divs.
| | 02:37 | That will accomplish my goal of
getting this text off the edge of the
| | 02:40 | web page, but hopefully it will keep
it responsive as well without messing
| | 02:44 | with bootstrap.css.
| | 02:46 | So I'm going to go back to Dreamweaver
here and I'm going to add a style for this.
| | 02:50 | So after my headers, after my navigation,
all the way down here at the bottom
| | 02:54 | of my stylesheet, I'm going to put a comment,
put in some Returns so you can
| | 03:00 | see what I'm doing and I am going to put a
comment in here that says main content styling.
| | 03:08 | So I am going to add this class, it
looks pretty complicated but it's actually
| | 03:11 | relatively straightforward.
| | 03:13 | It's a class of item-page, that's a
single article .blog, that's our blog layout
| | 03:20 | .category-list, that's our press
release page which was a category list,
| | 03:27 | blog-featured, that's our HOME page and
the top level NEWS & INFORMATION page,
| | 03:32 | those are the featured items
that would appear in that blog.
| | 03:34 | Contact-category that was our contact
page where you had all of those contacts
| | 03:42 | listed, a pound sign (#) followed by xmap.
xmap does this with an id; it's a third-party extension.
| | 03:47 | That's our site map link down at the bottom.
| | 03:50 | categories-list, which has to do with
the links page and then .login, which has
| | 03:58 | to do with our login page.
| | 03:59 | So, here is the styling we're going to add for that.
| | 04:03 | We are going to say our padding is 03.5ems,
so remember that means that we have
| | 04:09 | no padding on the top and the bottom
but 3.5ems of padding on the left and the
| | 04:14 | right side of that content area.
| | 04:16 | I am also going to give this a minimum height.
| | 04:18 | Some of our pages are shorter than
others and what I'd like to have happen is,
| | 04:23 | I'd like to have the page has just sort
of a minimum amount of height to it, so
| | 04:28 | I am going to call that 450 pixels
and then a little bit of margin at the
| | 04:32 | bottom, so pages that are taller than
450 pixels, right now we will run right
| | 04:37 | into the footer, so I want to give them
a little bit of padding at the bottom or
| | 04:40 | margin in this case, so I am
going to say margin-bottom of 3ems.
| | 04:47 | Save that and if we take a look at
that in our web page, if I Refresh, now you
| | 04:52 | can see that my blog here is off the
edges of the page, it aligns actually
| | 04:57 | nicely with the HOME link, I need to
move the breadcrumb over here, to make that
| | 05:01 | lineup, but you can see that the
Blog page is looking pretty good.
| | 05:04 | We have some styling down here in the
footer we need to do, but we'll accomplish
| | 05:07 | that in another video.
| | 05:10 | There is our styling here on our
PRODUCTS page, so you can go on through and you
| | 05:13 | can click on all of these and you'll
see that we have some nice styling here in
| | 05:17 | place on all of these pages on the website.
| | 05:20 | On some of the other pages we need to
add a little bit more styling, like on our
| | 05:23 | Login page I would like to add no minimum height here.
| | 05:29 | What's going on is that we've given this
page a minimum height in that margin on
| | 05:33 | the bottom and what's happened
is our Login box is separated.
| | 05:35 | So I have my Login box here, but when I
scroll down I have Forgot your User Name
| | 05:39 | and Password way down here on the bottom.
| | 05:41 | So I am going to override these styles a little bit next.
| | 05:45 | So in Dreamweaver, I'm going to add
another style here just after that one for Login.
| | 05:52 | Remember, since this style comes second
it'll override anything that I styled in
| | 05:55 | the first style and I am going to say the
margin-bottom of 0 and a min-height of auto.
| | 06:04 | So this will be the one page
that doesn't have a minimum height.
| | 06:07 | Now when I come back here and I Refresh
this page, the Login box looks a little
| | 06:13 | bit better here at least.
| | 06:14 | Another style I'd like to add has to do
with the images that are here on our website.
| | 06:19 | So these images right now potentially
can run right into the pictures here.
| | 06:24 | If you particularly look in the
PRODUCTS area, you'll see text gets awfully
| | 06:28 | close to some of these pictures
as you flip through the pages here.
| | 06:32 | Remember the way that we styled these
particular pictures, we assigned a lot of
| | 06:36 | these pictures a class of image-circle,
image-polaroid or image-rounded.
| | 06:41 | That accomplished some of these effects
that you see in the pictures and we did
| | 06:44 | this in the Joomla! 3 Essential Training Course.
| | 06:46 | The image itself carries the class, so
here this is the class of image-rounded,
| | 06:53 | here is a class of the image-circle, a
better example of that is here on the
| | 06:56 | ABOUT page where you definitely get a circle.
| | 06:59 | Also image-polaroid, so if go to the
PRODUCTS page, this is an example of image-polaroid.
| | 07:05 | So if you've given your images a
consistent treatment in this way, we can add
| | 07:10 | some styling to these as well, so I'm
going to go back to my stylesheet here and
| | 07:14 | I am going to add a style of .image-circle
.image-polaroid and .image-rounded.
| | 07:25 | As I said in the Essential Training
video, it's likely that you're going to
| | 07:29 | pick one of these styles and apply it
to your pictures if this is something
| | 07:32 | that you want to do.
| | 07:33 | So I am going to add some
margin to this, 0 0 1em 1em.
| | 07:39 | So remember TRBL, so this is 1em of
margin that's added on the bottom and the
| | 07:44 | left side of those images.
| | 07:46 | Since I've got them all on the right
side of the screen, this will help give
| | 07:49 | them a little bit of breathing room.
| | 07:51 | As I Refresh here, you can see now
I've got a little bit of breathing room
| | 07:54 | around that picture.
| | 07:55 | The last little style I'd like to take
care of is here on my CONTACT page and
| | 08:00 | one of the things that annoyed me about
that is that I have this box up here for
| | 08:04 | this Contact Filter Search.
| | 08:05 | Well we have got four contacts here;
| | 08:07 | I don't really need a box to filter them by.
| | 08:09 | There isn't a way that I can obviously
turn this off in the backend of Joomla!
| | 08:13 | So what I'd like to do is I'd like to
hide that box and the only way I can
| | 08:17 | really do that is through CSS.
| | 08:19 | So let me just add a quick little style
to hide that box and I am going to put
| | 08:23 | in a comment here, hide filter box on contact list.
| | 08:30 | So that will be a class of contact-category
and then .inputbox.
| | 08:37 | If you look at the HTML, that's
where I got this from, and I am going to
| | 08:41 | say display of none.
| | 08:44 | So that's a unique style that I've
written here, you look at the HTML you'd find
| | 08:47 | out that a CSS class is that you need to work with,
string them together into a style,
| | 08:51 | save that and now when I come back
to this web page and I hit Refresh,
| | 08:55 | that box is now gone.
| | 08:59 | So with a few little tweaks, things are looking a bit better.
| | 09:02 | We still have a little bit of work to do
here on the HOME page where these
| | 09:05 | Testimonials are concerned
and I am going to cover that in the next video.
| | Collapse this transcript |
| Styling the testimonials| 00:00 | I'd like to work on the Testimonials on
this side of the page here and right now
| | 00:04 | this is driven by a custom HTML module
that we created in Joomla! 3 Essential
| | 00:09 | Training, as you see here, it's just
sort of a laundry list of testimonials.
| | 00:13 | Bootstrap offers some really nice styling
where quotes are concerned and you can
| | 00:19 | take a look at the documentation for
how to style quotes in the Bootstrap
| | 00:23 | documentation at getbootstrap.com,
but I am going to go ahead and first of all
| | 00:27 | I am going to edit the HTML here
that makes up this Testimonials page.
| | 00:31 | So to do that I am going to hop into
the backend of Joomla! and I'm going to go
| | 00:34 | to Extensions>Module Manager.
| | 00:38 | And I am going to scroll on down here to my
Testimonials and click on that to edit it.
| | 00:45 | And I am going to switch over to my
Custom output tab here and I'm going to put
| | 00:50 | this to toggle the editor and I am just
going to copy the HTML that I have here,
| | 00:54 | Ctrl+C or Cmd+C to copy it.
| | 00:56 | And in Dreamweaver what I am going to
do is I am just going to open a New HTML
| | 01:00 | Document here, just so I can paste in
this little bit of HTML here, so I can
| | 01:06 | format it and see what I'm doing easily,
so that you can see it while I format it,
| | 01:10 | and then we'll paste it back into Joomla!
| | 01:12 | So, what we have here is a
series of these little quotes here.
| | 01:17 | If I switch over to Design View I
can clean this up really, really quick.
| | 01:21 | Get rid of these line breaks so
that at least we are working with three
| | 01:24 | paragraphs, so there we go, three
paragraphs of text, and as you see here right
| | 01:31 | now I have a line break followed by this person's name.
| | 01:34 | What we can do with Bootstrap and its styling.
| | 01:38 | So let's work on this first quote here,
I can wrap this with a blockquote tag,
| | 01:45 | which is semantically correct because
we are in fact quoting people here.
| | 01:49 | Blockquote tag normally
indents things just a little bit;
| | 01:51 | this is certainly no exception with Bootstrap.
| | 01:54 | What Bootstrap says is if you take
the quote itself and you wrap that in a
| | 01:58 | paragraph tag, and then you follow
that paragraph tag by a tag of small,
| | 02:05 | surrounding the person who made that
quote, you don't need to put a little tilde
| | 02:10 | (~) in front of it the way I
had before, you can take that out.
| | 02:13 | Bootstrap will actually write
in an em dash in front of it.
| | 02:16 | If you style your HTML this way, just
like this on your page, then you will
| | 02:23 | wind up with some actually quite nice formatting
inside of your Joomla! page.
| | 02:28 | So I am going to go ahead and format
these other two quotes here just the same
| | 02:32 | way I've formatted this first one.
| | 02:34 | And when I have the HTML done here,
I'll show you how to put that in Joomla!
| | 02:44 | Okay. I've gone through and I formatted
all of these HTML here.
| | 02:48 | I'll give this HTML to you as a free exercise file,
so if you don't want to go
| | 02:52 | through and format this yourself,
you can just copy from the Exercise File.
| | 02:55 | Now I'm going to highlight these
three blockquotes that I have here and I'm
| | 02:59 | going to Ctrl+C or Cmd+C to copy them.
| | 03:02 | and I am going to go back to Firefox here
and I am going to erase what is in
| | 03:07 | this Custom output box and Ctrl+V or
Cmd+V to paste in the text that I just
| | 03:11 | formatted in Dreamweaver, and
then I'm going to say Save & Close.
| | 03:16 | Now when I Refresh the front end of the
website my Testimonials look better already.
| | 03:21 | So you see here that my Testimonials
have this nice little line, it's a very,
| | 03:25 | very pale gray, so you can just barely see it.
| | 03:28 | There is actually I think, possibly
a little bit of shading around these
| | 03:31 | blockquotes as well, and you can
see the person's name down here on the
| | 03:35 | bottom has an em dash in front of the
name followed by the name itself and
| | 03:39 | they are scaled back, they are just grayed
out just a little bit, plus the text is smaller.
| | 03:43 | So that's pretty attractive.
| | 03:44 | I'd like to add to the styling of that
just a little bit, so I am going to add
| | 03:49 | an additional style here inside of Dreamweaver.
| | 03:52 | So I am going to open up Dreamweaver here,
I am going to close this page that
| | 03:55 | I just created, I am not going to save it,
this is just the little scratch page
| | 03:58 | that I used to format this code.
| | 04:02 | And here in my custom.css, just after
where I have hiding the filter box on
| | 04:07 | contact list I'll put in more Returns,
so you can see what I am doing
| | 04:12 | and I'm going to put in a comment that
this is the testimonial styling.
| | 04:19 | So the HTML that I am working with
for a custom HTML module, the HTML tag that
| | 04:25 | surrounds that is a div with a class of custom.
| | 04:28 | So I'm going to go ahead and style that,
first of all .custom, I am going to
| | 04:34 | push my testimonials down the page a little bit.
| | 04:36 | So if I say padding-top of 5ems, that will push
the entire block down the page a little bit.
| | 04:45 | Right now I feel like the word Testimonials
is competing with Harnessing wind
| | 04:48 | and sun for a cleaner, energized planet.
| | 04:50 | So by pushing this down a little bit,
it'll make it a little more clear that
| | 04:53 | this is something that's going on
in the left column here, and it's not the
| | 04:57 | main focus of the page.
| | 05:00 | And then I am going to add .custom
blockquote, so that's the blockquote tag that
| | 05:05 | occurs inside of a class of custom,
which would be the tags that we just added.
| | 05:12 | And I'm going to add a background-color of dbf1f8,
which is a lovely shade of pale blue.
| | 05:23 | I am going to give this some padding,
2px 2px 2px and 7px, TRBL, so a little bit
| | 05:33 | more padding on the left
than on the other sides.
| | 05:36 | And then border-left,
right now is a pale gray line.
| | 05:41 | I am going to change this to a 5px
solid 59c0e1, that's our bright blue that
| | 05:48 | we used in the navbar.
| | 05:50 | And if I go ahead and Save this and
Refresh my web page, you'll see that my
| | 05:56 | Testimonials here have moved down the
page a little bit and you can see that
| | 06:00 | I have some nice padding around
those Testimonials in the blue line.
| | 06:04 | I think I am going to get rid of
that word Testimonials, that is, I can
| | 06:07 | configure through the backend of Joomla!
I am just going to turn off the title.
| | 06:11 | It's fairly obvious that those are testimonials,
now they pop out a little bit
| | 06:14 | more and they are a little bit prettier.
| | 06:16 | I'm going to turn off that title.
| | 06:17 | So here in the backend of Joomla!
I am going to go back into my Testimonials
| | 06:22 | module, and I am going to set the
Show Title to Hide and say Save & Close, so
| | 06:28 | that will get rid of the word Testimonials
up there on the top, so that looks a lot better.
| | 06:32 | The very last thing that I need to do now
is I have these Testimonials running
| | 06:36 | right on into the very edge of the web page
and I'd like the edge of the
| | 06:40 | Testimonials to line up with the edge
of my flags and the Search box up here.
| | 06:44 | We made this space here about 1 em,
so I'm going to add 1em of spacing here to
| | 06:49 | the side of this page.
| | 06:51 | I am going to make this a little bit more generic.
| | 06:53 | Anything that happens to go over here
in this column will have a div with a span
| | 06:58 | of three surrounding it,
followed by a module table class.
| | 07:01 | And so I'm just going to add
a style here to handle that.
| | 07:05 | So here in my backend of Dreamweaver
I'm going to go ahead and add that, put in
| | 07:13 | a comment again, and my comment will
say breathing room on the right column,
| | 07:20 | giving just a little bit of
space over there on the side.
| | 07:23 | So this will be div.span3.moduletable
and that will have a padding on the right
| | 07:32 | of 1em and I am going to Save that.
| | 07:37 | And when I Refresh my web page, there we go.
| | 07:40 | So now we have a nice little gutter here going
on all the way down the page on the side,
| | 07:44 | our Testimonials are looking so much better
and the page overall is starting to look really good.
| | Collapse this transcript |
| Styling the breadcrumbs| 00:00 | So I am on the ABOUT page of the front end
of my website and the ABOUT page has
| | 00:05 | this breadcrumb in place.
| | 00:06 | It's a little bit hard to see here on
my monitor, maybe you can see it better
| | 00:10 | where you are, but the breadcrumb right
now is not completely aligned with the
| | 00:14 | navigation bar and the text
that's lined up underneath of it.
| | 00:17 | There is also a very pale background color
associated with the breadcrumbs. It's so pale,
| | 00:23 | you may not be able to see it on your monitor at all.
I can just barely see it on mine.
| | 00:28 | I have to look from the right angle in
order to see it and I also like to get
| | 00:31 | rid of that little gray bar there as well.
| | 00:34 | So I am going to go ahead and write a style to do that.
| | 00:36 | So here inside of my Dreamweaver here,
I am going to scroll all the way down to
| | 00:40 | the bottom of my stylesheet, right around line 179.
| | 00:44 | I am going to go ahead and add another comment here.
| | 00:47 | This will be breadcrumb styling
and I am going to go ahead and style things.
| | 00:54 | So this will be a class of breadcrumb.
| | 00:57 | If you look at the HTML for the document,
you will see that there is a class
| | 01:01 | of breadcrumb that goes all the way
around the breadcrumbs and I am going to
| | 01:06 | go ahead and put in my background-color of white
and padding on the left of 2.2ems and Save that.
| | 01:21 | So now when I come back to the front end
of Joomla! here and I Refresh,
| | 01:26 | there, my breadcrumb is now nicely aligned
with the navigation and with the textunderneath of it.
| | Collapse this transcript |
| Styling the search button| 00:00 | Now this page is starting to get in a shape here.
| | 00:03 | The Search button here that says Go!
| | 00:05 | looks a little bit out of place.
It's a lovely shade of blue, but it just
| | 00:08 | doesn't match the rest of the web page.
| | 00:10 | And in fact, styling on buttons like that
is used in a couple of places on the website.
| | 00:14 | If I go down to let's say my link to
the Log in, you will see I have a button
| | 00:18 | styled similarly here for the Log in
or if I go to my CONTACT pages,
| | 00:23 | the buttons here to fill out the contact form,
those buttons are also styled in exactly the same way.
| | 00:29 | So the way that the HTML is set up for
those particular buttons, if I view the
| | 00:34 | Page Source here and I scroll on down
to the Search box, you will see here
| | 00:41 | that I have a button and it has a
class of button and button btn and
| | 00:45 | button-primary (btn-primary).
| | 00:46 | There is a number of these buttons
that are styled inside of Bootstrap.
| | 00:50 | This one happens to be called btn-primary,
which is the blue color, but there's a
| | 00:54 | whole rainbow of these buttons, like btn-warning and red,
yellow, green and so forth that are used.
| | 01:00 | The styling for this button is coming
directly out of Joomla! for btn-primary.
| | 01:04 | So what I am going to do is I am going to
track down the styles that are associated
| | 01:07 | with this particular button, copy them
out of the Bootstrap stylesheet and then
| | 01:11 | style them or restyle them
inside of my custom stylesheet.
| | 01:15 | So to do this, I am going to start with
Firebug, click on my Firebug button.
| | 01:21 | If I come back on up to the top of the
page here and look at my header,
| | 01:25 | then I look at the div with a class of span8,
which is the right side of the screen,
| | 01:29 | the second div with a class of moduletable
is my search box, and scrolling down
| | 01:34 | here in Firebug a little bit further,
eventually, I find my button here.
| | 01:38 | When I click on that, I can see the
styling over here is for btn-primary.
| | 01:43 | So I am going to go ahead
and copy that CSS declaration.
| | 01:47 | Then I am going to switch back to Dreamweaver
and my Bootstrap stylesheet,
| | 01:50 | Ctrl+F or Cmd+F to find, and I am
going to going to look for btn-primary.
| | 01:55 | I find that here inside of the page,
we have an active version of this first,
| | 02:00 | and then we have btn-primary,
which is what we really want at line 2539.
| | 02:05 | So I am going to highlight this style
all the way on down, and in fact,
| | 02:10 | I am going to grab the hover
state while I'm here as well.
| | 02:12 | So I'm just going to take the two style declarations
here btn-primary
| | 02:18 | and the btn-primary in the hover state and so forth.
| | 02:21 | Ctrl+C or Cmd+C to copy that, then we
are going to switch over to the custom stylesheet,
| | 02:24 | scroll down to the bottom of the page
here and just after the
| | 02:28 | breadcrumb styling, I'll put in a comment:
| | 02:30 | that this is the primary button styling.
| | 02:37 | And I am going to paste in my styles here,
both the primary button and the hover
| | 02:43 | state of that button and now I am
going to make some edits to these.
| | 02:47 | So, first of all I am not going to
change the color of the text and I'm not
| | 02:51 | going to change the fact that there's
a little bit of a text shadow on that.
| | 02:54 | I am just going to go
ahead and get rid of those.
| | 02:57 | Then I have a background-color that's set.
| | 02:58 | I'm going to set this to #2293b9 and
then this is followed by five lines
| | 03:06 | of background image.
| | 03:07 | This is how you're putting a gradient
into the web page, the first four lines
| | 03:11 | are browser specific, so one for Mozilla,
some for our webKit, various versions
| | 03:16 | of webKit, and then the last one is for
Opera and then the final line there has
| | 03:21 | to do with the standards correct
version of how you include a background
| | 03:24 | gradient in your web page.
| | 03:26 | All of these need to change, so any time
you see this color of 0088cc, what I am
| | 03:30 | going to do is I'm going to change that
color to 2293b9 and in fact I am going
| | 03:40 | to copy that and I'm going to paste that in,
in all of these occurrences here on
| | 03:45 | this page, just copying and pasting.
| | 03:47 | And then down here at line 193 where
you have this line about filter,
| | 03:51 | this is the Internet Explorer way of handling gradients,
| | 03:55 | leave the first two ffs and
then paste in your color there.
| | 03:58 | Then the second color where it's 0044cc,
I am going to change that to 1e82a4,
| | 04:07 | once again I am going to copy that and
I am going to paste that in, in several
| | 04:11 | locations as well, all those
locations where that color appears.
| | 04:17 | Also down here in the Internet Explorer
version of the color, you'll also see it
| | 04:21 | here in this border, so I am going to
paste it in there, and it's here in this
| | 04:26 | background-color with a star in front
of it, I believe that star is an IE 7 hack,
| | 04:30 | anytime you see that star,
starting one of these attributes;
| | 04:34 | that is an indication of an IE 7 hack.
| | 04:36 | If I Save this and I Refresh the front
end of the website, my Search button now
| | 04:43 | looks a nicer color, certainly blends
with the web page a little bit more.
| | 04:47 | When I roll my mouse over it, I get
this oddball sort of half and half effect,
| | 04:51 | that's I haven't styled my hover state yet.
| | 04:53 | So let me go back and do that.
| | 04:56 | So scrolling down just a little bit
further to where I have the hover state
| | 04:58 | declared here, the color is going to be
white and the background-color is going
| | 05:03 | to be 1e82a4 and that will be for both of these.
| | 05:10 | I am going to go ahead and Save that
and when I come back and I Refresh the
| | 05:16 | front end of my website,
now when I roll over my Go!
| | 05:19 | button here, you can see that it's a
subtle change, but it is in fact changing a
| | 05:24 | little bit in response to hovering over
this button and it matches the web page
| | 05:28 | so much nicer than it did before.
| | Collapse this transcript |
| Styling the footer| 00:00 | We've finally have styled more or less
the top of this website for the Desktop.
| | 00:05 | We're still going to have some work to do here
on mobile but I'll cover that the next chapter.
| | 00:10 | As we scroll on down the page here,
have we let anything out?
| | 00:14 | Oh yeah, here's a footer down here.
| | 00:17 | So let's spend some time styling this footer.
| | 00:20 | Remember the HTML that we have here for
this web page, down towards the bottom of
| | 00:25 | the web page we have a footer HTML tag
here with class a row-fluid.
| | 00:30 | This is divided into two divs, one with
the class of span9, one with a class of span3,
| | 00:36 | and you can see inside of it we have some text,
we have a menu here and
| | 00:42 | we have logo over on the right side of the screen.
| | 00:45 | So I'm going to go ahead and add some
styles to this now, and in Dreamweaver
| | 00:50 | here in my custom CSS stylesheet, I'm
going to scroll on down here to around
| | 00:56 | line 210 I am going to put in a comment,
which is footer styling, and then I'm
| | 01:02 | going to put in some styles.
| | 01:04 | So starting with footer just the HTML tag footer,
background-color is going to be 59c0e1.
| | 01:16 | If we save that and we look at the front
end of the website here, that will give
| | 01:20 | us a lovely blue bar down
here at the bottom of the page.
| | 01:23 | Now you can see that our text over
here on the site is smooshed into the edge
| | 01:28 | of the page, we probably would like to get
that off the edge of the page a little bit.
| | 01:33 | The image down here is fine, but this text
over here on the side is a little bit off.
| | 01:36 | Let's adds some styling for that.
| | 01:38 | so if I say footer .span9,
I'm going to add some padding:
| | 01:44 | 4em 0 0 3em and if I Save that and I
Refresh here the bottom of the web page,
| | 01:53 | there we go, so we've got a little bit of
breathing room off the top of the page here;
| | 01:57 | that looks a lot better.
| | 01:59 | My paragraph isn't quite in line with
the text that's underneath here, it is if
| | 02:03 | you hover over the HOME button, the edge
of the white bubble here is directly in
| | 02:07 | line with that Copyright, but most the
time you're not going to be on that page
| | 02:12 | of the website you're not going to see
the HOME item selected, so what I'm going
| | 02:16 | to do is align the text here in the
paragraph above it from the Copyright
| | 02:20 | statement even with the H in HOME.
| | 02:23 | So let me make that little tweak, so
that would be footer p, and now we'll have
| | 02:29 | a padding on the left of 0.75ems, Save
that and let's Refresh the web page,
| | 02:40 | there we go, now my paragraph is in line there.
| | 02:43 | Speaking of that menu down here on the
bottom, remember we made this menu go
| | 02:47 | this way through the class of nav-pills
that we added to a custom class on the module.
| | 02:52 | What I would like to do now is style
those link states just a little bit more,
| | 02:56 | I'd like the links to be white and
then on hover, you see that they change
| | 03:01 | color here to this blue.
| | 03:02 | I'd like that blue to be the same blue
is my background blue here, so I'm going
| | 03:05 | to write a style for that.
| | 03:07 | So this will be footer.nav-pills a, and
here the color is going to be white fff,
| | 03:19 | followed by a footer .nav-pills a:hover,
| | 03:25 | and in this case I want the color to be 59c0e1;
| | 03:35 | close up that bracket there, Save
that and when I Refresh the bottom of this
| | 03:40 | web page, we now have a
really nice looking footer.
| | 03:43 | I've a copyright statement.
| | 03:45 | As I move over my three links down
here in the bottom, I have a great little
| | 03:50 | hover effect with the pillbox that shows up there.
| | 03:53 | When I happen to be on the actual Log in page,
down here at the bottom it's very
| | 03:58 | clear where I am, the blues all blend
in nicely and everything looks great!
| | 04:03 | So I'm very pleased with the way that the
Desktop version of my site has turned out.
| | 04:09 | Now I need to start thinking about how the site
is going to look on tablets and on phones.
| | Collapse this transcript |
|
|
7. Styling Your Template for Tablets and PhonesStyling the tablet and phone menu button| 00:00 | Now that we've got Desktop of the website
looking great, let's take a look at
| | 00:04 | how things are shaping up as we make
the site work for tablets and phones.
| | 00:11 | So the easiest way to do this is just to grab
your browser and make it a little bit smaller.
| | 00:16 | As you can see here the moment I've
done that I have my button here that shows
| | 00:21 | up for my navigation bar.
| | 00:22 | That button could with a little bit of styling.
| | 00:24 | When I click on this button, I can
see my navigation here underneath.
| | 00:28 | But there are definitely some things
that are lacking here.
| | 00:32 | I probably don't want these dropdown showing up.
| | 00:34 | I probably want the navigational spelled out.
| | 00:36 | And of course, as I roll mouse over
things here, I can't read the text here
| | 00:40 | anymore, because it's
white on a white background.
| | 00:42 | So I've got some styling work I
definitely need to take care of here.
| | 00:46 | And then as I pull the page in and
you can see the kineteco logo continues
| | 00:51 | to reduce in size, the page gets a little
bit smaller, the search box comes on over.
| | 00:57 | At some point there's a breakpoint
that occurs that logo gets really big.
| | 01:01 | And then the search box is going to
slide underneath of the logo until it gets
| | 01:06 | particularly small here.
| | 01:08 | And then it stops moving at some point in time.
| | 01:11 | So this layout isn't particularly attractive,
that's something we're definitely
| | 01:15 | going to want to change.
| | 01:16 | And I better have to spend some
time working on that button as well.
| | 01:20 | So there are many things that I need to
change about this layout in regards to a
| | 01:24 | tablet and a phone layout.
| | 01:25 | And I'll be going to those in this chapter.
But first let's focus on this button.
| | 01:29 | So I'm going to make my browser window
here a little bit bigger again.
| | 01:33 | So right about there where that button appears
and the button here I'd like
| | 01:37 | to style, so it's that darker blue to figure out
exactly what styles are driving this.
| | 01:42 | As always we are going to start here with Firebug.
| | 01:45 | So if I click on Firebug, I'm going to
scroll on up to the top here, find my div
| | 01:51 | with the navbar in it, navbar-inner,
container-fluid and then I have maybe some
| | 01:58 | styles here, so if I click on that,
I'll see that I have some styles over here,
| | 02:02 | that would be navbar-button navbar.
| | 02:05 | And these are styles that make this
button white or very, very pale shade of
| | 02:10 | gray and put in the drop shadows here.
| | 02:13 | So that is one style I'm going to want to grab.
| | 02:15 | If I roll my mouse over that button,
then we see the hover state for this
| | 02:19 | particular button, and I'm going to,
want to grab that hover state as well.
| | 02:26 | And there's the hover state there.
| | 02:28 | So I'm going to want to grab those two things.
| | 02:30 | So let me go and find the style
inside of my Bootstrap styles.
| | 02:34 | If I go ahead and highlight that and
Ctrl+C or Cmd+C to copy it,
| | 02:38 | I'm going to hop back into Dreamweaver,
I'm going to go back here to Bootstrap
| | 02:42 | and I'm going to Ctrl+F or Cmd+F and paste
in the code that I'm looking for here,
| | 02:49 | navbar-button navbar, find Next and there's my style.
| | 02:54 | So I am going to go ahead and copy
here at line 3574, I'm going to copy this
| | 03:00 | whole style, all the way, all the way,
all the way down and then just after that
| | 03:05 | at line 3600 is the style for the hover states.
| | 03:08 | So I'm going to go ahead and copy that,
Ctrl+C or Cmd+C to copy,
| | 03:13 | and I'm going to paste this into my custom stylesheet.
| | 03:16 | I don't need to use a Media Query with
this just yet, I'm just going to go ahead
| | 03:21 | and paste this here just after the footer,
and I'll put in a comment, this is around line 226 that:
| | 03:27 | this is styling for the button for navigation
for tablets and phones.
| | 03:38 | Okay. So now I can go on down list here
and alter the way that this is looking.
| | 03:43 | So my first bunch of styles here,
I'm going to keep all of these things.
| | 03:48 | So I can go ahead and delete this first part
of the style here.
| | 03:51 | I'm just going to with start with the background-color.
| | 03:53 | So the background-color I
am going to set to 1e82a4.
| | 04:01 | Then I am going to change the way
the gradient is working here.
| | 04:04 | So where I see f2 here in the gradient
I'm going to change that to 00738b,
| | 04:09 | and copy that style and paste that in anywhere
I see f2f2f2, which of these five things here.
| | 04:21 | Down a little bit further in the IE
specific gradient style, paste that in there.
| | 04:28 | Then from this other darker color here,
my color will be 1e82a4, I'm going to go
| | 04:35 | ahead and copy that and paste that in
where it occurs, which will be here on
| | 04:40 | these styles, here inside the 1e style,
also in the border-colors and a
| | 04:49 | background-color down here at the bottom.
| | 04:52 | Okay, so if I go ahead and say file Save
and I come back to the front end of the
| | 04:57 | website and I Refresh.
Close Firebug here, Refresh.
| | 05:02 | Now I have a nice dark looking button,
but when I roll my mouse over it you can
| | 05:07 | see that it is actually turning white.
| | 05:09 | I haven't styled my hover state yet,
but the button is looking good.
| | 05:13 | All right, so if a scroll down a little
bit further here, then here is the hover state
| | 05:16 | for this particular button.
| | 05:18 | What I'm going to do is change the color
from fff to 59c0e1 and my
| | 05:28 | background color will be 1e82a4
and I'll put that in twice, 1e82a4.
| | 05:39 | Go ahead and Save that and when I Refresh the
front end of my website, there's my button.
| | 05:44 | When I roll mouse over it, it actually
looks reasonable there and of course
| | 05:49 | when I click it, I get my menu.
| | 05:51 | The menu still isn't working right,
but at least the button is looking good now.
| | Collapse this transcript |
| Styling the navigation bar for tablets and phones| 00:00 | The next thing we should fix for tablets
and for mobile phones is this menu mess
| | 00:05 | that we have going on here.
| | 00:06 | The button looks great, it works well,
and we have a menu that pops up here,
| | 00:10 | but unfortunately this hover state is
not good, we can't read the link that's
| | 00:14 | there underneath of this, and then
these things, with secondary navigation show
| | 00:18 | up as dropdown menus.
| | 00:19 | What we need to do now is we need to
write a style that will have all of my
| | 00:24 | navigation display on this page all at once.
| | 00:27 | I just want to spell out all of the
navigation here without the dropdown menus.
| | 00:31 | I want it to appear all at once when I
click the button, I don't want things to
| | 00:35 | appear when I roll over them or anything else.
| | 00:37 | Remember that people who are going to
be surfing with tablets and with phones
| | 00:41 | are going to be using their finger for
navigation, so you want to make sure you
| | 00:44 | have a big clickable area that their
fat little fingers can go in and click on
| | 00:48 | and not click on something else by mistake,
and these drop-down kind of things
| | 00:53 | aren't really conducive to working
in a mobile sort of environment.
| | 00:55 | So I am going to go ahead and restyle this,
specifically for this size screen and smaller.
| | 01:02 | The breakpoint, and breakpoints are
that point where the layout of the screen changes,
| | 01:08 | so for a while the screen has the
navigation bar on it and then
| | 01:13 | somewhere right around in here, boom!
| | 01:16 | the navigation bar goes away.
| | 01:18 | Where that value occurs for the width
of this window is called a breakpoint
| | 01:23 | in media queries and that
breakpoint happens at 979 pixels.
| | 01:28 | This is actually set in
the backend with Bootstrap;
| | 01:30 | we are taking a look at what
those values are exactly later.
| | 01:33 | So what I want to do is I want to say
for 979 pixels and smaller,
| | 01:37 | because this button is going to be
present for 979 pixels and smaller.
| | 01:42 | Then I want to have something happen
and that is I want my menus to display
| | 01:46 | differently at screen widths smaller than 979 pixels.
| | 01:49 | So I am going to show you how to do that now.
| | 01:52 | So here in Dreamweaver, I'm in my custom
stylesheet and if we scroll down to the
| | 01:58 | navbar dropdown code that we took from
Protostar here, the very first style is
| | 02:05 | nav .nav-child and this is responsible
for most of the functionality behind
| | 02:11 | those dropdown menus that we
have inside of our website.
| | 02:14 | So what I want to do now is I want to
take this style and I need to adapt it for
| | 02:19 | the screen widths of 979 pixels and smaller.
| | 02:22 | So what I going to do is start by
just copying this style and copy and I am
| | 02:28 | going to scroll down to the bottom of my web page
and I am going to add a media query,
| | 02:32 | somewhere around line 255 here.
| | 02:34 | And the way to do that is to say @media
and then I am going to put in
| | 02:40 | parentheses max-width of 979 pixels.
| | 02:46 | So what I've just said is if the
screen width is 979 pixels or less,
| | 02:53 | no wider than 979 pixels, then do what's
inside of these particular curly brackets.
| | 02:59 | So inside of this media query here,
I'm going to paste that style that I just
| | 03:05 | copied from my stylesheet and I'm
going to make some changes about
| | 03:09 | how this style is put together.
| | 03:11 | So first of all the dropdowns are mostly
controlled by the first five or six styles here.
| | 03:15 | The position of absolute
we're going to change to static.
| | 03:19 | Remember all HTML elements have
a position of static by default;
| | 03:22 | you override these to absolute or
relative as part of your CSS positioning.
| | 03:27 | The top and left values are only
useful if you're using absolute or relative
| | 03:30 | positioning, so we can get rid of these and
change these to auto, and the left will be auto.
| | 03:37 | The z-index we can ignore and
display none, so of course, the dropdown
| | 03:42 | menus are not going to display until
you roll your mouse over some link,
| | 03:45 | and then they do display.
| | 03:46 | We want the dropdown menus displaying
all of the time, so I'm going to change
| | 03:50 | this display none to a display block.
| | 03:52 | And these dropdown menus are floated
right now, they are floated left,
| | 03:56 | I don't want them floated at all, so I'm
going to change this to a float of none.
| | 04:00 | The next few items have to do with
the styling of these links in terms of
| | 04:04 | minimum-widths, paddings, margins, list style.
| | 04:05 | You can take those out or leave
them in, whatever you like to do.
| | 04:08 | I'm just going to ignore them.
| | 04:10 | Then I come to my background-color and
here with my background-color right now
| | 04:14 | it's that dark teal color.
| | 04:16 | I would like that background-color on
these menus to be transparent, so I am
| | 04:20 | going to change this to transparent.
| | 04:22 | Then I have a bunch of borders, on my
old dropdown menus there was a line that
| | 04:27 | went around the dropdown menu along
with some rounded corners and a drop
| | 04:30 | shadow, that's what all this next bunch
of code is and what I've found is it's
| | 04:34 | best to just zero all of this out.
| | 04:37 | So instead of a border with a width
of 1px, I'll just say it has 0px width.
| | 04:42 | Instead of these rounded corner type of
things that are going on here,
| | 04:46 | I am just going to set those to 0 also.
| | 04:50 | And then here with the drop shadows I'm
going to set these numbers here
| | 04:55 | from 5px and 10px to 0px and 0px, and there we go.
| | 05:04 | So that is all of that particular styling.
| | 05:07 | I basically zeroed out all the borders, all
the rounded corners and all of the drop shadows.
| | 05:11 | You of course can do whatever you
like with your styling, but this is the
| | 05:14 | direction I am going here, and we're
going to save my stylesheet, and now when I
| | 05:17 | go into Firefox and I hit Refresh and
click my down button here, I can now see
| | 05:23 | my menu displayed on this page.
| | 05:25 | You can see the links here, I've still
got these nice texts here, I can rollover it,
| | 05:31 | it turns orange and it's looking better.
| | 05:33 | The next thing I need to fix is I'd
like to change the font-size for these
| | 05:37 | smaller text here, right now it's kind
of tiny, I'd like to make it a little bit
| | 05:41 | bigger so it's easy to click on.
| | 05:43 | So in Dreamweaver at the end of my first
style here, I am going to add the style
| | 05:48 | of nav ul.nav-child a. So in other
words, for my links that occur in my
| | 05:56 | secondary navigation, I would like
to have a font-size of 16 pixels.
| | 06:03 | And then I'm going to address the
problem of that white on white hover
| | 06:07 | state that we have there.
| | 06:08 | There is a white big pill sort
of background and white text.
| | 06:12 | So I'm going to change that, the style
is navbar .nav > li > a:focus,
| | 06:23 | .navbar .nav > li > a:hover.
| | 06:34 | And we're going to set this to have
a background-color of transparent.
| | 06:41 | Go ahead and Save that and if we take
a look at our website, Refresh, hit our
| | 06:46 | down button again, now I have text
that's a little bit bigger here, it'd
| | 06:50 | probably be easier to handle with a finger.
| | 06:52 | I'm trying to roll my finger over those
links and that big bubble highlighting
| | 06:57 | the top-level navigation as I
rollover it is now gone, so that's all good.
| | 07:02 | The last thing I need to get rid
of are those funny little triangles.
| | 07:05 | And if you recall that little
triangle styling happened back up here again
| | 07:10 | inside of the styles that were written
for the dropdown menus, they were the
| | 07:14 | nav .nav-child before and nav .nav-child after.
| | 07:18 | There was a bunch of
styling associated with these.
| | 07:21 | I just don't want them to display anymore.
| | 07:23 | So I'm going to take this style,
nav .nav-child before down here in my
| | 07:28 | media query and I'm going add some styling
here and what I'm going to say
| | 07:38 | is nav .nav-child: before,
and nav .nav-child: after display: none and Save that.
| | 07:50 | Now when I come back and I Refresh my
web page and I hit my down button here,
| | 07:55 | those little triangles that appear on the top
are no longer there.
| | 07:58 | So now I can roll my mouse over these links,
it's a much easier to read menu.
| | 08:04 | It looks good and it should be easy to
use on a tablet or a phone, now that my
| | 08:09 | links are big enough that I should
be able to select those individually.
| | Collapse this transcript |
| Including the mobile logo| 00:00 | One of the great features that are built
into Bootstrap, are some styles that
| | 00:03 | are designed to show content
depending on the device.
| | 00:07 | And I want to show you how those styles
are configured here inside of Bootstrap.
| | 00:11 | So I'm at get bootstrap.com and if we go
over to the Scaffolding portion of this
| | 00:17 | website and then click on Responsive
Design, this is going to show us the
| | 00:22 | documentation pertaining to the
Responsive Design inside of Bootstrap.
| | 00:26 | If you scroll on down it'll talk
about the Supported devices.
| | 00:29 | So this is Bootstrap's visualization
of what the devices are that it's
| | 00:34 | supporting and what does that correspond to
in terms of pixel widths for various devices.
| | 00:39 | So Phones are considered to be 480 pixels and below.
Phones and tablets are 767 pixels below.
| | 00:46 | Portrait tablets are greater than 768 pixels.
| | 00:49 | Then anything larger than 980 is considered Desktop,
and then super large display is anything larger than 1200.
| | 00:57 | Those values here are reflected through
the media queries and these are the
| | 01:00 | media queries that appear inside of the Bootstrap CSS.
| | 01:04 | If you take a look there you'll find
these media queries in place.
| | 01:07 | You'll also find these utility classes.
| | 01:09 | So there are a series of classes to show
if you want to have something that's
| | 01:14 | visible on the phone only, but not visible on tablet,
not visible on the Desktop,
| | 01:18 | or whatever configuration you want
of those kinds of things.
| | 01:22 | There are classes that are available for that,
and this is the documentation.
| | 01:25 | And you can see this in action
down here at the bottom of the screen.
| | 01:29 | So right now I have my browser window here,
it's open at 1280 pixels.
| | 01:35 | Currently, this is designed to show in my Desktop,
but anything that was set up
| | 01:39 | for tablet or phone is currently hidden.
| | 01:41 | If I make my screen smaller, right now
this would be visible on the tablet,
| | 01:48 | but hidden on the Desktop and the phone,
and as I make my screen even smaller,
| | 01:53 | this will change again, down here at the bottom.
| | 01:55 | So now things are visible on my phone, but
they're hidden on my tablet and my Desktop.
| | 01:59 | That can be accomplished using these classes here.
| | 02:03 | So what I like to have happen now is
here on my website in my header here I have
| | 02:09 | this logo over here in the side.
| | 02:10 | That logo is present for a fairly good
long way where this website is concerned.
| | 02:15 | Because what really happens, we have a
breakpoint around 979 and that is where
| | 02:20 | the button appears here on the page.
| | 02:22 | As I make this smaller still, we have
another breakpoint that's happening right here.
| | 02:27 | This is about 767 pixels or so, and that is
where the logo resizes again.
| | 02:34 | Past this point, it starts to not look so good.
We get this white border here on either side.
| | 02:39 | The nice curve here is really kind of lost.
| | 02:41 | It looks odd over here on the left side
of the page and then we have
| | 02:44 | this Search that's sort of coming in,
the logo feels like it's floating out in space.
| | 02:48 | The flags are even worse.
| | 02:50 | So we definitely need a different layout
as we get down to smaller screen sizes here.
| | 02:54 | 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
| | 02:59 | in the upper left-hand corner.
| | 03:00 | And I really only want this to display on screen widths
for Desktop and possibly for tablet,
| | 03:06 | sort of around that 767 pixel range.
I'd like to swap this out for a different logo.
| | 03:11 | So if you look in your exercise files,
you will find that different logo.
| | 03:16 | So I'm going to go here now into my
exercise files inside of my folder for Chapter 7,
| | 03:21 | in folder number three, you'll find my mobile-logo here.
| | 03:25 | What I would like you to do is copy
that logo and if you go to your file structure,
| | 03:31 | your Windows Explorer or your Macintosh Finder,
| | 03:34 | go to your C Drive, go to the WAMP folder PC people,
and the www folder.
| | 03:40 | Mac people, you're going to go to your applications folder
and then you're going to find MAMP.
| | 03:44 | Then you're going to go to HT docs.
| | 03:46 | Inside of here we're going to go to templates,
we're going to go to our Kineteco template,
| | 03:50 | and we're going to go to the images folder.
| | 03:52 | And I'd like you paste that mobile-logo
right on into that images folder.
| | 03:57 | We don't have that mobile logo listed
inside of our XML file, but that's okay.
| | 04:01 | We're adding this now after the fact,
and we don't need to go back and modify
| | 04:04 | our XML file to reflect that new image.
| | 04:07 | So go ahead and put that mobilelogo.png
right there into your images folder
| | 04:12 | inside of your Kineteco template
inside of your Joomla! website.
| | 04:15 | Now what I'm going to do is
I'm going to hop in Dreamweaver
| | 04:18 | and I'm going to look at my index.php file.
This is my template index.php file.
| | 04:24 | And I'm going to scroll on down here to around line 28.
| | 04:29 | So right here at line 28, I have the logo that works for, oh!
| | 04:34 | What I'd like it to work for is my
Desktop and sort of larger tablets.
| | 04:39 | So I need to add a class to this.
I'm actually going to add two classes.
| | 04:43 | I'm going to make this visible for tablet
and I'm going to make this visible for desktop.
| | 04:51 | So while this logo is showing, it will
only show now on tablets and at the desktop.
| | 04:57 | If I save this File>Save and I go back
to my web browser and I Refresh,
| | 05:05 | that logo now disappears at the smaller screen sizes.
| | 05:08 | As I make the screen bigger, the
logo will come back. So it's gone.
| | 05:13 | Now what I want to do is add my
mobile logo to this particular page.
| | 05:18 | So what I'm going to do is, right here just
directly inside of this a tag even I can do this.
| | 05:23 | I'm going to put in my image tag with the source of
templates/kineteco/images/mobile-logo.png.
| | 05:39 | You can give this an alt tag of
same thing KinetECO, Inc., click for home.
| | 05:49 | Then we'll give it a class of just one thing, visible-phone.
That's all we need to do for this particular item.
| | 06:03 | So we now have two images, at least it
looks like we have two main images here
| | 06:07 | showing inside of our logo location.
| | 06:10 | So we have a desktop logo and we have
a mobile logo, both of these.
| | 06:13 | We are loading both of them, but they're only
going to be visible on certain devices.
| | 06:17 | So if I Save this now here in my index.php
and I come back to my web page and I Refresh,
| | 06:23 | now I have my mobile logo showing up here
at the top of the screen.
| | 06:28 | That's going to actually be stuck and stay in position here,
| | 06:32 | until my screen gets wide enough that I
switch back to my other logo.
| | 06:36 | So that at the start of the change
of the way this web page is going to look
| | 06:40 | and how it's going to function,
as we move on and I do a little bit more
| | 06:44 | customization for a mobile version of this particular website.
| | Collapse this transcript |
| Styling the head of the mobile design| 00:00 | So I've been working away on this
web page display for desktop dimensions
| | 00:05 | and it's looking good there.
| | 00:06 | As I make the page smaller, I've got
some tablet dimensions here
| | 00:11 | that are looking good, but as I hit this 767
pixel breakpoint, right about there,
| | 00:16 | my page does not look so good anymore.
| | 00:19 | In the last video I swapped out the two logos,
but the page still obviously has some more work to do.
| | 00:25 | So in this video I like to concentrate on
what's going on in the head of this particular page,
| | 00:29 | to clean this up and make this look a little bit prettier.
| | 00:32 | Then in the next video I'll take care of
the second half of the web page.
| | 00:35 | So, what I like to do now is
inside of Dreamweaver I'm going to scroll all the
| | 00:40 | way down to the bottom here and I'm
going to add a media query down here to the
| | 00:45 | bottom around line 294, this'll be @media
and this will be a max-width of 767 pixels.
| | 00:57 | Remember that those media queries
need to be wrapped in those curly brackets,
| | 01:00 | so I always make sure that
I put both of those in the first.
| | 01:04 | One of the very first things I'd like to do is
I'd like to get rid of this green background.
| | 01:09 | That is currently on my header HTML element.
| | 01:12 | So I'm going to override that now,
so I'm going to say header,
| | 01:17 | and my background-color is going to be white
and I would also like to align any text
| | 01:25 | that I have in here to the center,
and if I Save this and I Refresh my web page,
| | 01:35 | there we go, there is my logo and it's not quite so
green anymore, so that's a good progress.
| | 01:40 | I am also going to align the languages icon
here to the center and I'm also
| | 01:46 | going to align my search box here to
the center, so let me go ahead and add
| | 01:50 | those styles here inside of Dreamweaver,
I'm going to add .mod-languages.
| | 02:00 | The text align will be center and I don't need any
padding on this, so padding of 0.
| | 02:09 | The same thing with my search.
So, I'm going to set my search to --
| | 02:13 | I have a margin on the top of 1em and I don't
want it to float anymore, so a float of none.
| | 02:23 | When I save this now and I take a look
at the front end of my website,
| | 02:29 | I have my search box that appears centered
and I have my flags that appear centered on top
| | 02:33 | of the search, but the picture of
this logo appears a little bit off.
| | 02:37 | Here's what's happening, because this
logo is oriented in a trapezoid kind of
| | 02:41 | manner our eye sees the center of the
picture somewhere around in here, but when
| | 02:46 | you actually take a look at this
mathematically speaking, the center of the
| | 02:50 | picture is actually further over here,
so it looks like I've got things skewed a
| | 02:54 | little bit in terms of the display here
on the web page, even though the computer
| | 02:57 | is lining all these things up perfectly on the page.
| | 03:00 | So, to make this visually look better,
I'm going to add some margin to the left
| | 03:05 | side of this image, which will push things
over just a little bit and give it a
| | 03:09 | feeling of being better aligned,
because at least the text will look more
| | 03:13 | aligned with the flags in the search box
than it does right now.
| | 03:16 | So to do that here in Dreamweaver,
I am going to add a style up here after header,
| | 03:21 | header img and I'm going to
set this to have a margin-left of 3ems.
| | 03:33 | When I Refresh the page here that
will move my image over, but my style
| | 03:39 | was relatively unspecific. I said any image
that occurs in the header of the document;
| | 03:43 | that means now both of my flags, which are images also,
have that margin put on them, so we need to fix that.
| | 03:50 | So down here in my mod-languages, I'm
going to add just after that another style
| | 03:57 | .mod-languages img and I am going to
give this a margin of 0, and when I Refresh
| | 04:10 | my page now, my flags no longer have
margin associated with them, the logo looks
| | 04:15 | a bit more centered on my page, and
my search box is centered as well.
| | 04:19 | So this means that at least the top
part of the web page here is looking good.
| | 04:24 | As I narrow it down, it collapses nicely here,
and now the page is looking very good now on the top.
| | 04:30 | The next thing we need to fix is what's
happening further down on the page.
| | 04:33 | I'll cover that in the next video.
| | Collapse this transcript |
| Styling the body and footer of the mobile design| 00:01 | So I've been working on the mobile styling
of my web page here.
| | 00:04 | As I send this to collapse, it now really dramatically
changes here in the head
| | 00:09 | of the document at about 767 pixels,
from the green layout here with one kind of
| | 00:15 | logo to a different logo that appears here,
and some alignment that's occurring
| | 00:19 | here at the top of the page.
| | 00:21 | As we scroll on down to the bottom though,
the footer here definitely needs a little bit of attention.
| | 00:26 | Also, you might notice here in our content area,
our content is,
| | 00:32 | I have got a bit of an indent on either side.
That was a style that we added earlier
| | 00:37 | in our custom stylesheet and I'd
probably like to stretch that out now.
| | 00:42 | As for our Testimonials they line up evenly here
with the edge of the page,
| | 00:46 | but they don't quite reach all the way over.
| | 00:47 | So I need to add a few styles here to
make my content run the width of this blue
| | 00:53 | footer down here in the bottom, a little white here
will be a nice gutter on either side,
| | 00:56 | so my content won't run into the edges
of my web browser
| | 01:00 | and I need to fix the styling here in the footer.
| | 01:02 | I'll probably just want to center everything again,
rather than having it look this way, as the page collapses.
| | 01:07 | So to set this all up, and make it work,
I'm going to start by hopping into Dreamweaver.
| | 01:12 | Here in my custom stylesheet,
if I scroll on down the page here
| | 01:16 | to line 150, I have this style here
where I added styling for various kinds of
| | 01:24 | dividers that were on my Joomla! pages,
like a single article, a blog, a featured blog,
| | 01:30 | a content category, my site map and so forth.
| | 01:32 | This style, right here, I am going to go ahead and
copy this style, Ctrl+C or Cmd+C to copy,
| | 01:37 | scroll on down the page here
and just after my search style here
| | 01:41 | inside of my 767 max-width media query,
I am going to go ahead and add that
| | 01:48 | style here just by pasting it in
and then I am going to modify this.
| | 01:52 | So instead of a padding of 0 and 3.5 ems,
I am just going to say 0, that's all we need.
| | 01:57 | The min-height was a great idea on desktop environments.
| | 02:01 | On mobile though we might windup with some pages
where there is an awful lot of scrolling going on.
| | 02:06 | So I'd like to get rid of my min-height,
so I am just going to reset that to auto.
| | 02:11 | A margin on the bottom of 3 is a little
bit much in a mobile environment,
| | 02:14 | but I still don't want my content to smash
right into my footer, so I am going to
| | 02:19 | provide a little bit of breathing room, but a little bit less.
So I'll just change that to 1em.
| | 02:24 | If I save this, and I hop into my web
browser and Refresh, you can now see
| | 02:30 | that my Testimonys still don't stretch across
the page, but I haven't touched that styling yet.
| | 02:34 | Up here at the top, there is a nice clean line
from the navigation bar down through my content
| | 02:39 | here on both sides of the screen.
| | 02:41 | If I navigate to another page, let's say
the ABOUT page, just for reference.
| | 02:47 | You can see that that is lining up nicely
here on both sides of the screen as well.
| | 02:51 | So now that's under control, let me
take a look down here at my footer.
| | 02:55 | So down in the footer,
I'm going to add some styling here also.
| | 03:00 | In the footer we have a class of .span9,
this is the left side of the footer
| | 03:05 | where the copyright statement and the
footer navigation bar are located.
| | 03:09 | As well as footer .span3, that is the right side
of the navigation bar where the image is located.
| | 03:16 | I'm going to change this to padding of
1em 0 0 0, of course that
| | 03:24 | indicates that I have padding on the
top of 1em on the top of both of the footers,
| | 03:27 | so that my text dosn't run right into
the top of that blue line.
| | 03:32 | So if I close that style and save it and I
take a look here in Firefox, there we go;
| | 03:38 | my text is now not quite at the top there,
but it's a little bit further up than it was.
| | 03:43 | Okay, back to Dreamweaver.
| | 03:44 | The image itself right now is floated
all the way to the right side of the
| | 03:48 | screen and as Bootstrap's Scaffolding
gets smaller, what happens is that these
| | 03:54 | individual span items, like a span9 or a span3
or whatever, they stack on top of each other
| | 04:00 | and fill the entire space here.
| | 04:02 | So there is a span3 division here that
is going all the way across the screen,
| | 04:07 | but the image itself has shoved all the
way over to the right side of the screen
| | 04:11 | and that's because it has a class
of pull-right assigned to that image.
| | 04:14 | So I am going to override that now by
getting rid of that pull-right, which was a
| | 04:19 | float of right and set this to a float of none.
| | 04:21 | So here I am going to add a style for
footer img.pull-right.
| | 04:29 | I'll set this to a float of none and Save that.
If I Refresh my screen now, there we go.
| | 04:39 | My image is now all the way over here on the left side
of the screen and as is everything else.
| | 04:45 | Wouldn't it be great just to center that?
| | 04:46 | So let's go ahead and give that a shot.
Right up here where it says footer of span9,
| | 04:51 | footer of span3. Let's go ahead
and add a texts align of center.
| | 04:57 | Save that, and Refresh my web page and there
is my text is centering nicely.
| | 05:03 | My image is centering nicely. The footer menu here,
not so much. Well, that's in a ul.
| | 05:08 | My ul footer usually extends all the
way across the page here, so it's as wide
| | 05:12 | as its containing element, so it's not
likely to go ahead and center that way.
| | 05:16 | What I need to do is reduce the width of this ul
and then I can center that on the page.
| | 05:21 | So what I'm going to do is add one
final style here, a footer with a ul.nav.
| | 05:30 | I'll set this up to have a width of
let's say 15ems and a margin of 0 (space) auto.
| | 05:37 | Anytime you see a margin of 0 (space) auto;
| | 05:40 | that's no margin on the top and the bottom
and automatically take whatever is left,
| | 05:44 | in the terms of the left and right alignment
and assign an equal value to the left and right side.
| | 05:50 | So I am going to go ahead and Save that
and Refresh my web page again.
| | 05:55 | Now I have a reasonably centered navigation
bar down here, my image looks pretty good,
| | 05:59 | I could continually tweak that, it is of
course a trapezoid, it may not necessarily align
| | 06:03 | or look like it's lining up right in the middle
even though it is.
| | 06:06 | So I may want to add a little bit of
space to the left side of this to make it
| | 06:10 | line up just a little bit better, at least by eye.
| | 06:13 | And the last thing that I need to take
care of is back on the homepage.
| | 06:18 | So back on the homepage of this website,
I have these testimonials here that aren't
| | 06:22 | quite stretching all the way across the screen
and I set those up earlier
| | 06:27 | in a style up here, further up on my page.
| | 06:33 | Right here where I have my testimonial styling
I have custom with a padding top of 5ems.
| | 06:38 | Also down here, I have this div with the span of 3
followed by the module table with a padding-right of 1em.
| | 06:44 | So if we take a look back at our browser here,
we do have kind of a largish sort of gap
| | 06:49 | between the image and these testimonials down here.
| | 06:52 | We might want to narrow that up.
Let me Refresh this page.
| | 06:55 | All right, that's a little bit clearer
with that different picture in place.
| | 06:58 | So this large gap right here might look okay
to you or you might want to tighten that up.
| | 07:03 | I think I am going to tighten that up, and I also need
to stretch these testimonials to occupy the full width.
| | 07:09 | So I am going to need to copy two styles here.
| | 07:11 | One, first of all is this style right here,
the custom style, scroll all the way down
| | 07:16 | to the bottom of the page and I am going to add this.
| | 07:19 | Instead of a padding-top, let's just go ahead and
give it 1em and when I Refresh my web page here,
| | 07:24 | that will tighten that space up nicely.
I'll Refresh the picture, so you can see that.
| | 07:30 | So that's a little bit tighter spacing there
Then finally, I need to change
| | 07:36 | that right side alignment, so back on
up here, the breathing room on the right
| | 07:42 | column, I am going to copy that style
and scroll all the way down to the bottom
| | 07:47 | of the page and I am going to paste that style in place.
| | 07:51 | This time I am going to say padding-right of 0
and when I Save that
| | 07:55 | and I Refresh my web page for the last time here,
now my testimonials are stretching
| | 07:59 | all the way across the page, lining up
with the edges of the picture here.
| | 08:03 | So we have nice clean lines going down my page,
those are continued on through the article,
| | 08:08 | up to the nav bar, my page is looking particularly
nice now with the mobile layout.
| | Collapse this transcript |
|
|
8. Advanced Template FeaturesAssigning "optional regions" in a Joomla! template| 00:01 | On the homepage of our website, we have
a row here that's not in use, that row
| | 00:06 | normally contains the breadcrumb.
| | 00:08 | And if you go take a look at say the ABOUT page,
you see that the breadcrumb
| | 00:12 | is located here inside of this row.
| | 00:14 | On the homepage, I didn't want the breadcrumb
to show, because you already know
| | 00:18 | that you are on the homepage, there's not
a lot of point in showing the breadcrumb,
| | 00:21 | but if you were to View the Source
for this particular web page and
| | 00:27 | you were to scroll on down the list here,
past the navigation bar, down here you
| | 00:34 | will see that we have a div with the a
class of row-fluid, a div with a class of span12
| | 00:39 | and nothing followed by /div /div,
that is the breadcrumb right here
| | 00:43 | that's showing up on your homepage.
| | 00:45 | This may also be pushing your content
down a little bit off the navigation bar,
| | 00:49 | which depending on whether you like
the way it looks or not, that could be a
| | 00:52 | good thing or it could be a bad thing.
| | 00:54 | Wouldn't it be great though if we could
tell Joomla! to only write that row in
| | 00:58 | place if we do in fact have a breadcrumb for that row.
| | 01:01 | Otherwise don't write anything into the website,
that way we don't have that little extra bit of markup.
| | 01:06 | Well, fortunately, that is completely possible
inside of Joomla! and I'm going to
| | 01:11 | show you how to do that now.
| | 01:12 | So if you start by going to Dreamweaver,
we're going to switch over to your
| | 01:19 | index.php file and if you scroll on
down the page here, to around line 50, you
| | 01:27 | will find the row here that's associated
with the breadcrumbs, so you see that
| | 01:31 | there's our div with the class of row-fluid,
the div with the class of span12,
| | 01:35 | the breadcrumb modules /div /div.
| | 01:37 | We would like to surround that whole
entire thing with some kind of code that
| | 01:43 | will just have that row being written
if their breadcrumbs are even existing.
| | 01:48 | Now this is actually fairly straightforward to do and
the code is located inside of the protostar template.
| | 01:53 | I've also put it in your exercise files, so,
just the bit of code that we're
| | 01:58 | going to use, so that you have it and you can refer to it.
| | 02:02 | So if you take a look inside of the
protostar index.php file and if you scroll
| | 02:08 | on down this index.php file, down to line 148,
you will see this little bit of
| | 02:18 | code that we are going to borrow here.
| | 02:20 | So right here around this div with a
class of navigation, there is a little
| | 02:24 | starting bit of code on line 148 and it says php,
which is the starting php tag,
| | 02:29 | if this countModules 'position-1' and
then it has a bunch of stuff and then it
| | 02:34 | says on line 152, <?php endif.
| | 02:36 | What does this mean?
| | 02:37 | Well, that line on 148 means, if there
are modules assigned to position-1 for
| | 02:43 | this template, then go ahead and do
whatever comes after this until you hit
| | 02:46 | the endif, that was the end of what
you should do if there are modules
| | 02:50 | assigned to 'position-1'.
| | 02:51 | If there are no modules assigned to
'position-1', what will happen is, as this
| | 02:55 | web page is generated, we will skip from line 147,
right on down to somewhere
| | 03:01 | around line 153, which is the start of this banner module.
| | 03:05 | Now the banner module will of course turn
into HTML at that point and that HTML
| | 03:09 | will start there at line 153.
| | 03:11 | So I am going to grab this little bit
of code right here, right here on line
| | 03:16 | 148, I am going to Ctrl+C or Cmd+C
to copy that and I am going to switch
| | 03:21 | back to my index.php, and here just before
what was line 50, I am going to paste
| | 03:27 | that code in place, and then, so I have
my div with a class of row-fluid, my div
| | 03:32 | with the class of span12 /div /div.
| | 03:35 | So then right here I am going to add
the other bit of code, which is this endif
| | 03:40 | right here, copy that and paste that in place.
| | 03:45 | But I don't want this to be 'position-1';
| | 03:46 | I don't even have a 'position-1'
inside of my template.
| | 03:49 | Now this is valid code, it will run just fine
in Joomla! and nothing will ever
| | 03:53 | happen, because I have no 'position-1' in this template.
| | 03:56 | So I need to change this 'position-1',
don't get rid of the single quotes, but
| | 04:00 | change position-1 to say 'breadcrumbs,'
so in other words, if there is anything
| | 04:06 | in the module position of breadcrumbs,
then go ahead and write in the
| | 04:10 | surrounding HTML markup that we need,
as well as the breadcrumb module.
| | 04:15 | And if nothing is present at that particular
point, then we'll go from line 49,
| | 04:20 | right on down to line 57 and we'll start on the content.
| | 04:23 | So I am going to save this, File>Save
and now if I go into my web browser on the
| | 04:29 | front end of Joomla! here and I hit Refresh,
I see that my content just bumped up
| | 04:34 | the page a little bit here, that's
because that row that was there for the
| | 04:38 | breadcrumbs is no longer present, and
if you View the Source for this page,
| | 04:42 | you'll see that that is the case.
| | 04:44 | As you scroll on down here and pass the
navigation bar, you will find that just
| | 04:49 | after the navigation bar ends, we start
right in with the row that contains our
| | 04:54 | content and our Testimonial is here on homepage.
| | 04:57 | But yet if you go to the ABOUT page of
the website, that row is in fact present
| | 05:01 | as are the breadcrumb modules, as you can see here.
| | 05:04 | So this little bit of code inside of Joomla!
is incredibly helpful if a module is
| | 05:09 | present code here, and you can make great
use of that on your Joomla! websites,
| | 05:14 | as a wonderful way of including or
eliminating extra code from your page,
| | 05:19 | where it's needed or not needed.
| | Collapse this transcript |
| Incorporating multiple layouts in a single Joomla! template| 00:00 | So in the last video we saw that we could
put a little bit of code around the
| | 00:06 | location of where the breadcrumbs module
is supposed to display on this page.
| | 00:09 | Then if the breadcrumbs module is turned on,
or a module in the breadcrumbs
| | 00:14 | position is turned on, it will display
on the page, and if there is no module
| | 00:18 | assigned to the breadcrumbs position,
then you are going to see nothing on the
| | 00:22 | page, that little bit of HTML goes away.
| | 00:24 | Well, there is another place that we can
make use of that kind of code here on our website
| | 00:28 | Here on the homepage we have a
two-column layout, because we
| | 00:33 | have our content here on the left side
of the page and then over on the right
| | 00:38 | side of the page we have our testimonials and that's
a custom HTML module that's displaying over there.
| | 00:42 | But if I go to the ABOUT page or in fact
most of the other pages here on the website,
| | 00:47 | I don't have any modules assigned to the right position.
| | 00:50 | So right now what's happening is I have
a great big huge empty space over here
| | 00:55 | on the right side of the page.
If I View the Source for let's say the ABOUT
| | 00:59 | page for the website, as I scroll on down here,
what happens is here around line 116,
| | 01:07 | I start with my div with a class of row-fluid
that starts the row that's
| | 01:13 | going to contain my content in that right side module.
| | 01:16 | I have a div with a class of span9,
so that's 9 of the 12 columns in the
| | 01:20 | Bootstrap grid structure, that are
incorporated here and are displaying the
| | 01:25 | piece of content, whether that's an article
or a blog or a site map or whatever
| | 01:30 | it happens to be, the component is all displayed there.
| | 01:33 | Now as you scroll on down the page a
little bit further, you'll notice that here
| | 01:37 | around line 143, we have a
div with the class of span3/div.
| | 01:42 | That is currently just a great big huge
gaping hole on the web page.
| | 01:46 | So if we use the code, that I just
showed you in the previous video and wrap
| | 01:51 | that around the right column, maybe we
can make that right column go away.
| | 01:54 | So let's see how that works.
| | 01:56 | So I am going to hop into my backend of
Dreamweaver here, and once again, this
| | 02:01 | is the protostar template index.php file,
I am at the same point that I was in
| | 02:07 | the last video around line 148 and there's this little bit
of code right here that is the if statement.
| | 02:13 | So if there are modules in this position, then do something.
| | 02:15 | So I am going to go ahead and copy that
once again and I'm going to put it into
| | 02:20 | my index.php file and where I'm going
to put that code is down here at line 62.
| | 02:26 | So right here I'm going to put that
code in and just after that span3, so we
| | 02:33 | have a div with a class of span3, we
have the code calling for the module for
| | 02:37 | the position of the right /div, just
after that I'm going to put in a php endif.
| | 02:44 | And this code will be in your Exercise
Files which will be free Exercise File so
| | 02:49 | that you can have that code and work with it.
| | 02:51 | So I need to of course change 'position-1' here
to reflect the name of the
| | 02:55 | module I am talking about, was just right.
| | 02:57 | And now if I just save what I have here,
we should see that right column disappear, correct?
| | 03:02 | Okay, so let's go to the front end of Joomla! here
and let's hit the Refresh button.
| | 03:07 | Well, it looks like nothing happened. What's going on?
| | 03:10 | Well, if you View the Source for the web page
and scroll all the way on down to
| | 03:15 | the content portion of this web page, you
will see that here we have our div with
| | 03:22 | our class of span9, then we have all the stuff that's
associated with our article /div and our row closes out.
| | 03:29 | And we are onto the next row here.
| | 03:32 | So it did exactly what we thought it would do.
It got rid of that div with a class of span3.
| | 03:37 | But what happened?
Well, the content is still only a span of 9.
| | 03:44 | So if the content is only a span of 9, it's
only occupying three quarters of that space.
| | 03:48 | If we want the content to stretch
all the way across the page,
| | 03:52 | this span9 needs to become a span12.
So how are we going to make that happen?
| | 03:58 | Well, back here in the backend of the
Joomla! up here at the top of the page we
| | 04:02 | have this div, up here with a class of span9.
Down here we have our div with a class of span3.
| | 04:07 | So how are we going to make this work?
Well, there are many solutions to this problem.
| | 04:13 | Here is one that will probably make sense to most of you.
| | 04:16 | If I just copy this little bit of code here
and I am going to paste it here just above that.
| | 04:23 | So if there is a right module, write
in this little bit of code here for a
| | 04:30 | class of span9 and if I say just php endif here,
what will happen course is
| | 04:38 | that if there is a right module in
position, it will write in this little bit
| | 04:42 | of code about the div class of span9,
followed by my content here for the
| | 04:46 | web page, followed by the module and that will
be great, it will work great on the homepage.
| | 04:51 | But what happens on the pages like
ABOUT and so forth, where we don't have a
| | 04:55 | right module, what will happen?
| | 04:56 | Well, I won't have this bit of code
here for the div with a class of span9.
| | 05:00 | So now what I need to do is I need to
say if there are modules assigned on the
| | 05:05 | right, go ahead and write in
this little div class = span9.
| | 05:08 | Otherwise, write in a div with a class
of span12, and the way we can do that is
| | 05:13 | add just a little bit extra code here,
and what we'll do is, we'll put in a
| | 05:19 | question mark php <?php else : >? just like that.
| | 05:26 | So if there are modules on the right
side of the page, div with a class of span9,
| | 05:30 | otherwise we are going to say,
have a div with a class of span12.
| | 05:39 | Now, depending on how many modules are
assigned to the right side of the page,
| | 05:42 | we are going to write in a bit of html
that actually has nothing to directly
| | 05:46 | with the module, there's no module code
incorporated into this HTML at all, but
| | 05:50 | the HTML does need to adapt
if there is a module present.
| | 05:53 | I am going to Save this little bit of index.php and
I'm going to take a look at the front end of my website.
| | 06:00 | So now if I'm on the homepage of the
website, this looks exactly the way it did.
| | 06:03 | I have my right column and my left.
| | 06:06 | If I go to the ABOUT page though, now
my content stretches all the way across
| | 06:11 | the page, isn't that great?
| | 06:13 | And if I go to News & Info, that content is
stretching all the way across the page as well.
| | 06:18 | So it's looking really great now that
this site no longer has a gaping right
| | 06:23 | column there anymore and my content can
stretch all the way across the page.
| | 06:28 | The HTML is updated to reflect that, so we continue
to work with Bootstrap's Grid System
| | 06:33 | and the HTML is compatible with that.
| | Collapse this transcript |
| Working with template overrides| 00:00 | I am here on the Bootstrap website right now.
| | 00:03 | I'm going to go to Base CSS and under buttons.
| | 00:10 | Now Bootstrap by default has a whole
bunch of pre-coded buttons here with different colors,
| | 00:16 | I've mentioned this before in some other videos.
| | 00:18 | By default Joomla! has coded all of the buttons
in its website to use button Primary.
| | 00:23 | That is that nice dark blue button that you see up there.
| | 00:27 | But you may have reason to want to
change the color of that button.
| | 00:31 | You may love the settings for the buttons
that you see here, or maybe you're creating a
| | 00:35 | new extension and you want to utilize
one of these other color buttons, or maybe
| | 00:39 | you just want to change something that's
on your website to one of these other buttons.
| | 00:43 | How do you do that?
| | 00:44 | Well, if you look at, let's say the
Log in page of your website,
| | 00:48 | there is a button here that's
associated with the Log in form.
| | 00:51 | That Log in button comes from some
code inside of Joomla! and the HTML is in
| | 00:57 | place in Joomla! the button is coded
there and the classes are set for that
| | 01:02 | button inside of that little bit of code.
| | 01:04 | You can get to that little bit of
code easily enough using Joomla!'s
| | 01:07 | file structure and you could change
the class for that particular button.
| | 01:12 | So instead of button Primary, you change it
to let's say button warning, and that's great!
| | 01:16 | But what happens when the website
goes through its next round of upgrades?
| | 01:20 | Well, remember I told you anything
that was not in the Templates folder
| | 01:24 | is subject to being changed as Joomla!
needs to update its files for security
| | 01:28 | reasons or bugfixes or whatever it
happens to be, it could take any of
| | 01:32 | those files that you have overwritten inside
of Joomla! and change the code that's there.
| | 01:38 | We really don't want that to happen.
| | 01:40 | What we'd like to do is make a change to
the way this Log in box looks and functions.
| | 01:45 | We'd like to make it once and we
would never like to worry about it again.
| | 01:47 | So when Joomla! upgrades, ideally the
little bit of code that we're going to add
| | 01:51 | to this box, which is just swapping out
a class on that button, we would like to
| | 01:55 | have that stick around, we don't want
to have it get overwritten through the
| | 02:00 | Joomla! upgrade and then we have to go
back in and remember what it was that we
| | 02:03 | changed and we have to change
that little bit of code again.
| | 02:05 | It becomes a maintenance nightmare.
I mean its bad enough for one site.
| | 02:09 | Imagine if you are running an agency
and you have,I don't know,
| | 02:11 | 80 websites that you need to go and update.
So let me show you how to do to this.
| | 02:15 | This is a process called a template
override and it's the possibility of doing
| | 02:20 | these template overrides is based on Joomla!'s!
| | 02:23 | structure that is used for coding. It's called
MVC which stands for model View Controller.
| | 02:29 | As a front end person, model and
controller have to do with the geeky coding
| | 02:34 | stuff, that's talking to databases,
that's manipulating data, that's hard-core PHP.
| | 02:39 | But the V part of MVC, the View,
that's the part that I love.
| | 02:43 | The View is what is of the HTML
that's wrapped around all of the database
| | 02:48 | programming, PHP crunching magic,
whatever comes out of all of that processing,
| | 02:53 | how is that going to display on the web page?
| | 02:56 | And a template override is a wonderful,
wonderful way that designers and
| | 03:00 | developers can work together, because
the developers can write all of this
| | 03:03 | heavy-duty crunching code and completely
separate their HTML from it.
| | 03:07 | So the designer never has to deal
with their crunchy code, and the designer can
| | 03:12 | simply stick to what they do well, which is HTML.
| | 03:15 | There's less there that's in the interface for a designer
to break and the developer's code is protected.
| | 03:21 | So the concept of these template overrides
is a really great workflow kind of
| | 03:26 | thing, if you're working with a developer in particular,
and certainly, it helps
| | 03:30 | keep you from editing some of those core files
in Joomla! where you might lose those changes later.
| | 03:35 | So, what I need to do is I need to find
the file inside of Joomla! that contains
| | 03:40 | the code for this Log in box and that button.
| | 03:43 | I am going to make a copy of it to my
Templates folder and I am going to edit
| | 03:46 | that copy and once that copy is edited,
then it will show up here on the website.
| | 03:52 | So that's the general plan.
| | 03:53 | I am going to hop back here into the
back end of Dreamweaver and I'm going to
| | 03:55 | show you how this is configured here.
| | 03:57 | Over on the side here in Dreamweaver
in my Local Files, so far we have
| | 04:01 | really only been doing things in the templates
folder here, which I am now going to close.
| | 04:07 | Notice that we also have folders that
are devoted to components and modules
| | 04:12 | and even plug-ins are in here as well.
| | 04:14 | But generally speaking, the components
and modules are where they are going to
| | 04:17 | display on the front end of the website,
plug-ins on occasion, but usually it's the
| | 04:21 | components of the modules that you're concerned with.
| | 04:23 | This is where you can go to find the HTML
that will drive any given component or module.
| | 04:29 | So the fact that I am looking at my
Log in box in the main portion of my web page.
| | 04:35 | What does that tell you?
Is it a component or a module?
| | 04:37 | It's a component, because it's loading in
through that little jdoc:include type of component code.
| | 04:43 | It's not the module that's running on
the side of the web page. That actually has
| | 04:47 | a whole another set of HTML that we
could look at and change its styling on.
| | 04:51 | But since we're using this Log in box
from the component, we are going to need
| | 04:55 | to look in the components folder.
So we'll go to the components folder.
| | 04:58 | Inside of the components folder,
you'll find a folder for each component
| | 05:02 | that's installed on the website, whether those are
third-party components or core Joomla! components.
| | 05:06 | We are going to look inside of the com_users folder.
Inside of the com_users folder, you'll find more folders
| | 05:14 | that controllers and models and helpers
| | 05:17 | that has to do with that MVC architecture, Model
View Controller, helpers is part of that process as well.
| | 05:23 | Whatever is in those folders, you
don't even want to look in there.
| | 05:26 | That's geeky coding stuff.
Just leave all of that alone.
| | 05:29 | What you want to concentrate on
is what's in the views folder.
| | 05:32 | So if we go to the views folder and
we look inside of that, we'll find
| | 05:36 | interfaces for a number of different
Joomla! widgets, including the profiles.
| | 05:41 | When you create your profile in the website,
the registration form; remind me of what my
| | 05:44 | username and password was; or reset those values;
that's what all those folders are for.
| | 05:49 | The one of course that we want is Log in.
If I open up Log in, inside of that
| | 05:54 | I have some more files, then I have
finally the template folder tmpl.
| | 05:59 | That is where my log in information here goes.
In this case, we have a couple of variations on that theme.
| | 06:06 | The one that I'm interested in is the default login.php.
I am going to go ahead and open this up.
| | 06:13 | This is just the little bit of code that
drives that Log in form and there are a
| | 06:17 | number of variables that are included in this.
| | 06:20 | But you can sort of read around those
variables and just look at the code.
| | 06:25 | If you scroll on down here, you'll
see here's the form, that's going to log
| | 06:28 | somebody into the website and if we scroll on
down a little bit further, here is our button.
| | 06:34 | So there's our button right here to Log
in and you see that this is the button
| | 06:38 | with a class of button (btn) and button (btn) primary.
| | 06:40 | What I want to do is change that class
from btn-primary to btn-warning.
| | 06:44 | That's one of the documented classes
that are inside of Bootstrap.
| | 06:47 | I need to make a copy of this page.
| | 06:50 | The way I am going to do that is I am
going to say File>Save As.
| | 06:54 | Now comes a little bit of a tricky part.
| | 06:56 | What I am going to do is I am going to
go all the way on back to the root of my
| | 07:02 | website, back to my www or ht docs folders.
| | 07:04 | I am going to go into my templates folder.
I am going to go into my kineteco folder.
| | 07:09 | In here, I am going to make a new folder.
That new folder will be called html, all lowercase.
| | 07:15 | Do not make it uppercase html, it's all lowercase html.
| | 07:19 | Inside of html, I'm going to make another folder.
| | 07:24 | This folder will be called com_users.
| | 07:31 | That reflects that this is where you can find overrides
for components that pertain to users.
| | 07:37 | Inside of that folder, I'm going
to make another folder, New>Folder.
| | 07:42 | That folder is going to be called Log in
and inside my folder called login,
| | 07:48 | I can now save default login.php and I do
not want to change the name of this file.
| | 07:54 | It's going to be called exactly
what it was called in Joomla!'s!
| | 07:56 | core template structure, but here I
am just going to do a File>Save As,
| | 08:01 | the default login and this will go into this folder.
| | 08:03 | Now, look at the folder structure here.
| | 08:06 | So the folder structure is sort of kind of mirroring
what you see over in the components folder.
| | 08:15 | We've left out a few folders, we left
out any folder called tmpl, you don't need it.
| | 08:19 | We have left out any folder called views. You don't
need the top level components or modules folders.
| | 08:26 | So that means that we have a folder called com_users,
we skipped views and we have a folder
| | 08:30 | called login and we skipped template.
| | 08:34 | All right. So once you have this in
place, go ahead and say Save.
| | 08:36 | Dreamweaver may ask you if you want to
update your links, say No, absolutely you do not.
| | 08:41 | And then just scroll on down and find
your button, this is on line 56.
| | 08:46 | Change btn-primary to btn-warning and say File>Save.
| | 08:53 | Now what will happen is because this
override is present in the template folder,
| | 08:57 | Joomla! looks here first to find out
if there is any override code available before
| | 09:01 | it looks in its core files for assembling the web page.
| | 09:05 | So when I take a look now at my Log in page
and I hit Refresh.
| | 09:10 | My button is now orange here on the Log in screen,
and if I made several screens for logins,
| | 09:15 | I am not sure why you would do that,
but if I had ten different screens for Log ins,
| | 09:20 | every single one of those screens
would take that same style,
| | 09:24 | the same btn-warning style
where we have a nice orange Log in button.
| | 09:28 | So that is template overrides.
They are global in nature.
| | 09:31 | They are going to override every instance
of something within your Joomla! website.
| | 09:36 | It's a way of tweaking any of the Joomla!
HTML output, so that you can make it write out
| | 09:41 | exactly the way you want it to write out.
| | 09:44 | And it applies to all instances.
That's very, very key, because in the next video,
| | 09:49 | where I talk about layout overrides,
those are instances that can
| | 09:52 | be assigned on a case-by-case basis.
| | Collapse this transcript |
| Layout overrides: Modules| 00:00 | So now that we have our Log in button
changed to this lovely yellow color, the
| | 00:04 | client looked at this and they absolutely loved it.
| | 00:07 | They thought that that yellow button
was just so terrific and one of the things
| | 00:12 | they have asked us to do at this point is they would
like us to make two color variations in this template.
| | 00:17 | So in some of the pages we are going to
have a layout across the top of the page
| | 00:22 | that is going to have an all yellow banner
and a matching logo for that
| | 00:26 | and on some of the pages, it's going
to have this green banner still.
| | 00:30 | In fact, those are just going to map to the languages.
| | 00:32 | My English pages are going to have
the yellow banner across the top and my
| | 00:37 | Italian pages are going to have
the green banner across the top.
| | 00:40 | It doesn't have to be set up that way, but
that's the way that it broke down for client.
| | 00:44 | They just wanted to have a different
color depending on what language you are on.
| | 00:47 | What they have asked us to do is to change the color
of this header across at the top of the page.
| | 00:51 | I am going to show you how you can
do that in the next video, but in this
| | 00:54 | video before we can get to changing
the background color of that header, one
| | 00:58 | of the things that we are going to do as part of
this process is to change this Search button here.
| | 01:04 | Right now our Search button is blue
which goes with the green background.
| | 01:08 | The client loves this yellow button
down here that we are now using on the
| | 01:11 | Log in page and what the client would
like is when we make the yellow header
| | 01:15 | that goes across the top of the page that Search
button should be yellow on those pages as well.
| | 01:21 | Now I have got a Search button that needs to
be one color on some pages of the website
| | 01:25 | and another color on other pages of the website.
| | 01:28 | I can't do that with a template override,
because a template override affects
| | 01:31 | all instances of a Search box, no
matter how many instances there are.
| | 01:35 | I can't do that with CSS
because my HTML is always the same.
| | 01:39 | So I can't just change my CSS.
What can I do?
| | 01:42 | I need some kind of different sort of
HTML so that my button will look one way
| | 01:46 | on one page and another on another page.
| | 01:48 | Well, I could build two entirely different templates.
| | 01:51 | I could build two template masters with
the color variations in them.
| | 01:56 | But then I have kind of a maintenance nightmare,
because anytime I make a tweak to these pages,
| | 02:00 | they're going to be exactly the same
except the yellow header on one set
| | 02:04 | of pages and the green header on another set of pages.
| | 02:07 | It's kind of a pain in the neck to have
to go in and make HTML or CSS changes in
| | 02:12 | two groups of files everytime and it's
a great way to get those files out of sync
| | 02:14 | and you wind up with things not looking right over time.
| | 02:17 | So the best way to handle this is
how can we have as close to one set of files as possible?
| | 02:23 | And the answer to this at least for the Search button
is something called a Layout override.
| | 02:29 | So a Layout override will allow you to
take your search box and you can assign to it,
| | 02:35 | a specific layout depending on which pages
or which version of the module you're going to have.
| | 02:42 | So what we'll ultimately do is we'll
make another copy of our Search module and
| | 02:46 | for one search module, the module that
will be assigned to the English pages,
| | 02:49 | we will have that set up to have the
yellow button associated with it with that
| | 02:53 | layout and then for the other module
that will have for the Italian pages,
| | 02:57 | we'll have that set up to have the layout
attached to the blue button here. Pretty Cool!
| | 03:02 | So I am going to show you how that works now.
| | 03:05 | Once again I'm going to hop into the back end of Joomla!.
| | 03:08 | I am going to Dreamweaver here and I am going
to go find the HTML that displays my Search box.
| | 03:15 | Now that is a module.
Search is always a module.
| | 03:19 | So I'm going to look here not in my
components folder, but I'm going to look in
| | 03:24 | my modules folder and I'm going to
scroll on down here to find the search.
| | 03:30 | Which is right here. That is what I want.
| | 03:32 | Inside of search, there is a folder
called template, that's where I want to look
| | 03:36 | and there's only one file here for
displaying the search box. It's default.php.
| | 03:41 | I am going to go ahead and open that
up and just like we just did with our
| | 03:46 | template overrides, with our layout
overrides the first step is fairly similar.
| | 03:51 | I'm going to go save this file in my template structure.
So I am going to say File>Save As.
| | 03:59 | This time I'm going to go to my templates folder.
| | 04:02 | I am going to go to my kineteco template.
| | 04:05 | I'm going to go to my html folder.
| | 04:08 | I'm going to make a new folder here
called mod_search.
| | 04:13 | Inside of mod_search here's where things get different.
| | 04:17 | If I'm doing a template override, in other words,
I'm going to change every instance
| | 04:20 | of the search box, no matter
where it appears on the website.
| | 04:24 | I would simply do a Save As.
So it would become default.php.
| | 04:27 | I can make my changes and everywhere, every search box,
everywhere will have a yellow search button.
| | 04:34 | If I want to have a different layout,
here's what I need to do.
| | 04:38 | I need to call this file anything, but default.
| | 04:42 | So I'm going to call this Yellowbutton and say Save.
| | 04:47 | It will ask me to update the links.
I'm going to say No.
| | 04:50 | So here now inside of this new file
called Yellowbutton.php, it doesn't exist
| | 04:56 | anywhere in Joomla!'s core content.
| | 04:58 | It only exists as a copy inside of my
html folder inside of my template folder.
| | 05:04 | I am going to make my change here.
| | 05:06 | So I am going to scroll on down here,
find my button, here it is, right around line 21.
| | 05:12 | Here is the button and you see here it says button (btn)
and then button primary (btn-primary).
| | 05:18 | I am going to change that class from primary
to warning and I am going to say File>Save.
| | 05:23 | That's all there is to it.
| | 05:24 | I just made that one little edit to the
class of the button associated with this search.
| | 05:29 | Now I have search boxes available.
Now I have two layouts.
| | 05:33 | So here's the next thing I need to do.
I need to go to the backend of Joomla!.
| | 05:37 | So here I am in the backend of Joomla! and
I am going to go to Extensions>Module Manager.
| | 05:44 | Right now I have one module
for search and it's down here.
| | 05:48 | It's my Search module in the search
position and if I look at the front end
| | 05:51 | of the website and I just refresh my page
or whatever, I still have a blue button here.
| | 05:56 | I don't have a yellow button yet.
| | 05:58 | So to make the yellow button appear on the English pages,
but the blue button appear on the Italian pages
| | 06:02 | here's what I need to do.
| | 06:04 | I'm going to hop into the backend of Joomla!.
I am going to go to Extensions>Module Manager.
| | 06:09 | I am going to scroll down here to my
search box, put a check next to it,
| | 06:13 | and I am going to duplicate this module, click the
Duplicate button up here at the top of the screen.
| | 06:19 | Now I have two copies of search.
| | 06:20 | This second copy of search here I am
going to edit, just by clicking on it.
| | 06:24 | First of all, I am going to make sure it's published.
| | 06:26 | I am going to set the title of this
search to Yellowbutton, Search - yellow button
| | 06:32 | and while I am here and since
I have decided that the yellow button will
| | 06:36 | go on the English pages, but the blue
button will go in the Italian pages
| | 06:38 | I can set my language down here on the bottom.
So this will become an English search box.
| | 06:44 | Then what I am going to do to make the
yellow button part of this appear is I am
| | 06:48 | going to switch to my Advanced Options
and here at the top is this dropdown for
| | 06:53 | Alternative Layout and what we mean by
Alternative Layout is the default is the
| | 06:57 | layout that comes right out of core,
but now when you hit this dropdown,
| | 07:00 | you see here that we have another layout
that's available called Yellowbutton.
| | 07:06 | That's because Joomla! is looking at our
templates inside of the kineteco folder,
| | 07:10 | inside of html, inside of mod_search,
and it found a file called
| | 07:16 | Yellowbutton.php and it loaded
it here as an alternative layout.
| | 07:20 | So I am going to go ahead and pick that from the list.
| | 07:23 | The last part of this is making
sure it's assigned to the right pages.
| | 07:26 | I'm going to assign this to On all pages
except those selected.
| | 07:30 | I am going to select None and I want it on every page
of the website except for the two Italian pages.
| | 07:39 | Then I am going to go ahead and say Save & Close.
| | 07:42 | Now when I go to the front end of the
website and I hit Refresh,
| | 07:47 | there is my yellow button search.
| | 07:49 | I still have the blue button here because I haven't
edited the instance of my original search module.
| | 07:54 | So right now I have two instances
of search on these pages.
| | 07:58 | So now let's go back and edit the original search module,
the one with the blue button,
| | 08:02 | and get rid of that on the English pages.
| | 08:05 | I am going to scroll on down the page
here to the search and I am going to
| | 08:10 | change this name from Search
to Search - blue button and going to assign
| | 08:17 | that a language down here to Italian and then
up here at the top of the page under my
| | 08:24 | Advanced Options, I am going to pick
Default as my Alternative Layout because
| | 08:28 | Default had the blue button.
So I don't need to make a change here at all.
| | 08:31 | I don't need to tell it to use the yellow button.
It's going to go ahead and load the default.
| | 08:36 | Then for my menu Assignment, I'm going
to say Only on the pages selected and the
| | 08:40 | pages I will select are first of all
None, deselect everything, and then just
| | 08:45 | check off the two Italian pages and say Save & Close.
| | 08:50 | When I refresh the front end of my website again
on my English pages now I have
| | 08:54 | the yellow button search. Isn't that great?
| | 08:58 | Now when switch over to the Italian side of
the website, I have the blue button search.
| | 09:02 | Also notice that since I assigned the
language to the search box, which before
| | 09:07 | I hadn't had the language of all
and it was using English by default,
| | 09:10 | now I have Italian appearing here in my
search box instead and I could also translate
| | 09:15 | that button from go to the
Italian equivalent if I wanted to.
| | 09:19 | That is the way we can make use of
these alternative layouts inside of Joomla!
| | 09:24 | Here is a great application for using them.
| | Collapse this transcript |
|
|
9. Joomla! Template Styles: Creating Color Variations for Your TemplateWhat is a template style?| 00:00 | All through Joomla! 3 Essential Training
and all through this video I have
| | 00:04 | talked about Template Styles, but I have never
really defined for you what a Template Style is.
| | 00:08 | So I'd like to show you what these Template Styles
are and why they're so special inside of Joomla!
| | 00:14 | If we take a look here in the backend
of the website and if we go to
| | 00:18 | Extensions>Template Manager, by default
we wind up on the Template Style screen.
| | 00:23 | We've made use of Template Styles by quite a bit.
| | 00:25 | Right now we have three Template Styles
in use for our website.
| | 00:28 | We have our default multilingual
or language of all web page.
| | 00:33 | We have the English side of our
website as running one style and the Italian
| | 00:37 | side of our side as running another style.
| | 00:39 | How is that even possible?
| | 00:40 | Well, if you take a look at one of
these styles, let's say let's look at the
| | 00:44 | English style, there are options here
that I can set that are unique to this
| | 00:48 | Template Style that are not
shared by other Template Styles.
| | 00:51 | However, all of the Template Styles are
driven from the same template master files.
| | 00:57 | So the same HTML in the same CSS that
drives the website is now possible to have
| | 01:02 | those as one set of centralized files,
but then have a series of styles that can
| | 01:07 | take different parameters for working
with on your website.
| | 01:10 | So here inside of this Template Style this one has
a language assignment here which is English.
| | 01:16 | We have another copy of this Template Style,
same template master, same HTML and
| | 01:21 | CSS as the English style, but it's a different instance
and that one is assigned a language of Italian.
| | 01:28 | Right now in our Custom template if
we look under our Options tab here we
| | 01:32 | see absolutely nothing and that's because
we've built a custom template has no options in it.
| | 01:37 | But it's possible to add these options if we want to.
| | 01:40 | We can certainly add those and those
configuration screens would then show up here.
| | 01:44 | Once again we're still going to have
the same centralized HTML and CSS, but
| | 01:49 | these options that might appear on the screen
would allow us to configure our template slightly.
| | 01:54 | Then of course we have the menu assignment,
just as you've seen under modules,
| | 01:57 | you can also assign templates
to various pages of the website.
| | 02:01 | So if you take a look let's say at the
protostar Template Style here and you
| | 02:07 | look under Options for it, just as you
saw in Joomla! 3 Essential Training,
| | 02:12 | this is possible to change certain
aspects of this particular website.
| | 02:16 | We can change in this case the color
of the website and you can change the
[00:02:210.87]
background color of the web page as well as
the color for the links and the
| | 02:25 | little bar that went across the top of the page.
| | 02:26 | You have the ability to set up your own custom logo.
So you can upload a logo to the web page.
| | 02:31 | You can set a Title or Description.
Turn on and off the Google Fonts.
| | 02:35 | This is just a sampling of things that
you can do here but this is a gold mine,
| | 02:39 | because somebody has already
written all the code for you.
| | 02:42 | What if we were to mine this and as I
said one of the goals that we like to do
| | 02:46 | here for the very end of this video is,
if I hit Close here and go to the front end of the website.
| | 02:52 | What I want to do now is this green header
that goes across the top of the page,
| | 02:56 | I would like to have that green header be yellow
on the English web pages
| | 03:00 | and I would like it to be green on the Italian web pages.
| | 03:03 | What that means is right now we have a
graphic over here driving our logo.
| | 03:08 | That logo has a bit of a green background in it.
| | 03:11 | So somehow I have to just set this up
so that my logo can be swapped out for
| | 03:15 | different logo with a different color
background and I need to have a way
| | 03:19 | that I can change the background color here in
the header to a different color as well.
| | 03:22 | Probably, one that matches that logo over there.
| | 03:24 | If I set that up correctly my client
could then take this KinetECO logo,
| | 03:30 | they could create whatever background color
they wanted, and they could type in the
| | 03:34 | matching color for the header, and they could make as
many different colors for their website as they wanted.
| | 03:38 | This is a fairly common customization
that people want on their websites.
| | 03:42 | They want one color for this section
and another color for another section
| | 03:46 | and another color for another section.
| | 03:47 | This is a very practical application that you may
encounter on the websites that you build professionally.
| | 03:52 | So I am going to walk you through
the process of setting this up.
| | 03:55 | One last final advantage of working with
Template Styles and this is tied into ACL.
| | 04:01 | So you may want to have your client be
able to edit the website,
| | 04:05 | but I strongly doubt you want your client touching
anything where templates are concerned.
| | 04:10 | If you're not concerned about that you really should be.
| | 04:12 | Because if the clients can dig into your code,
they might just dig into their code
| | 04:15 | because they think they know what they're doing
but they really don't
| | 04:18 | and then something breaks
and you get a phone call and they tell you,
| | 04:20 | no, I didn't do anything at all.
| | 04:22 | When, in fact, they have been
digging around in your code.
| | 04:24 | One of the things you can do with ACL is lock
your clients out of the template manager entirely.
| | 04:29 | I cover how to do that in Joomla! 1.7 and 2.5
Access Control Lists.
| | 04:33 | The screens for configuration are
little bit different in Joomla! 3.0,
| | 04:36 | but the process is essentially the same.
| | 04:39 | With Template Styles though, one of the
things that I can do here in the backend
| | 04:43 | of Joomla! particularly under my menu items,
I might want to give my client the
| | 04:47 | ability to create menu items, but then
within the menu item itself here
| | 04:52 | what I can do is there is an
option here for Template Styles.
| | 04:55 | So clients can assign that Template Style that they
want to apply to a web page right directly from here.
| | 05:01 | They don't have to go into your template manager,
they don't have to touch the
| | 05:05 | Template Styles there, they don't have
to touch anything on the master side.
| | 05:08 | They can do it all from the menus.
| | 05:10 | So you can completely lock your client out
of the template manager.
| | 05:13 | They can still assign Template Styles that are available.
| | 05:16 | And that is just a wonderful way to manage
your website, because then you can
| | 05:20 | have multiple instances of Template Styles in use
and your client can access them
| | 05:24 | to assign them to the menu items, but
they never actually get to touch your code.
| | 05:30 | In the next few videos I'm going to show you
how to set up some of these
| | 05:34 | customization parameters inside of your Template Style.
| | Collapse this transcript |
| Editing the XML file| 00:00 | Putting in customization fields for your
template styles is a two-step process.
| | 00:06 | First, you are going to need to edit your
XML file and by editing your XML file
| | 00:10 | you'll make an interface show up inside
of the Template Styles automatically.
| | 00:14 | Then the second thing you are going to
need to do is edit your index.php file to
| | 00:19 | take the data that was generated when
somebody entered some information into
| | 00:23 | that Template Styles form and then
incorporate that into your web page.
| | 00:27 | That what's I am going to be
covering over the next three videos.
| | 00:30 | First, let's take a look at what
we need to do with the XML file.
| | 00:34 | I am going to start by going to opening
up my templateDetails.xml file.
| | 00:40 | which is part of my KinetECO folder.
| | 00:41 | So if you are navigating from your main file structure,
go to your www or your htdocs folder.
| | 00:48 | Inside of that find the templates folder,
find your folder for your website,
| | 00:52 | which I have called mine kineteco and
then find templateDetails.xml,
| | 00:56 | and go ahead and open up that file.
| | 00:58 | This is my KinetECO XML file that we
created many, many, many videos ago.
| | 01:04 | The next thing I am going to open is,
here under protostar once again
| | 01:08 | I am going to open up the templateDetails.xml file
here associated with the protostar template as well.
| | 01:14 | Once again that's from your www or htdocs folder.
| | 01:17 | You are going to go to templates, you are going to
go to protostar, and look for templateDetails.xml.
| | 01:24 | I am going to double-click on that to open that.
| | 01:26 | When we created our original XML file
we created it from this protostar
| | 01:30 | templateDetails.xml file and down
here at the bottom of this page,
| | 01:35 | there is this whole chunk of code down here
where it starts with Config.
| | 01:39 | I said this has to deal with template styles and
customizing them and we erased it off from our XML file.
| | 01:44 | So in fact if you switch over to our XML
file for the KinetECO site, you will see that
| | 01:48 | that whole chunk of code is missing here.
Now we are going to bring some of that back again.
| | 01:53 | The two things that I would like to
have happen is, I like to have the person
| | 01:57 | who is working on the template style be
able to configure a background color for
| | 02:01 | the header and I would like
them to be able to upload a logo.
| | 02:04 | Fortunately, both of those things are
present here inside of the protostar
| | 02:07 | template so we can just copy
and paste the code from here.
| | 02:10 | What I am going to do is I am going to
start copying here at line 49 where it
| | 02:15 | says Config and I am going to go all the way
down here to line 101 where it says /config.
| | 02:19 | Ctrl+C or Cmd+C to copy from templateDetails.xml
here in the protostar template.
| | 02:24 | You can close that XML file.
Now in the KinetECO XML file here at line 27
| | 02:29 | I am going to go ahead and paste
in all of that code from protostar.
| | 02:35 | Now there is only two of these fields that
I want to have from my particular template.
| | 02:41 | I am going to use this templateColor item here
and I am going to use the LOGO file item here.
| | 02:46 | So I don't need this one here called field name.
I can go ahead and get rid of that.
| | 02:52 | I don't need this one called sitetitle.
| | 02:55 | I don't need the one here called sitedescription,
and I don't need the googleFont.
| | 02:59 | I don't need these two options. There we go.
| | 03:03 | So I am going to get rid of all of that.
I don't need fluidContainer.
| | 03:09 | I don't need these two options down here either.
I don't need the /field.
| | 03:13 | So you should be very careful of course
with your XML, opening and closing tags.
| | 03:20 | Any mistakes you make here will be
picked up by Joomla! and probably you will
| | 03:24 | get some sort of horrible error on your website,
like potentially the front end
| | 03:28 | of the website won't even load if
your XML file is not formed correctly.
| | 03:31 | So be very carefully about deleting those tags.
| | 03:35 | The field tags opens here and it closes with the / down here.
Once again it opens here and closes with the / here.
| | 03:41 | Here is fieldset opening and close,
here is fields opening and close,
| | 03:45 | here is config opening and close, and then that
extension tag matches the extension tag up here at line 3.
| | 03:51 | So this little bit of code that I have here now,
let's focus on that.
| | 03:55 | So first of all, the first field here at line 30
is field name of template color.
| | 04:00 | That name is actually going to become something
we will use in the index.php file.
| | 04:05 | It's going to be a color that's the type that it's been
assigned and we have a default value here. 08C.
| | 04:12 | What I would like to have is, my default green value from
my header as my default color for this particular item.
| | 04:19 | So if I look in my Custom stylesheet,
back at the top of the document,
| | 04:23 | here is the background color for header.
| | 04:26 | I am just going to go ahead and copy
that and I am going to paste that in place
| | 04:30 | of the 08C which is my default color.
| | 04:32 | Then you see these two items here on
line 31 and 32 for label and description
| | 04:38 | and that looks like this funny
TPL_POTOSTAR_COLOR_LABEL.
| | 04:42 | These are fields that go with language files
and the idea here is that since
| | 04:47 | protostar is a template that's going to ship
all over the world as part of
| | 04:51 | Joomla! it needs to support literally
dozens and dozens of languages.
| | 04:55 | There is actually a separate file where
you can put in text and that text can be
| | 04:59 | translated and then depending on
which language you are working with,
| | 05:03 | the translated text will load into those places.
| | 05:05 | In my case the only people who are
working on the backend of this website are
| | 05:09 | people who are going to be working in English.
| | 05:11 | So I am just going to erase that
TPL_POTOSTAR_COLOR_LABEL
| | 05:15 | and I am going to put in instead
Header background color.
| | 05:20 | This is the text that's going to show
up next to the box under my style screen.
| | 05:25 | Then the description I can just say,
Enter the hex code for your header background color.
| | 05:35 | Likewise here on the second field name called LogoFile
I have the same language file issue here.
| | 05:41 | So I am going to say instead of
TPL_PROTOSTAR_LOGO_LABEL
| | 05:47 | make sure you keep your quotes,
I am going to call this Logo upload
| | 05:54 | and then the description will be
Upload your logo here.
| | 06:00 | So that's all I have done.
| | 06:01 | I have just taken some code out of
protostar, I have changed the few of the variables,
| | 06:05 | and now I am going to say File>Save.
| | 06:07 | If I go now to the front end of my website,
I am going to Refresh. It's still here.
| | 06:12 | That's a good thing that probably
indicates that my XML was well formed.
| | 06:16 | Now I am going to flip over to the backend
of the website and I am going to go to
| | 06:19 | Extensions>Template Manager and let's
just look at any one of these KinetECO
| | 06:25 | style instances and I am just going to
click on the English one here
| | 06:28 | and if I go to Options, look I actually have the
interface now for changing my header
| | 06:33 | background color and for uploading a logo.
| | 06:35 | However, just because these fields exist
doesn't mean that they do anything.
| | 06:39 | In fact they do nothing at the moment.
| | 06:42 | We've put in the information in the XML file,
which then Joomla! renders here into
| | 06:47 | the form that you need to change the
background color and upload the logo,
| | 06:51 | but they're not connected now to the index.php file.
| | 06:55 | I am going to show you how to do that in the next video.
| | Collapse this transcript |
| Making changes to index.php for the logo upload| 00:00 | Now that I have the code in place to
upload my logo, I need to make sure that
| | 00:05 | that is actually connected to my
index.php file which I have opened here.
| | 00:09 | This is the KinetECO index.php file.
You can find that from your www or your
| | 00:14 | htdocs folder by going into your
Templates folder into the KinetECO folder
| | 00:19 | and into index.php and you can find this particular page.
| | 00:23 | Right now, we are collecting information
inside of our template style, but the
| | 00:28 | index.php is not doing anything with it
because we haven't told it to do
| | 00:31 | anything with the information that it's got.
| | 00:33 | So that is the next step, and fortunately Protostar
is once again a great place
| | 00:38 | to go to find the code that we need
to make this happen.
| | 00:42 | So if you go to the Protostar template
and you open up the protostar index.php file,
| | 00:49 | up here in the head of the document we skipped over
a whole bunch of stuff as we created our index.php file.
| | 00:54 | Now we are going to come back and revisit some of that.
| | 00:57 | So here in the protostar template, if you scroll down
here in the head of the document,
| | 01:04 | down to line 64, you will find this
little bit of code here, that says
| | 01:08 | Logo file or site title param and there is this big long
if, elseif, else statement here at the top.
| | 01:15 | Go ahead and copy that whole entire
chunk of code here, it's line 64 to 77.
| | 01:20 | Ctrl+C or Cmd+C to Copy, and then
inside of our index.php file, after the
| | 01:29 | line about JHtmlBootstrap on line 8,
hit Return a couple of times and paste in
| | 01:33 | the code that you just copied from protostar.
| | 01:36 | The way protostar works is, if you
upload a logo file it's going to display it
| | 01:40 | on the website but if you don't and you
type in a title and a description into
| | 01:45 | the fields that are provided, it displays those.
We don't want anything that complicated.
| | 01:48 | So we're going to take what we have here,
and we are going to reduce it a little bit.
| | 01:53 | So what we have got right now, first of all,
we have got this little else statement down here,
| | 01:58 | about the site title.
We are not going to need that, so you can erase that.
| | 02:02 | We also have this elseif here.
We are not going to need that, you can erase that.
| | 02:07 | Also be careful about your opening and closing PHP tags.
| | 02:10 | Notice this one here on line 18 is now grayed out.
| | 02:14 | We only need one and we opened our PHP tag up here
on line 1, we are going to close it here on line 16.
| | 02:20 | So the one here on line 18 we don't need.
Make sure you get rid of that.
| | 02:24 | So this little bit of code here now between lines 10 and 14
is what we are going to use on our website.
| | 02:31 | This is the way that the logo has been uploaded
from the template style.
| | 02:36 | Now what we are saying is, if there is a logo file
that's coming from your template style,
| | 02:41 | you are going to assign it a variable of logo. The logo
is going to have this value of a bunch of HTML here.
| | 02:47 | Basically it's the image tag that will
display the logo on your website.
| | 02:51 | That's what all this little bit of code here does,
and what it's going to do is
| | 02:55 | it's going to say an image source of the root
of the website and the logoFile,
| | 03:00 | the path to a logoFile and then it's going
to have an alt tag of your sitename.
| | 03:04 | So if you want to make a change to this,
you can change it.
| | 03:07 | Now this is only going to create a variable called logo,
that's all it's going to do.
| | 03:12 | Logo itself isn't doing anything on the web page
but now we have a variable called logo.
| | 03:16 | So there is one more thing that we need
to copy here from protostar
| | 03:22 | and that is down here, right here on line 140.
| | 03:27 | So you see here on the header in the
protostar template we have this little bit
| | 03:31 | of code here where it says php echo $logo,
that's the little bit of code that
| | 03:37 | actually displays the logo on the web page.
| | 03:38 | The HTML gets formed way up there in
the head of the document and then it's
| | 03:42 | written into the web page using this.
| | 03:43 | So I am going to copy that little bit
of code and inside of my index.php
| | 03:48 | I am going to scroll on down to
where my logo is displaying.
| | 03:52 | Right now, I haven't hard-coded into
the page right here, so I am just going to
| | 03:56 | paste this right here in front of the a href.
Now here is what's happening.
| | 04:01 | This logo is going to be replaced.
I have a different Alt tag, maybe I would
| | 04:06 | like to keep that Alt tag, and then I have
this class that needs to still stick around.
| | 04:10 | This class of pull-left visible-tablet
visible-desktop, I am going to copy all
| | 04:15 | of that, because that's all the stuff I want to keep.
Copy and then I am going to erase my Image tag.
| | 04:22 | I am going to keep this one here
because I am not going to let people customize
| | 04:26 | the mobile logo, so that's going to stay
here in place but the main desktop logo
| | 04:31 | that will be able to be customized by that little bit of code.
| | 04:34 | Up here at the top of the document now,
in this image source tag, where it says
| | 04:40 | the alt here for the sitename, I am
going to erase that and I am going to paste
| | 04:44 | in the code that I copied from down below.
| | 04:47 | So now instead of having an alt that's
just a variable for the site name,
| | 04:51 | I can actually hard-coded in,
because this is custom template and I know exactly
| | 04:54 | what I want the value to be.
| | 04:56 | I have added a class to this particular HTML tag as well.
| | 05:00 | Okay, so now is the moment of truth.
If I say File>Save what's going to happen?
| | 05:05 | Well, when I refresh the front end of the website
I just got rid of the code
| | 05:09 | that's displaying a logo for the desktop version of the site.
| | 05:12 | You now have to configure it inside
of the template style parameters.
| | 05:16 | So what should happen is when
I refresh my website I should see a page
| | 05:21 | with no logo on it at all, and that's a good thing.
| | 05:23 | So let's look at the front end of the website.
| | 05:25 | When I refresh my page, sure enough my logo is now gone.
| | 05:30 | I'm going to have to configure that in
the backend of Joomla! for the template
| | 05:33 | style for this part of the website.
| | 05:35 | But before I do that I need to work on
this background color as well.
| | 05:39 | I'll show you how to configure that part
of it in index.php in the next video.
| | Collapse this transcript |
| Making changes to index.php for the header background color| 00:00 | So we were missing logo on the
top header of this web page.
| | 00:03 | That's actually a good thing, because now
we are going to configure that logo image
| | 00:07 | through our Joomla! template style.
| | 00:09 | But before I do that, I want to make sure
that my header is the same background
| | 00:13 | color as my logo will be when it matches it.
| | 00:17 | So I need to make sure that this is going
to have a green background by default,
| | 00:22 | but then I could of course override it
to yellow later on, and I'm going to show
| | 00:26 | you how to set that up now.
| | 00:28 | So back here in the back end of Dreamweaver
again, I am going to flip over here
| | 00:32 | to my protostar template file.
| | 00:35 | This is protostar index.php from your
www or your htdocs folder, go into your
| | 00:41 | templates folder, go into the protostar folder
and in index.php this is the
| | 00:47 | code here that is driving that template.
Once again we're going to steal from this.
| | 00:51 | If you scroll on down the page here,
we're looking for the code that changes
| | 00:55 | the background color of your web page, and
that can be found actually within the HTML.
| | 01:04 | Starting here on line 98, and so what we
want to do is we want to copy this bit
| | 01:10 | of code here from the ?php here, all the way
on down to right here. This is what we want.
| | 01:17 | This much of the code.
So this is lines 97 through 106.
| | 01:22 | I'm going to go ahead and Ctrl+C or Cmd+C
to copy that little bit of code.
| | 01:26 | Now this is a style that is going to be
going in the head of your document.
| | 01:31 | It's an embedded style as opposed to
a style from an external style sheet.
| | 01:35 | And this is okay because this might be
overriding some values that you might
| | 01:39 | have created in your custom stylesheet,
and by putting it in the head of the
| | 01:42 | document then we're overriding
what is in that custom stylesheet.
| | 01:45 | So I'm going to copy this little bit of
code and I'm going to go to my index.php
| | 01:50 | file and I'm going to scroll on
down here to the head of my document.
| | 01:54 | Where I want to put this is just
after my custom stylesheet, so right here
| | 01:58 | between my bit of code that's
referencing my custom stylesheet and my /head tag.
| | 02:04 | Around line 30, I'm going to
paste in the code that I just copied.
| | 02:07 | And in fact, there's a couple of little
issues with it, I'm getting there just hang on.
| | 02:12 | So here what's happening, it says
if there are some parameters like get
| | 02:16 | ('templateColor') template color,
okay, and we called out template color
| | 02:21 | inside of our XML file, that was
going to be the color that will become the
| | 02:25 | color for our header.
| | 02:27 | Then what we're going to do is we're
going to write in an embedded style,
| | 02:31 | which starts with our style tag and
then we need our style declaration.
| | 02:37 | Well, in our custom stylesheet our
header is actually just a header HTML tag
| | 02:42 | with a background color associated with it.
| | 02:44 | So I need to change this, it's
not body.site, it is simply header.
| | 02:51 | Then what I want to do is I want to
change the background color, so I'm going to
| | 02:55 | erase, I don't need the border-top,
but templateColor is the name of my
| | 02:59 | variable, so actually I want templateColor,
but I want it to appear right here.
| | 03:05 | So here's what that code says now, it
says in my header we're going to have a
| | 03:11 | background color of, get the template color
out of the template and display it here, okay.
| | 03:17 | We need to end our style with a
Semicolon (;), we need to end our style with a
| | 03:22 | curly bracket and of course, we need our closing style tag.
So don't forget to add those items.
| | 03:28 | Our PHP tag opens here closes here,
so that should be all set, but notice that
| | 03:33 | there's a curly bracket right here, so
we're going to need to end that curly
| | 03:37 | bracket right here, and I think
that's here inside of index.php.
| | 03:43 | Down here at the bottom you see that
little bit of code here, lines 124 to 126.
| | 03:48 | Copy that and paste that in here at line 40.
| | 03:52 | So that is our closing bracket here to
make PHP happy, it needs an opening and
| | 03:58 | the closing bracket associated with the if.
We have our opening and closing
| | 04:03 | style tags and we have a well formed
style that's declared here as well.
| | 04:07 | Okay, so now if I go ahead and save my
index.php, File>Save and I have got all
| | 04:13 | my code correct, when I flip over to the
front end of the website and I refresh,
| | 04:18 | I should see absolutely nothing different.
| | 04:19 | That's because we set a default value
for our header background color inside of
| | 04:24 | the XML file and we set that to be this green color.
| | 04:27 | In order to make the yellow version for
the English pages of our website, we're
| | 04:31 | going to need to change that to yellow
and we're going to need upload the yellow
| | 04:35 | version of the logo, and then for the
Italian pages we're going to leave the
| | 04:38 | background color at green and we're going
to need to upload the green background logo.
| | 04:42 | Then we'll be done configuring this part of the website.
| | 04:45 | So I'll show you how to do that in the next video.
| | Collapse this transcript |
| Configuring the styles| 00:00 | Finally, the moment you all have been waiting for.
| | 00:03 | Now that we have the code in place
in the XML file to collect information
| | 00:07 | including the logo that we're upload to
the website and a background color, and
| | 00:10 | we have information inside of the
index.php that receives that and
| | 00:14 | will display it on the web page.
| | 00:16 | Now what we need to do is configure
our template styles with the right logo
| | 00:19 | and the right color and we should be done with a
two-color version of our template for our website.
| | 00:26 | So, I'm going to start this by going to
my backend of Joomla! and I'm going to go
| | 00:30 | to Extensions>Template Manager.
| | 00:33 | And here inside of our Template Manager
remember we have three styles we need to
| | 00:36 | configure, the one with the language of all,
a kineteco-English template
| | 00:40 | and a kineteco-Italian template.
| | 00:42 | So now I'm going to click on my
English template here and I'm going to switch
| | 00:47 | over to my Options tab, I'm going to
set my Header color to #e7ea51,
| | 00:54 | a lovely shade of yellow, and then I'm
going to upload my logo to the website.
| | 00:59 | So here I am in the Media Manager,
I'm going to scroll on down here to the
| | 01:03 | bottom of the screen for the upload file.
| | 01:05 | I'm going to scroll down to the bottom
of the screen here and I'm click on the
| | 01:09 | Browse button, and I'm going to go to
my exercise files and find my yellow
| | 01:15 | version of this logo and say Open
and say Start Upload.
| | 01:20 | Then I'm going to find my logo in the
list and select it, and I'm going to say
| | 01:25 | Insert, and then I'm going to hit Save & Close.
| | 01:30 | Now when I go to the front end of the
website and I hit my Refresh button
| | 01:34 | I have my lovely shade of yellow here along with
the logo and the page is looking really great.
| | 01:40 | Let's see how it works responsively now.
| | 01:42 | So if I take my Firefox window here
and I shrink the screen down,
| | 01:48 | everything looking good, oh, until I
get here. So, what happened?
| | 01:53 | Well, what's happened is I have now inside of my CSS
a style in the head of my document for the header.
| | 02:01 | So in my custom stylesheet I have a header style,
it's just the header HTML tag that set to green.
| | 02:07 | In my embedded stylesheet the styles
that appear inside of the head of this
| | 02:11 | document, I have an override for that,
so the embedded style is set to a HTML
| | 02:17 | class of header and to this yellow
color and you can see that if you view the
| | 02:22 | source for this web page, you can see
the HTML shows up right here the HTML tag
| | 02:30 | of header and there's my background-color.
| | 02:31 | And as you know, embedded styles
override what's in an external style sheet.
| | 02:36 | So now what I need to have happen is
when my screen shrinks down for a mobile
| | 02:40 | layout, what I want to have happen
is I want to have my header go white.
| | 02:45 | And we had styled this before, we
styled it in our custom CSS and we said we
| | 02:49 | wanted the header to be white, but
that style is still just one HTML tag, the
| | 02:54 | header tag, calling for a background of white.
| | 02:56 | If we make that style more specific by
adding additional HTML tags where that's
| | 03:01 | concerned or making a custom class or
something, we can override the style that
| | 03:06 | we have embedded in the stylesheet,
because the style that we'll put in our
| | 03:10 | media query will be more specific as
more stuff in it, it has a higher priority
| | 03:15 | even than the embedded style sheet.
| | 03:17 | So, what we're going to do is we're
going to go to Dreamweaver here and inside
| | 03:22 | of my custom stylesheet I want to
scroll all the way down to the bottom here
| | 03:26 | where I have my media query for 767
pixels, and you see here we have header, we
| | 03:31 | have a background color of white.
| | 03:33 | Right now that's not overriding my
embedded style, but if I add an extra HTML
| | 03:37 | tag here, so if I say body header for
example, because of course the header tag
| | 03:42 | lives inside of the body tag, now I have
a style that's more specific because it
| | 03:46 | calls for two HTML tags
instead of calling for just one.
| | 03:50 | So if I say File>Save and
now I refresh my web page here.
| | 03:56 | Now I have that white background
color that I wanted and I can continue to
| | 04:00 | collapse my screen, everything looks
great and as I pull the screen out here
| | 04:05 | I go back to my yellow header.
| | 04:06 | So, that's one down, now I need to
configure my Italian side of the template styles.
| | 04:12 | I'm going to go to my Italian style
here, I'm going to go to the Options tab,
| | 04:17 | the Header background color should be
set to this green, my Logo upload, I'm
| | 04:21 | going to hit the Select button, Browse
for the green version of the logo and say
| | 04:25 | Open>Start Upload and when I scroll on
down the screen here pick that and say
| | 04:32 | Insert and Save & Close.
| | 04:36 | And now when I come back to the website
here and I switch to the Italian side,
| | 04:41 | I have a green header here for the
Italian side of things and when I switch back
| | 04:45 | to the English side I have a yellow
header, which is exactly what I wanted.
| | 04:49 | Now don't forget there's one final
style to configure, it's the default style
| | 04:55 | for the website when a language is not declared.
| | 04:58 | If you forget this particular style then it's just going
to display with no logo in the header.
| | 05:03 | The easiest thing to do is probably
just to keep it green, so I'm going click
| | 05:07 | on the default here and under my
Options I'll select the green logo, you can in
| | 05:14 | fact reuse these logos, you don't have to
upload a unique one every time, and say Insert.
| | 05:19 | I'll keep my Header background to the
green color and then say Save & Close.
| | 05:22 | So, in this particular style we need
to make sure that all three styles are
| | 05:26 | configured with that header
graphic as well as the background color.
| | 05:31 | Always make sure you test as soon as
you add something like this, what we found
| | 05:35 | was a little bug, as we shrunk the
screen down and went to a responsive design,
| | 05:39 | but we overcame that with a little CSS
tweaking to make sure that our background
| | 05:42 | was white when we went down to
smaller size screens for mobile devices.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | So, thanks so much for watching
Joomla! 3 Responsive Design,
| | 00:04 | I hope you have enjoyed the title.
I just want to point you to a few resources
| | 00:08 | if you need some more help.
| | 00:09 | Here is The Joomla! Forum at forum.joomla.org.
| | 00:12 | This is a great place to go to ask
any questions about Joomla!
| | 00:16 | and its configuration including templates.
| | 00:19 | If you scroll on down the page here in
the forum you'll find under Joomla! 3
| | 00:24 | that there is an entire area here for Joomla! 3 templates,
and you can go here and ask questions
| | 00:30 | about Joomla! 3 templates here
and you can reasonably expect to get answers
| | 00:35 | as you see here these have been updated fairly recently.
| | 00:38 | Today is Wednesday, November 7th, so these are
updated and monitored on a very regular basis.
| | 00:44 | If you feel like Bootstrap was incredibly cool,
but you would love to learn a little bit more about it,
| | 00:49 | you can always take a look at my course
| | 00:53 | Up and Running with Bootstrap, which is available here
inside of the lynda.com online training library.
| | 00:56 | And if you're moving on to other Joomla! topics,
be sure you take a look at
| | 01:00 | Joomla! 1.7 and Joomla! 2.5:
Access Control Lists in Depth.
| | 01:04 | Yeah, I know it's Joomla! 1.7 and Joomla! 2.5,
the process of setting up ACL for
| | 01:10 | your website has not changed in Joomla! 3.
| | 01:12 | The screens for configuring it have changed.
| | 01:15 | So where things are located and how the screens look,
they are slightly different in Joomla! 3,
| | 01:18 | but the process for setting up ACL has not changed at all.
| | 01:23 | You should be able to follow this course
and look at the process and then adapt
| | 01:26 | to your different interface inside of Joomla! 3.
| | 01:29 | And finally, take a look at
Web Site Strategy and Planning.
| | 01:33 | It's always good to start your website
project with a strategy and with a plan
| | 01:38 | before you sit down and start clicking
around in Joomla! and this title will walk
| | 01:42 | you through how you can think through
exactly how you're going to setup your website,
| | 01:47 | what it is exactly you're going to build
and you would not believe
| | 01:50 | how much time this will save you clicking
around in Joomla! if you have a very clear plan
| | 01:54 | on paper before you start clicking around.
| | Collapse this transcript |
|
|
