IntroductionWelcome| 00:04 | Hi! I'm Jen Kramer. Welcome to Joomla!
Creating and Editing Custom Templates.
| | 00:10 | By now, you've worked with Joomla!
| | 00:11 | and have discovered how to make it do
anything you want through components,
| | 00:15 | modules, and plug-ins.
| | 00:17 | Now you want to make Joomla! look
exactly the way you want.
| | 00:21 | Using templates, template styles,
template overrides, and layout overrides, you
| | 00:26 | can achieve a fine level of
customization in your Joomla!
| | 00:29 | 1.6, 1.7, and 2.5 web sites.
| | 00:33 | Starting with a static HTML web page,
we'll convert this to a Joomla!
| | 00:38 | template by adding module and component
code, creating an XML installation file,
| | 00:44 | and uploading the template.
| | 00:45 | Then we'll work on editing the CSS to
support the content on the web site.
| | 00:50 | Finally, using template styles, I'll
create a customized look for the homepage
| | 00:54 | relative to other pages on the web site.
| | 00:57 | I'll also throw in a few tools and
tips about working with CSS in Joomla!,
| | 01:02 | including using the Firefox Web
Developer toolbar, Firebug, and other
| | 01:06 | third-party Firefox extensions.
| | 01:09 | So let's get started with Joomla!
Creating and Editing Custom Templates.
| | Collapse this transcript |
| Using the exercise files | 00:00 | Exercise files are available to
Premium subscribers of lynda.com.
| | 00:05 | Simply download the exercise files
to your computer and place them on the
| | 00:09 | desktop for ease of access.
| | 00:11 | Exercise files are organized by chapter number.
| | 00:14 | Where there are web sites assets
available, like text or images, style sheets,
| | 00:20 | XML files, or many other things we will
encounter while working with templates,
| | 00:24 | you will see a yellow overlay
indicating the name and location of the file
| | 00:29 | within our exercise files structure.
| | 00:32 | I strongly encourage you to watch this entire
video from start to finish for best results.
| | 00:39 | I'll show you how to create a template
from scratch using HTML and CSS, and
| | 00:45 | then we're going to add to it and make
it a little bit more interesting, adding
| | 00:49 | template overrides, layout overrides,
extensive style sheets, and so forth.
| | 00:55 | However, I do understand that many
of you may want to skip around while
| | 00:58 | watching the video.
| | 01:00 | In all likelihood, some of you will
want to skip Chapter 5 altogether
| | 01:04 | because Chapter 5 is a series of
videos about styling your Joomla template,
| | 01:09 | and many of you may find this a
little bit too elementary if you know
| | 01:13 | style sheets particularly well.
| | 01:16 | I have provided for you, in
Chapters 4 or 5, 6 and 7,
| | 01:20 | you'll see that there will be folders
and inside of those folders will be a zip
| | 01:26 | file and an SQL file.
| | 01:29 | I also provide this at the very start
of Chapter 1, which is the starting point
| | 01:34 | for the entire web site.
| | 01:36 | If you have completed Joomla!
1.6 Essential Training Course,
| | 01:39 | that is the starting point for
the Joomla 1.6 Creating an Editing
| | 01:44 | Custom Templates Course.
| | 01:46 | So, you won't need to install anything new.
| | 01:48 | You can just work with what you've
already created on your own machine.
| | 01:53 | The zip files here and the SQL file
will be used to restore your Joomla site to
| | 01:59 | that particular point in the video.
| | 02:01 | Once again, you do not need to restore
these unless you are stuck or if you're
| | 02:07 | skipping around over the
course of completing these videos.
| | 02:12 | These backups are here only for
emergencies or if you're really, really stuck.
| | 02:17 | If you don't have access to the
exercise files, you can still follow along with
| | 02:22 | these videos using your own material
and still have an enjoyable and fulfilling
| | 02:28 | learning experience.
| | Collapse this transcript |
| About Joomla! versions| 00:00 | You will notice that I'm working
with Joomla! 1.6
| | 00:02 | in this course, however since
this course was released, two new Joomla!
| | 00:07 | versions have also been
released, Joomla! 1.7 and Joomla! 2.5.
| | 00:12 | You'll be pleased to know that
you can follow this course without
| | 00:16 | difficulty using Joomla! 1.7 or Joomla! 2.5.
| | 00:19 | Templates work exactly the same way
| | 00:22 | in Joomla! 1.6, 1.7, and 2.5. No major changes
were made to the way templates function.
| | 00:28 | However, the exercise files in this
course were built using Joomla! 1.6.
| | 00:35 | You can follow the course using these Joomla! 1.6
exercise files within Joomla! 1.6.
| | 00:42 | But be careful, you cannot combine Joomla!
| | 00:46 | 1.6 exercise files and try to run
them within a Joomla! 1.7 or Joomla!
| | 00:51 | 2.5 web site.
| | 00:52 | You will wind up with errors.
| | 00:55 | I would encourage you to use your own
custom template project to follow these
| | 00:59 | videos if you want to work with Joomla!
| | 01:01 | 1.7 or 2.5 instead.
| | 01:04 | If you do run into compatibility issues
with this video, between what's said in
| | 01:09 | the video and Joomla! 1.7 or
2.5, I do want to hear about it.
| | 01:14 | Please send me an email from my web
site shown here at jenkramer.org.
| | 01:18 | Enjoy the course and have fun making
custom templates for your Joomla! web site.
| | Collapse this transcript |
|
|
1. Understanding Joomla! TemplatesRestoring the "chapter starting state" exercises| 00:00 | If at some point along the way while
watching these templates videos you get
| | 00:04 | really, really stuck, or if you're
just skipping around--even though I am
| | 00:09 | advising you not to do that--you may
wish to jump in at some point in time at
| | 00:14 | the start of one of the chapters and
follow along with the exercise files at
| | 00:18 | that particular point in time.
| | 00:20 | If that's the case, you'll probably
want to start from some of the backups for
| | 00:24 | the web site that I've provided for you.
| | 00:26 | This video will show you how
to restore from your backup.
| | 00:30 | Remember that I've provided for you
two files in order to restore your web
| | 00:35 | site from these backups.
| | 00:37 | One file is a zip file which
contains all of the files and folders and
| | 00:42 | images and PHP and everything that's required
to run the web site, except for the database.
| | 00:49 | The second file is in fact the database.
| | 00:52 | You need both of these sets of files to work
together in order to create a Joomla web site.
| | 00:57 | You can't use just the files by themselves.
| | 01:00 | If you're interested in restoring from
backup, or if you're just interested in
| | 01:05 | configuring your computer with the web
site from the starting point, then here's
| | 01:10 | the way you're going to go ahead and do that.
| | 01:12 | Open up your htdocs folder.
| | 01:14 | Those of you who are on PCs like me,
| | 01:16 | that would be on your C: drive,
| | 01:18 | in the XAMPP folder, under htdocs.
You'll see something like this if you already
| | 01:23 | have Joomla installed.
| | 01:25 | You may see different files and folders
if you're using XAMPP for the first time.
| | 01:30 | You may see something else
inside of this htdocs folder.
| | 01:33 | If you're a Mac person, you need to go
to your MAMP folder and look inside of
| | 01:38 | that for your htdocs folder.
| | 01:39 | Once again, you may see something like this,
or you may see some different files in place.
| | 01:45 | Whatever is there, we're going to go
ahead and remove it, which by the way
| | 01:49 | means that you don't have a backup.
| | 01:51 | So be very careful about doing this.
| | 01:54 | Before I do that, let me just remind
you once again, if you've followed along with
| | 01:58 | the Joomla 1.6 Essential Training
Course and you made your way completely
| | 02:02 | through that process, that ending point
for the web site that you built in that
| | 02:07 | course is in fact the starting
point for the Templates course.
| | 02:12 | So you don't need to restore your web
site from my files, unless you want to be
| | 02:16 | sure that you're starting
from exactly the same place I am.
| | 02:21 | And then what I am going to do is I am
going to open up my exercise files to
| | 02:26 | Chapter 1, to 01_01, by double-clicking on it.
| | 02:29 | And I can see all the files and folders
that are contained within the zip file.
| | 02:33 | I am going to highlight all of these
zipped files, and then I am going to drag
| | 02:39 | them into my htdocs folder.
| | 02:41 | And that will copy everything out
of the zip into my htdocs folder.
| | 02:45 | You can use whatever
methodology works for you to do this,
| | 02:47 | but basically you're trying to unzip the
contents of this zip into the htdocs folder.
| | 02:54 | You do not want to make
another folder inside of htdocs;
| | 02:57 | you want all of these files and folders
that are located inside of the zip to be
| | 03:01 | located directly inside of the htdocs folder.
| | 03:05 | While that's going on, I am going to go
ahead and open up phpMyAdmin by clicking
| | 03:10 | on my Admin button here from my XAMPP Control panel.
| | 03:14 | Inside of here I have a database
already that's called joomla16.
| | 03:19 | You may not have this if you
haven't worked with XAMPP before. You may not
| | 03:23 | have a database at all.
| | 03:24 | If you have been following along with
the Joomla 1.6 Essential Training, you may
| | 03:28 | indeed already have this database.
| | 03:31 | If you do have a database called joomla16,
we're going to get rid of it as our first step.
| | 03:36 | And to do that we're going to click
this button over here called Drop, which
| | 03:39 | means that it'll drop all
of the tables, or delete them.
| | 03:43 | So it will warn me that I am about to
destroy a complete database. Do am I sure?
| | 03:48 | I am going to day yes.
| | 03:50 | And that database will go away.
| | 03:52 | It's possible that many of you are
starting from this particular point and you
| | 03:55 | don't already have a joomla16
database, which is absolutely fine.
| | 04:00 | You just pick up the
instructions from right here.
| | 04:03 | So where it says to create a new database,
we're going to create a database once
| | 04:07 | again called exactly the same thing, joomla16.
| | 04:12 | And the reason you want to call it
called exactly the same thing is that the files
| | 04:17 | that you've just unzipped into your
htdocs folder are designed to match a
| | 04:21 | database called joomla16.
| | 04:23 | And if you don't have a database
called joomla16, you're going to find it
| | 04:27 | very difficult to make those files
talk to the database, so make sure you
| | 04:33 | call it exactly this.
| | 04:34 | Go ahead and hit the Create button
and the database will have been created.
| | 04:40 | Now we need to put the information into
that database, which we'll do by hitting
| | 04:44 | the Import button, and we will browse
for the SQL file that I've provided.
| | 04:50 | We're going to go to Chapter 1 >
01_01 and I am going to find 01_01.sql and
| | 04:58 | hit the Open button.
| | 04:59 | Everything else can stay exactly
the same, then hit the Go button.
| | 05:03 | This will import all of the information
required to run a Joomla 1.6 web site.
| | 05:09 | If we take a look at our
WinZip, it looks like that's done.
| | 05:12 | We've unzipped all of our files.
| | 05:15 | And if I take a look at my
htdocs, I've got stuff in place.
| | 05:19 | So if you're on a Mac computer and
you're using MAMP, you'll need to edit the
| | 05:25 | configuration.php file before
you can complete this process.
| | 05:31 | I am in Dreamweaver only because it's a
great program for editing lots of kinds
| | 05:36 | of files and I am about to edit a PHP file.
| | 05:39 | So I've got Dreamweaver open to do that.
| | 05:41 | You can use pretty much any
program to make this change.
| | 05:44 | Any kind of text editor will work.
| | 05:47 | Open source equivalent to Dreamweaver called
Composer is a wonderful way to make this change.
| | 05:52 | So don't feel like you've to run out
and get Dreamweaver just to make this one
| | 05:55 | little change that I am about to show you.
| | 05:57 | So again, Mac people only running
MAMP, what you'll need to do is go to
| | 06:02 | configuration.php, which you can get
to by going to your htdocs folder.
| | 06:09 | So from my hard drive, I've gone
to XAMPP and I have gone to htdocs.
| | 06:13 | Mac people, of course you're going to
go to the Users/Applications/MAMP/htdocs
| | 06:21 | folder, and inside of htdocs,
you'll find your configuration.php file.
| | 06:27 | Go ahead and open that.
| | 06:30 | And I've got my code blown up really
big, so that you can see it nicely here.
| | 06:33 | This is the values that are in
configuration.php, and the one that will trick Mac
| | 06:41 | people on MAMP up is right here on line 14.
| | 06:45 | Windows people have a username of 'root' and
no password when they're working with XAMPP.
| | 06:50 | However, Mac people when working with
MAMP, have a username of 'root' and a
| | 06:56 | password of 'root', which you'll need to
enter by typing it in between the single
| | 07:01 | quotes, just as I've done here.
| | 07:03 | Save the file and you should be
able to continue on with your database
| | 07:08 | restoration process and getting the
copy of Joomla up and running.
| | 07:13 | So now I am ready here, go ahead and open up
a new tab, and I am going to go to localhost.
| | 07:19 | And if all went well, you should see
your web site, which is the ending point of
| | 07:24 | the Joomla! 1.6 Essential Training course.
| | 07:28 | You can log in to back-end of this web
site by going to localhost/administrator,
| | 07:36 | and entering for your login a
username of 'Jen' and password of '123456'.
| | 07:43 | Hit the Login button and you should be
logged in to the back-end of the web site,
| | 07:47 | where you can go ahead and complete any
of the work required that's going to be
| | 07:52 | described in the upcoming videos.
| | Collapse this transcript |
| Joomla! templates| 00:00 | A Joomla template controls
the look and feel of a web site.
| | 00:04 | A template in Joomla does the same
thing as a theme in WordPress or Drupal.
| | 00:08 | Many designers think that they're
limited in how a CMS web site can be designed.
| | 00:14 | They believe there are many
limitations about what they can put where and how
| | 00:18 | exactly things look.
| | 00:19 | That may be true for some commercially
available templates, but it's absolutely
| | 00:24 | not true when you design your own.
| | 00:26 | As with any medium, there are indeed
some boundaries when designing a Joomla
| | 00:31 | template, or any CMS template.
| | 00:33 | Remember that since your client can
input anything anywhere on the web site,
| | 00:38 | your design must be
graceful enough to handle this.
| | 00:42 | Creating CMS Web Graphics using open
source tools located in the lynda.com
| | 00:48 | Online Training Library
| | 00:50 | covers some of the principles that
you should watch for in your design.
| | 00:53 | For example, your design should work no
matter how far down a page your content
| | 00:59 | or module might reach.
| | 01:01 | You may have as many Joomla templates
as you wish for your particular web site.
| | 01:06 | In fact, you can have a different
template for every single page on your web site.
| | 01:11 | But just because you can,
doesn't mean you should.
| | 01:15 | I recommend trying to incorporate as
much code as possible, such that you can
| | 01:19 | derive several looks from a single template.
| | 01:22 | For example, maybe on some pages you
want to have a right column, while on other
| | 01:28 | pages you definitely don't.
| | 01:30 | I will cover how to put that together.
| | 01:33 | One template which might be the only
template for the web site will become
| | 01:37 | the default template.
| | 01:39 | This is the template that's used when
no specific template is assigned to a
| | 01:43 | specific page on your web site.
| | Collapse this transcript |
| Understanding Joomla! template files| 00:00 | Joomla templates consist of
certain files organized in a certain way.
| | 00:05 | This includes images, CSS files,
an index.php file, an XML file, and
| | 00:12 | thumbnail.png files.
| | 00:15 | Files must be named and organized in a
certain way for proper functioning of Joomla.
| | 00:20 | If you take a look in the file
structure of your computer--I am looking in the
| | 00:24 | htdocs folder for XAMPP--
| | 00:26 | and if you look at the htdocs folder
for MAMP, you should see something very
| | 00:30 | similar, which are all of these
folders and files that make up Joomla One of
| | 00:35 | these folders is called Templates.
| | 00:37 | If you double-click on it to open it,
you will see that there are four templates
| | 00:42 | that are listed here.
| | 00:43 | These are our frontend templates
and they include atomic, beez2, beez5--
| | 00:51 | which we saw all three of those in
the Joomla 1.6! Essential Training video--
| | 00:56 | and one called system.
| | 00:58 | The system folder has to do with
some defaults that are set by the system,
| | 01:03 | and they are used if these are not
overridden in one of the individual template folders.
| | 01:09 | Let's take a close look at beez_20, or 2.0.
| | 01:14 | Inside of here, this is one of the more
complicated templates, and it has all of
| | 01:20 | the fixings in terms of what could be
impossibly included in a template folder,
| | 01:25 | so this is a great example to look at.
| | 01:27 | There is a CSS folder, starting with
that, and inside of the CSS folder, note
| | 01:32 | that we have a whole series of style sheets.
| | 01:37 | Some of them are browser specific, like
Konqueror and Mozilla and Opera, IE.
| | 01:42 | Some of them let the template work
from right to left for right-to-left type
| | 01:47 | of languages, and some of them have to do with
colors, positioning, printer-friendly versions.
| | 01:52 | So, the way this template was coded,
things were divided up in many different
| | 01:57 | ways to include the styles for the web site.
| | 02:01 | You can use a single style sheet for your
template if you wish. Or you can follow
| | 02:07 | this person's approach and put it in
many different style sheets; whatever works
| | 02:11 | better for you is fine.
| | 02:14 | There is another folder that is typically used
on Joomla installations is the images folder.
| | 02:21 | These images that are included here
are images that are used specifically
| | 02:27 | within the template.
| | 02:28 | In other words, they show
up in the template itself.
| | 02:31 | These are not images that appear in
articles for the web site; those you would
| | 02:36 | upload to the media manager.
| | 02:38 | So think of this image directory as
a place where you can put images that
| | 02:43 | you don't want your client
accidentally deleting and images that aren't
| | 02:46 | going to change often.
| | 02:48 | You can only access this images folder
through ftp or through the file manager
| | 02:53 | in your web hosting.
| | 02:57 | Other required files within this Joomla
folder include index.php, located right here.
| | 03:04 | This is all of the programming
for making the template work.
| | 03:08 | template_preview and template_
thumbnail are used in two places in the back-end
| | 03:13 | of Joomla. The preview is used in the
new template masters page that show a
| | 03:19 | large version of each template on the
web site, whereas the template_thumbnail
| | 03:23 | is what you get when you mouse over the name
of the template and a small preview pops up.
| | 03:29 | And templateDetails is an XML file
that dictates how all of these files fit
| | 03:35 | together and how they should
be installed on the web site.
| | 03:39 | As for optional things that are
included here, they include the fonts folder.
| | 03:44 | In this case, she has included a font
that is not typically considered web safe,
| | 03:51 | but these are open type fonts and she
is distributing them with the template.
| | 03:55 | So, this is where the
fonts were stored for that.
| | 03:58 | There is an html folder.
| | 03:59 | This contains, or may contain,
some overrides for the web site;
| | 04:03 | we will get into that a little bit later on.
| | 04:05 | The javascript folder contains certain
kinds of javascript to run on the web site.
| | 04:11 | The language folder contains some
language files which are useful for
| | 04:16 | translating the template
into different languages.
| | 04:19 | By default, these just come with English,
but if we spoke a different language,
| | 04:23 | we can translate the template and
create those language files for that.
| | 04:26 | You will also see some pages
here for component and error.
| | 04:32 | These have to do with the
error pages, the 404 page,
| | 04:37 | that comes up for the web site when a
page is not found, and the component page
| | 04:42 | is used in other areas of the Joomla web site.
| | 04:45 | So these are just overrides of things that
frequently just come out of the system folder.
| | 04:50 | You will also see a favicon.
| | 04:51 | I will show you how to create
those in a later video as well.
| | 04:56 | So, this is a relatively complicated
template that contains a lot of stuff.
| | 05:02 | Our template will be much simpler, have
a much simpler file structure, and will
| | 05:07 | contain many fewer files than this.
| | 05:09 | But the beez2 template is a great one
to take a look at to understand how far
| | 05:14 | you can push a Joomla
template and what's possible.
| | Collapse this transcript |
| Understanding the index.php file| 00:00 | The index.php file contains much of the
HTML that controls your site, along with
| | 00:06 | some specific Joomla code that specifies
where articles and modules will appear.
| | 00:11 | I'm currently looking at index.php, the
file from the beez2.0 template, which is
| | 00:18 | located in your exercise
files for this particular chapter.
| | 00:22 | I am using Dreamweaver CS5
for looking at this file. Why?
| | 00:27 | Because I've been using Dreamweaver for
ten years and I think it's a great program.
| | 00:31 | If you don't like Dreamweaver, you can
certainly look at code in any one of a
| | 00:36 | number of a zillion different other
packages, like Composer, or even just your
| | 00:42 | Notepad or text editor.
| | 00:44 | You can take a look at this code.
| | 00:47 | One of the things that seem to be most
scary to many designers who are trying to
| | 00:50 | come to a content management
system is the way this code works.
| | 00:54 | So, what I would like to try to show in
this video is how much of this code is
| | 00:58 | just easily copied and pasted.
| | 01:01 | At the beginning of the file, any time
you see something that looks like this,
| | 01:05 | <?php, we are talking about
some PHP code for the web site.
| | 01:11 | Anything with a slash and
star in front of it is a comment.
| | 01:14 | So, here we have some information
about the license that drives this
| | 01:18 | particular template.
| | 01:20 | The very beginning of the Joomla file
after that legal stuff is this line here,
| | 01:25 | defined'_JEXEC' or die.
| | 01:29 | What that means is test
for a variable called _JEXEC.
| | 01:33 | Basically, this variable says, is this
particular thing that I'm trying to run
| | 01:39 | something that has to do with Joomla?
| | 01:41 | If it's Joomla, then the rest of the
web page will run, and if it's not Joomla
| | 01:46 | it will stop executing right there.
| | 01:50 | The rest of the information up here at
the top of this web page is some specific
| | 01:54 | PHP coding that pertains just to this template.
| | 01:58 | You don't see this stuff on
the top of every single template.
| | 02:01 | So we're taking a look for the
presence or absence of modules in certain
| | 02:06 | positions, and we are also getting
some information from our template style
| | 02:11 | parameters--that's down
here in lines 24 through 29.
| | 02:14 | We are pulling in some information
that we had in our Joomla style, assigning
| | 02:19 | variables to this so that we can put
that information into our template later.
| | 02:24 | I'm going to cover how
that works later in our video.
| | 02:29 | Scrolling down, finally a line that
might look familiar to some designers.
| | 02:32 | On line 32 is our doc type declaration,
and this is just our simple DOCTYPE that
| | 02:39 | says we are running XHTML 1.0 Transitional.
| | 02:43 | Underneath, we have our
HTML tag substituted in places.
| | 02:48 | We have information about what
language this particular web page is run in.
| | 02:53 | And any time you see this php echo
thing, it's pulling in some variables and
| | 02:59 | writing the value of those variables
into those spots here on this template.
| | 03:03 | On line 34, we have our head tag, which
is probably familiar to most designers,
| | 03:08 | and then on line 35, we have this
interesting jdoc:include type="head".
| | 03:13 | This is a Joomla-specific code that
calls in, for the head of the document, all
| | 03:19 | of the variables associated with that.
| | 03:21 | So, it calls in all of the metadata
like meta keywords and meta description.
| | 03:25 | It calls in the HTML browser
title for the web page and other
| | 03:30 | various information.
| | 03:32 | We then have a series of calls to style sheets.
| | 03:36 | This php echo, this base URL, means
take the URL for the web site and stick it
| | 03:40 | in front of the rest of this path.
| | 03:43 | So, that's where our style
sheets are located on the web site.
| | 03:48 | We then have some additional PHP
dealing with style sheet processing, some
| | 03:53 | conditional code in terms of which style
sheets should be loading which kinds of stuff.
| | 03:58 | We have a bunch of JavaScript stuff
that's going on here, and then finally, all
| | 04:03 | the way at line 104, we have a /head tag.
| | 04:07 | So, the vast majority of what I just
went through on this first 104 lines we are
| | 04:12 | not going to see in this particular video.
| | 04:14 | I am not going to cover putting in
JavaScripts or language information, but I
| | 04:19 | will cover the essentials of how to
construct that particular template.
| | 04:24 | So, we have body tag on line 106,
and then we have a bunch of divs, we are
| | 04:30 | calling in our logo for the web
site, and other pieces of information.
| | 04:36 | Finally, down here on line 133, we have
another one of these jdoc:includes, and
| | 04:43 | a jdoc:include this time is calling
from modules with a name of position-1.
| | 04:48 | This line of code establishes a
module position within our template, so it
| | 04:52 | says that we are going to create a position
for modules here, and its name is position-1.
| | 04:58 | So, position-1 is what will show up in
the module manager, and we can assign
| | 05:02 | modules to that position.
| | 05:04 | You will see that a few more times.
| | 05:05 | Here it is again at line 137.
| | 05:09 | We have another call to position-0.
| | 05:13 | Scrolling down a little bit further to
line 175, you will see a line that says
| | 05:19 | jdoc:include type="message".
| | 05:22 | This is any kind of error message or
confirmation that you see on your web site.
| | 05:26 | For example, after you fill out your
contact form and you click the Submit
| | 05:31 | button, at the top of the contact form
you'll see a little message that says,
| | 05:35 | "Thank you for sending your message."
| | 05:37 | Well, that's because that's where
the jdoc occurs in the template.
| | 05:42 | Generally speaking, that message will
occur at the top of the area where the
| | 05:47 | component for the page will display.
| | 05:49 | And in fact, that component
is set to display on line 179.
| | 05:55 | That's just jdoc:include type="component",
and so that means whatever component
| | 06:01 | is set to display for the
page will display in that spot.
| | 06:04 | Whether it's an article, whether it's
a blog, whether it's a list layout of
| | 06:08 | some kind or another, or whether it's a
different component altogether, like a
| | 06:12 | contact form or a page of web links, they
will pull that into display in that spot there.
| | 06:17 | Those are the fundamental
building blocks of a Joomla template:
| | 06:23 | lots and lots of HTML and a few little pieces
of PHP that you can copy in in various places.
| | 06:31 | All the rest of the stuff that you see
in this file looks scary, and in many
| | 06:36 | cases it's simply added JavaScript
information, added additional PHP
| | 06:41 | processing information--none of
which is critical to a basic template and
| | 06:46 | making it function.
| | 06:47 | I am going to cover all of the stuff
that I went through here in later videos in
| | 06:51 | much more detail, but I wanted to
give you an overview of how to understand
| | 06:56 | index.php, so that you have some
background when we jump into it.
| | Collapse this transcript |
| Understanding the XML file| 00:00 | XML!? Are you scared?
| | 00:03 | You don't know XML?
| | 00:05 | Fortunately, you don't have to.
| | 00:06 | We will always start with an
existing XML file and we'll modify it for
| | 00:10 | our Joomla web site.
| | 00:12 | The XML file is an installation file
which specifies where all of the files
| | 00:18 | that make up the template are supposed to go.
| | 00:20 | So, let's take a look at this XML file.
| | 00:22 | This is the templateDetails.xml file
that comes from the beez folder, and let's
| | 00:28 | just go through it and take
a look what's in here.
| | 00:31 | So, the first three lines of the XML
file basically say that this is a Joomla
| | 00:36 | 1.6 template that we are about to
install for a template for the front end of
| | 00:41 | Joomla. That's pretty much it, all
that stuff we just copy and pasted.
| | 00:48 | Line 4 becomes the name of
the template itself, beez_20.
| | 00:53 | That needs to be a unique name.
| | 00:55 | It needs to have no spaces, no funny
characters, and it will become the folder
| | 01:00 | name in the back-end of Joomla, and it
will be the name that will show up in the
| | 01:04 | template manager itself.
| | 01:06 | That's where that's going to go.
| | 01:08 | The creation dates on line 5, Angie
Radtke who created the beez templates is
| | 01:14 | based in Germany, and so she has used
the European format for dates here.
| | 01:19 | You can keep the European format, or
you can revise that into the US format.
| | 01:24 | You can pretty much use any
date format you want there.
| | 01:27 | Then we have the author name,
| | 01:29 | Angie Radtke, her email
address, and the URL for her company,
| | 01:32 | and a copyright statement--so this
particular template is copyright of Open Source
| | 01:37 | Matters, the nonprofit arm of Joomla
that takes care of the finance and legal
| | 01:41 | aspects of the Joomla project.
| | 01:44 | We have a license on line 10, the
version of the template on line 11, and then on
| | 01:50 | line 12, we have a description.
And you will see that it looks kind of odd,
| | 01:56 | TPL_BEEZ2_XML_DESCRIPTION.
| | 02:01 | Because beez is a core template and
it's going to ship all over the world in
| | 02:07 | dozens and dozens of languages,
| | 02:09 | what Angie has done here is she's used
an external language file, so that when
| | 02:15 | people install this template in
languages that are not English, the
| | 02:19 | translation for the description and
other aspects of this template will occur,
| | 02:23 | which is one of the wonderful
things about Joomla 1.6 and how easily it
| | 02:28 | supports alternative languages.
| | 02:30 | She's calling that language information
down here in line 51 of the XML file, so
| | 02:37 | she has created some additional
language files here, and those will contain
| | 02:42 | various aspects of the template.
| | 02:44 | You'll see down here a little further in
the template, she's calling some of that
| | 02:47 | information as well.
| | 02:50 | If you are writing your template and
it's only going to be used in one language
| | 02:54 | for your web site, you certainly could
write in the description in your native
| | 02:58 | language right there in between
those description tags if you wish.
| | 03:02 | Of course, if you do that, you're
essentially hard-coding language and you would
| | 03:06 | not have an easy way of swapping
it out for an alternative language.
| | 03:09 | But it all depends on your target
audience, who is looking at your web site,
| | 03:14 | and what's required.
| | 03:15 | So, under Files, this a list of all
the files and folders that make up your
| | 03:21 | Joomla 1.6 web site.
| | 03:24 | In the second video in this chapter,
we took a look at all of the folders and
| | 03:29 | files that made up our Joomla template,
and now we see them once again spelled
| | 03:34 | out right here in the XML file.
| | 03:37 | Some changes from Joomla 1.5,
| | 03:39 | it used to be we had to list each of
the style sheets individually here, and each
| | 03:44 | individual image for the web
site as well in the XML file.
| | 03:48 | Now we can simply call a folder and say
include the entire folder and all of the
| | 03:53 | stuff in it, images, and javascript,
fonts, language, html, and css.
| | 03:58 | That's a wonderful thing and a real timesaver.
| | 04:01 | The file names are the files that are
located in the root of this particular
| | 04:05 | template folder. index.html is just the
security feature. If somebody happens to
| | 04:12 | look at that template folder directly
and the server is configured in such a way
| | 04:15 | that it looks for an index.html file,
| | 04:18 | it will show a blank page, as opposed
to listing the contents of the directory.
| | 04:22 | That's why these index.html files exist.
| | 04:26 | We went through index.php in great detail.
| | 04:29 | We have the XML file, which we are
looking at now, the two types of thumbnails
| | 04:34 | and previews that go with the template,
a favicon, and then the two additional
| | 04:39 | PHP files for error pages
and some component issues.
| | 04:43 | Down a little further from lines 31
to 47, we have a series of positions.
| | 04:50 | These are the module positions that are
occurring in this particular template,
| | 04:54 | which is a position-0 through position-14.
| | 04:58 | This is Angie's approach
to this template this time.
| | 05:01 | Many people have said that a module
position should not be tied to a specific
| | 05:06 | area of a web page, so calling a
module's position left is a bad thing, because
| | 05:12 | what would happen if you decided to
take the left position and move it to the
| | 05:16 | right side of the page?
| | 05:17 | Now you have a position called left that
displays on the right. Very, very confusing.
| | 05:22 | So, she has taken the approach of
just numbering her positions here in her
| | 05:26 | template, so that they are very
flexible and can be moved around the page.
| | 05:30 | I take an alternative approach to this.
| | 05:32 | I think that labeling your module
positions left and right, top and bottom,
| | 05:36 | footer and all those other things are great.
| | 05:39 | And the reason why is because
ultimately some client is going to take over the
| | 05:45 | management of this web site, and that
client is going to be assigning modules
| | 05:50 | to pages and so forth, and they are
going to have to know what position to
| | 05:54 | assign those modules.
| | 05:55 | And it's much more intuitive for the
client to say, I want this module to
| | 05:59 | show up on the left side of the page, than it
is to say, I want it to show up in position 7.
| | 06:05 | How are they are going to remember that?
| | 06:07 | So, while position numbers make it easy
for a programmer to move things around
| | 06:13 | on the web site, I don't think it
provides a very good user experience for
| | 06:16 | your client in the end.
| | 06:18 | But this is a debate that rages
within the web design community, and you
| | 06:22 | of course, you can do whatever you want
when it comes to your module position names.
| | 06:26 | We'll of course be going through
that in more detail later in the video.
| | 06:30 | As I mentioned earlier, here's the languages
portion of the XML file. This is optional;
| | 06:37 | you certainly don't have to include
any language files if you don't wish.
| | 06:41 | If you don't have language files,
you won't list them in the XML file.
| | 06:44 | After that, we have some new
features that go with template styles.
| | 06:48 | That's where all the stuff
here is from line 56 going down.
| | 06:52 | If you remember taking a
look at template styles in the back-end of
| | 06:58 | Joomla, the right side of the screen had
some configuration areas where we can
| | 07:00 | specify a width and a height. For some
aspects of the page we could specify a
| | 07:04 | logo image. We could specify a tagline.
| | 07:09 | All of that stuff is coded within the
template, and all that information is right here.
| | 07:15 | Once again, Angie has used her language
files to code exactly what text is going
| | 07:21 | to appear for the label in the
description associated with each of these fields.
| | 07:26 | I am going to go through this in great
detail in Chapter 7 to show you how
| | 07:29 | to set up your own options
for your template styles.
| | 07:34 | Once you get past all of that,
we closed a whole bunch of tags.
| | 07:37 | With XML, it's critically important
that for every tag you open you close it.
| | 07:42 | If you don't manage to close all your
tags, some ugly errors will result, and I
| | 07:47 | am going to cover that a little
bit later, more towards Chapter 3.
| | 07:50 | So, now you get a sense of how
the XML file is put together.
| | 07:54 | This XML file has got a
lot of extra stuff in it.
| | 07:57 | We will remove a lot of that for making
a simpler template that we're going to
| | 08:01 | build as part of this course.
| | 08:04 | I hope that this little overview has
been helpful for you to give you a sense
| | 08:07 | of where we are going.
| | Collapse this transcript |
|
|
2. Converting the HTML Comp to Joomla! TemplatesGetting the HTML comp ready for conversion| 00:00 | Now that you have a sense of what
Joomla expects, let's get our HTML page ready
| | 00:05 | to convert to Joomla.
| | 00:06 | At the beginning of our site redesign,
our designer did a series of comps--ways
| | 00:11 | this site might look.
| | 00:12 | Using Photoshop, she showed these
examples to the client, and with a few tricks
| | 00:16 | along the way, we wound up with a great look.
| | 00:20 | Our designer used Photoshop,
but she could have used GIMP, an open
| | 00:23 | source alternative.
| | 00:25 | I then took some time to convert that
Photoshop comp to HTML and individual images.
| | 00:31 | This process is outlined using GIMP and
Composer, a Dreamweaver alternative in
| | 00:37 | creating web graphics using open source
tools, another video available here in
| | 00:42 | the lynda.com Online Training Library.
| | 00:46 | The result is the page you
see here displayed in Firefox.
| | 00:49 | It's not exactly like the
comp, but it's pretty close.
| | 00:53 | A few things that you should do to
your comp to make the end result just
| | 00:57 | a little bit easier.
| | 00:59 | First of all, Joomla outputs
its menu as bulleted lists.
| | 01:03 | That's why I've displayed my menu across
the top as a bulleted list just like this.
| | 01:09 | I could spend a lot of time styling that
menu and making it look exactly like the comp.
| | 01:15 | However, once I put this site back into
Joomla, all of the HTML surrounding that
| | 01:21 | bulleted list is going to be
completely different in Joomla and I'm going to
| | 01:24 | lose all my formatting anyway.
| | 01:26 | So rather than take lots of time to
format that stuff here in Dreamweaver, I am
| | 01:31 | just going to leave it as a bulleted
list, and I'm going to do my formatting
| | 01:34 | after I get this comp into Joomla.
| | 01:37 | Second of all, keep in mind that the
actual content for the page doesn't matter
| | 01:42 | because this is going to come from the database.
| | 01:45 | So I have showed, for example,
where breadcrumbs are going to occur.
| | 01:49 | I've showed that I have a left column
and a right column, but there is certainly
| | 01:53 | not the content that we
expect to see on this web site.
| | 01:57 | Over on the left side--at least on the
homepage--there were some latest news.
| | 02:00 | There was a random image.
| | 02:02 | On the right side, we had some testimonials.
And I have neither of those things here.
| | 02:07 | I also don't have the main content,
that initial paragraph that I just showed
| | 02:11 | with the photo gallery under it,
and that's all okay, because one of the steps
| | 02:16 | along the way is to erase all of the
content that's here in this HTML mockup and
| | 02:22 | replace it with some code that's going
to call those modules and components from
| | 02:26 | the Joomla database.
| | 02:29 | You also should think about what will
become a module, what will be hard-coded
| | 02:34 | in the template, and where the
component is located on this site.
| | 02:38 | So, for example, I am going to hard-code
my logo right directly into the template.
| | 02:45 | The reason why is because the logo is going
to be the same on every page of the web site.
| | 02:50 | I don't want my client jumping in
there and swapping this logo out for some
| | 02:54 | other logo on other pages of the web site,
| | 02:56 | so I am going to code it
directly into the template.
| | 02:59 | It'll be one of the constant design
elements across every page of this web site.
| | 03:05 | I definitely have a few module positions here.
| | 03:08 | My menu at the top is a module, the
breadcrumb is a module; my content located
| | 03:14 | on the left and the right sides of the
page are modules; and down here in the
| | 03:20 | footer I've also got a module position--
| | 03:22 | we've got that link for the
privacy policy down here at the bottom.
| | 03:26 | Think about also where the
component is going to go.
| | 03:29 | That's not terribly difficult.
| | 03:30 | The component is going to go right here in the
middle of the page where it says Main Content.
| | 03:34 | Joomla 1.6 is compatible with XHTML 1.0--
either Transitional or Stretch--as well
| | 03:42 | as HTML 5, which is just terrific.
| | 03:47 | So you can write with all of
the latest standards for HTML.
| | 03:51 | You should also keep this in
mind when constructing your page.
| | 03:55 | I am going to be using XHTML 1.0
Transitional because I've used that
| | 04:00 | specification for many, many years and
it's a very cross-browser compatible,
| | 04:05 | which HTML 5 is not terribly
well supported as if this recording.
| | 04:10 | So that's why I am going to be working
with XHTML 1.0, but if you want to work
| | 04:15 | with HTML 5 or HTML 4 even, you
are certainly welcome to do so.
| | Collapse this transcript |
| Creating template thumbnails and previews| 00:00 | Joomla uses two different kinds of
previews for their templates in Joomla 1.6.
| | 00:06 | This is different than the way
previews were handled in Joomla 1.5.
| | 00:10 | So I wanted to show you where the
images are used here on the back-end of Joomla
| | 00:14 | first, and then we will go ahead and
create the two kinds of thumbnails that we
| | 00:18 | are going to have to create
for our template installation.
| | 00:22 | If I go to Extensions > Template
Manager, these are our templates styles, and
| | 00:28 | none of our template styles have any
kind of preview--at least from this view.
| | 00:33 | In 1.5 when you rolled your mouse over
these things, a little preview would pop up.
| | 00:37 | Not present anymore in 1.6.
| | 00:40 | If I go over the template master
page here, we have a number of templates
| | 00:46 | that are available. And first of all, you
will see that we have these largish thumbnails.
| | 00:53 | These are 206 X 150 pixels for
the most part, and that becomes our
| | 00:58 | template_thumbnail.png.
| | 01:01 | If I click on this image, I get a much
larger preview of what that page looks
| | 01:07 | like, and this particular one is 640 X 384.
| | 01:11 | These are called template_preview.pngs.
| | 01:15 | So we have these two types of images
that we need to create for our template.
| | 01:21 | You might also notice here that we
have a Preview link, and when I click the
| | 01:26 | Preview link, the web site opens up in
a new tab with tp=1 turned on in all the
| | 01:34 | position outlined here on the page.
| | 01:36 | All right, so now to know what the images
are for, let's go ahead and create a few.
| | 01:43 | I have got Photoshop opened here.
| | 01:46 | I am using Photoshop because
that's what installed on this computer.
| | 01:49 | You could certainly use Fireworks.
| | 01:51 | You could use GIMP.
| | 01:52 | You could use the software that came
with your digital camera for that matter.
| | 01:56 | And I have opened up the big-screenshot.png,
and now I cheated just a little bit
| | 02:03 | in creating this particular screenshot.
| | 02:06 | I created big-screenshot.png after I had
finished filming this entire title, and
| | 02:14 | then I went back into the
screenshot of the final web page, and now I am
| | 02:18 | turning it into a thumbnail to
be included with this template.
| | 02:22 | That's so when we see the preview they
actually match up and look good together.
| | 02:27 | At this point in time in the template
development process, it is unlikely you
| | 02:30 | have anything that looks this pretty.
| | 02:32 | You either have your web page that had
the bullets at the top and the navigation
| | 02:38 | was styled in the wrong way,
or you have your Photoshop comp.
| | 02:42 | You could use your Photoshop comp to
resize that for your image. Or you could
| | 02:47 | use something as a temporary holding
spot for now and when you are done creating
| | 02:52 | your web site you could then take
screenshots and ftp these images up to your
| | 02:57 | Joomla web site so that they
will display in the right way.
| | 03:02 | So it is a chicken or the egg problem.
| | 03:04 | You know how can you--you have to
have these files in order to have them in
| | 03:08 | place to make your template, but they
are not going to look pretty enough until
| | 03:11 | you are done formatting your template
which we are going to do in Joomla.
| | 03:13 | We'll, you'll have to think about how to work around that.
| | 03:16 | So I needed to create two images from this.
| | 03:18 | The first one is going to be my
640 x 384 template_preview.png.
| | 03:25 | So here in Photoshop I am just going to
go to Image > Image Size and I am going
| | 03:30 | to resize this to at least 640 across.
| | 03:33 | It is going to give me 480 high,
but at least I am closer. And now if I take
| | 03:40 | my Crop tool and I say make it 640 pixels x 384
pixels, and then I click and drag my Crop tool,
| | 03:51 | that will crop it off at exactly
the right spot to make it 640 X 384.
| | 03:56 | Perfect. And now I can go ahead
and save this out for the web.
| | 04:00 | In Photoshop the way you do that is you
Save for Web. In the screen that comes
| | 04:06 | up here over on the side, I am going to
switch from GIF to PNG-8. There we go.
| | 04:11 | That looks pretty good.
| | 04:13 | So I am going to go ahead and hit Enter
to save this, and I am going to create a
| | 04:18 | folder here on my desktop which I am going to
add to over the course of the next few videos;
| | 04:23 | this is where I am going to put all the
files that will eventually become my template,
| | 04:27 | right here from my desktop.
| | 04:28 | So I am going to call this 'template'
and inside of 'template' I am going to put
| | 04:34 | this first image in, and I am going to
call this template_preview.png, and I am
| | 04:43 | going to go ahead and say Save.
| | 04:45 | The next one, I just need to take
this and resize it one more time.
| | 04:49 | So Image Size > 206;
now it is a little bit too short.
| | 04:56 | What I can do instead is
say Edit > Step Backward.
| | 04:59 | That will give me a little
bit more height to my image.
| | 05:02 | It is back to 640 x 480. Then I will say
Image Size and I will switch that to 206 x 155.
| | 05:09 | So that is probably close enough.
| | 05:13 | We will go ahead and say OK.
| | 05:14 | So you see that we have our smaller
thumbnail here, and now I am going to go say
| | 05:19 | File > Save for Web, and once again I
am not going to be able to reach my Save
| | 05:25 | button down there at the bottom, so I
will just hit Enter. And I am in my template
| | 05:30 | folder that I just created on my
desktop, and I am going to call this
| | 05:33 | template_thumbnail.png. Save.
| | 05:41 | So now I have my two preview pictures,
and I am ready to move on to converting my
| | 05:47 | index.html file into index.php.
| | Collapse this transcript |
| Converting from index.html to index.php | 00:00 | So for this next video I need to convert
my index.html file, the static web site
| | 00:07 | that I have built, and change it into
index.php and start putting in some of the
| | 00:12 | Joomla codes that will
make that transition happen.
| | 00:17 | In my last video, I created template_
thumbnail.png and template_preview.png,
| | 00:25 | two images that Joomla is going to use
to give us a little peek in what this
| | 00:29 | template is going to look like on the
back-end. And I created those in a folder
| | 00:33 | here on my desktop, called 'template'.
| | 00:36 | Now what I need to do is add to this
my default CSS folder, the images.
| | 00:42 | and index.html--
| | 00:43 | all of which I created in advance, and
they are in my exercise files folder.
| | 00:48 | So if I go ahead and open that and I
go to Chapter 2 and number 3, I am going
| | 00:54 | to hold down my Shift key and select
all three of those and then say Ctrl+C to
| | 01:02 | copy them, click on the right side of the
screen here, and Ctrl+V to paste them in place.
| | 01:07 | So now I have my CSS folder, my images
folder, and my index.html all located here
| | 01:14 | within my template folder.
| | 01:17 | In my exercise files, I am also going to
open up this document here called joomla codes.
| | 01:21 | We are going to need that in just a moment.
| | 01:24 | So I am going to minimize that and
get rid of these folders, and now I am
| | 01:29 | going to go into Dreamweaver and I am
going to go ahead and say File > Open.
| | 01:35 | From my desktop, I am going to open up my
template folder, and I am going to open index.html.
| | 01:40 | So here is the page that I already
created here in Dreamweaver, and this is just
| | 01:46 | a normal static web page.
| | 01:48 | I am going to flip over Code view,
and here is the code that makes up my
| | 01:53 | Dreamweaver web site.
| | 01:54 | From here, I am going to work in
Code view because I am going to need to
| | 01:58 | substitute out some of the HTML that I
have in place and replace it with some
| | 02:02 | codes that we are going to copy and
paste in from Joomla. So my first step in
| | 02:07 | this process is to do File > Save As, and
I am going to call this index.php, and I
| | 02:16 | will hit the Save button.
| | 02:18 | So the way Dreamweaver does this is
it goes ahead and opens this a new tab.
| | 02:21 | I still have my index.html next
to me, and this is Dreamweaver CS5.
| | 02:26 | I am going to open up my joomla codes,
and you will see that I have given you all
| | 02:32 | of the code that needs to appear
at the top of my Joomla web page--
| | 02:37 | everything from the very beginning to /head.
| | 02:41 | So if you look at our Dreamweaver code
here, we have all of our code here and
| | 02:46 | down on line 7 we have </head >. So
all I need to do is copy this stuff,
| | 02:52 | Edit > Copy, and then come over here
to Dreamweaver, highlight what's here,
| | 02:57 | and say Edit > Paste.
| | 03:01 | So right away it has gone ahead and
pasted in a bunch of stuff that's required
| | 03:06 | for this particular page
to become a Joomla template.
| | 03:09 | We will take a look at some of the
code here and see how this fits together.
| | 03:13 | You will see that we have our DOCTYPE
declaration here on line 6, as well as
| | 03:18 | some PHP before we get started, and we are
going to write in the language for the web site.
| | 03:25 | These are put in with just variables,
and this is going to write in the language
| | 03:29 | of English because that's the
way we have installed our web site.
| | 03:32 | Note on line 9 we have that <jdoc:
| | 03:35 | include type="head"/>, but this is
like a big variable that's going to pull
| | 03:39 | in all of the meta keywords and the
meta descriptions and the browser HTML page
| | 03:44 | titles and all the rest of the stuff that's
missing here from the head of the document.
| | 03:50 | So you can just leave that alone, and
that magic will happen as soon as we get
| | 03:53 | this into Joomla. Then on lines 10, 11,
and 12, you will see that we have links to
| | 03:58 | three different style sheets.
| | 04:01 | The first two you don't need to change at all.
| | 04:03 | The first two refer to our system
template, and there is one called
| | 04:08 | system.css and general.css.
| | 04:11 | These are style sheets that are
already present on Joomla, and basically, these
| | 04:17 | style sheets have to do with styling
things like tooltips, styling anything used
| | 04:22 | in frontend editing,
| | 04:24 | that kind of thing.
| | 04:25 | You can generally just include them.
If you put your style sheet after those two,
| | 04:31 | your style sheet and any of the styles
in it will take priority over any of the
| | 04:35 | styles that appear in the
system or general style sheets.
| | 04:39 | That line 12, we need to take a
look at it a little bit more closely.
| | 04:42 | Of course, this is calling style sheet.
href, note that it says first of all <?php
| | 04:48 | echo $this->baseurl?> So what this
is going to write in is the first part of
| | 04:54 | the URL for your web site,
| | 04:55 | so http://www.lynda.com, for example.
| | 05:03 | In our case, it will probably write in
http://localhost, or localhost:8888 if you are in a Mac.
| | 05:12 | This is followed by the templates
directory, which is where our templates will
| | 05:16 | live, and then we have another little
eco statement here, <?php echo $this
| | 05:21 | template ?>. This is going to
call the name of our template.
| | 05:24 | Remember, from the XML file that was set
up on line 4, so it is going to call in
| | 05:29 | that name of the folder where this
template is living and write it there.
| | 05:33 | Then it is going to look for the CSS
folder, and then it is going to look for a
| | 05:37 | file called default.css.
| | 05:40 | So, that's the way that line of code works.
| | 05:42 | In order for us to make sure that line
of code works, we need to make sure we
| | 05:46 | have a style sheet called default.css
that is living within the CSS folder.
| | 05:52 | So, let's double-check that.
| | 05:54 | I am going to minimize Dreamweaver and
open up my template folder and open up my
| | 05:59 | css folder, and you will see that we do
in fact have a file called default.css, so
| | 06:05 | we are in great shape.
| | 06:08 | You can in fact reuse this code for
all of your future Joomla templates, not
| | 06:12 | just this one following along with this course
| | 06:15 | if you leave this code intact and
always call your first style sheet
| | 06:19 | default.css. If you happen to have
extra style sheets for your web site, you
| | 06:26 | could simply copy line 12 here by
highlighting it and copying and paste it right
| | 06:31 | here and ahead of the document, and then
all you'd need to do is modify the name of
| | 06:36 | the style sheet here.
| | 06:37 | Everything else should be exactly
the same, so you can have as many style
| | 06:40 | sheets as you want.
| | 06:41 | But to keep things simple,
I am going to have just one.
| | 06:44 | Now that we have the head of the
document organized, we will take a look at
| | 06:49 | where modules and
components go in our next video.
| | Collapse this transcript |
| Using the Module and Component insertion code| 00:00 | Now that we have our head code in
place for our index.php document, I am
| | 00:06 | going to go ahead and start pasting
in some codes for the modules and the
| | 00:10 | components for this page.
| | 00:12 | First of all, I have to figure out where
those modules and components are going to go.
| | 00:17 | Right here at the top of my
web page, I have a body tag;
| | 00:21 | I have a container that has a header
in it which has my logo, which is great,
| | 00:26 | and it is clickable so that I can go
back to the homepage; and then underneath
| | 00:30 | of that I have a bulleted list and
that will ultimately become the main
| | 00:35 | navigation for my web site.
| | 00:36 | That is going to be a module position.
| | 00:39 | So what I need to do is go ahead and
erase all of that code and take a look at
| | 00:46 | the joomla codes document, and you will
see that I have a line of module code
| | 00:51 | here for you to take.
| | 00:52 | So Edit > Copy. And then you can go ahead
and paste that into your document, Edit > Paste.
| | 01:00 | So that line of code,
| | 01:01 | let's take a look at that in a just
a little bit more detail so we know
| | 01:04 | exactly what it means. That's that jdoc:include,
| | 01:08 | just like we saw in the head of the document.
| | 01:10 | So in other words, Joomla, go and get
me some information and stick it here.
| | 01:14 | The type of information we want are
modules. The name of this module position
| | 01:20 | from the code that we
have copied is called 'left'.
| | 01:23 | It probably makes more sense to call
this something else because ultimately this
| | 01:27 | is not going to be the left side of the page.
| | 01:29 | This is more like the top of the page.
| | 01:31 | So I am going to go ahead and
name my module position 'top'.
| | 01:35 | As I had talked about in a
previous video, I like to name my modules
| | 01:39 | meaningful names so that my clients know what
the positions correspond to later down the road.
| | 01:44 | If you prefer to name your positions
position1, position2, position3, you are
| | 01:49 | certainly welcome to do that.
| | 01:50 | But I think it is more self-
documenting to name in this way.
| | 01:53 | The last part of this tag is this
style, and we have set the style to XHTML.
| | 02:02 | XHTML means that we are going to have
a single div wrapped around the module
| | 02:07 | when we actually put this up on our
Joomla web site. We don't need to write
| | 02:11 | the div around jdoc: include.
| | 02:14 | That div will show up automatically
as part of bringing these modules in.
| | 02:19 | If there are multiple modules in one
position here on the template, each module
| | 02:24 | will have a div around it.
| | 02:26 | There won't be one big div around the position.
| | 02:28 | There will just be a div
around each individual module.
| | 02:33 | Another value you could
use for XHTML is rounded,
| | 02:38 | something we are going to use later
in the video for one of our positions.
| | 02:43 | Rounded is four divs nested inside of
each other and it is done that way so that
| | 02:49 | you can make rounded corners
for your module if you wish.
| | 02:52 | Another value you could use here is none.
| | 02:54 | In other words, don't wrap any
divs around the module at all;
| | 03:00 | just go ahead and write in the
contents of the module on the page.
| | 03:04 | The downside to using none is if you
are displaying your module title, that
| | 03:09 | module title will not display on the web site.
| | 03:12 | No matter what you do, it will not display.
| | 03:14 | So if you need your module titles to
display, you need to use XHTML or round in.
| | 03:21 | The final option is outline, and outline
is something we have seen in action when
| | 03:27 | we think about tp=1, and you see the
little positions outlined on the web page in
| | 03:34 | red letters and screened back a little bit.
| | 03:36 | Very, very useful for debugging.
Obviously not really a tool that you would
| | 03:41 | use on a live web site.
| | 03:43 | So the style type that I really want
is XHTML, so I am going to switch back
| | 03:47 | to that. And that will serve for the content
for my menu right here on the top of the page.
| | 03:54 | Go ahead and take those spaces out.
| | 03:56 | Now, here is our next part.
| | 04:00 | We have our div with an ID of left.
| | 04:02 | I am going to go ahead and erase the
content in between my div and my /div and
| | 04:09 | go ahead and paste in my jdoc: =include here.
| | 04:13 | This is in fact the left side of the
page, so I am going to leave that line of
| | 04:16 | code exactly as it is.
| | 04:18 | The name is left and the style is XHTML.
| | 04:21 | Then we have the right side of the page.
| | 04:23 | I am going to go ahead and erase that
code, and once again, I am going to paste in
| | 04:29 | my module code here,
| | 04:31 | although I am going to call the
position right. And then down at the very bottom
| | 04:36 | of the page with the div ID of footer
I am going to go ahead and erase the
| | 04:40 | content for footer and I
am going to put in my jdoc:
| | 04:45 | include statement. This time my name
will be footer. Just make everything match.
| | 04:51 | The last thing we need to do is put in
our component on this web page, and that
| | 04:56 | is where the main content is going to display.
| | 04:58 | So, any articles, blogs, lists, web links,
| | 05:02 | all that stuff is going to
display right in the main content area.
| | 05:06 | So I am going to go ahead and open up
my joomla codes, and remember that we have
| | 05:11 | two things we need to put into that
spot: the component itself which displays
| | 05:15 | all of those lists and blog and articles,
| | 05:19 | also the message. I like to put that
at the top, and so if I am writing, for
| | 05:23 | example, a contact form that people
have filled out, the message will come up
| | 05:28 | and say that 'thank you for sending
in your message', type of messages.
| | 05:32 | So I am going to go ahead and
copy those two ones, Edit > Copy.
| | 05:37 | I am going to erase all the stuff
about main content, all the way down to the
| | 05:42 | /div and I am going to Edit > Paste in those
two lines for the message and the component.
| | 05:52 | Now I just realized that
I have forgot one module.
| | 05:55 | We have a line right here.
That's our breadcrumbs.
| | 05:58 | I am going to go ahead and erase that
and recopy my line here for the jdoc:
| | 06:04 | include for modules and put that at the
very top here, and in this case the name
| | 06:09 | will be breadcrumbs.
| | 06:14 | So now we have configured this
page. Look how much shorter it is.
| | 06:17 | It is only 41 lines of code long.
| | 06:19 | We have a brief introduction here at
the top which is--sets this up to
| | 06:23 | make this a Joomla template.
| | 06:25 | Down here we have mostly
HTML with a few of these jdoc:
| | 06:29 | include in place that call for our module
in certain positions in this template.
| | 06:34 | It also calls for a message in a component.
| | 06:36 | Those of you who have been working with
commercial templates might look at this
| | 06:41 | and say, "Well, Jen, you are just building
this template with only six positions.
| | 06:46 | How I am supposed to possibly work with that?"
| | 06:48 | Well, remember that when you are building
custom web sites you can put in exactly
| | 06:52 | the module positions you need.
| | 06:54 | Commercial templates may have 20 or 30
positions, and the reason why is people
| | 06:59 | need to do different things with those
different templates, and so they put in
| | 07:03 | lots of module positions to
make them as flexible as possible.
| | 07:06 | When you are building something custom,
you can put in exactly what you need and
| | 07:10 | it will work very, very well.
| | 07:13 | So now that we are done working with this
file, make sure you go ahead and save it.
| | 07:17 | In Dreamweaver, you know that the file
isn't saved because you will see a little
| | 07:20 | star up here right next to the file name.
| | 07:23 | So you can save it, File > Save, and
make sure you have saved all these changes.
| | 07:29 | Now if this is your first time working
in this kind of environment and you have
| | 07:32 | got all this funky php stuff in here and
you are only kind of vaguely know what it is doing,
| | 07:37 | you are probably feeling a little
bit nervous about how all of this fits
| | 07:40 | together, and whether you can fix stuff later.
| | 07:43 | And the answer is, absolutely, you
can go back and fix stuff later.
| | 07:48 | You can edit it here in Dreamweaver up
until we load it up onto our Joomla site.
| | 07:52 | Once it is on our Joomla site, there
is a utility for editing HTML and CSS
| | 07:58 | right within Joomla. I am going to go
through all of that in great detail in a
| | 08:01 | later video.
| | Collapse this transcript |
| Creating a new XML file| 00:00 | The next thing we need to do for our
Joomla site is set up our XML file, and
| | 00:06 | this is our installation file that's
going to set up all the directives, for
| | 00:10 | what all the files are and where they
are going to go once they get into Joomla.
| | 00:14 | If you are feeling a little nervous,
rest assured we never start writing our
| | 00:19 | XML file from scratch.
| | 00:22 | We are going to start with
something that's already written for us.
| | 00:25 | So I am going to go ahead here in
Dreamweaver, and you can follow along in
| | 00:29 | whatever editor you are using, whether
that's Dreamweaver or Composer or any one
| | 00:34 | of a number of different editors for HTML.
| | 00:37 | I am going to go into my
exercise files and I am going to open up
| | 00:41 | templateDetails.xml.
| | 00:46 | And the first thing I am going to do is
File > Save As, and then I am going to
| | 00:50 | save this into my template
folder right here on my desktop.
| | 00:55 | No, I do not want to update the links.
| | 01:00 | This is the templateDetails.xml that
comes with beez2 on your Joomla site, and we
| | 01:06 | are just going to make some
modifications to it to make it work for our
| | 01:10 | particular Joomla site that we are building.
| | 01:13 | The first three lines
don't need to change at all.
| | 01:15 | All that stuff can be left alone.
| | 01:17 | It just says that we are building
a Joomla 1.6 template to be installed on the
| | 01:21 | front end of the web site.
| | 01:23 | For our name we are going to need to
give this a unique name that's not shared
| | 01:27 | with any of the other templates on the web site.
| | 01:29 | We need to make sure it has no spaces in
that name, no funny characters. So I am
| | 01:35 | just going to call this ttoo,
for Two Tress Olive Oil.
| | 01:37 | It is going to ask us for a creation date.
| | 01:42 | As I mentioned before,
this is in European format.
| | 01:44 | You can enter whatever format you want.
| | 01:46 | I am going to say 1/28/11, just to
show you that you could do something
| | 01:56 | radically different. Here we go.
| | 01:58 | That's our creation date.
| | 02:00 | The author is Jen Kramer, and the author
email, and I am going to go ahead and put
| | 02:13 | in a URL for my web site in
case anyone wants to hire me.
| | 02:20 | The next line is our copyright.
| | 02:22 | We are going to go ahead and
copyright this, 2011 lynda.com.
| | 02:28 | By the way, you really do start lynda.com with a
lowercase l, not a capital L, I have been told.
| | 02:34 | You can go ahead and set up your
license for this. People can distribute this
| | 02:38 | template or not distribute
this template as they see fit.
| | 02:42 | Leave the version set up the way it
is set up, and then we can put in a
| | 02:45 | description for this template.
| | 02:47 | Right now, this is using, as I
mentioned before, a certain language file and
| | 02:52 | putting in the correct description for the
language that's being used on the web site.
| | 02:56 | I am going to use just English on my
web site, so I am going to leave out that
| | 03:00 | language feature. And in here I am going to
type in Main template for Two Trees Olive Oil.
| | 03:11 | Next, we need to take a look at what
files and folders we have on our web site.
| | 03:15 | So right now we have a css and an images folder.
| | 03:18 | We don't have HTML, so I
am just going to erase that.
| | 03:22 | We don't have JavaScript, fonts, or
languages, so I am going to erase those.
| | 03:27 | We do have an index.html and an
index.php and a templateDetails.xml and a
| | 03:32 | template preview and template thumbnail.
| | 03:34 | I am going to have a favicon, which I am
going to create in the next video, so I
| | 03:39 | am going to leave that file in place.
And I am going to write erase, for the
| | 03:44 | moment, these two files for component and error.
| | 03:47 | We may go back and add those later.
| | 03:48 | Then we need to list the
positions on our template.
| | 03:52 | So we have a position called top, one
called left, one called right, one called
| | 04:04 | breadcrumbs, and one called footer.
| | 04:08 | I believe that's all the positions
that I had in that particular template.
| | 04:16 | You might be wondering why I
haven't included main content here.
| | 04:19 | Remember, this is the list of module
positions; where the content goes is a component.
| | 04:25 | So that does not get listed
here in our listed positions.
| | 04:29 | By the way, if you need to add
positions after the fact, or if you added another
| | 04:35 | position to your template or you take
one away, you don't necessarily have to
| | 04:39 | come back into this XML file and edit it again.
| | 04:42 | You can just leave this alone.
| | 04:44 | So don't feel like you have to keep
popping in and out of here if you are not
| | 04:47 | sure exactly how many
modules you are going to have left.
| | 04:51 | Down here at the bottom, we have
got our languages information.
| | 04:54 | I am going to go ahead and erase all
that because we are just going to write
| | 04:57 | this one in English. And after that
we have this configuration stuff.
| | 05:02 | This has to do with some parameters
that were associated with the beez template.
| | 05:07 | And we don't have any of this--
not at this point in time.
| | 05:12 | So I am going to go ahead and erase
everything for <config> <field> <fieldset>
| | 05:17 | and make sure that I have got my
closing tags <fieldset> <field> and <config>.
| | 05:22 | So, I am going to erase that.
| | 05:24 | So our XML file is significantly
shorter than the one we started with.
| | 05:29 | The only information we have in here
is the information at the top of the
| | 05:33 | file describing the date, the name of the
file, the author, any distribution information.
| | 05:39 | We also have under it our files and
folders that are located here, and we have
| | 05:45 | our module positions that are listed here.
| | 05:48 | Now that we have got all of that in
place, go ahead and say File > Save, and we
| | 05:53 | are ready to move on to creating our favicon.
| | Collapse this transcript |
| Changing the favicon| 00:00 | We're going to include a
favicon on our web site.
| | 00:03 | A favicon is the tiny little picture
that shows up next to a URL on a particular
| | 00:09 | web page. And if I take a look at my Two
Trees Olive Oil web site, you'll see that
| | 00:14 | there is a Joomla icon that appears
right next to the web site address, and this
| | 00:20 | Joomla icon is there by default, unless
you provide a favicon of your own, and so
| | 00:26 | that's what I'm about to show you.
| | 00:27 | I'm taking a look at a web site called
favicon.cc, and I just think this is an
| | 00:33 | incredibly cool web site. It does a
lot of different things in terms of
| | 00:37 | creating favicons for you.
| | 00:39 | First of all, right here in the middle
of the screen there is the ability to
| | 00:44 | go on ahead and draw your own
favicon. And everybody knows that I'm not a
| | 00:50 | graphic designer, right?
| | 00:51 | You're about to see why. There we go.
| | 00:54 | I just created a favicon, and you can
go ahead and now convert that into an
| | 00:59 | actual real favicon by clicking this
button here for Download favicon, and you'll
| | 01:04 | see that the favicon shows
up in a preview right here.
| | 01:07 | The other way you could do this, of
course, is that you could import your own
| | 01:10 | image, and I have an image in the
exercise file that we can use for this, so I'm
| | 01:15 | going to click on Import Image.
| | 01:19 | You'll see that we've a favicon here.
| | 01:21 | This is a favicon.png file
that I've already created for you.
| | 01:25 | It's just that little olive
from the Two Trees Olive Oil logo.
| | 01:29 | I'm going to go ahead and say Open.
| | 01:31 | It's already set to 16 x 16 pixels.
That is the size of the favicon, and the way
| | 01:37 | that this particular utility works is
you could upload a very large image and
| | 01:42 | it'll reduce it to the
correct size as it shows here,
| | 01:45 | keeping the same dimensions. So if it
is a rectangular image, it'll keep it
| | 01:49 | rectangular when it moves it small.
Or it can resize things such that it shrinks
| | 01:54 | to a square icon, which looks like
this Mack truck is going to a dump truck.
| | 01:57 | Up to you which way you want to go.
| | 02:01 | I'm going to go ahead and say Upload,
and since my image is already 16 x 16,
| | 02:05 | all we're doing is changing the file
type from PNG to a favicon.ico is the
| | 02:13 | format that's used.
| | 02:15 | So I've gone ahead and imported that.
| | 02:17 | If I had any graphic design skills, I
could go through here and I could edit
| | 02:21 | this image to improve it or
make it look little different.
| | 02:26 | But looking at the preview here, I
think that's looks pretty darn good, so I'm
| | 02:29 | just going to go ahead and say
download the favicon. And it's going to ask me,
| | 02:35 | you know, I've gone ahead and chosen to
open this. I'm just going to Save it OK.
| | 02:40 | And this saves down
right to my Downloads folder.
| | 02:44 | So at this point what I'm going to do is
copy my favicon.ico directly to into my
| | 02:49 | Templates folder, which is located on my
desktop. And so now I have there a number
| | 02:56 | of different files that we've been
accumulating through the course of this
| | 03:00 | chapter. And that's very important
because we did call out a favicon in our XML
| | 03:04 | file, and so now we've actually got a
favicon to include when we get ready to
| | 03:10 | upload all of this to the Joomla web site.
| | Collapse this transcript |
| Creating the ZIP package install| 00:00 | Congratulations! If you've been watching so far,
we've got our style sheet folder, our images
| | 00:06 | folder, and we've got our index.php
which we converted from our index.html.
| | 00:12 | We made our favicon, we have our
template preview and our template thumbnail, and
| | 00:16 | we have our templateDetails.xml file.
| | 00:19 | We should be all set to go.
| | 00:22 | Just before we do this last step, make
sure that you double-checked all of your
| | 00:26 | files, that in your templateDetails file
you've gone through that list of files
| | 00:31 | and folders and that every
thing matches in terms of names.
| | 00:35 | They need to match in terms of
capitalization and punctuation.
| | 00:39 | Your css folder should be css all lowercase,
and all your style sheets should be located there.
| | 00:46 | Your images folder should be called
images, all lowercase, and all of your
| | 00:51 | images should be located there, and your
favicon should be called favicon.ico, all
| | 00:58 | lowercase. That kind of thing.
| | 01:00 | You want to just go through and make
sure that you've done all of this double-
| | 01:03 | checking, because if there are
differences in capitalization or if there is
| | 01:08 | differences in folder structure for
what you have called out in your XML file
| | 01:11 | versus what you really have, your
template is not going to install.
| | 01:15 | Once you have done that final double-
check, go ahead and select all of the items
| | 01:21 | here inside of your template
folder that's located on your desktop.
| | 01:24 | PC people, what you need to do is
once they're highlighted right-click on
| | 01:29 | this and you should pick Send to, a
compressed or zipped folder, and you'll wind
| | 01:37 | up this file here which you
can then call whatever you like.
| | 01:40 | I'm going to call it template.zip.
And that'll wind up being what we used to
| | 01:48 | install this template on our Joomla web site.
| | 01:51 | Mac people, highlight all of the files,
except for template.zip, and you're going
| | 01:59 | to Ctrl+Click on one of those files,
and from the menu that comes up, you
| | 02:04 | should choose Compress.
| | 02:06 | You'll see a message saying that it's
compressing eight items, and then very
| | 02:10 | shortly thereafter you'll see something
come up. It might be called archive.zip
| | 02:15 | and that's totally fine.
| | 02:17 | It really doesn't matter what
the zip file itself is called.
| | 02:20 | It's more important that everything
inside of it is called by the correct name.
| | 02:25 | Okay, can we have a drum roll,
because we're getting ready to put this into
| | 02:28 | Joomla in our next chapter?
| | Collapse this transcript |
|
|
3. Installing the Joomla! Template Package FileInstalling the package file| 00:00 | At last, the moment you've all been waiting for:
| | 00:03 | we have created all of our files, folders,
images, css, everything for our Joomla template.
| | 00:08 | We zipped it all up and we're finally
ready to install it on our web site.
| | 00:12 | So to do that, we're going to go to
Extensions > Extension Manager, and we're
| | 00:18 | going to use Upload Package File.
| | 00:20 | This is the same utility that you use when
you install components or modules or plug-ins.
| | 00:25 | We're going to use this to install templates.
| | 00:27 | So I'm going to click the Browse button.
| | 00:29 | Here is my template.zip that I just created.
| | 00:32 | We'll go ahead and say Open and
Upload & Install. And hopefully if all has
| | 00:37 | gone well, you shall see this message
here that says installing the template
| | 00:42 | was successful. Hurray!
| | 00:45 | If you don't see that message, be
sure to watch video number three in
| | 00:49 | chapter number three, and I'll show
you how to fix some of the typical
| | 00:53 | installation problems.
| | 00:54 | Some of you might be wondering at this
point why we can't just take the files
| | 00:59 | that we have and we could either FTP
them up to our Joomla web site and put them
| | 01:05 | into their own templates folder or
since we're working locally working on our
| | 01:10 | computers, why can we just take this
files and drag them into the appropriate
| | 01:13 | folder within our Joomla file structure?
| | 01:16 | The answer to that is the following:
| | 01:18 | That did work in Joomla 1.5 and you
were able to put your templates into
| | 01:23 | your web site that way.
| | 01:25 | In Joomla 1.6, you must install your
templates, just like you must install your
| | 01:31 | extensions. If you don't install,
Joomla is likely not to recognize that your
| | 01:37 | template is there, and you won't find it.
| | 01:39 | So be sure you go through this process,
| | 01:41 | you zip all the files together, and you
use the installation process--even when
| | 01:46 | you're running locally.
| | 01:48 | Now that we've got this done we're
ready to go to our Extensions > Template
| | 01:52 | Manager, and you'll see that we now
have in our web site that ttoo template
| | 02:00 | that has been installed.
| | 02:02 | So now we just need to set that as the
default for our web site. So I'm going to
| | 02:06 | go ahead and click on the star and
it's for beez2 with the alternate tagline
| | 02:11 | that we had set up in our
Joomla 1.6! Essential Training.
| | 02:16 | I'm going to unassign those pages,
because that would be quite jarring to go
| | 02:22 | from our custom template
back to the beez2 template.
| | 02:27 | So now you'll see that we have our
default template is all set, and when I go to
| | 02:33 | the front end into the web site and I
click Refresh, lo and behold, we have
| | 02:38 | redesigned the web site. Hurray! And yes,
it looks a little bit odd, and if you
| | 02:45 | think about it there's a few reasons why.
| | 02:47 | The big one is our beez2 template had
module positions called position 0,
| | 02:53 | position 1, position 2, and so forth,
and our new template calls for modules
| | 02:58 | and positions of left, right, top,
footer, and breadcrumbs. And none of those
| | 03:03 | modules that we have already set up in
the back-end of the web site are assigned
| | 03:07 | the module positions that
work with this template.
| | 03:10 | So, in the next video I'm going to
show you how to assign those modules.
| | Collapse this transcript |
| Assigning modules and fixing the logo| 00:00 | So we've got our template here
into the web site. Hurray!
| | 00:04 | And it's looking good, sort of, but it
appears that we're missing all of the
| | 00:08 | modules here in our web site. And, of
course, we're also missing our logo.
| | 00:13 | So we have two things that we
need to fix here sort of overall.
| | 00:17 | Let's take care of the modules first.
| | 00:19 | So I am going to hop back into the
back-end of Joomla. Remember, if you're
| | 00:23 | following along with my exercise files,
the login is jen and the password is
| | 00:28 | 123456. And I am going to go
to Extensions > Module Manager.
| | 00:35 | And there is a number of modules that
are in use for this particular web site, so
| | 00:40 | I just need to go through these one by
one and set them up accordingly into the
| | 00:44 | positions that are in this current template.
| | 00:46 | So I am going to start with Main menu,
and Main menu is the top navigation that
| | 00:52 | goes across the top part of the web page.
| | 00:55 | This should actually be in position
of top, so I am going to click my Select
| | 00:59 | position button, and if I scroll down to
the next page, here's our top position
| | 01:07 | here for ttoo. So I am going to go
ahead and check that, and I am going to say
| | 01:12 | Save & Close, and when I refresh the
front end of the web site, my top module will
| | 01:18 | show up, and there is all of my links.
| | 01:21 | Obviously the formatting
is not there. That's coming.
| | 01:24 | We are going to take care of all that stuff.
But if you can't see it you can't format it.
| | 01:30 | So now I just need to follow this
through with all of the other positions
| | 01:33 | here on my web site.
| | 01:35 | My Footer menu, formally in position 11,
needs to go to the footer position.
| | 01:40 | I am going to try selecting
my template from the list.
| | 01:43 | This will boil down just the
positions that are present on my template, and
| | 01:50 | it's also showing me positions from modules that
are currently being displayed in this template.
| | 01:57 | So it's showing me positions 11, 2, 5,
6, 7, and 9, because I have modules
| | 02:02 | assigned to those positions, even though
they're displaying on my page the ttoo
| | 02:06 | which doesn't have those module
positions. That's why they are there. They will
| | 02:10 | go away as I reassign the modules.
| | 02:13 | So my footer item is going to go to the
footer of the web page, so I'll choose that.
| | 02:21 | The testimonials are on the
right position on the homepage.
| | 02:26 | So, one by one I am just going to go
through and reassign these modules.
| | 02:31 | I am going to go to my breadcrumbs,
go to my breadcrumb's positions for
| | 02:36 | that. Save and close.
| | 02:38 | Then I am going to go to my random
image and the random image is showing on
| | 02:44 | the left side of the page, so we're going to
put that back in the left side of the page.
| | 02:49 | Banners is a module that's
here, but it's not published.
| | 02:52 | It came with Joomla when we installed
the web site. Likewise with the login
| | 02:56 | form. We're not actually using
these, so I am going to get rid of them.
| | 03:00 | I am going to put a check mark next to
Banners and a check mark next to Login
| | 03:03 | Form and I am going to click my Trash button.
| | 03:06 | Then I'll send them away and
things will be a little less confusing.
| | 03:11 | My User menu shows up on the left side
of the page once somebody is logged into
| | 03:15 | the web site, so I am going to
choose the left position for that.
| | 03:19 | I am going to show my subnavigation
also on the left side of the page.
| | 03:25 | My Latest News shows up on the left
side of the page on the homepage, and the
| | 03:40 | banner ads were showing up in a
position at the bottom of the page.
| | 03:44 | I'll go ahead and put them down in the footer.
| | 03:47 | So now we have this all set up, and you
can all of the modules in use in the web
| | 03:55 | site. They are all published in they are
assigned positions that actually occur
| | 03:59 | in this particular template.
| | 04:00 | I am going to flip back to the front
end of the web site and refresh, and lo and
| | 04:05 | behold, we have content. So we have
links at the top of the page, we have our
| | 04:11 | latest news on the left side, our
testimonials on the right, and down here at the
| | 04:16 | very bottom I think we have a link
here for privacy policy. Obviously we have
| | 04:20 | some styling issues because we can't
even see it, but there's our privacy policy,
| | 04:25 | and we have our banner add.
| | 04:27 | Like I said, the goal at this point is
just to get the content on the page so
| | 04:31 | that we can style it later. Of course
we have some issues here, like with our
| | 04:36 | simple image gallery being pushed
too far down the page, and certainly our
| | 04:40 | formatting isn't good,
but we'll fix all of that.
| | 04:43 | The last thing I need to take
care of is this image up here in the
| | 04:47 | upper left-hand corner.
| | 04:49 | It's broken because--this is
something that I always forget to do in my
| | 04:52 | templates--which is to adjust the path of
the image to the Joomla path where that
| | 04:57 | image is stored. And I left it this way
on purpose because I expect that this is
| | 05:02 | the kind of mistake that you are going
to make kind of often as well. It is
| | 05:05 | so easy to forget about it because it
was working in Dreamweaver, and then you
| | 05:09 | get into Joomla and it doesn't work anymore.
| | 05:10 | I am going to hop into the
back-end of Joomla, and I am going to go to
| | 05:15 | Extension > Template Manager.
| | 05:17 | I am going to go to my Templates tab,
and I am going to scroll down to find my
| | 05:23 | ttoo template. Look at
that. Doesn't it look great?
| | 05:26 | Here's our template thumbnail.
| | 05:28 | When I click on it, I get my full
preview, which is looking fabulous.
| | 05:31 | So I am going to go ahead and click on
ttoo Details to go into my editing screen.
| | 05:38 | And you see that I have two links
here. One is to edit my main page template
| | 05:42 | which is the HTML and one is a link to
the one style sheet we have, so I can go
| | 05:47 | in and edit my CSS from here as well.
| | 05:49 | So I am going to hop into my main page
template by clicking on this link, and
| | 05:53 | I am going to scroll down to where I call for
my images, right here. So "images/logo.png".
| | 06:01 | The problem is Joomla is looking in my
media manager images for this logo with
| | 06:06 | this kind of path and that's not
exactly where the images are located.
| | 06:11 | Fortunately, we can fix this problem
very easily. All I need to is copy a
| | 06:17 | little bit of code from the top of the
page here, right here. So we're going
| | 06:23 | to echo our base URL, in other words
http://localhost or localshost:8888, which
| | 06:32 | is the base URL for this web site,
/template/the name of the template/, and
| | 06:39 | then css, default.css.
| | 06:42 | In this case, we are going
to go to images/logo.png.
| | 06:46 | So I have highlighted this text.
| | 06:48 | I am going to go to Edit > Copy. Then I
am going to scroll down to just before
| | 06:54 | where the image is called, and
I am going to say Edit > Paste.
| | 06:56 | So there is the code, drop right on in
there the php echo, the templates, the
| | 07:02 | name of the template.
| | 07:03 | We'll type in an extra slash
there before images/logo.png.
| | 07:08 | We'll go ahead and hit the Save button
in case we have to come back and edit
| | 07:11 | some more, and I'll refresh the homepage,
and lo and behold, we have our logo back.
| | 07:18 | It was indeed a path problem.
| | Collapse this transcript |
| Fixing typical installation problems| 00:00 | You tried to install your template and
something went horribly wrong and it's just
| | 00:05 | not installing right.
| | 00:07 | Where do things typically fall apart?
| | 00:09 | Usually, it's bad code in the XML file,
| | 00:13 | it's not listing files that exist,
or listing files that don't exist.
| | 00:18 | Did your templates not install?
| | 00:20 | Unfortunately, when things don't
install, the error messages are not the most
| | 00:25 | helpful in the world to help
you diagnose what's happened.
| | 00:28 | So in your exercise files I've
created three broken templates for you,
| | 00:34 | and I'm going to try installing each
one of those, so that you can see what kind
| | 00:38 | of error messages I get.
| | 00:40 | So I'm going to go to my Extension
Manager, and I'm going to browse for my
| | 00:46 | Chapter 3, broken1, and for in broken1
what's missing is I have failed to close
| | 00:55 | one of the tags in the XML file.
| | 00:58 | It's completely missing.
| | 01:00 | So when I upload this package
| | 01:02 | I get a horrible-looking error message
just like this, and it claims that it
| | 01:09 | cannot find my Joomla XML file.
| | 01:12 | Well, nothing could be further from the truth.
| | 01:14 | It found it just fine.
| | 01:16 | But it's upset really about this
opening and ending tag mismatch, and it blows
| | 01:22 | up when you try to upload it.
| | 01:24 | Let's try broken2, and I'm going to
upload that, and you'll see that we actually
| | 01:31 | get exactly the same error message and
it claims that we have mismatched tags,
| | 01:38 | a premature end of data, and
it can't find the setup file.
| | 01:42 | Well, you'll want to know that in
broken2 the XML file contains a listing for an
| | 01:49 | image file that doesn't
actually exist in the images folder.
| | 01:53 | So you see how different those
errors are, but yet the error message here
| | 01:56 | is exactly the same.
| | 01:59 | So you can't list images in your XML
that don't exactly exist within the zip.
| | 02:04 | All right, now we're going to try #3
and for this one we have not listed
| | 02:13 | certain files that are included inside
of the zip. And when I upload that one I
| | 02:18 | get exactly the same error message.
| | 02:21 | Once again, it doesn't know what to do with
the things if the details are not there.
| | 02:25 | Every file inside of your
zip must be accounted for;
| | 02:29 | it must be listed in the XML file
either as an item in a folder or as
| | 02:33 | an individual item.
| | 02:35 | All the tags have to be closed and
formed correctly, and you can't list any of
| | 02:40 | files or folders that aren't in the zip file.
| | 02:44 | Unfortunately, Joomla has left this
error message to be the same for those three
| | 02:48 | very common kinds of errors.
| | 02:50 | I encourage you to unzip those files and
take a look at the XML file and compare
| | 02:55 | the problems in those with the
problems you might be having in yours.
| | 02:59 | If you make sure that all of your
tags are closed and all of the files are
| | 03:03 | listed that are actually in the zip file,
99% of the time that's going to take
| | 03:07 | care of your installation problems.
| | Collapse this transcript |
|
|
4. Working with CSS, Index.php, and Joomla!Using the Firefox Web Developer toolbar| 00:00 | One of the things I miss about working
in Joomla is not having some kind of
| | 00:04 | equivalent of a Dreamweaver Design view.
| | 00:07 | I can't see what I'm doing as I make
changes to the CSS on the web site.
| | 00:12 | I have to type my change into the CSS
editing screen, click Save, switch to the
| | 00:17 | front end of the web site, refresh,
and see if my change fixed the problem.
| | 00:21 | If I make a bunch of changes but only some
of them work, which were the ones that worked?
| | 00:26 | It's very hard to tell.
| | 00:28 | Fortunately, there are some free
Firefox tools coming to the rescue that make
| | 00:33 | editing your CSS in
Joomla so much more helpful.
| | 00:37 | The Firefox Web Developer toolbar's
Edit CSS function is a great way to
| | 00:42 | make quick CSS changes.
| | 00:44 | It works by showing you the style sheets
relevant to the page that you're looking at.
| | 00:48 | You can then type in the Edit window
and see your changes made in real time.
| | 00:53 | I have another tab over here with the
Web Developer toolbar open, so that you
| | 00:59 | can see what this looks like. And as it
turns out, there is now also a version
| | 01:04 | that's available for Chrome,
if you like working in Chrome.
| | 01:07 | I'm going to download the version here
for Firefox by clicking on the link, and
| | 01:14 | this will take me over to the Firefox
page where I can add this to my Firefox by
| | 01:18 | clicking on the Add to Firefox link.
And I'm going to tell this to install, and
| | 01:26 | it's going to ask me to
restart to complete my installation.
| | 01:33 | All right, and up here at the top of
the page you'll notice this new bar of
| | 01:40 | icons, and this is the Web Developer toolbar.
| | 01:44 | So if, for example, I say CCS > Edit CSS,
this is going to show up at the bottom
| | 01:50 | of my screen, but I can move it by
clicking this button, and I moved it now to
| | 01:57 | the left side of the page. That's where
I prefer to have it when I'm working.
| | 02:01 | This shows me all of the
style sheets that are currently in use for this
| | 02:04 | particular web page, and remember that in
our style sheet we only included three style sheets.
| | 02:11 | We had the one for the web site in
general, which was called the default.CSS.
| | 02:16 | And we had the system.CSS and the
general.CSS, which are all here.
| | 02:21 | But we've also got a couple of other
things, and the reason why is because of
| | 02:26 | the simple image gallery down here in
the bottom has called in some additional
| | 02:30 | items, like the slimbox2.
| | 02:34 | We also have template.CSS.
That pertains to the simple image gallery.
| | 02:40 | And there's a couple of them embedded
styles as well here, and these are also
| | 02:44 | calling in things that have to
do with simple image gallery.
| | 02:46 | So some extensions may have their own
style sheets that will be called on the web site.
| | 02:52 | If I go to a different page, you'll
see that I only have four items that are
| | 02:56 | being called here in my
style sheet on this particular web site.
| | 03:02 | The great part about this is I can be
in my default style sheet and I can make
| | 03:07 | changes here. So if I think the font
looks at 90% perhaps a little small or
| | 03:13 | little large, I could reduce the size,
let's say make it 80%, make it 70%, and
| | 03:19 | it's updating this in real time.
And maybe I don't want my font family to be
| | 03:25 | Georgia anymore, so take that out.
| | 03:28 | I'll just leave it as Times.
| | 03:30 | So you see how these updates are
being made in real time right here as I'm
| | 03:34 | working in my Edit CSS window.
| | 03:38 | When I'm done making changes, all I
need to do is Ctrl+A or Command+A to
| | 03:43 | highlight all of the text and
Ctrl+C or Command+C to copy it.
| | 03:47 | Then I'll go to the back-end of Joomla
into the CSS Editor and I can paste the
| | 03:53 | entire style sheet and on
top of what's already there.
| | 03:55 | As always, I strongly recommend that
you create backups before you start really
| | 04:03 | tinkering around a lot with your HTML
and your CSS. And you may want to just make
| | 04:08 | a backup of the HTML and the CSS--maybe
not even the whole Joomla web site--but
| | 04:13 | at least those two things, every 30
minutes to an hour while you're working.
| | 04:17 | Just in case you happen to really mess
something up, at worst you've only lost a
| | 04:24 | half an hour or an hours worth of work,
and you can go back to an earlier state
| | 04:29 | and figure out what you did wrong.
| | Collapse this transcript |
| Using Firefox's Firebug| 00:00 | Some web developers prefer to use
Firebug for diagnosing issues with the
| | 00:04 | construction of their web pages.
| | 00:06 | Firebug is a similar tool to the Web
Developer toolbar in that it allows you
| | 00:11 | to edit HTML and CSS.
| | 00:14 | Many developers do prefer this tool,
and it offers some additional features to
| | 00:19 | the Web Developer toolbar.
| | 00:21 | In the end, the problem you're trying to
solve is to find a great way to edit CSS
| | 00:25 | and be able to see your changes, which
is particularly important when you're
| | 00:29 | debugging a web site for different browsers.
| | 00:32 | If you have a favorite tool for Chrome
or IE, that's great. Go ahead and use them.
| | 00:37 | If you have different tools for
Firefox that you like better, use those.
| | 00:41 | My personal favorite is the Web
Developer toolbar though, so that's what
| | 00:45 | I'm going to be using in these videos,
and I'll occasionally use Firebug if required.
| | 00:50 | But I'm going to go ahead and show
you how to install Firebug anyway.
| | 00:53 | We are here on the Firebug
web site at getfirebug.com.
| | 00:57 | I'm going to go ahead and click
on Install Firebug for Firefox.
| | 01:01 | It's going to give me a message saying
go ahead and install it, and then I'll
| | 01:06 | need to restart Firefox to save my changes.
| | 01:11 | And Firebug has now been installed on
my web site. And I know that because
| | 01:16 | down here in the lower right-hand
corner is this cute little bug, and when I
| | 01:20 | click on it, this will pull up the
HTML and the CSS associated with this
| | 01:26 | particular web page.
| | 01:28 | The CSS is showed over here on the
right side, and it's just pertaining to
| | 01:33 | whatever is highlighted here in the code.
| | 01:35 | So if I roll my mouse over the body
tag, for example, this is highlighting
| | 01:40 | the entire web page itself, because of
course, the entire web page is located
| | 01:44 | inside of the body tag.
| | 01:46 | If I open this up a little bit, I can
go to the container, and then I can go to
| | 01:52 | the header of the web page.
Or I can go to the left column.
| | 01:56 | As I roll my mouse over the things,
what's nice is different parts of the
| | 02:01 | web site highlight to show me where
certain divs are located. And if I click on
| | 02:06 | them, I can see over here on the lower
right-hand corner of the screen exactly
| | 02:11 | what styles are being assigned to that
particular item and how the cascade is
| | 02:17 | working here as well.
| | 02:18 | Firebug can be a very useful tool for
working with your web site. And if you feel
| | 02:23 | comfortable using this and more
comfortable with it than the Web Developer
| | 02:27 | toolbar, by all means, go for it.
| | 02:29 | It's a terrific tool.
| | 02:30 | It has helped me out of problems more
than once, but you're going to see me
| | 02:34 | mostly using the Web
Developer toolbar in these videos.
| | Collapse this transcript |
| Using ColorZilla| 00:00 | Another one of my favorite
extensions when working with Joomla inside of
| | 00:05 | Firefox is ColorZilla.
| | 00:07 | And this is an amazing tool.
| | 00:10 | You can see a little
screenshot here of it in action.
| | 00:14 | Essentially, it's an eyedropper that
runs within Firefox and allows you to
| | 00:18 | sample colors on your web page--
| | 00:20 | extremely helpful when
you're working with Joomla.
| | 00:21 | So I am going to go ahead and install
ColorZilla, click on this Installation.
| | 00:27 | I am going to allow it to install software,
and then it's going to restart Firefox.
| | 00:33 | And then I'll show you how cool is
that as soon as it comes back up here.
| | 00:42 | Now, down here in the corner of my
window is this great little eyedropper,
| | 00:48 | which if I click on that as I roll
over things, the color value changes down
| | 00:53 | there in the bottom.
| | 00:54 | So it tells me the hex codes for
various colors that are located here:
| | 00:58 | inside of photos, inside of the
background colors here, the color of the text is--
| | 01:04 | all kinds of great stuff.
| | 01:06 | Another one of ColorZilla's great
features is the Webpage DOM Color Analyzer.
| | 01:12 | This goes through and runs a little
algorithm and pulls out the most commonly
| | 01:18 | used colors on this particular web page.
| | 01:20 | So, if you really like the look of
the Two Trees Olive Oil web site, it
| | 01:24 | generates this great little color
palette down here with all of the hex codes
| | 01:29 | and everything that you would need.
So you could then take that same color
| | 01:33 | palette, for example, and apply
it to one of your own designs.
| | 01:36 | So that is a very handy feature that's inside
of ColorZilla that not many people know about.
| | 01:42 | We'll put ColorZilla to use here in
our coming videos, and ColorZilla will
| | 01:46 | be very handy to us.
| | Collapse this transcript |
| Dreamweaver CS5 and Joomla!: Setup| 00:00 | In the last two videos I showed you
the Firefox Web Developer toolbar and
| | 00:05 | Firebug, which also runs within Firefox,
as two great tools that are free and
| | 00:10 | open source for helping you work with
the HTML and the Joomla on your web site.
| | 00:14 | However, I know that many of you
watching are huge Dreamweaver fans, because I'm
| | 00:20 | a Dreamweaver fan too.
| | 00:21 | I've been using Dreamweaver since 2000,
and I think it's a terrific program,
| | 00:27 | and I know it fairly well, which of course is
always a factor when you consider what tool to use.
| | 00:33 | In the most recent version of
Dreamweaver, Dreamweaver CS5, Dreamweaver has
| | 00:39 | offered the option of
integrating Joomla with Dreamweaver.
| | 00:44 | In other words, the idea is, you can
use Dreamweaver as your editing tool while
| | 00:49 | working within Joomla.
| | 00:52 | And I heard this come out when the CS5
collection was released, and I watched
| | 00:58 | James Williamson do a sample movie on
how this worked with WordPress, and I
| | 01:03 | thought, wow, that's really cool.
| | 01:05 | But Joomla is fairly different in the
way it's coded than WordPress and Drupal.
| | 01:10 | And I was concerned that this would
perhaps not work as well as advertised.
| | 01:15 | So I decided to go ahead and take a
look at this in a little bit more detail.
| | 01:20 | And what I'm going to do is I'm going
to show you how to set up a Dreamweaver
| | 01:24 | Joomla integration on your local
computer, and then I'm going to give you some
| | 01:30 | food for thought in terms of
using Dreamweaver with the Joomla.
| | 01:34 | So of course you need to have Joomla
installed somewhere, and you should have
| | 01:38 | that of course by now. We are running XAMPP or
MAMP on your computer, and we have a copy of Joomla
| | 01:45 | running here at either localhost or
localhost:8888 if you're on a Mac.
| | 01:51 | So if you go ahead and open up
Dreamweaver CS5, this of course is a
| | 01:57 | product that's for sale.
| | 01:58 | You can purchase it and there's also a
free 30-day trial download on the Adobe
| | 02:02 | web site, if you want to go there and try that.
| | 02:05 | The first thing we're going to do
is make a site in Dreamweaver CS5.
| | 02:10 | So I'm going to go to the Site menu and
I'm going to go to the Site > New Site
| | 02:15 | and I'm going to see a screen like this,
and it's going to ask me for certain
| | 02:19 | pieces of information.
| | 02:21 | As always, we need to give this site a
name, so I'm going to call this joomla,
| | 02:26 | and it's going to ask me
for my local site folder.
| | 02:28 | I'm going to click that folder to
browse all the way back to my computer's hard
| | 02:32 | drive and to my XAMPP
folder and to my htdocs folder.
| | 02:39 | So this will wind up being
the root folder for my web site.
| | 02:43 | Mac people, you should
do the same type of thing.
| | 02:45 | Go ahead and browse to the htdocs
folder and MAMP, and inside of that, that's
| | 02:50 | where Joomla is located.
| | 02:52 | Go ahead and say Select, and then
what we're going to do is we're going to
| | 02:57 | switch to the Servers tab over here on
the left side, and under the Servers tab,
| | 03:03 | we're going to go ahead
and click the Add button.
| | 03:05 | That's this little Plus
sign down here in the corner.
| | 03:08 | When I click that, I'm going to get another
window that will ask me for some more information.
| | 03:13 | First of all, it asked me for my server name.
| | 03:16 | Well, that's localhost.
| | 03:17 | I need to connect using the local network.
| | 03:24 | It's going to ask me for my server
folder, so I'm going to, once more, pick
| | 03:28 | my htdocs folder here.
| | 03:30 | And it's going to ask me for
my web URL: http://localhost.
| | 03:36 | Mac people, your server name should
indeed be localhost, but your Web URL
| | 03:41 | will be localhost:8888.
| | 03:46 | Now switch over to the Advanced tab,
and we're going to make one quick change here.
| | 03:53 | We're going to change our Server
Model from nothing at all to PHP and MySQL,
| | 03:58 | because that's what Joomla runs.
| | 04:01 | Go ahead and hit Save and hit Save
again, and Dreamweaver is going to think a
| | 04:07 | minute while it goes through
and scans the entire site cache.
| | 04:10 | All right, so over here on the right
side of the screen are all of the local
| | 04:18 | files that make up my Joomla web site.
| | 04:20 | They're all listed here.
| | 04:22 | And you may think that in order to
edit the template that I'd want to go into
| | 04:26 | the templates folder and open up that index.php.
| | 04:29 | That in fact is not correct.
| | 04:32 | There is only one file you should open
from this point here in Dreamweaver, and
| | 04:38 | that is the index.php that occurs in the
root of the web site, not the index.php
| | 04:45 | that we just created and is located
somewhere in the templates folder.
| | 04:48 | So we're going to double-click on
this index.php and you're going to see
| | 04:54 | absolutely nothing at all.
| | 04:56 | That is all very good and all corrupt.
| | 05:01 | At the very top of the page, you're
going to see this message here about
| | 05:04 | dynamically related files.
| | 05:07 | And in order to get this set up, it
says it's not happy for some reason, so
| | 05:12 | we're going to click on this Setup button.
| | 05:14 | The part that I configured incorrectly
was I checked this off as the remote server.
| | 05:19 | I actually want to set
this as my testing server.
| | 05:22 | I think that's going to work now.
| | 05:23 | Go ahead and say Save, and now at the very top
of the page work now go ahead and they say Save.
| | 05:26 | And now at the very top of the
page it should give us a message about
| | 05:30 | dynamically related files, and it's going to
ask us if we'd like to discover them.
| | 05:35 | Go ahead and hit Discover, and this a
warning that comes up in Dreamweaver that
| | 05:40 | tells us that it's going to be
executing things right here in Dreamweaver the
| | 05:44 | same way it would in a web
browser, including JavaScript.
| | 05:47 | Go ahead and say Yes.
| | 05:48 | It will think for a minute, and once
again, you'll see absolutely nothing.
| | 05:53 | That's because it's going to give us
this message saying that it needs to
| | 05:56 | display in Live view.
| | 05:58 | So I'm going to go ahead and click the
Live View link, and lo and behold, you'll
| | 06:02 | see your Joomla web site displayed
right here inside of Dreamweaver.
| | 06:09 | You can Ctrl+Click on the PC or
Command+Click on the Mac, and this will take you
| | 06:16 | to the different pages of the web site.
| | 06:17 | Just clicking them themselves won't do anything;
| | 06:20 | you have to Ctrl+Click or Command+Click,
and that will move you around the web site.
| | 06:27 | So that's the basics for how you'll
run Joomla within Dreamweaver CS5.
| | 06:32 | In the next video, I'll show you how you
can actually go about editing the files
| | 06:36 | associated with Joomla
right here in Dreamweaver.
| | Collapse this transcript |
| Dreamweaver CS5 and Joomla!: Using the Filter tool| 00:00 | In the last video, I showed you
how to set up a Dreamweaver Joomla
| | 00:04 | integration for your Joomla site,
and we now have our Joomla running right
| | 00:09 | here inside of Dreamweaver.
| | 00:12 | So the next thing to show you is
let's say we want to make some changes
| | 00:16 | here to the styling of our
web site in one way or another.
| | 00:21 | Well, first of all, we have to figure
out exactly what it is that we're editing,
| | 00:25 | and Dreamweaver gives us
some tools for this. We have--
| | 00:29 | at one point, I counted on another
web site--definitely well over 100 files--
| | 00:34 | possibly as many as 130 or 140 files--
that are called to display this web page,
| | 00:41 | and they are all here.
| | 00:44 | I can keep on scrolling down forever,
and you'll notice that many of them are
| | 00:48 | called by the same name.
| | 00:51 | So there is two system.csses, and a
general, and then default.css, but down
| | 00:55 | here we've got two database.phps.
| | 01:00 | So we have multiple files with similar
names, different paths, but the paths
| | 01:05 | don't show up here in Dreamweaver.
| | 01:07 | So we're not really sure exactly
which database.php we're entering.
| | 01:11 | So that's problem number one.
| | 01:13 | Problem number two is in the way that
Joomla works there are this concept of
| | 01:18 | core files within the Joomla file structure.
| | 01:22 | These are files that are installed in
Joomla and they may be overwritten when
| | 01:28 | you upgrade your web site.
| | 01:30 | So you install one of your security
updates, and the files that you've changed
| | 01:35 | there within the Joomla core
potentially could get overwritten, which means that
| | 01:40 | any customizations you've
put in in place go away.
| | 01:42 | So all of the files that we're looking at
here--or almost all of them--are core files.
| | 01:50 | In other words, they are things
you should never ever, ever edit.
| | 01:55 | So, what are we supposed to do here?
| | 01:57 | Well, Dreamweaver gives us
a few filtering tools here.
| | 02:01 | Right now, I'm showing all of my
style sheets, JavaScript, and PHP pages.
| | 02:06 | So if I turn off JavaScript and if I
turn off PHP, I'm down to just a handful of
| | 02:13 | style sheets that I've
worked with on the web site.
| | 02:17 | So now if I do something let's say
highlight this text here, The Story Behind
| | 02:23 | Two Trees, and I'd like to do
something differently with it,
| | 02:26 | I could--let me pull this down a
little bit here--I could see that The Story
| | 02:33 | Behind Two Trees is displayed in a
certain color and a certain font family.
| | 02:37 | I could now go through in here and
change that color, for example, right here in
| | 02:42 | Dreamweaver, and that information
would get saved over instantly--
| | 02:48 | well, at least as soon as I save--
over to my Joomla site. You'll see that
| | 02:52 | default.css has a star by it.
| | 02:55 | Any time you see a file name with a star
by it in Dreamweaver it's an indication
| | 02:58 | that the file is not saved.
| | 03:00 | If I click on default.css, I
will in fact see my style sheet.
| | 03:05 | It's displaying here
next to the web page itself.
| | 03:10 | I can flip back to Code view and see
just the style sheet or flip to Design view
| | 03:13 | and see the rest of the window.
| | 03:16 | This would be the way that you would
be able to edit your site here directly
| | 03:20 | within Dreamweaver, is using this tool
| | 03:22 | you can highlight things, you can change
colors, you can change layouts, and so forth.
| | 03:27 | But I would strongly encourage
you not to touch index.php, the one
| | 03:32 | associated with your template.
| | 03:34 | I also encourage you to not touch
index.php, the one associated with the root
| | 03:38 | of your web site, because you're really going
to screw things up if you touch that one.
| | 03:43 | What is this amazing new
Dreamweaver feature good for?
| | 03:46 | Well, I am so glad you asked.
| | 03:48 | If you're wanting to edit an existing
Joomla template, like the one we have
| | 03:53 | here, within the context of Joomla--
maybe you don't know CSS very well, or you
| | 03:58 | just like Dreamweaver's productivity tools--
| | 04:01 | you could go ahead and use that here.
| | 04:02 | Second, you know that the only files
that you should edit are index.php--
| | 04:08 | meaning the template index.php--and the CSS
files that are associated with this template.
| | 04:14 | If you don't know that,
you should not use this tool.
| | 04:17 | If you're confused by what CSS you
should edit, Dreamweaver of course, one of
| | 04:22 | its great strengths is doing this
wonderful job of identifying what styles are
| | 04:27 | currently impacting a certain element of
the web page and allowing you to edit them.
| | 04:31 | It's always been one of Dreamweaver
strengths, and you can take advantage of
| | 04:35 | that strength here.
| | 04:37 | If you have a template that was built
in Artisteer or some sort of commercial
| | 04:40 | template, and you don't know enough
HTML and CSS to create your own Joomla
| | 04:45 | template in the first place,
| | 04:46 | now you got to try to edit the
Artisteer code or that commercial code and you
| | 04:51 | just can't figure things out.
| | 04:53 | Dreamweaver could probably be a real
big help to you in making changes to that.
| | 04:58 | However, Joomla Dreamweaver
integration can also be an absolute nightmare.
| | 05:03 | It's a nightmare if you think you can
use Joomla and Dreamweaver integration to
| | 05:08 | edit any random PHP file in Joomla's structure.
| | 05:12 | Absolutely, do not do this.
| | 05:15 | You cannot just edit any PHP file
in Joomla. You will break things.
| | 05:20 | If you're easily overwhelmed by the
long list of file names and you're just
| | 05:25 | paralyzed by fear about what you can or
cannot touch inside of Joomla, this is
| | 05:29 | probably a bad framework for you.
| | 05:33 | I also want to make it very
clear what's happening here.
| | 05:35 | Joomla Dreamweaver integration does not
convert your HTML web page to a Joomla template.
| | 05:43 | It absolutely does not do that.
| | 05:46 | So don't think that you can just take
your HTML page and then somehow load in
| | 05:52 | Joomla and magic will happen and the
two will start talking to each other.
| | 05:56 | They have nothing to do with each other.
| | 05:58 | You have to have your template in Joomla
first before you can start to use the tool.
| | 06:02 | This does not put any Joomla codes
in your HTML document. Dreamweaver does
| | 06:07 | not know about jdoc include statements,
| | 06:10 | so they're not available
and they're not going in.
| | 06:13 | Also, be very careful because those
of you who have used Dreamweaver for a
| | 06:20 | while know Dreamweaver doesn't
necessarily reflect the way the web page will
| | 06:28 | actually look when it
gets into a real web browser.
| | 06:32 | What you see in
Dreamweaver is mostly what you get,
| | 06:35 | but it's not entirely correct all of the time.
| | 06:39 | You have to absolutely do
your cross-browser testing.
| | 06:42 | So even if it looks good here in
Dreamweaver, it may not look good in Safari, it
| | 06:46 | may not look good in IE 7, it may look
worse in IE 6, and none of that's going
| | 06:51 | to be apparent while
working here within Dreamweaver.
| | 06:54 | So, do you still have to learn hand-coded
HTML and CSS to do your best template work?
| | 07:00 | Absolutely, you totally do.
| | 07:03 | And would I recommend using
Dreamweaver and Joomla together? Absolutely not.
| | 07:08 | I think that there is plenty of
scope here for you to get into trouble.
| | 07:13 | So while it's a very cool idea, and I
hope Adobe does more development on this--
| | 07:17 | it could be a great tool for us--
| | 07:19 | I would recommend you stay away from
this for now, unless you really know
| | 07:23 | what you're doing.
| | Collapse this transcript |
|
|
5. Styling Your Joomla! Template Styling the top navigation| 00:00 | Now that we have Firefox all decked
out with our tools for making changes to
| | 00:05 | this web site, we are finally
ready to get some styling done.
| | 00:09 | And where we would like to start
is with the top navigation, which is
| | 00:13 | displayed up there as a list of bullets and I
know it's driving some of you absolutely batty.
| | 00:16 | So, I am going to start by taking a
look at the HTML source for this web page.
| | 00:24 | What you are going to notice over the
next fifteen, sixteen videos that I'm
| | 00:29 | going to do in terms of laying this web site
out with CSS is pretty much the same process.
| | 00:34 | I'm always going to start by viewing the
HTML from my web page and taking a look
| | 00:39 | at what all the tags are and any classes,
or IDs associated with those tags for
| | 00:45 | a particular area of the web page.
| | 00:48 | Then I am going to use Web Developer
Toolbar to construct some styles to make
| | 00:53 | the page look the way I want it.
| | 00:55 | And then I will wind up copying the CSS
that we generate and pasting it into Joomla.
| | 00:59 | So, I am going to start by viewing the
HTML for my web page here by going on my
| | 01:05 | Web Developer Toolbar to the View
Source button and picking View Source.
| | 01:09 | The reason why I go here to the View
Source option as opposed to going into the
| | 01:16 | backend of Joomla and looking at
index.php is really well exemplified by looking
| | 01:21 | at the top of this document.
| | 01:24 | You might remember from looking at
index.php that we started with some php at
| | 01:28 | the very top of this web page, which
of course you don't see here, and we also
| | 01:33 | had a line of code that was
the jdoc:include type="head".
| | 01:38 | Well, that doesn't appear in this
code either because it's been rendered.
| | 01:42 | So, now at this point what we see is we
see our robots or keywords or rights or
| | 01:48 | language or descriptions, our generator,
and our HTML browser tag, all of that
| | 01:53 | came out of the jdoc:include
statement for the head of the document.
| | 01:59 | Because so much processing happens from
the template that we created, as Joomla
| | 02:06 | pulls in all of the code that makes
up the modules and the components and
| | 02:11 | renders everything into HTML and
then sends it back to the browser,
| | 02:15 | this is a much better place to start when
looking at code than just looking at index.php.
| | 02:22 | One thing you may wish to do, if it's not
done already, is to turn on Wrap Long Lines.
| | 02:29 | This will make things a little bit
easier so you don't have to side scroll to
| | 02:32 | see all of the code on the page.
| | 02:35 | The easiest way to find where you are
in this document, you could certainly
| | 02:39 | scroll on down and read everything and
try to find the navigation bar, but the
| | 02:44 | other way you can do this is take a
look at the words that appear in the
| | 02:47 | navigation bar like About or News.
| | 02:50 | And I am going to click Ctrl or Command
+F to pull up a little search box here
| | 02:55 | down at the bottom of my code, and I
am going to put in the word about and it
| | 03:00 | will go through and search for the word
about in my code, which has come up right here.
| | 03:05 | And I'll scroll down just so you
con see this a little bit better.
| | 03:08 | That it in fact my menu so here is my
ul that starts it and my li, which is the
| | 03:15 | first bullet, and you'll see there
that we have a href tags. So that is the
| | 03:22 | navigation bar at the very top of the web page.
| | 03:25 | You'll see that the entire site is
wrapped in a container tag and then we have
| | 03:30 | a div with an id of header and inside
of that is both our logo up here in the
| | 03:36 | upper left-hand corner as well as a
div with a class of moduletable_menu.
| | 03:42 | So, what I need to do is I need to
style this ul here to make it go horizontal
| | 03:49 | on the page and I need to make it
appear in Georgia instead of in Arial or
| | 03:55 | Verdana, which is what the default is.
| | 03:57 | I need to make the letters uppercase and
I need to make the font size much bigger.
| | 04:02 | So, now that we have a sense of how
the HTML was put together, I am going to
| | 04:06 | close this window and I am
going to go to CSS > Edit CSS.
| | 04:12 | I am going to switch to my default.css
stylesheet and what I usually like to do
| | 04:18 | is to try to group my code together.
| | 04:21 | So, I have here a header already in place.
| | 04:24 | That's generally styled my header and
I am going to put in a comment at the top
| | 04:29 | here that says this is the top header bar.
| | 04:33 | By the way, as soon as I started that
comment, you notice how the whole web
| | 04:36 | page sort of broke.
| | 04:37 | Now, remember that Firefox is rendering
the CSS in real time and we've opened a
| | 04:43 | comment, but we haven't closed it.
| | 04:45 | So, right now, it views the style sheet as
being about three or four declarations long.
| | 04:50 | As soon as I close my comment here,
the styling will return to the web page.
| | 04:55 | So, don't let that kind of thing freak you out.
| | 04:59 | The other thing you might notice is that
the background image on this page where
| | 05:04 | it would go right here
under the logo doesn't appear.
| | 05:07 | That's because the path is changed to
the background images while we have the
| | 05:11 | editing window open in Firefox.
| | 05:14 | This is a temporary condition.
| | 05:16 | It's only happening on the computer in
front of you, not on the actual real live
| | 05:21 | web site, if you happen to be
working on a real-life web site.
| | 05:23 | So, it's just your view of it that's
broken for the moment and as soon as we
| | 05:27 | close that Edit CSS window, the
background image will come back.
| | 05:31 | All right, having giving you all those
caveats, I have a header ul right here
| | 05:37 | in my code with a margin and the
padding set to zero, but I am going to make
| | 05:41 | some changes to this.
| | 05:43 | First of all, my menu is smashed all
the way to the top of the web page here.
| | 05:49 | So, I am going to start by giving
myself a little bit more padding.
| | 05:53 | I am going to try 55 pixels on the top, 0 on
the right, 0 on the bottom, and 0 on the left.
| | 06:01 | That'll push my navigation down a little bit.
| | 06:04 | I also need to set the list style
type, list-style-type to none, so that
| | 06:17 | the bullets go away.
| | 06:18 | I really don't want the
bullets on this web page.
| | 06:20 | I am also going to set the font family,
font-family, to Georgia, Times, Serif,
| | 06:31 | which is a little bit better, and in the
comp it showed these as all uppercase.
| | 06:37 | We could go back through our each
individual menu item in Joomla and retype
| | 06:42 | all of these menu links in uppercase, but
I tell you it's far easier to just style it.
| | 06:47 | So, let's do that.
| | 06:48 | I will do a text-transform:
| | 06:54 | uppercase. That's better, and
I need the font a little bit bigger.
| | 06:59 | So, I am going to set the
size, font-size, to 1.2ems.
| | 07:07 | I usually like to work in ems because
it's compatible with all browsers and you
| | 07:11 | can resize the font using
browser tools that are built in.
| | 07:15 | So, you can make the font smaller
and larger on all kinds of browsers.
| | 07:21 | Notable Internet Explorer that has issues
with enlarging or reducing the size of fonts.
| | 07:26 | So, now I have got some big honking letters,
but they are still stacked on top of each other.
| | 07:31 | So, I really need to make this go
horizontally so the way to do that is
| | 07:37 | #header li and I am going to say float: left.
| | 07:46 | So, now my navigation is going all the
way to the left exactly as I wish, but
| | 07:51 | it's kind of smashed in together.
| | 07:53 | So, now I need to style this so
that the links have a bit more
| | 07:57 | separation between them.
| | 08:00 | So, I am going to do that by saying
#header ul a:link, #header ul a:visited,
| | 08:13 | curly bracket, curly bracket.
| | 08:15 | Now, I put a comma in between the link
and the visited state here that I have
| | 08:22 | typed in and the reason why is I want
them styled in exactly the same way.
| | 08:28 | One of the common mistakes I see my
students make is they will say #header ul
| | 08:32 | a:link, a:visited, and what that means
is to style the unvisited link state
| | 08:40 | within the ul, within the id of header
and also style all the visited states
| | 08:45 | on the whole web site.
| | 08:47 | So, remember you have to put together
your selector correctly so that it applies
| | 08:52 | to the link and the visited state here.
| | 08:54 | Then I am going to add some things.
| | 08:56 | First of all, let's get rid of that
underline under each of those links,
| | 08:59 | so text-decoration: none.
| | 09:08 | I also would like my font weight
to be bold. font-weight: bold.
| | 09:16 | I need to put in some padding
obviously because well, you know this really
| | 09:20 | isn't working for anyone. So, padding:
| | 09:24 | 30px 15px.
| | 09:29 | Remember that means to put the padding
of 30 pixels on the top and the bottom
| | 09:34 | and 15 pixels on the left and the right.
| | 09:39 | And finally, we will do a vertical
align, vertical-align, of middle and then
| | 09:48 | I will push this down just a little
bit, so that things are looking really
| | 09:52 | good here on our page.
| | 09:54 | The last thing I'd like to put in
is a hover state for these links.
| | 09:58 | Right now, when I hover over
them, they're turning green.
| | 10:01 | In the comp, they're supposed to be yellow.
| | 10:03 | And we've been given that color yellow here.
| | 10:06 | So, I am going to say header ul a:hover
and the color here will be set to e4e88f.
| | 10:22 | So, now when I roll over my links,
I get the correct shade of yellow.
| | 10:27 | So, that's looking terrific.
| | 10:31 | That's all I am going to do for the
moment, so now what I'm going to do is I am
| | 10:35 | going to say Ctrl or Command+A to
highlight all of the text here and then Ctrl
| | 10:40 | or Command+C to copy it.
| | 10:42 | Note, also you have the ability to
clear the entire style sheet up here at
| | 10:47 | the top of the page. Don't click that.
| | 10:49 | You might think that means cut.
| | 10:52 | You would be sadly mistaken.
| | 10:54 | You would blow away all of
the work that you just did.
| | 10:56 | So, don't click that. Ctrl or
Command+A, Ctrl or Command+C to copy.
| | 11:01 | Then we are going to go our backend of Joomla.
| | 11:02 | I am going to close my CSS editing
window and I am going to go to Extensions >
| | 11:08 | Template Manager.
| | 11:10 | Switch to the template master side of
things, scroll all the way to the bottom
| | 11:15 | to ttoo Details, click on that get in,
and we are going to Edit css/default.css.
| | 11:23 | We will click on that.
| | 11:25 | In here, I am going to do a Ctrl or Command+A
to highlight all of the text and hit Delete.
| | 11:32 | And then I am going to do a Ctrl or
Command+V to paste in all of the CSS for
| | 11:38 | the entire style sheet.
| | 11:40 | That's like everything that I just
generated plus everything that was already there.
| | 11:44 | The reason why I do it this way is
so I don't miss any of my changes.
| | 11:48 | Note that now here in our style sheet
view in Joomla, things are color coded,
| | 11:53 | which is a very handy thing if you ever
use this to actually edit your styles.
| | 11:58 | Go ahead and say Save & Close and when
we flip to the front end of the web site
| | 12:02 | and Refresh, lo and behold, we have
our horizontal navigation and when I roll
| | 12:08 | over things, we have a
nice little yellow highlight.
| | 12:11 | So, already this web page is looking better.
| | Collapse this transcript |
| Styling the active link| 00:00 | Our top navigation is styled for the
most part, but we're missing one part,
| | 00:05 | which is we need to have an oil bottle
stand behind the link for the page that
| | 00:10 | we're currently on.
| | 00:12 | Let's take a look at our HTML and see
if we can figure out how to make an oil
| | 00:16 | bottle appear on the
currently active page link only.
| | 00:21 | So we're going to view the source and
I am going to do a Ctrl+F or COmmand+F to
| | 00:26 | find the word about, which is
right on down here in our menu code.
| | 00:33 | And so what you'll see here, we're
currently looking at the Home page of the web site.
| | 00:39 | So for the very first item, here's Home.
| | 00:42 | There is our link and then we have
a li with an id of item-101, a class
| | 00:47 | of current and active.
| | 00:50 | For our About link, which is not a
current page, we have an id of item-104, but
| | 00:56 | we don't have any classes
associated with this link.
| | 01:01 | Well, it turns out that the active link
is very helpful in styling for the page
| | 01:06 | in which we're currently visiting.
| | 01:08 | So I am going to use that active
class in order to create a style that will
| | 01:13 | make the oil bottle appear behind the words
and will give us the correct color for the link.
| | 01:20 | So I am going to jump into my CSS by
going to my Web Developer Toolbar and
| | 01:25 | saying CSS > Edit CSS.
| | 01:28 | I am going to go to my default.css and
scroll on down to the header area of my code.
| | 01:35 | So I have the header itself, the image,
the ul, the li and right here after the
| | 01:42 | hover, I am going to go
ahead and put in a new style.
| | 01:46 | This will be #(pound)header li.active, because
remember the active class was part of the li tag,
| | 01:55 | a: link, #header li.active a: visited.
| | 02:04 | Remember to include both states on your style.
| | 02:09 | And we're going to set the color to #759b46.
| | 02:21 | So you see that the color for that link
changes right away here in the Home page.
| | 02:26 | And note that my hover
state doesn't work anymore.
| | 02:29 | That's because I put a linked in
a visited state after the hover.
| | 02:33 | Remember L, V, H, A is the correct order in
which you're supposed to put your link states.
| | 02:39 | You can remember that
because you the love to hate CSS.
| | 02:45 | But that's why the hover
state broke there. No worries.
| | 02:47 | We'll bring it back momentarily.
| | 02:50 | And then I am going to add my
background image by putting in background:
| | 02:56 | url (..//images/oilbottle.
png) no-repeat center center.
| | 03:12 | Now, while I am sitting here in my
Firefox editing window, I am not going to see
| | 03:17 | that background image.
| | 03:18 | I am going to have to actually copy this code
into Joomla in order to see that oil bottle.
| | 03:23 | Remember what I said about the paths
does not being correct for the moment.
| | 03:28 | So that will take care of my
active state for these links.
| | 03:32 | Now I need to put that
hover back in one more time.
| | 03:36 | So I am going to say #header
li.active a: hover {color: #e4e88f.
| | 03:56 | So, now when I hover over the Home
link that will work again, as well as
| | 04:00 | these other links here.
| | 04:03 | Okay, so we've got our styling in place.
| | 04:05 | We're going to Ctrl+A or Command+A,
Ctrl+C or Command+C to copy it all.
| | 04:10 | I am going to close that window.
| | 04:12 | I am going to go to my backend of
Joomla to Extensions > Template Manager, to
| | 04:19 | the Templates tab, scroll all the way
to the bottom, and click on ttoo Details.
| | 04:26 | Click on Editcss/default.css. Ctrl+A or
Command+A to highlight all of the text.
| | 04:33 | Ctrl+V or Command+V to paste in
our new CSS, and click Save & Close.
| | 04:40 | Now when I return the front
end of Joomla and I hit Refresh,
| | 04:45 | our oil bottle is showing up
behind the current web page, which is
| | 04:49 | absolutely fabulous.
| | 04:51 | And note when I go to say to the About
Page, that oil bottle will follow along.
| | 04:57 | You'll also want to test
your secondary navigation.
| | 05:00 | So if I go to History & Timeline or
People or Our Process, that oil bottle is
| | 05:05 | staying in the same place.
| | Collapse this transcript |
| Styling the left navigation| 00:00 | The next thing I would like to work on is
styling the left navigation for the web site.
| | 00:06 | So if I go over to the About page, we
have some left navigation over here that
| | 00:11 | shows the History & Timeline,
Our People, and Our Process.
| | 00:14 | It's kind of plain looking right now
with a bullet list that we have here.
| | 00:18 | As always, we're going to
start by taking a look at our HTML.
| | 00:22 | So we'll view the source.
| | 00:24 | And I am going to Ctrl+F or Command+F
to bring over my little Find window and I
| | 00:29 | am going to say history.
| | 00:30 | That will take us right on
down to this little bit of menu.
| | 00:35 | So you see that we have
a div with an id of left.
| | 00:38 | We have a div with a class of moduletable_menu.
| | 00:42 | Then we have a ul with a class of menu
and then we have a bulleted list of all
| | 00:48 | kinds of different things.
| | 00:49 | What I want to do is have these
little olives show up next to each of the
| | 00:54 | menu items as a little bullet image instead
of using the default bullets that we've got.
| | 00:59 | What I am going to set this up as is
I am going to turn off all of the bullet
| | 01:05 | styling first and then I am going to
add it back in using the olivebullet as a
| | 01:09 | background image and pushing the
text over so it can display by itself.
| | 01:14 | I'll also style the active
link for the secondary navigation.
| | 01:18 | So now that we have a sense of the HTML,
I am going to go ahead and open up the
| | 01:23 | CSS by going to CSS > Edit CSS
and going to the default tab.
| | 01:30 | If you're wondering why there's
fewer tabs on this page in terms of style sheets,
| | 01:34 | the reason why is
we're not on the Home page anymore.
| | 01:38 | The Home page had simple image gallery
which had a few style sheets associated
| | 01:42 | with it and this page doesn't have
simple image gallery, so those style
| | 01:45 | sheets aren't in use.
| | 01:47 | So I am going to scroll down my CSS to
the left column right here, so most of the
| | 01:57 | way down to the bottom at this point.
| | 01:58 | We're going to put in a comment so I
can find this later, for left column.
| | 02:06 | I have a declaration already which
designs my left column floating it left,
| | 02:11 | giving it a width and some padding.
| | 02:14 | Right after the end of that left I am
going to put in another comment that I am
| | 02:20 | going to use this to style the left menu.
| | 02:21 | We're going to start with #left ul.
| | 02:29 | And my padding will be set to 0.
| | 02:34 | The margin will be set to 0.
| | 02:36 | I am just zeroing out
some of the browser defaults.
| | 02:41 | And I am going to set
my list-style-type to none.
| | 02:47 | So all of my bullets go away
and all the spacing goes away.
| | 02:50 | And yes, that crowds the navigation
right on top of the random image. I see it.
| | 02:55 | We'll fix it.
| | 02:57 | So the next thing I am going to add
is #left ul a:link, #left ul a:visited.
| | 03:11 | This is going to control the
styling of that left navigation overall.
| | 03:15 | So first of all, remember that links
are an inline style element by default.
| | 03:20 | The way I would like to style them is a block.
| | 03:22 | So I am going to say display a block.
| | 03:25 | This will help later when I try to add
some padding around the links so that I
| | 03:30 | can put in the background image behind them.
| | 03:32 | I am going to make the font-weight set to bold.
| | 03:40 | And of course, take away that
underline. So text-decoration, it's none.
| | 03:47 | I am going to give each link some padding.
| | 03:49 | Remember with inline elements you
can't add padding to them except on the
| | 03:53 | left and the right.
| | 03:54 | But you can most definitely add padding
to something once you've converted it to
| | 03:59 | a block level element.
| | 04:00 | So padding will be 15px 0 15px 30px.
| | 04:09 | Remember when you see four values like
this in a row they're the top, right,
| | 04:16 | bottom, and left, in that particular order.
| | 04:19 | Remember that and you'll stay out of trouble.
| | 04:23 | Trouble is the acronym to help you
remember what order those go in. T-R-B-L.
| | 04:28 | Then we're going to go ahead
and put in our background image.
| | 04:31 | So for our background, the url for
this will be ../images/olivebullet.png.
| | 04:43 | no-repeat, left and top.
| | 04:50 | This is the background
decoration I have here as shorthand.
| | 04:53 | I've combined a number of things,
including the URL for the background image,
| | 04:57 | the fact that it won't repeat, and its
location, which is in the left top corner
| | 05:01 | for these navigation items.
| | 05:02 | Of course, you're not going to see a
background image here while I have the
| | 05:07 | Edit CSS window open.
| | 05:09 | We'll have to copy the code into Joomla before
the little olives will show up on the page.
| | 05:15 | Now I am going to add some
styling for the active page.
| | 05:19 | We're actually not going to see it here
on this page either because we're on the
| | 05:23 | top level of the About page.
| | 05:25 | But once we've copied this code into
Joomla We'll double-check it to make sure
| | 05:28 | it's working by taking a look at
one of these sub-navigation items.
| | 05:31 | So I am going to say #left
li.active a:link, #left li.active a:visited.
| | 05:45 | We're going to set our
color to 759b46. All right!
| | 05:53 | So now that we've got that in place,
I am going to do a Ctrl+A or Command+A to
| | 05:57 | highlight all of the code,
Ctrl+C or Command+C to copy it.
| | 06:01 | Close my window, go to the back of
Joomla, go to Extensions > Template Manager.
| | 06:09 | This is one of the new features in Joomla 1.6.
| | 06:11 | Notice how I logged in and it jumped me
right to the Template Manager instead of
| | 06:14 | putting me in the Control panel. Very cool.
| | 06:17 | I am going to go to the Templates tab,
scroll all the way down to the bottom to Details.
| | 06:23 | And I am going to go to Edit CSS, Ctrl+
A or Command+A to highlight everything
| | 06:29 | and Delete. Ctrl+V or Command+
V to paste in our revised CSS.
| | 06:34 | Click Save & Close.
| | 06:37 | We're going to refresh the
front end of the web site.
| | 06:40 | You can see our terrific little
styling here. Isn't that lovely?
| | 06:43 | Our rollovers are working nicely.
| | 06:46 | When I go to the History &
Timeline page, we have a similar color,
| | 06:50 | in fact the same color that, we do for About.
| | 06:53 | So the green for the About is mirrored
here in the green for History & Timeline.
| | 06:58 | So that's terrific.
| | 06:59 | It'll give people a good sense
of where they are in the web site.
| | Collapse this transcript |
| Styling the footer| 00:00 | The next part of the web site I'd like to
style is the footer portion of the web page.
| | 00:05 | And if I scroll on down to the footer here,
we've noticed that we have a few issues.
| | 00:10 | First of all of course, we can't read
our Privacy Policy link down here on
| | 00:15 | the bottom, and of course, we have this
banner ad right underneath of Privacy Policy.
| | 00:20 | Let's go ahead and take a look at the
HTML for this web page by going to View
| | 00:25 | Source, up in our Web Developer toolbar.
| | 00:28 | The footer is going to be down
here near the bottom of the web page.
| | 00:31 | In fact here it is.
| | 00:32 | So we have a div with an id of footer
and followed by a div with a class of
| | 00:37 | moduletable and a ul and an li and
an a. It's a one-item menu so that's
| | 00:45 | what we've got there.
| | 00:46 | That's followed by a div with a class
of moduletable and a div with a class of
| | 00:50 | bannergroup, banneritem,
and then the actual image.
| | 00:54 | And then we close a whole bunch of divs.
| | 00:56 | That's the HTML that we have to work with.
| | 00:58 | I am going to go ahead and style this
up now so that we can actually read our
| | 01:04 | Privacy Policy link.
| | 01:07 | So I am going to go to CSS >
Edit CSS and I am going to go to my
| | 01:11 | default.css style sheet.
| | 01:14 | Scrolling down a little way
somewhere near the bottom here, we have some
| | 01:17 | footer styling by default.
| | 01:19 | I am going to go ahead and put in a
comment that this is the footer area.
| | 01:28 | And I have some default styling for
that footer area already in place, but I am
| | 01:32 | going to add to it in just a minute.
| | 01:34 | The first thing I want to do is get that
link so that I can see it; so I can style it.
| | 01:38 | I am not going to need this
paragraph tag here in the footer.
| | 01:41 | So I am going to get rid of that,
and then I am going to add #footer
| | 01:47 | a:link, #footer a:visited.
| | 01:55 | And the color here will be
fff, white, and my display will be a block.
| | 02:04 | And I am also going to put in some
padding on the top, 10 pixels worth I think.
| | 02:12 | That'll push things down a little bit.
| | 02:13 | So now that I can actually see that
link, I am going to add a little bit more
| | 02:18 | styling directly in the footer tag itself.
| | 02:22 | So let's make the font size a bit smaller.
| | 02:25 | It's kind of big. font-size of 0.75 ems.
| | 02:31 | Let's put in margin on the top of
the footer as well. Maybe 5 ems.
| | 02:41 | That way we get a little bit more
space between the end of the content in the
| | 02:43 | beginning of our footer.
| | 02:46 | And I'd also like to set a
height for my footer as well.
| | 02:51 | Let's make it 120 pixels.
| | 02:53 | Tighten up our space just a little bit.
| | 02:55 | Notice that the banner ad is now popped
out of the footer, but don't panic about
| | 02:59 | that because I still have to
move that around a little bit.
| | 03:02 | Now for that Privacy Policy link I
am going to style the ul a little bit.
| | 03:07 | So #footer ul and this time I am going
to set the padding to 0, margin to 0.
| | 03:20 | And I am going to set the list-style-type to
none because I don't want to see that bullet.
| | 03:27 | And I am going to make
this float to the left. There.
| | 03:35 | Now our banner ad snaps up nicely
right next to Our Privacy Policy link.
| | 03:40 | And I should probably go ahead and
float that banner ad over to the right-hand
| | 03:44 | side so they don't look
like they're connected somehow.
| | 03:47 | Our Privacy Policy is
connected to our Basil Olive Oil.
| | 03:51 | So I am going to add that just
underneath the a:link, a:visited statement here.
| | 03:56 | So #footer div.bannergroup.
| | 04:05 | Let's go ahead and float that to the right.
| | 04:07 | So now we have this nice footer.
| | 04:11 | You can see our banner ad over
in the lower right-hand corner.
| | 04:14 | We have our link to our
Privacy Policy. It looks fabulous.
| | 04:19 | So we'll go ahead and say Ctrl+A to
highlight everything, Ctrl+C to copy it all,
| | 04:24 | or Command+C. We'll jump
to the backend of Joomla.
| | 04:28 | We'll go to Extensions > Template Manager.
| | 04:32 | We're going to go to our Templates tab, scroll
all the way to the bottom to the ttoo template.
| | 04:37 | Click on that.
| | 04:39 | Edit css/default.css. Ctrl or Command+A
to highlight the text and get rid of it
| | 04:46 | with the Delete key and then Ctrl or
Command+V to paste in our new code.
| | 04:52 | Click Save & Close.
| | 04:53 | We'll go back to the front
end of the web site and refresh.
| | 04:58 | And that's so much better.
| | 05:00 | Notice we've got our little Privacy Policy
link up here in the upper left-hand corner.
| | 05:04 | Our nice banner ad is down here on the
right side and the footer looks a zillion
| | 05:09 | times better than it did.
| | Collapse this transcript |
| Styling the news on the home page| 00:00 | I would like to take a closer look at the
styling for the Latest News here in the Home page.
| | 00:05 | So if you scroll down and you take a look at
this, it's not the worst thing in the world.
| | 00:10 | We've got Latest News as our title
and then we've got some smaller titles,
| | 00:14 | which now have a hover state and
everything, with a little bit of introductory
| | 00:18 | text and a Read more link.
| | 00:21 | But the problem is this text is bigger
than the text at the top here and the
| | 00:26 | spacing between these is all very, very
even, so it's hard for my eye to connect
| | 00:31 | the title of one of these Latest News
blurbs with the actual blurb underneath of it.
| | 00:37 | Because the spacing is so simple,
it looks like this a list of six things
| | 00:42 | instead actually a list of three things.
| | 00:45 | So I'm going to work on styling to
see if I can visually tie these things
| | 00:49 | together a little bit more as units,
as actually Latest News releases.
| | 00:54 | As always, we start with viewing the
source for the web page, and I am going to
| | 01:00 | go down to the Latest News
by typing in Latest here.
| | 01:05 | On the left column here, we are div
ID = left, with the div with the class of
| | 01:10 | moduletable, and then we have a random image.
| | 01:14 | Then just after that we have another
div with a class of moduletable and h3
| | 01:19 | with Latest News, followed by div,
class of newsflash, followed by an h4 which
| | 01:25 | is our newsflash-title and there it is, and
then we have our text which is just a paragraph.
| | 01:31 | So given all the handles we've got here,
| | 01:33 | we shouldn't have any issue getting this
to style really well. What I'm going to
| | 01:37 | do is I'm going to use this div with
the class of newsflash right here, and
| | 01:45 | I use that to limit this to the h4 in the
site and to the paragraph, so that's the
| | 01:51 | way I'm going to write my styles.
| | 01:53 | So I'm going to go to CSS > Edit CSS,
and I'm going to go to the default.CSS tab
| | 01:59 | here and I'm going to scroll down to
the left portion of the web page where
| | 02:05 | I've got the left column in the left
menu. Just after that I'll put an comment
| | 02:10 | here for left news formatting on home.
| | 02:19 | Commenting is so important, because if
you have to come back after six months
| | 02:23 | and take a look at this web site,
things can be incredibly difficult.
| | 02:26 | So the commenting really helps to
find your styles in your style sheet.
| | 02:31 | So I'm going to go ahead and create my
class first of left, #left div.newsflash h4.
| | 02:43 | What that's going to include is
first of all, let's adjust the font size.
| | 02:48 | So we're going to make font-size of
0.9em, just a little bit smaller than what
| | 02:54 | we had there already.
| | 02:56 | And I'm going to set the line-height to 1.4em.
| | 03:04 | Just give us a little bit more spacing
internally in that link so that it is
| | 03:08 | just a little bit easier to read.
| | 03:09 | And then I'm going to set the margin
on the bottom to be zero, and you won't
| | 03:17 | actually see anything change until I
also set the margin-top on the paragraph
| | 03:22 | to something much smaller and
then those will tighten up nicely.
| | 03:26 | So now I'm going to go to #left div.
newsflash p. So here what I'm going to do
| | 03:37 | is say the margin-top. If I just said zero then
the text will jam right up against that title.
| | 03:46 | So I'm going to make it just a
little bit more than that. 0.2em
| | 03:50 | just a little bit more space.
| | 03:52 | I'm also going to set my margin on the
bottom to have a lot more space, let's say 3em.
| | 04:01 | That will push all of these articles
apart quite a bit more, see that?
| | 04:06 | Now they definitely looks like that title and the
text are associated, but the text is still too big.
| | 04:11 | So let's make the text a little smaller.
| | 04:15 | Make the font size 0.75ems
| | 04:18 | and that just looks so much better.
| | 04:23 | See how now the left column really
looks like you've got your title and it is
| | 04:27 | associated with the stuff that's
underneath of it, and it looks like you have
| | 04:30 | three things on the page instead of
six. Just a lot better formatting.
| | 04:36 | Okay, now that we've got that in
place, we'll go ahead and say Ctrl+A or
| | 04:39 | Command+A to highlight all of our code,
Ctrl+C or Command+C to copy it, and
| | 04:45 | we're going to go to the backend
of Joomla to Extensions > Template
| | 04:48 | Manager, switch to the Templates tab, scroll
all the way to the bottom to the ttoo template.
| | 04:55 | Click that and we're going to Edit CSS
/default.CSS, Ctrl+A or Command+A to
| | 05:01 | highlight all the code, Delete, Ctrl+V
or Command+V to paste it all back in, hit
| | 05:06 | Save & Close, and we'll refresh the
Home page, and you see how much nicer that's
| | 05:12 | looking already. Much better.
| | Collapse this transcript |
| Styling the right sidebar using a rounded module style| 00:00 | Now that I have my left column looking
good on the Home page, I'd like to make my
| | 00:04 | right column also look good.
| | 00:06 | At the moment things are kind of bland
over here. I mean that it's very, very
| | 00:11 | readable, but the text is perhaps a
little bit big and I think we can pretty
| | 00:16 | that up quite a lot and
really make it attractive.
| | 00:18 | They are testimonials after all.
| | 00:20 | So, I am going to go ahead and edit my
web site and for this particular video,
| | 00:27 | I am going to edit my CSS directly in
the backend of Joomla because I am going
| | 00:31 | to be working with a lot of background
images and it's going to be hard for you
| | 00:34 | to see what's going on if I'm just typing in
the information in the Web Developer Toolbar.
| | 00:39 | So, I am going to enter most of the
information in the backend of Joomla this time around.
| | 00:43 | Right now, if I view the source for
this web page and I scroll on down to the
| | 00:48 | testimonials, what I have right now is
a div for the moduletable, and then have
| | 00:54 | the word Testimonials, and I have a
div with all of the testimonials in it.
| | 00:58 | The problem is I don't really have any
way of assigning the image that I want
| | 01:05 | for the very bottom of my testimonials
to the bottom of the testimonials, given
| | 01:10 | the code that I have here.
| | 01:11 | I need some more divs that I can
work with in order to make this happen.
| | 01:16 | Fortunately, Joomla offers
a very easy way of doing this.
| | 01:19 | If you think back to our jdoc include
| | 01:22 | statements that we included
earlier in this video, we put in a
| | 01:25 | type of XHTML for all of the modules on
our web site, which means that there's
| | 01:31 | a single div wrapped around the content here,
and that's this div class of moduletable.
| | 01:37 | There's another type of module chrome,
so to speak, where we can say style of
| | 01:43 | rounded and in this case, the div class
changes to just module and we will have
| | 01:49 | four divs wrapped around our content.
| | 01:51 | The original purpose for this
was to create rounded corners.
| | 01:54 | We are going to use it because we need
more divs to do what we need to do to get
| | 01:58 | this treatment to work.
| | 02:00 | To do that, I am going to jump into
the backend of Joomla. I am going to go to
| | 02:03 | Extension > Template Manager.
| | 02:05 | I am going to go to my Templates tab,
scroll all the way to the bottom, click on
| | 02:10 | ttoo details, and then I'm going to
click on Edit the main page template.
| | 02:16 | Here in my code for this document,
| | 02:19 | you can see that we have a div with
an id of right and our style is xhtml.
| | 02:26 | I am going to change that to rounded and say
Save & Close and then refresh my page again.
| | 02:33 | The look of the page hasn't changed at
all, but the code has. When I view the
| | 02:36 | source for the web page and I scroll on down,
| | 02:41 | now we have our div with an id of right,
| | 02:44 | Our div with a class of module div, div,
div, then we have our Testimonials,
| | 02:50 | then our div with a class of custom
with all the text in it, and then a whole
| | 02:54 | bunch of closing divs.
| | 02:57 | Now, we have enough divs to work with
so that we can make this treatment work.
| | 03:01 | So, as I said, I am going to start my
editing in the backend of Joomla. I am
| | 03:07 | going to go back to my style sheets, Edit
css/default.css, and I am going to scroll
| | 03:13 | down to my right declaration here.
| | 03:16 | This is just my general
styling for the right column.
| | 03:18 | I am going to put a comment on top of
that that says right column, and then
| | 03:26 | after my right style here, I am
going to put in another comment that says
| | 03:34 | Home page testimonials.
| | 03:40 | And I am going to put in my very
first style, which is #right div.module.
| | 03:48 | First of all, I am going to
reduce my font size to 0.75ems.
| | 03:57 | I am going to add some
padding to the top of 45 pixels.
| | 04:03 | That will give us some room for the
background image and then I am going to
| | 04:07 | specify the background image itself.
background of images/boxtop.png,
| | 04:18 | no-repeat center top.
| | 04:25 | I will go ahead and close my style.
| | 04:30 | I am going to hit the Save button so
that I save my work but stay here in my
| | 04:34 | editing window, and refresh the Home page.
| | 04:38 | So you can see what's happened.
| | 04:39 | I reduced the size of my text overall,
which also reduced the size of the word
| | 04:44 | Testimonials, and I included a
background image here in the column.
| | 04:48 | Note that there's not one on the bottom yet.
| | 04:50 | Okay, back into the backend of Joomla
and just I am going to add a second style.
| | 04:57 | This one is going to be #right div.module div.
| | 05:03 | What I intend this to be for
is the second div. Remember,
| | 05:07 | we have div with a class of module, and
then div, div, div immediately after that.
| | 05:12 | So, I want this to be on the second
div and I am going to assign this a
| | 05:18 | background with the URL of, ../images/
boxbottom.png, no-repeat center bottom.
| | 05:38 | And also add some padding to this of 82px.
| | 05:47 | I am going to go ahead and save that.
| | 05:50 | Refresh the Home page and scroll down
to the bottom, and lo and behold, we
| | 05:57 | have four bottom images.
| | 06:01 | That's a few more than we were expecting,
but if you take a look at my selector,
| | 06:11 | div.module div, that could apply to many
different divs in my HTML and that's why
| | 06:17 | we have box bottom showing in all those places.
| | 06:20 | So, now we need to get rid of that.
| | 06:22 | So, we will just write
another style to override that.
| | 06:26 | So, #right div.module div div
and #right div.module div div div.
| | 06:37 | So, by doing this, I wanted this to
display just on the second div, now we are
| | 06:44 | going to override that image on
the third and the fourth level divs.
| | 06:48 | So to do that, we are going
to say background-image: none.
| | 06:55 | We are also going to set the padding
to 0, because otherwise these 82 pixels
| | 07:03 | will stack on top of each other several
times in the bottom of the div as well.
| | 07:07 | We will go ahead and say Save and
I am going to refresh the Home page.
| | 07:12 | Whew, we are down to a single image.
| | 07:17 | Now, what I'd like to do is connect
these two images visually by filling in the
| | 07:22 | in between area here with the
same green that's right here.
| | 07:26 | And if you wonder what the color codes
for these things are, this is where color
| | 07:29 | ColorZilla comes in handy.
| | 07:31 | See ColorZilla over here in the corner
of our page? If I want to pickup that
| | 07:35 | green, all I have to do is click on it
and ColorZilla tells me right here that
| | 07:39 | it's B9C6AA. A very handy tool.
| | 07:43 | All right, back to the backend of Joomla.
I am going to scroll on down to where I
| | 07:49 | was working and we are
going to add another style.
| | 07:52 | This one is #right div.module div div
div div.custom. So, we just keep going
| | 08:05 | deeper and deeper into our nested divs.
| | 08:06 | I am going to set my background color
to be 9C6AA and I am going to set my
| | 08:18 | padding to 0 pixels on the top and
bottom and 5 pixels on the left and right,
| | 08:24 | because I don't want my color
and my words riding right up the
| | 08:29 | edge of the color block.
| | 08:30 | Go ahead and save that.
| | 08:33 | Refresh the Home page and we have a
lovely green block all in place here.
| | 08:40 | Unfortunately we also have a little
bit of a gap here between the color block
| | 08:45 | and the images on the top
and the bottom of the page.
| | 08:47 | Well, this one up here on the
top is definitely caused by fact
| | 08:51 | this is an h3 tag that causes this and
the h3 has by default associated with it
| | 08:58 | some margin on the top and the
bottom, but the word Testimonials isn't
| | 09:03 | looking good anyway.
| | 09:04 | So, I am going to go ahead and style
that just to make it prettier and try
| | 09:09 | to close up that gap.
| | 09:10 | So, I am going to add another style,
which will be #right div.module h3.
| | 09:18 | That's our Testimonials header and I'm
going to put in a padding of 0, because
| | 09:26 | some browsers think this is padding
instead of margin, and a margin of 0 on the
| | 09:33 | top, 0 on the right, 15 pixels
on the bottom, and 0 on the left.
| | 09:39 | I'm going to align the text
to the center using text-align.
| | 09:46 | I am going to set the font size just a
little bit bigger, font size of 1.4ems,
| | 09:55 | and I am going to make it bold.
| | 10:02 | You of course can play around with
some of these parameters if you wish.
| | 10:05 | We will go ahead and say Save and we
will refresh the page and lo and behold the
| | 10:12 | word Testimonials is now nicely
centered and that gap up here at the top is gone,
| | 10:16 | but we still have a bit
of a gap down here at the bottom.
| | 10:19 | That gap is caused by the paragraph tag,
which also has a little bit of margin
| | 10:25 | on the top and the bottom.
| | 10:27 | So, I need to get rid of that margin
over here at the bottom of my text and that
| | 10:34 | should close that gap up really nicely.
| | 10:36 | So one final style I am going to go
ahead and add that right here, #right
| | 10:45 | div.module p. And this one will be
a padding of 0 and a margin of 0.
| | 10:58 | One final save, one final refresh and
that little gap has gone away, and boy!
| | 11:05 | Isn't that right column
looking just absolutely terrific?
| | Collapse this transcript |
| Using module suffixes| 00:00 | Our client has asked us to include a link to
the RSS feed for the News page on this web site.
| | 00:07 | So, now what we need to do is we need to
set up a module to display the RSS feed
| | 00:12 | for this page, which is simple enough to do.
| | 00:15 | We are going to jump into the backend of
Joomla and we are going to add a module
| | 00:19 | via Extensions > Module Manager and I
am going to make a new module by clicking
| | 00:24 | the New button and I'm going to
add Syndication Feeds right here.
| | 00:30 | And I am going to put in my
title, Subscribe to our RSS Feed!
| | 00:36 | I am going to have this show
on the right side of the page.
| | 00:41 | I've selected the ttoo template from
my list, so I've reduced the number of
| | 00:45 | positions I have to choose from.
| | 00:47 | Then I am going to pick the Right position.
| | 00:50 | And I'm going to scroll down to the bottom here.
| | 00:53 | I only want this to show up on the
selected page, which is just the News page.
| | 00:59 | This is the only place I
want this RSS Feed to show.
| | 01:01 | So I am going to go ahead and say Save
& Close and here on my News page, I am
| | 01:07 | going to go ahead and refresh. And there we go.
| | 01:10 | We have got our RSS Feed
here on the News page. Boy,
| | 01:15 | does that look tacky. Horrible!
| | 01:18 | Why is it look this way?
| | 01:19 | Well, remember that we did all of the
styling on the Home page of the web site
| | 01:24 | and the styling that we put in place
applies to every single item in the right
| | 01:29 | column on this web site.
| | 01:31 | So, how can we make the Home page styling here
the exception rather than the rule for styling?
| | 01:41 | It's relatively straightforward to do
and it requires something called module suffixes,
| | 01:46 | which are located inside of
every single module here on the web site.
| | 01:52 | So, I am going to go into my
Testimonials module and under my Advanced Options,
| | 01:59 | you'll notice that we have this
option to make a Module Class Suffix.
| | 02:05 | You probably remember
suffixes from grade school.
| | 02:07 | They are just a little bit of a word
that are put on the end of another word to
| | 02:12 | change its meaning somehow.
| | 02:14 | So, our class on our module is module.
| | 02:18 | Remember, div class=module
div, div, div for the right side of the page.
| | 02:25 | What we are going to do is we are
going to add a suffix specific to the
| | 02:29 | Testimonials and that will make this all
the styling that we've put in, with some
| | 02:34 | tweaking to the CSS, show
up just on the Home page.
| | 02:38 | And then on the right column on all
the other pages of the web site, at this
| | 02:43 | point there's no styling at all.
| | 02:45 | So, I am going to go ahead and
enter my module class suffix of home.
| | 02:50 | Now, when I put this in, the word
module as in div class=module becomes
| | 02:58 | modulehome, all one word.
| | 03:01 | I could also put a space in front of
the word home and then I could have a div
| | 03:07 | with a class of module home.
| | 03:11 | In other words, I now have two
classes that I could work with.
| | 03:15 | So, some of my styles might carry over
to other aspects of the right column.
| | 03:19 | I am going to go ahead and leave the
space here and I am going to say Save &
| | 03:26 | Close and when I refresh the Home page,
nothing will have changed yet except for
| | 03:33 | this little thing behind the scenes.
| | 03:36 | When I scroll on down to my testimonials,
you'll see here because I started my
| | 03:42 | module suffix with a space,
| | 03:44 | I have module as one class
and home as the second class.
| | 03:48 | Now, I can style these individually.
| | 03:50 | So, I am going to go ahead
and carry this into my code.
| | 03:54 | Right now, because the change that I
have made here, I have two classes to work
| | 03:59 | with, module and home.
My News page still hasn't changed.
| | 04:02 | See, it's still kind of tacky looking.
| | 04:05 | So, I am going to jump into
the backend of my web site.
| | 04:07 | I am going to go to
Extensions > Template Manager.
| | 04:10 | I am going to go to my Templates page,
scroll all the way to the bottom, click
| | 04:15 | on ttoo Details, then I am going to
Edit css/default.css, and I am going to
| | 04:22 | scroll down to my testimonials.
| | 04:26 | And instead of saying right div.
module, I am going to change this to
| | 04:29 | right div.home, div.home.
| | 04:38 | div.module becomes div.home.
| | 04:42 | I am going to do this all the way
through the code that I have here.
| | 04:45 | So, all I have done is change the word
module to the word home in my CSS and
| | 04:54 | when I save by clicking the Save button
here and I refresh the page, over here
| | 05:00 | on my News page, it now just says
Subscribe to our RSS Feed with our link with
| | 05:05 | no styling and when I go to my
Home page, all of my styling is intact.
| | 05:11 | However, it does look like we've got
some incredible shrinking text going on.
| | 05:15 | See how the text is shrunk
here inside of our Testimonials box?
| | 05:21 | Let's take a look back at our CSS
and see if we can find that problem.
| | 05:28 | Up here at the top of the page where it
says #right div.home, we are taking this
| | 05:33 | styling where we have our font size of
0.75ems and we are applying it twice, and
| | 05:41 | I'll show you exactly where that happens.
| | 05:43 | If we view the source for this web
page and then scroll on down to the
| | 05:48 | Testimonials, we have a div with the
class of module and a class of home.
| | 05:53 | We also have a div with a class
of custom and a class of home.
| | 05:57 | So, in our style, in our CSS here, what
we are doing is we are applying 0.75 ems
| | 06:06 | first to one of the divs, and then we
are applying 0.75 ems of 0.75 ems a second
| | 06:12 | time, which makes our text way too small.
| | 06:16 | So, I'm going to take this font-size
from here and I am going to move it down
| | 06:24 | to where we actually have our text appear,
down here under div.custom and when
| | 06:31 | I click Save now and refresh the
Home page, our text is the correct size, our h3
| | 06:39 | is a little bit big, so we have opened
up our space here again, but our bottom
| | 06:43 | is still looking good.
| | 06:44 | So, we need one more tweak for our size of
our h3 and that little box should go away.
| | 06:51 | I am going to go ahead and I am going
to reduce my font-size here from 1.4ems
| | 06:56 | to let's say just 1em.
| | 07:02 | And when I refresh the page
that little break there is gone.
| | 07:06 | The word Testimonials looks good again.
| | 07:09 | Let's check the News page and the
News page is completely un-styled.
| | 07:15 | So, at this point, we could go ahead
and apply some different styling to that
| | 07:20 | portion of our News page if we wish by
adding whatever kind of styling we want.
| | Collapse this transcript |
| Styling a multipage article| 00:00 | I am taking a look at the History &
Timeline page of the web site, which is in
| | 00:04 | the About portion of the site.
| | 00:07 | This is the multi-page article.
| | 00:09 | One of the great things when we
entered this article back in the Essential
| | 00:12 | Training course was that
we had our little text blurb.
| | 00:17 | This is all actually one article.
| | 00:19 | I can say All Pages, and this will show me the
full text of the entire article. There it is.
| | 00:25 | What we did though was we split it up
into shorter articles over several pages.
| | 00:30 | So we have a little bit of blurb here for
1908, another blurb for 1910, and so forth.
| | 00:36 | However, the styling of this page
leaves more than a little bit to be desired.
| | 00:41 | Let's go ahead and work on styling this.
| | 00:44 | So let's get started by viewing the
source of the web page as we always do.
| | 00:50 | I'm going to scroll down to where it
says History, and it may take us a few
| | 01:00 | clicks to get there.
| | 01:04 | So here is the main text of the web page,
and so we've got a div around the whole
| | 01:09 | thing, an h2 for the
History & Timeline title here.
| | 01:13 | Then we have a div with an id of
article-index, and then inside of that we
| | 01:18 | have a bulleted list.
| | 01:19 | Here is the bulleted list with links
going through all the way and down.
| | 01:25 | Then at the end of that we have a
div with a class of the pagenavcounter.
| | 01:30 | That's that Page 3 of 8 in this particular case.
| | 01:33 | I think that's ugly and I'd like
it to go away. We have our text.
| | 01:40 | Then we have some buttons down here for
Previous and Next that are currently not styled.
| | 01:45 | I'd like them to go away too.
| | 01:47 | Fortunately, they're wrapped in
a div with a class of pagination.
| | 01:50 | That's a lot of stuff.
| | 01:52 | Let's go ahead and get started.
| | 01:54 | We're going to go to CSS > Edit CSS.
| | 01:58 | Then under our default.css tab, I'm going to
scroll most of the way down to the bottom here.
| | 02:03 | I have a style here for mainContent,
and just after that I'm going to add my
| | 02:07 | styles for this long article.
| | 02:10 | So I'm going to put in a comment.
| | 02:11 | This is the long article with page breaks.
| | 02:19 | So the first thing I'm going to do is
I'm going to put in a div#article-index,
| | 02:28 | because article-index was an id, not a
class, so it starts with a pound sign.
| | 02:32 | So I'm going to say my margin on the
left as let's say 2 ems, which will
| | 02:41 | move things over a bit.
| | 02:42 | Let's set our width to 200
pixels and we'll give this a nice
| | 02:49 | background color, maybe that b9c6aa,
a lovely little green box there, and I'm
| | 03:00 | going to float it to the right.
| | 03:05 | By doing that, then we have our little
sub-navigations sort of floated to the
| | 03:10 | right side of the page, and on the
left side of the page we actually have our
| | 03:13 | text of our article.
| | 03:14 | So that alone is an improvement.
| | 03:16 | But I think we can do a
little bit more with things here.
| | 03:20 | The next thing I am going to do is let's get
rid of that pagenavcounter and the pagination.
| | 03:26 | So let's put those in.
div.pagenavcounter, display: none.
| | 03:36 | Always a handy thing.
| | 03:37 | In fact, we're going to now take
that same treatment and do it for both
| | 03:42 | pagenavcounter and for div.pagination.
| | 03:48 | Boom, all gone! Oh, so much better already.
| | 03:53 | Then what I want to do is, although
this is looking pretty good, we have a
| | 03:56 | nice little green box and
we have our nice bullets,
| | 03:59 | I'd like to echo the olives that we
have over here, which would be showing if I
| | 04:03 | didn't have my editor opened.
| | 04:05 | The little olives next to each of these
sub-navigation items, I'd like to have
| | 04:08 | little olives over here on the side too.
| | 04:11 | So let's go ahead and add those.
| | 04:13 | div#article-index ul.
| | 04:19 | First of all, of course we have
to get rid of the bullets we have.
| | 04:23 | So we're going to say a list-style-type
of none and we'll set our padding to 0
| | 04:32 | and we'll set our margin to 0. Awesome!
| | 04:38 | Then we'll add in some
styles right just after that.
| | 04:43 | div#article-index a:link, comma,
div#article-index a:visited.
| | 04:59 | Go ahead and style these links.
| | 05:05 | So what we'll do is first of all is
to display them as a block and we're
| | 05:16 | going to make them bold,
| | 05:18 | font-weight of bold, and of course,
we're going to take away those unsightly underlines.
| | 05:25 | text-declaration of none.
| | 05:32 | We'll add some padding because
they are pushed awful close together.
| | 05:36 | padding of 4 pixels, 0, 4 pixels, 30 pixels.
| | 05:44 | So we're going to have a big
gap over there on the left.
| | 05:46 | That's where our little olives will
be, and less so on the other sides.
| | 05:51 | Then we'll add our background image.
| | 05:55 | background url ../images/olivebulletgreen.
png no-repeat left bottom. Oops, left top.
| | 06:16 | Now we have our style set up for this page.
| | 06:19 | Take out a little bit of extra space
here and then we'll go ahead and say Ctrl
| | 06:23 | or Command+A, Ctrl or Command+C,
to select all the text and copy it.
| | 06:29 | We'll go to the backend of Joomla.
Go to Extensions > Template Manager.
| | 06:34 | We're going to go to the Templates tab, scroll
all the way to the bottom, go to ttoo Details.
| | 06:40 | We're going to edit the CSS page,
and then I'm going to do a Ctrl+A or
| | 06:45 | Command+A to highlight everything, and
delete, Ctrl or Command+V to Paste in our
| | 06:51 | new code, and I'm going to hit the Save button.
| | 06:55 | Let's go ahead and refresh our page,
and this is looking much better, but I've
| | 07:01 | cut off all of the olives.
| | 07:02 | I think we need a little more space there.
| | 07:04 | So I am going to scroll down to that
style and instead of 4 pixels in each place,
| | 07:10 | let's put in 10.
| | 07:12 | See if that improves things.
| | 07:14 | I'll hit Save one more time and refresh. There.
| | 07:19 | That looks pretty good.
| | 07:20 | We've got a little olive bullet next to
each one of our dates and when I click
| | 07:25 | on these dates, I load another page
with another little blob of text here and
| | 07:30 | that's looking quite good.
| | 07:32 | So I'm pretty pleased with that.
| | Collapse this transcript |
| Styling a category list| 00:00 | I am on the Our Process page of
the About section of our web site.
| | 00:05 | And as you might recall from the Joomla!
1.6 Essential Training course, this page
| | 00:10 | is a category list layout.
| | 00:12 | What we have is the Our Process label
here along with the description that went
| | 00:17 | with the Our Process category.
| | 00:20 | And then underneath we have a list of
all of the articles that are assigned in
| | 00:23 | this category on the web site.
| | 00:26 | Now normally by default, list
layouts include a display dropdown.
| | 00:31 | They include a header,
authors, hits, all this stuff.
| | 00:35 | We turned it all off in the Essential
Training course so that all we have left
| | 00:38 | are the titles of these articles.
| | 00:41 | So what I'd like to do I'd like to
style the titles of these articles.
| | 00:45 | Everywhere else in the web site we've
got these little olive bullets next to
| | 00:49 | some of our navigation.
| | 00:50 | And I'd like to mirror that same look
down here on the bottom next to the
| | 00:55 | titles of these particular articles.
| | 00:58 | So as always we're going to start by
viewing the source of our web page and I am
| | 01:02 | going to do a Ctrl or Command+F and
say growing to scroll down to the correct
| | 01:09 | portion of our code here.
| | 01:11 | And what you'll see is we have a
div with a class of category-list.
| | 01:17 | This div goes all the way around the area.
| | 01:20 | We have an h2 with the Our Process label on it.
| | 01:23 | Then we have our div with a class of
category description. There it is.
| | 01:28 | And then we have the form
here, it has to do with.
| | 01:32 | If I had left the headings on, you
could click on the titles at the top of the list,
| | 01:38 | which contain the article title,
the author, and the hits, and you could
| | 01:43 | re-sort the list of articles using those.
| | 01:46 | And that's why there is a form tag
thrown in here, to make those things clickable
| | 01:49 | and to make them re-sort.
| | 01:51 | Then we have a table here and of
course this is tabular data, which is why
| | 01:56 | we're using a table.
| | 01:58 | Because this is supposed to be a
chart of information. We've just
| | 02:01 | turned everything off.
| | 02:03 | So our table with a class of category.
After that we have some tds, each with
| | 02:08 | our name of our article, surrounded by
a link, and that's the way the rest of
| | 02:14 | the table is laid out here.
| | 02:15 | So we're going to work with that HTML
and I am going to go to my CSS > Edit CSS.
| | 02:22 | I am going to go to default.css and
scroll all the way down to just below where
| | 02:29 | we were just editing for the long page,
| | 02:32 | the long article on the page.
| | 02:35 | And I am going to create a style and
I am going to preface that with a comment,
| | 02:39 | saying this is the category list layout.
| | 02:45 | So this is div.category-list table.category a: link,
| | 02:55 | div.category-list
table.category a:visited.
| | 03:11 | And I am going to go ahead and
display our links in a block again.
| | 03:15 | I am going to set my text-decoration
to none, to get rid of those nice little
| | 03:26 | underlines underneath.
| | 03:27 | I am going to go ahead and make these bold.
| | 03:35 | And I am going to set some
padding. 10px 0 10px 30px.
| | 03:44 | And then finally I am going to put in
my background image. Set background
| | 03:50 | with a url of ../images/
olivebullet.png, no-repeat left top.
| | 04:04 | So this style should work just fine.
| | 04:07 | And you see that we have our links
spelled out down here at the bottom.
| | 04:11 | We should see the little bullet after
them once I copy this code into Joomla
| | 04:15 | and close this window.
| | 04:16 | So Ctrl or Command+A to select all
of the text, Ctrl or Command+C to copy it,
| | 04:22 | close the window, hop back to the
backend of Joomla. We go to Extensions
| | 04:27 | > Template Manager.
| | 04:29 | We switch to our Templates tab,
scroll all the way down to the bottom to
| | 04:33 | ttoo Details, edit css/default.css,
Ctrl or Command+A to highlight
| | 04:40 | everything, and delete.
| | 04:42 | And then Ctrl or Command+V to paste in
our new code and we're going to hit Save
| | 04:47 | & Close and we're going to refresh our page.
| | 04:50 | And now we have a nice list of
navigation down here at the bottom that matches
| | 04:55 | other navigation on our page.
| | 04:57 | And I can flip through
these articles very easily.
| | 05:00 | I could go to Picking.
| | 05:02 | That's listed there very nicely for me.
| | 05:05 | I can go to Tasting, and
that's listed on the page as well.
| | 05:09 | So we've styled our category
list and things are looking good.
| | Collapse this transcript |
| Styling a category blog| 00:00 | Now that we have our category list
style, I'd like to go ahead and style
| | 00:04 | the news on this page.
| | 00:06 | This is done through a category blog.
| | 00:09 | And in our category blog there is
actually a title for the whole page here,
| | 00:13 | this News, then we have individual titles
for each of the articles and we have a
| | 00:19 | little bit of text describing that
article, and then we have a Read more link.
| | 00:22 | And when you click on the Read more link,
you go to a page with the full article on it.
| | 00:26 | Once again, we've the same problem
here that we had with the Home page in that
| | 00:32 | the news looks kind of distributed.
| | 00:34 | And what we want is for the title, the
little blurb and the Read more to be
| | 00:39 | nice and tight together, that they
clearly go together, and maybe with a little
| | 00:43 | bit more space between these.
| | 00:44 | These should look like three items on
the page, instead of like sort of nine or
| | 00:49 | something right now.
| | 00:51 | So in order to style this, we're going
to start by going to viewing our source,
| | 00:57 | and we're going to scrolling
down the page to the main content.
| | 01:01 | This particular area of content starts
with a div class of blog followed by an
| | 01:06 | h2 with a span class of subheading
-category around it called News.
| | 01:12 | And then we have h2s without classes on
them that correspond to Two Trees Olive
| | 01:19 | Oil Builds New Production Facilities.
| | 01:20 | That's the title for the article.
| | 01:22 | Then we have a paragraph of information,
and then we have another paragraph with
| | 01:28 | our Read more link it.
| | 01:30 | So I'm going to go ahead and write
some styles here based on that HTML.
| | 01:34 | I want to go to CSS > Edit CSS. I'm going
to go to my default CSS and scroll on down
| | 01:40 | to the bottom here and just after where
I put my category list layout, I'm going
| | 01:45 | to put in a comment and say,
this is the category blog layout.
| | 01:50 | So I'm going to start by putting in
a div.blog h2 and I am going to set
| | 02:01 | the margin-bottom to 0.
| | 02:06 | And when I combine them with my next
style, which is div.blog p, and I set the
| | 02:15 | margin-top here to 0.3ems, we're going
to tighten up the text here in between
| | 02:23 | those, which is terrific.
| | 02:26 | However, my h2 here is really, really
honking big, related to that News there on
| | 02:32 | the top and I really need
to reduce the size of that.
| | 02:34 | So let me make this font-size of
maybe 1.1ems and that looks like a more
| | 02:42 | reasonable size for the text, but
my news item here now also got small.
| | 02:47 | If I refer back to my HTML, the div
class blog goes around everything here.
| | 02:53 | So my h2 for News also takes on
the style that I wrote every here.
| | 02:58 | So I'm going to write another style
for h2 subheading-category and make this
| | 03:02 | word News quite a bit bigger
than the other h2s on the page.
| | 03:06 | So I want to say div.blog h2
span.subheading-category, and let's just start by
| | 03:19 | saying font-size of 2ems.
| | 03:23 | That's a little bit big.
Scale that back maybe 1.5. There.
| | 03:31 | That's about the size it was before.
| | 03:33 | So now we have our news here, nice
and big on the page. We have our titles.
| | 03:38 | They're a little bit smaller.
| | 03:40 | Our Read mores are still sort
of hanging out in space here.
| | 03:43 | And so I'm going to go ahead and
modify things a little bit more.
| | 03:48 | I think I want to make text in my
paragraphs here just a smidge smaller.
| | 03:52 | So let's try font-size of 0.95 ems
or even 0.9, just a little smaller.
| | 04:02 | That's also affected my Read more link
there, if you take a look, because of
| | 04:05 | course the Read mores are
in their own paragraphs.
| | 04:08 | So then I'm going to say div.blog
p.readmore, because the Read more has a class
| | 04:15 | associated with it, and I'm going
to set the padding-bottom to 2.5 ems.
| | 04:22 | That will give us a nice big gap
between each one of the articles.
| | 04:29 | And I'm also going to set the margin
on this specific paragraph tag to 0.
| | 04:36 | Notice that we still have quite a gap
between the text here on the page for the
| | 04:42 | article and the Read more link.
| | 04:45 | So what I'm going to do here from in
my div.blog p, I'm going to add margin of
| | 04:52 | 0 and then my margin-top
of 0.3 ems will override that.
| | 05:00 | Down for my p.readmore, I also have 0.
| | 05:04 | So now what we have is a nice smaller
title for our article in the Georgia font.
| | 05:10 | We have a little bit of text describing
it and then we have our Read more link.
| | 05:14 | And it's pretty clear that we have
three articles here on the page and it's
| | 05:18 | clear what goes with what.
So this is looking so much better.
| | 05:22 | Let's go ahead and save this by
clicking inside of our editor backs. We're going
| | 05:28 | to say Ctrl+A to highlight everything
and Ctrl+C or Command+C to copy it.
| | 05:34 | We're going to go to the backend of
Joomla to Extensions > Template Manager.
| | 05:39 | We're going to go to the Templates tab,
scroll all the way to the bottom, click
| | 05:43 | on ttoo Details, click on Edit css/
default.css, Ctrl+A or Command+A to highlight
| | 05:50 | everything, and Delete.
| | 05:51 | Ctrl+V or Command+V to paste it all in,
say Save & Close, and now when I refresh
| | 05:57 | the News page, News is still looking good.
| | 05:59 | We have three clear articles and this
formatting will also apply to our Photo of the Day.
| | 06:05 | Although we probably need to do a
little bit more formatting here since we have
| | 06:09 | details here at the top.
And it will also apply to our video.
| | 06:15 | So, all of these pages are
coming along very, very nicely.
| | Collapse this transcript |
| Styling a photo blog| 00:00 | As we saw in the last video, we
styled the news and that's looking pretty good,
| | 00:05 | but we also have a photo blog,
but we've different parts of information
| | 00:09 | showing on this page, such as the
created date and who wrote that particular
| | 00:14 | photo blog for the day.
| | 00:16 | The styling for this blog is a little
bit different so we're going to need
| | 00:19 | to go through and modify the CSS that
we just wrote to make sure that it works
| | 00:23 | with this page as well.
| | 00:25 | So I'm going to go ahead and start by
taking a look at the source for this web page.
| | 00:28 | I'm going scroll at down. So here we
start with our div with a class of blog,
| | 00:35 | then we have our h2 with the photos,
and then we have our div with a class of
| | 00:42 | category description, but there is
no category description here so that
| | 00:46 | just closes, and then we have our first
entry here at h2 with our "We picked
| | 00:52 | our first olives today."
| | 00:55 | After that we have a tag you may not be
familiar with, because a lot of people
| | 00:59 | haven't used it extensively.
| | 01:01 | This is called the definition list,
so you see the DL which is the start of
| | 01:06 | the definition list.
| | 01:07 | We have a DT which stands for definition term.
| | 01:10 | So in another words, the word details,
and then we have DD. In other words
| | 01:15 | that's the definition.
| | 01:17 | So we show that it is created on Tuesday
and it's created by Samantha Iodice, so
| | 01:24 | we have those in place, and then we have
our paragraph underneath with our blah, blah,
| | 01:29 | and we have a picture, and then we
have a span here with a class of row
| | 01:34 | separator, which could be helpful in
putting a little bit of extra space in
| | 01:39 | between each of our blog entries.
| | 01:41 | So now that you have seen
the HTML, let's style the CSS.
| | 01:44 | We're going to go to CSS > Edit CSS and
I'm going to go to my default.css page,
| | 01:51 | scroll on down to where I was just
editing the category blog layout right here,
| | 01:56 | and after that I'm going to
put another comment saying
| | 02:00 | this is for the photo blog additions,
because of course the category blog
| | 02:06 | layout styles also apply to
the page we're looking at now.
| | 02:12 | So I'm going to start by saying
div.blog dt, the definition term, the word details.
| | 02:18 | I actually don't want that to
display at all. So I'm going to say display none.
| | 02:25 | Bye, bye details.
| | 02:27 | Now I'm going to style that style that dd,
so div.blog dd. I'm going to give it a
| | 02:35 | margin of zero and some padding on
the bottom, maybe 0.2 em, just to give a
| | 02:45 | little bit more separation
between each one of those items.
| | 02:48 | We will make the font size little
smaller, 0.85em, and I am also going to make
| | 02:57 | it italic, font-style: italic, just to set it
off from the rest of the text a little bit more.
| | 03:07 | And I think I'm going to make
that font just a smidge smaller.
| | 03:09 | Let's make it 0.75 ems.
| | 03:12 | Now we have our entries here on this
page, we have our title, we have a little
| | 03:16 | bit detail, and then we've our blah,
blah and our picture, and things are sort
| | 03:21 | of crammed into each other. We also
have a little bit extra space here, but if
| | 03:26 | I tighten up the space that's
associated here I may very well wind up
| | 03:30 | changing the news page.
| | 03:32 | What I really need is I need a way
of making my photo blog styling very
| | 03:39 | different than my news page styling.
| | 03:41 | This is something called a layout override and
I'm going to be covering it in a later video.
| | 03:46 | It's a brand-new feature in Joomla 1.6
and it's great because we could have the
| | 03:51 | same blog layouts. So we can have
two of these blog layouts or more look
| | 03:56 | completely different.
| | 03:57 | So I'm just going to add one more
thing down here in the space in between
| | 04:02 | each of these articles.
| | 04:04 | Let's go ahead and add another style
and this one will be div.blog span.row-separator.
| | 04:21 | And here I'm going to say
display of block and a margin of 80 pixels.
| | 04:31 | That'll give us a nice fat space in
between each one of these entries just like
| | 04:36 | that. It looks much better.
| | 04:38 | All right, so it's not perfect and
we're going come back to it, so I'm going to
| | 04:44 | go ahead and say Ctrl+A or Command+A
to highlight all of my CSS. Ctrl+C or
| | 04:49 | Command+C to copy it.
| | 04:52 | I'm going to go to the back end of
Joomla. Extensions > Template Manager.
| | 04:55 | Let's go to the Templates tab, scroll
all the way to the bottom, click on the
| | 05:00 | Details, click on Edit CSS, Ctrl+A or
Command+A to highlight what's here, and
| | 05:06 | click Delete, Ctrl+V or Command+V to
paste in our new code, hit Save & Close, and
| | 05:12 | then let's refresh the blog of the day.
| | 05:15 | So it's looking better, but I think
that we could improve the look of this page
| | 05:19 | quite a bit more and we will
be doing that in a later video.
| | Collapse this transcript |
| Styling webs links| 00:00 | The next thing I'd like to clean up
on this web site is our web links page.
| | 00:05 | As you can see here, we have the
word Links is kind of honking big.
| | 00:09 | I am not sure why that's going on.
| | 00:12 | Underneath that we also have
this silly little globe icon.
| | 00:16 | What I would like to do is set this up
such that I've got the Olive button that
| | 00:22 | I've been using on other pages of
this web site for lists of links.
| | 00:26 | I like to carry that over here
into this set of links as well.
| | 00:30 | So I am going to need to go
ahead and put that in place also.
| | 00:33 | Probably I also need to tighten
up the link spacing a little bit.
| | 00:37 | So let's take a look at the HTML for
this web page and if we scroll on down to
| | 00:44 | the web links area we start with a div
with a class of weblink-category, and then
| | 00:50 | well, we've got an h1 here for Links
instead of the h2 that we've had on other
| | 00:53 | pages, which is why it's a little large.
| | 00:55 | So we're going to need to reduce that size.
| | 00:58 | Then we have a category-description
and we've got this paragraph line of code
| | 01:04 | here that's showing up.
| | 01:06 | That's because we've set our description to
show on this web page rather than not show.
| | 01:12 | So by default it looks like Joomla
is putting in a paragraph, not very
| | 01:17 | helpfully and that's what's responsible
for this great big honking space here.
| | 01:21 | So we need to turn that off.
| | 01:23 | Notice as we scroll down a little
further, we have the image in each one of
| | 01:28 | these cells and the image is this
web link icon here and maybe we can hide that.
| | 01:36 | Then we can style the link such that we
have our olive icon next to each one of
| | 01:42 | these links instead of that globe.
| | 01:44 | So to go ahead and get started with
this I am going to jump into the backend of
| | 01:48 | Joomla and I am going to go to
Components > Weblinks, and I am going to go to my
| | 01:55 | Options up here in the upper right-hand corner.
| | 01:58 | When I go to the Category option you see
that the Category Title is set to Hide,
| | 02:03 | but Category Description is set to Show.
| | 02:06 | If I set that to Hide as well and
then I refresh the page, that gets rid of
| | 02:13 | that big space that was here to start with.
| | 02:16 | So that is the quick way to get rid of that.
| | 02:19 | Now I am going to hop into my CSS by
going to CSS > Edit CSS, switch over to
| | 02:24 | my default tab, scroll on down just
above the footer area here, put in a
| | 02:31 | comment that says weblinks
so I remember what this is.
| | 02:35 | Then we have a div.weblink-category
and the font-size. Let's try 1.6 ems.
| | 02:49 | Well, that's a little bit big.
| | 02:53 | Let's try something a little smaller.
| | 02:54 | 1 is a little bit too big.
| | 02:58 | Let's try going down to
0.9 ems or even 0.8. There!
| | 03:05 | That looks pretty good.
| | 03:06 | I'll go ahead and take that.
| | 03:10 | Next, I am going to hide that globe
icon and the way I can do that is to say
| | 03:15 | div.weblink-category img.
| | 03:20 | I can say to display: none.
| | 03:25 | There we go!
Bye, bye little globes!
| | 03:29 | Now, I am going to work on the
paragraph. Each one of these links is in a
| | 03:33 | paragraph which is partially
responsible for why all that space is in there.
| | 03:38 | So I am going to say div.weblink-
category p. Then I am going to say the margin
| | 03:48 | is 0, the padding is 0.
| | 03:52 | That will tighten things up right away.
| | 03:57 | But what I really want to do is have
a little bit of space in between these
| | 04:01 | links and I need them to move over to left,
so that I have room for that olive bullet.
| | 04:05 | So we're going to change this padding to
let's say 10 pixels, 0, 10 pixels, and 30 pixels.
| | 04:14 | So I have 10 on the top, 0 on the right,
10 on the bottom, and 30 pixels on the left.
| | 04:21 | Then I am going to enter my background image.
| | 04:26 | background: url (../images/
olivebullet.png) no-repeat left top.
| | 04:37 | Of course, you're not going to see that
until I paste this into the backend of Joomla
| | 04:44 | So let's do that now.
| | 04:46 | Ctrl or Command+A to select
everything. Ctrl or Command+C to copy.
| | 04:51 | Close this window. Switch to the
backend of Joomla. We're going to go to
| | 04:54 | Extensions > Template Manager, going to
go to the Templates tab, scroll all the
| | 05:00 | way to the bottom to the Details page,
and I am going to edit the style sheet.
| | 05:04 | Ctrl or Command+A to highlight
everything and delete, Ctrl or Command+V to
| | 05:09 | paste, and then I'll save the page.
| | 05:13 | Now when I come back and refresh my
Links page, I have my nice little bullets
| | 05:17 | that have showed up on other pages of
this web site and the spacing looks good.
| | Collapse this transcript |
| Styling a contact list| 00:00 | This is my contact page for the web
site and you see that it's not terribly
| | 00:05 | attractive at the moment.
| | 00:07 | I have the listing of all the people
who are here at the company and their
| | 00:10 | position and phone number, which is
all the information that I want, but the
| | 00:14 | styling leaves quite a bit to be desired.
| | 00:17 | I'd like to have the heading of
this particular table look a little bit
| | 00:21 | cleaner and neater.
| | 00:23 | Maybe a dark brown color with white words.
| | 00:25 | That will set it off from what's
underneath and I'd like to add a little
| | 00:30 | padding around things.
| | 00:32 | So let's take a look at the
code that I have here to work with.
| | 00:34 | I am going to go to View Source.
So here we have our div with the class of
| | 00:43 | contact-category and we have our description.
| | 00:47 | Once again, notice that we
have this odd line of code here.
| | 00:51 | It's probably because our contact-
category description is set to show instead of
| | 00:54 | hide and that's what's causing
this great big gap right here.
| | 00:59 | So we'll go ahead and turn that off in
the backend of Joomla. Then as you scroll
| | 01:05 | down a little bit more we have a table
with the class of category and we have
| | 01:11 | headings here, which is great.
| | 01:12 | We have th being the table heading tag,
so I can use that to style the heading
| | 01:17 | of this particular table.
| | 01:19 | And then underneath of that I have
cells that have the information about Kurt
| | 01:23 | James and his position and his phone number.
| | 01:26 | So just in case you're thinking, "Oh gosh,
| | 01:30 | we're using tables for layout?"
| | 01:32 | Well, this is actually tabular data.
| | 01:34 | This is supposed to be a table of
information, including a name or position
| | 01:38 | and a phone number.
| | 01:39 | This is why tables were indented.
| | 01:41 | So this is the correct use of
a table in terms of the markup.
| | 01:45 | So it's not a layout table. It's a data table.
| | 01:48 | So let's go ahead and take a look at
the CSS by going to Edit CSS and we'll go
| | 01:54 | to our default.css page.
| | 01:57 | I am going to scroll on down just above
the footer here and I'm going to add a
| | 02:01 | comment that this will
be our contact list table.
| | 02:10 | So now I'm going to add table.category
th and we're going to-- First of all,
| | 02:19 | we have all the text centered and I like
to keep the alignment more or less the same.
| | 02:23 | So I'm going to say text-align left, then
I'll move everything over to left there.
| | 02:31 | Then I am going to give it a background-color.
| | 02:37 | Maybe this dark brown that's
appeared a few places on the site, 403a19.
| | 02:42 | So that looks pretty good.
| | 02:44 | The color of course needs to be something else.
| | 02:47 | Let's make the color white and that
will style, of course, only the word phone,
| | 02:53 | which has no link associated with it.
| | 02:55 | Name and position have links associated
with them because I could click on the
| | 03:00 | word name or position and resort
those list by one of those parameters.
| | 03:06 | We'll also give this some padding.
It looks kind of tight there and smashed
| | 03:10 | up against the edges.
| | 03:11 | Padding will be 5 pixels on all sides.
| | 03:14 | So that's looking better.
| | 03:15 | Now I'm going to need to add another
style, table.category th a:link, and
| | 03:25 | table.category th a:visited, and this is so
that we can make those other links also white.
| | 03:34 | So I am going to make the color e4e88f, which
will make these links a nice shade of yellow.
| | 03:45 | And since they're clickable, they need
to look a little bit different than the
| | 03:49 | word phone, which is not clickable.
| | 03:51 | We could turn off the underline here
if you wanted. Leaving the underline in
| | 03:54 | makes a little more clear why name
and position are one color and the word
| | 03:58 | phone is another color.
| | 04:00 | I think I'm going to leave
those underlines turned on.
| | 04:04 | And then finally underneath in the
cells where we have the information listed,
| | 04:09 | the padding there is a little bit tight.
| | 04:10 | So let's add a style for that.
table.category td and padding here will be 5 pixels.
| | 04:21 | So that will just give us a little bit
more space to make things more readable.
| | 04:25 | Notice that though Sales Manager
description here is wrapping and table cells by
| | 04:30 | default aligned to the middle of the
cell, so Chris Green isn't exactly in line
| | 04:34 | with his position here.
| | 04:35 | So I am going to add one more
style, which is vertical-align: top.
| | 04:44 | So that will push everything up and
the alignment will be just a little bit
| | 04:47 | tighter here for our table.
| | 04:50 | All right, so that's looking pretty good.
| | 04:53 | I'm going to go ahead and Ctrl+A or Command+A
to highlight all of the text in my style sheet.
| | 04:58 | Ctrl+C or Command+C to copy it.
| | 05:00 | I'm going to switch to the back-end
of Joomla go to Extensions > Template
| | 05:04 | Manager to the Templates tab, scroll all
the way to the bottom, click on Details,
| | 05:11 | and we're going to click on Edit CSS.
| | 05:14 | I'm going to say Ctrl+A, or Command+A
to get rid of everything and then Ctrl+V,
| | 05:19 | or Command+V to paste it in place.
| | 05:21 | Go ahead and say Save and we'll refresh
the page and that's looking a lot better.
| | 05:28 | I need to address that space there.
| | 05:30 | And so I'm going to go back to my
Components and to the Contacts component and
| | 05:39 | there in Options right up here in the
upper right-hand corner I'm going to go
| | 05:44 | to my Category and I'm going to
set my Category Description to Hide.
| | 05:50 | And when I refresh the page
that space also will tighten up.
| | 05:54 | So things are coming along well.
| | 05:55 | Let's take a look at what the
individual contact pages look like. Not so well.
| | 06:01 | Now that will be what I'll be
talking about in the next video.
| | Collapse this transcript |
| Styling a contact form| 00:00 | Now that we have the Contact table all
set in terms of its presentation,
| | 00:05 | let's take a look at the individual
listings for each of our contacts.
| | 00:08 | So here is Kurt James and we have his
name followed by the word Contact, his
| | 00:15 | picture. Customer Service is his position.
| | 00:18 | We have an address and a phone number.
| | 00:19 | Then we have the words Contact Form and
some more information and then we have
| | 00:24 | the words Other Information.
| | 00:27 | These sub-headers here are lovely if
you're going to do something like what we
| | 00:32 | saw in the Joomla! 1.6 Essential
Training where by default the Beez2 template
| | 00:38 | installs the contact pages
with some accordion panels.
| | 00:43 | We have the contact information in one
panel and the form in another panel and any
| | 00:47 | additional information in the third panel.
| | 00:50 | But I would like to put all
this information on one page.
| | 00:53 | I would like to have Kurt's picture
over to the right side of the screen and
| | 00:59 | I would like to have his position and
information and so forth after that followed
| | 01:04 | by the contact form.
| | 01:06 | I am going to take a look at the HTML
and see what I have to work with here.
| | 01:13 | So we start here with a div
with a class of contact.
| | 01:17 | In the h2 we have his name, but
at the h3 is the word Contact.
| | 01:22 | That's same h3 displays the words
Contact Form and Other information.
| | 01:31 | So perhaps we can just hide that h3 and
get rid of all three of those things at once.
| | 01:36 | Back up towards the top here, here's
our picture of Kurt James in a nice
| | 01:40 | little div, so that I can align this
picture anywhere I want and I think what
| | 01:44 | I am going to do I am going to push it over
to the right side of the screen via float.
| | 01:48 | And that way the additional
information will jump up.
| | 01:51 | It just seems like a lot of scrolling
right now because this picture is really
| | 01:54 | big and I like it big.
| | 01:56 | I mean it's a nice picture, but I don't
want people have to scroll down so far
| | 02:00 | to find that contact form.
| | 02:02 | Then I am going to need to style this form.
| | 02:05 | The form itself is not laid out using
tables the way they used to be in Joomla 1.5.
| | 02:11 | In this case, they are laid out using
some divs and notice we also have the
| | 02:14 | label tag in place here.
| | 02:16 | This is an accessibility feature in
Joomla 1.6 and these are all coded correctly.
| | 02:22 | It just means that we have to put in
a little bit of time for styling them.
| | 02:26 | So I am going to start by going to
CSS > Edit CSS, to my default.css tab.
| | 02:35 | I am going to scroll down to just under
where we put in our contact list table and
| | 02:42 | I am going to put in our contact form styling.
| | 02:46 | So first of all I said we could you
do div.contact h3 and then this would
| | 02:53 | hide by saying display: none.
| | 02:58 | This would hide that word contact.
| | 03:01 | It's going to hide the words
that introduce the contact form.
| | 03:05 | I think the form is pretty self-evident
and I don't really need the words here.
| | 03:10 | The words Other information are still
down here at the bottom and well, we may
| | 03:14 | want to erase those a little bit later.
| | 03:17 | Now I am going to add a style for this image.
| | 03:19 | I would like to float the
image over here to the right.
| | 03:22 | So I am going to say div.contact-
image and I am going to say let's float it right,
| | 03:33 | and so now it's over here on
the right side of the screen and that
| | 03:38 | looks pretty good, except for the fact
the picture is sitting right on top of
| | 03:42 | this message box here.
| | 03:44 | So I am going to pull it up just a
little bit to make it more even with the
| | 03:48 | name up here on the top.
| | 03:49 | So I am going to say margin-top: -20 px.
| | 03:56 | Negative will pull up the
picture. So there, that's in place.
| | 04:00 | Okay, next I would like to take my
labels are here right next to each of
| | 04:08 | the input items and you see that if
I put a little bit of space in here,
| | 04:13 | which it desperately needs,
| | 04:14 | I am going to wind up running these
boxes right underneath of the picture
| | 04:18 | here of Kurt James.
| | 04:20 | So I think what I am going to do is I
am going to put the word Name followed by
| | 04:24 | the box, the word Email followed by the
box, and the word Subject followed by the box.
| | 04:28 | In other words make Name and
Email look the way Subject looks here.
| | 04:30 | So to do that I am going to say
div.contact-email label, so I am looking
| | 04:39 | for that label tag.
| | 04:42 | If I set the width to 8 ems and I set
the display to block, label is an inline tag
| | 04:54 | and by setting it to block and
giving it a width, we go ahead and give this
| | 04:59 | a nice alignment here.
| | 05:01 | Now we definitely need
some spacing in between that.
| | 05:04 | So on the div, div.contact-email div.
| | 05:13 | Let's put on some padding.
| | 05:14 | I put 0.5 ems on the top and the
bottom and zero on left and right. Now that
| | 05:23 | those fields are spaced quite a bit better.
| | 05:27 | So looking at the page overall we have
our name, we have our position, we have
| | 05:31 | an address, and we have a phone number.
| | 05:34 | Then we have this Required and I
really would like to minimize that.
| | 05:38 | So I am going to set the
font-size for that to smaller.
| | 05:42 | That's actually a paragraph with a class
of form-required and the font-size here,
| | 05:52 | let's make it small. 0.75 ems.
| | 05:53 | Sort of minimize that.
| | 05:57 | I don't want it to compete with
Kurt James' contact information.
| | 06:03 | Finally, down here at the bottom of the
email there is this Other information.
| | 06:07 | If I view the source and look for
that Other information down here at the
| | 06:13 | bottom, I actually don't
want this entire div to show.
| | 06:17 | There is a div with a class of contact-
miscinfo, which included potentially you
| | 06:22 | know the words Other
Information along with a space.
| | 06:27 | So I am just going to take that class
right there and I am going to put it here
| | 06:33 | div.contact-miscinfo and I am
just going to say display: none.
| | 06:42 | This only works of course if all of
your contacts have no "other information"
| | 06:49 | because I am hiding that
entire div down here at the bottom.
| | 06:52 | It just seems to me that this should
end with the Send Email button and that
| | 06:56 | there shouldn't be any more
information down here at the bottom.
| | 06:58 | All right, that page is looking great.
| | 07:01 | So let's go ahead and get this into Joomla.
Ctrl+A or Command+A to select all of our code.
| | 07:06 | Ctrl+C or Command+C to copy it.
| | 07:09 | Then I am going to go to the backend of
Joomla to Extensions > Template Manager,
| | 07:14 | to the Templates tab, scroll all the way
down to the bottom to the Details link.
| | 07:19 | We will click on Edit CSS.
| | 07:22 | I'm going to say Ctrl+A or Command
+A to highlight the text. Delete.
| | 07:28 | Ctrl+V or Command+V to
paste all the new code in.
| | 07:31 | Now I am going to refresh this page
and that looks much more attractive to me
| | 07:39 | here on this page and of course, I can
jump back and I can take a look at some
| | 07:44 | of our other contact people.
| | 07:46 | Here is Jerry Martin and his
page is looking really good.
| | 07:50 | I can also jump on back here to Tara,
and Tara's page is also looking good.
| | 07:57 | So it looks like we have been
nice and consistent with those pages.
| | Collapse this transcript |
| Styling a breadcrumb, login, and random image| 00:00 | All right, we're on one of the last pages
here of the web site, and this is the login
| | 00:05 | page for our employees and our
distributors, and by default the login page is
| | 00:11 | not styled in the most attractive
manner either and we definitely need to add
| | 00:15 | some styling to this.
| | 00:17 | The line that's going all the way around
that border thing, around the login box
| | 00:21 | is called a fieldset.
| | 00:22 | That's an HTML tag.
| | 00:24 | So I am going to set that up, so that
doesn't display here on the web page.
| | 00:28 | I am going to do some work on a text
perhaps to make it a little smaller and
| | 00:32 | certainly give it a little breathing
room from the breadcrumbs, and of course,
| | 00:36 | we will need to neaten up that form so
it's a little bit more readable as well.
| | 00:39 | I'd like to align that Log in button
underneath the fields as well and then I
| | 00:47 | know you guys have been just itching
to do something about those breadcrumbs.
| | 00:51 | We've ignored them the entire time, but the
breadcrumbs definitely need a little love.
| | 00:56 | The title there where the word
Breadcrumbs is floating in space is the module
| | 01:00 | title for breadcrumbs.
| | 01:01 | So we will need to turn that off and
then we can style those. And then finally
| | 01:06 | over here on the left side of the page
our random image is just a little bit
| | 01:10 | close to the navigation.
| | 01:12 | I think it's a little bit more obvious
on a page like the About page where we
| | 01:15 | have our random image pretty close to
navigation, and I am just like to give
| | 01:19 | that a little bit of breathing room.
| | 01:22 | So that the navigation is just a
little bit more separate from the random image.
| | 01:26 | So I am going to cover all
those things in this video.
| | 01:29 | So let's start by working on the login form.
| | 01:32 | Let's go ahead and take a look at
the source for that, as well as the
| | 01:36 | breadcrumbs in that random image.
| | 01:37 | Over on the left side of the page,
notice we have a div with a class
| | 01:44 | of moduletable_menu.
| | 01:45 | moduletable_menu, and then we have our
menu and then we have a div with a class
| | 01:51 | of just module table
and that's our random image.
| | 01:53 | By default, most of the menus on the
left side of the page in Joomla tend to
| | 02:00 | have this module suffix, which I
talked about in another video, of _menu.
| | 02:07 | The class itself is somewhat different than
the default class name, which is moduletable.
| | 02:13 | Since the only modules I have
over on the left side of the page are
| | 02:17 | the moduletable_menu and the random image
with the div with the class of moduletable.
| | 02:23 | I can style that moduletable to give
me a little bit of breathing room there.
| | 02:28 | Then we have the start of our main
content and we have another div with class of
| | 02:32 | moduletable with our h3.
| | 02:33 | We will turn that off in the module
itself by telling the title not to display.
| | 02:39 | That will leave us with a div with a
class of breadcrumbs, and we can use that
| | 02:44 | to style up the links here, probably
shrink the text a little bit, and that is
| | 02:49 | followed by a div with a class of login.
| | 02:52 | And our login-description, there it is,
and then we have there is that fieldset
| | 02:56 | tag that I was telling you about
earlier. Just like we saw with the contact
| | 03:01 | forms our login form has been made accessible.
| | 03:04 | So we have some tags here for labels,
and we can use those for styling also.
| | 03:10 | If I make those the same width, then our
fields after it should line up a little bit.
| | 03:16 | Put a little space there, and push
the Login button over, and all of that
| | 03:22 | should lead to a nicely styled page. All right!
| | 03:26 | So let's go ahead and get
started with all of that.
| | 03:28 | I am going to go to CSS > Edit CSS.
| | 03:32 | I am going to work on the login form first.
| | 03:35 | So I am going to scroll on down to just
after that contact form we put in and
| | 03:41 | I'll make a comment that
this is about the login.
| | 03:45 | Now I am going to put this in. So div.
login fieldset and we will set this up
| | 03:56 | to have a border of 0.
| | 03:58 | We will have a margin of 0
and we will have padding of 0.
| | 04:04 | I am also going to go ahead and set
this to display block because fieldset is
| | 04:16 | actually an in-line tag and by setting
it to display block then that margin and
| | 04:21 | padding setting can take over.
| | 04:23 | Then I am going to say div.login-
description and let's go ahead and put
| | 04:34 | some padding on that, maybe 20 pixels on the
top and bottom and 0 on the left and right.
| | 04:41 | That's pretty good.
| | 04:42 | I am going to reduce the font-size a
little bit, maybe make it.9 ems and I think
| | 04:50 | I will also make it italic.
| | 04:58 | That will just set that text off a
little bit more than the text that we've seen
| | 05:01 | on other pages for the web site.
| | 05:04 | To me it looks more like directions than
just some regular old text for the site.
| | 05:09 | Next I am going to add my div.login label.
| | 05:18 | The label tag is what's wrapped around
username and password over there on the
| | 05:23 | left side of the Login box.
| | 05:25 | So if I display this as a block-level element,
that will push these things onto separate lines.
| | 05:31 | And if you like that styling,
you could certainly use that.
| | 05:34 | I've showed you that kind of styling
with the contact form, so I thought
| | 05:37 | it would be a little different
here on this page to show you some
| | 05:41 | additional possibilities.
| | 05:43 | If you do set items to a block level
element, the width of those elements
| | 05:47 | are defined by their containing element.
| | 05:50 | So right now those labels go
all the way across the page.
| | 05:53 | If I want to work with them, I probably
need to give them a width of let's say
| | 05:58 | 115 pixels, then I am going
to float them. Float them left.
| | 06:05 | See how nicely now with that shorter label box
| | 06:09 | it can jump right on up right next to
that text, and that's just looking great.
| | 06:17 | Okay, so now I'm going to add a
div.login button, because I think the Log in
| | 06:28 | button ought to be more aligned with the form
fields than with the User Name and Password text.
| | 06:33 | So if I just have that login button to
have a margin on the left of 115 pixels,
| | 06:43 | that should align nicely
right under all the form fields.
| | 06:46 | Finally, those form fields are
wrapped around their own div.
| | 06:50 | So if I say div.login-fields and I
give them a little bit of padding, maybe on
| | 06:59 | the bottom, of 10 pixels, now
we have some nice spacing there.
| | 07:07 | That login form is looking so much better.
| | 07:09 | Now I am going to go ahead and style those
breadcrumbs really quickly while we are in here.
| | 07:14 | So I am going to make a little note
that we have got the breadcrumbs and for those,
| | 07:20 | I am going to just say div.
breadcrumbs, just to style everything all at once.
| | 07:29 | I'll make the font-size 0.85ems.
| | 07:34 | The smaller font-size makes the breadcrumbs
just a little bit less apparent on the page.
| | 07:39 | They're still there.
| | 07:40 | They are still readable, but they don't
detract so much from the main content on the page.
| | 07:45 | Then I am going to add a
little bit of padding for them.
| | 07:49 | Let's put 20 pixels on the top and the
bottom and 0 on the left and the right.
| | 07:54 | So now they have been set off a little
bit more and that will look even better
| | 07:57 | once I turn off that Breadcrumbs title there.
| | 08:01 | Finally, I am going to add a little
bit of room here for that random image.
| | 08:05 | So let's put a comment for that.
| | 08:07 | This is the random image and I'm
going to say-- actually, I don't want to put
| | 08:14 | this random image here, because
this is on the left side of the page.
| | 08:18 | So where I would normally place
this is up with the other left styling.
| | 08:23 | You might have noticed the pattern that
I am using in organizing my style sheet.
| | 08:27 | I try to keep things grouped
together so that I can find them later.
| | 08:31 | So I have my left column here with
the left menu and my left news on the
| | 08:35 | Home page and so I am going to add
this style right here just after the
| | 08:41 | newsflash, and we will say this is a
random image, and this will go in #left
| | 08:52 | div.moduletable and this
will be padding-top 30 pixels.
| | 09:04 | So that will push things down just a little bit.
| | 09:06 | If you want more space, of course you
can change that value if you wish, and
| | 09:11 | because now I have made my
changes in two places on the style sheet,
| | 09:14 | this is one of the reasons why I like
to copy and paste over the whole entire
| | 09:18 | style sheet, as opposed to
copying and pasting parts of it.
| | 09:21 | So I am going to say Ctrl+A or Command
+A to highlight the whole style sheet.
| | 09:26 | Ctrl+C or Command+C to copy it.
| | 09:29 | Back to the backend of Joomla to our
Template Manager under Extensions to our
| | 09:34 | Templates tab, scroll all the way down
to the bottom, click on ttoo details and
| | 09:39 | then CSS, default.CSS, and in
this window, we are going to say Ctrl+A or
| | 09:44 | Command+A to highlight it all, hit Delete.
| | 09:48 | Ctrl+V or Command+V to paste in all of
that new code, and we will say Save &
| | 09:54 | Close and when I refresh the login page,
we have a little bit more space here,
| | 10:00 | our breadcrumbs aren't quite so prominent,
and we have a little bit more styling
| | 10:04 | here for our login form.
| | 10:06 | The last thing we need to do is
turn off that Breadcrumbs title.
| | 10:10 | Click the Close button here under
Customize Template and then we can go to
| | 10:13 | Extensions > Module Manager and we
will go to our Breadcrumbs, and we'll tell
| | 10:20 | it to hide the title.
| | 10:23 | Go ahead and click Save & Close
and now when I refresh my qeb page
| | 10:27 | that Breadcrumbs title is gone, and you can
see the breadcrumbs there at the top of the page.
| | 10:32 | You're on the login page.
| | 10:34 | You can certainly go through and check
some of the other pages on the web site,
| | 10:37 | and that breadcrumb is clearly there,
clearly prominent, but not detracting from
| | 10:42 | the main text of the page anymore.
| | 10:44 | Things are looking really good.
| | Collapse this transcript |
| Styling Simple Image Gallery| 00:00 | At this point we've gone through and
styled pretty much every page of the web site
| | 00:04 | and we've styled all modules and
components that have come with Joomla.
| | 00:09 | The one thing we haven't styled yet is the
one thing that didn't come with Joomla,
| | 00:13 | which is our simple image gallery, and
it's showing way down here at the bottom
| | 00:18 | of the page on the Home page.
| | 00:20 | While that's very nice, I'd really like to
get it to show up right here just under
| | 00:24 | the main text on my Home page and all
of these images have this lovely little
| | 00:29 | drop shadow underneath of it, but
there's some white around that as well.
| | 00:34 | In fact, the way this is working is
there is a small white div that right
| | 00:39 | behind the pictures followed by an alpha
transparent drop shadow that goes around these.
| | 00:46 | So two things that I need to fix for
the styling for this. One is to make it
| | 00:49 | pop-up to the top of the page, but the
second thing is I need to change that
| | 00:54 | background white color to the
background color for my web page itself and then
| | 01:00 | those drop shadows are going to blend
in and look terrific instead of kind of a
| | 01:05 | little cheesy the way they look right now.
| | 01:07 | Simple image gallery comes with its own
style sheet. So the question becomes how
| | 01:12 | do we do styling in this kind of environment?
| | 01:15 | Well what we need to do is when I view
the styles here for the web page, the one
| | 01:21 | here called template.css refers to
the styling for simple image gallery.
| | 01:26 | You see that up there at the
top, that there's some text about that.
| | 01:30 | If I was to just say Ctrl+A or Command+A
and delete, all of the styling would go
| | 01:36 | away for that entirely.
| | 01:39 | In fact, he's formatted this with a
bulleted list with each little thumbnail, okay.
| | 01:44 | So the styling is definitely doing
something here and the problem is in the
| | 01:50 | style sheet, because as soon as I delete all
of the styles the thing jumps up the page.
| | 01:56 | So when I'm reading somebody else's
code and I'm not entirely sure where the
| | 01:59 | problem is occurring what I
frequently like to do is to delete bits and
| | 02:03 | pieces of it at a time.
| | 02:06 | As you delete things, if you see a
problem getting resolved, you'll know that
| | 02:11 | you're getting closer to where the
problem is living here within the style sheet.
| | 02:16 | This is a very easy
technique and relatively safe to do,
| | 02:20 | if you do this within the Web Developer
Toolbar in the Edit CSS window. Because
| | 02:25 | if I simply close my CSS I haven't
changed anything to the side at all I can
| | 02:31 | reopen the CSS and get a fresh copy
back in case I delete something that I
| | 02:35 | shouldn't have or I can't get my changes back.
| | 02:39 | So if I start by just deleting the
section here on general styling, I'll notice
| | 02:45 | that the gallery jumps right on up
to the top of the page right there.
| | 02:50 | I've lost my drop shadow.
| | 02:52 | I still have that white box, but I've
lost the drop shadow and things have
| | 02:56 | jumped up to the top of the page.
| | 02:58 | So in fact the problem was with one of
these styles right here and if I in fact
| | 03:04 | erase ul.sig-container it will jump back
up to the top here and if I erase clear:both--
| | 03:13 | I've already done this in
advance, so I know where the problem is.
| | 03:17 | If I erase clear:both, then I have my images
right here exactly where I want them to be.
| | 03:23 | So somehow I need to figure out how to
delete that clear both being called here
| | 03:28 | within the ul.sig-container.
| | 03:33 | The other thing we wanted to do
is to change that white background.
| | 03:36 | They know that's white, so if just look
through the CSS looking for white as a
| | 03:41 | value like here, here is a
background with a value of white.
| | 03:45 | I can change that to the value of the
background color of this web page using my
| | 03:52 | ColorZilla tool I can pick
up that color, which is E2E7D3.
| | 03:58 | So if I type in E2E7D3, then now my
pictures blend really nicely into the
| | 04:06 | background of the web page.
| | 04:08 | So the other thing that I need to
change is this li.sig-block and I need to
| | 04:15 | reset the background color associated with it.
| | 04:18 | So I know the two things I need to fix.
| | 04:20 | Now, I could try to track down where
exactly the style sheet is occurring within
| | 04:25 | the Joomla code, but if I upgrade
simple image gallery at some point in the
| | 04:30 | future I could lose my changes.
| | 04:33 | A better way of doing this is using the
power of the big C in CSS, the cascade.
| | 04:39 | I can just override these styles that
are here within the core output of simple
| | 04:45 | image gallery and put that code
instead directly in my default.css,
| | 04:51 | the template for the web site.
| | 04:53 | So I'm going to do that now.
| | 04:55 | I'm going to close this so that we
revert to our original code and reopen it.
| | 05:00 | Then I'm going to switch over to my
default tab and scroll on down to just above
| | 05:06 | the footer where we've been editing and
I'm going to put in a comment that this
| | 05:10 | is our simple image gallery tweaks.
| | 05:14 | So ul.sig-container was one of the big
problems on this page, and the value that
| | 05:24 | we didn't like was clear: both.
| | 05:27 | The opposite clear: both is
clear: none, so if I put in clear: none,
| | 05:34 | I've invalidated that one attribute
of that particular CSS declaration.
| | 05:40 | But here I've overridden one of them.
| | 05:43 | So now all of those other attributes
for ul.sig container stand and they are
| | 05:48 | being executed, but I've
overridden the one, clear: none.
| | 05:53 | The next thing I want to do is change
those white boxes behind here, so that
| | 05:58 | was under li.sig-block and the
background color there by default was set to be
| | 06:06 | white and I'm going to set the background to
E2E7D3 and I'll go ahead and leave in that important.
| | 06:21 | If I don't put that important in the
color won't be overridden. So there we go.
| | 06:26 | We've got those two styles in place
and that's looking the way we want.
| | 06:30 | You don't see the drop shadow right
now because that's a background image and
| | 06:33 | we have the Firefox editing window open
here, which is hiding our background images.
| | 06:38 | Let's copy these styles into Joomla and
see how we did. Ctrl+A or Command+A to
| | 06:44 | highlight everything, Ctrl+C
or Command+C to copy it all.
| | 06:47 | Then I'm going to go into the back end of
the Joomla to Extensions > Template Manager.
| | 06:52 | I'm going to go to the Templates tab,
just scroll all the way to the bottom to
| | 06:56 | ttoo Details and I'm going to click on
the style sheet, Ctrl+A or Command+A to
| | 07:02 | highlight everything and delete, Ctrl+V
or Command+V to paste in our new code.
| | 07:07 | Say Save & Close and then when I go the
front of the web site and refresh,
| | 07:13 | you now see our pictures here showing up
in our simple image gallery, the Alpha
| | 07:18 | transparency on that little drop
shadow is working great, blending very, very
| | 07:22 | nicely, and when I click on the
pictures they still come up in a very nice
| | 07:27 | light box just like this.
| | 07:29 | Now that you know where all of the
styles are located here and how to override them,
| | 07:35 | if you didn't want this box to
be white and you wanted it to be more of
| | 07:37 | that pale green background that we have
on this web site, you could certainly go
| | 07:41 | in and edit that yourself
and add that to the style sheet.
| | Collapse this transcript |
|
|
6. Advanced Template FeaturesAssigning "optional regions" in a Joomla! template| 00:00 | Our web site is all styled at this point.
| | 00:02 | We've styled up all the modules
and the components and things are
| | 00:05 | looking pretty good.
| | 00:06 | But there are more things that we can do
in terms of styling this web page, more
| | 00:11 | features and functionality that we can add here.
| | 00:13 | One of the things is we'd like
to take a look at the Home page.
| | 00:18 | We have three columns of information.
| | 00:20 | We have our left column, our center
column which of course is our component, and
| | 00:24 | we have our right column.
| | 00:26 | But if I go to the About page, I
only have content for the left column of
| | 00:31 | the page and the middle here, but I don't
have any content for the right side of the page.
| | 00:37 | So there are two ways that I can handle this.
| | 00:40 | I could leave it exactly the way it is.
| | 00:42 | There's really nothing wrong with it,
but it does look a little odd that I've
| | 00:46 | got all of the space over on
the right-hand side of the page.
| | 00:49 | Particularly if I go to some page like
the Contact page and then take a look at
| | 00:54 | these guys here where the picture
looks like it's really pushed in.
| | 00:57 | Wouldn't it be nice if the
picture was out a little bit further?
| | 01:01 | So I could change the treatment as
well such that the content extends all the
| | 01:08 | way across the page here and
that would probably be better.
| | 01:11 | So if there's nothing displaying over on
the right column then it should display
| | 01:16 | the whole way across the web site.
| | 01:18 | But if there's something in the right
column then it should show three columns.
| | 01:23 | That's what I want to try to do and
there are two solutions to that problem.
| | 01:28 | One solution would be to
build a second template.
| | 01:30 | So I could have two templates for
this web site. One template would be the
| | 01:35 | template that has three columns and
one template would be two columns.
| | 01:40 | Then I'd have to remember to assign my
templates to new pages as I put them in.
| | 01:46 | The only problem with that is it's just
yet another step for adding a page to the
| | 01:50 | web site and I really want this to be
as easy as possible for my client to use.
| | 01:55 | Wouldn't it be great if there was some
code that would do the thinking for me?
| | 02:01 | Fortunately there is and this is
one of the great features of Joomla and
| | 02:05 | working with a programming language,
rather than just working with static HTML.
| | 02:11 | You can put in some conditional
statements is what these are called.
| | 02:15 | They usually start with an if, and so,
if something is true, do this and
| | 02:22 | sometimes they also contain an else.
| | 02:24 | Else do this other thing.
| | 02:28 | Fortunately, all of these statements
have been written for you and all you need
| | 02:31 | to do is copy and paste some of
the code to make it work for you.
| | 02:37 | You just have to understand what the code
says so that you can modify it appropriately.
| | 02:42 | So in your exercise files, I have
a file called php here in notepad.
| | 02:49 | This is the code that we are
going to put into our Joomla web site.
| | 02:54 | So we have an if statement up here.
| | 02:57 | We start with a php tag because we
need to specify that we are working in PHP
| | 03:01 | and not HTML in the page, and
then we have this statement here.
| | 03:06 | There is that If I was telling you about.
| | 03:08 | if($this->countModules('right')).
| | 03:12 | So what this little piece of code is
saying is if for the particular page you
| | 03:18 | are on, if there is more than one or if
there are more than 0 modules assigned
| | 03:24 | to the right column, and a
module of course is an integer.
| | 03:28 | You can have 0 or 1 or 2.
| | 03:29 | You can't have half modules.
| | 03:32 | So if it's more than 0, then we're
going to do something, otherwise we're going
| | 03:38 | to do something else.
| | 03:39 | So let's take this little
piece of code, just the
| | 03:44 | if($this->countModules('right'))
and I am going to go into my
| | 03:49 | Extensions > Template Manager.
| | 03:51 | I am going to go to my Templates tab,
scroll all the way down to the bottom to
| | 03:56 | ttoo Details and to the Edit main page template.
| | 04:00 | I am going to take a look
at the code that I have here.
| | 04:04 | So the code I have now is setup like this.
| | 04:07 | I have a div with an ID of left
and a module position /div.
| | 04:11 | Then I have a div with an ID of
right and a module position /div.
| | 04:16 | If I just put this line of code, php,
if this count module is right, above that
| | 04:24 | and underneath of it I put in?php endif.
| | 04:31 | That's in that code in the
exercise file if you need to copy it.
| | 04:35 | But anytime you start an if, you have to end it.
| | 04:38 | So let's say we just do that much.
| | 04:40 | We are just saying if there are modules
on the right side of the page, then go
| | 04:45 | ahead and show them.
| | 04:47 | Let's see what happens.
| | 04:48 | So I am going to go ahead and hit Save.
| | 04:50 | I am going to refresh the page
and nothing appears to have changed.
| | 04:56 | If I view the source for the page,
what I see is I have my div with an ID of
| | 05:04 | left and then I have a div with an
id of mainContent. So that's great!
| | 05:09 | We have gotten rid of that div on
the right side of the page. It's gone.
| | 05:14 | The only problem is my ID here of
mainContent, the style for it is set such that
| | 05:22 | I have a very large margin on the right
side of the page and a large margin on
| | 05:26 | the left side of the page.
| | 05:27 | That's still true even though the
right column is gone. I now have a gaping
| | 05:32 | hole over here, but it's due to the
margin associated with the mainContent div tag.
| | 05:37 | So what if we do this instead?
| | 05:42 | Inside of Joomla instead,
we've put in if we have no modules,
| | 05:49 | we're going to do this thing.
| | 05:51 | Let's put in <?php else : ?>.
We will do something else.
| | 06:02 | Then I am going to take my
div with an ID of mainContent.
| | 06:05 | I am going to move that to up here.
| | 06:11 | So if there is a right column, I'm going
to have a div with an ID of mainContent
| | 06:16 | displaying just after that right div.
| | 06:19 | Otherwise I am just going to display
a div with an ID of mainContentnoright.
| | 06:30 | So you see what happens here.
| | 06:31 | If we have a module positioned on the
right side of the page, we are going to
| | 06:37 | display it in this div and we are
going to display the div with an ID of
| | 06:41 | mainContent as a tag.
| | 06:43 | Otherwise we're going to display a
div with an ID of mainContentnoright.
| | 06:47 | Just that, nothing else.
| | 06:50 | So let's see how that works.
| | 06:53 | If I refresh my page, now all of a
sudden I've got things pushed out of the way.
| | 07:00 | If I view my source, now I have here
is my left div, and then I have here
| | 07:07 | is my div with an ID of mainContentnoright,
and we have all of the content on the page.
| | 07:14 | Because div mainContentnoright has no
styling associated with it, it's now
| | 07:20 | taking up the entire web page.
| | 07:22 | So we are going to need to add a
style to rein this in just a little bit.
| | 07:26 | So now I am going to close out of the screen.
| | 07:31 | I am going to hit Save & Close to leave
the screen and now I am going to go into
| | 07:35 | my CSS and I am going to scroll down to
where I have my div just after right. Here we go.
| | 07:45 | We have mainContent.
| | 07:47 | In your exercise files we have
some CSS here that you can add.
| | 07:52 | So I am going to highlight that and
copy it and I am going to paste it here in
| | 07:57 | the web page instead of the
mainContent that we have there now.
| | 08:02 | So note that it has a comment.
| | 08:04 | When the right column is present, we
have mainContent being written in with
| | 08:08 | the margin and the padding and when
there's no right column, here's our
| | 08:12 | mainContentnoright.
| | 08:14 | This time instead of when we have the
right column present we have 250 pixels
| | 08:19 | of margin on the left and
the right sides of the page,
| | 08:22 | we only have 250 pixels of margin on the
left side of page without the margin on
| | 08:27 | the right, and we still have padding in place.
| | 08:30 | So let's go ahead and save that.
| | 08:33 | Now when I refresh this page,
things are in much better alignment.
| | 08:38 | We've got Jerry Martin's information all
in a line the way we had it before, but
| | 08:42 | his picture is pushed out a little
bit more to the right side of the page.
| | 08:45 | If we look at the About page,
it too is nicely formatted.
| | 08:51 | It goes all the way on out to the
edge of the right side of the page
| | 08:55 | without smashing into it.
| | 08:57 | If you wish, you can play
around more with the padding on the
| | 09:01 | mainContentnoright, but now you should
have an understanding of what we've done.
| | 09:06 | We've used one template and with a
little bit of PHP magic we now have the
| | 09:11 | ability to show both a three-column
format and a two-column format within
| | 09:17 | the same template, and Joomla is smart
enough to know when to execute each one of those.
| | Collapse this transcript |
| Displaying modules within an article| 00:00 | To this point, we've talked about
components and we've talked about modules and
| | 00:05 | never the two shall meet.
You're a component, or you're a module.
| | 00:08 | Modules display in module
positions on the web site.
| | 00:11 | Components display in the one component
position that's available in the template.
| | 00:15 | Wouldn't it be great though on
occasion every once in awhile, you may wish to
| | 00:21 | have a module displaying inside of an article?
| | 00:25 | That would be a wonderful thing.
| | 00:27 | For example, if you wanted to have
random images on one page and have them
| | 00:31 | displaying within an article, that
would be a very interesting thing to do.
| | 00:35 | In my case, what I'd like to do is I'd
like to add a list of links to "The Story
| | 00:41 | Behind Two Trees" page, and down here
I'd like to add the list of all the same
| | 00:47 | links that are occurring over in the
web links, but I want them to appear in the
| | 00:51 | text of this article.
| | 00:53 | One possibility would be that I just go
ahead and type them in, but every time I
| | 00:57 | add a new web link, I have to remember
to update this particular page as well.
| | 01:03 | So what I like to do instead is I'd like
to have a way if I put in a new web link
| | 01:08 | it updates this article automatically.
| | 01:11 | Wouldn't that be great that I don't have
to remember to update links in two places?
| | 01:15 | So one way I can do that
is with the weblinks module.
| | 01:19 | I can display all of my web links here
within this article, and because they are
| | 01:24 | pulling from the same part of the
database, those web links will update
| | 01:27 | automatically every time I add
a new web link to the web site.
| | 01:30 | So to do this, let's hop into the
backend of Joomla and then I'm going to show
| | 01:35 | you a little magic behind how you
can display a module in an article.
| | 01:41 | That's through a plug-in.
| | 01:43 | Those are under Extensions > Plug-in
Manager and there is a plug-in right up
| | 01:48 | here called Load Modules.
| | 01:50 | If you click on this plug-in, this
comes with Joomla automatically and it will
| | 01:56 | give you some information about it.
| | 01:58 | Down here it says Loads Module
positions within an Article, and the syntax is
| | 02:02 | this little line of code
right here, loadposition user1.
| | 02:06 | User1 being the position, so we could
substitute anything in there and it would
| | 02:12 | appear on our web page for our position.
| | 02:15 | So I'm going to go ahead and highlight
that little bit of code and say Edit > Copy.
| | 02:21 | Over on the right side of the page,
there are the Basic Options over here.
| | 02:25 | This is the kind of output
that comes with load modules.
| | 02:30 | So by default, it's set to raw output.
No wrapping, no divs going around it.
| | 02:36 | Remember that raw output also means
that the module title will not display.
| | 02:41 | So we could go ahead and
wrap this by a single div.
| | 02:45 | That's the Wrapped by Divs. And our module
title should also display within the text.
| | 02:51 | Let's see how that works.
| | 02:52 | So I'm going to say Save & Close then
I'm going to go set up my module by going
| | 02:57 | to Extensions > Module Manager.
| | 02:59 | I am going to create a new
module by clicking the New button.
| | 03:03 | And here in the list there is Weblinks
modules and by hovering over it, you'll
| | 03:08 | get a little tooltip that tells you that
this module is displaying web links from
| | 03:12 | a category defined in the Weblinks component.
| | 03:15 | So we'll go ahead and click that and
this gives us a page full of information.
| | 03:20 | So we'll go ahead and give
this a title. Our Partners.
| | 03:24 | Then it's going to ask us for the
position and if I select one of the
| | 03:30 | existing positions, that's fine, but it may
pull in a whole bunch of other modules as well.
| | 03:36 | Generally speaking when I put a module inside
of an article, I like to give it a new position.
| | 03:42 | So I'm going to give this a position of
links because this of course is where
| | 03:46 | of my web links are going to go.
| | 03:47 | So I'm going to go ahead and just type
that indirectly in the blank rather than
| | 03:50 | browsing for anything.
| | 03:53 | Over on the right side of the screen,
it will ask us what category of web links
| | 03:57 | would I like to display?
| | 03:59 | Well, I want to display my Partners links.
| | 04:01 | How many links would I like to display?
| | 04:03 | I'm going to leave this set to 5 for the
moment, because I only have 4 links anyway.
| | 04:08 | If they have to appear in a certain order or
certain direction, you can set all that up.
| | 04:13 | For my Target Window I want them
opening in a new window, and I can either
| | 04:18 | choose to display or not display any
descriptions associated with that web links
| | 04:23 | category, whether I want to display the
hits on the page, which I do not, whether
| | 04:28 | I want to count how many times
those web links have been clicked.
| | 04:31 | I'm going to leave that set to No.
| | 04:33 | So there are lots and lots of things
that I can assign for my basic options.
| | 04:37 | Down under the Menu Assignment, by
default, just like all modules, this is set
| | 04:42 | to display on every page of the web site.
| | 04:44 | However, there is only one page that has
the links' position and that is the About page.
| | 04:51 | So you could set this to display
only on certain pages and then set it to
| | 04:55 | display only on that About page, or you
can leave it exactly like this. Because
| | 05:00 | there is only one page with this position on it,
| | 05:03 | it will in fact only display on one page.
| | 05:06 | I am going to go ahead and hit Save &
Close, and now I'm going to go to Content
| | 05:13 | > Article Manager, and I'm going to go
to my "The Story Behind Two Trees" article.
| | 05:21 | And inside of the article, I want to go
down to just between the second to last
| | 05:29 | and last paragraphs, I'm going to hit
Return, and I'm going to enter my code by
| | 05:37 | pasting in that code that I copied out
earlier, and changing the position from
| | 05:41 | user1 to links, which is the
position that I set up in the module.
| | 05:47 | I'm going to toggle my editor just to double-
check that the code is looking good around that.
| | 05:54 | I don't need a span class of read only
plug-in description, so I am going to
| | 05:58 | get rid of that, and I actually
don't need the paragraph tag around
| | 06:02 | loadposition either.
| | 06:03 | I am going to rearrange
that to get rid of my /span.
| | 06:06 | I don't need those breaks.
| | 06:09 | So I just have the end of the paragraph,
/p, then I have my loadposition links,
| | 06:13 | and then we start a new paragraph.
| | 06:14 | And if I toggle the editor
again, there it is on the page.
| | 06:19 | I am going to go ahead and say Save &
Close and now I'm going to refresh my
| | 06:25 | About page, and here is
my article and now there
| | 06:31 | right in the middle of the article are
the same web links that we have in the
| | 06:35 | Weblinks portion of the web site.
| | 06:37 | If I add a new link to the web links in
the Our Partners section, it's going to
| | 06:42 | show up right here directly in our
article which is just going to save us a
| | 06:47 | lot of time for maintenance and it's
going to save us having to remember that
| | 06:50 | we have to actually go in here and
add that every time we add a link to the web site.
| | Collapse this transcript |
| Template overrides | 00:00 | One of Joomla's most powerful
features is the ability to override any HTML
| | 00:06 | output by any component or
any module on the web site.
| | 00:11 | You can override it.
| | 00:12 | You can restyle it.
| | 00:13 | You can change that HTML
that comes out of the system.
| | 00:18 | The way this works is through a process
called template overrides and layout overrides.
| | 00:24 | Template overrides were available in
Joomla 1.5, but layout overrides are new
| | 00:30 | to Joomla 1.6 and I am going to be
covering layout overrides in the next two videos.
| | 00:35 | It's easiest to understand layout
overrides if you first understand what a
| | 00:39 | template override is.
| | 00:40 | So I am going to start by
explaining the template overrides.
| | 00:43 | Let's say that we want to add a
login box module to this web site.
| | 00:47 | I am just going to go ahead and add a
login box to the left side of the web page
| | 00:53 | on most pages of this web site.
| | 00:55 | We are going to take a look at that default
styling that comes out with that login box.
| | 01:02 | So first of all I have to add
the login box to the web site.
| | 01:04 | I am going to go to Extensions > Module
Manager and I am going to click the New
| | 01:09 | button to create a login box and I am
going to say Login will be my Title and
| | 01:18 | the position for the web site we'll put
it on the left side of the page, and I
| | 01:21 | am going to leave
everything else exactly the same.
| | 01:23 | I am going to go ahead and say Save & Close.
| | 01:28 | When I refresh my front-end of the web
site, you will see that we have our login box,
| | 01:32 | as well as some bullets here that
say Forgot your password, Forgot your
| | 01:36 | username, and Create an account.
| | 01:39 | I could certainly go through and I
could style this with whatever CSS I
| | 01:43 | wanted to style it with, to make it look
however I wanted it to look at this point in time.
| | 01:48 | But by changing the CSS I am simply
changing the way the web site looks. I'm not
| | 01:54 | changing the actual HTML output to the web page.
| | 01:58 | What if I want to change that HTML
that gets put out to the web page?
| | 02:03 | Well, you might think that what you
would do is go into Joomla's file structure,
| | 02:07 | find the files that create
this login box, and change them.
| | 02:10 | And that seems like a very logical thing to do.
| | 02:14 | However, what you're doing at that
point is your editing Joomla's core code.
| | 02:18 | This is the code that is published by
the Joomla project and that you install on
| | 02:22 | your web site and when the project
sends out updates to your web site, if the
| | 02:27 | login box is something that got updated,
all of the changes that you've made
| | 02:31 | there within the core code could
potentially be overwritten, which should be
| | 02:36 | very sad thing because then you'd lose
whatever additional HTML you added to
| | 02:41 | that login box or whatever
functionality you changed.
| | 02:45 | So Joomla has a way of letting you
edit that HTML, but saving those edits
| | 02:52 | directly into your Templates directory.
| | 02:55 | By putting a copy of this Login module
in this case in your Templates directory,
| | 03:00 | we have the ability to make changes to
the way the HTML works within that login
| | 03:06 | box without changing the core code.
| | 03:09 | When an update happens, the core code
may change, but your copy of it will be
| | 03:13 | safe inside of the Templates
directory and it won't be overwritten.
| | 03:17 | So let's take a look at how this might work.
| | 03:20 | I am going to do a very, very simple example.
| | 03:23 | I am just going to add a little line
of text on the top above this login box
| | 03:27 | that says this is the template
override for the web page, just so you get a
| | 03:33 | sense of how this works.
| | 03:35 | This of course is not present in the core code.
| | 03:38 | So what I need to do is I am going to go
into my file structure for this web site.
| | 03:44 | To do that, I am going to go into
My Computer, into my C drive, and into
| | 03:49 | xampp and into htdocs.
| | 03:52 | Macintosh people of course, you'd go
into your applications into MAMP and into
| | 03:58 | the htdocs folder in there.
| | 04:02 | And this is Joomla's file
structure that you see here.
| | 04:05 | I'm interested in changing the Login module.
| | 04:08 | So in order to do that, I am
going to look in the modules folder.
| | 04:13 | Inside of here you'll find a folder
for each module present on the web site.
| | 04:17 | I'm interested in the Login module, so
that would probably be under mod_login,
| | 04:23 | and inside of here there are a number
of files that you should absolutely
| | 04:27 | positively not touch.
| | 04:29 | Basically all of the files that you see
here, these are all files that have to
| | 04:34 | do with the actual
functioning of the Login module.
| | 04:38 | All of the hardcore programming
happens right here, but you'll notice that
| | 04:42 | there's a folder here called tmpl for template.
| | 04:46 | The way Joomla is coded is it's using a
structure called MVC, which stands for
| | 04:51 | model View Controller and by using
this design pattern in the way the site is coded,
| | 04:57 | the views of the web site are
extracted and put in their own little files
| | 05:03 | that designers can take and edit without
even coming in contact with the way the
| | 05:08 | actual functioning of the form works.
| | 05:10 | That makes me happy as a designer
because I know that I can't break anything,
| | 05:15 | and it makes developers happy because
they don't have designers going in and
| | 05:19 | breaking their code.
| | 05:20 | Inside of the template folder, there
is usually a file or two and in this
| | 05:25 | case there's an index.html just
there for security reasons, in case
| | 05:30 | anyone wanted to look inside of this
folder from a web page, and we have a
| | 05:35 | file called default.
| | 05:37 | This is default.php.
| | 05:39 | What I am going to do is
make a copy of this file.
| | 05:41 | I am going to right-click on this and
say Copy and then what I am going to do is
| | 05:50 | I am going to go back through my file
structure, back to my htdocs folder.
| | 05:56 | I am going to go into my templates folder.
| | 05:59 | Inside of my templates folder I have a
template folder here for every one of my templates.
| | 06:04 | I am going to go into ttoo and
here I am going to make a new folder.
| | 06:10 | This folder will be called html, and
this is the folder that Joomla looks for
| | 06:15 | when looking for your template overrides.
| | 06:17 | Inside of html, I am
going to make another folder.
| | 06:20 | That's going to be called mod_login,
| | 06:26 | which makes sense because that's
where we took copy of this file from, and
| | 06:30 | Joomla needs to know that
this is the login module.
| | 06:34 | Inside of that I'm just
going to paste my default.php.
| | 06:40 | You don't need to make the template
folder inside of mod_login, because it's
| | 06:44 | already in the templates folder.
| | 06:46 | Joomla knows that these are template overrides.
| | 06:50 | Notice that it's the same name,
mod_login, in the core file structure.
| | 06:55 | This was default.php and now we've
copied it over to our templates directory
| | 06:59 | and it's the same name; still default.php.
| | 07:02 | Now what I can do is open up my copy of
Dreamweaver and I am going to open,
| | 07:10 | File > Open, my templates folder and
ttoo/HTML/mod_login/default, and you'll
| | 07:23 | see very very little here in
any of this for Design view.
| | 07:26 | You will really need to flip over
to Code view to do much of anything.
| | 07:30 | It looks very, very complicated and
there's all kind of scary PHP in here.
| | 07:35 | So what I'm going to do to try to
keep this example simple is just after
| | 07:39 | line 13, just after the JEXEC or die
command, I am going to go ahead and say--
| | 07:46 | I am going to put in a paragraph tag and I
am going to say This is a template override.
| | 07:56 | Obviously, I could do a
little bit more heavy lifting here.
| | 07:59 | I could really get into the HTML
list page and work on it, but I want to
| | 08:04 | give you a simple example so that you can
see at its basics how a template override works.
| | 08:10 | Basically, I have gone into my copy
of this file that lives in my Templates
| | 08:13 | directory and I've changed some HTML.
| | 08:16 | In this case, I have added a paragraph tag.
| | 08:18 | So now I am going to save this and
when I go to the front end of my web site
| | 08:23 | and I refresh, the HTML that I
added now shows up with this login form.
| | 08:30 | And in fact, this sentence saying
"This is a template override" will appear on
| | 08:34 | every login form on my web site.
| | 08:37 | So every time there's a login form,
it will tell me that there's a
| | 08:40 | template override in place.
| | 08:42 | That's because I've completely
overridden the core output from Joomla and I'm
| | 08:47 | just showing something that I have
completely replaced Joomla's core with,
| | 08:52 | this template override.
| | Collapse this transcript |
| Layout overrides: Modules| 00:00 | So in my last video I showed
you about template overrides.
| | 00:05 | The idea that you can override the HTML
that comes out of Joomla with your own
| | 00:10 | special HTML doing whatever you want it
to do and showing up on the web page, and
| | 00:16 | we just added a little text at the top
of the Login box that told us that this
| | 00:20 | was a template override.
| | 00:22 | Now the next thing I want to
talk about is a layout override.
| | 00:25 | A layout override goes one step
further than the template override.
| | 00:30 | The template override overrode all of
the core output from Joomla. The template
| | 00:35 | override then shows up for every single
instance of the login module on the web site.
| | 00:41 | So I could have 15 copies of the login
module on the web site and they will all
| | 00:45 | look exactly the same.
| | 00:47 | They would take my template
override and use that as the method for
| | 00:50 | displaying on the web page.
| | 00:52 | However, what if I had 15 copies of my
login module, but one of them I wanted
| | 00:58 | to look radically different than all
of the others and I needed to make
| | 01:02 | changes to the HTML?
| | 01:04 | Well, with template overrides
there is no way to do that.
| | 01:07 | You're just putting out the default
display for that particular module for all
| | 01:13 | of the modules on the web site.
| | 01:15 | With layout overrides, I can now
specify for certain copies of modules on the
| | 01:21 | web site that I want them to display in
a completely different format than the
| | 01:27 | modules that are displayed in
other areas of the web site.
| | 01:30 | This in new in Joomla 1.6, this
concept of the layout override.
| | 01:36 | So how do we go about doing that?
| | 01:38 | Well we're going to go into the
backend in our file structure in Joomla.
| | 01:43 | In my case I'm in the xampp
folder and I'm inside of htdocs.
| | 01:48 | Mac people you go into your
Applications into MAMP and then into htdocs and you
| | 01:53 | should see the same thing.
| | 01:55 | Once again, I'm going to go into my
core Joomla code into the modules into my
| | 02:01 | mod_login and into the template
folder and I'm going to make a copy of
| | 02:06 | default here. Copy.
| | 02:08 | Then I'm going to return to my
templates folder here, I'm going to go into tot,
| | 02:15 | and I'm going to go into html
and I'm going to go into mod_login.
| | 02:18 | So far absolutely everything is the
same as doing a template override.
| | 02:23 | Here is where the difference happens.
| | 02:25 | When I paste in my copy,
Copy, and keep both files.
| | 02:30 | When I paste in my copy of the
default file, name it anything, but default.
| | 02:37 | In this case, I'm going to rename this
file, Rename, and I'm going to call it AltLogin.
| | 02:45 | So that now will become our layout override.
| | 02:49 | So that's the only difference.
| | 02:52 | All I had to do was make a copy of the
core file and instead of just pasting it
| | 02:56 | in and calling it exactly the same
thing, which is a template override, I rename
| | 03:01 | the file and that becomes a layout override.
| | 03:05 | That's the only difference.
| | 03:06 | It's the same file, but
it's named something different.
| | 03:09 | Now let's edit that
AltLogin file in Dreamweaver.
| | 03:13 | So I'm going to open up Dreamweaver and
I'm going to go to a File > Open and I'm
| | 03:19 | going to open my AltLogin page.
| | 03:23 | In the previous video, we put a little
line up here in the top that said this
| | 03:26 | was a template override.
| | 03:27 | I'm going to put a little paragraph up
here that says, This is a layout override.
| | 03:34 | And we could do other
things as well if we wanted.
| | 03:37 | See we have a fieldset tag here we
could take that out altogether. Bye, bye,
| | 03:42 | fieldset tag and I'm going to scroll on down
and find my closing fieldset. There it is.
| | 03:48 | So now I've made this very different.
| | 03:52 | This particular login box is going to
show on the top that has a line saying
| | 03:55 | this is layout override and it
has no fieldset associated with it.
| | 04:00 | Okay, so we're going to go
ahead and save those changes.
| | 04:05 | Now I'm going to go into Joomla and
I'm going to make another copy of the
| | 04:12 | login box, just so that you can see the
difference between what I'm doing on this web site.
| | 04:17 | So I'm going to duplicate my login
box and in the copy of the lgin box I'm
| | 04:23 | going to say Login as well.
| | 04:27 | And I'm only going to display this on
let's say Only on the pages selected and
| | 04:33 | I'm only going to put it on the Home page.
| | 04:35 | So now in the Home page we're actually
going to have two login boxes, unless I go
| | 04:40 | in and I change the
assignment for the other login box.
| | 04:45 | And for this specific login box we
have all of our Basic Options, same as the
| | 04:49 | other login box, but under Advanced
Options we have this item here called
| | 04:53 | the Alternative Layout.
| | 04:55 | If I click this dropdown menu,
now I have an alternative layout.
| | 05:02 | Remember all we did to get that
alternative layout to show up here was
| | 05:06 | simply make a copy of that core file
but call it something other than what
| | 05:09 | it was previously called.
| | 05:11 | And now it will just
automatically show up here in this drop down.
| | 05:13 | So I'm going to use the AltLogin for
the display of this particular login box.
| | 05:19 | Now when I say Save & Close and I go
back and refresh the Home page of the web site,
| | 05:24 | I have my first login box
that says, This is a template override.
| | 05:30 | And I have my second login box, see
how it has new fieldset around it, and it
| | 05:36 | says that it's a layout override.
| | 05:38 | You can only assign one
layout per copy of module.
| | 05:42 | That's why you had to duplicate that module.
| | 05:45 | I could take my existing copy of the
login box, the one we created for the
| | 05:49 | template override, and assign it
the new layout override if I wish.
| | 05:53 | That would apply to all pages of the web site.
| | 05:56 | This is a really wonderful way of making
two different layouts on your web site.
| | Collapse this transcript |
|
|
7. Joomla! Template Styles: Setting Exceptions for the Home PageWhat is a template style?| 00:00 | Template styles are one of the major
new features in Joomla 1.6 and we took a
| | 00:05 | look at these a little bit in our
Joomla! 1.6 Essential Training course.
| | 00:10 | Let's take a look at
them again while we're here.
| | 00:13 | We're going to go to Extension >
Template Manager. Mostly we've just been
| | 00:17 | skipping over the screen here in this
particular video, but we had a list of
| | 00:22 | various template styles that are
available here to us for this web site.
| | 00:26 | What a template style is is
essentially different ways that your template can
| | 00:31 | display differently on the web site and
we took a long look at this with beez2
| | 00:36 | and we made a copy of it
with an alternate tagline.
| | 00:39 | So just to review what those look like,
| | 00:41 | if I go into the beez2 settings here,
we had some parameters over here on the
| | 00:46 | right-side of the page and this is the
big advantage of template styles, because
| | 00:51 | you've always been able to put these
parameters into a Joomla template, whether
| | 00:56 | that's a commercial template or a
custom template, but you could only have one
| | 01:00 | set of values for those
templates for the entire web site.
| | 01:03 | You couldn't ever have different
copies of the template with different values
| | 01:08 | for different pages, for example.
| | 01:10 | So what we did in the Essential
Training was we took our site description for
| | 01:14 | most pages of the web site and said
it was the best olive oil in the world.
| | 01:19 | But on some of the pages, we
created a copy of that style and put in an
| | 01:24 | alternate tagline, and that said it
was a site description and we had "great
| | 01:29 | shopping, great values."
| | 01:31 | Easily without having to know HTML, CSS,
configure modules, or anything else,
| | 01:36 | we were just able to change our site
description on some of the pages of the web site
| | 01:40 | and assign it easily right here using a
template style without knowing HTML or CSS.
| | 01:46 | And what we would like to do is repeat
the same functionality on that changing
| | 01:50 | site description in our new template.
| | 01:55 | So right now, if we look at the
template style for ttoo, you'll see that we
| | 02:00 | actually have no parameters at all whatsoever.
| | 02:02 | That's because we haven't programmed any.
| | 02:04 | So over the next few videos, I'm
going to show you how to program those
| | 02:08 | parameters that show up on the right
side of the screen, so that your clients
| | 02:12 | will have something that they can
configure and we will make a copy of the
| | 02:18 | existing ttoo style and we will assign
the alternate tagline to a few pages of the web site.
| | Collapse this transcript |
| Editing the XML file| 00:00 | The first step in creating a
template style is to add a little bit of
| | 00:04 | programming to your XML file.
| | 00:06 | This programming will make the form
show up on the template style configuration page,
| | 00:12 | so that you've a place where
you can enter information about certain
| | 00:16 | kinds of parameters.
| | 00:19 | I'm going to start by going to File >
Open and I'm going to open up Templates >
| | 00:24 | Beez2 and I'm going to open up the XML
file that we have here, because I want to
| | 00:29 | see how they did it, and you can see
that we have a an opening config tag.
| | 00:36 | Then we have a field with the name
of parameters, a fieldset with the name of
| | 00:39 | advanced, and then we have field for
each one of those items that show up on
| | 00:45 | beez2 configuration area.
| | 00:47 | We have wrapperSmall and wrapperLarge,
and then we have the logo we can specify,
| | 00:52 | the site title, the site description,
the navigation position and the template color,
| | 00:57 | and then we close all those tags.
| | 01:00 | So there is some very helpful stuff
in here that I'm going to grab and I'm
| | 01:04 | going to include and the XML file for
our web site. So I'm also going to open
| | 01:10 | that by going to File > Open and I'm
going to go to the ttoo folder and open up
| | 01:17 | the templateDetails.xml file.
| | 01:21 | So, as of this moment, we only have all
the files in the template and the module
| | 01:26 | positions, but we don't have
the other part of this XML.
| | 01:30 | So I'm going to start by copying the
entire config tag all the way down to
| | 01:38 | /config, because I want to be
sure that a catch all of the tags and I
| | 01:41 | don't leave any unclosed.
| | 01:43 | We know that Joomla does not behave very
well when all of your XML tags are not closed.
| | 01:48 | So I'm going to start by
doing an Edit > Copy on that.
| | 01:52 | Then I'm going to switch over to my XML
file and I'm going to go ahead and Edit
| | 01:59 | > Paste, there we go.
| | 02:01 | So now I've all those beez
configuration items here in my XML file.
| | 02:07 | But I really only need one of these and the
one I need is the one about the description.
| | 02:13 | So I'm going to erase this field for
wrapperSmall and wrapperLarge. I'm going
| | 02:18 | to erase this one about the logo and
the site title. I'm going to leave the one
| | 02:24 | here for site description and I'll
edit it in just a second, then I'm going to
| | 02:29 | get rid of everything else.
| | 02:30 | All right, so be sure that you have
your tags closed correctly. So we have
| | 02:39 | config, config and /config.
| | 02:41 | We have fields and /fields,
fieldset and /fieldset, and then we have
| | 02:45 | field which is closed by the
slash at the end of the tag here.
| | 02:49 | The field name is site description.
| | 02:52 | That's pretty much what I'm doing.
| | 02:54 | I will need to change the label.
| | 02:55 | Right now, remember these labels are
calling a language file, which we are not
| | 02:59 | using on our web site.
| | 03:01 | So I'm going to have to put in Site
Tagline and we can put in a description.
| | 03:08 | "Enter the tagline that will appear at
the top of the web page" and I guess I
| | 03:16 | should spell consistently tagline. There we go.
| | 03:20 | It's going to be string.
| | 03:21 | In other words, it is going to be a
whole bunch of letters and spaces and stuff
| | 03:24 | that's going to go into that particular field.
| | 03:27 | So I'm going to go ahead and save my
XML file and that's the first part of
| | 03:34 | configuring our Joomla styles.
| | Collapse this transcript |
| Making changes to index.php and assigning style| 00:00 | In my last video I used the XML file to
set up the way for somebody to enter a
| | 00:06 | site description in the template style.
| | 00:09 | Now what I need is a way to receive
that description to index.php and then
| | 00:14 | manipulate it and display it on the web page.
| | 00:17 | We've got the information coming in
from the XML file and then index.php will
| | 00:22 | actually display that information.
| | 00:24 | So what I need to do is add that
display code to my index.php file and once
| | 00:30 | again we're going to take a look at the
way beez does this by going to File > Open.
| | 00:35 | In the beez_2.0 folder, which of
course is inside of your htdocs, inside of
| | 00:40 | templates, inside of
beez_20, you'll find index.php.
| | 00:45 | Go ahead and open that up.
| | 00:49 | Up here in the head of the document
we have a note about checking modules.
| | 00:53 | We're not doing that.
| | 00:55 | But then we have a note about getting params.
| | 00:58 | That's exactly what we're
going to need to do here.
| | 01:01 | We're going to need to get our site
description parameter and assign it to a variable.
| | 01:08 | So to do that, I am just going to go
and copy one of these, one of these lines,
| | 01:14 | with the little comment and say Edit > Copy.
| | 01:19 | Then I am going to open up my index.php
file, going into my ttoo folder inside of
| | 01:25 | Templates, and inside of index.php.
| | 01:29 | Then up here inside of that initial
php tag at the very top, I am going to
| | 01:35 | go ahead and paste in, Edit > Paste,
| | 01:37 | my little string of code
that I copied over from the other page.
| | 01:43 | Now I need to make this match.
| | 01:45 | So in my XML file I called this sitedescription.
| | 01:50 | That will go over here,
| | 01:52 | sitedescription, on the get side.
| | 01:56 | What we're doing is we need to
assign this to a variable name.
| | 02:00 | PHP variables start with a little dollar sign.
| | 02:02 | So I am going to assign this to
sitedesc just to make it a little bit shorter.
| | 02:08 | And because they don't have
to be called the same thing.
| | 02:12 | So this is where basically Joomla is
going into the parameters that are being
| | 02:17 | passed over from XML and it's
grabbing site description, the value of that,
| | 02:23 | and assigning it to a PHP variable which can
then be used here in my document site description.
| | 02:30 | Now I am going to scroll on down to
where I want this to actually appear.
| | 02:34 | So in my HTML, I have my div with my ID
of container, a div with an ID of header.
| | 02:41 | I have the information here for my web
page, a call to my logo, then I have this
| | 02:48 | call for my modules here that are
displaying the main navigation displaying at
| | 02:52 | the top of the page.
| | 02:54 | Just after that I am going
to add the following line.
| | 02:56 | <div id="sitedesc">. I like to be
consistent so I am going to call my ID the
| | 03:05 | same thing as my variable name.
| | 03:09 | Then I am going to add <?php echo $sitedesc; ?,
end that tag and then end the div.
| | 03:24 | So what does this mean,
this ?php echo site description?
| | 03:30 | We assigned our variable up
here at the very top of the page.
| | 03:33 | Remember, we took that value of
whatever somebody typed into the blank that was
| | 03:37 | called site description
coming from the parameters.
| | 03:39 | It was assigned to this variable,
just like algebra or something.
| | 03:43 | This is site description.
It starts with a dollar sign.
| | 03:46 | What we're saying is down here on the
web page, we're saying to just echo or
| | 03:52 | just display whatever happens to be
stored inside of that variable, right here
| | 03:57 | inside of this div on this web page.
| | 04:01 | So let's go ahead and save that.
| | 04:04 | When I refresh my front end of the web site.
We don't see it yet because we haven't set it.
| | 04:10 | So let's look in the backend of Joomla
down under Extensions > Template Manager.
| | 04:14 | We'll take a look at our
style right here, ttoo - Default.
| | 04:20 | When I click that, here we go.
| | 04:22 | We have our site tagline.
| | 04:23 | When I mouse over it, that description
that I typed in, enter the tagline that
| | 04:27 | will appear at the top of the web page.
| | 04:30 | So now I'll type in
"The Best Olive Oil In The World."
| | 04:34 | I'll say Save & Close and I'll
refresh this page. There it is!
| | 04:40 | We have our text showing up right
here at the top of the page, "The Best
| | 04:43 | Olive Oil In The World."
| | 04:44 | Okay, yeah, the formatting
isn't so hot. We'll get there.
| | 04:50 | Now the next thing I want to do is make
a copy of that style just by putting a
| | 04:55 | check mark next to it and
hitting the Duplicate button.
| | 04:58 | Now I have my default style that says
"The Best Olive Oil In The World," and I am
| | 05:03 | going to click this one and say
this is the Alternate Tagline.
| | 05:10 | This time for the Site Tagline I am going
to type in "Great Shopping. Great Values."
| | 05:18 | This, I am going to assign to
appear on the three shop pages on the web site,
| | 05:23 | just like that.
| | 05:25 | I'll go ahead and say Save & Close.
| | 05:29 | Now when I go to say the About page,
it's still "The Best Olive Oil In The World,"
| | 05:33 | but when I go to the Shop page,
it's "Great Shopping. Great Values."
| | 05:40 | So we've managed to display our site
description right where we want it to be up
| | 05:45 | on the web site and all
that's left to do is style it.
| | Collapse this transcript |
| Creating a new CSS file to override default.css| 00:00 | The last step in creating our
template style is putting in the CSS styles.
| | 00:06 | Of course we have to program it so
that we can get the text on the page.
| | 00:09 | Once the text is there, we know what we have
to work with and we can write a style for it.
| | 00:15 | So we put our site description here
inside of an ID of sitedesc, which I am going
| | 00:21 | to use to style this for the web page.
| | 00:23 | So I am going to go to my CSS > Edit CSS.
| | 00:27 | I am going to go to my default.css and
I am going to scroll down to the bottom
| | 00:31 | of my header section here.
| | 00:33 | I am going to put in my style,
which will be #header #sitedesc.
| | 00:44 | I would like this to float left.
| | 00:46 | That way it will
actually show up after the menu.
| | 00:50 | Then I am going to make it all
lowercase, so text-transform: lowercase.
| | 01:00 | I am going to make my font-style italic.
| | 01:11 | Lovely! But you know it would be
even more lovely if it was in Georgia.
| | 01:15 | So let's make that font-family
beGeorgia, Times, and serif.
| | 01:24 | I am also going to put in
some padding on the left there.
| | 01:30 | It looks a little off at
the moment. So padding-left:
| | 01:35 | 15px. There!
| | 01:38 | Now, it lines up nicely underneath the
menu and black isn't really quite the color.
| | 01:43 | So let's go ahead and give it a color,
maybe that dark brown #403a19. Nice!
| | 01:54 | We definitely need a little bit
more padding on the top there.
| | 01:57 | It's smashed up against
that menu, so padding-top.
| | 02:01 | Oh! Let's give it about 30px. Very nice!
| | 02:07 | Now I am ready to paste in the
style changes into my style sheet.
| | 02:11 | So Ctrl or Command+A to select all the
styles, Ctrl or Command+C to copy them,
| | 02:17 | hop into backend of Joomla, go to my
Template Manager, go to my Templates tab,
| | 02:23 | scroll all the way to the bottom,
click on ttoo Details, click on Edit
| | 02:28 | css/default.css, and then Ctrl or
Command+A to highlight everything and delete
| | 02:34 | it and Ctrl or Command+V to
paste in our revised code.
| | 02:38 | It's all there. Click Save &
Close and refresh the Home page.
| | 02:44 | We have a very nice looking,
"The Best Olive Oil In The World."
| | 02:48 | You could of course fiddle
around with that a little bit more.
| | 02:50 | You might put a little more top
padding on it to give it space between that
| | 02:53 | olive oil bottle and the actual tagline.
| | 02:56 | When we go to the Shop page, the
alternate tagline looks great as well.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thank you so much for watching Joomla!
Creating and Editing Custom Templates.
| | 00:05 | I hope you enjoyed the video
and I love getting feedback.
| | 00:09 | So be sure to take a look at my web
site at www.4webinc.com, and send me a note
| | 00:17 | about how you enjoyed this course or my
Essential Training course, or any of the
| | 00:22 | other courses that I have
available in the lynda.com library.
| | Collapse this transcript |
|
|
