IntroductionWelcome| 00:03 | Hi! I am Jen Kramer.
| | 00:05 | Welcome to Joomla 1.6 Essential Training.
| | 00:08 | In this course, we'll install Joomla
and set global configuration parameters,
| | 00:13 | including adding keywords and
metadata for search engine optimization.
| | 00:17 | After that we'll get to the
heart of Joomla by reviewing the CAM:
| | 00:21 | Categories, Articles, and Menus.
| | 00:24 | We'll add components and modules
for extra web site functionality.
| | 00:28 | We'll explore some of Joomla's latest
features including nested categories, the
| | 00:33 | Flash Uploader, and the Media Manager.
| | 00:36 | In addition, we'll change the look
of the web site using Joomla templates,
| | 00:40 | and we'll get a peek at the basics of
Joomla's new Access Control Level or ACL features.
| | 00:46 | Finally, we'll move the site we
create on a local computer to a web host
| | 00:51 | using Akeeba Backup.
| | 00:52 | So if you are ready, let's get
started with Joomla 1.6 Essential Training.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Exercise files are available to premium
subscribers of lynda.com or to those who purchase the DVD.
| | 00:07 | Simply download the exercise files to your computer
and place them on the desktop for ease of access.
| | 00:14 | Exercise files organized by chapter number.
| | 00:18 | When there are web site assets available,
| | 00:20 | such as text or images, you'll see a yellow overlay
indicating the name and the location of that file
| | 00:28 | within the exercise files folder.
| | 00:30 | I strongly recommend you watch these videos from
start to finish in order and don't skip around,
| | 00:37 | for your best learning experience. I'll be building
an entire website in Joomla 1.6 from start to finish.
| | 00:44 | So if you jump in at various points in time,
you may find it difficult to follow along.
| | 00:50 | Having said that,
| | 00:51 | I know some of you do like to jump
in at various points in time, so
| | 00:56 | if you take a look inside of one of the
exercise file folders, for example this one in Chapter 4,
| | 01:04 | the very first folder in each
chapter will contain two files,
| | 01:09 | an SQL file and a ZIP file.
| | 01:12 | These files contain the Joomla website at the very starting
point for each chapter of this video series. You do not need
| | 01:22 | to restore from these backups at any point
in time, if you're following along with me
| | 01:28 | and everything is working correctly. But if you get stuck
at some point in time or if you do skip around in your chapters,
| | 01:35 | you may find these files helpful so that you can
follow along with that particular point in the video.
| | 01:41 | I'll show you how to use
the ZIP file and the SQL file
| | 01:46 | to restore your site in a later video.
| | 01:50 | If you don't have access to the exercise files, you can
still follow along using your own material and still have a
| | 01:58 | fulfilling learning experience.
| | Collapse this transcript |
| Understanding Joomla!| 00:00 | You might have built a web site before
with Dreamweaver, FrontPage, or GoLive.
| | 00:05 | These tools typically create
what are called static web sites.
| | 00:09 | A static web site is quite simple.
| | 00:12 | Type in a web address like
www.lynda.com into your computer's web browser.
| | 00:19 | A web browser is a piece of software
that displays web pages from the Internet,
| | 00:24 | like Internet Explorer,
Firefox, Safari, Chrome, or Opera.
| | 00:30 | The request for the web page goes from your
computer, also called the client, to the web server.
| | 00:37 | Server is a tricky word that
means two different things.
| | 00:40 | One is a hardware sense of the word.
| | 00:42 | A server is a very powerful
computer that is shared in some way.
| | 00:46 | Server can also be used in the software sense.
| | 00:50 | This is software designed to serve up web pages.
| | 00:54 | Apache and Internet Information Server
are examples of server software that's
| | 01:00 | compatible with Joomla.
| | 01:01 | The web server is frequently used
interchangeably with the web host.
| | 01:06 | A web host is a service that
offers web servers for your use.
| | 01:10 | The server locates the page called index.
html in its files for lynda.com and it
| | 01:17 | sends a copy of this page back to the client.
| | 01:21 | It also finds any associated images,
CSS, Flash files, and JavaScript, and it
| | 01:27 | sends those along as well.
| | 01:29 | The client displays the page plus
the images and other associated files.
| | 01:34 | The system is static in that
the pages contained fixed content.
| | 01:38 | The server simply picks the right page
from the right location and sends it.
| | 01:43 | No processing of that page is required.
| | 01:46 | You create the web pages on your
computer, the client, and you send a copy of
| | 01:51 | those pages to the web server via FTP.
| | 01:54 | All the web server does is store those
pages and send out copies as requested.
| | 01:59 | A Content Management System or CMS
is very different than a static site.
| | 02:05 | A CMS is a web application-- software that
runs on the server instead of on the client.
| | 02:11 | For example, Microsoft Word
runs on your computer, the client.
| | 02:15 | Google Docs, however, runs on the server.
| | 02:19 | Both applications are designed to create
and edit word processing documents, but
| | 02:24 | the way they get that
job done is very different.
| | 02:27 | CMSs generally function
in the same kind of way from a
| | 02:31 | bird's-eye perspective.
| | 02:32 | The server software, middleware
software, and database software may vary, but
| | 02:38 | the functionality is pretty much the same.
| | 02:41 | Just like before, type in a web address
like www.twotreesoliveoil.com/index.php
| | 02:53 | into your computer's web browser.
| | 02:55 | Your computer sends the request
for this page to the web server.
| | 03:00 | The web server looks in its files,
realizes the page you've requested is written
| | 03:04 | in PHP, a programming language.
| | 03:07 | The web server knows it can't
send this page as-is to the client.
| | 03:12 | Some processing must be done first.
| | 03:15 | So instead, the web server
sends this request to PHP.
| | 03:20 | PHP looks at the document and
determines that some information needs to be
| | 03:24 | pulled from the database and then processed.
| | 03:28 | PHP is functioning as middleware in this way.
| | 03:32 | This means that PHP mediates the
discussion between the web server and the database.
| | 03:37 | The server and the database
can't talk to each other directly.
| | 03:41 | They need a translator that can
understand "server speak" and "database speak."
| | 03:46 | Others examples of programming
languages used in this role include ASP, .NET,
| | 03:51 | ColdFusion, Java, and Perl.
| | 03:55 | A database is a collection
of organized information.
| | 03:59 | Our particular database
in Joomla is called MySQL.
| | 04:03 | But other types of
databases include MSSQL or Oracle.
| | 04:08 | Access is a database that runs on your
laptop and is not suitable to use in a web site.
| | 04:14 | The database receives a request for
information from PHP via a database query.
| | 04:19 | The requested information is copied
from the database and sent back to PHP.
| | 04:25 | PHP arranges the database information
into the way specified in the PHP code.
| | 04:31 | The actual PHP code is stripped out
from the page and replaced with HTML,
| | 04:35 | according to the instructions on the page.
| | 04:38 | Now that the page is created and it
consists of HTML and associated files, that
| | 04:44 | is sent to the client to view.
| | 04:46 | All of this happens in the blink of an eye.
| | 04:49 | In order to run Joomla therefore, you
must have a web server configured with
| | 04:53 | Apache or IIS, PHP, and MySQL including the
right versions of those pieces of software.
| | 05:01 | You can check joomla.org for the latest
requirements and recommended web hosts.
| | 05:06 | So obviously, a CMS is way more
complicated than a static web site.
| | 05:11 | In fact, you may be a bit intimidated by
all of that technology running your site.
| | 05:17 | Why are CMSs preferred over static web sites?
| | 05:21 | Because of the power of the database,
web sites are much easier to maintain with
| | 05:25 | the CMS than they are with the static web site.
| | 05:28 | If you wish to make changes to a CMS
web site, you can change it without knowing
| | 05:33 | HTML, PHP, MySQL, or anything else,
which means your average client can easily
| | 05:40 | create new pages, link them to menus,
change content, and make other updates
| | 05:46 | without talking to you.
| | 05:47 | In a world where we increasingly
integrate photo galleries, calendars, social
| | 05:52 | media, news feeds, blogs, and other
dynamic information, a CMS becomes more
| | 05:59 | important due to the ease of
integrating these features into the web site.
| | 06:03 | If you are still feeling like a
CMS is complicated, don't panic.
| | 06:07 | This movie is as geeky as
the rest of the title gets.
| | 06:11 | Keep watching and you'll start to
feel more comfortable with Joomla very shortly.
| | Collapse this transcript |
| Planning your web site | 00:00 | Do you have a plan for this
web site you are about to build? No?
| | 00:05 | Well, you're not alone.
| | 00:07 | When we wrote term papers back in school
we were taught to write an outline first.
| | 00:13 | We were taught to write the middle of
the paper before the introduction and the
| | 00:16 | conclusion and we were encouraged to
proofread everything to make sure it
| | 00:20 | flowed from start to finish.
| | 00:23 | Creating a web site is not so
different from this term paper process.
| | 00:27 | First, you need to start with
the plan for what you're building.
| | 00:31 | You can then concentrate on building
the site pages of the web site, getting
| | 00:35 | some content in place.
| | 00:37 | After the inside pages are built,
go back to the Home page and get it in shape.
| | 00:42 | Finally, debug the web site and make
sure everything is working correctly
| | 00:46 | before you launch it.
| | 00:47 | In this course we'll be building a
Joomla web site for the Two Trees Olive Oil
| | 00:52 | Company based in Santa Barbara, California.
| | 00:55 | Your web site should reflect three
kinds of goals. First of all, the
| | 00:59 | organizational goals.
| | 01:01 | The site should be a reflection
of the organization behind it.
| | 01:05 | That organization, whether it's a
business, a nonprofit, school, club or your
| | 01:10 | own personal web site has a reason for existing.
| | 01:14 | What's the reason this
organization exists? Who does it serve?
| | 01:18 | What is it trying to achieve?
| | 01:20 | Understanding this background will
help you understand how the web site can
| | 01:24 | support the organization.
| | 01:26 | In the case of Two Trees Olive Oil
Company the organizational goal is to create
| | 01:31 | the most popular olive oil in the country.
| | 01:34 | They would also like to be used in
the most restaurants in the country.
| | 01:38 | They want to maintain an ethical
company that cares about its employees, its
| | 01:42 | customers, and the communities they serve.
| | 01:45 | To further that organizational goal
they put 5% of all sales proceeds to
| | 01:50 | employee development and
5% to charitable causes.
| | 01:54 | Finally, they are committed to
finding more efficient and environmentally
| | 01:58 | friendly practices in farming
and manufacturing olive oil.
| | 02:03 | They've recently rolled out a new
organic olive oil line that's thriving and has
| | 02:07 | been well received by chefs in the public.
| | 02:10 | Next, there are web site goals.
| | 02:11 | Once you understand the organization
the web site's goals become much clearer.
| | 02:16 | People visit the Two Trees Olive
Oil Company web site to find out more
| | 02:21 | information about the olive oil and
the company, about their sustainable
| | 02:24 | and organic practices, and to get
pricing and to find out where the olive
| | 02:28 | oil products are sold.
| | 02:30 | Restaurants need
information about ordering in bulk.
| | 02:33 | A contact page will allow restaurants
and customers to contact the company.
| | 02:38 | Finally, there are user goals to consider.
| | 02:40 | Think about why users are coming to the
web site in the first place. Who are they?
| | 02:45 | What do they want from this web site?
| | 02:47 | What environment are they in when
they're looking at this web page?
| | 02:51 | In general, users want to order olive oil,
find out more about the olive oil and
| | 02:56 | the company, and they want to
contact the company for more information.
| | 02:59 | Users also enjoy participating in a
monthly contest to win a 24-ounce bottle of
| | 03:04 | the flavor of the month.
| | 03:06 | This is a very brief summary of how to
think strategically about this web site.
| | 03:10 | If you'd like to learn more, and I
hope you do, be sure to watch my Web Site
| | 03:15 | Strategy and Planning title
available here at lynda.com.
| | Collapse this transcript |
| Understanding different versions of Joomla!| 00:00 | As of this recording there two
actively supported Joomla versions available:
| | 00:07 | Joomla 1.5 and Joomla 1.6.
| | 00:09 | You may occasionally encountered
Joomla 1.0 but Joomla 1.0 has not been
| | 00:14 | supported by the Joomla Project since July 2009.
| | 00:18 | Which current version of Joomla
should you use, Joomla 1.5 or Joomla 1.6?
| | 00:25 | Of course, it depends.
| | 00:26 | Joomla 1.6 is the first major new
version of Joomla in nearly three years.
| | 00:32 | It includes many new
features and functionalities.
| | 00:35 | Joomla has been rewritten in
many ways from the ground up.
| | 00:38 | For this reason, it will take some
time for Joomla 1.6 extensions and
| | 00:43 | templates to catch up.
| | 00:45 | As of this recording, there are nearly
7000 extensions in the Joomla extensions
| | 00:49 | directory but only a few
hundred run on Joomla 1.6.
| | 00:52 | Joomla 1.5 will be supported actively by
the Joomla community through April of 2012.
| | 00:58 | It is considered a long-term release,
meaning that it will be supported for a
| | 01:04 | longer period of time than other releases.
| | 01:06 | Joomla 1.6 will be actively
developed through July of 2011.
| | 01:12 | At that time it is expected
that Joomla 1.7 will be released.
| | 01:17 | This is another short-term release
expected to be replaced in January of 2012.
| | 01:22 | This version of Joomla, occasionally
called Joomla 1.8 but not officially named
| | 01:27 | as of this recording, will be another
long-term release and supported for some
| | 01:33 | longer period of time.
| | 01:35 | Long-term releases are expected to be
supported for a minimum of 18 months while
| | 01:39 | shorter releases may only
be supported for a year.
| | 01:43 | If you have sites built in Joomla 1.5
already, I recommend that you keep them there.
| | 01:47 | Unless you desperately need some of the
new functionality in Joomla 1.6 there's
| | 01:53 | no need for you to migrate your web site.
| | 01:56 | If you are building a new web site and you
need Joomla 1.6's features, build in Joomla 1.6.
| | 02:01 | Of course, you need to be sure that
there are enough templates and extensions
| | 02:06 | available for you to use to build the site.
| | 02:09 | So be sure to include evaluating
the right version of Joomla in your site planning.
| | Collapse this transcript |
|
|
1. Installing Joomla!Understanding the installation process| 00:00 | Before we get started with the
mechanics of installing Joomla it's nice to know
| | 00:05 | what the general steps are in advance,
and why you're doing what you're doing.
| | 00:09 | Joomla needs a web server, a
programming language, and a database available so
| | 00:13 | it can run correctly.
| | 00:15 | In this case, we'll be looking at
Apache as our web server, PHP as the
| | 00:20 | programming language, and MySQL as the database.
| | 00:24 | Your local computer, the one sitting
right there in front of you, does not have
| | 00:28 | this software installed on it so
we'll have to install it before we can
| | 00:32 | install Joomla. Fortunately all of this
software is free and open source, just like Joomla is.
| | 00:38 | Take the first letter of Apache,
MySQL and PHP and that spells AMP.
| | 00:45 | You may have heard of LAMP before
where the L stands for Linux, which is
| | 00:49 | frequently the operating system of a web host.
| | 00:52 | In your case it's likely you're running
either Windows or Mac as your operating system.
| | 00:58 | For the Macintosh we'll install MAMP, which
stands for Macintosh, Apache, MySQL and PHP.
| | 01:07 | For the Windows people we'll install a
program called either XAMPP or XAMPP,
| | 01:15 | depending on who you are.
| | 01:17 | The X can stand for any
particular operating system.
| | 01:20 | They have different versions of it
depending on what you're running.
| | 01:24 | Plus Apache, MySQL, PHP and Perl,
which is what the extra P stands for.
| | 01:31 | Once the software is running our
picture gets a little complicated. Rather than
| | 01:37 | having two computers talking to each
other, a client, running a Web browser, and
| | 01:42 | the server, running Joomla, Apache,
MySQL and PHP, we now have a single computer
| | 01:49 | which performs both functions.
| | 01:51 | Did I just blow your mind?
| | 01:54 | Then once MAMP or a XAMPP are running on
your computer we'll install Joomla.
| | 02:01 | Once Joomla is in place we can
start building our web site.
| | 02:05 | The other alternative is for you to get
some web hosting, install Joomla on your
| | 02:09 | web host, and work there.
| | 02:11 | I'll cover the positives and negatives
of working locally versus working on a
| | 02:15 | web host in the next video.
| | Collapse this transcript |
| Running Joomla! locally vs. on a web host| 00:00 | Some people choose to build their
web sites locally then move the site to a
| | 00:04 | web host for launch.
| | 00:06 | Other people build the site
directly on the web host. Which is better?
| | 00:11 | Of course, it depends.
| | 00:12 | Here are some guidelines.
| | 00:14 | There are several
advantages to running Joomla locally.
| | 00:18 | First of all, no one sees the site
before it's done so you can make as many
| | 00:22 | mistakes as you want.
| | 00:23 | There's no web hosting fees
until you're ready to launch.
| | 00:27 | There is no Internet
involved with running the web site.
| | 00:30 | That's great if you're working remotely,
like you are on an airplane or something.
| | 00:34 | However, there are several
disadvantages to running Joomla locally.
| | 00:37 | No one sees the process before you are done.
| | 00:41 | So if you are going in the wrong
direction your client can't intervene any
| | 00:44 | earlier in the process.
| | 00:46 | It also means that any
collaborators, like designers, engineers, content
| | 00:51 | specialists or search engine optimization
specialists, do not see the site until it's done.
| | 00:57 | And then you have to move the site
from your local computer to the web host.
| | 01:02 | The advantage to running Joomla on the
web host and building it there is you
| | 01:07 | don't have to install MAMP or XAMPP.
You can also install Joomla once and you
| | 01:12 | don't have to move the site later.
| | 01:15 | Finally your client can see what you're
doing while you're building the site as
| | 01:18 | can all of your collaborators.
| | 01:21 | The disadvantages to running Joomla
on the web host include: you pay for
| | 01:26 | hosting while you're developing the web site,
and if you're slow that could be quite a while.
| | 01:32 | You run the risk of someone
seeing the site before you are done, who
| | 01:35 | shouldn't see the web site.
| | 01:36 | However there are ways around
this covered elsewhere in this title.
| | 01:41 | You have to have an Internet
connection to work on the web site.
| | 01:44 | If that connection is slow working
on the webs ite can be quite painful.
| | 01:50 | What's best for you?
| | 01:52 | If you're the only person building a
web site and the only person you have to
| | 01:55 | make happy is yourself,
| | 01:57 | building the site locally makes great sense.
| | 02:00 | If you only have a dial-up Internet
connection you might also want to consider
| | 02:05 | building sites locally.
| | 02:07 | However, if you're going to have a
client and you're going to have people
| | 02:10 | helping you with the web site, you might
want to consider building on a web host.
| | 02:15 | I build all of my sites on a web host
personally because I'm always working with
| | 02:20 | distant collaborators and clients.
| | 02:22 | For the purposes of this training video
however, I will be building the web sites
| | 02:26 | locally on my Windows computer using XAMPP.
| | 02:30 | That way if you're following along
with me and with the Exercise Files we've
| | 02:35 | standardized things as much as possible.
| | 02:38 | Web hosts are all different, so it's
very hard to train you how to use a
| | 02:42 | specific web host out there.
| | Collapse this transcript |
| Web hosting overview | 00:00 | Just because your web host says they
support Joomla doesn't necessarily mean
| | 00:05 | they support Joomla well.
| | 00:06 | There's more to consider in
a web host than the price.
| | 00:10 | $5 web hosting can
sometimes be extremely expensive.
| | 00:14 | Here are some pointers for
picking out a good web host.
| | 00:16 | First of all make sure your web host
supports Joomla's minimum requirements.
| | 00:21 | These requirements are
posted on Joomla's web site.
| | 00:24 | On this page, as I scroll down, right
now we have the Joomla Requirements for
| | 00:28 | Joomla 1.5 here at the top of the page,
but if you scroll down a little bit
| | 00:32 | further you'll notice that we have the
requirements listed here for Joomla 1.6.
| | 00:37 | The technical requirements for Joomla
1.6 as of this recording include PHP 5.2
| | 00:44 | or higher and MySQL 5.0.4 or higher.
| | 00:48 | These are higher requirements than Joomla 1.5.
| | 00:50 | Also, as of this recording,
Joomla 1.6 is very new to the market.
| | 00:56 | So be cautious of hosting companies
who say they support Joomla. They may be
| | 01:00 | talking about Joomla 1.5 only.
| | 01:03 | Second, you want to be very sure
that your host provides great backups.
| | 01:07 | Many hosts do backups but sometimes
those backups are only available to
| | 01:12 | the hosting provider.
| | 01:13 | They are made in case the server
catches fire, gets flooded, or has some other
| | 01:17 | catastrophic failure.
| | 01:18 | These backups may not be available to you.
| | 01:21 | If there are backups available to you,
find out how often they're made and how
| | 01:25 | long it takes to restore from backup.
| | 01:27 | Ideally, a daily backup and
a weekly backup will be made.
| | 01:31 | The daily backup is a backup
of the previous day's site.
| | 01:35 | The weekly backup is made once a week
usually on Sunday and is held for a week
| | 01:40 | in case the daily backup fails.
| | 01:42 | Finally be sure to ask how long it
takes to restore from backup if required.
| | 01:46 | Some hosts can take days during
which your site is down or broken.
| | 01:51 | When you start looking for a great web
host for Joomla I encourage you to start
| | 01:55 | with the Joomla Resources
Directory at resources.joomla.org.
| | 02:00 | Here you'll find a list of what's
currently 22 companies who support Joomla
| | 02:05 | web hosting and these companies have
been vetted by Joomla that they do support
| | 02:11 | at least Joomla 1.5 as of this recording.
| | 02:15 | You can start by contacting these
companies to find out about their plans, how
| | 02:19 | their backups work. and whether they
are actively supporting Joomla 1.6.
| | 02:23 | As time goes by, more and more of
these companies will definitely be
| | 02:27 | supporting Joomla 1.6.
| | 02:28 | So be sure to ask them.
| | Collapse this transcript |
| Installing Joomla! 1.6 on a PC| 00:00 | In this next video, I'm going to
show you how to install Joomla 1.6, but
| | 00:06 | before you can install Joomla 1.6, you need to
have a way for Joomla to run on your computer.
| | 00:11 | On my Windows computer, I will be
running XAMP, which I talked about in an
| | 00:15 | earlier video, which allows me to run
Apache, MySQL, and PHP directly on my computer.
| | 00:23 | If you don't know how to install XAMP
or where to download it, I encourage you
| | 00:27 | to go check out David Gasser's video
"Installing Apache, MySQL, and PHP", which
| | 00:33 | is available in the lynda.com library.
| | 00:36 | And in chapter 5 there is a section on
installing XAMP, and you should probably
| | 00:41 | watch just that first video
on installing XAMP for Windows.
| | 00:44 | Once you have XAMP installed, you can go
to the Joomla web site, which is located
| | 00:50 | at www.joomla.org, and from here you
can download your copy of Joomla 1.6.
| | 00:56 | Joomla is doing a big promotion right
now for Joomla 1.6, so the big banner at
| | 01:02 | the top of the page features it.
And obviously there's a big orange download
| | 01:06 | button right there, which is where
you can go to download Joomla 1.6.
| | 01:10 | If you're visiting the Joomla site at a
later point in time and that banner is
| | 01:13 | not available, there's usually a link
somewhere. Over here on the right-hand side
| | 01:18 | of the page, you'll see the button to
download Joomla to get the latest version.
| | 01:22 | Whichever button you click on, you'll
go to the download page, and this is
| | 01:26 | joomlacode.org, which is where
all of Joomla's downloads reside.
| | 01:31 | And there are three versions
of Joomla 1.6. Don't worry.
| | 01:35 | The only difference is how these files
are compressed, and the one that we want
| | 01:39 | to download is the standard old zip file,
which is the very first one, and you
| | 01:43 | can see that that's the one that's
been most downloaded by most people.
| | 01:47 | Go ahead and click on that to download it.
| | 01:49 | Tell Firefox to save that file to
your hard drive, and Joomla 1.6 will go
| | 01:55 | ahead and download.
| | 01:57 | Now we can go ahead and minimize this window.
| | 01:59 | I'm going to go to my Start menu, and
I'm going to go to my Computer, and on my
| | 02:06 | C drive, I'll have a folder here for xamp,
and inside of xamp is a folder called htdocs.
| | 02:13 | Inside of this folder, there's
some default files that appear here.
| | 02:17 | I'm going to go ahead and erase those
by clicking the Delete key and sending
| | 02:21 | those files to the recycle bin.
| | 02:24 | Now I'm going to open another window by
going to my Start menu and going to my folder.
| | 02:32 | Over here on the side, I have a folder for
downloads, and here's my Joomla stable package.
| | 02:38 | I'm going to go ahead and double-
click on that to open it, and I'm going to
| | 02:41 | highlight everything that's here inside
my zip file by hitting Ctrl+A, and I'm
| | 02:47 | going to drag it into my htdocs folder.
| | 02:51 | This will take some time to
copy over all of these files.
| | 02:54 | While the files are copying over to
the htdocs folder, we can go ahead and
| | 02:58 | create our database that we're
going to need to install Joomla 1.6.
| | 03:02 | Let me minimize some windows here, so you
can see a little bit better what's going on.
| | 03:07 | In my XAMP control panel, I'm going to
click the Admin button next to MySQL, and
| | 03:13 | this will pull up MySQL here in Firefox.
| | 03:17 | If phpMyAdmin doesn't open
automatically in your default web browser--which
| | 03:22 | for me is Firefox--you can browse
to the phpMyAdmin web page by going to
| | 03:28 | http://localhost/phpmyadmin.
| | 03:35 | If you're on a Mac, go to
http://localhost:8888/phpmyadmin.
| | 03:46 | On the page where it comes up, right in
middle there's a spot to create a new database.
| | 03:50 | I'm going to type in my name,
which is joomla16, and I'm going to say
| | 03:57 | Create, and you'll see here that you get a
message saying that the database has been created.
| | 04:02 | That's all we need to do with phpMyAdmin
is just create the database, and Joomla
| | 04:07 | will populate that database with
information when we start with the installation
| | 04:12 | wizard, which is what I'll start with
as soon as the files are done unpacking.
| | 04:17 | We're done unpacking our files, so
now what I'm going to do is minimize these
| | 04:21 | windows, and I'm going to go to just localhost.
| | 04:26 | By going to localhost, I'll bring up
the Joomla installation screen here.
| | 04:31 | So the first thing you need to do is
select the language in which you want to
| | 04:34 | install the back-end of Joomla, and by
default English United States is chosen,
| | 04:38 | and that's what I want, so I'm
going to go ahead and click next.
| | 04:42 | In this preinstallation check, this
is making sure that your particular
| | 04:46 | environment for running Joomla is set
up correctly and will support Joomla 1.6.
| | 04:51 | The most important part of this screen
is the very top part where you can see
| | 04:55 | the php version and the XML support
and the configuration.php are writeable is
| | 05:01 | located when we have all green yeses there.
| | 05:03 | For the recommended settings, there are
recommendations and then there's actual settings.
| | 05:09 | In my case, the displaying the errors
is actually set to On, which is not a
| | 05:14 | recommended setting, but it won't
prevent us from installing Joomla 1.6, so I'm
| | 05:18 | going to go ahead and keep
going with my installation.
| | 05:20 | We'll go ahead and click the Next
button to go to the next screen.
| | 05:25 | This is where we get the GNU General
Public License, which is the software
| | 05:30 | license that authorizes us
to use this copy of Joomla.
| | 05:34 | Go ahead and read it, and when you
agree to it, go ahead and click next.
| | 05:38 | Now we're on a screen where we're
asked for our database configuration.
| | 05:42 | Some of this information has already
been filled in for you, and it's generally
| | 05:45 | correct--particularly if
you're working with XAMP.
| | 05:48 | If you're trying to install Joomla on
a web host, some of these settings may
| | 05:52 | be slightly different.
| | 05:53 | You need to make sure that you're
looking at what your web host gave you for
| | 05:57 | your database settings in order
to set this screen up correctly.
| | 06:00 | But if you're following along using
XAMP, what I'm telling you now should be
| | 06:04 | correct for your particular installation.
| | 06:07 | The database type and the
host name are both correct.
| | 06:11 | The username should be root, with no password.
| | 06:17 | If that sounds insecure to you, you'd
be absolutely right, but remember, we're
| | 06:21 | running this copy of XAMP locally on
our machine, and no one else will be
| | 06:26 | connecting to this website.
| | 06:27 | So, while this is a security issue,
it's not nearly as much of an issue when
| | 06:31 | you're running just a local copy of Joomla.
| | 06:34 | For our database name, we'll enter
joomla16, which was the database we just
| | 06:40 | created in phpMyAdmin, and you can leave
the other items set exactly as they are.
| | 06:46 | Click the next button, and if you
wind up on the FTP configuration screen,
| | 06:50 | you've configured your database correctly.
| | 06:53 | If you wind up with errors, go back and
double-check your settings for your web
| | 06:58 | host if you're trying to install on
your web host, and make sure you spelled
| | 07:01 | everything correctly if
you're trying to install with XAMP.
| | 07:04 | As stated here in the FTP
configuration screen, this is optional and most
| | 07:09 | users can skip this step.
| | 07:11 | Press Next to skip this step.
| | 07:12 | And in fact, we're going to do exactly
that. So we're going to skip that step,
| | 07:16 | and now we're in the main configuration screen.
| | 07:19 | All of these settings can be changed later,
but for now, here's what we're going to do.
| | 07:24 | For our site name, we're going to enter
the name of our site, Two Trees Olive Oil.
| | 07:32 | For our administrators
e-mail, we're going say it's
| | 07:35 | webmaster@twotreesoliveoil.com. New in
Joomla 1.6, it actually asks you for an
| | 07:44 | administrator username.
| | 07:45 | By default, it gives you the username of admin.
| | 07:49 | For years, Joomla has had admin as
the default login for the website and it
| | 07:54 | can be a security risk, so I strongly
recommend you use anything but admin for your username.
| | 08:01 | In my case, I'm going to use jen and
I'm going to enter my password, which is
| | 08:06 | 123456--also not terribly secure.
| | 08:11 | I'm going to re-enter that password.
| | 08:14 | If I the wished, I could install some
sample data which would pre-populate my
| | 08:19 | Joomla web site with some content.
| | 08:21 | That's great if you are trying to learn
Joomla 1.6 and you don't have exercise
| | 08:25 | files to follow along with.
| | 08:27 | In my case, I am going to
create all of my content.
| | 08:30 | I've actually already got it all ready to go in
my exercise files, so I'm going to skip
| | 08:35 | installing the sample data.
| | 08:37 | Now that my screen is
configured, I'm going to click Next.
| | 08:41 | And as the last step, it's reminding me
to remove the installation directory.
| | 08:46 | So I'm going to go back to my htdocs
window here, and I'm going to find the
| | 08:52 | installation folder, which is among all
of the folders and files here that are
| | 08:56 | associated Joomla, and I'm going to
click the Delete button on my keyboard,
| | 09:01 | which will send this folder
to the recycled bin. Yes.
| | 09:05 | Now when I return to my screen here in
Firefox and I click on the button for the
| | 09:10 | site, I'll see the front end of my web site.
| | 09:12 | If your screen looks like this, congratulations!
| | 09:15 | You've installed Joomla 1.6.
One final piece of advice:
| | 09:19 | In order to create this Joomla web site,
we had usernames and passwords for
| | 09:23 | our domain name registration, our web
hosting FTP in the control panel, maybe
| | 09:28 | another login for our trouble ticket system,
our Joomla database user, and our own Joomla login.
| | 09:35 | That's a lot usernames and
passwords to remember for just one site, and
| | 09:39 | if you're going to build a bunch of Joomla
sites, that problem just gets more complicated.
| | 09:43 | As a web professional, you should
have some way of storing all of your user-
| | 09:47 | names and passwords securely.
| | 09:49 | There are online repositories for
doing this, as well as systems that run on
| | 09:53 | your individual computer.
| | 09:54 | Be sure to look in to them and
find one that works free you.
| | 09:57 | By the way, listing them in a Word
document or storing them on a sticky note
| | 10:01 | under your keyboard is not secure.
| | Collapse this transcript |
| Installing Joomla! 1.6 on a Mac| 00:00 | We're looking at the joomla.org web page
and from here we are going to go ahead
| | 00:05 | and download a copy of Joomla 1.6 and
install it on our Macintosh computer,
| | 00:10 | which is already been loaded with MAMP
software. That's Macintosh, Apache, MySQL and PHP.
| | 00:18 | If you don't know how to install
MAMP, you need to take a look at David
| | 00:21 | Gassner's video, Installing Apache, PHP,
and MySQL, available in the lynda.com
| | 00:28 | Online Training Library.
| | 00:30 | From this home page of joomla.org you
can see a great big huge banner across the top,
| | 00:35 | which is current when I'm looking
at this web page. If it's still there when
| | 00:39 | you're looking at this video you can
only click on big green Download button to
| | 00:43 | download Joomla 1.6. If the banner is
changed by the time you visit the web site,
| | 00:48 | there is usually a second way to
download Joomla, so if I scroll down the
| | 00:52 | web page just a little more there's a
button over here that says Download Joomla,
| | 00:56 | Get the latest version.
| | 00:57 | So I am going to go ahead and click on
that and this is going to take me into
| | 01:01 | the Joomla code web site where I
can download my copy of Joomla.
| | 01:05 | There are three options to choose from.
There's a .zip, a tar.bz2 and a tar.gz.
| | 01:11 | The only difference between these files
is the way that they are compressed, so
| | 01:15 | we're going to go ahead and just
download the .zip file, which is well
| | 01:19 | supported by Macs and PCs.
| | 01:21 | So I am going to go ahead and click on
that and I am going to say OK, so I have
| | 01:25 | saved this down to my computer.
| | 01:27 | Now I am going to minimize my Firefox
browser and I am going to open up my
| | 01:32 | Macintosh hard drive and I am going to
go into Applications/MAMP/htdocs and
| | 01:43 | this is where Joomla is
going to go once I unpack it.
| | 01:47 | I'm switched over to my Downloads tab.
| | 01:49 | I am going to double-click
my download that I just did.
| | 01:55 | So this has opened up my download and
unzipped it for me. We can close this
| | 02:00 | Firefox window. I am going to go ahead
and click on all of these files and hold
| | 02:07 | down my Shift key to select them all
and I am going to move these into htdocs.
| | 02:14 | So we now have Joomla set up here
unpacked and ready to run within MAMP interface.
| | 02:20 | We can go ahead and close this. I am
going to go back to Firefox and I need to
| | 02:25 | open up MAMP interface and I am
going to open up the Start page.
| | 02:30 | And from the Start page I can access my
PHP MyAdmin through the link right here
| | 02:36 | and I need to create a new database.
| | 02:37 | So I am going to call this Joomla 16,
which is the name of my database.
| | 02:43 | I am going to go ahead and say Create and
it says that my database has been created.
| | 02:48 | Now when I go back to local host:8888,
I get my Joomla installer, which will walk
| | 02:58 | me through the rest of the installation process.
| | 03:01 | So first of all I need to pick the
language that we're using for Joomla and by
| | 03:06 | default English United States is chosen,
so that's terrific. I am going to click Next.
| | 03:12 | In the Pre-Installation Check it checks
to make sure things are set correctly,
| | 03:16 | the box at the top is most important
and all of my settings are good, so I am
| | 03:20 | going to go ahead and click Next.
| | 03:22 | It asks me to read this license,
which I encourage you to do, and if you agree,
| | 03:26 | go ahead and click Next and
then it is going to ask us for some
| | 03:30 | connection settings.
| | 03:31 | From this point I need to enter the
username and password, which by default for
| | 03:36 | MAMP is root is the
username and root is the password.
| | 03:39 | I will enter my database name, which
is Joomla 16, and I am going to go ahead
| | 03:44 | and hit the Next button. Assuming
that I have set things up correctly this
| | 03:48 | should move me on to the next
screen, which is the screen for FTP
| | 03:51 | Configuration, and as noted here in big
red letters this is optional and most
| | 03:56 | users can skip this step.
| | 03:57 | That is absolutely true.
| | 03:59 | So we are going to go ahead and
skip that step by clicking Next.
| | 04:02 | Then we are going to enter our site
name, which is Two Trees Olive Oil.
| | 04:06 | We will enter our
administrator email address, which is
| | 04:11 | webmaster@twotreesoliveoil.com.
We have an administrator username to enter.
| | 04:19 | By default for both Joomla 1.0 and 1.5 the
administrator username was always admin.
| | 04:25 | If you think about it, you've given
hackers half of the information they need to
| | 04:29 | hack into your web site if
they know your username.
| | 04:31 | I recommend to use anything and all
except for admin as your username. So I am
| | 04:38 | going to use Jen and I am going to
enter my administrator password which is
| | 04:42 | 123456 and I am going to confirm that. 123456.
| | 04:49 | If you scroll down the page a little
more there is an option to install sample data.
| | 04:53 | I'm not going to do that at this
time because we are going to be building
| | 04:57 | an entire web site from scratch and
the sample data is just something that I
| | 05:00 | have to delete later.
| | 05:02 | But if you want to install it for your
web site there is absolutely nothing wrong
| | 05:05 | with doing that. Then I am
going to click the Next button.
| | 05:08 | So we are all set and done here. The
last thing we have to do is remove the
| | 05:12 | installation directory. So to do that I
am going to go back to my hard drive,
| | 05:19 | Applications/MAMP and in htdocs
there's a folder here called installation and
| | 05:28 | I'm simply going to Command+Click and
pick Move to Trash or you can drag it to
| | 05:34 | the trash and now when I go back into
Firefox, I can go ahead and click on site.
| | 05:41 | And congratulations!
| | 05:43 | We've installed Joomla 1.6.
| | 05:44 | Your screen should look just like this.
| | Collapse this transcript |
| Restoring the .jpa exercise files using kickstart.php| 00:00 | In the process of completing this course,
you may find that you'd like to refer
| | 00:05 | to the exercise files that I've
provided in terms of the web site backups that
| | 00:10 | go with the start of each
lesson from each chapter.
| | 00:14 | And I'm going to show you how
to restore those backups now.
| | 00:17 | If your web site is working correctly
as you're building it, you do not need to
| | 00:20 | ever use any of these backups.
| | 00:22 | The backups are here only if you
wind up with some difficulty in the
| | 00:27 | web site, something's not working
correctly and you can't figure it out, or if
| | 00:31 | you're skipping around, even though
I've advised you that it's far better to
| | 00:35 | work through the entire
course from start to finish.
| | 00:37 | So, in the Exercise Files, in Chapter 1,
in folder 01_06, there are two files,
| | 00:47 | and you'll see the same
pattern throughout the course.
| | 00:50 | The two files are an SQL file and a zip file.
| | 00:54 | The zip file contains all of the files
and folders and images and php files,
| | 01:00 | everything that's required to run the
Joomla web site--except for the database.
| | 01:05 | The SQL file is the database.
| | 01:08 | So, restoration is a two-part process.
| | 01:11 | Part one is to replace all the files
that you had in place with the files that
| | 01:16 | I'm giving you here.
| | 01:17 | Part two is getting rid of the
database that you have and all its data and
| | 01:22 | replacing it with the data that you have here.
| | 01:25 | So I'm going to show you how to do that now.
| | 01:27 | We'll start by going to my htdocs folder.
| | 01:31 | Here's my htdocs folders inside of XAMP.
| | 01:34 | And for PC people, go to your C drive,
go to the xamp folder and go to htdocs
| | 01:40 | and you should see this exact same thing.
| | 01:42 | For the Mac people, you'll want to
look inside of your mamp folder and look
| | 01:46 | inside of htdocs there and you
should see something very similar.
| | 01:49 | These are all the files and folders
that make up your Joomla web site.
| | 01:53 | The first thing we're
going to do is delete these.
| | 01:56 | So, I'm going to click and drag to
highlight everything and click my Delete key
| | 02:00 | to send them all to the recycle bin.
| | 02:02 | So this is going to delete everything.
| | 02:04 | Then what I'm going to do is I'm going
to open up my zip file and I'm going to
| | 02:10 | unzip everything that's here, Ctrl+A to
highlight all those files, and I'm going
| | 02:16 | to drag them into my
htdocs folder. Click and drag.
| | 02:23 | So this is going to take a while to
unzip all these files and folders into
| | 02:27 | my htdocs folders. So while it's
happening, I'm going to open up my XAMP
| | 02:33 | control panel, click on the button for
Admin for MySQL, which will take me to
| | 02:37 | the phpMyAdmin page.
| | 02:40 | Over here on the left side of
phpMyAdmin, you'll notice that we have a
| | 02:43 | database called joomla16.
| | 02:45 | If I click on the name of that database,
you'll see the entire database that
| | 02:50 | makes up our Joomla 1.6 web site.
| | 02:53 | I have to do exactly the same process here.
| | 02:55 | I need to delete the data that's here in
the database, I'm going to create a new
| | 03:00 | database called joomla16, the exact
same name, and I'm going to dump the
| | 03:04 | information into that database.
| | 03:07 | It's very, very important for this
restoration to work correctly that your
| | 03:11 | database name does not change.
| | 03:13 | It should always be called joomla16.
| | 03:17 | You cannot call it anything else.
| | 03:20 | If you do, the files that you unzip
will not be able to talk to the database
| | 03:26 | without editing something
called the configuration.php file.
| | 03:30 | So, here's what we're going to do.
| | 03:32 | Here in phpMyAdmin, there's a tab here called drop.
| | 03:36 | That is a fancy way of
saying 'delete everything'.
| | 03:39 | So I'm going to go ahead and delete
that, and I'll get a message I'm going to
| | 03:43 | destroy an entire database. Am I sure?
| | 03:46 | I'm going to say OK.
| | 03:48 | And sure enough, that
destroyed that entire database.
| | 03:51 | We now have no database.
| | 03:53 | Now that we've gotten rid of that old
joomla16 database, we need to create a new one.
| | 03:58 | So here where it says Create new
database, we're going to put in joomla16, just
| | 04:04 | like that, and click the Create button.
| | 04:07 | This will create a new database for
us with no data in it. There we go.
| | 04:11 | Now what we need to do is import the
information that we have from the SQL file that
| | 04:18 | I've provided for you.
| | 04:20 | So I'm going to go to my Import tab and
I'm going to click my Browse button and
| | 04:25 | I'm going to browse for the SQL file
right here and say Open, leave everything
| | 04:30 | that's here in phpMyAdmin all
the same, and go ahead and say go.
| | 04:34 | And you'll see that we now have all of
the information here on the side and our
| | 04:40 | Joomla 1.6 database has been restored.
| | 04:43 | So let's take a look at how
the decompression here is going.
| | 04:47 | It looks like WinZip is done.
| | 04:48 | If I go to my htdocs folder, I can see
that I have all my files here in place.
| | 04:53 | If you are on a Mac computer and you
are using MAMP, you will need to edit the
| | 04:59 | configuration.php file before
you can complete this process.
| | 05:05 | I'm in Dreamweaver only because it's
a great program for editing lots of
| | 05:09 | kinds of files and I'm about to edit a php
file, so I've got Dreamweaver open to do that.
| | 05:15 | You can use pretty much any program to
make this change, any kind of text editor
| | 05:19 | will work, open source equivalent to
Dreamweaver called Composer is a wonderful
| | 05:24 | way to make this change, so don't feel
like you have to run out and get Dreamweaver
| | 05:28 | just to make this one little
change that I'm about to show you.
| | 05:31 | So again, Mac people only, running MAMP,
you'll need to go to configuration.php,
| | 05:37 | which you can get to by going to your
htdocs folder, so from my hard drive, I've
| | 05:43 | gone to xamp, and I've gone to htdocs.
| | 05:46 | Mac people of course you're going to go
to User/Applications/MAMP/htdocs folder.
| | 05:55 | And inside of htdocs you will
find your configuration.php file.
| | 06:00 | Go ahead and open that.
| | 06:02 | I've got my code blown up really big
so that you can see it nicely here.
| | 06:06 | This is the values that are in
configuration.php, and the one that will trip Mac
| | 06:13 | people on MAMP up is right here on line 14.
| | 06:18 | Windows people have a username of root and
no password when they're working with XAMP.
| | 06:23 | However, Mac people when working
with MAMP have a username of root and a
| | 06:29 | password of root which you'll need to
enter by typing it in in between the
| | 06:36 | single quotes, just as I've done here.
| | 06:38 | Save the file and you should be
able to continue on with your database
| | 06:44 | restoration process and getting
the copy of Joomla up and running.
| | 06:48 | So with all of the files unpacked,
with my database created and the
| | 06:53 | information imported from MySQL, I'm
now going to go to a new tab and I'm
| | 07:00 | going to go to localhost. There we go.
| | 07:04 | And you can see that we
have our Joomla web site.
| | 07:06 | And if I go to the back-end of Joomla,
here I am and I can log in with jen,
| | 07:12 | 123456, click my login button, and I'm
able to access the back-end of Joomla.
| | 07:19 | So restoring from these backup files
may seem awfully geeky and probably not
| | 07:24 | really for the faint of heart, but
this was the most consistent way that we
| | 07:28 | could find to restore your
Joomla web site using XAMP or MAMP.
| | Collapse this transcript |
|
|
2. An Overview of Joomla!A quick tour of the Joomla! interface | 00:00 | Now that we have Joomla installed,
it's time to get to the good stuff.
| | 00:04 | Let's go take a look at the
administrative side of Joomla and see what's possible.
| | 00:08 | Right now we're looking at the front
end of the web site, as many people call it.
| | 00:13 | The public facing web site is
displayed here on the front-end.
| | 00:17 | There's also a backend of the web site,
which is the administrator site of the web site.
| | 00:23 | So what I recommend you do is to leave the
front-end of the web site open in this tab.
| | 00:28 | Then open a second tab and I like tabs
because it's easy to flip between them,
| | 00:33 | but if you prefer windows that works
also, and this time we're going to go to
| | 00:37 | localhost/administrator.
| | 00:42 | If you're on a Macintosh, this should be
localhost:8888/administrator. Hit Enter
| | 00:52 | and you should see the Administration Login.
| | 00:55 | I am going to go ahead and enter my
username, Jen, and my password, 123456, and
| | 01:04 | here we are in the administration.
| | 01:07 | This is the Control Panel view in
Joomla 1.6, and it looks very similar to 1.5,
| | 01:13 | if you're familiar with that.
| | 01:14 | In that there are series of icons on
the left side of the screen that are
| | 01:18 | shortcuts that take you to places that
are also accessible through the menus at
| | 01:22 | the very top of the screen.
| | 01:24 | On the right side of the screen you see
some information about who were the last
| | 01:29 | five users who've logged into the site.
| | 01:30 | There is only one. That's me, the Super User.
| | 01:34 | It tells us about the top-five popular
articles, in other words which articles
| | 01:38 | people are visiting on your web site.
| | 01:39 | Right now there are no results.
| | 01:41 | That's because we have no articles,
and it will also tell us what the last
| | 01:45 | five added articles are for the
web site. Once again no results because we
| | 01:50 | haven't added any yet.
| | 01:52 | Let's take a look at some of the menus
that are available here as well in the
| | 01:56 | backend of Joomla. Under Site we have a
link back to the Control Panel, which is
| | 02:00 | the screen we are currently looking at.
| | 02:03 | We have a link to My Profile, which
is the place where I can go to edit my
| | 02:07 | username, my password, and a number of
other preferences associated with my
| | 02:12 | profile here on this Joomla web site.
| | 02:14 | We have a link to the Global
Configuration where we can set up things like meta
| | 02:19 | keywords and meta descriptions for the
site and other various global settings.
| | 02:24 | The Maintenance link takes us to
items called Global Check-in, clearing the
| | 02:28 | cache, and purging the expired cache,
which have to do with site management and
| | 02:33 | I'll cover them in a later video.
| | 02:35 | System Information tells us about
what version of PHP the server is running
| | 02:40 | and what version of Joomla we are
running exactly, and of course the Logout
| | 02:44 | button will log you out.
| | 02:46 | Under Users there are a number of new
options if you're familiar with Joomla 1.5.
| | 02:50 | One of the big new features in Joomla
1.6 is ACL, Access Control Levels, which
| | 02:57 | controls who can see which information
on the front-end of the web site and who
| | 03:01 | can create and edit certain
content on the backend of the web site.
| | 03:05 | In order to do that we work with the
User Manager, User Groups, and Access
| | 03:10 | Levels, and this is the menu where
we can configure that information.
| | 03:14 | There is also an option to Mass Mail
Users, which will mass mail everyone who's
| | 03:18 | registered for your web site.
| | 03:20 | I don't really recommend this as a
function for sending out email newsletters.
| | 03:25 | You're far better off going with a third
-party service than trying to use this
| | 03:29 | particular piece of functionality.
| | 03:31 | But if you need to send all of your
users a quick note saying the site will be
| | 03:34 | down or maintenance is going to be
happening, that can be a very handy utility.
| | 03:39 | Under Menus we have the ability to
create new menus for the web site or work with
| | 03:44 | the one menu that already exists called
Main Menu. We will be doing quite a bit
| | 03:48 | of that in the upcoming videos.
| | 03:50 | Under Content we have the ability to
manage our articles and our categories.
| | 03:55 | Those of you who are familiar with
Joomla 1.5 will notice that there's no
| | 03:58 | more Section Manager.
| | 04:00 | That's because we don't have
sections in Joomla 1.6 anymore. We have only
| | 04:04 | categories and those categories
can be nested many levels deep.
| | 04:08 | Featured articles are the formerly
called front-page articles in Joomla 1.5.
| | 04:14 | These are articles that have been
flagged to appear on the front-end of the
| | 04:16 | web site on the homepage specifically,
and the Media Manager is where you can
| | 04:22 | go to upload images, PDF files,
Word documents, and other various files
| | 04:26 | associated with your web site.
| | 04:29 | Components are pieces of
functionality that help to enhance Joomla.
| | 04:32 | Joomla comes with seven components by
default, but you can download many more
| | 04:39 | and install them to enhance your web site.
| | 04:42 | What are the big new components listed
here is the Redirect component, which will
| | 04:48 | redirect traffic from old
URLs to new URLs on the web site.
| | 04:53 | Under Extensions we have the ability
to manage our modules and our plug-ins,
| | 04:57 | which are other types of extensions
used in Joomla. We can also change the look
| | 05:02 | of our web site, not only on the
front-end of the web site but also on the
| | 05:07 | backend of the web site.
| | 05:08 | Joomla now ships with two
administrator templates.
| | 05:12 | The Bluestork template, which we are
looking at right now, and one called Hathor,
| | 05:16 | which is fully accessible and needs
WCAG 2.0 accessibility requirements.
| | 05:23 | There's also the Language Manager, which
can help to manage your web site if you
| | 05:26 | are running multiple languages, and
finally under Help there is many links here
| | 05:32 | to getting support at the Joomla support forums.
| | 05:36 | Links to the documentation wiki
at docs.joomla.org, and other useful Joomla links
| | 05:43 | to download extensions, various
translations of Joomla, the Joomla Resources
| | 05:48 | directory which I mentioned earlier
that talks about places to get web hosting.
| | 05:52 | The Joomla Community Portal.
A Security Center where you can learn more about
| | 05:57 | keeping your site secure. Resources for
developers who are coding extensions in
| | 06:02 | Joomla and the Joomla Shop, where you
can go and buy great Joomla T-shirts and
| | 06:07 | other various Joomla merchandise.
| | 06:10 | Up here in the upper right corner
you'll see that we have the ability to see
| | 06:13 | who's logged into the front-end
and the backend of the web site.
| | 06:17 | We can also see if we
have any messages available.
| | 06:20 | The View Site link here will open up
the front-end of the web site in a new
| | 06:24 | window or a new tab so we can take a
look at it, and the Logout button of course
| | 06:28 | logs us out of the backend of the web site.
| | 06:30 | Now that you are familiar with what's
here, let's take a look at some of these
| | 06:34 | features in a bit more detail.
| | Collapse this transcript |
| Modifying global configuration | 00:00 | The Global Configuration is where we can set
major configuration elements of the web site.
| | 00:06 | So that's what we are
going to take a look at next.
| | 00:09 | Let's go ahead and log in to the back
end of the web site using username of Jen
| | 00:13 | and the password of 123456. Log in.
| | 00:19 | I am going to tell Firefox to remember that.
| | 00:20 | Right here in the Control Panel, there
is an icon for the Global Configuration.
| | 00:27 | You can click on that or you can go to
Site > Global Configuration. Either way
| | 00:32 | it takes you to the same location.
| | 00:35 | Here in the Global Configuration,
we can set up a number of global
| | 00:40 | parameters about our web site.
| | 00:43 | So first of all, you'll notice that our
Site Name is located here, Two Trees Olive Oil.
| | 00:48 | We actually configured that as part
of the installation process for Joomla.
| | 00:52 | If we wanted to change that name at
this point, we could do so by making
| | 00:56 | the name change there.
| | 00:58 | The Site Offline feature is great if
you want to hide your web site behind a
| | 01:03 | login while you are developing it.
| | 01:05 | That's particularly important if you're
working on a web host for building your
| | 01:10 | web site rather than working on
something like XAMPP or MAMP.
| | 01:13 | You can do this by setting Site Offline
to Yes and clicking the Save button up
| | 01:20 | here in the upper right.
| | 01:21 | Those of you who are familiar with
Joomla 1.5 will notice that the Save button
| | 01:25 | here has the same kind of icon that
the Apply button had in Joomla 1.5.
| | 01:30 | The Apply button has been renamed to
Save in Joomla 1.6 and what this will do is
| | 01:36 | save our settings but leave us in the
screen where we can continue to edit.
| | 01:41 | Save & Close is the old save from Joomla 1.5.
| | 01:45 | In other words it will save whatever
changes you've made and close this window.
| | 01:50 | So I am going to go ahead and click
Save and if I go to the front-end of my
| | 01:55 | web site and click Refresh, you'll see
that we now have a login and we have to
| | 02:00 | log in into the web site in
order to see what's going on.
| | 02:03 | So this is a great feature to hide your
entire site behind a login while you're
| | 02:08 | developing the web site.
| | 02:09 | I am going to go back to the backend of
my web site and change that Site Offline
| | 02:13 | message back to No and click my Save
button again and refresh the homepage so
| | 02:20 | that we're looking at the full web site again.
| | 02:24 | If you scroll down a little bit,
you'll notice that we have some metadata
| | 02:27 | settings here that we can configure and
in your Exercise Files you'll see that
| | 02:33 | I have given you a meta
description and some meta keywords.
| | 02:36 | So I am going to go ahead and
highlight the text for the meta description and
| | 02:40 | pick Edit > Copy, and in the Meta
Description box I can click inside of it and
| | 02:47 | then say Edit > Paste.
| | 02:51 | You may have a little bit of
formatting to do to make sure that that actually
| | 02:54 | flows correctly there.
| | 02:56 | Then once again from my information,
I am going to go ahead and copy my
| | 03:01 | keywords, Edit > Copy, and in my Meta
Keywords box here I'll say Edit > Paste and
| | 03:10 | once again, I'll just clean that
up with a little bit of formatting.
| | 03:14 | The meta description and the meta
keywords that we set here in the Global
| | 03:18 | Configuration are the meta
description and the meta keywords that will show
| | 03:22 | for every page of your web site unless you
override them later in your Joomla configuration.
| | 03:28 | You can override them in an article for
example or you can override them through
| | 03:32 | a category or a menu item in Joomla 1.6.
| | 03:36 | I'll cover all of that later but it's
always good to start your site with a base
| | 03:40 | meta description and a base meta
keywords, just in case you happen to forget.
| | 03:45 | The Content Rights box is new in Joomla 1.6.
| | 03:48 | This is where you can indicate
something, that your content could be
| | 03:51 | distributed for example under our
Creative Commons License or that it's not
| | 03:55 | available for distribution. Whatever type of
rights you want to have associated with this content.
| | 04:00 | I am going to leave mine blank for the moment.
| | 04:03 | You have the option of showing or
hiding the Title and the Author meta tags.
| | 04:07 | From what I've been reading about this,
the Title meta tag has mixed results in
| | 04:11 | terms of search engine optimization.
| | 04:13 | It doesn't seem to matter
whether you show that or not.
| | 04:16 | Remember the Title meta tag is
different that the HTML Title tag which is very
| | 04:21 | important for search engine optimization.
| | 04:23 | This is a meta tag so this is very different.
| | 04:27 | The Author meta tag simply shows who
wrote the article as a meta tag in the head
| | 04:31 | of the document and that
maybe important to you or not.
| | 04:35 | So you can turn these on or off as you wish.
| | 04:38 | Up on the right side of the screen
here you'll notice that by default when
| | 04:43 | installing here on Windows, I have
Search Engine Friendly URLs turned on by
| | 04:48 | default, which is new again in Joomla 1.6.
| | 04:52 | However, all of these
other options are turned off.
| | 04:55 | Apache mod_rewrite may be important if
you're running your web site on a Linux server.
| | 05:01 | Be sure that you read the tooltip that
comes up when you roll your mouse over
| | 05:05 | the exclamation point and follow
those instructions to make this work
| | 05:08 | correctly on a Web server.
| | 05:11 | Adding a suffix to the URL will add .html
to the ends of the web pages on the web site.
| | 05:17 | If you don't turn on Add Suffix to URL,
if you're looking at the About page,
| | 05:23 | it would say localhost/about.
| | 05:26 | If you turn on Add Suffix to URL,
it would say localhost/about.html.
| | 05:33 | Some people feel that adding .html will
improve your ranking in the search engines.
| | 05:38 | Whereas other people feel like it
doesn't matter at this point in time.
| | 05:42 | So you can choose to turn this on
or not. I am going to leave it off.
| | 05:46 | Including site name in page titles is a
new feature in Joomla 1.6 that makes me
| | 05:51 | very happy because one of the first
plug-ins that I always installed on Joomla
| | 05:55 | 1.5 was a plug-in that would append the
site name to the article title to form
| | 06:02 | the HTML page Title tag.
| | 06:05 | We can now turn that on right here in
1.6 without installing a separate plug-in.
| | 06:10 | So I think this is very important.
| | 06:13 | Let's flip over to the front-end
of the web site just for a second.
| | 06:16 | So what this will do is instead of the
HTML title tag up here at the very top of
| | 06:21 | the browser bar where it says Home-
Mozilla Firefox, this will make the site say
| | 06:27 | Two Trees Olive Oil-Home.
| | 06:30 | So let me apply these changes here in the
backend of Joomla by clicking my Save button.
| | 06:35 | I am going to go back to the front-end
and Refresh and you see now that my HTML
| | 06:41 | Title tag is changed.
| | 06:43 | I think it is great for bookmarking
because having a page just called Home in
| | 06:48 | my bookmarks is not terribly helpful
and it's also good for search engine
| | 06:52 | optimization because the name of the
company is associated with the article title
| | 06:56 | and the search engines are more likely
to associate that content with your company.
| | 07:01 | There are some other screens that
are available here on the Global
| | 07:05 | Configuration: the System, the
Server and the Permissions tabs.
| | 07:09 | But I am going to come back to those at
a later point in time because those are
| | 07:13 | much geekier settings and the main
settings that we need to be concerned with
| | 07:17 | when initially configuring a
web site are all here under the Site tab.
| | 07:21 | So now that we are done looking at this,
we'll click the Save & Close button to
| | 07:25 | save our changes and
return us to the Control Panel.
| | Collapse this transcript |
| Using the Media Manager| 00:00 | The Media Manager is the place where
you could upload PDFs, Office documents,
| | 00:05 | images, and much more.
| | 00:07 | You can link from Joomla articles
to these assets for your web site.
| | 00:11 | So here I am in the
backend of my Joomla web site.
| | 00:14 | I am going to go ahead and log in
with my username of jen and my password
| | 00:18 | of 123456 and click the Login button and
I am logged into the back end of my web site.
| | 00:25 | You can get to the Media Manager in one
of two ways. You can either click on the
| | 00:29 | icon right here in the Control Panel
for the Media Manager or you can go to
| | 00:33 | Content > Media Manager. Either
way gets you to the same location.
| | 00:37 | Here in the Media Manager we have some
images that are installed by Joomla by default
| | 00:43 | and you can see that there are
some icons here that are Joomla logos.
| | 00:48 | If you look at the front end of the
web site you'll see that of course there is
| | 00:52 | a logo associated with this design and that
logo is located here in the Media Manager.
| | 00:58 | We also have a folder for banner ads,
which are the banner ads that are used by
| | 01:02 | the Banner Ad component, which we'll
cover in a later video, and we also have a
| | 01:06 | folder of images that are from the sample data.
| | 01:09 | We didn't install the sample data for
this web site but the images for the
| | 01:13 | sample data still install anyway.
| | 01:16 | If you scroll down the screen, you'll
see that we have a spot to create a folder
| | 01:21 | and notice that folder is created
directly inside of the images folder.
| | 01:27 | If you're familiar with Joomla 1.5
you know that previously all of our images
| | 01:32 | would go inside the stories folder
located inside of the images folder.
| | 01:36 | That's no longer true in Joomla 1.6
it's totally okay to put your images
| | 01:40 | directly into the images folder
without putting them in the stories folder.
| | 01:44 | In fact, no stories folder exists by default.
| | 01:46 | So I am going to go ahead and create
a folder called contact and click the
| | 01:53 | Create a Folder button and you'll
see that I have created a folder for
| | 01:57 | images here on my web site.
| | 01:58 | I can of course also
directly upload them to this folder.
| | 02:02 | Down at the bottom is an
interface for uploading a single image.
| | 02:06 | We can go ahead and do that by
clicking the Browse button and inside of
| | 02:10 | your Exercise Files in Chapter 2 in 02_03,
you'll see that we have an image of an olive tree.
| | 02:18 | Notice that the olive tree image is named
olive_tree. There is no space in the filename.
| | 02:26 | When working with Joomla it's very
important to make sure that you don't have
| | 02:30 | any spaces or funny
characters in your filenames.
| | 02:35 | What you want to do is instead of spaces
put in underscores or hyphens and don't
| | 02:40 | use any exclamation points, dollar
signs, ampersands, or anything like that.
| | 02:47 | Stick with just letters and
numbers, underscores and hyphens.
| | 02:51 | If you do put spaces into your
filenames, you may have trouble later linking
| | 02:56 | image areas into your
web site or linking to PDF files.
| | 03:01 | If you click that and say open and
then say Start Upload you'll see that our
| | 03:08 | olive tree image will upload
directly into the file structure here.
| | 03:14 | There's also some options up at the top
of the screen and if we click that these
| | 03:19 | are some options that are
available here that we can configure.
| | 03:23 | The Legal Extension (File Types)
refer to the types of files that can be
| | 03:28 | uploaded legitimately into the Media Manager.
| | 03:31 | So we have things like bitmaps, gifs,
and jpegs and pngs, which are image types.
| | 03:37 | We also have things like a csv or a doc,
which are Word document types, as well
| | 03:42 | as odgs and odps, which are
associated with the OpenOffice format.
| | 03:47 | The maximum file size is 10 MB,
which is a feature, not a bug.
| | 03:52 | That means the maximum file size
that you can upload to the Media Manager
| | 03:56 | is limited, and that's a good thing
because we don't want our clients taking
| | 04:00 | pictures off their digital cameras and
putting them straight into the Media Manager.
| | 04:04 | We want them to resize them and
reformat those pictures for the web first,
| | 04:09 | either using a program like Photoshop
or Fireworks or even with the software
| | 04:12 | that came with their digital camera.
| | 04:14 | That helps to reduce the file size and
improve the page load time for your web site.
| | 04:19 | Down here at the very bottom, we
have an option to enable the Flash Uploader.
| | 04:24 | I am going to leave this set to
no here on my local copy of Joomla.
| | 04:29 | The Flash Uploader allows you to
upload more than one image at a time.
| | 04:34 | The interface I showed you at the
bottom lets you upload one image at a time,
| | 04:37 | which is great if you only have one image.
| | 04:39 | But if you have a pile of 20 or 30 or
40 images, the Flash Uploader is really
| | 04:44 | great because you can
upload multiple images at once.
| | 04:47 | However, the Flash Uploader does not
appear to be functioning correctly when you
| | 04:52 | were in Joomla inside of XAMPP or MAMP.
| | 04:54 | So I am going to leave it off here and I
am going to go ahead and say Save & Close.
| | 04:59 | I now have another copy of Joomla 1.6
that I have running on a web server and I
| | 05:07 | did this just so I could show you
exactly how the Flash Uploader works.
| | 05:11 | So I've already enabled the Flash
Uploader and you can see interface down here
| | 05:16 | at the bottom of the screen changes.
| | 05:18 | So we can browse for our files and
I'll go ahead and then click the Browse
| | 05:23 | button and I can hold in my Ctrl key to
select multiple pictures in this folder.
| | 05:29 | I want those four and I can say Open
and you'll that these four images show up
| | 05:35 | at the bottom of the screen
that they're ready to be uploaded.
| | 05:38 | I could go to a couple of other folders
and pick out pictures to upload as well.
| | 05:42 | They'll all show up in the queue.
| | 05:44 | Then I can click the Start Upload
button and you'll see that the images
| | 05:49 | are uploading here.
| | 05:50 | Now underneath you'll see that you get
this thing that says that there is an
| | 05:53 | error that's occurred and
that the image didn't upload.
| | 05:56 | But it doesn't say why it didn't upload.
| | 05:58 | In fact, when you scroll back up the
screen you'll see that the images have
| | 06:02 | showed up in the Media Manager anyway.
| | 06:04 | So the error message in fact is the bug here.
| | 06:07 | The uploads did occur and
those images are functioning.
| | 06:10 | So I am going to flip back to my local
copy, my XAMP copy of Joomla here, and you'll
| | 06:16 | see that I am sticking with the
individual file upload because that Flash
| | 06:21 | Uploader doesn't work here.
| | 06:23 | If you have a lot of images that you
need to upload while working with a local copy,
| | 06:27 | there's absolutely nothing wrong
with going in through your normal file
| | 06:32 | explorer or file system on your Mac or
your Windows computer and browsing to the
| | 06:38 | right file and just copying the images
into the images folder within Joomla.
| | 06:43 | That would be a great way to
upload your pictures quickly.
| | Collapse this transcript |
| Using Joomla! help| 00:00 | Feeling little stuck when
you're working in Joomla 1.6?
| | 00:03 | Fortunately there's lots of
help built right into Joomla.
| | 00:07 | Here I am in the Control Panel and
right here at the top of the screen is
| | 00:11 | the option for Help.
| | 00:12 | The very first link is a link to
Joomla Help and these help screens will help
| | 00:18 | you get help with all
kinds of different audiences.
| | 00:21 | There is Beginners, Administrators,
web site designers, Developers,
| | 00:24 | Evaluators and so forth.
| | 00:26 | You can click on these links to get
help specifically tailored for you.
| | 00:31 | On the left side of the screen is
an alphabetical index of all kinds of
| | 00:35 | categories of help that you
can of course look at directly.
| | 00:39 | So for example if I look at Article
Manager > Articles, the very first item on
| | 00:43 | the list, you'll see that we get a
piece of help here that talks about the
| | 00:48 | Article Manager and
managing articles, which is great.
| | 00:52 | But of course I had to go here to the Help
menu in order to find out about the articles.
| | 00:56 | Fortunately in Joomla there are two
ways of doing everything and so if I go to
| | 01:01 | Content > Article Manager, so I am
actually now in the Article Manager, and here
| | 01:07 | there is also a Help button.
| | 01:09 | This Help button will give me contextual help.
| | 01:12 | So in a pop-up window here, this
comes up with the same article I was just
| | 01:16 | looking at under the Help menu but
by clicking the Help icon, I have my help
| | 01:21 | come up in a pop-up window that
specifically pertains to what I'm looking at on
| | 01:25 | the screen right now, which
happens to be the Article Manager.
| | 01:30 | Don't hesitate to click on these Help
icons as we are working through Joomla 1.6.
| | 01:36 | You'll find lots of helpful help and
it's all written by volunteers and it
| | 01:40 | resides at docs.joomla.org which is a
great place to go to get additional help
| | 01:45 | and of course you can always volunteer
your time and talent helping to write the
| | 01:49 | documentation for Joomla.
| | Collapse this transcript |
| Creating content in Joomla!| 00:00 | Now let's start working on
creating some content into Joomla.
| | 00:04 | To make an article appear on our web site
we have to follow three steps in this order.
| | 00:11 | One, create a category for that
content if it doesn't already exist.
| | 00:17 | Second, create an article within that
category. And third, create a link to the
| | 00:23 | article within the menu where
you'd like the link to appear.
| | 00:28 | In Joomla 1.5 we had sections,
categories, articles and menus, the SCAM.
| | 00:34 | In Joomla 1.6, the sections are gone.
| | 00:40 | We can now nest categories as
many levels deep as we wish.
| | 00:43 | But each article still has a single
category assigned to it in the end.
| | 00:48 | So our scam has now become that CAM.
| | 00:52 | You must create a category first,
article second, and the menu link third.
| | 00:59 | Due to the way that database is
constructed, you cannot go out of order.
| | 01:03 | Some users like to create all of the
categories for the web site first, then all
| | 01:08 | of the articles that live within those
categories, and then link everything up to the menu.
| | 01:13 | That's the process we're going to
use here in this training video.
| | 01:18 | Other people like to do
the process for each item.
| | 01:22 | It doesn't matter which methodology
you prefer in that regard, as long as you
| | 01:26 | keep the steps in order.
Category, article, menu, the CAM.
| | Collapse this transcript |
|
|
3. Creating CategoriesCreating categories for your site| 00:00 | Planning your categories may be the
hardest part of the process in creating
| | 00:04 | your Joomla web site.
| | 00:05 | It's very easy to create categories
from a button-clicking point of view.
| | 00:09 | But how do you know what categories to
create or how to hook them all together?
| | 00:14 | Why do you create a category in
one place, but not in another place?
| | 00:18 | It can be a little confusing.
| | 00:21 | What I typically do is start matching
up my categories based on the site map.
| | 00:26 | I look at the site map that client has
given me and then I create category for
| | 00:31 | each one of the top-level navigation items.
| | 00:33 | As the site map grows there are areas
where sub-navigation comes in and I will
| | 00:38 | create categories for
the sub-navigation as well.
| | 00:41 | That serves as a starting point for
determining what categories fit where on the web site.
| | 00:46 | Functionality may also impact how
categories are nested or created.
| | 00:50 | For example, if you want to create a
category blog, a blog format in which you
| | 00:55 | see introductory text from a bunch of
articles within a given category, you'll
| | 01:00 | need to create a category to group
those articles together and separate them
| | 01:04 | out from the other articles in the web site.
| | 01:06 | Likewise, if you want to do a list of
specific articles within the web site,
| | 01:11 | you will need to group all those
articles together within a category also.
| | 01:15 | So let's take a look at our site map
and see how the categories are formed for
| | 01:19 | our particular web site.
| | 01:20 | Here is the site map that the client
has given me and I have made some notes
| | 01:24 | about the categories and
they are shown here in bold.
| | 01:27 | So we will start with a homepage.
| | 01:30 | There's no category assigned
to the homepage. It just exists.
| | 01:32 | The homepage is going to
contain some introductory text.
| | 01:36 | There's no submenus on the page.
| | 01:38 | There is going to be Testimonials in one
column and the Latest News in another column.
| | 01:42 | Then we will go on to the About page.
| | 01:46 | This will have a category called About.
| | 01:48 | Inside that category there'll be three
other articles called "The Story Behind
| | 01:52 | Two Trees," a "History &
Timeline," and a page about "Our People."
| | 01:56 | We will then have another category
nested within the About category that will
| | 02:02 | cover growing, picking, extracting,
bottling and tasting the olive oil.
| | 02:06 | We will have the next top-level menu
item as the News and so we will have a
| | 02:11 | top-level category called News and that
will contain all of the news for the web site.
| | 02:16 | Inside of that we will have another
category called Media and inside of
| | 02:20 | the Media category we will have two more
categories, one for Video and when for Photos.
| | 02:24 | We're going to have a blog with some
videos from YouTube and we will have a blog
| | 02:28 | that have the photos of the day.
| | 02:31 | Under Shop we will have another series
of articles, including an article that has
| | 02:37 | some links to PDFs and will also
include a page of links that we will use the
| | 02:43 | Web links component to build, and we
will have a Contact Form, which we will use
| | 02:47 | the Contact component to build for that as well.
| | 02:50 | So that's our general plan for how this
web site is going to be put together and
| | 02:54 | I recommend you go through this
process with your client as well.
| | 02:57 | Take the client's site map and then
mark it up. Where are the various categories
| | 03:01 | going to be included on this particular web site?
| | 03:05 | That way you can build this out very,
very quickly without putting a lot of
| | 03:09 | thought behind it and you won't have
to go back and redo some work later.
| | 03:12 | So I am going to jump back into Firefox,
and I'm going to go to Content > Category
| | 03:20 | Manager and there's a nice little fly-
out here that will allow you to add a new
| | 03:24 | category to the web site.
| | 03:26 | That's exactly what we want to do.
| | 03:28 | So I'm going to go there and I am going
to title my category About. I can type
| | 03:35 | in an alias if I wish or leave it
blank and Joomla will fill it in for you.
| | 03:40 | Right now there's no parent and that's
good because this is top-level menu item
| | 03:44 | and we don't need to assign a parent to it.
| | 03:47 | It's published and then set for
the public to be able to be view it.
| | 03:50 | There are some other items on this page,
but we don't need them at the moment.
| | 03:54 | So I am going to go ahead and leave them blank.
| | 03:56 | And I need to create another category,
so what's greater about Joomla 1.6 is
| | 04:01 | that we have some new buttons
up here in right-hand corner.
| | 04:05 | I talked about Save and Save
& Close in an earlier video.
| | 04:08 | But look, we have another button here
which is going to save such a lot of time
| | 04:12 | in putting together web sites called
Save & New. And when I click guess this,
| | 04:17 | my About category is saved, as you see from
the message at the top of the page, and
| | 04:22 | I am given a blank form to create my
category called Our Process and this time
| | 04:30 | I'm going to assign it the parent of About.
| | 04:33 | So the Our Process category is a child
of About and I am going to go ahead and
| | 04:38 | say Save & Close, so that we'll go back
to the Category Manager and you can see
| | 04:43 | that now we have three
categories for our web site.
| | 04:46 | Uncategorized is a category that comes
with Joomla by default. You don't have to
| | 04:50 | use it but it does exist.
| | 04:53 | We then have the About category, and then
located under About is the Our Process category.
| | 04:58 | So I am going to go offline and I am
going to create the other categories that
| | 05:03 | are listed here in the site map,
including the News, the Media, the Video,
| | 05:08 | the Photos, the Shop categories.
| | 05:10 | And you should go ahead and do exactly
the same thing and I'll see in the next video.
| | Collapse this transcript |
| Modifying categories| 00:00 | Did you finish entering all of
your categories into the web site?
| | 00:03 | Let's see how you did.
| | 00:05 | From the Control Panel of the web site,
let's go to the Category Manager by
| | 00:09 | either clicking on the icon for it or
going to Content > Category Manager.
| | 00:14 | Here are all the categories that I
entered for the web site based on the site map.
| | 00:20 | And you can see that we start with the
uncategorized category, which is the one
| | 00:24 | that exists by default in Joomla.
We didn't create that one, but we did create
| | 00:29 | the other categories underneath.
| | 00:31 | You see that Our Process is a child of About.
| | 00:34 | That Photos and Video are children of
Media and Media is a child of News. Oh dear!
| | 00:42 | Do you see the typo there?
| | 00:44 | So let's go ahead and clean up that typo.
| | 00:48 | To edit a category all you need to do
is click on the word "Nwes" and we're going
| | 00:54 | to change the spelling here to
the correct News, just like that.
| | 00:59 | Make sure you erase the alias as well,
so we can also have the correct spelling.
| | 01:05 | Go ahead and hit the Save & Close
button, and that will take us back to the
| | 01:10 | Category Manager where you can see
that we now have all of our categories in
| | 01:14 | place and they are all spelled correctly.
| | 01:16 | Now that we have all our categories in
place, we're ready to move on to creating
| | 01:21 | articles for our web site,
which we'll do in our next video.
| | Collapse this transcript |
|
|
4. Creating ArticlesCreating individual articles| 00:00 | Now that we have the categories created for
this web site, it's time to create a few articles.
| | 00:05 | Each article needs to be assigned one
category, which is why we have to create
| | 00:11 | all of those categories
before we start building articles.
| | 00:14 | Notice again that I said each
article can be assigned to one category.
| | 00:19 | Just because we have nested categories
in Joomla 1.6, does not mean we have the
| | 00:24 | ability to assign multiple
categories to a single article.
| | 00:28 | If you're looking for a way to take an
article and assign it multiple ways of
| | 00:33 | categorizing it or classifying it,
what you're looking for is a functionality
| | 00:37 | called tagging, and tagging is available
with some third-party extensions called CCKs
| | 00:43 | or Content Construction Kits.
| | 00:46 | Things like K2 or ZOO or some of the
other extensions that are out there that
| | 00:51 | allow for tagging of articles.
| | 00:53 | So once again, each article can be
assigned only one category in Joomla 1.6,
| | 00:58 | even though we do have a
nested category structure.
| | 01:02 | So let's go ahead and get
started creating some articles.
| | 01:05 | I'm looking at the login screen here
for Joomla 1.6 and I've entered my
| | 01:09 | username Jen, my password
of 123456, and I'm logging in.
| | 01:15 | And here in the backend of Joomla
there are two ways to get to the Article
| | 01:19 | Manager where we can get started.
| | 01:21 | You can either click on the Article
Manager button or you can click on the Add
| | 01:25 | New Article button here in the Control
Panel, since that's exactly what we're
| | 01:30 | going to do is add a new article.
| | 01:32 | The same options are also available on
the Content menu under Article Manager
| | 01:37 | and Add New Article. Either way
you go takes you to the same place.
| | 01:40 | So I'm going to Add New Article, and
this is our article-editing screen and we
| | 01:47 | need to include certain kinds of
information to create an article.
| | 01:50 | First of all, we need to include a
title. If you notice, all of these
| | 01:53 | required items are starred.
| | 01:55 | And if your mouse over any of these
items, a small pop-up window will come up,
| | 02:00 | which will tell you more information
about what is expected for that particular
| | 02:06 | parameter here within the articles.
| | 02:09 | So my title of this article will be
"The Story Behind Two Trees Extra Virgin
| | 02:13 | Olive Oil," just shorten that just a little
bit, because it's kind of long for a title.
| | 02:19 | I'm going to assign this to a
category and that category is going to be
| | 02:24 | the About category.
| | 02:27 | Leave all of the other items that are
in here alone for the moment. I'll come
| | 02:31 | back to some of them later.
| | 02:33 | And down here in the bottom we have
a box for entering our article's text.
| | 02:37 | In your Exercise Files you'll find a
text document called Our Story and this
| | 02:44 | has got all of the information
here for this particular article.
| | 02:48 | What I'm going to do is highlight the
text for the article and pick Edit > Copy,
| | 02:55 | and then I'm going to click in my
Article Text box and I'm going to Ctrl+V here
| | 03:02 | on my PC and if you're on a Mac you can
do Command+V. And that will put the article
| | 03:08 | text here into the web site, and we
can go ahead and click Save & Close.
| | 03:15 | And Save & Close will take us back to
the Article Manager, where you can see
| | 03:18 | that we now have one article on our
web site and the information about that.
| | 03:23 | For example, that it's published but
not featured. Featured indicates that it's
| | 03:27 | appearing on the homepage of the web site.
| | 03:29 | What category it's assigned, the order
in which that particular article might
| | 03:34 | appear. Ordering applies to some aspects of
Joomla and I'll cover that a little bit later.
| | 03:38 | Who's able to see this particular article.
Tight now it's assigned to the Public.
| | 03:43 | Who it was created by, that's me,
Super User, and the date, and how many hits
| | 03:47 | it's had. Of course it has no hits,
because no one has seen it yet.
| | 03:51 | So in its most simple format, that's
how you create an article in Joomla.
| | 03:55 | Although the formatting for
it isn't very interesting.
| | 03:57 | I'll get into more
interesting formatting in my next video.
| | Collapse this transcript |
| Formatting articles| 00:00 | We created our first article in
Joomla but it's not terribly interesting in
| | 00:04 | terms of its formatting.
| | 00:06 | We copied some text our of a regular old
text file and we pasted it into Joomla
| | 00:11 | and while it's very functional and very
readable, it's just not interesting in
| | 00:14 | terms of its formatting.
| | 00:16 | So let's take a look at what we can
do in terms of adding a little bit of
| | 00:20 | interest to this text.
| | 00:21 | I am going to return to my Article
Manager by clicking on the icon here in the
| | 00:25 | Control Panel and here's a list
of all the articles we have so far.
| | 00:30 | There's just one, "The Story Behind Two
Trees." When I click on that and scroll
| | 00:34 | down to my editing box, you will
notice that there's some buttons on the top
| | 00:38 | of this editing window, and these
buttons of course have to do with editing
| | 00:43 | this particular article.
| | 00:44 | You can of course highlight some text,
"my great grandparents," and you could
| | 00:50 | then click a B for bold.
| | 00:52 | It works pretty much the way you would expect.
| | 00:55 | If I highlight some other words and
click the Italic button, I will make some
| | 00:59 | words that are italic.
| | 01:00 | There is a button here for Underlines.
| | 01:03 | However, I strongly encourage you to
not to do that, because text that is
| | 01:07 | underlined on the web is not clickable.
| | 01:09 | We expect underlined text to be clickable
because that's the way a link usually looks.
| | 01:13 | So I strongly recommend you to use
bolds and italics, but to stay away from the
| | 01:18 | underlines, even though we
have a button for doing that here.
| | 01:20 | There are buttons for numbered text,
but we are limited in the number of tools
| | 01:26 | that we actually have here in our
editing window, and what I would like to show
| | 01:29 | you next is how we can get a few more
tools that are available for editing text
| | 01:34 | here in our window up at the top of the page.
| | 01:36 | So I am going to go ahead and click the
Close button up here on the top of the page,
| | 01:40 | because I don't want to save any of
those little formatting things I just made.
| | 01:43 | I am going to go to Extensions >
Plug-in Manager and I am going to look for
| | 01:48 | TinyMCE. So right here on my
list is the editor for TinyMCE.
| | 01:53 | TinyMCE is the name of the program
that's running there inside of Joomla in the
| | 02:01 | article editing screen that gives us
all the buttons that allows us to change
| | 02:05 | the HTML and the formatting of our article.
| | 02:07 | So I am going to click that and over
here on the right side of the screen,
| | 02:11 | the very first item is Functionality.
| | 02:13 | Go ahead and change that to Extended
and there's a couple other things that may
| | 02:19 | be of interest here to you.
| | 02:20 | Code clean on load and Clean code on
save. These are the two settings that
| | 02:26 | would take any HTML that you put into your
document and oh so helpfully clean it up for you.
| | 02:33 | Now if you know HTML, this type of
behavior can be extremely annoying, because
| | 02:38 | he took great deal of time
to put that HTML in place.
| | 02:41 | So you can turn that off.
| | 02:43 | Clean code on load means
that as the article loads
| | 02:46 | it supposedly cleans up the HTML.
| | 02:49 | That's turned off by default.
| | 02:50 | But Clean code on save, means that any
time you hit the Save or the Save & Close
| | 02:55 | or the Save & New button, your code
will be cleaned up for you as well.
| | 02:58 | So let's change that to Never, because
we really just don't want TinyMCE making
| | 03:04 | HTML coding decisions for us.
| | 03:05 | All right, so now that we have our
Functionality set to Extended ,our Clean code
| | 03:10 | on load to off, and our
Clean code on save to Never.
| | 03:13 | go ahead and hit Save & Close, and
let's return to our article, which is under
| | 03:17 | Content > Article Manager. Here is The
Story Behind Two Trees, and when I click
| | 03:22 | that and scroll down, you
will see that, oh, my goodness!
| | 03:26 | We have so many more
buttons than we used to have.
| | 03:28 | Some of the great buttons that you have
available to you at this point include
| | 03:33 | this button right here on the
bottom row, the Paste from Word button.
| | 03:36 | This button is really important if
you're copying from a Word document. You copy
| | 03:41 | the text and you paste it into your document.
| | 03:44 | If you do that directly, you will copy
over a whole bunch of Word formatting
| | 03:48 | that will make your article very
bloated and it may also change the formatting
| | 03:51 | of the article by
overwriting some of your styles.
| | 03:54 | So what you want to do is, anytime
you're pasting from Word, use the Paste from
| | 03:59 | Word functionality here by clicking
this button, you will get a little window
| | 04:03 | where you can paste the content from
Word into this window first, and then it
| | 04:07 | will insert that content into your document.
| | 04:10 | That should help with cleaning up
some of the Word formatting that may be
| | 04:14 | carried over from the Word document.
| | 04:16 | I have been told by Macintosh people
that sometimes this formatting isn't
| | 04:21 | completely cleaned up with the Paste
from Word functionality, so do watch for
| | 04:25 | that if you are working on
Macintosh, but as a PC person I found this
| | 04:29 | functionality to be pretty clean and
it does in fact work fairly well while
| | 04:34 | working within Firefox.
| | 04:36 | There's some other functionality in
here. You'll notice that we have a great
| | 04:39 | button down at the bottom of the editor
that's called the Toggle Editor button
| | 04:43 | and when I click this, this shows
me the code that makes up my web page.
| | 04:48 | So you can see the HTML and edit it
directly if you wish. Clicking Toggle Editor
| | 04:53 | again will bring back the top of the screen.
| | 04:55 | Now the Toggle Editor button is slightly
different than the HTML button that you see up here.
| | 05:00 | Clicking on this HTML button
also gives you a view of the source.
| | 05:04 | Here's the difference.
| | 05:06 | The Toggle Editor button at the
bottom of the screen actually disables the
| | 05:10 | TinyMCE Editor temporarily.
| | 05:13 | So that TinyMCE isn't editing your code,
whereas the HTML button it's definitely
| | 05:19 | going through TinyMCE.
| | 05:21 | So if you are ever having any issues
with pasting in code where things are
| | 05:24 | getting edited out, you might want to
take a look at the Toggle Editor button,
| | 05:28 | instead of using Edit HTML
source button here in TinyMCE.
| | 05:31 | So take a look around now at the
various formatting options that you have here
| | 05:37 | and you can make a few formatting
changes to this article if you wish.
| | 05:41 | You could clean up some of the HTML.
| | 05:43 | You could go ahead and put
in some bolds or italics.
| | 05:47 | Make some bulleted lists,
whatever strikes your fancy.
| | 05:50 | Go ahead and do that and be sure to
click Save & Close when you're done editing
| | 05:54 | your article, so that all of your
formatting changes will be saved.
| | Collapse this transcript |
| Adding an external link| 00:00 | Creating links in Joomla
is pretty straightforward.
| | 00:03 | In this video I am going to talk about
how to make a link to an external web site.
| | 00:07 | In other words, I am going to link
to some place that's not within my
| | 00:11 | web site here within Joomla.
| | 00:13 | So I am going to first go to my article where
I can start making some edits and changes to it.
| | 00:18 | I am going to go to the Article Manager
by clicking on the icon and I am going
| | 00:21 | to edit "The Story Behind Two Trees."
| | 00:23 | To edit that all I have to do is
click the title and this will take me to
| | 00:27 | the editing screen.
| | 00:28 | In this particular article we talk
about "in addition another 5% of our olive
| | 00:33 | oil sales go directly to charitable
social, environmental, animal welfare and
| | 00:37 | human rights causes."
| | 00:39 | So our animal welfare cause is
the World Wildlife Foundation.
| | 00:43 | So I need to make a link from the
words "animal welfare" to the World
| | 00:47 | Wildlife Foundation web site.
| | 00:49 | To do that I am going to start by just
highlighting the words I want to become
| | 00:53 | the clickable portion of the link, so
those words "animal welfare," and then I
| | 00:57 | am going to click on the link icon, which is
on the second row of icons here in TinyMCE.
| | 01:02 | When you mouse over it,
you see Insert/Edit Link.
| | 01:06 | So I am going to click that and that
gives me a window where I can put in
| | 01:08 | information about that particular link.
| | 01:11 | So I am linking to http?.
| | 01:13 | Remember that any time you're linking
to an external web site you must always
| | 01:17 | start it with http://.
www.worldwildlife.org and for the target this controls
| | 01:30 | where the link will open.
| | 01:31 | Right now it will open up on top of our
existing web site and we have some other
| | 01:35 | choices, one of which is to open the
link in a new window and the other two
| | 01:40 | items generally have to do with frames,
if you're using frames for constructing
| | 01:44 | your web site, which we're not going to cover.
| | 01:46 | So opening the link in a new window
means that it'll either open up an entirely
| | 01:51 | new window or it will open up a new
tab within the browser, and whether the
| | 01:55 | window or the tab opens is under control of
the individual user who's looking at the web site.
| | 02:01 | Which is better in terms of treating your
external links really depends on your philosophy.
| | 02:06 | Some people say that it's best to
open an external link right in the
| | 02:10 | same window because that way people
can hit the Back button to return to
| | 02:15 | your site when you're done.
| | 02:16 | If you open a link in a new window or in
a new tab, you can't hit the Back button
| | 02:21 | to return to the web site. You have to
know that there are two windows or two
| | 02:23 | tabs available to switch back and forth.
| | 02:26 | Other people think that the separate
window or the separate tab is an advantage,
| | 02:31 | because then you can switch back to
that window and you'll still have the
| | 02:35 | original web site open.
| | 02:37 | So the debate continues to rage about
who's right and who's wrong on this,
| | 02:41 | but what I would suggest is whichever
methodology you pick that you are very consistent.
| | 02:45 | So if you're going to open external
links in a new window, you should do it for
| | 02:49 | all of the external links on your
web site, not just for some of them sometimes
| | 02:54 | and forget about it other times.
| | 02:56 | I like to open links in new windows so
I'm going to go ahead and change this to
| | 03:00 | open in a new window and then I am
going to click the Insert button and you
| | 03:04 | will see that my text
turns blue and it's underlined.
| | 03:07 | I can't click it here because I am in
editing window and so what I will need
| | 03:12 | to do is save this article and
normally what I would then do is open it up on
| | 03:16 | the front end of the web site and try
clicking the link, because testing these
| | 03:20 | links to make sure that you've got the
right web site and the link is working
| | 03:23 | correctly is very important.
| | 03:24 | However, I haven't showed you yet
how to hook up your articles to menus.
| | 03:28 | So we're going to have to wait a little
while longer before we can test this link.
| | 03:33 | Go ahead and hit Save & Close and we're
back to the Article Manager and that's
| | 03:37 | how you create an external link within
the text of an article here in Joomla.
| | Collapse this transcript |
| Adding an internal link| 00:00 | In my previous video I showed
you how to create an external link,
| | 00:03 | a link from an article here within
our Joomla web site to another web site
| | 00:07 | somewhere out there on the Internet.
| | 00:09 | The next kind of link I need to show
you how to create is to link from one
| | 00:12 | article to another article within
Joomla. However, at this point in time we only
| | 00:16 | have one article
existing in our Article Manager.
| | 00:19 | So the first thing I need to do is to
create a new article and then we can link
| | 00:23 | the two articles together.
| | 00:24 | Here's the way we do that.
| | 00:25 | So we are going to Content > Article
Manager > Add New Article and we're going
| | 00:30 | to create new article called History & Timeline.
| | 00:33 | So I am going to type that in in the
Title spot and I am going to assign a
| | 00:37 | category of the About and scroll on
down to our Article Editing box and in your
| | 00:44 | Exercise Files there is a document
that's got the History & Timeline text in it.
| | 00:49 | I am going to go ahead and
highlight that and say Edit > Copy.
| | 00:52 | Then I am going to click inside of
the Article Text box and do the Ctrl+V or
| | 00:56 | Command+V to paste that text into the box.
| | 00:59 | That's pretty much all I need to
do with this article for the moment.
| | 01:02 | So I am going to go ahead and
click the Save & Close button.
| | 01:05 | Now here we are back in the Article
Manager and you see that we have two
| | 01:10 | articles now for the web site.
| | 01:11 | So I am going to try linking from "The
Story Behind Two Trees" to the" History
| | 01:15 | & Timeline" article.
| | 01:16 | So I will need to edit "The Story
Behind Two Trees" by clicking on the article
| | 01:20 | title and scrolling down to the
Article Text box. Right here at the very
| | 01:25 | beginning of the article it says in
1903, which I am going to highlight that
| | 01:30 | will be the words that you click on to
go to the History & Timeline article.
| | 01:33 | I am then going to click a button down here
at the bottom, which is new in Joomla 1.6.
| | 01:39 | It's this button here that says Article.
So I am going to click this button and
| | 01:43 | I get a listing of all of the
articles here on my web site.
| | 01:47 | I want to link to the History &
Timeline article, which is this one right here.
| | 01:51 | So I am going to go ahead and click
that and notice that it's changed the
| | 01:54 | text here on my web site.
| | 01:56 | The buttons are really great in
that it makes blinking these two things
| | 01:59 | together fairly easy, but it does
insert the title of the article in place of
| | 02:04 | whatever text you had there.
| | 02:05 | What I need to do now is retype in
1903, which I will go ahead and do and
| | 02:10 | erase most of this link.
| | 02:13 | In 1903 and then I will go
back and delete that letter H.
| | 02:18 | So now I have a link to my other article
and we didn't even have to create menus
| | 02:23 | in order to do this, and that's thanks
to this new button down here in Joomla
| | 02:26 | 1.6, the Article Linking button.
| | 02:29 | I am done with this article now so I am
going to go ahead and hit Save & Close.
| | Collapse this transcript |
| Adding article images| 00:00 | Adding images to Joomla is
relatively straightforward,
| | 00:04 | once you have an image. Make sure
whatever image you use is in the right
| | 00:08 | dimensions and save it in
a small format for the web.
| | 00:12 | If you don't know how to do this,
there are several titles at lynda.com that
| | 00:15 | can show you how to save pictures in a
compressed file size for quick downloads on the web.
| | 00:20 | You don't want to take the pictures
right off your digital camera and then put
| | 00:24 | them directly on your web site. They
take forever to download and people won't
| | 00:28 | see them, because they take so long to download.
| | 00:30 | So to add a picture to your article,
once again, we're going to go our
| | 00:34 | Article Manager > Content > Article
Manager and I am going to open up "The
| | 00:39 | Story Behind Two Trees" article.
| | 00:41 | In an earlier video we uploaded a
picture of an olive tree and I would like to
| | 00:46 | go ahead and insert that into this article now.
| | 00:48 | So I'm going to scroll down here and
I am going to click right here right
| | 00:52 | before the words "in 1903."
| | 00:53 | And then I am going to click this Image
button down here at the bottom of the page.
| | 00:58 | This will pull up a window into my
Media Manager and you can see that I've got
| | 01:03 | a lot of options here.
| | 01:04 | I have got all of the images that
are in my Media Manager at the top.
| | 01:08 | I also have the ability to upload a
picture directly into the Media Manager
| | 01:11 | through this interface.
| | 01:13 | So I am going to click on the olive tree,
which is the picture I would like to
| | 01:16 | insert into document.
| | 01:18 | This thing here called the Image
Description refers to the Alt tag in HTML.
| | 01:24 | This is the text that search engines
read to find out what picture is all about,
| | 01:29 | since search engines can't see pictures.
| | 01:31 | So it's a great place to put
some keywords in for your article.
| | 01:34 | It's also what will be read to someone
who has any kind of visual disability
| | 01:39 | if they are using a screen reader, and
finally, if for some reason the picture
| | 01:43 | doesn't display on the web site, the
Alt text will be displayed on the web site
| | 01:47 | describing what this picture is.
| | 01:49 | Ideally, you want to make this a
relatively good description of what the photo is,
| | 01:53 | so I'm the put in "Picture of Olive
Tree" and I'm also going to align this picture.
| | 02:01 | Right now it's not set, and if
it's not set the picture will show up
| | 02:05 | right here in the editor with the
text following after it, aligned to the
| | 02:10 | bottom of the picture.
| | 02:11 | Usually you want it to align this
either to the left or the right, so that the
| | 02:15 | picture will have the text
wrapping around it really nicely.
| | 02:17 | I am going to put it over on the right
side of the page and now I am going to
| | 02:21 | say Insert and you can see that our
picture is here nicely aligned on the
| | 02:27 | right-side of the page.
| | 02:28 | You might also be wondering about
the tree icon up here in TinyMCE.
| | 02:34 | This is another method for entering a
picture into your document. If I click
| | 02:39 | the tree icon here, you'll notice that I
have to know the image URL in order to use this.
| | 02:44 | In other words, I have to type in the
path to my image and for most clients,
| | 02:49 | that's really hard to do and sometimes we
developers also don't quite get that right either.
| | 02:53 | So I recommend you stay away from the
tree icon in TinyMCE and use the Image
| | 02:59 | button at the bottom. It's much easier
to browse for the picture that you want.
| | 03:02 | So now that you have got your picture
in this article, go ahead and scroll back
| | 03:05 | on up to the top and click Save & Close.
| | 03:09 | That's all the editing we need
to do on that article for now.
| | Collapse this transcript |
| Adding a YouTube video to an article| 00:00 | In your Exercise Files, you will
find a link to this YouTube video.
| | 00:04 | Our client would like to include this
video from the California Weekly Podcast
| | 00:08 | which describes the process of creating
extra virgin olive oil and they would
| | 00:12 | like to put it directly on the Joomla web site.
| | 00:15 | Fortunately, YouTube
offers a method for doing this.
| | 00:18 | If you scroll on down the page, at the
bottom of the video you'll notice this
| | 00:22 | Embed button and if you click that,
this will go ahead and give you some
| | 00:27 | code that you can then copy and put into
your Joomla web site, which will show the video.
| | 00:32 | You can make some changes down here at
the bottom pertaining to that video in
| | 00:36 | terms of what size video you want to
include, whether it's a 480 pixels wide
| | 00:42 | or 640, simply by clicking on the boxes here
or you can type-in custom dimensions here.
| | 00:48 | I am going to use the 480 dimensions
for this particular video and I am going
| | 00:54 | to go ahead and copy this by
highlighting the code and then going up to my
| | 01:00 | Browser window and going Edit > Copy.
| | 01:02 | Now I am going to flip back over here
into Joomla and I am going to go back into
| | 01:07 | my Article Manager and create a new
article for this particular video by going
| | 01:11 | to Content > Article Manager > Add New Article.
| | 01:15 | The title for this article will be
"Growing and Manufacturing Extra Virgin
| | 01:25 | Olive Oil," and I am going to put it in the
Video category, which is under News and Media.
| | 01:32 | And now down here in the Article
Text, if I toggle my Editor and erase
| | 01:37 | whatever is there and I paste in my
video code and I go ahead say Save, you'll
| | 01:41 | notice that it's gone.
| | 01:44 | And in fact if I toggle the
Editor it's been stripped out.
| | 01:48 | This is a feature and not a bug.
| | 01:50 | Joomla is very concerned about
security and one of the things that I could
| | 01:54 | do if I was a malicious person would
be to put in some code here that could
| | 01:59 | hack the Joomla web site.
| | 02:00 | So what Joomla does by default is it
creates a black list of tags, in other
| | 02:04 | words banned tags, and these are HTML tags
| | 02:08 | not allowed to be used
within your Joomla web site.
| | 02:10 | What we need it to do is to say that
our super users, who we both are, are
| | 02:16 | trusted users for this web site and
turn off this blacklist for super
| | 02:20 | administrators only.
| | 02:22 | We will leave it in place for some
lower-level users, because we don't trust
| | 02:26 | them as much as we do our super users.
| | 02:28 | So in order to this, go ahead and save
and close your existing article here and
| | 02:34 | up in the upper right-hand corner in
Joomla there is a button for Options, and
| | 02:39 | if you click this Options button there
is a bunch of options in here and I'll
| | 02:42 | go through some of these later, but we are
interested in the tab called Text Filters.
| | 02:47 | So this is listing the existing
groups here in Joomla right now.
| | 02:52 | By default, we have Public, Manager,
Administrator, Registered, Author,
| | 02:56 | Editor, Publisher, and Super Users,
and by default the filtering type that
| | 03:01 | they have is the Black List.
| | 03:03 | If you roll your mouse over the
Black List drop-down on any one of these,
| | 03:07 | you'll get an explanation of exactly
what blacklisted tags exist within
| | 03:12 | Joomla, attributes that are
blacklisted within Joomla, and what white listing
| | 03:16 | and so forth means.
| | 03:17 | So you can go ahead and
read this. It's very helpful.
| | 03:21 | What I want to do is change my Black
List for my Super Users to No Filter.
| | 03:25 | If you are a Super Administrator and
you can get into the back-end of Joomla,
| | 03:29 | there's all kinds of havoc that you can wreak.
| | 03:31 | You don't have to just put in
some malicious code into an article.
| | 03:35 | You can destroy the entire database.
| | 03:37 | So I don't think the Super Users really
need to have black list filtering here.
| | 03:42 | So I have set them have no Filtering at all.
| | 03:44 | In other words, a Super User can
put in any kind of HTML they want into
| | 03:48 | a particular article.
| | 03:50 | Go ahead and click Save & Close, and
I am going to go back into the "Growing
| | 03:53 | and Manufacturing Extra
Virgin Olive Oil" article.
| | 03:56 | Before I paste in my YouTube
code again, I am going to put in a
| | 03:59 | little introductory text.
| | 04:01 | So we will say something like "This
video describes growing olives in the Ojai
| | 04:11 | Valley and turning them
into extra virgin olive oil."
| | 04:19 | Now I am going to hit my Toggle Editor
button and I am going to go ahead and
| | 04:23 | paste in my iframe code one more time.
| | 04:26 | Now when I switch back over into
the full TinyMCE Editor you will see a
| | 04:30 | black box, which is where the video will play
where we hook this article up to the web site.
| | 04:36 | Go ahead and click Save & Close and
now we've got a YouTube video included
| | 04:41 | in our article here.
| | Collapse this transcript |
| Linking to a PDF or other document| 00:00 | Our next task is to create
the Shop Page for the web site.
| | 00:03 | The Shop Page, if you take a look
at your site map, includes two PDFs:
| | 00:07 | a link to a catalog and a
link to the company brochure.
| | 00:11 | The company isn't ready for a full
ecommerce solution yet, but they would like
| | 00:15 | to get a little bit more known in a
wider community and they will go ahead and
| | 00:18 | put in a shopping cart at a later
point in time, just not right now.
| | 00:22 | So in order to create the Shop page the
first thing we need to do is upload our
| | 00:27 | two PDFs to the Media Manager.
| | 00:30 | Once those are in place then we can
create an article through the Article
| | 00:34 | Manager and link to the PDFs from there.
| | 00:37 | So to start we need to go to the Media
Manager, which we can get to by clicking
| | 00:40 | on the icon right here on our
Control Panel, and if we scroll down to the
| | 00:45 | bottom of the page and click our Browse
button, we will go ahead and browse for
| | 00:50 | Chapter 4 file 04_07.
| | 00:53 | Here is our two files: the
ttoobrochure and the ttoocatalog.
| | 00:56 | So we will have to upload these one at
a time, and there is our ttoobrochure.
| | 01:02 | Now I am going to click the Browse
button one more time, select the catalog,
| | 01:06 | Open and start upload.
| | 01:07 | So now we have our two PDFs in place.
| | 01:10 | Remember those names because we're
going to need those to make the link to the
| | 01:14 | PDF when we get back into our Article Manager.
| | 01:17 | So now I am going to go to Content >
Article Manager > Add New Article and the
| | 01:23 | title for this web page will be Shop and
our Category for this will also be Shop.
| | 01:29 | Scrolling down to the Article textbox,
in our Exercise Files there is all the
| | 01:35 | text that you need for this particular article.
| | 01:37 | So I am going to highlight all of that
and say Edit > Copy. Click back in my box
| | 01:44 | here and Ctrl+V or Command+V
to paste the text in place.
| | 01:49 | One thing you may be wondering about
at this point is the email address that
| | 01:54 | you see here listed within this text
and whether we should be making a link so
| | 01:59 | that it becomes a clickable email link.
| | 02:01 | Joomla will actually put that link in
there for you, and this is one of the
| | 02:06 | many great features of Joomla. It will
turn that twotreesoliveoil.com into a
| | 02:11 | clickable email link and behind-the-
scenes it will use JavaScript to encrypt
| | 02:16 | that -mail address to prevent the
spammers from scraping that email address
| | 02:21 | and adding you to a bunch of different
lists, so you can safely put your email
| | 02:24 | address on the web site.
| | 02:26 | Just a really great feature.
| | 02:28 | So I'm leaving the email address alone.
| | 02:30 | I don't need to turn that into a link.
| | 02:32 | Joomla will do that for me later.
| | 02:34 | Scrolling down to Download Brochure, I
am going to go ahead and highlight that
| | 02:39 | text and click the Link button.
| | 02:42 | Here in the Link URL I am going
to type in images/ttoobrochure.pdf.
| | 02:51 | Remember that there is no more
stories folder as there was in Joomla 1.5.
| | 02:55 | We uploaded our PDFs directly into the
Media Manager right into the Images folder.
| | 02:59 | So this is the correct path to our PDF.
| | 03:02 | You can open it in a new window if you
wish or you can open it in the same window.
| | 03:06 | Go ahead and say Insert and
we've made our link to our brochure.
| | 03:09 | I'm now going to highlight the words
Download catalog and click my link icon one
| | 03:15 | more time and make my link to
the catalog, images/ttoocatalog.pdf.
| | 03:23 | Notice that my file name for this PDF
doesn't contain any spaces, which is very,
| | 03:28 | very important for working with files in
any web development system, but also in
| | 03:33 | Joomla. Sometimes Joomla won't treat
files with spaces in their names correctly.
| | 03:39 | So use underscores or hyphens if you
need to separate things into separate words
| | 03:44 | or you can use camel case using
alternating capital letters and lowercase
| | 03:48 | letters in order to work your file
names, or you can just use all lowercase
| | 03:52 | letters as I usually do.
| | 03:54 | I never remember what I've made
capital and what I have made lowercase.
| | 03:58 | So I tend to just go with all
lowercase for my file names.
| | 04:01 | Go ahead and click Insert and we've
created the two links here to our PDFs.
| | 04:06 | Go ahead and click the Save and Close
button and we are all set with our Shop article.
| | Collapse this transcript |
| Using Read More| 00:00 | For our next task we're going to
create the News section of the web site.
| | 00:04 | We'd like to have a series of articles
on a page that will show a little bit of
| | 00:08 | introductory text followed by a Read
More link and then when you click the Read
| | 00:12 | More link, you go to a page
with the full article on it.
| | 00:14 | I am going to show you how to set those
articles up so that when we get to the
| | 00:18 | point of making that particular page,
which we will do in the next chapter on menus,
| | 00:22 | we will have all the
articles in place to make that magic work.
| | 00:26 | So we are going to start by creating
these three news articles and making sure
| | 00:30 | that they're ready to work
with that Read More format.
| | 00:33 | That's what we are going to
accomplish in this video and then later we will
| | 00:37 | actually make the page with the three
articles on it in the Menus chapter.
| | 00:41 | So go ahead and get started by
clicking on Content > Article Manager > Add
| | 00:46 | New Article, and in your Exercise
Files you will have a file that has the
| | 00:53 | news articles in it.
| | 00:54 | So the first article is "Two Tress Olive
Oil Announces New Vermont Distributor."
| | 00:59 | That is the title. I am
highlighting it. Edit > Copy.
| | 01:01 | I am going to go my Title Field and
then Ctrl or Command+V to paste in the
| | 01:07 | title of the article.
| | 01:08 | This is going to go in the category of
News and then down here in the Article Text,
| | 01:13 | we will go ahead and
highlight the body of the text here. Copy.
| | 01:21 | Here in the Text window Ctrl
or Command+V to paste in text.
| | 01:27 | So right now if I was to save this
article, the entire article would show when I
| | 01:31 | look at it on my web site.
| | 01:32 | What I need is a way to show where
that Read More break should occur, so that
| | 01:36 | I can see say the first paragraph of text
and then followed by the words Read More.
| | 01:41 | So I want that break to happen just
after the end of this first sentence.
| | 01:45 | So I am going to put my cursor there
and then I am going to go down to the
| | 01:48 | bottom of the screen where
there is this Read More button.
| | 01:51 | When I click that it'll go
ahead and put in a red dotted line.
| | 01:55 | That's only to show you
where the Read More break occurs.
| | 01:58 | The web site will not display a red
dotted line on it. And I am going to go
| | 02:02 | ahead and erase a few spaces so that I don't
have a big gap in the middle of my article.
| | 02:07 | So that's the way you'll need to set
up these articles, just like that.
| | 02:12 | I have two more articles to do.
| | 02:14 | So I am going to go ahead and hit my
Save and New button to create a new article.
| | 02:18 | My next article is the "Two Trees
Olive Oil Adapted by Northern New England
| | 02:22 | Organic Chef's Association."
| | 02:24 | So I am going to go ahead and highlight
that text, Edit > Copy, switch back to
| | 02:30 | Joomla here in the title blank.
Ctrl or Command+V to paste in that title.
| | 02:35 | I am going to set my Category to News.
| | 02:38 | Scroll on down to the Article Yext box
and I am going to highlight the words
| | 02:43 | here in the article, Edit > Copy, and
once more in my Article Text box, Ctrl
| | 02:50 | or Command+V to paste.
| | 02:52 | Once again after this first sentence
is where I want the Read More break to
| | 02:55 | occur, so I am going to click just
after the end of the first sentence, click
| | 02:59 | the Read More to put in that red dotted
line, and erase a little bit of the extra space.
| | 03:03 | We will go ahead and click Save and New
one more time, and one more article to go.
| | 03:09 | Scrolling down here, here's "Two Trees
Olive Oil Builds New Production Facility
| | 03:13 | to House Skin Care Product Line."
| | 03:15 | Go ahead and highlight that title.
| | 03:17 | Edit > Copy, come back to the title,
place here Ctrl+V or Command+V to paste
| | 03:23 | in the title, set our Category to News,
scroll down to the bottom, highlight
| | 03:27 | our text, Edit > Copy, click in our
box here, Ctrl or Command+V to paste, and
| | 03:36 | just after this first paragraph, one
more time, the Read More link, and erase a
| | 03:41 | couple of extra spaces.
| | 03:42 | That's our last article for this, so I
am going to go ahead and hit Save and
| | 03:45 | Close and you'll see here in our
Article Manager that we now have our three
| | 03:50 | articles right here, one after the other, all
of which are located inside of the News section.
| | 03:56 | And those of you who are familiar
with Joomla 1.5, wasn't that Save and New
| | 04:00 | button just really terrific?
| | 04:01 | It really helps to streamline the process of
putting in a lot of content really quickly.
| | 04:05 | So that's the way you insert a Read
More indicator within the article and I'll
| | 04:11 | show you how to create the format so that
you can see a series of articles on the
| | 04:15 | page followed by those Read
More links in my chapter on menus.
| | Collapse this transcript |
| Dividing long articles using page breaks| 00:00 | If an article is particularly long or
it has multiple parts, you can break it
| | 00:05 | into pieces and Joomla will create an
index for you of all the parts that make
| | 00:09 | up that particular article.
| | 00:10 | There will be a nice little panel that
you can float over to the right side of
| | 00:13 | the screen and it has a series of links
on it where you can click and navigate
| | 00:17 | to different portions of the article.
| | 00:19 | If we go to our Article Manager by
clicking on the icon in the Control Panel and
| | 00:24 | go to our History and Timeline article
by clicking on the title, scrolling down,
| | 00:30 | this article is somewhat long.
| | 00:32 | It's also highlighted by a series of
dates, which seems to lend it to breaking
| | 00:36 | it into smaller pieces.
| | 00:39 | We could set this up as separate
articles with each date as its own article
| | 00:43 | and then set this up later as a list of
articles where people could go and read those.
| | 00:48 | But I think it's going to be a little
bit more user-friendly to keep this as one
| | 00:51 | article and to break it into
smaller pieces with the Article Index.
| | 00:56 | So in order to break this article
into pieces, we use the Page Break button
| | 01:00 | down here at the bottom.
| | 01:02 | Just like we did with the Read more,
we are going to click at the end of the
| | 01:05 | text where we want that page break to
occur and then we are going to click
| | 01:09 | the Page Break button.
| | 01:10 | We're going to ask for
two pieces of information:
| | 01:13 | a Page Title and Table of Contents Alias.
| | 01:16 | The Page Title is the text that will
show up in the index itself, whereas the
| | 01:21 | Table of Content Alias doesn't show up anywhere.
| | 01:24 | It's just used in the backend of
Joomla for dividing up the article.
| | 01:27 | In this case though, I am going to use
exactly the same entries for both the
| | 01:30 | Page Title and the Table of
Contents Alias, in other words, the dates.
| | 01:34 | Here I am going to enter 1908 for the
Page Title and 1908 one more time for the
| | 01:43 | Table of Contents Alias
and say Insert Page Break.
| | 01:46 | Rather than saying a red dotted line,
which is what we saw for the Read more,
| | 01:51 | we're seeing a grey dotted line, which
indicates that this is where the page
| | 01:54 | break is going to occur.
| | 01:55 | Dotted line of course will not show
up in your final document, but it does
| | 02:00 | indicate where the page breaks are
occurring. Very handy when you're working
| | 02:03 | with these articles and you are editing.
| | 02:05 | So we are going to continue on this
process, get rid of a couple of extra spaces there,
| | 02:10 | and once more at the end of the
1908 text we'll hit the Page Break and
| | 02:16 | we'll put in 1910, and 1910 again,
Insert Page Break, and I'm going to continue
| | 02:26 | this process all the way down the list.
So every time there's a date and I am
| | 02:31 | just going to click right before the
date at the end of the previous date, enter
| | 02:36 | the two dates twice and I am
going to keep on going here. Okay.
| | 02:41 | So I have gone ahead and entered all
of my page breaks for this particular
| | 02:44 | article and I am going to go ahead and
hit Save & Close and later when we hook
| | 02:51 | this article up to the menu, you'll see
the article index will be generated for
| | 02:56 | us automatically with the list of all
of the dates that we just saw in that
| | 03:00 | timeline and all those links will
be generated for us automatically.
| | Collapse this transcript |
| Adding articles to the featured page| 00:00 | As we have been working away here in
Joomla and creating articles, nothing has
| | 00:04 | actually showed up on the
front end of our web site.
| | 00:07 | If you take a look at the front end of
your web site and hit Refresh to make sure
| | 00:11 | you're getting the most recent information,
you'll see next to nothing at all on the homepage.
| | 00:16 | There is plenty of content because
we created it, but we haven't actually
| | 00:20 | had anything to show up on this web site just
yet, because we haven't created any menu links.
| | 00:26 | However, in this video, we are going to
create some homepage content and we are
| | 00:31 | going to have it displayed right here
on the homepage of the web site without
| | 00:34 | having to create any menu links at all.
| | 00:36 | We can just have this information
display right on the homepage of the web site.
| | 00:41 | What's now called Featured Articles in
Joomla 1.6 were previously called Front
| | 00:45 | Page Articles in Joomla.
| | 00:47 | However, I've found that a lot of
people who have got Microsoft FrontPage
| | 00:51 | confused with Joomla's Front Page
and I even had a few people ask me why
| | 00:56 | Microsoft FrontPage was
running in their Joomla web site.
| | 00:59 | Fortunately, Joomla renamed this to
the Featured Articles, which is a little
| | 01:02 | bit more user friendly.
| | 01:04 | Now I am going to go back to my backend
of Joomla here and I am going to create
| | 01:08 | one more new article, which will be my
homepage article, and I am going to do
| | 01:12 | that by clicking the Add New Article
button right here on the Control Panel.
| | 01:17 | And in your Exercise Files,
| | 01:20 | you have an article here called "Two Trees
Extra Virgin Olive Oil - In a Store Near You."
| | 01:25 | I highlight those words and say Edit >
Copy and I am going to go ahead and paste
| | 01:29 | that in for the title.
| | 01:31 | And in this case, I am going to leave my
Category for this article set to Uncategorized.
| | 01:36 | The reason why is I don't see any
particular reason to create a category
| | 01:40 | called Homepage Articles.
| | 01:42 | I already have a way of setting what
articles I want to appear on the homepage,
| | 01:47 | so I don't really have any
need to group them together.
| | 01:50 | If you feel more comfortable creating a
category for homepage articles, by all
| | 01:53 | means go ahead and do so, but I am
going to leave mine set to Uncategorized.
| | 01:58 | And then down here, just before the
box where we put in the text for the
| | 02:02 | article, is the option for Featured.
| | 02:05 | And we are going to go ahead and say Yes.
| | 02:08 | That would indicate that we would like this
article to appear on the homepage of the web site.
| | 02:12 | Now I am scroll on down and from my
article, I am going to go ahead and
| | 02:17 | highlight the text, Edit > Copy, and
right here in my box I am going to Ctrl+V
| | 02:24 | or Command+V to paste in that text.
| | 02:27 | So, there it is and I am going to go ahead
to the top of the page and click Save & Close.
| | 02:32 | Now, I am going to flip back to the
front end of the web site and notice that
| | 02:38 | the articles doesn't just show up. I have to
actually refresh the page in order to see it.
| | 02:42 | So, I will refresh the page and now right
here on my homepage is our very first article.
| | 02:49 | You can see that the title is called
"Two Trees Extra Virgin Olive Oil - In a
| | 02:52 | Store Near You" and
there's the copy of the article.
| | 02:56 | And as I had mentioned before Joomla
takes the email addresses that are listed
| | 03:00 | in these articles and will format them
into a clickable email link and encrypt
| | 03:05 | that e-mail link with JavaScript, so that it
can't be stolen by spammers. Just a wonderful thing.
| | 03:11 | The display of this page
definitely leaves something to be desired.
| | 03:15 | You probably want to get rid of
that "Home" across the top, which doesn't
| | 03:18 | really add a whole lot to the value of
this page and you probably want to get
| | 03:22 | rid of the Category: Uncategorized and published
date and the fact that it was written by Super User
| | 03:28 | and how many hits it has gotten.
| | 03:30 | All of that is pretty irrelevant to the
homepage of a web site and we are going
| | 03:33 | to cover how to do that in a later video.
| | 03:35 | But for right now, just try
to deal with it. It's common.
| | 03:39 | We will get rid of it later.
| | 03:41 | If you want to add other articles to
the homepage of the web site, you can do
| | 03:45 | that by turning on the Featured
button for any of these articles.
| | 03:49 | If you have flipped back to back the
backend of Joomla, here in the Article
| | 03:52 | Manager and you take a look at the
list of articles here, you'll see that our
| | 03:58 | homepage article has in the Featured
column a little blue star and that's
| | 04:03 | indicative that this article is
appearing on the homepage of the web site.
| | 04:06 | If I want one of these other articles
to appear on the homepage, let's say the
| | 04:10 | Shop article, once again all I
have to do is click on the Featured icon
| | 04:16 | here to turn that into a blue star and
refresh my homepage and we now have two
| | 04:22 | articles here on the homepage of the web site.
| | 04:25 | You will also notice that this second
article is formatted somewhat oddly.
| | 04:29 | It seems to be smooshed in
on the left side of the page.
| | 04:31 | Once again that has to do with some
preset Joomla formatting, all of which can
| | 04:36 | be overwritten later and I am
going to go through that in detail.
| | 04:40 | I really don't want the
Shop article on the homepage.
| | 04:42 | I just wanted to show you that it
was possible to display more than one
| | 04:45 | article on a homepage.
| | 04:47 | So, I am going to go back to backend
of my web site and I am going to turn off
| | 04:51 | the Featured state of that Shop article.
| | 04:53 | And when I go back to my homepage I
will refresh and the only article that's
| | 04:58 | visible now is the article that I
actually want on the homepage of the web site.
| | 05:02 | So hurray for finally getting
some content on this web site!
| | 05:05 | it's finally starting all to click
together and maybe get a little bit more
| | 05:08 | real for you, thank goodness.
| | 05:10 | At this point, we just have a couple
more videos and how to delete articles and
| | 05:14 | some practice and then we will be ready
to start adding more things to the menu.
| | Collapse this transcript |
| Deleting and restoring articles| 00:00 | Now that we've created a whole bunch
of articles, you might be wondering how
| | 00:03 | to get rid of them.
| | 00:04 | What would happen if you
don't want an article anymore?
| | 00:07 | Let's take a look at the Article
Manager by clicking on the Article Manager
| | 00:11 | icon here in the Control Panel and
there is a few things you need to know about
| | 00:15 | the state of various articles in Joomla,
which relates to whether they're published or not.
| | 00:20 | If you look a look at the column, this
column right here called Published, this
| | 00:25 | indicates which articles are published
for the web site. In other words, which
| | 00:30 | articles are available for people to
see if they were linked up to the menu or
| | 00:34 | featured articles displayed on the homepage.
| | 00:36 | I can unpublish any of the pages on
this web site by going to this button right here
| | 00:42 | and clicking it and that little
green check turns into a red circle,
| | 00:47 | indicating that that
article is no longer published.
| | 00:50 | In other words, it's unpublished.
| | 00:53 | So, the article is still present
here within the Article Manager, but the
| | 00:56 | article is not visible to the public and
it's not showing up anywhere on the web site.
| | 01:03 | So what's nice about that is if you
think that your boss has asked you to
| | 01:06 | remove an article but at some point
in the time you may need to repost it or
| | 01:11 | repurpose it, you can always delete these.
| | 01:14 | Disk space is really cheap.
| | 01:15 | These articles don't take up a lot of room.
| | 01:17 | So that's probably the wise route.
| | 01:20 | If you do actually want to delete an
article though, the way you can do that is
| | 01:25 | simply putting a checkmark next to a
particular article and clicking the Trash
| | 01:30 | icon up on the top right corner of
Joomla. And if you click that it'll tell you
| | 01:35 | that one article is trashed.
| | 01:37 | You may think that it's gone
for good, but in fact, it's not.
| | 01:41 | If you take this dropdown here
called Select State, you will see that we
| | 01:45 | actually have four states
for all of our Joomla articles:
| | 01:48 | the Published and Unpublished, which I
already recovered, Archive, which means
| | 01:52 | that article has been sent out to an
archive where it may be stored away for
| | 01:57 | something else, and the Trash,
where it's getting ready to be deleted.
| | 02:02 | If I switch to Trash here in the drop-down,
you will see that my article is still here.
| | 02:07 | It's just living in the Trash can, and
now if I really want to get rid of this,
| | 02:11 | I can put a checkmark next to it and
click the Empty Trash button up here in the
| | 02:16 | right corner and that
article really will go away.
| | 02:19 | I don't want it to go away.
| | 02:21 | So in order to change its state from
trashed, all I have to do is click on this
| | 02:26 | icon one more time and I
have republished the article.
| | 02:30 | I don't see anything now in my
Article Manager, because I'm filtering
| | 02:34 | the articles right now.
| | 02:36 | You see in this dropdown I have set
this to show me all the trashed articles
| | 02:40 | and there aren't any,
which is why I see nothing.
| | 02:43 | So if you suddenly see all of your
articles vanish from your Article
| | 02:47 | Manager, don't panic.
| | 02:48 | It's probably you've got
some kind of filter set up here.
| | 02:52 | It could be any one of these dropdowns
or you might have something typed in this
| | 02:56 | box over here that you've
specifically filtered on.
| | 02:59 | If I switch this back to the Published state,
you will see that my articles are back in place.
| | 03:06 | All of them are here and
all of them are published.
| | 03:10 | I can also just change this back to
Select State to show me all of the
| | 03:13 | articles on the web site regardless of
whether they're published, unpublished,
| | 03:17 | trashed or archived.
| | 03:18 | The big thing to remember is
just because you trash an article
| | 03:22 | it doesn't mean that the menu link
associated with that article is also trashed.
| | 03:28 | If you delete an article, make sure you
also delete its menu link, and if there
| | 03:33 | was a category associated with just
that article, to be neat you might want
| | 03:37 | also delete that category.
| | 03:39 | If you forget to delete the menu link,
but you have deleted the article, when
| | 03:44 | someone clicks on that link from the
menu, they will get a 404 page not
| | 03:48 | found type of error.
| | 03:50 | Alternatively, if you get rid of your
menu link, but you don't get rid of the
| | 03:54 | article and you leave the article
published, if you have search configured for
| | 03:59 | your web site, your article may turn up
in the search results and that may not be
| | 04:04 | something that you wanted all.
| | 04:06 | So if you want to keep the article
and you don't want it showing up on your
| | 04:10 | web site in any way at all, be sure
you unpublish the article, not just
| | 04:14 | remove the menu link.
| | 04:16 | Be very, very careful about
deleting your content overall though.
| | 04:19 | Make sure you've deleted all the loose
ends on the web site in order to get rid
| | 04:23 | of something or unpublish all those loose ends.
| | 04:26 | Otherwise you will wind up with 404
errors or categories you are not sure where
| | 04:30 | they go, so very, very important to
keeping a clean and neat and well organized web site.
| | Collapse this transcript |
| Practicing with articles| 00:00 | We've entered a lot of articles on our
web site, but if you take a look back at
| | 00:04 | our site map, you'll notice we still
have quite a few gaping holes in what
| | 00:07 | we've done to this point.
| | 00:09 | So it's time to go through and create
a whole bunch of content on the web site
| | 00:12 | based on what our client
has given us to this point.
| | 00:14 | Let's get started by going to our
Article Manager by clicking on the icon,
| | 00:18 | because we are going to be doing
pretty much all of our work based on what's
| | 00:22 | here in the Article Manager. And in
your Exercise Files open up additional content.txt,
| | 00:27 | and you'll see that we
have a large number of articles in here
| | 00:31 | that we need to put in.
| | 00:32 | I am going to take you
through these pretty much in order.
| | 00:35 | So the first thing that we have listed
here is the Process section of the web site.
| | 00:40 | It has five articles associated
with it: Growing, Picking, Extracting,
| | 00:44 | Bottling and Tasting.
| | 00:45 | They are all associated
with the Process category.
| | 00:48 | So what we need to do now is create
five articles really fast that will be
| | 00:52 | associated with the category list that I am
going to show you how to build in a later video.
| | 00:56 | So I am going to start by copying my
text for the Growing article and Edit >
| | 01:03 | Copy and here for my Article Manager I
am going to click the New button up here
| | 01:08 | in the upper right corner and the Title
for this one is growing and the Category
| | 01:16 | is going to be Our Process and I am
going to go ahead and paste in my text here
| | 01:24 | down at the bottom and make sure the
formatting looks good, just like that.
| | 01:28 | I am going to go ahead and click Save & New,
so that I am ready to put in my next article.
| | 01:35 | So I am going to go through and I am
going to create the other four articles
| | 01:39 | one right after the other and you're
going to see this just fade right on into
| | 01:44 | the end of the process.
| | 01:45 | So I've just finished entering my last
article here, Tasting, and since it is my
| | 01:50 | last article I am going to go ahead
and click Save & Close to close that
| | 01:55 | article and you'll see here in our
Category list that we have several of these
| | 02:01 | new articles grouped together.
| | 02:02 | Notice that the articles are not
grouped by category. We see them all listed
| | 02:07 | here actually in alphabetical order and
we know that because of this little icon
| | 02:12 | right here next to Title which
indicates that it's currently being sorted in
| | 02:15 | alphabetical order from A to
Z. If I was to click that icon,
| | 02:19 | I could switch the reverse and now the title
of the articles are sorting by from Z to A.
| | 02:25 | Click again and we go back to A to Z.
I could also click on the Category to sort
| | 02:30 | by that column and now I'm grouped
together all of my articles by category.
| | 02:35 | So I am showing my articles for the
About section, the three for the News, and
| | 02:39 | now the five for Our Process.
| | 02:40 | That can be very helpful in finding
articles and making sure that you've entered
| | 02:46 | all the information correctly.
| | 02:48 | We do have some more articles to enter.
| | 02:50 | So we have another one that needs to
come next in our additional content
| | 02:55 | document here called Our People
and you see that we have a title.
| | 03:00 | We have a little blah-blah and then
underneath here we have a note saying that
| | 03:04 | there is a photo for Maria
Vitalia, the founder and the CEO.
| | 03:08 | So I am going to need to upload a
picture and create a new article.
| | 03:12 | So, let's go ahead and copy the text here.
| | 03:16 | In fact I am going to copy all of it.
Edit > Copy and from my Article Manager,
| | 03:25 | I am going to create a new article by
clicking on the New button and I am going to
| | 03:30 | type in the Title, which is Our People,
and the Category for this article is About
| | 03:36 | and I am going to scroll on down to my
Article Text area and I'm going to hit
| | 03:40 | Ctrl+V or Command+V to paste that text
in and do a little quick formatting here.
| | 03:47 | So I've got my article here into my content.
| | 03:51 | Now I need to include
this picture of Maria Vitalia.
| | 03:54 | So I am going to click here just before
the first sentence and I am going to hit
| | 03:58 | my Image button down here at
the bottom of the editing screen.
| | 04:02 | This pulls up my Media Manager.
| | 04:04 | So I am going to upload Maria's
picture to the Media Manager by clicking on
| | 04:08 | the Browse button down here at the
bottom, and I am going to go into my
| | 04:13 | Exercise Files and I am going to pick Maria
here from my files for this lesson and say Open.
| | 04:20 | I am going to click the Start Upload
button and you see that Maria's picture
| | 04:25 | goes ahead and shows up here in the corner.
| | 04:27 | I am going to go ahead and
click her picture to choose it.
| | 04:30 | I am going to align it to the right side
of the screen and my text will be Maria
| | 04:36 | Vitalia, Founder and CEO, and I'll
go ahead and click the Insert button.
| | 04:46 | So there is her picture and I am going to
change my text here to say photo, right.
| | 04:57 | So that people who are
reading this will know who that is.
| | 05:00 | So now all we need to do is scroll
back up to the top of the screen and click
| | 05:03 | Save & Close and we have
another article added to our web site.
| | 05:08 | Next in our list of articles is in the
Shop section and what we have here is
| | 05:13 | our top-level Shop page and Skin Care
Products page that we want to add to the web site.
| | 05:19 | Earlier we created a Shop page but
our client has changed their mind and
| | 05:24 | they've decided that Shop page
should actually become the Olive Oil page
| | 05:28 | instead of the Shop page.
| | 05:30 | So we need to do a little bit of
editing where that's concerned.
| | 05:33 | So let's make that change
first so we don't get confused.
| | 05:37 | Let's go to the Article Manager and we'll
scroll on down to our original Shop page.
| | 05:41 | What we are going to do now is change the
title of this article from Shop to Olive Oil.
| | 05:50 | Make sure you erase the alias as
well to get rid of that and Joomla will
| | 05:55 | re-create that for you.
| | 05:57 | Go ahead and click Save & Close which
will return us to the Article Manager and
| | 06:03 | now we're going to go ahead and copy
this first article for Shop. Note that we
| | 06:09 | need to include an image called
oliveoil.jpg on this page as well.
| | 06:13 | So we'll go ahead and highlight this
text and say Edit > Copy and here in my
| | 06:19 | Article Manager, I am going to hit
my New button again and this time this
| | 06:25 | article I am calling shop and I'll put
it in the category of shop and I'll go
| | 06:32 | ahead and Ctrl+V or Command+V to paste in my
text and I am going to do a little formatting.
| | 06:38 | Now I need to add that picture, so I
am going to go ahead one more time and
| | 06:42 | click my Image button, browse for the image
called oliveoil and say Open, start the upload.
| | 06:49 | Then I'll choose oliveoil from the
pictures here in the Media Manager,
| | 06:53 | align that to the right, put in my
Description, "Our delicious olive oil," and say Insert.
| | 07:04 | Oops!
| | 07:06 | I put the picture down here just
after my last sentence of this paragraph.
| | 07:10 | So it's not exactly in the spot that I wanted.
| | 07:13 | You can always pick it up
and drag it where you want it.
| | 07:15 | So I am going to drag it up to the top
of the first sentence, see that, and now
| | 07:20 | I've rearranged that picture on the page.
| | 07:21 | You can always delete it and reinsert it
again if you want or the click-and-drag
| | 07:26 | technique can work for you as well.
| | 07:27 | Down I am going to click Save & New because I
have one more Shop article that I have to add.
| | 07:35 | This is the Skin Care Products page.
So I am going to go ahead and copy that text,
| | 07:40 | Edit > Copy, and my Title for this
article will be Skin Care Products and
| | 07:50 | that will be in the Category of Shop.
| | 07:52 | I am going to go ahead and Ctrl+V
or Command+V to put my text in here.
| | 07:59 | Then I am going to do a little formatting.
| | 08:01 | Then I need to remember to click in
the right place this time and I need to
| | 08:06 | upload that picture called lotion.jpg.
| | 08:09 | So one more time, click the Image button,
browse for my lotion picture, say Open,
| | 08:16 | and start the upload.
| | 08:18 | Go ahead and click on the lotion picture.
| | 08:20 | I am going to align it right again, and
in Image Description, Our lotion is kind
| | 08:28 | to your skin and the environment.
| | 08:34 | Then go ahead and say Insert.
| | 08:35 | So now we have our picture
here included in the web page.
| | 08:40 | Go ahead and say Save & Close, so we've
added our Skin Care Products to the site.
| | 08:49 | Next part of the site that we
need to include is our photo blog.
| | 08:53 | I am going to show you how to enter the
first image for our photo blog and then
| | 08:58 | I am going to let you go ahead and
enter the second two entries yourself.
| | 09:02 | So for our photo blog, we
have a couple of sentences here.
| | 09:06 | We have this sentence, Our olives are
almost ready for picking, which is the
| | 09:09 | title, and then we'll follow this by a
date and then a sentence and then we're
| | 09:13 | going to have a picture that will
occur in this particular article.
| | 09:16 | So I am going to start by
highlighting the title and saying Edit > Copy.
| | 09:22 | In my Article Manager I am going to
click the New button and in the Title link,
| | 09:27 | I'll go ahead and click Ctrl+V or
Command+V to paste in that title.
| | 09:32 | Our Category will be Photos, under News
and Media, and in the Article Text I'll go
| | 09:40 | back to my article and I am
going to pick that sentence.
| | 09:43 | "Here is a photo of olive orchard"
and I am going to say Edit > Copy.
| | 09:47 | Then here in Joomla I am going to say Ctrl+
V or Command+V to paste in that sentence.
| | 09:54 | Quick little bit of formatting, and
then I'll need to insert the image.
| | 09:59 | So once again click the Image
button and I am going to browse for my
| | 10:03 | oliveorchard picture here and say Open
and Start Upload and pick that picture.
| | 10:12 | I am not going to do any alignment this
time. I just want it show up here right
| | 10:15 | underneath of the text and for the
Description I am going to put in "Our olive
| | 10:21 | trees are looking fantastic" and say Insert.
| | 10:29 | So there is our picture. It's looking good.
| | 10:31 | Now the last thing that is specified
here in our blog is a date and I could just
| | 10:37 | type that date right here into my
article but Joomla also has a great way of
| | 10:42 | including dates on the web site.
| | 10:44 | Up here on the right-hand side of the
screen, something I haven't showed you yet
| | 10:47 | in the Publishing options is the
ability to pick a Created Date.
| | 10:52 | By default, when I hit the Save button,
it'll pick today's date as the Created Date.
| | 10:56 | But in this case, I want
to pick a specific date.
| | 10:58 | So I'm going to click the little icon
here for the Calendar and I am going to
| | 11:03 | pick January 27th as the date
that I want to call the created date.
| | 11:08 | I am actually going to remove that
timestamp there because I don't care what time.
| | 11:12 | I just want that date.
| | 11:14 | If I really wanted, I was working
ahead for example, I could set a Start
| | 11:18 | Publishing date and a Finish
Publishing date and then this article would show
| | 11:21 | up on the web site on the date that I
specify including the time and it would
| | 11:26 | remove itself from the web site at a
certain point in time as well if I said the
| | 11:30 | Finish Publishing date.
| | 11:31 | This is great if you've got some time
sensitive information that you want to
| | 11:35 | include on your web site, maybe
something that's going to occur over the weekend
| | 11:39 | but you don't want to be working over
the weekend, or maybe you want to queue up
| | 11:43 | a bunch of blog posts in advance and
have them just published automatically,
| | 11:47 | which would be terrific.
| | 11:48 | You see how I've configured my
first article here for this photo blog.
| | 11:52 | I have a title, I have my text and my
picture down here in the Article Text
| | 11:56 | area, and then I've chosen my Created Date
over here on the right-hand side of the screen.
| | 12:01 | I am going to go ahead and do the same
process now for the next two photo blog
| | 12:05 | posts and I'll catch you as soon as I am done.
| | 12:08 | So I am going to go ahead and hit
Save & New to get started with that.
| | 12:14 | I've entered my last article here for
my photo blog and I am going to go ahead
| | 12:20 | and click my Save & Close
button to close this article out.
| | 12:24 | If you take a look here on our Article
Manager, we're displaying 20 articles
| | 12:28 | here, that set down here at the
bottom of the screen, and I believe we're
| | 12:34 | probably just around 20 articles at this point.
| | 12:37 | If we had more articles you could
always set to this to a higher number to
| | 12:40 | display more of them at one time or you
could display fewer of them by choosing
| | 12:44 | one of these smaller numbers.
| | 12:46 | I am going to go ahead and
pick five just to show you.
| | 12:49 | So now I'm displaying five articles
at a time and we have some additional
| | 12:53 | navigation that showed up down
here at the bottom of the screen.
| | 12:56 | So I can go to my second page of
results, for example, to see other articles or
| | 13:01 | my last page by clicking the End button.
| | 13:04 | So you can navigate through however
many articles you have in your Article
| | 13:08 | Manager using this navigation
down at the bottom of the screen.
| | 13:12 | So if you created an article and you
can't find it in the Article Manager,
| | 13:16 | things you should check would be
including these dropdowns here, perhaps you've
| | 13:19 | turned on a filter, or you've put in
some keywords here in the filtering over on
| | 13:23 | the left hand side, or maybe you're not
looking at the correct page of results
| | 13:28 | down here at the bottom.
| | 13:29 | If you create an article in
Joomla it's in here somewhere.
| | 13:32 | Sometimes it's just a matter of finding it.
| | 13:34 | I am going to reset this to 20, so that
we can see all of our articles at once.
| | 13:39 | So at last finally we've got all of
our articles into the content management
| | 13:44 | system, which is great.
| | 13:45 | So finally, we can get to make some menu
links and start to see what the content
| | 13:49 | looks like on our web site.
| | Collapse this transcript |
|
|
5. Creating MenusUnderstanding and configuring menus| 00:00 | Remember the CAM: Categories, Articles and Menus.
| | 00:04 | In the beginning we created
categories based on the site map that we have
| | 00:08 | developed with the client.
| | 00:09 | Then we created a bunch of articles
in our last chapter. Every article is
| | 00:14 | assigned to one category.
| | 00:15 | We are ready to start creating menu items
now that we have created all those articles.
| | 00:19 | The menu items can consist of a wide
variety of different things where the
| | 00:24 | articles are concerned.
| | 00:26 | We can now link directly to a single
article or we can create a blog of articles
| | 00:30 | or a list of articles and there's
many, many other options as well.
| | 00:34 | We are going to be covering all of
these here in the coming chapter.
| | 00:38 | First of all through we have
to understand how menus work.
| | 00:41 | All of the articles and components in
Joomla must somehow be linked to a menu.
| | 00:45 | Otherwise Joomla does not function properly.
| | 00:49 | There are two areas in which
Joomla's menus are divided in.
| | 00:53 | First of all under the Menus option in
the backend menu, there is Menu Manager
| | 01:00 | and the Main Menu and under Extensions
under the Module Manager there is a Menu
| | 01:07 | module which controls where
the menu displays on the web page.
| | 01:10 | So under Menus, if I go to Main Menu,
this is the Menu Item Manager. This is
| | 01:16 | where I can add additional menu items to
my web site and I can also specify which
| | 01:23 | of these menu items is the homepage link.
| | 01:26 | By default when you install Joomla,
exactly one menu item is created for you that they
| | 01:31 | linked to the homepage, which you see here.
| | 01:34 | And you will also see that the
homepage is marked as the homepage for the
| | 01:38 | web site with the star and that also is
reflected here in the Main Menu dropdown.
| | 01:44 | So you know which one of the menus, if
you have several menus for your web site, is
| | 01:48 | containing the home menu item.
| | 01:50 | The other item that exists here is in
fact called the Menu Manager and you can
| | 01:55 | get to it here from Menus > Menu
Manager or you can click on the subnavigation here.
| | 02:00 | Both of those take you to the same place.
| | 02:03 | So this shows you what menus exist
on the web site, so by default there is
| | 02:07 | one menu, the main menu and it has
one published item which is our homepage
| | 02:12 | and there's no unpublished items and
there's no items that are trash, as of
| | 02:16 | this point in time.
| | 02:17 | We will also see that they are in a Main
Menu module that's linked to this menu.
| | 02:23 | So this menu has a way of
displaying on the web site.
| | 02:26 | So remember that the menus item in
Joomla is really all about organizing your menus,
| | 02:31 | creating a menu, adding items to
that menu, but the actual display of the
| | 02:36 | menu is controlled over here under
Extensions > Module Manager and by default
| | 02:43 | with our Joomla installation there are
four modules that come with Joomla 1.6.
| | 02:47 | One of these is the Main Menu and
modules display in positions on the web site
| | 02:54 | and those positions are
programmed into the template.
| | 02:56 | I'll go through all of that in much
more detail in a later video and this will
| | 03:02 | control where exactly that
menu will display on the web site.
| | 03:06 | Right now our menu is displaying in
something called the position-7, which
| | 03:09 | happens to correspond to the
left column of the web page.
| | 03:13 | Your menus in Joomla work in two parts.
| | 03:16 | One is the actual Menu Manager
itself where you create your links and the
| | 03:21 | module, which is where you display the links.
| | 03:24 | The Menu module lives within the
Module Manager under Extensions >
| | 03:28 | Module Manager and the menus live
under the Menus item in the Joomla
| | 03:32 | backend navigation.
| | Collapse this transcript |
| Linking an article to the menu| 00:00 | Creating a link to an article
is very easy to do in Joomla.
| | 00:04 | We are going to add a link to the main
menu, which is a menu already created for
| | 00:08 | us and which already contains the home item.
| | 00:11 | So let's go to Menus >
Main Menu > Add New Menu Item.
| | 00:17 | The first thing I need to do on this
screen is select by Menu Item Type.
| | 00:21 | This is a required field.
| | 00:22 | So I am going to click the Select button.
| | 00:24 | What I am trying to do is link to my
article, just one of them, and if I read
| | 00:30 | through all of the possibilities here
on this page, all of which are types of
| | 00:34 | links that I can make at this point
in time, I'm going to link to a Single
| | 00:38 | Article over here under Articles.
| | 00:40 | So I am going to click that and
then I can enter the Menu Title.
| | 00:45 | This is the clickable text that will
appear in the menu and when I click on it,
| | 00:49 | I am going to go to my page of interest.
| | 00:52 | So my Menu Title is About and then
over here on the right-hand side of the screen,
| | 00:58 | I have a required setting to
select an article, and if I click the
| | 01:03 | Select button, I am going to find "The
Story Behind Two Trees" and that is the
| | 01:09 | place where I am linking this.
| | 01:10 | Now, it's typically good form for your
menu title and your article title to be
| | 01:15 | more or less the same.
| | 01:17 | So that you know when you click on
About, that you are getting a page
| | 01:20 | that's essentially about.
| | 01:21 | In this case the article title
and the menu title don't necessarily
| | 01:25 | match exactly, but it is still relatively
clear about what's going on with the web site.
| | 01:31 | Sometimes you do need to shorten the
menu titles, particularly if you're working
| | 01:34 | in someplace like academia where you
have some very long titles for papers and
| | 01:38 | other kinds of things. Then it's very
helpful to be able to shorten up your menus.
| | 01:43 | So we've gone ahead and we've put in
all of the required information, a Menu
| | 01:47 | Item Type, our Menu Title.
| | 01:49 | The Menu Location is Main Menu and that
was set for us automatically and we've
| | 01:53 | selected our article.
| | 01:55 | Go ahead and click the Save button and
then we'll flip to the front end of our
| | 01:59 | web site and click Refresh and our About
link will appear here in the Main Menu.
| | 02:05 | When I click the About link,
you'll see that we get our article,
| | 02:09 | "The Story Behind Two Trees."
| | 02:11 | I know that this has got a lot of
stuff that probably annoys a lot of people,
| | 02:15 | including the category at the top of
the article and when it was published and
| | 02:18 | the funny date format and that it was
written by Super User and it's had one hit,
| | 02:22 | but I am going to get to how to
get rid of that information in another
| | 02:27 | video, so just bear with me for the moment.
| | 02:29 | We'll also see that we have our link
to another article on the web site and we
| | 02:35 | have our link to Animal Welfare, which
goes to the World Wildlife Fund web site.
| | 02:40 | So our article is looking absolutely terrific.
| | 02:45 | We can go ahead and add one more
link to this menu at the moment.
| | 02:48 | I am going to go ahead and click
Save & New to give me another window for
| | 02:53 | adding another menu type.
| | 02:55 | Once again I am going to click the
Select button, click Single Article, and my
| | 03:00 | Menu Title this time will be Shop.
| | 03:04 | From my article on the side here, I am
going to click the Select button and I am
| | 03:09 | going to find the Shop article.
| | 03:11 | So in this case my menu title and my
article title are exactly the same.
| | 03:15 | I am going to click Save & Close.
| | 03:18 | And when I go back to the front end
with the web site and refresh. I now also
| | 03:21 | have a link for Shop.
| | 03:23 | When I click that, I get my Shop web page.
| | 03:27 | So as you see, it's very, very
simple to link to a single article within
| | 03:30 | your Joomla web site.
| | 03:31 | Now that we've created links to
individual articles, in my next video I am
| | 03:36 | going to show you how to create
subnavigation for the About page.
| | Collapse this transcript |
| Understanding parent and child menu items| 00:00 | Parent and child are common terms used
in programming, but typically designers
| | 00:04 | don't quite understand what they mean.
| | 00:07 | A parent menu item is an item that's
further up in the menu hierarchy, such as a
| | 00:12 | primary navigation item.
| | 00:14 | A child is a link that lives under the
parent like a secondary navigation item.
| | 00:19 | Children can have more children of
their own or they can stand alone.
| | 00:23 | Let's take a look at how parents and
children work inside of Joomla's menu structure.
| | 00:28 | Under Menus, go to the Main Menu
and we have three links located here:
| | 00:33 | Home, About and Shop.
| | 00:35 | We have some subnavigation
associated with the Shop page.
| | 00:39 | We have an Olive Oil page and we have
a Skin Care page that we need to add.
| | 00:43 | So let's go ahead and add those.
| | 00:45 | To create a new link, all we need to
do is click on the New button up here.
| | 00:50 | For Menu Item Type, once again
we're going to select a Single Article.
| | 00:55 | For the Title, we're going to call
this one Olive Oil and we'll select our
| | 01:02 | article over here on the right side of the
screen, which is our Olive Oil in the Shop category.
| | 01:08 | Now further down the screen here,
we have a question about a parent item.
| | 01:14 | By default this is set to the Menu Item Root.
| | 01:16 | If I was to click my Save button right
now, Olive Oil would show up at the same
| | 01:20 | level in the menu as Home, About, and Shop.
| | 01:24 | I want Olive Oil to appear under the Shop menu.
| | 01:28 | So instead of having Menu Item Root
be my Parent Item, my Parent Item will
| | 01:33 | become Shop, which I am
going to select from the list.
| | 01:37 | I am going to go ahead and click my Save
button and then I am going to go to the
| | 01:41 | front end of the web site and click Refresh.
| | 01:43 | It appears that nothing has changed
here on the front end of the web site.
| | 01:47 | However, when I go down to my Shop
link, underneath I have a secondary
| | 01:52 | navigation item for Olive Oil.
| | 01:54 | If I click that, you can see my Olive
Oil article is displayed right here.
| | 02:02 | So let's do that one more time.
| | 02:04 | I am going to go ahead and click Save
& New and I am going to create another
| | 02:09 | link to another single article.
| | 02:13 | This time this is for
the Skin Care Products page.
| | 02:18 | So that will be my menu
title, Skin Care Products.
| | 02:22 | My required article will be the Skin
Care Products article, down here, which is
| | 02:26 | in the Shop category and
the parent item is still Shop.
| | 02:32 | If I made my parent Olive Oil, I would
see the Skin Care Products navigation
| | 02:36 | item come up when I went to the Olive Oil page.
| | 02:39 | What I want to have happen is when I
go to the Shop page I see both Olive Oil
| | 02:43 | and Skin Care Products.
| | 02:45 | So I am going to take Shop again and I am
going to go ahead and click Save & Close.
| | 02:49 | When I go back to front end of my
web site and I refresh, here is my Skin Care
| | 02:54 | Products that appears underneath.
| | 02:56 | When I click that, then you see that
we have our Skin Care Products article
| | 03:01 | available here as well.
| | 03:03 | So now that we have the subnavigation
in place for the Shop articles, let's go
| | 03:07 | ahead and put in the
subnavigation in place for the About articles.
| | 03:10 | There are two articles that need to
be linked to the About subnavigation:
| | 03:15 | the History & Timeline article
and the Our People article.
| | 03:19 | I am going to go ahead and do that
offline and you go ahead and do that offline
| | 03:23 | as well in your own
web site that you're building.
| | Collapse this transcript |
| Configuring category blogs| 00:00 | Now that we've hooked up a few articles
to our web site, what if we want a bunch
| | 00:04 | of articles on one page as in a press release?
| | 00:08 | I showed you the Read More feature
in an article in an earlier video.
| | 00:12 | Now we want to make a list of short
blurbs plus Read More links for the web site.
| | 00:17 | This is called a blog in Joomla.
| | 00:19 | That refers to the formatting
though, more than the functionality.
| | 00:23 | It's not a blog in the sense of
writing a daily entry as you might
| | 00:26 | typically think of a blog.
| | 00:27 | So you create a blog in Joomla, we are
going to go to Menus > Main Menu and I am
| | 00:34 | going to go ahead and add a new menu
item by clicking the New button and I am
| | 00:39 | going to click my Select
button for the Menu Item Type.
| | 00:42 | This time I'm interested in a
blog of a bunch of news articles.
| | 00:47 | So I am going to click on Category
blog and I am going to give this a menu
| | 00:52 | title of News and then over here on the
right side of this screen, I am going to
| | 00:57 | be asked to choose a Category.
| | 00:59 | In this case, I'm going to pick the
News category, which is where we put in all
| | 01:04 | of our press releases for the web site.
| | 01:06 | I am going to go ahead and click the
Save button and when I go back to the
| | 01:11 | front end of the web site, back to the
homepage, we'll see that the News link
| | 01:15 | comes up here in the Main Menu and
when I click that, we have a series of
| | 01:20 | articles on this page.
| | 01:22 | So you see that we have "Two Trees Olive
Oil Builds a New Production Facility to
| | 01:26 | House the Skin Care Product Line," the
title, as well as the Read more underneath
| | 01:32 | and then in two columns under that,
we have our two articles that are
| | 01:36 | additionally about the news.
| | 01:38 | If I click on the Read More link, this
goes to a page with the full article.
| | 01:43 | Now once again you're probably
really not happy with the way that this is
| | 01:47 | formatted at this particular point in
time, but I wanted show you exactly
| | 01:51 | how to make a category blog first
and we're going to take a look at the
| | 01:55 | formatting in just a minute.
| | 01:57 | So I am going to go back to the back
end of my web site and I am going to go
| | 02:01 | ahead and hit Save & Close, and now
when I am taking a look at my list of links
| | 02:06 | in my menu, you might have noticed
that the News item was added to the end of
| | 02:11 | the menu, and in fact in our site map
the News article appears before Shop.
| | 02:16 | So I need to reorder these links somehow.
| | 02:19 | One of the ways that we can do that is
with these little blue up and down arrows.
| | 02:23 | If I click the little arrow at News, this
will bump me up one level in the menu hierarchy.
| | 02:29 | So I show up above the Shop link.
| | 02:32 | The alternative here, if I had many
things to reorder, is I could type in a
| | 02:37 | bunch of numbers into the boxes
here and then click the Save button.
| | 02:41 | The difference between the
arrows and the boxes is this.
| | 02:44 | Every time I click an arrow, the page
reloads because I've reordered one item,
| | 02:50 | but if I type numbers into the boxes,
I'd have to type in all of the numbers
| | 02:54 | first and then I click the Save icon up here.
| | 02:58 | It's this little thing that
looks like a floppy disk and then the
| | 03:01 | reordering happens.
| | 03:03 | Some people expect the
reordering to happen right away.
| | 03:05 | So I wanted to be sure to point that out to you.
| | 03:08 | So that's a category
blog in its most basic form.
| | 03:11 | That's what you get if you just do the
most minimal amount of configuration.
| | 03:16 | In my next video I am going to talk
quite a bit about the formatting of a category blog.
| | Collapse this transcript |
| Advanced category blog configuration| 00:00 | We've created our basic category blog
and now it's time to make it look just
| | 00:05 | a little bit better.
| | 00:06 | Did you like the layout?
| | 00:08 | Do you wish you could change it?
| | 00:09 | You can, using advanced
options within the menu item for this
| | 00:14 | particular web page.
| | 00:16 | You can also change this in the
Article Options off of the Article Manager.
| | 00:21 | In order to understand what's
available for you to change, you need to
| | 00:25 | understand how Joomla articles are laid
out by default within the blog layout.
| | 00:31 | Think of a grid with one article at
the very top of the grid spanning two
| | 00:35 | columns and in those two columns
underneath you see four articles and underneath
| | 00:40 | the four articles, you see
bullets for individual article links.
| | 00:45 | The article at the very top of the
screen that spans the two columns is called
| | 00:49 | the leading article.
| | 00:50 | The individual articles, which
there are four, where you can see the
| | 00:54 | introductory text and the Read More links.
| | 00:57 | are called the intro articles.
| | 00:59 | The number of columns is the number of
columns in which those intro articles
| | 01:03 | display, and finally at the bottom
you'll have a list of links and there are
| | 01:08 | four of these by default and that is
controlled by something called links.
| | 01:13 | Once you have this picture in your head,
configuring a category blog becomes a bit easier.
| | 01:19 | So I am going to switch back to the
backend of Joomla now and I am going to
| | 01:23 | mention that there are two places to
change the configuration of your category block.
| | 01:30 | And this has to deal with
hierarchies in option settings in Joomla.
| | 01:34 | If you think of cascading style sheets
for just a moment, you know that if you
| | 01:38 | set up a style in an external style
sheet, that style is overridden by a style
| | 01:44 | that might appear in the head of the document.
| | 01:46 | They might be exactly the same selector
in that style, but they are overridden
| | 01:52 | and if you have an inline style that
overrides anything that you have in the
| | 01:56 | head of the document or
in an external style sheet.
| | 01:59 | Likewise in Joomla we have a series of
article options and menu options and so
| | 02:05 | forth, and they have a system
for doing overrides as well.
| | 02:09 | So ideally what you want to try to do is
set up your options at the lowest level
| | 02:13 | possible and then you use other
areas of the web site for overriding those
| | 02:18 | options as required.
| | 02:20 | The lowest level for setting up the
options in Joomla is within your Article Manager.
| | 02:25 | So if I go to the Article Manager and
I go to the Options button over here on
| | 02:30 | the right hand side of the screen,
we were in here a little bit earlier making
| | 02:34 | changes to the text filters.
| | 02:37 | Now we're interested in
working with our blog layouts.
| | 02:41 | So if I go to the Blog/Featured Layouts
tab, you will see the four things that
| | 02:46 | I just talked about.
| | 02:47 | The number of Leading Articles, the
number of Introductory Articles, the number
| | 02:51 | of Columns and the number of Links, and
whether the multi-columns, the articles
| | 02:56 | should go down first in the left column
and then in the right column, or whether
| | 03:00 | our articles should be
ordered going across the page.
| | 03:04 | What I am going to do is change these
numbers, so that we have zero Leading
| | 03:08 | Articles, and for our Introductory
Articles, I am going to set that up to be 10.
| | 03:12 | I am going to put them in a single
column and I'll include 10 links at
| | 03:21 | the bottom of the page.
| | 03:22 | What this will do is by default
when I create any category blogs on this
| | 03:27 | web site, it will use this particular
layout and that will apply to both category
| | 03:32 | blogs and to, believe it or not, the
homepage and the way the featured articles
| | 03:37 | are set up-- unless that's been
overridden somewhere else along the way.
| | 03:42 | So if I go ahead and click Save &
Close and return to the front end of the
| | 03:46 | web site and hit Refresh, you will now see
that my layout of these articles has changed.
| | 03:52 | They now span entirely across the
page and you can see that we have a
| | 03:57 | title followed by a Read More link
and they all look exactly the same in
| | 04:01 | terms of their importance.
| | 04:03 | One of things you might notice at the
bottom of the page is that we have this
| | 04:06 | listing called
Subcategories and the Media category.
| | 04:10 | That's because we could then
click on the Media category.
| | 04:14 | It has no articles, so we see
additional subcategories and we can keep
| | 04:19 | navigating through the site in this
way, to our video article for example.
| | 04:25 | But we are actually going to repeat this
navigation for the video and the photos
| | 04:31 | directly under the News link so that
you don't have to jump through that Media
| | 04:35 | category in order to get there.
| | 04:37 | So what I'd like to do is I'd like to
get rid of this Subcategories item at the
| | 04:41 | bottom of the web page.
| | 04:42 | In order to do that, back in the
backend of Joomla once again, back in
| | 04:46 | the Article Options.
| | 04:48 | Under this Category tab we have an
option at the bottom for Subcategory Levels.
| | 04:53 | Right now we have that set to one.
| | 04:55 | If we change that to None, and I am
going to click my Save button, I'll go back
| | 05:00 | to the front end of the site and refresh
and we've gotten rid of the subcategory
| | 05:06 | links down at the bottom of this
particular page, which is great.
| | 05:10 | Now the changes that I've made so far
have been here in the Article Manager and
| | 05:16 | again, these are global settings for all
category blogs on the web site, and now
| | 05:22 | in fact for all categories as well.
| | 05:25 | If I click Save & Close, I am going to
go and take a look at my menu item as
| | 05:30 | well and I go down to my News link,
and in here you'll notice under the Blog
| | 05:36 | Layout Options, we have exactly the
same options that we just saw in the
| | 05:41 | Article Options screen.
| | 05:44 | We set up our default options for the
entire web site under the Article Options,
| | 05:49 | but if for some reason I wanted the
News to look slightly different, I can
| | 05:54 | override those settings right
here within the Blog Layout Options.
| | 05:59 | So between the Leading Articles, the
Intro Articles and the Columns and Links.
| | 06:03 | Right now if the fields are left blank,
they're using those global settings.
| | 06:07 | If I fill in these blanks, it'll use
these numbers instead of my global settings.
| | 06:13 | There are other items of
interest here inside of our menu item.
| | 06:16 | For example, there is a Metadata
option and we can fill in a meta
| | 06:22 | description and meta keywords.
| | 06:24 | This would apply to the top-level
page for our blog and it could also apply
| | 06:29 | to the individual articles within
the blog, unless we overrode those
| | 06:33 | particular pages by setting the meta
description and meta keywords within
| | 06:38 | individual articles.
| | 06:41 | There are many, many settings that are
available to you here inside of each menu item,
| | 06:46 | and the best way to figure them
out is to go through and click one item at
| | 06:50 | a time, apply it to your web site,
and see how the page has changed.
| | 06:55 | That will give you a good sense of
what each one of these items does.
| | 06:59 | I've showed you the major ways that
you can change the look of your category
| | 07:03 | blog on the web site, and you can dig in
here and try any of these other options
| | 07:09 | to see what effect that they
have on your category blog.
| | Collapse this transcript |
| Configuring category lists| 00:00 | A category list is a list of articles from
a given category. Sounds just like it says.
| | 00:06 | Let's go ahead and create a category list
for the Our Process portion of the web site.
| | 00:11 | What we'd like to do is have a page,
| | 00:13 | when we click on our process, we see
the titles of all of the articles within
| | 00:17 | that particular category, like the
Growing, Bottling, Tasting and so forth.
| | 00:22 | So to create this link on our menu,
we're going to go to Menus > Main Menu.
| | 00:27 | I am going to click the New
button to make a new menu item.
| | 00:30 | I am going to select a Menu Item Type,
under Articles, the Category List, and
| | 00:37 | the title for this will be Our Process
and that is going to be located under the
| | 00:43 | About section of the web site.
| | 00:45 | For our Category, we'll
choose the Our Process category.
| | 00:48 | I am going to go ahead and
save those changes right now.
| | 00:53 | When I refresh the front end of the
web site, we won't see any change because
| | 00:57 | that was a secondary
navigation item that I added.
| | 01:00 | I'll click on About and you'll see
the link down here for Our Process.
| | 01:04 | I am going to go ahead and click on
that and we'll see that we have a series of
| | 01:10 | articles that are listed here.
| | 01:11 | Growing, Picking,
Extracting, Bottling and Tasting.
| | 01:14 | Unfortunately, they are
listed in the wrong order.
| | 01:17 | I don't really need the column that
says that they're written by Super User and
| | 01:21 | I don't really need the Hits either
and I don't need the Display# up in the
| | 01:25 | upper right-hand corner of this.
| | 01:27 | So there's plenty of formatting that we
really need to do as concerns to this web page.
| | 01:33 | However, this is the way that you create
a category list within our Joomla layout
| | 01:38 | and then in the next video
I'll show you how to format it.
| | Collapse this transcript |
| Advanced category list configuration| 00:00 | In our previous video we create a
category list for the Our Process section of
| | 00:05 | the web site, but it has several problems.
| | 00:07 | First of all, the articles aren't in
the right order and second of all, this
| | 00:11 | page is really pretty ugly.
| | 00:13 | So let's take a look and see if
there's anything we can do to improve the
| | 00:17 | look of this web page.
| | 00:19 | Just as we saw with the category blog,
we're going to need to configure some of
| | 00:24 | our article options in order to
make this category list work correctly.
| | 00:28 | So I'm going to go to my back end of
Joomla. I'm going to go to the Content >
| | 00:32 | Article Manager and in the upper right-
hand corner is the Options button, which
| | 00:36 | I'll click, and under Choose a layout,
I'm going to choose the List Layout and
| | 00:43 | then I'm going to make some changes
to some of the parameters below for how
| | 00:47 | things should display.
| | 00:48 | So first of all the category title I'd
like that to display. In the front end of
| | 00:54 | the web site right now this is the Our
Process page, but you wouldn't necessarily
| | 00:58 | know that, because there's no
title at the top of the screen.
| | 01:00 | So I'm going to go ahead
and show my category title.
| | 01:05 | We could show a category description
and image if we wished, but I don't have
| | 01:08 | that right now, and we're not going
to showing any empty categories or
| | 01:12 | subcategory descriptions or how
many articles are in each category.
| | 01:16 | So let's make that change and I will
click Save and I'll refresh the front end
| | 01:22 | of the web site and now at least we
have a title at the top that says Our Process.
| | 01:27 | The next thing I'm going to do in the
back end of the Joomla is to go to the
| | 01:30 | List Layout tab and I'm going to
make some changes here as well.
| | 01:37 | The Display Select refers to the
Display dropdown in the upper right-hand
| | 01:42 | corner of these articles. Because I
only have five articles and I'm never going
| | 01:46 | to have any more than five articles,
I'm just going to hide this display
| | 01:50 | altogether, so I'm going to
set Display Select to Hide.
| | 01:55 | The Filter Field gives me the option
of whether I want the ability to sort my
| | 02:01 | list of articles via the headings, and I
don't want to that either so I'm going
| | 02:06 | to leave that set to Hide.
| | 02:08 | The Table Headings are currently set to
Show. Ultimately what I'm going to come
| | 02:12 | down to is just a list of the articles.
| | 02:14 | So I don't think I really need this
title bar going across the top here either.
| | 02:18 | So I'm going to go ahead and hide that.
| | 02:21 | I don't need the date shown.
| | 02:22 | So I'm hiding that and I don't want to
show the hits or the author in the list.
| | 02:27 | So I'm going to go ahead and hit the
Save button and refresh the front end of
| | 02:32 | the web site and that's definitely
improved the look of this particular web page.
| | 02:37 | So now I can see my list of articles.
They are still in the around the order,
| | 02:42 | but at least we has some of that
extraneous stuff around them all cleaned up.
| | 02:46 | We'll go ahead and hit the Save & Close
button here for our Article Options and
| | 02:51 | now I'm going to go to my menu item for
my list layout. So I'm going to Menus >
| | 02:56 | Main Menu and I'm going to go to the Our
Process link, click on that, and we have
| | 03:02 | some additional option over on the
right hand side of the screen that will help
| | 03:06 | us reorder those particular links in the lists.
| | 03:10 | So under List Layouts, there is an
option at the bottom for Article Order and
| | 03:16 | right now it set to Use Global.
Let's go ahead and put that in order so that is
| | 03:21 | actually displaying the oldest first.
| | 03:23 | The reason why I'm picking Oldest
first is because I entered these articles
| | 03:27 | in the correct order and so the first
article I want to show up is the first
| | 03:31 | one that I entered.
| | 03:32 | In other words, it's the oldest.
| | 03:33 | So I'm going to go ahead and hit the
Save button to save my changes and refresh
| | 03:39 | the front end of the web site, and all of my
articles are now ordered in the correct order,
| | 03:45 | Growing, Picking, Extracting, Bottling and
Tasting and when I click on these articles,
| | 03:51 | I go into my article for Growing and all
of the information there is exactly the
| | 03:56 | information that I need to have here.
| | 03:58 | Once again I hear you saying you want
the category, the publish, the written by
| | 04:03 | and hits to go away at the top.
| | 04:04 | I couldn't agree with you more.
!e're getting there very, very soon.
| | 04:08 | So this page is still looking a little
bit empty and the purpose of having in
| | 04:12 | Our Process page is to invite people
to come visit the olive oil orchard, and
| | 04:18 | visit the olive trees to have a tour
for how the things are made, or they can
| | 04:23 | read about how things are made online.
| | 04:25 | So what I like to do now is I'd
like to add a some introductory text in
| | 04:29 | between the words Our Process and the
list of articles here and in my Exercise Files
| | 04:35 | I have this introductory
paragraph right here, which I'm going to
| | 04:39 | highlight and click Edit > Copy.
| | 04:41 | Then I'm going to go back to back end
of the Joomla and I'm going to go to
| | 04:46 | Content > Category Manager and in the
Our Process category, I'm going to click
| | 04:52 | on that and you've probably seen this
box down here for description, but we
| | 04:58 | haven't used it yet.
| | 04:59 | One of things that we can do is if we
need to have a paragraph of text on top
| | 05:03 | of a blog or on top of the list, you
can use the category description to fill
| | 05:09 | that role very nicely.
| | 05:10 | So what I'm going to do is Ctrl+V or
Command+V to paste my text into that
| | 05:16 | particular spot and I'll save my category.
| | 05:21 | Then I'd like to have that
introductory text appear in my category list.
| | 05:25 | So while I'm here in the Article
Manager, I'm going to go to Options and I'm
| | 05:30 | going to go to Category and in my
Category List Layout I'm going to have the
| | 05:36 | description show. Go ahead and click
Save & Close and now when I go back to the
| | 05:42 | front end of my web site and I click
Refresh, I have my introductory text at the
| | 05:46 | top of the screen, which is nice,
because it helps to orient what's going on
| | 05:50 | with the links underneath.
| | 05:53 | So this page already looks a lot
stronger than when we started without the title
| | 05:57 | and with all those headings and the
authors and the hits. This is a much more
| | 06:01 | interesting and useful page to the
web site now that we're done with it.
| | Collapse this transcript |
| Comparing page headings, article titles, and browser page titles| 00:00 | Joomla's titles can be
more than a little confusing.
| | 00:04 | We need to talk about three
kinds of titles in this video:
| | 00:08 | page headings, article
titles, and browser HTML titles.
| | 00:14 | And it's very, very confusing,
the differences between this.
| | 00:17 | The best way I found to explain the
various kinds of titles in Joomla is
| | 00:21 | the following process.
| | 00:22 | So I am going to start by making a
test article in my Article Manager.
| | 00:27 | Click the New button to make a new
article, and for the Title, I am going to
| | 00:31 | type in Article Title.
| | 00:34 | I am going to leave the Category set to
Uncategorised and I am going to put in
| | 00:39 | some text. "This is the article text."
| | 00:46 | And I am going to go ahead
and Save & Close this article.
| | 00:48 | Now that I've created this article, I
am going to link it to a menu by going
| | 00:53 | to Menus > Main Menu and I am going to make
a new menu item by clicking on my New button.
| | 00:58 | I am going to select a
Single Article. Click on that.
| | 01:04 | For my Menu Title, I am going
to put in the words Menu Title.
| | 01:09 | I'll go ahead and select my article
from the list, which is Article Title, and
| | 01:14 | then down here under Page Display
Options, there are options for a Browser Page Title,
| | 01:21 | whether or not it should
show a page heading, and a Page Class.
| | 01:25 | So one at a time, the Browser Page
Title, if I look at the front end of a
| | 01:30 | web site, I'm looking at my Growing article,
and the title of this article is Growing.
| | 01:36 | By default what Joomla has been told to
do was to take the name of our web site
| | 01:41 | Two Trees Olive Oil, add a dash
and then put the article title directly
| | 01:46 | after that, Growing.
| | 01:49 | If I wanted to override that
automatically generated browser HTML page title,
| | 01:55 | I could type in something else here.
| | 01:57 | So I am going to type in
the words "Browser Page Title."
| | 02:03 | I could also have a heading on the page,
which seems confusing, because right
| | 02:07 | now for any given article, Growing
in this case, is the article title.
| | 02:13 | There is no page heading displayed on this page.
| | 02:17 | But I am going to go ahead and show a
page heading on our test article anyway,
| | 02:21 | and I am going to call the
page heading Page Heading.
| | 02:25 | The page class has to do with
specific CSS styling to this page and that's
| | 02:30 | something that is beyond the
scope of our Joomla Essentials course.
| | 02:34 | Look for more information about page
classes in the Joomla Templates course.
| | 02:39 | So let's go ahead and hit Save & Close and
we'll refresh the front end of the web site.
| | 02:44 | So down here we now have
a link called Menu Title.
| | 02:49 | Remember that is the words that we
entered to link our test article to the web site.
| | 02:54 | So you can see where the menu title displays.
| | 02:57 | It's right here in the
menu, as you would expect.
| | 03:00 | When you click at it, you get a
web page that has a page heading, which is
| | 03:05 | displaying over top of the article title,
at least in this particular template.
| | 03:11 | Then we have our article text displayed
here along with this other information.
| | 03:14 | I know you really want to get
rid of it. We will very soon.
| | 03:17 | Back up at the very top of the web page,
| | 03:20 | note that we have "Two Trees Olive Oil"
still in place, which of course is the
| | 03:25 | title for the whole web site.
| | 03:27 | But instead of displaying article title,
which is what would normally happen,
| | 03:31 | we've overridden that by putting in a browser
page title into our menu item in the configuration.
| | 03:39 | Now this is a wonderful feature, because
it might be that your article title may
| | 03:45 | not be all that keyword rich.
| | 03:47 | But HTML page titles, like the one
that I am pointing to right now, are
| | 03:53 | very important in search engine
optimization, and they're valued highly by
| | 03:57 | search engine spiders.
| | 03:58 | So you want to be sure to put lots of
keywords in your browser page title.
| | 04:03 | In Joomla 1.5, there was no way to
override what that browser page title was.
| | 04:08 | So this is a tremendous improvement
to search engine optimization that's
| | 04:12 | available here in Joomla 1.6.
| | 04:15 | At this point I am going to go back to
my backend of Joomla and I am going to
| | 04:19 | delete my Menu Title article by putting a
checkmark next to it and clicking the Trash button.
| | 04:27 | Remember that if you leave your article,
even though you've deleted your menu item,
| | 04:32 | if you ever add a search box,
it's possible that the other article even
| | 04:36 | though it has no link to the web site,
may show up in your search results.
| | 04:40 | So I am going to go back to my Article
Manager and I am also going to delete
| | 04:45 | that little test article that I
made here by sending it to the trash.
| | Collapse this transcript |
| Configuring submenus| 00:00 | You already have one menu displaying
on your site, the main menu, which was
| | 00:05 | created when we installed Joomla.
It's displaying via a module, which was also
| | 00:10 | created at the same time
when we installed Joomla.
| | 00:14 | Right now that module is set up to
show all of the navigation on the web site,
| | 00:19 | and as I navigate through the site, if
I'm in the About section for example,
| | 00:24 | it shows me the subnavigation for that.
| | 00:26 | If I'm in the Shop portion of the site,
it shows me the subnavigation for that.
| | 00:31 | And if I'm in News, there
is no subnavigation yet.
| | 00:34 | So it's showing me what's
going on right here on the screen.
| | 00:38 | And it's all integrated into a single menu.
| | 00:40 | What would happen if I wanted the main
menu to go say horizontally across the page
| | 00:46 | and just feature the top level
navigation items and then I wanted to have
| | 00:51 | the subnavigation appear on the left
column, on an as-needed basis if the
| | 00:56 | subnavigation was present?
| | 00:58 | Fortunately, that's relatively easy to
set up here in Joomla. The first thing I
| | 01:02 | need to know is where exactly are
all of the module positions for this
| | 01:08 | particular template?
| | 01:10 | In order to do that, in the backend of
Joomla I'm going to get into Extensions >
| | 01:15 | Template Manager and I'm going
to go to the Options up here.
| | 01:20 | In the Options there is this little known
feature called Preview Module Positions.
| | 01:25 | It's currently disabled.
| | 01:26 | Enable it for your
web site and click Save & Close.
| | 01:30 | Now when I go back to the front end of
Joomla, say to the homepage, right after
| | 01:35 | the web site address, put in ?tp, as in
template, equals 1, and hit your Enter key.
| | 01:47 | This will show you an outline of where
all of the positions are available within
| | 01:52 | your Joomla template.
| | 01:53 | So we can see that we can put a menu at
the very top of the page in position-0
| | 01:59 | and position-7 is where our
current navigation is located.
| | 02:04 | We have other positions available to us
here on the page as well, including some
| | 02:08 | down here at the bottom of the page, as
well as some in the right column, which
| | 02:12 | we're not using here on the homepage.
| | 02:15 | So what I need to do now is I need to
make a module for just the top level
| | 02:19 | navigation and have that display in
position-0 and then make a module for the
| | 02:25 | left navigation, which will be the secondary
navigation and have that appear in position-7.
| | 02:30 | So I am going to hop back into the
backend of Joomla and I'm going to go to
| | 02:35 | Extensions > Module Manager, and
we'll see that we have several modules
| | 02:41 | available to us here on the web site,
and of course we could create more by
| | 02:44 | clicking the New button.
| | 02:45 | What I am going to do though is I am
going to put a checkmark next to Main Menu
| | 02:50 | and I am going to click the
Duplicate button up here in the right corner.
| | 02:54 | This is going to give me two modules.
| | 02:56 | One called Main Menu and
one called Main Menu (2).
| | 02:59 | I am going to go into the first one
called Main Menu and I am going to set this,
| | 03:05 | first of all, to turn off
the title that says Main Menu.
| | 03:09 | By default Joomla displays the words
Main Menu over its navigation and I think
| | 03:13 | this is a very amateur sort of error.
| | 03:16 | Anyone who surfs the web for more than
five minutes knows what a navigation bar
| | 03:20 | looks like and we don't really need to
have Main Menu showing up on our web site.
| | 03:24 | So I am going to go ahead and hide that.
| | 03:27 | For our Position, this is just
going to be our top-level navigation.
| | 03:32 | Next, we need to change the position
for where this module is displaying.
| | 03:36 | It's currently displayed in position-
7, which we determined was the left
| | 03:40 | column for the web page.
| | 03:41 | We want this to display in position-0,
which goes across the top of the page.
| | 03:46 | So I am going to click the Select position box.
And this is very different than Joomla 1.5.
| | 03:52 | We now have a light box that comes up
that shows all of the positions and all of
| | 03:57 | the templates that are
currently installed for this web site.
| | 04:00 | So I am going to scroll down to
position-0 here and it tells me position-0
| | 04:04 | exists both in beez5 and in beez_20.
| | 04:08 | And it's normally where the search is located.
| | 04:10 | But we are going to put our navigation there.
| | 04:12 | So go ahead and click
that to change the position.
| | 04:15 | Now over on the right-hand side of the
screen we have some different ways of
| | 04:20 | selecting the starting point and the
ending point in Joomla 1.6, and this is
| | 04:24 | pretty different than the way
this was handled in Joomla 1.5.
| | 04:29 | So first of all, our starting level
for our navigation is currently set to 1.
| | 04:33 | This is a great improvement, because
most people start counting with the number 1,
| | 04:37 | 1, 2, 3, 4, instead of counting in engineer
speak, which means you start with 0, 0, 1, 2, 3, 4.
| | 04:44 | Previously in Joomla 1.5, if we wanted
to start with our top level navigation,
| | 04:48 | we would have to put in 0, but in
Joomla 1.6, we're going to put in the number 1
| | 04:53 | as our starting level.
| | 04:55 | And our ending level will also be Level 1.
| | 05:00 | In other words, we want to show
just the top level of navigation in
| | 05:04 | this particular module.
| | 05:06 | This is also very different than Joomla
1.5, where we would have set an ending
| | 05:10 | level of 2 or 1 in this particular case.
| | 05:14 | Once you have that set up, go ahead and
click the Save button, and we go back to
| | 05:18 | the front end of the web site and click Refresh.
| | 05:20 | And our main navigation has moved up to
the top of the web page, which is great.
| | 05:27 | And you see that we are in the Shop
section of the web site and we don't see any
| | 05:30 | of the secondary navigation
normally associated with this.
| | 05:34 | Likewise, the About link
doesn't show its subnavigation either.
| | 05:38 | Not on the very top of the web site.
| | 05:40 | The next thing we need to configure is
the module that displays over here in the
| | 05:44 | left column, which right now is showing
the full navigation for the web site,
| | 05:49 | the primary and the secondary navigation.
| | 05:51 | What we would like to change
that to do now is to show just the
| | 05:55 | secondary navigation.
| | 05:56 | So to do that, we will go back to the
backend of Joomla and we'll click Save &
| | 06:00 | Close to leave the screen and now
I am going to click on Main Menu (2).
| | 06:06 | The first thing I am going to do is
change this to subnavigation, so I know what
| | 06:12 | this module is doing.
| | 06:14 | And for Show Title, I am going to
set that to Hide because I don't want
| | 06:18 | subnavigation to show up
on top of my subnavigation.
| | 06:21 | We don't need to change the Position,
because it's already in the correct
| | 06:25 | position for the web page.
| | 06:27 | Now over on the right side of the
screen what we want to do is show our
| | 06:30 | secondary navigation and any
additional navigation beyond that.
| | 06:34 | So I am going to set my Start Level to 2 and
my End Level I am going to leave set to All.
| | 06:40 | So any additional navigation for the
web site, like a third or fourth or fifth level,
| | 06:45 | will also display over in this
module on the left side of the screen.
| | 06:50 | Go ahead and click Save & Close, and
when we go back to the front end of the
| | 06:54 | web site and we refresh, and I am here
on the About page, we see that the About page
| | 06:59 | is selected in the primary
navigation and we have just our secondary
| | 07:03 | navigation listed on the left side of this page.
| | 07:06 | If I go to News, where I haven't
configured any subnavigation yet, the module
| | 07:11 | doesn't display in the left
column of this page at all.
| | 07:14 | All I see is the Login Form, which is
displaying on every page of the web site.
| | 07:19 | Using these modules in the correct way
to show parts of your navigation is the
| | 07:24 | best way to configure
your menus for the web site.
| | 07:28 | One common mistake that beginners make
is thinking that, because I have Home,
| | 07:33 | About, News, and Shop in one position
in my template, and History & Timeline,
| | 07:38 | Our People, and Our Process in another
position, then we need to create separate
| | 07:42 | menus for all of these things.
| | 07:44 | If you do that, which you can most
certainly, what will happen is anytime
| | 07:49 | you refer to these breadcrumbs, this "You are
here, Home, About," that will be completely wrong.
| | 07:55 | If I go to my History & Timeline page,
you see that it says that I'm here.
| | 08:00 | I went from the homepage, I went to
About, and then History & Timeline.
| | 08:04 | If I had made my subnavigation as its
own standalone menu, that breadcrumb would
| | 08:08 | have been Home, History & Timeline.
| | 08:11 | It wouldn't catch the association
with the About portion of the web page.
| | 08:16 | So configuring your menus correctly is
very important and it's a very common
| | 08:20 | mistake that's made.
| | 08:21 | So I hope his video has helped you
understand the correct way to configure your submenus.
| | Collapse this transcript |
| Creating a new menu and displaying it on the site| 00:00 | Most sites have a main menu and a
footer menu or some sort of additional
| | 00:04 | navigation on the web site.
| | 00:07 | An additional menu does not mean sub-navigation.
| | 00:11 | Remember, for sub-navigation you can
use a module to display a portion of that
| | 00:15 | menu elsewhere on the web site.
| | 00:18 | If you do create separate menus for
your sub-navigation, you're going to break
| | 00:23 | breadcrumbs and you're going to have
just so many menus on your web site that
| | 00:26 | you'll get all confused about what lives where.
| | 00:29 | So you don't need to do that.
| | 00:31 | But if you are going to set up a
footer for your web site and that footer is
| | 00:35 | going to contain content that's
different than in the rest of the web site, then
| | 00:39 | it makes sense to create a menu.
| | 00:41 | Of course, before we start working with
our menus we need to have some content.
| | 00:45 | So I am going to add a privacy policy to our
web site and then we'll link it up to our menu.
| | 00:50 | To put our privacy policy we're going
to start with the Article Manager and
| | 00:54 | we're going to click on the New
button and we're going to enter our title,
| | 00:57 | which is Privacy Policy.
| | 00:59 | I am going to leave it on the
Uncategorised category for the moment and
| | 01:03 | scrolling down to the Article Text,
which is available in your Exercise Files.
| | 01:08 | It's just some Lorem ipsum.
| | 01:09 | We'll say Edit > Copy and then I am
going to go to Command+V or Ctrl+V to paste
| | 01:18 | that text into our editing box.
| | 01:20 | If you're wondering what those red squiggles are,
| | 01:22 | Firefox is very helpfully
spellchecking Lorem ipsum for me and finding
| | 01:27 | it somewhat wanting.
| | 01:29 | We'll go ahead and Save &
Close this particular article.
| | 01:33 | And now we're ready to create our new menu.
| | 01:35 | So to create menus, we're going to go to
our Menus link and we're going to go to
| | 01:40 | Menu Manager > Add New Menu.
| | 01:44 | For our Title, we'll call it footer
menu, and for our Menu Type I am going to
| | 01:50 | type the same thing again with no spaces.
| | 01:53 | This will become a variable that will
connect our menus under the Menus option
| | 01:59 | in the backend of Joomla with the
modules that are displaying the content.
| | 02:03 | So I am going to call this
footermenu, all one word.
| | 02:06 | There's an optional description if
you wish to put in what this menu is.
| | 02:10 | So "Displays at the bottom
of the web page," for example.
| | 02:15 | Go ahead and click Save & Close and
you now have a new footer menu here at
| | 02:21 | the bottom of the page.
| | 02:22 | If you click on the title, this will take you
to the Menu Item Manager for the footer menu.
| | 02:29 | And to create a new menu item for
this screen, we're going to go ahead and
| | 02:33 | click the New button.
| | 02:35 | As always, it'll ask us which
Menu Item Type we need to select.
| | 02:39 | So we'll select our
Single Article from the list.
| | 02:42 | And for our Menu Title, we'll
call this Our Privacy Policy.
| | 02:48 | Scrolling down just a little bit
further, something we haven't looked at in
| | 02:52 | detail is the Menu Location.
| | 02:55 | This is a bug in Joomla 1.6.
| | 02:57 | When I go from the footer menu and
click on the New button, I should be by
| | 03:03 | default putting that new
menu item into the footer menu.
| | 03:07 | Unfortunately, right now, any time you
add a new menu item to the web site, it's
| | 03:12 | going to the main menu by default.
| | 03:14 | You need to make sure that you
change this to the footer menu
| | 03:19 | so that we know that it's going
to show up in the correct menu.
| | 03:23 | If you forget to make this change, your
Privacy Policy link will show up on the
| | 03:27 | main menu and not on the footer menu.
| | 03:29 | So make sure you change that.
| | 03:30 | Now we're going to look at the right
side of the screen and select our article
| | 03:34 | from the list, which is the Privacy Policy.
| | 03:36 | And we'll go ahead and click Save & Close.
| | 03:39 | And now you see that we have our menu
item showing up here in our footer menu.
| | 03:44 | So we've got this and if I refresh the
web site, I don't see the footer anywhere.
| | 03:50 | That's because we need to now go
create a module to display the footer menu.
| | 03:55 | So I am going to go back into Joomla,
I am going to go to Extensions > Module
| | 03:59 | Manager, and you see the modules that
we have now. What I need to do is create
| | 04:04 | new module by clicking on the New button.
| | 04:06 | And I am going to select Menu
from the list of these items.
| | 04:09 | I am going to type in my title, which is the
title for the module, which is footer menu.
| | 04:15 | But I am not going to show this on the web page.
| | 04:17 | I am going to set that to Hide.
| | 04:19 | For my position, I am going to
choose position-14, which is Footer last.
| | 04:28 | And then over on the right side of the
screen I am going to make sure that I've
| | 04:31 | chosen the footer menu that we start
at Level 1 and we display all levels.
| | 04:35 | It doesn't really matter.
| | 04:36 | I could change that to
End Level 1 if I wanted to.
| | 04:40 | There's only one link on this
menu so the Start and End Levels are
| | 04:43 | somewhat irrelevant.
| | 04:44 | You can change them if you wish.
| | 04:47 | By default, my menu is set to display
on all pages of the web site down here
| | 04:52 | under the Menu Assignment,
which is exactly what I want.
| | 04:55 | But I could change this if I wish.
| | 04:58 | So I am going to go ahead
and click on Save & Close.
| | 05:01 | And I am going to go back it the
front end of the web site and refresh.
| | 05:05 | And now down here in the footer,
you'll see that we have a link, although it's
| | 05:08 | not displaying very well,
that's going to our Privacy Policy.
| | 05:12 | This might not be the best position for
this link because it's really unreadable.
| | 05:17 | So I am going to go back again and
change my footer menu position from
| | 05:22 | position-14 to position number 11.
| | 05:28 | I'll go ahead and click the Save
button and we'll refresh the page.
| | 05:32 | And that looks a little bit better.
| | 05:33 | Now I have a link over here on the side
that says Our Privacy Policy and when I
| | 05:37 | click that, I'll go to a page that
shows the privacy policy for the web site.
| | Collapse this transcript |
|
|
6. Setting Display OptionsSetting global configuration options for articles| 00:00 | Finally, the movie you've all been waiting for.
| | 00:03 | Let's talk about article options.
| | 00:06 | That's this right here
at the top of the article.
| | 00:09 | It's located on every single page of
this web site and it's a list of the
| | 00:13 | category, a publish date,
and a written by, and the hits.
| | 00:17 | One of the most powerful though
occasionally confusing aspects of Joomla is
| | 00:22 | setting whether an option
appears in an article or not.
| | 00:25 | An option was previously
called a parameter in Joomla 1.5.
| | 00:31 | It's these little bits of optional
information that are displayed with your
| | 00:34 | article, things like hits, the author name,
how the read more link looks, and how
| | 00:38 | it's styled, and so forth.
| | 00:40 | Options can be set in three
different places in Joomla.
| | 00:44 | There are global article options,
there are article options available via the
| | 00:48 | individual menu items, and then there
are article options available within
| | 00:52 | the article itself.
| | 00:54 | Global article options are the
most general options available.
| | 00:58 | They are located in the Article Manager
and we took a look at them in the last video.
| | 01:02 | I am going to take a look
at those right now once more.
| | 01:06 | So I'm going to hop into the backend
of Joomla and I'm going to go to the
| | 01:09 | Article Manager and over here in the
right corner is this item called Options.
| | 01:15 | When I click on that there are several
tabs going across the top of the page.
| | 01:20 | This is where we can control globally
whether certain items display on the web site.
| | 01:27 | So right now I'm in the Articles tab and we
have certain things that are set to show or hide.
| | 01:32 | So for example, we're showing the title of
the article. That's probably a good thing.
| | 01:37 | Otherwise we wouldn't know where we are.
| | 01:38 | Those titles are links so you can
click on them and go somewhere, but for
| | 01:43 | individual articles that are hooked
directly to the menu when you click those
| | 01:46 | links in the titles it just reloads the page.
| | 01:50 | Since we have a lot of those,
I am going to turn that off.
| | 01:53 | We are showing the intro text for
articles, so that's a good thing.
| | 01:58 | Otherwise, we wouldn't
have much on the news page.
| | 02:00 | But we don't really want to show the
category and we certainly don't want
| | 02:04 | that category linking to a page that would
show us other articles within that category.
| | 02:09 | We're not showing the parent category for
the information or linking to it either.
| | 02:15 | We don't want to show the author.
| | 02:17 | We don't want to show the publish date.
| | 02:18 | The navigation is in the bottom of the article.
| | 02:22 | There is these links that you see occasionally.
| | 02:25 | Some say Previous on some pages, some
say just Next over here on the right side
| | 02:29 | on some pages, and some
articles have both of these.
| | 02:33 | So I'm going to go ahead and hide that,
because I don't think that's helpful to
| | 02:37 | this web site either.
| | 02:39 | I am showing a Read more link.
| | 02:41 | Now what's different here in Joomla
1.6 is the way Read mores gets treated.
| | 02:46 | If you take a look at the News page
you'll see that we have our title of the
| | 02:53 | article here and then we have our
introductory text and then it says "Read more:
| | 02:58 | Two Trees Olive Oil Builds New Production
Facility to House Skin Care Product Line."
| | 03:02 | In other words, Read more followed
by the title of the article again.
| | 03:06 | Now there are some very important reasons
for doing a very long Read more link this.
| | 03:11 | First of all, if you are using a
screen reader or you have accessibility
| | 03:17 | considerations, a page that has 20
different links on it that say Read more but
| | 03:21 | have no clue where they go, makes
navigating a web page kind of difficult.
| | 03:26 | So when you attach the title to the
Read more link this does help with
| | 03:30 | accessibility considerations.
| | 03:32 | The other reason to include the title
of the article in the Read more link has
| | 03:36 | to do with search engine optimization.
| | 03:38 | Search engine spiders view a page with
20 Read mores the same way someone with
| | 03:44 | a screen reader does.
| | 03:45 | In other words, there is 20 links that
say Read more with no information about
| | 03:49 | where that particular link is going.
| | 03:51 | So having the title of the article as
part of the Read more link can really help
| | 03:55 | with search engine
optimization and accessibility.
| | 03:58 | The downside is when you have very
long titles like the ones we have on this page,
| | 04:02 | your Read more link is
correspondingly quite long.
| | 04:06 | So it's depends on what you think is best.
| | 04:09 | If you want this title to go away at
the end of your Read more link, you
| | 04:13 | would turn that off here.
| | 04:15 | You would leave on Read more, which we
definitely want to keep, but if we turned
| | 04:19 | off title with Read more and we said Hide--
| | 04:22 | I'm going to go ahead and click Save
just to apply the changes we have so far.
| | 04:27 | When I refresh this page you'll see
that we now just have the Read more
| | 04:31 | link here on the page.
| | 04:32 | Then there is one other setting that's of
interest that pertains to those Read more links.
| | 04:37 | This Read More Limit sets the number of
characters in the article title to show
| | 04:41 | in the Read more button.
| | 04:42 | So perhaps we want to show our Read
more links, but maybe we only want to
| | 04:46 | show say 50 characters.
| | 04:48 | That will-- once I click the Save
button up here to apply my changes-- when I
| | 04:55 | refresh this again we now have
at least a shorter Read more link.
| | 04:59 | So it's kind of a nice compromise
between having titles that are too long, but
| | 05:03 | yet wanting to get some search engine
benefit and accessibility benefit out of
| | 05:07 | those Read more links.
| | 05:09 | So that's what those particular things do.
| | 05:10 | You'll notice we also applied the
other changes we'd made earlier in terms of
| | 05:15 | getting rid of the category, and the
author, and the publish date, but we
| | 05:20 | haven't gotten rid of the hits yet.
| | 05:21 | So let's keep going here
in our article parameters.
| | 05:27 | So, the last portion of the screen
pertains to the icons that you see here in
| | 05:32 | the corner for these particular articles.
| | 05:35 | In Joomla 1.5 there were three of these icons.
| | 05:38 | We also had an icon to
turn the article into a PDF.
| | 05:42 | Unfortunately, that has been dropped in 1.6.
| | 05:46 | I believe that the code for that
particular functionality was very, very old and
| | 05:49 | so Joomla decided to leave it out of Joomla 1.6.
| | 05:53 | Personally, I had never used that PDF
functionality on my web pages, because I
| | 05:59 | never saw any reason that anyone would
want to take an existing web page article
| | 06:03 | and turn it into a PDF.
| | 06:04 | You can show these icons for the
print and the email, and that is a
| | 06:08 | printer-friendly version that would
come up when you click on the printer icon,
| | 06:12 | or an email it to a friend that would
come up when you click on the email icon.
| | 06:17 | If you say hide the icons, but you
leave Show Print and Show Email set on,
| | 06:23 | I'm going to go ahead and save one more
time and I refresh this page, you'll see
| | 06:28 | that we actually now have
the words Print and Email.
| | 06:30 | So if you prefer text, you set your
Show Icons to Hide, but Show Print Icon
| | 06:38 | and Email Icon actually makes text appear.
| | 06:41 | Not the best user interface in the
world, but that's the way it works.
| | 06:45 | If you want those icons gone
altogether and you don't want the text either,
| | 06:48 | you'll need to set all of these to Hide.
| | 06:51 | Then finally here is that Show Hits. Hurray!
| | 06:53 | We'll go ahead and hide that as well.
| | 06:55 | The last item refers to Show Unauthorized Links.
| | 06:59 | What that means is if you are showing
links to a portion of the web site that
| | 07:04 | you have to be logged into see.
| | 07:06 | So in other words, the links would
show up on the web page, but if you
| | 07:10 | clicked on them, you would get a
message saying you were unauthorized to see
| | 07:13 | that particular article.
| | 07:15 | That's a nice thing if you're trying
to sell subscriptions for your web site.
| | 07:18 | So you'd show the breadth of the content
that you were offering, but when people
| | 07:22 | click through, they would not
get the full text of the article.
| | 07:27 | In general, I think showing
unauthorized links is a bad idea, because people
| | 07:31 | click on the links expecting something
and then just get a message saying that
| | 07:34 | they can't see it anyway
unless they have some kind of login.
| | 07:37 | So I will go ahead and leave that set to no.
| | 07:41 | Scroll back up onto the top of the page
and I'm going to go ahead and click Save.
| | 07:45 | There are a huge number of
other options that are in here.
| | 07:48 | We've already gone through the list
layouts in an earlier video and we went
| | 07:52 | through the blog layouts in another video.
| | 07:53 | We've also touched on the categories
here in terms of the how the categories
| | 07:58 | display, Category singular, Categories plural.
We've gone through a number of these before.
| | 08:04 | In terms of Integration this has to do
with whether some kind of link will show
| | 08:08 | up for an RSS feed, if you wish to have
an RSS feed for your blog or your list
| | 08:14 | of articles going off of the web site.
| | 08:15 | So you can show that feed link and
you can control whether you're going to
| | 08:19 | syndicate the intro text or
the full text of the article.
| | 08:22 | Finally, we had gone though text
filters in a much earlier video.
| | 08:26 | This has to do with the blacklisting
and white listing and who is allowed to
| | 08:30 | enter what type of HTML into various articles.
| | 08:34 | The Permissions tab has to do with
ACL and it's relatively complicated.
| | 08:37 | I'm going to cover that in a later video.
| | 08:39 | So that's our global article
manager options for our web site.
| | 08:45 | In the next video I'm going to show
you how you can override your global
| | 08:49 | settings on a more specific basis,
because sometimes you might want one blog to
| | 08:54 | do one thing and one blog to do
something else and articles to do a third thing
| | 08:58 | in terms of their behavior.
| | 09:00 | So ideally what you do is you come in
and you set these global items first,
| | 09:04 | which we'll apply to the greatest
number of articles on your web site and then
| | 09:08 | you're going to use your menu options
and the article options to override these
| | 09:13 | global options that you set up first.
| | Collapse this transcript |
| Setting menu options| 00:00 | In our previous video we turned off a
whole bunch of options within Joomla globally.
| | 00:05 | So we don't say anymore of that category,
and author, and hits, and all the rest
| | 00:10 | of that stuff associated
with articles on the web site.
| | 00:13 | If I take a look at the About page for
example, this is looking much better, Our
| | 00:18 | People is looking much better, but when
I come back to the News page of this web site,
| | 00:22 | I've got my news articles here.
| | 00:25 | I'd also need to still add my photo of
the day blog and I need to add my video
| | 00:30 | blog to this web site.
| | 00:31 | The photo blog, for each one of those
entries as you'll recall, we had a title for
| | 00:37 | that particular photo of the day.
| | 00:40 | We had a brief description
of the photo in photo itself.
| | 00:44 | We also had a date associated with
each one of those photo entries, and of
| | 00:48 | course someone in
particular has submitted that photo.
| | 00:52 | So it might make sense, even though we
just turned off who the articles were
| | 00:56 | written by and the date on which those
articles were published for the entire web site,
| | 01:01 | for our photo blog I think what we'd really
like to do is have those things turned on.
| | 01:07 | So somehow we have to make an exception
to our global rule and apply it to our
| | 01:12 | photo blog so that we have
something slightly different for that.
| | 01:17 | Let's go ahead and hop
into the backend of Joomla.
| | 01:20 | So the first thing we need to do is
add our photos blog link and our video
| | 01:25 | link to our web site and then
we'll worry about styling them.
| | 01:29 | So let's go ahead and add those really
quickly under Menus > Main Menu > Add New Menu Item.
| | 01:36 | We're going to go ahead and choose a
Category Blog from our list of articles here.
| | 01:42 | And we're going to call the menu title
Photo of the Day and this is going to be
| | 01:49 | located in the Main Menu and it
will be located under the News item.
| | 01:54 | Our category we're going
to choose will be Photos.
| | 01:58 | That will be our first one.
| | 02:00 | I am going to go ahead and click Save
& New and once again I'm going to go
| | 02:05 | through the same process for the video blog.
| | 02:07 | So I'm going to go ahead and
choose a Category Blog once again.
| | 02:11 | The menu title will be Videos and this
is also going to be under News and our
| | 02:19 | category this time will be Video.
| | 02:21 | So I'm going to go ahead and hit Save &
Close and I'm going to go to the front
| | 02:27 | end of the web site and refresh.
| | 02:29 | So now here in the news section I have two
more links: the Photo for the Day and the Videos.
| | 02:36 | I'm going to take a quick peek at the
Videos first and you can see that we've
| | 02:40 | got our title, a brief description,
and then our YouTube video, which we
| | 02:44 | installed back in chapter 4.
| | 02:46 | You are of course welcome to go
ahead and play that take a look at it.
| | 02:50 | Under Photo of the Day we have our
series of photos exactly as we expected.
| | 02:55 | We have our title, we have a little
bit of text, and then our picture.
| | 03:00 | So here is the way that
| | 03:01 | that is set up, but what our client
really wanted was the title and then
| | 03:06 | somewhere underneath we wanted the
date associated with this particular blog
| | 03:10 | post and we wanted an author.
| | 03:12 | First thing we're going to do is
display the date here on the page.
| | 03:16 | So I'm going to hop back into the
backend of Joomla and I'm going to go to my
| | 03:20 | menu item, Main Menu, and I'm going to
go scroll down to my Photo of the Day link
| | 03:26 | and the option that I want to show
here for the entire blog is the Created Date.
| | 03:33 | So I'm going to go ahead and take a
look at the Article Options and under here
| | 03:37 | we have Show Create Date,
which is set to Use Global.
| | 03:40 | Using Global anytime you see that in
this context means that we're going to look
| | 03:45 | at the Article Options in the Article Manager,
| | 03:47 | that button in the upper right-hand
corner, and see how that is configured.
| | 03:52 | So that's great, because anytime you
make a change to the article options there,
| | 03:56 | it will go ahead and
affect this page as well, unless we
| | 04:01 | specifically override something.
| | 04:03 | So what I'd like to do here is change
Show Created Date to Show and what I'd
| | 04:11 | like to do for the author is also to
show that, because I'd like to show all of
| | 04:16 | the authors who have contributed these photos.
| | 04:19 | So I am going to go ahead and say Save and I'm
going to refresh the front end of the web site.
| | 04:25 | So once again we've got our date up
here displaying and we have that it's
| | 04:30 | written by Super User and in fact
all of these are written by Super User.
| | 04:35 | That's because we put the content in
ourselves. But truthfully all we did was
| | 04:41 | copy and paste a bunch of
stuff and put it in here.
| | 04:43 | We didn't take these pictures ourselves
and we didn't write the copy for it either.
| | 04:47 | So ideally what we would like to do is have
something other than Super User display there.
| | 04:52 | That means that on an article-by-
article basis I need to go through and edit
| | 04:57 | each one of these articles to
change Super User to something else.
| | 05:01 | And I'll show you how to
do that in the next video.
| | Collapse this transcript |
| Setting individual article configuration options| 00:01 | In our last video we adjusted our Photo
of the Day blog to include some features
| | 00:06 | that we had globally turned off
on other areas of our web site.
| | 00:10 | For the Photo of the Day only we would
like to show the Created Date, which is
| | 00:15 | essentially the date when the blog
entry was posted, and we'd also like to
| | 00:20 | include the information about who was the
photographer for this particular Photo of the Day.
| | 00:24 | We don't really need that
information on any other page of the web site.
| | 00:28 | So, we use the menu options to
override the global settings for the web site,
| | 00:33 | and have these specific settings apply
to just this portion of the web site.
| | 00:38 | However, we still have the problem remaining.
| | 00:40 | Every single one of our photos of the
day were now written by Super User, and
| | 00:45 | that's great for me as the Super User,
but the truth of the matter is I didn't
| | 00:50 | take any of the pictures and I didn't
write the text. I just copied and pasted
| | 00:54 | in a bunch of stuff.
| | 00:55 | So what we need to do now is somehow
we need to give credit to the people who
| | 01:00 | have taken these nice pictures
and put them up on the web site.
| | 01:03 | So somehow I need to find a way that
not every single article is written by
| | 01:08 | Super User and the way to do that is
to edit these articles on an article by
| | 01:13 | article basis so that we
can specify who the author is.
| | 01:19 | So let's take a look at the Backend
of the web site and I am going to go
| | 01:22 | into the Article Manager, and I'm looking at
all of the articles for my web site right now.
| | 01:28 | What I really want to concentrate on are
just the three that are associated with
| | 01:31 | the Photo of the Day.
| | 01:32 | So I am going to go to Select Category
> Photos and this will show me just the
| | 01:39 | three articles associated with the Photo blog.
| | 01:42 | So we have these three articles and
you see that they correspond to the blog
| | 01:46 | here on the front end of the web site.
| | 01:49 | I am going to go ahead and
edit this first article here.
| | 01:52 | "We picked our first
olives today by clicking on it."
| | 01:57 | And what you'll see over here on the
right-hand side of the screen is we have
| | 02:00 | some publishing options available to us.
| | 02:03 | Right now this article was
created by Jen. That's me.
| | 02:07 | I could click this button that says
Select User and I could choose somebody
| | 02:11 | else from the list, but I have two problems.
| | 02:14 | First of all of course, I've only got
one user setup for my web site, but second
| | 02:19 | of all, if I have readers who were
sending in pictures to be included on this blog
| | 02:23 | I really just want to post their
name. I don't want to have to give them
| | 02:26 | access to the web site in order to edit it.
| | 02:29 | So if you are flagging people who are
already editing the web site, you could
| | 02:35 | certainly change that user and
therefore the author by this interface here.
| | 02:41 | But if you just want to put up somebody
else's name, use the Created by alias,
| | 02:46 | which is the next field down.
| | 02:49 | And for this particular article, our
person who created this is Samantha Iodice.
| | 02:54 | So I am going to go ahead and enter her
name and I am going to click Save & Close.
| | 03:00 | Then I am going to refresh my page and
you see that Samantha Iodice went ahead
| | 03:06 | and took this lovely picture of these
olives that came right from the orchard.
| | 03:10 | So now I am going to go ahead and
edit some of these other people.
| | 03:15 | Our "Reader recipe from Kathy in Keene,"
| | 03:19 | the Created by alias here is Kathy Smith
and for "Our olives are almost ready for
| | 03:28 | picking," that was George Jones. All right!
| | 03:31 | So now that we have these aliases in
place, when I refresh the screen, the first
| | 03:41 | one is written by Samantha Iodice, then
we have our recipe from Kathy in Keene,
| | 03:46 | from Kathy Smith and "Our
olives are almost ready for picking!"
| | 03:50 | from George Jones, and our
picture of the olive orchard.
| | 03:53 | Remember that when you go through and
you edit articles individually, if you
| | 03:57 | ever need to go and change something
else, you'll have to edit once again
| | 04:03 | individually for the options that you change.
| | 04:06 | So for this case, if for example we
wind up with a different photographer for
| | 04:11 | some of these pictures, we'll have
to edit each one of those entries
| | 04:14 | individually to change the
photographers for those pictures.
| | 04:18 | We're still under global control for
things like whether the hits should show
| | 04:22 | for these articles, which we have set
that to no for the whole web site, and our
| | 04:27 | menu is controlling the fact that we
can see the Created Date and who the
| | 04:31 | article was written by.
| | 04:33 | That's under control of the menu, but
each one of the individual authors for
| | 04:37 | these articles is controlled by the
author alias on an article by article basis.
| | 04:42 | You can see that for our 20-page web
site it's not the end of the world to have
| | 04:46 | to go into each article and change
something, but if our 20-page web site became
| | 04:51 | a 200 or a 2000-page web site, we can
very easily add up to a ton of maintenance
| | 04:58 | to make changes to every
article on the web site.
| | 05:01 | So just as with CSS, you try to control
as much as possible with the most generic
| | 05:06 | selectors possible, we're going to try
to control as much of the look of our
| | 05:11 | Joomla web site under
control of those Article Options.
| | 05:15 | We're going to put them at the global
level as much as we possibly can, then
| | 05:19 | we'll override things in the menu or
the individual articles as needed to
| | 05:23 | override those global options.
| | 05:25 | But I strongly recommend you start
off by setting up the global options and
| | 05:29 | then thinking of the menus and the
articles as ways of overriding those global options.
| | Collapse this transcript |
|
|
7. Using ModulesConfiguring modules| 00:00 | So far we've set up some content for
this web site and the content consistently
| | 00:04 | shows up in the middle of the page.
| | 00:07 | We created our first module, a Menu
module, which displays on this page as well.
| | 00:12 | We use modules to split up our
navigation between the top and on the left side
| | 00:17 | on some pages and we have a module
displaying our navigation at the bottom of
| | 00:21 | the web page as well.
| | 00:22 | Modules go well beyond menus though.
| | 00:25 | A module is any bit of functionality
that you'd like to display in some area
| | 00:30 | other than the main part of the web site.
| | 00:32 | It could be something that displays in
the header, the footer, the left or right
| | 00:36 | columns, across the top or
even inside of an article.
| | 00:40 | There are several modules
that come with Joomla by default.
| | 00:43 | We'll cover those in the next few videos.
| | 00:45 | The big question is how do you get a
module to display in certain parts of
| | 00:50 | the web page? Every template comes
with certain module positions. These are
| | 00:55 | positions coded by the person who
created the template, which will ultimately
| | 01:00 | contain the modules for that page, if
there are any modules assigned to that page.
| | 01:04 | There is an easy trick to peek at where
module positions are located within our template.
| | 01:10 | I showed this technique to you in an
earlier video in the menus portion of the
| | 01:14 | videos, but I'm going to show this to
you again in case you happen to miss that.
| | 01:19 | This is called the TP equals one trick
and in order to make TP equals one work
| | 01:25 | with Joomla 1.6, the first thing you
have to do is once you have gone into the
| | 01:29 | back end of your web site, go to
Extensions > Template Manager, go to the
| | 01:35 | Options and make sure that
Preview Module Positions is enabled.
| | 01:40 | By default this is disabled in Joomla
1.6 and a lot of people have been asking,
| | 01:45 | oh my goodness where's my TP equals one?
| | 01:48 | Well it's still here it's just turned
off by default, you actually have to turn it on
| | 01:52 | in order to use it on your
Joomla 1.6 web site. And it's probably a good
| | 01:57 | idea to go ahead and disable the Preview
Module Positions, before you launch the web site.
| | 02:03 | Go ahead and once you have made that
change click Save & Close and now go back
| | 02:07 | to the front end of the web site and
after the ending of the web site address,
| | 02:12 | go ahead today question mark, TP, as in
Template, equals 1 and what this will do is
| | 02:21 | outline all of the module positions
available to you within a specific template.
| | 02:27 | It'll tell you what those module
position names are and it will show you where
| | 02:31 | they're located on the web page, whether
you have a module in that position or not.
| | 02:35 | So, right now we have our horizontal
navigation. We have nothing in position-1,
| | 02:42 | In position-2, we have our breadcrumbs.
| | 02:44 | Over on the left side of the page is
postion-7 where we have our login form and
| | 02:50 | we also have a position-5, which comes
underneath of postion-7. We have positions
| | 02:55 | 9, 10, and 11 across the bottom and a
debug position after that and a position-14
| | 03:00 | down in the very bottom footer of the
web site. We also have positions 6, 8 and
| | 03:05 | 3 here on the right side
of the page and a position 12.
| | 03:09 | So we could in theory have a module
on top of our main content for the web
| | 03:14 | site, if we wanted to.
| | 03:16 | That's just this template that we're
looking at right now, the beez 2.0 template.
| | 03:21 | If we were to switch to a different
template, the module positions might be
| | 03:25 | called something else entirely
different and they might be located in entirely
| | 03:29 | different places on the web page.
| | 03:31 | To turn off this display, go back up
to the top of the page and erase the TP
| | 03:36 | equals 1 and then hit
Return to refresh the web page.
| | 03:39 | In the back end of the web site, you
can also turn off the Preview Module
| | 03:44 | Positions, you can set back to No if you wish.
| | 03:46 | This TP equals one trick is really
helpful as you download more third-party
| | 03:51 | templates and you work
with templates within Joomla.
| | 03:54 | So that you understand various where
positions are available where you can drop
| | 03:58 | various modules into your web page.
| | Collapse this transcript |
| Creating a custom HTML module| 00:00 | We are going to build our
first module for this web site.
| | 00:03 | This is a custom HTML module.
| | 00:05 | It's very easy and very straightforward.
| | 00:08 | Think of it as a mini article.
| | 00:10 | The custom HTML module will display
what ever text or code you enter into it,
| | 00:15 | just like an article does right now,
except it will display at different
| | 00:18 | places on your web site.
| | 00:19 | So to create a new module we're going
to go to Extensions > Module Manager,
| | 00:25 | and you see that we already have several
modules that are running here on our web site.
| | 00:29 | To create a new module, you click the
New button and these are all of the
| | 00:33 | modules that are currently
installed for your web site.
| | 00:36 | So you can pick one of these from
the list. I'm going to pick the one
| | 00:39 | called Custom HTML.
| | 00:41 | We'll go ahead and give this a title,
which I'm going to call this Testimonials,
| | 00:47 | and I'm going to show that title and
the position where I want this is in
| | 00:52 | position-3, which is on the
right side of the web page.
| | 00:55 | Although this indicates that's right
bottom, let me change that. Let's go to
| | 01:00 | position-6, which is called Right Top.
| | 01:02 | It's Published and it's Public, and
I'm going to scroll down to the bottom of
| | 01:07 | the web page where we've got the text
output here, and what I'm going to do is
| | 01:11 | open up my Exercise Files, where I've
some testimonials that are available.
| | 01:16 | I'm going to go ahead and highlight
everything and say Edit > Copy, then I'm
| | 01:20 | going to Ctrl+V or Command+V to paste
that text into my window right here.
| | 01:27 | So there we go, we already
have all our testimonials here.
| | 01:30 | Now I'm going to go ahead and hit my
Save & Close button and I'm going to return
| | 01:36 | to the front end of the web site and
refresh, and looking at the front end of
| | 01:40 | the web site, we now have our
testimonials that are showing up right here in the
| | 01:43 | right column, which is great!
| | 01:45 | This is a nice way to enhance the
homepage of the web site, talking about how
| | 01:48 | great the olive oil is.
| | 01:50 | However, we've also got to testimonials
showing up pretty much on every single
| | 01:54 | page of this web site.
| | 01:56 | What if I wanted just to have
the testimonials on the homepage?
| | 01:59 | I'll show you how to that in the next video.
| | Collapse this transcript |
| Assigning a module to the site| 00:00 | In our last example we've created a
custom HTML module for our testimonials,
| | 00:05 | which are now displaying on
every page of the web site.
| | 00:08 | That's the default setting
for any module that you create.
| | 00:11 | What if we want to assign that module
to only certain pages or to every page
| | 00:16 | except for certain pages?
| | 00:18 | Let's take a look at our module again
by going to the Module Manager. We'll go
| | 00:24 | ahead and click on the
Testimonials module that we just created.
| | 00:28 | If I scroll down the page, pass that
custom output we have a Menu Assignment box,
| | 00:33 | and right now by default, our module is
set to display on all pages of the web site.
| | 00:40 | We have some other
options here we can work with.
| | 00:42 | We could say put it on no pages, which
is effectively un-publishing the module.
| | 00:47 | We could say only put it on selected
pages by checking off exactly which pages
| | 00:52 | we want it to appear on.
| | 00:53 | We are going to do that in just a second
for the Home, but best of all in Joomla
| | 00:57 | 1.6--this is such a great new feature--
we can also include our module on all pages
| | 01:03 | except those selected.
| | 01:05 | Previously in Joomla 1.5, if you had a
module that you wanted to have display on
| | 01:10 | every page of the web site except for
the homepage, you wound up having to
| | 01:15 | assign modules every time you created
a new page of the web site, you'd have to
| | 01:19 | jump into your Module Manager and assign
that module again, and inevitably you'd
| | 01:24 | forget and the page would look
weird and your client would call you for
| | 01:27 | technical support, and it
was a real pain in the neck.
| | 01:31 | So having the option to put it on every
page of the web site except for certain
| | 01:36 | pages is a real timesaver, and it's just
going to make things so much easier for
| | 01:41 | building your 1.6 web sites.
| | 01:43 | The option we really want though is to
show our module on all pages selected.
| | 01:48 | In other words all we really want to do is
show our Testimonials module on the Home page.
| | 01:54 | So I'm going to go ahead and pick
that and it gives me now the option of
| | 01:58 | selecting exactly which items I want.
| | 02:00 | The Toggle Selection button will
deselect all of those options for me and I can
| | 02:05 | now just check off the homepage, and
I'm going to double-check to make sure that
| | 02:08 | my footer page also got
deselected, which it did.
| | 02:11 | So now I'm going to go ahead and
save this and refresh the homepage and I
| | 02:17 | should see no change, which I do.
| | 02:20 | I see the testimonials over here in the
right-hand side of the homepage, which is
| | 02:24 | great, but if I go to the About page,
there is no testimonials over there.
| | 02:28 | That's exactly the behavior that I wanted.
| | Collapse this transcript |
| Creating a breadcrumb module| 00:00 | A breadcrumb is the string of little links
that show where you are in the site hierarchy.
| | 00:06 | Just like Hansel and Gretel
dropping breadcrumbs through the forest.
| | 00:08 | The breadcrumbs on your web site
are here so that you don't get lost.
| | 00:12 | If you are looking at the homepage,
you see this tiny little word over here.
| | 00:16 | It says You are here: Home.
| | 00:17 | Now if I go to the About
page, this is You are here:
| | 00:21 | Home > About and if I go to
Our People page, You are here:
| | 00:24 | Home > About and People.
| | 00:26 | Of course, we can always go back a level
by clicking on the link for About.
| | 00:30 | This takes us back to the About page or
clicking on the link for Home takes us back
| | 00:34 | to the homepage, which is great.
| | 00:36 | Breadcrumbs are really useful for sites
with lots of levels and very deep navigation.
| | 00:42 | By default Joomla created a breadcrumb
module for us and installed it on the web
| | 00:46 | site when we installed Joomla.
| | 00:48 | So let's take a look at how this
breadcrumb is configured in the backend of Joomla.
| | 00:53 | So I am going to go ahead and go to
Extensions > Module Manager and here in the list
| | 00:59 | you will see a link
to the breadcrumbs module.
| | 01:01 | Go ahead and click that.
| | 01:02 | At anytime you look at any of the
modules pretty much no matter what you install
| | 01:07 | for a module, the basic construction
of the screen is set up the same way.
| | 01:12 | On the left side under Details, you
always have the same pieces of information,
| | 01:17 | including a title, whether the title
should show, its position, whether it's
| | 01:20 | published, who can see it,
the order in which it appears.
| | 01:24 | New in Joomla 1.6 we now have the
ability to start and finish publishing our
| | 01:28 | modules, which is great news, because
now we can say we want this module to
| | 01:33 | appear only on the web site for a
certain period of time or to start appearing
| | 01:37 | at some point in time and
then leave the web site again.
| | 01:41 | That's new in 1.6 and it's a great feature.
| | 01:44 | The Menu Assignment is also always
down here at the bottom of the page.
| | 01:48 | Currently, our breadcrumb module is
assigned to all pages of the web site.
| | 01:52 | That's generally helpful for any kind
of navigation to appear in all pages.
| | 01:57 | However, if you look at the homepage,
this is really not terribly helpful.
| | 02:02 | Nothing is clickable in this text
and it just says You are here: Home.
| | 02:06 | Of course, I am on the
homepage of the web site.
| | 02:08 | I don't really need a breadcrumb right here.
| | 02:10 | So what I am going to do is I am
going to use that great new feature here
| | 02:14 | in Joomla 1.6 and change this to
show this breadcrumb module on all pages
| | 02:20 | except those selected.
| | 02:22 | So I want the breadcrumb on every page of the
web site, but I don't want it on the homepage.
| | 02:27 | So I am going to Toggle Selection
here to turn off everything and then
| | 02:32 | check off the homepage.
| | 02:33 | So now my breadcrumb will show on every
page of the web site except for the homepage,
| | 02:39 | which is terrific.
| | 02:41 | Up here in the upper right side of the
page there are all kinds of different
| | 02:45 | options here and it's highly variable
depending on what module you're looking at.
| | 02:50 | This particular module comes with
both Basic and Advanced Options.
| | 02:54 | So under our Basic Options it says we have
the option of showing the text "You are here."
| | 03:01 | So right now that's turned on and we
could leave that on if you want, if you
| | 03:05 | like that feature or you can turn it off.
| | 03:08 | I am going to go ahead and turn it off.
| | 03:09 | Show Home indicates whether the word
Home should appear in the breadcrumb path
| | 03:15 | and I am going to go ahead and leave
that Home, because I think the more ways
| | 03:18 | that people can go back to
the homepage, the better.
| | 03:21 | We can also change what that text is for
the homepage, whether you wanted to say
| | 03:26 | Home or you want it to say Front Page or
you want it to say something else entirely.
| | 03:30 | But I think it's probably most
intuitive for that text to stay with the word
| | 03:34 | Home so I am going to go
ahead and leave that there.
| | 03:36 | Show Last means on a page like if I go
to About and I go to Our Process whether
| | 03:44 | Our Process portion of the breadcrumb
here should show up to breadcrumb or
| | 03:48 | whether the breadcrumb
should simply say Home and About.
| | 03:52 | I think it's better to go ahead and
show that last entry so I am going to go
| | 03:56 | ahead and leave that on.
| | 03:57 | Finally, the Text Separator.
| | 03:59 | So here in our breadcrumb, right now we
have these little gray arrows in between.
| | 04:04 | If we prefer, you can type in a
character from your keyboard and that will
| | 04:09 | separate the breadcrumb
instead of that little gray arrow.
| | 04:13 | There are some items here under our
Advanced Options, which are really a better
| | 04:16 | fit with the Joomla 1.6 Templates video.
| | 04:20 | They have to do with alternative layouts
for this particular breadcrumb and using
| | 04:24 | module class suffixes.
| | 04:26 | The Caching in particular has to do with
how long Joomla should hold a processed
| | 04:32 | format of the breadcrumb.
| | 04:34 | Every time you hit the web site it has
to regenerate the breadcrumb to send to
| | 04:38 | the person requesting it.
| | 04:39 | You can control caching of some of
these items by turning this on and
| | 04:44 | determining how long in seconds.
| | 04:46 | That's 900 seconds
something should be cached.
| | 04:50 | Rather than Joomla regenerating the
breadcrumbs every time somebody asks for it,
| | 04:54 | it will serve up the copy that it
generated once and then it is holding for 900
| | 04:58 | seconds before it regenerates it.
| | 05:00 | The advantage here is you reduce the
amount of hits onto your server's processor
| | 05:07 | in particular and how much processing
time it takes, which is very important if
| | 05:11 | you have a very large web site.
| | 05:13 | But the downside is if you make any
changes to your site navigation,
| | 05:17 | your breadcrumbs might not update for a
little while before you'll see that change on
| | 05:20 | the front end of your web site.
| | 05:22 | So I think you can probably stay away
from everything under Advanced Options.
| | 05:26 | Go ahead and make whatever changes you
wish to the Basic Options and when you're
| | 05:30 | done click Save & Close and we will
refresh the front end into the web site and
| | 05:35 | you'll see that now for my
configuration the "You are here" thing is gone and it
| | 05:39 | just says Home and About in our process.
| | 05:41 | Now if I go back to the homepage,
the breadcrumb doesn't appear at all.
| | 05:45 | So I'm really happy with
that particular configuration.
| | Collapse this transcript |
| Creating a random image module| 00:00 | The random image module chooses an
image at random from a predefined folder in
| | 00:05 | Joomla's Media Manager.
| | 00:06 | It then displays a different
image each time the page is reloaded.
| | 00:10 | This is not a fade-in/
fade-out kind of slideshow.
| | 00:14 | Joomla does have the capability of
doing that through third party extensions,
| | 00:18 | but those kinds of extensions are
not packaged with Joomla's core.
| | 00:22 | First of all, before you can create
the random image module, you need to
| | 00:25 | create the images for it.
| | 00:27 | Use your favorite photo editing
software and then make sure each picture is
| | 00:31 | the same dimensions for best results.
| | 00:34 | Ideally it has exactly the same width
and height but if you can't do that,
| | 00:39 | at least make them all have the same width .
Otherwise you may change the layout of
| | 00:43 | the web site as fatter pictures get loaded
verses some of the skinnier pictures you have.
| | 00:48 | If you have different heights,
remember that the content beneath the random
| | 00:52 | image module will move up and down
on the page as the page is refreshed.
| | 00:57 | So you'll probably want to watch that
as well and think carefully about the
| | 01:01 | ordering of the modules
within that particular position.
| | 01:05 | Before we create our random image module, we
have to upload our images to the Media Manager.
| | 01:10 | So we are going to start by going to
the Media Manager by clicking on the icon
| | 01:15 | and we're going to create a new
folder to put all of our random images in.
| | 01:19 | That way we will have a
select list of those random images.
| | 01:23 | So I'm going to scroll down the screen
here and for my folder I am going to type
| | 01:27 | in the word random and Create Folder
and now I am going to double-click on the
| | 01:32 | folder to open it and then I'm going to
click my Browse button and I am going to
| | 01:39 | my Exercise Files in Chapter 7, in 07_
05, and I have a series of pictures that
| | 01:47 | I would like to upload.
| | 01:48 | So I am going to have to click on
each one individually and upload those.
| | 01:52 | All right, so now I have got my five
pictures here located within my random folder.
| | 01:57 | The other thing that's very important
is that you make sure all of your images
| | 02:00 | are the same file type.
| | 02:02 | So all of these images are JPEGs, they
are all pictures, and so that works great.
| | 02:07 | If you want to have GIFs, you can have all GIFs.
| | 02:10 | If you want to have PNGs, you can have all PNGs.
| | 02:13 | The thing you can't do is mix your
GIFs and your JPEGs and your PNGs and have
| | 02:17 | different file formats in
the theme random image module.
| | 02:20 | We want them all one type of image.
| | 02:23 | Now I am going to go to Extensions >
Module Manager and we will go ahead and
| | 02:28 | create my new module by clicking on the
New button and I am going to find Random
| | 02:33 | Image in my list and I am going to go
ahead and configure this to display on the
| | 02:37 | left side of the web page.
| | 02:39 | So I am going to give this a title,
Random Image, but I really don't want that
| | 02:45 | title to show because it's a picture
and I don't really need a title for that.
| | 02:50 | The Position is going to be position-7
which is that left column on my web page
| | 02:56 | and it's published and so forth.
| | 02:58 | I am going to have it display on all
pages of my web site, so that's all set
| | 03:02 | down here in the menu assignment.
| | 03:05 | Now under Basic Options you need to
specify first your Image Types, so that's
| | 03:10 | where you put in whether they are
JPEGs, GIFs or PNG. List one type there.
| | 03:14 | You will need to list the path to the image
folder, which in this case is images/random.
| | 03:21 | If you want to have a link for these
images you can enter that and the link
| | 03:26 | means that anytime anyone clicks on any of the
images, they will go exactly to the same page.
| | 03:32 | So it's one link for all of those images.
| | 03:36 | If you want a unique link for each image
you should use the Banner Ad component,
| | 03:41 | which will allow you to have
unique link for each image.
| | 03:44 | We also should enter some dimensions
for the pictures and they are 200 pixels
| | 03:49 | wide by 133 pixels tall.
| | 03:52 | Of course if you're using a different
pictures or whatever, you enter your own
| | 03:57 | dimensions in that spot. And I am
going to go ahead and click Save &Close.
| | 04:01 | I'll refresh the web site and
you'll see that we have our picture here
| | 04:07 | showing up in the left column and if I
go to the About page, I have my picture
| | 04:13 | on top with a navigation
underneath, followed by the login form.
| | 04:16 | Now I would really like to get rid of
that login form for the moment. We are
| | 04:20 | eventually going to add a login to this
web site but I'm not sure that I really
| | 04:24 | want the login form displayed over there
and certainly I don't need it displayed
| | 04:28 | over there right now.
| | 04:29 | I would also like to have the secondary
navigation show above the Random Image,
| | 04:35 | so that it's easy for people to access
that navigation and they see it right away
| | 04:39 | and since the Random Images is
just a decoration for this web site, it
| | 04:43 | should really appear under that navigation.
| | 04:45 | So I will show you how to do that.
| | 04:47 | Back in the backend of Joomla, if I go
to my login form, you see here is located
| | 04:53 | in position-7 and what I would like
for that to do is you un-publish it.
| | 04:59 | So, I am going to go ahead and click there
and that has now unpublished that Login form.
| | 05:06 | Next we wanted to rearrange the order
of the subnavigation and the Random Image
| | 05:12 | and basically, we want to
reverse what order they are in.
| | 05:15 | If you take a look at the ordering
column, you will notice that there is no
| | 05:18 | arrows and there is no little boxes--
Well we have little boxes for typing in the
| | 05:22 | numbers, but there's no disk
icon for saving and ordering.
| | 05:25 | So in Joomla 1.6 by default, we sort
these modules by their position, which we
| | 05:32 | know because you see this little icon
right here next to the Position header,
| | 05:36 | here in the Module Manager.
| | 05:38 | What I need to do is click on the
Ordering column and when I do that we're now
| | 05:43 | sorted by the order in which these
modules are displaying and when I do that,
| | 05:48 | I get my little arrows back and I get
my disk icon up here on the top as well.
| | 05:53 | So now I can rearrange the
order of these particular modules.
| | 05:56 | So I would like my subnavigation to show
first, so I am going to hit my up arrow.
| | 06:01 | So I have the subnavigation
followed by the Random image.
| | 06:05 | And when I refresh the front end of the web site,
that's looking much better, so much less busy.
| | 06:11 | We have our subnavigation followed by
our picture and on the Home page we just
| | 06:16 | have a photo over there on the left
hand side with our content in the middle of
| | 06:20 | the page and our testimonials over on
the right side of the page and without
| | 06:25 | that login box over there, that just
looks a whole lot less cluttered and I'm
| | 06:29 | much happier with the way things are looking.
| | Collapse this transcript |
| Creating a newsflash module on the home page and turning off the home page heading| 00:00 | A great module to add to the Homepage
of your web site is some of the latest
| | 00:04 | news that's been published.
| | 00:05 | The News Flash module is a good way to
do this, as it will pull articles from a
| | 00:10 | category and then display them on the web site.
| | 00:13 | So let's start by creating that module
by going to Extensions > Module Manager.
| | 00:17 | We're going to make a new
module by clicking the New button.
| | 00:20 | And we're going to find the
News Flash module in our list here.
| | 00:24 | It's under Articles > News Flash.
| | 00:25 | We'll go ahead and give this a title of
something like Latest News and we'll go
| | 00:32 | ahead and show that title.
| | 00:33 | I am going to go ahead and display
this in Position 7 again, but only on the
| | 00:38 | homepage of the web site.
| | 00:42 | So down here under the Menu
Assignment I am going to go ahead and say Only
| | 00:46 | on the selected pages.
| | 00:48 | And I'll just put it on
the homepage of the web site.
| | 00:50 | So, on the homepage we'll have a list
of the latest news in the left column.
| | 00:55 | And then over here under our Basic
Options we have many things pertaining to
| | 01:00 | this particular module.
| | 01:02 | First of all we have to
pick what category we want.
| | 01:05 | So I want that News category.
| | 01:07 | That's where our news is living.
| | 01:09 | We can show the images from those
articles or not, show the titles or not.
| | 01:13 | I am going to set the titles to show
for Yes, because I need a series of let's
| | 01:18 | say three articles on the homepage.
| | 01:20 | And I want to show the titles,
so people will know what's there.
| | 01:24 | I could make those titles linkable as well.
| | 01:27 | Note that I now have the option of
what header level I want to show the
| | 01:31 | titles of the article.
| | 01:32 | This is a really great search
engine feature in Joomla 1.6.
| | 01:37 | It's also good for accessibility.
| | 01:39 | So I pick Header 4 in this case to show
those particular articles, or of course
| | 01:45 | any of the other options here through Header 5.
| | 01:48 | I think Header 4 is
actually going to work just fine.
| | 01:50 | I am going to go ahead and show the
Read more link as well, because sometimes
| | 01:54 | people react better to that Read more link.
| | 01:56 | It's more obvious to them to read more
about the article to click on Read more,
| | 02:00 | than to click on the article title.
| | 02:01 | I only want to show 3 articles on the web page.
| | 02:04 | And what Order do I want them in?
The Published Date, the Created Date,
| | 02:09 | Ordering, or Random?
| | 02:10 | So if I put them in by the Published
Date, that's the date that they actually
| | 02:14 | show up on the web site, whereas the
Created Date is the date that they were
| | 02:17 | put into the web site.
| | 02:18 | So it's kind of big difference.
| | 02:20 | I am going to go ahead and order those
by the Published Date, which is just fine.
| | 02:25 | Let's go ahead and save these settings and
we'll refresh the front end of the web site.
| | 02:30 | And here we have our Latest News.
| | 02:32 | We have our article titles, which are
linked, because when we roll over them we
| | 02:36 | can go to the full article.
| | 02:38 | And underneath we do have our Read more links.
| | 02:40 | So when I click on Two Trees Olive Oil
Builds New Production Facility, I go to
| | 02:46 | the full article, which is terrific.
| | 02:48 | And notice that I still have my sub
navigation and my random image underneath.
| | 02:55 | And here on the homepage my random image
is showing up down at the bottom of the
| | 02:58 | page which is lovely.
| | 03:00 | But I might actually want the random
image at the top of the page here, given
| | 03:05 | the layout of this particular template,
so I think I am going to reorder those.
| | 03:08 | I am going to go ahead and
hit Save & Close for my module.
| | 03:14 | And then I am going to bump the
Latest News up before the Random Image.
| | 03:21 | Now I have the Latest
News as the very top thing.
| | 03:24 | So unfortunately there is a minor bug in
Joomla 1.6, and sometimes this ordering
| | 03:29 | doesn't work quite correctly.
| | 03:30 | I still have my Latest News
on top of my Random Image.
| | 03:33 | So I am going to try again to move my
Random Image up over my Latest News.
| | 03:39 | Now we have the Random Image showing
first, followed by the subnavigation and
| | 03:42 | followed by the Latest News.
| | 03:44 | That works just fine because of course
the subnavigation doesn't show on the
| | 03:48 | homepage and the Latest News
doesn't show in any other page.
| | 03:51 | Even though they are in something of an
odd order perhaps, that works just fine,
| | 03:56 | because subnavigation and Latest News
never display together on the same page.
| | 04:00 | So let's refresh the homepage
and see how this is looking.
| | 04:03 | So now I have a nice picture on the
top here, which frames our content in the
| | 04:08 | main content area very nicely.
| | 04:10 | Our Testimonials are over on the right
and the Latest News is appearing here
| | 04:14 | underneath and you can either click on
the title of the article, or the Read more
| | 04:18 | to go and read the
full version of this article.
| | Collapse this transcript |
|
|
8. Using ComponentsUsing the content component| 00:00 | Now that you know all about modules,
it's time to learn about components.
| | 00:05 | You might be surprised to know that you
already have been working with components.
| | 00:09 | Content is a kind of component and it
shows up in that main part of the web page.
| | 00:13 | There is only one component per page, while
there may be many modules on the same page.
| | 00:20 | Let's take a look at the
front end of our web site.
| | 00:22 | I'm going to go back to my homepage.
| | 00:25 | We have so many modules on this web
site right now. We have our horizontal
| | 00:30 | navigation across the top, we have a
random image module and the latest news
| | 00:35 | on the left side of the page, we have
our testimonials showing on the right
| | 00:39 | side of the page, and we have our
privacy policy showing down here at the
| | 00:42 | bottom of our page.
| | 00:45 | This font size item here is not a module.
| | 00:47 | It's actually coded directly into the
template for this particular web page.
| | 00:52 | And the banner for this page is
also under control of the template.
| | 00:58 | Right here smack in the middle of the
page, so-called main part of the web site,
| | 01:01 | is where the component will display.
| | 01:04 | And the name of this component is
called COM Content, COM_Content.
| | 01:10 | A measure difference between modules
and components is that components require
| | 01:15 | some configuration and then in order to display
them, you must link them to the menu directly.
| | 01:22 | They are never assigned a position on
the page the way modules are assigned
| | 01:27 | positions in order for them to display.
| | 01:30 | Every component has a different
configuration options and different ways for
| | 01:35 | connecting that component to the menu,
so you need to watch out for that.
| | 01:39 | I'm going to show you a few components
in later videos that ship with Joomla and
| | 01:45 | you'll get a sense for how the
components work and what to watch out for when
| | 01:49 | you're working with a new
component that you're not familiar with.
| | 01:52 | Finally a component may also
have a module associated with that.
| | 01:57 | A great example of this is the Banner
module, which I'm going to go through.
| | 02:01 | The Banner component is where you
configure these banner ads, and then the
| | 02:06 | Banner module controls where the
banner ads display on the web site.
| | 02:10 | Don't let that trip you up.
| | 02:12 | It's very common for components and
modules to work together on a web site,
| | 02:16 | but it's also common for a
component to just be a component without any
| | 02:20 | modules of supporting it.
| | Collapse this transcript |
| Using the contact component| 00:00 | Contact forms on web sites are
just about everywhere these days.
| | 00:04 | In the age of Gmail and mobile phones,
having an email address with a mail-to
| | 00:09 | action, one of those links that you
actually click and then Eudora or Outlook
| | 00:15 | open up and you can send the email
from within that program on your computer,
| | 00:19 | That just doesn't work so well anymore
because so many people have switched to
| | 00:24 | some form of online email and they may
just be using their web browser as the
| | 00:29 | client for the email now,
rather than a separate program.
| | 00:32 | So, it's really nice to offer people
a form, which will work no matter what
| | 00:36 | technology you're using to access the Internet.
| | 00:39 | Anyone can fill in a form whether
they're on a phone or on a PC or Macintosh.
| | 00:44 | Fortunately, Joomla has contact forms
built right into it and it's a snap to
| | 00:48 | create a contact form.
| | 00:51 | So, in order to do this, the first
thing we have to do is create a Contact
| | 00:55 | category and then we will
actually create our contact itself.
| | 00:59 | And then we are going to link it to the menu.
| | 01:01 | That's what we're going to cover.
| | 01:02 | So, to get started, we are going to
go to our Components menu and we are
| | 01:07 | going to go to Contacts.
| | 01:09 | Now, while I am here in the Components
menu, let me point out something that's
| | 01:12 | going to be different
between my web site and yours.
| | 01:14 | I've a component in place right now
called Akeeba Backup and I've been using
| | 01:20 | Akeeba Backup to back up this web site
as I've been creating all of these videos
| | 01:25 | to make the Exercise Files.
| | 01:27 | You won't have the Akeeba Backup
option in your particular Joomla 1.6
| | 01:32 | installation, unless you went
ahead and installed it on your own.
| | 01:35 | Don't panic. I am going to show you
later how to install Akeeba Backup and how
| | 01:40 | to use it to make backups for your web
site, which are just so important when
| | 01:43 | you're working in a content
management system like Joomla.
| | 01:46 | So, to get back to the contact forms, I
am going to go to Contacts and I am going
| | 01:51 | to go to Contact > Categories and click that.
| | 01:56 | And just like in our article categories,
in our contact categories, we have one
| | 02:02 | by default called Uncategorized.
| | 02:04 | I can go ahead and create my new
category, which I am going to call just
| | 02:09 | Two Trees Olive Oil.
| | 02:12 | I can nest my contact categories, the
same way I can nest all of my categories
| | 02:17 | in the Joomla articles.
| | 02:20 | So, I can set a parent for that
particular category, if I wish and I can put in
| | 02:24 | things like a
description and so forth if I wish.
| | 02:27 | But I am going to leave everything else
alone for the moment, and I am going to
| | 02:30 | go ahead and say Save & Close.
| | 02:31 | So, all we did was put in a title for that.
| | 02:36 | Now, I need to go to either Components
> Contacts > Contacts or I can go over
| | 02:42 | here to the Contacts link right here
in my subnavigation. Both options take
| | 02:47 | you to the same place.
| | 02:48 | And now I am going to make a new
contact for my web site, which will become
| | 02:52 | our Contact Us page.
| | 02:54 | So, I am going to go ahead and click
the New button and I am going to give this
| | 02:58 | a name of Contact Us.
| | 03:01 | And if you scroll on down underneath,
we have the option of putting in some
| | 03:06 | additional information that
might go on this web page.
| | 03:08 | For example, sometimes people post a
link to directions to their facility or
| | 03:15 | they might put in the hours
in which their store is open.
| | 03:18 | That type of thing can go
right here in Other Information.
| | 03:22 | On the right side of the screen,
under Contact Details, this is where you
| | 03:27 | actually go through and enter all
of the information for your contact.
| | 03:30 | This is pretty different than
Joomla 1.5, in terms of where things are
| | 03:35 | located on the screen.
| | 03:37 | So, first of all, if we want it, we
could upload an image to our Contact and we
| | 03:41 | could do that right here within our
contact manager, which is a wonderful thing.
| | 03:46 | We can enter a position and
we can enter an email address.
| | 03:49 | So, since this is just the generic
contact form for the company, I am not going
| | 03:54 | to put in a picture or position, but
I will put in the email address, which
| | 03:58 | info@twotressoliveoil.com.
| | 04:02 | Under the Address, we will go ahead and
enter our address, which is 123 Market St.
| | 04:08 | Our City is Ventura, the State is
California, and our ZIP Code is 91234.
| | 04:15 | Since, Two Trees Olive Oil is only
doing business within the United States,
| | 04:21 | I am going to leave the Country field blank, but
you of course could fill that in if you wish.
| | 04:24 | I am going to enter my phone number
for the company, which is 123-456-7899.
| | 04:33 | There is the option here to enter a cell
phone number or fax number, so forth, if you wish.
| | 04:40 | But I think that's pretty much all the
information we need to contact customer services.
| | 04:46 | Under our Display Options, we can
choose which pieces of information we want to
| | 04:50 | display on the web site, and I've only
filled in certain pieces of information
| | 04:55 | and those are the pieces of
information I want to display.
| | 04:58 | So, I'm not going to make any changes
here, but you could go ahead and change
| | 05:03 | things around here if you wish.
| | 05:06 | For the contact form itself, we have
the option of showing the contact form and
| | 05:11 | sending a copy to the person who
sent in the request to the company.
| | 05:17 | I am going to go ahead and set that to Show.
| | 05:19 | That way somebody has the option
of getting copied on that email.
| | 05:24 | There are some filtering options here.
| | 05:26 | If you're getting a lot of spam
through your form, you can ban certain email
| | 05:30 | addresses or subjects or
text within the message.
| | 05:33 | Notice also that we have the option of
including metadata on our contact form.
| | 05:37 | That is new in Joomla 1.6.
| | 05:39 | So, we can enter a meta description
and meta keywords if we wish as well.
| | 05:44 | I just realized that I failed to
assign a category to our particular contact
| | 05:49 | over here on the side.
| | 05:50 | I've left that as uncategorized and I
really meant to switch that to the Two
| | 05:54 | Trees Olive Oil category.
| | 05:55 | So, I am going to go ahead and do that.
| | 05:58 | Click Save & Close and we
have our new contact here.
| | 06:01 | It's all we have been created.
| | 06:03 | Now, what we're going to do is
link this contact to our menu.
| | 06:07 | So, to do that, we are going
to go to Menus > Main Menu.
| | 06:12 | And I am going to create a new menu
item by clicking on the plus sign.
| | 06:15 | For our menu item type, I will click
the Select button and this time, I am
| | 06:19 | interested in the Contacts portion of the
screen, up here on the upper left corner.
| | 06:24 | And I have some options. I can list
all of the contact categories, in other
| | 06:28 | words it would show me the
Two Trees Olive Oil category.
| | 06:31 | I could list all of the contacts within
a specific category, so if I had several
| | 06:37 | people who are within a certain
department for example, my department could be
| | 06:41 | the category and using this feature, I
could list all of the people who were on
| | 06:45 | staff within that department.
| | 06:47 | I can also list a single contact,
which is what I really want to do in
| | 06:51 | this particular case.
| | 06:52 | I just want to link to the
contact that I just created.
| | 06:56 | There's also an option to
list your featured contacts.
| | 06:59 | Just as we had had within our
articles in Joomla, we can now pick featured
| | 07:04 | contacts for our specific contacts.
| | 07:06 | Flag them as Featured and then we
could display them all on one web page if
| | 07:10 | we wish to do that.
| | 07:12 | So, I am going to go ahead
and click on Single Contact.
| | 07:15 | For the menu title, I am
going to put in the word Contact.
| | 07:19 | It's going to be published on the main
menu and at the top level, so I don't to
| | 07:23 | change any of those things.
| | 07:24 | Then I am going to go ahead and select my
contact from the list, which is Contact Us.
| | 07:31 | You'll notice that we have a bunch of
options here and they look remarkably
| | 07:35 | familiar to the ones we have just
looked at. Just as we were working within our
| | 07:40 | articles and we had our global article
options, we had our menu options and we
| | 07:44 | had our specific contact options,
| | 07:46 | things worked the same way within
our contacts, so we have global options
| | 07:52 | that are settable within the Contact
Manager, we have menu options here that
| | 07:56 | we can set within the menu and we also
have individual contact overrides that
| | 08:01 | we can set as well.
| | 08:05 | The same is true for Mail Options.
| | 08:07 | We saw those already over in
the individual contact list.
| | 08:10 | If you remember the Page Display
Options, we saw this already within the
| | 08:16 | articles for Joomla, and we have also
our Metadata Options, which we also saw
| | 08:22 | within our articles for Joomla.
| | 08:24 | One thing that's new that I didn't talk
about last time under articles, but is
| | 08:30 | available now, is the Module
Assignment for this particular menu item.
| | 08:34 | So, we have the option right within
our menu item of assigning our modules,
| | 08:39 | which is really terrific.
| | 08:41 | If I wanted to have specific modules up
here on my web page, I can do it right
| | 08:45 | here through this interface.
| | 08:48 | Okay, I am going to go ahead and hit
Save & Close and I am going to go back over
| | 08:53 | to the front end of the web site
and I am going to click Refresh.
| | 08:56 | And our Contact link shows up here in our
main navigation, just where we wanted it.
| | 09:01 | When I click that, you'll see that
we have our Contact Us information.
| | 09:07 | We're located here in Ventura. We have
a contact form where we can enter our
| | 09:13 | name and email on the subject of
this particular form, as well as all the
| | 09:17 | message, and we can send a copy to ourselves.
| | 09:20 | And a space for Other Information.
That was the text editing back that we saw
| | 09:26 | within the screen when we
created the individual contact.
| | 09:29 | So, any information like store hours
or directions, that kind of thing, could
| | 09:33 | show up here under Other Information.
| | 09:37 | If you're curious about this accordion
panel layout, this is something that's
| | 09:41 | coded specifically into the Beez 2.0
template, and you can certainly incorporate
| | 09:47 | this type of styling into a custom
template or you could override this and you
| | 09:52 | could have all of the information
on one page, one thing after another.
| | 09:55 | So, that's a great technology that's
built into Joomla here to be able to add a
| | 09:59 | contact form to the Joomla
web site and it just works.
| | 10:03 | You can fill it out.
| | 10:04 | It will then email the
results of the form to you.
| | 10:07 | However, I should mention that if
you're running your web site locally,
| | 10:11 | your email may or may not work,
depending on how your computer is
| | 10:15 | configured, so watch out for that.
| | 10:18 | If the contact form doesn't work
and you get a message about email and
| | 10:22 | something's not working, it's likely because
you're running your copy of Joomla locally.
| | 10:27 | Once you get your web site up and
on to the Internet, your contact form
| | 10:32 | should work just fine.
| | Collapse this transcript |
| Creating a contact list| 00:00 | In our previous video we created a
single contact and we linked it up to our
| | 00:04 | menu for Customer Service.
| | 00:06 | But as you know, in real companies
there are frequently lots of people who
| | 00:10 | work there and perhaps you'd like to
have a choice as to who to contact for
| | 00:14 | various situations.
| | 00:16 | In this video we're going to
add four contacts to the web site.
| | 00:20 | Each contact will have their own
contact information and they'll have a picture
| | 00:24 | associated with their profile.
| | 00:25 | So we need to go ahead and set all of that up.
| | 00:28 | Let's go back to out Contact component by
going to Components > Contacts > Contacts.
| | 00:35 | We're going to go ahead and open up this
generic contact and we're going to make
| | 00:40 | it more specific just by editing it.
| | 00:42 | So the name here instead of
Contact Us will be Kurt James.
| | 00:46 | We will erase the alias.
| | 00:49 | We are still going to leave them in
the category of Two Trees Olive Oil.
| | 00:53 | Then over on the side here under
Contact Details, we are going to alter the
| | 00:58 | information just a little bit.
| | 01:00 | I will go ahead and click the Select button
and this is going to take me to my Media Manager.
| | 01:05 | In the Contact folder, we don't have
anything just yet, so I am going to go
| | 01:10 | ahead and browse for my Exercise
Files and I am going to go to Chapter 08,
| | 01:17 | video number 3, and we have
all the pictures for our contacts.
| | 01:22 | I am going to go ahead and open each one, one
by one and upload these into our Media Manager.
| | 01:32 | And I am going to go
ahead and pick out kjames.jpg.
| | 01:35 | That's Kurt James right there and
we will go ahead and say Insert.
| | 01:39 | So that will be the image that
we want to appear on the web page.
| | 01:43 | His position is Customer Service and
all the other information matches, so we
| | 01:49 | don't need to edit anything else.
| | 01:51 | So let's go ahead and click Save & New,
because I am going to put in the other
| | 01:55 | three contacts at this point in time as well.
| | 01:57 | The next contact we need to add is
Chris Green, who is the Sales Manager
| | 02:01 | in Restaurant Sales.
| | 02:02 | For the name we will put in Chris Green
and of course our category will still be
| | 02:07 | Two Trees Olive Oil.
| | 02:09 | On the right side under Contact Details
we will go ahead and select his image,
| | 02:14 | from our Contact folder, cgreen.jpg.
| | 02:20 | And for his position, Sales
Manager, Restaurant Sales.
| | 02:25 | His email is corporate@twotreesoliveoil.com.
| | 02:33 | His address is still 123 Market St.
| | 02:37 | It's still in Ventura, CA, 91234,
and his phone number is 123-456-7888.
| | 02:50 | That's going to go ahead and be all the
information we have for Chris Green, so
| | 02:54 | I am going to go ahead and click Save & New.
| | 02:55 | And I am going to enter the information
now for Tara Lougher and Jerry Martin,
| | 03:02 | and I am going to catch you as soon
as I am done with Jerry Martin. Okay.
| | 03:07 | I have entered my last contact here,
and all the information is in for all four
| | 03:12 | people, so I am going to go
ahead and click Save & Close.
| | 03:15 | And now I am going to go back to my
Menus > Main Menu, and I am just going to
| | 03:20 | edit the existing contact link that we
already created by clicking on this link.
| | 03:26 | And then I am going to
select a different menu item type.
| | 03:29 | Rather than the Single Contact, I'm now
going to List All Contacts in a Category.
| | 03:35 | So we've got all of our contacts who
are going to appear on the page. They are
| | 03:40 | all from the Two Trees Olive Oil
category, and they'll appear on the web page.
| | 03:44 | We will leave the title the way it is.
| | 03:46 | Contact is fine, the alias is fine, the
menu location and the parent item, all good.
| | 03:52 | So let's go ahead and pick our category,
which is Two Trees Olive Oil, over here
| | 03:57 | on the right side of the page.
| | 03:59 | And I am going to click my Save link.
| | 04:01 | I am coming back to the front end of my web
site, and if I just refresh this, it might work.
| | 04:09 | Sometimes these things will
produce 404 error pages.
| | 04:12 | For best results, if you're starting
on the page that you were just making a
| | 04:16 | major change to, like we've totally
changed the kind of link that we've made
| | 04:20 | from a Single Contact to a Contact
Category, it's often best to go back say to
| | 04:26 | the homepage first and then return to
that page so that we are loading the
| | 04:30 | correct information.
| | 04:32 | So here we have our Two
Trees Olive Oil contacts.
| | 04:36 | Two Trees Olive Oil is showing at the top
| | 04:38 | here as the title of that Contact
category, and then we have each person
| | 04:43 | listed individually with their position,
their phone number, and what's called
| | 04:47 | Suburb, State, and Country.
| | 04:49 | We probably want to turn
some of these things off.
| | 04:52 | If I click on Kurt James,
I will see a picture of him.
| | 04:56 | He is in Customer Service, along with
his address and his phone number and his
| | 05:01 | specific contact form.
| | 05:02 | So once I get here, things are okay,
but I probably want to alter the way
| | 05:08 | that this form works.
| | 05:10 | So I am going to come back here and of
course I could change this information
| | 05:14 | here within my menu item, but this is
one step removed from the global settings
| | 05:20 | for the category and since I don't
have any need for my contact list to ever
| | 05:26 | look like this anywhere on the web
site, I am going to go back to myglobal
| | 05:30 | settings for contacts and
see if I can alter this.
| | 05:35 | So I am going to go ahead and click
Save & Close to get out of my menu item.
| | 05:38 | And I am going to go back to Components >
Contacts to get to my main Contact Manager.
| | 05:45 | And over here in the upper
right corner is the Options button.
| | 05:48 | I am going to go ahead and click that.
| | 05:50 | This is where we can set the
overarching information about our Contact Manager.
| | 05:56 | So for example, by default we're
hiding the Contact category, which is great.
| | 06:02 | The Display format are sliders.
| | 06:05 | That's this thing where if we take a
look at Jerry Martin, we've got the things
| | 06:11 | that we click on here and the form
pops up in one of these accordion sliders.
| | 06:16 | If you don't like that, we could change
that format to either Tabs or just Plain.
| | 06:22 | Tabs of course would be tabs with those
pieces of information and Plain would be
| | 06:26 | just one piece of information after the other.
| | 06:29 | I am going to switch this to Plain
so you can see what that looks like.
| | 06:31 | We have all the information that's set to show,
except for the email address. That makes sense.
| | 06:36 | We don't want to show the email address
because otherwise spammers could pick up on that.
| | 06:42 | We could set a global image if we wished.
| | 06:45 | In this case we have all separate
images so I'm not going to do that.
| | 06:49 | Over here, under Icons, we can change the
icons that are showing on the web site right now.
| | 06:55 | So these little icons for the address
and the phone number are default icons.
| | 07:01 | We could override those using this form
here, by choosing different icons, which
| | 07:06 | we could create on our own, or
we could turn the icons into text.
| | 07:12 | Let's go ahead and hit the Save
button and see what that looks like.
| | 07:15 | If I refresh Jerry's page here, all
of the icons are now gone and the words
| | 07:21 | Address and Phone show up.
| | 07:23 | Also notice that Plain format has
taken over, so it's all showing on one page
| | 07:28 | without the accordion dropdown things.
| | 07:32 | We have information here about
configuring a category if we wish.
| | 07:36 | But what we are really most
interested in is the List Layouts.
| | 07:40 | So once again, taking a look at the
actual contact top-level page, where we have
| | 07:46 | our category list layout here. We
probably don't need this Display item showing
| | 07:51 | up here in the upper corner, we
probably don't need Country, State, or Suburb,
| | 07:55 | and we probably just want the Name,
the Position, and the Phone Number.
| | 07:59 | So we'll probably just
turn off the Table Headings.
| | 08:02 | I think it's pretty obvious what the names
and the titles and the phone numbers are.
| | 08:07 | We do want to show the Position.
| | 08:09 | We don't want to show Email.
| | 08:10 | We do want to show Phone Number.
| | 08:12 | we are hiding the Cell Phone and Fax.
| | 08:14 | But we don't need to show
City, State, or Country.
| | 08:18 | So we will turn all of those off.
| | 08:19 | Let's go ahead and click Save and
refresh this page, and that's looking
| | 08:25 | a little bit better.
| | 08:26 | And you know, actually now that I
look at it, I think I liked having those
| | 08:31 | titles on the top, the headers for
these columns, so I am going to go ahead
| | 08:34 | and turn that back on.
| | 08:36 | We are going to turn off the Display Select.
| | 08:39 | That will get rid of that
dropdown in the upper corner as well.
| | 08:42 | We will go ahead and hit Save to
save those changes and then I'll hit
| | 08:48 | refresh one more time.
| | 08:50 | Now we can see all of our names, their
positions, and their phone numbers, and
| | 08:54 | this is looking a lot better than it was.
| | 08:58 | This is the global location under the
Form tab where you can show or hide a
| | 09:04 | contact form, where you have the
option of sending the copy to the person who
| | 09:09 | fills out the form, and all that
Banned Email, Subject, and Text thing, which
| | 09:13 | has to do with security.
| | 09:15 | Under Integration, you still have the
option of showing RSS feeds for your contacts.
| | 09:20 | I think you can just leave
these set to the default settings.
| | 09:23 | And finally, Permissions has to
do with ACL, access control levels.
| | 09:27 | I will cover it in another video.
| | 09:29 | So let's go ahead and hit Save & Close.
| | 09:32 | So we've set our major settings for our
contact list, and that page is looking a
| | 09:38 | whole lot better than it was.
| | 09:40 | And when we click through, we certainly
have nice looking pages here, we don't
| | 09:44 | have the goofy little icons, we
actually have text showing us about the
| | 09:48 | address and the phone, and we have the contact
form and other information all on the same page.
| | 09:54 | I like that better than the accordions sliders.
| | 09:56 | Of course you can still fiddle around
with the layout of this page using CSS.
| | 10:01 | If you know CSS you can certainly jump
into this template and make changes to
| | 10:06 | the way this page ultimately looks as well.
| | Collapse this transcript |
| Using the banner component| 00:01 | Banner ads are nearly as old as the web
and they remain a popular way to make a
| | 00:04 | little money on the side for your web site.
| | 00:07 | You can use the banner ad component
for displaying other rotating images for
| | 00:12 | which you'd like people to click and
then go to different places on your own web site
| | 00:16 | if you want to use them internally,
or of course you can load them up with
| | 00:20 | advertising and when people click,
they go to external web sites.
| | 00:24 | Either way works great.
| | 00:25 | What we're going to do is to post
three banner ads on our web site and these
| | 00:31 | are going to go link to some
internal pages for the web site.
| | 00:35 | Banner ads are located here under
Components > Banners, and you will notice we
| | 00:41 | have many options to work with here.
| | 00:43 | We have the Banners themselves,
their Categories, Clients, and Tracks.
| | 00:48 | Tracks of course are what people are
clicking on and where they're going.
| | 00:51 | So I am going to go to the
Categories first to get started.
| | 00:56 | And I am going to go ahead
and create a new category.
| | 00:59 | I am going to call this Two Trees Olive Oil.
| | 01:04 | No parent, nothing else I need to set here.
| | 01:07 | By now you should be noticing that when
we do have a Category Manager up here,
| | 01:10 | how consistent the Category Manager is
between articles and contacts and the
| | 01:15 | banner ads and we'll also
see it again in web links.
| | 01:19 | You can do the same kinds of nested categories.
| | 01:21 | The configuration screens are the same.
| | 01:24 | It's a wonderful thing.
| | 01:25 | So it makes Joomla just so much easier to
use when you get the same thing every time.
| | 01:30 | So we'll go ahead and click Save &
Close and so that's now our category,
| | 01:35 | Two Trees Olive Oil.
| | 01:37 | We can also create a client for our
banners, and that's a wonderful thing.
| | 01:43 | Let's say you have a lot of external
advertising. Your categories might actually
| | 01:47 | wind up being something like the
products portion of the web site, the services
| | 01:51 | portion of the web site, that kind of
thing, and then of course your clients are
| | 01:55 | all of the people who are advertising with you.
| | 01:58 | In our case, our category
and our client are the same.
| | 02:01 | They are both going to be Two Tress Olive Oil.
| | 02:02 | So to create a new client, what I am
going to do is click the New button.
| | 02:07 | I am going to put in the client
name, which is Two Tress Olive Oil.
| | 02:13 | My contact name is Kurt James,
who is our customer service person.
| | 02:18 | And his email is info@twotreesoliveoil.com.
| | 02:23 | These fields and client information here
is generally less important when you're
| | 02:27 | using these banners internally on the
web site, but if you were actually doing
| | 02:32 | external banner advertising, this
information will be more important.
| | 02:36 | We are going to set track our
oppressions to Yes and track our clicks to Yes,
| | 02:40 | because we're very interested in what
people are doing with these banner ads on
| | 02:43 | the web site and how effective they are.
| | 02:45 | So we are going to go
ahead and click Save & Close.
| | 02:49 | Now that we have a category and we have a
client, we are ready to set up our banner ads.
| | 02:53 | So I am going to go ahead
and switch to my Banners tab.
| | 02:55 | Remember, the subnavigation that you
see here is the same thing as going to the
| | 03:00 | menu Components, going to Banners, and
these items that show up on the fly-out,
| | 03:05 | exactly the same thing.
| | 03:07 | So I am going to go to Banners and
I am going to create a new banner.
| | 03:11 | The Name for this one is Lemon Olive Oil.
| | 03:14 | So I have typed in the name, and
technically it's Lemon Extra Virgin Olive Oil,
| | 03:20 | but I'm keeping it short.
| | 03:22 | My category is Two Tress Olive Oil.
| | 03:23 | It will be an image.
| | 03:26 | Custom is an option that you could put
in if you wanted to put in a Flash banner
| | 03:30 | ad or something like that. They're Published.
| | 03:34 | My image, I will go ahead and upload.
| | 03:36 | So I need to browse for my image, which
is in Chapter 08, Exercise Files folder 4,
| | 03:43 | and I am going to put in my banner ad for
Lemon Olive Oil first. Go ahead and say Open.
| | 03:51 | And helpfully this has gone ahead and
dropped us into the banner ad folder directly.
| | 03:56 | These are banner ads that
come with Joomla by default.
| | 03:59 | We are going to go ahead and add to that.
| | 04:01 | So I am going to upload my lemon.
| | 04:03 | While I am here in the uploading screen
I am just going to go ahead and upload
| | 04:06 | my basil and my garlic
olive oil banner ads as well.
| | 04:11 | Then I am going to select the lemon
banner ad, which is the one I am going to
| | 04:14 | use in this particular case.
| | 04:15 | We will go ahead and say Insert.
| | 04:17 | We can give it a width and a
height and alt text if we want.
| | 04:21 | Alt text is great because of course
search engines read that as well as it's
| | 04:25 | used by people with disabilities
who are using accessibility software.
| | 04:29 | So we will go ahead and say "Try our Tangy
Lemon Extra Virgin Olive Oil, click here!"
| | 04:39 | Then it's going to ask us for the Click URL.
| | 04:43 | The URL where we should go
when the banner ad is clicked.
| | 04:48 | So I am going to switch over to
the front end of the web site.
| | 04:50 | I am going to go to Shop and I am
going to go to the Olive Oil page.
| | 04:55 | I am going to copy the URL here at the
top of the screen, Edit > Copy, and I am
| | 05:02 | going to go here and I am going to
Ctrl+V or Command+V to paste that web
| | 05:07 | address into place.
| | 05:09 | I can give this a description if I want.
| | 05:11 | I can also set Start and
Finish Publishing dates,
| | 05:14 | which is a wonderful thing.
| | 05:16 | I can set how many impressions
I want to show for the web site.
| | 05:20 | I can assign my client, Two Tress Olive Oil.
| | 05:23 | I can pick a Purchase Type.
| | 05:25 | So these are basically going to be
unlimited banner ads, and we can set our
| | 05:30 | impressions and our clicks,
if we want to track it all.
| | 05:33 | We can even set metadata
for our banner ads if we wish.
| | 05:38 | So I am going to go ahead and say Save
& New, and I am going to go ahead and
| | 05:43 | configure the Basil Olive Oil ad and the
Garlic Olive Oil ad right now, and I'll
| | 05:49 | catch you as soon as I've
entered all of that information.
| | 05:54 | Okay. So I have gone ahead and entered my
information for the Basil Olive Oil and the
| | 05:58 | Garlic Olive Oil and I'm all set.
| | 06:00 | So I am going to go ahead and say Save & Close.
| | 06:03 | You can see that we have our three
banner ads. They are all set up here and they
| | 06:07 | are all ready to go.
| | 06:09 | So now I need to display these on the web page.
| | 06:12 | Remember I mentioned that banner ads are
a combination of a component and a module.
| | 06:17 | So we've set up our component with the
individual banner ads. Now we need to set
| | 06:22 | up the module which controls
where these display on the web site.
| | 06:26 | So I am going to go to Extensions >
Module Manager and I am going to create a
| | 06:31 | new module by clicking New and I am
going to pick out Banners from my list.
| | 06:36 | So the Banner module displays the
active banners from the component.
| | 06:39 | We will go ahead and give this a
title of Two Trees Olive Oil banner ads.
| | 06:45 | Of course I am not going to
show that, so we will hide that.
| | 06:50 | The position where I will put this
is down near the bottom of the page.
| | 06:54 | So somewhere, let's say on the
next screen, maybe footer top.
| | 06:59 | Over on the right side of the screen
we have the option of where we would
| | 07:05 | like the window to open.
| | 07:06 | When people click the banner ad, does
it open in a new window or does it open
| | 07:09 | in the same window?
| | 07:11 | If I was setting up some external banner
ads, I would want them to open in a new window.
| | 07:17 | They'd leave my web site and go somewhere else.
| | 07:19 | But my banner ads are all internal to
my web site, so I would actually like to
| | 07:24 | change this to Open in parent window,
in other words, open in the same window.
| | 07:29 | The other choice you have
here is to open in a popup.
| | 07:32 | The Count is how many banners I'd like
to display at a time. My answer is 1.
| | 07:36 | I just want one ad.
| | 07:38 | My client is Two Tress Olive Oil and
my category is Two Tress Olive Oil.
| | 07:42 | And then under Randomize, right now I
have it to Sticky, Ordering. Because I have
| | 07:47 | this by Ordering and I am showing one
banner ad per page, it's going to show me
| | 07:51 | the same banner ad over and over again.
| | 07:53 | What I really want is the Randomize option.
| | 07:56 | So let's go ahead and click Save &
Close and I am going to refresh a few
| | 08:00 | times, and you see that the banner ad
changes from the Lemon to the Garlic.
| | 08:09 | And if I refresh a few times more, maybe we
will eventually see the Basil in here as well.
| | 08:13 | When I click on these, it's going to go ahead
and go to my Olive Oil page on the web site.
| | 08:18 | So now I've got the Garlic at the bottom.
If I click again, I actually set these
| | 08:23 | up to all go to the same page on the web site.
| | 08:24 | I didn't have to do that.
| | 08:26 | I could have put these going to different pages.
| | 08:29 | The very last thing I need to show you
in the backend of Joomla, we are going to
| | 08:34 | go back to the Components, back
to Banners, and let's go to Tracks.
| | 08:39 | This is tracking the impressions that
I have had for the various banner ads.
| | 08:43 | So you can see that the Lemon served up
20 times, the Garlic served up once, and
| | 08:48 | somebody clicked on it, but it also
served up 3 times when it wasn't clicked on.
| | 08:53 | The Basil was served up once
and it was immediately clicked on.
| | 08:56 | This kind of information is
incredibly important when you're working
| | 09:00 | with selling banner ads.
| | 09:02 | The people who buy the banner ad
space on your web site want to know how
| | 09:06 | effective their banner advertising is
becoming, so being able to provide them
| | 09:11 | this kind of information is very, very helpful.
| | 09:14 | Note that there is an Export button
up here, so that you could click this
| | 09:18 | and you could download the tracking
data as a CSV file or something where
| | 09:23 | people could open this up in Excel and see
exactly how all of their banner ads are doing.
| | 09:28 | So this Banner Ad Manager is a tremendous
improvement over the Joomla 1.5 Banner Manager.
| | 09:35 | There is much more information about
how well banner ads are performing, who is
| | 09:39 | clicking on them, and that type of thing.
| | Collapse this transcript |
| Using the web links component| 00:00 | In our site map our client called
out a links page for the web site.
| | 00:05 | We could create an article and type all
of the links in to that single article
| | 00:09 | or we could use the web links
component that comes with Joomla 1.6.
| | 00:13 | In your Exercise Files, you have a list of four
links that we need to include on our web site.
| | 00:21 | Truthfully, if I was building this
site really for a client, I would probably
| | 00:25 | just make an article and
put those four links in it.
| | 00:27 | The reason why? Because it's a very
short list, they're probably not going
| | 00:31 | to add to it, and so there's not a lot of
reason to use the web links functionality.
| | 00:36 | Web links component is a great thing to
use if you have lots and lots and lots
| | 00:41 | of links and they are in several
different categories and you need a way for
| | 00:45 | people to navigate through them easily.
| | 00:47 | But because this is a training
video and I want to show you as much
| | 00:51 | functionality as possible, I am going
to go ahead and show you how the Web
| | 00:54 | links component works.
| | 00:56 | In order to do that, we are going to
go ahead and go to Component > Web Links
| | 01:02 | and once again we have Categories that are
available for us as well as the Links themselves.
| | 01:07 | So we will go ahead and go in to
Categories and a lot of this should start
| | 01:11 | looking familiar to you by now.
| | 01:13 | We have an Uncategorized category by default.
| | 01:16 | We can create a new category
and we'll call it Partners.
| | 01:20 | No parent for that category and we don't
need to set up anything else on this page.
| | 01:24 | Go ahead and click Save & Close.
| | 01:27 | Now we can go to Web Links.
| | 01:29 | We can go ahead and create each
individual link that we are going to show within
| | 01:33 | that Partners category.
| | 01:34 | So go ahead and click the New button
and we will enter a title, which in this
| | 01:40 | case is the Wikipedia article on olive oil.
| | 01:45 | The URL is just copied right
over here from our document.
| | 01:49 | We are going to have it Published.
| | 01:53 | We are going to put it in the
Partners category and we have options here
| | 01:57 | that you're very familiar with. Any
description we want to put on here about
| | 02:00 | that particular page
| | 02:02 | we can add down here in the
Description box, we can set start and finish
| | 02:06 | publishing dates, and we can also set
some options for the links in general.
| | 02:12 | Right now it's settings to use our
global settings, which I didn't show you
| | 02:17 | in the Web Links Manager, but this
would be the place we could override
| | 02:21 | those global settings.
| | 02:22 | Let's go ahead and click Save & Close
for this particular link and we'll take a
| | 02:26 | look at those options.
| | 02:28 | So I am going to click on the Options.
| | 02:30 | Right now all of our links
are set open in a parent window.
| | 02:35 | In other words, when they go to the
Wikipedia article, they are going to open it
| | 02:40 | up on top of the Two Trees Olive Oil web site.
| | 02:42 | I would like that to open in new window.
| | 02:45 | We are being very consistent about
external links opening in new windows.
| | 02:50 | So I am going to change
that to open in a new window.
| | 02:52 | We are also set to count how many
clicks we are going to get each time people
| | 02:58 | visit a link on the web site.
| | 03:00 | That's nice to know, because it's
just nice to know who is visiting those
| | 03:04 | particular links and how
helpful they are for the web site.
| | 03:06 | So we are going to show that as well.
| | 03:09 | We have the similar kinds of Category
and Categories options than we had before
| | 03:14 | and we've seen these before now in the
Category Manager, we've seen then in the
| | 03:18 | Article Manager, and we also have
options here for our List Layouts.
| | 03:23 | We will take a closer look at that momentarily.
| | 03:26 | So let's go ahead and click Save & Close.
| | 03:29 | I am going to go ahead and enter the
additional three links here into my Web
| | 03:33 | Links Manager and I'll catch
you just as soon as I'm done.
| | 03:39 | So I have just entered my last link
here for my Web Links and I am going to go
| | 03:43 | ahead and hit Save & Close and here are the
four links that we want to appear on the web site.
| | 03:48 | So now what I am going to do is just
like any other component, now that I have
| | 03:54 | created my links, now I need to have
some way for those to show up on the menu.
| | 03:59 | That means I need to create a new menu link.
| | 04:00 | So I am going to go Menus > Main Menu,
and I am going to click the New button to
| | 04:06 | add a new menu item to our menu.
| | 04:09 | The menu item type, I will click the
Select button and you notice down here at
| | 04:13 | the bottom left-hand corner,
we have a thing for Weblinks.
| | 04:16 | We can list all of the web link categories.
| | 04:19 | So if we have several categories of
links, we could list them all on page.
| | 04:23 | We could list all of the web
links within a specific category.
| | 04:26 | That's the one I am going to pick or notice
that we have an option to Submit a Web Link.
| | 04:31 | If you're running a community web site
in which people who are visiting your
| | 04:34 | site might want to contribute, you
could have web link submission form in which
| | 04:39 | people suggest links to include in
the resources portion of the web site.
| | 04:43 | So the one I am going to pick is
List Web Links in a Category.
| | 04:49 | Then it's going to ask me for
menu title, which will be links.
| | 04:52 | On the Main Menu, on the Menu Item Root.
It's going to be right on up there with
| | 04:56 | everything else. And we are going to
select our category, which is Partners, and
| | 05:01 | I am going to go ahead and click Save &
Close and when we get over here to the
| | 05:05 | front end of our web site and I
hit Refresh, our Links link shows up.
| | 05:11 | Go ahead and click that and we have a
list of our links here on the web site.
| | 05:16 | Notice that we have an
icon displaying next to these.
| | 05:19 | That icon indicates that this is
a link that goes off the web site.
| | 05:23 | This column is actually showing hits,
but we are missing the header at the top.
| | 05:28 | What I am going to do is I am going to
turn off the display numbers here. I am
| | 05:31 | going to also turn off the hits, because
there really is very little value in me
| | 05:36 | telling people how often
certain things have been visited.
| | 05:40 | Particularly when they all say zero like this.
| | 05:42 | It looks like nobody is visiting my web
site and nobody is using any of my resources.
| | 05:46 | I am also going to try to turn off
these icons over here on the side.
| | 05:51 | So in order to do all of that, we're
going to go back to our Weblinks component
| | 05:56 | and right here in our Web Links Manager,
we are going to click on that Options
| | 06:00 | button and we are going to revisit that
List Layouts that I referred to earlier.
| | 06:04 | We will hide our Display Select.
| | 06:06 | We are hiding our Table Headings already.
| | 06:09 | We can hide the Links description.
| | 06:11 | I didn't actually use that, but to
make things consistent in case somebody
| | 06:15 | enters a link where they
do use it, let's hide it.
| | 06:17 | And we will also hide the Hits.
| | 06:20 | So let's go ahead and hit Save and let's
see if that takes care of things for us.
| | 06:26 | Now we have a listing of our Links,
each one of which has the globe next to it.
| | 06:31 | So we haven't managed turn off the globe yet.
| | 06:34 | Let's go back to the individual Weblink.
| | 06:37 | Right now we have the
option of selecting an icon.
| | 06:39 | Let me try clicking this Clear
button and see if that works.
| | 06:43 | I suspect it won't, but let's try it.
| | 06:45 | When I refresh this page,
we still have the globe here.
| | 06:50 | So what you could probably try doing if
you want to get rid of the icon would
| | 06:54 | be to create a transparent GIF for
example and you could use that here,
| | 06:59 | upload that as the image to appear next
to each link, and then you wouldn't see
| | 07:03 | that globe anymore.
| | 07:04 | That would be one way of handling the situation.
| | 07:07 | Go ahead and hit Save & Close.
| | 07:10 | Now we've managed to come up with a great
way of listing our links here on the web site.
| | 07:16 | The Partners title, which is title of
our category, if I want to have the word
| | 07:21 | Links to show up at the top of the
page instead, I can go ahead and do that.
| | 07:26 | Here in my Options under Category right
now the Category Title is set to Show.
| | 07:31 | I could set that to Hide instead.
| | 07:36 | That will get rid of that
Partners thing at the top of the page.
| | 07:39 | Now what I could do is go in to my
individual menu item, under Main Menu, under
| | 07:46 | Links, and then under the Page Display
Options, I could put in Show Page Heading
| | 07:54 | for Yes, and I can put in
Links as my Page Heading.
| | 08:00 | If I don't type in anything for Page
Heading but I do turn it on, it also will
| | 08:03 | take over the menu title and
display that at the top of the page.
| | 08:07 | So we will go ahead and say
Save and I will refresh this page.
| | 08:12 | Now I at least have the word
Links at the top of the page,
| | 08:15 | it's a little bit more consistent,
followed by my links to all of these
| | 08:18 | articles on the web site.
| | Collapse this transcript |
|
|
9. Using TemplatesChanging the look of the site using templates| 00:00 | Templates define the way a web site looks.
| | 00:03 | Joomla comes with several different
templates, both for the front end of the web
| | 00:08 | site and for the back end of the web site.
| | 00:10 | There are many more templates
available for free download or for a paid
| | 00:14 | download, or of course you can
always code your own template.
| | 00:18 | We're going to take a quick peek at
our Template Manager located under
| | 00:22 | Extensions > Template Manager.
| | 00:24 | You'll see that we have template
styles listed here in the initial screen.
| | 00:30 | Template styles are new to Joomla 1.6.
| | 00:32 | We didn't have them in Joomla 1.5.
| | 00:35 | In Joomla 1.5 we had just Templates, which
are now called Template Masters in Joomla 1.6.
| | 00:43 | As you see here listed on our page,
there are five templates available for
| | 00:48 | us for the web site.
| | 00:50 | And they're all listed on the same
screen with the administrator templates.
| | 00:55 | So down here as you can see
there's a location for Administrator.
| | 01:00 | The Bluestork template and the Hathor
template both ship as backend administrator
| | 01:06 | templates for Joomla 1.6.
| | 01:08 | We are currently using Bluestork,
which you know because it's selected as the
| | 01:13 | default template over
here on the side of the page.
| | 01:16 | We're not currently using Hathor, which is
a fully accessible template in Joomla 1.6.
| | 01:23 | We also have three templates
for the front end of the web site.
| | 01:26 | Right now, we're working with the Beez2
template and this is our default template.
| | 01:32 | Once again we see that assigned to
default for the front end of the web site.
| | 01:36 | There's also the Beez5 template, which
looks very similar but it utilizes HTML5,
| | 01:44 | which is terrific.
| | 01:46 | You've got something incorporating
the new HTML5 standard in Joomla.
| | 01:50 | And we also have the Atomic template,
which is designed to be a starting point
| | 01:56 | for people who want to have a template
already in place and then add to it, as
| | 02:01 | opposed to building their own
template from the ground up.
| | 02:05 | In coming videos, I'll show you how to
change these template styles and how to
| | 02:09 | use the Template Manager to
modify your HTML and your CSS.
| | 02:13 | It's possible to have multiple styles
assigned to your web site and we'll go
| | 02:18 | through all of that.
| | 02:19 | However, I will not be covering how
to code your own Joomla template in the
| | 02:23 | Joomla 1.6 Essential Training course.
| | 02:26 | That's because coming up very shortly
the Joomla 1.6: Creating and Editing Your
| | 02:31 | Own Custom Templates will be available
for you to watch if you're interested in
| | 02:35 | creating your own custom
templates from scratch using Joomla.
| | Collapse this transcript |
| Setting the default template style and assigning template styles| 00:00 | New in Joomla 1.6 are template styles.
| | 00:04 | Template styles are a great way to
quickly and easily assign different looks to
| | 00:08 | the web pages on your site,
without having to deal with HTML or CSS.
| | 00:14 | So, let's take a look at how these work.
| | 00:16 | If I go to Extensions > Template Manager,
by default we're at the Style screen immediately.
| | 00:24 | You can see that we have two templates
in use right now: the Beez2 template and
| | 00:29 | the Bluestork template.
| | 00:31 | And the Bluestork template is
controlling the administrative side of the web site,
| | 00:34 | while the Beez2 template
is controlling the front end.
| | 00:38 | I can change the entire look of my web
site instantly by going and changing the
| | 00:43 | look of the web site here to let's
say Beez5, the Default-Fruit Shop.
| | 00:49 | All I have to do is click
on the Default icon here.
| | 00:52 | And when I go back to my web site and
I refresh, my entire web site has been
| | 00:58 | completely redesigned and it
now looks like a fruit shop.
| | 01:02 | So, I can flip through pages on my
web site and you'll see that they're all
| | 01:05 | completely redesigned now for this
new template, the Fruit Shop template.
| | 01:10 | I can redesign again very easily by
going back to the backend here of Joomla
| | 01:15 | and reassigning Beez2 as my default template.
| | 01:18 | And when I refresh the web site, it's
back to the way it was looking before.
| | 01:23 | I can also assign the Fruit
Shop template to specific pages.
| | 01:27 | So, if I went into the Fruit Shop link
here and I checked off some of the pages,
| | 01:33 | let's say I want the About
section to have the Fruit Shop look,
| | 01:36 | I could just check off a few
pages here and say Save & Close
| | 01:43 | and when I refresh the News page, we see
the Beez2 template and when I go to the
| | 01:49 | About page, we will see the Fruit Shop template.
| | 01:52 | Obviously, this is probably a serious
fashion no. You don't really want to make
| | 01:57 | your site that radically
different from one page to another.
| | 02:00 | We have fruit on one page
and Joomla on the other.
| | 02:03 | However, some people do like to make
different sections of the web site to have
| | 02:07 | different color schemes or perhaps you
want different banners on different pages,
| | 02:12 | or different wording on
different pages, something like that.
| | 02:15 | If these things are tied into a template,
a template style is your great, quick
| | 02:20 | and easy way to switch the look
of the web site between pages.
| | 02:23 | But the truth of the matter is I really want
all these pages under the Beez2.0 template.
| | 02:28 | So, I am going to go back to the
backend, back into my Fruit Shop, and I'm
| | 02:33 | going to uncheck the pages that I just
assigned to the Fruit Shop and say Save & Close.
| | 02:40 | And when I refresh the page and go into
my About section, I am back again at the
| | 02:48 | way the site should look.
| | 02:50 | Let's take a look at the Beez2
template style in a little bit more detail.
| | 02:55 | If I click on this to go into the Style,
over on the right side are these things
| | 03:00 | called Advanced Options.
| | 03:03 | These Advanced Options are created with
template programming and every template
| | 03:07 | will come with different Advanced Options.
| | 03:10 | These Advanced Options here
are unique to the Beez2 template.
| | 03:14 | If you look at other templates,
you'll find different Advanced Options.
| | 03:18 | So the Beez2 template
allows us to do some things.
| | 03:20 | For example, it allows us
to change our template color.
| | 03:24 | Right now our template color is
set to something called Personal.
| | 03:28 | If I change it to Nature and say Save
and then refresh my page, I have a
| | 03:38 | different look for my web site.
| | 03:39 | Now we're working with a teal green and my
menus have moved around just a little bit.
| | 03:44 | I like this design better because
the banner on the top isn't so high that
| | 03:48 | it doesn't push my contents so far
down the page, and the teal I think also
| | 03:52 | works for Two Trees.
| | 03:53 | Now what we need to do is get rid of
that Joomla logo up at the top and make it
| | 03:57 | say Two Trees instead.
| | 03:59 | So, I am going to go back into the Beez
Style template and instead of the Site
| | 04:03 | Title here, I am going to
type in Two Trees Olive Oil.
| | 04:11 | And for my Site Description, I'm going
to say "The Best Olive Oil In The World."
| | 04:19 | And I am going to clear the Logo, so
that there is no logo appearing in the top
| | 04:24 | of the document anymore.
| | 04:25 | We don't want to see Joomla.
| | 04:25 | So, I am going to go ahead and say Save
again and when I refresh the page of my
| | 04:31 | web site, now it actually says "Two
Trees Olive Oil, The Best Olive Oil In The
| | 04:36 | World," which is terrific.
| | 04:38 | We now have a very attractive-looking
text-based logo that tells us the name of
| | 04:42 | the web site, and finally this site is
starting to look a little bit more like
| | 04:46 | a real web site.
| | Collapse this transcript |
| Creating new template styles| 00:00 | The next thing I would like to show you
with template is the Template Master.
| | 00:04 | I just like to give you a
brief introduction to it.
| | 00:07 | This is where you can
adjust the HTML and CSS directly.
| | 00:11 | So let's take a look at that Template
Manager by going to Extensions > Template
| | 00:15 | Manager and by default this page
opens up into our Templates Styles.
| | 00:20 | If you click on the tab here for Templates,
here are some of the master templates
| | 00:25 | that are listed here and you can see
nice large thumbnails showing each of the
| | 00:30 | templates and detailed, and
there's several of them listed here.
| | 00:35 | Including the two administrator
templates at the bottom and the 3 templates that
| | 00:40 | ship with the web site on the top.
| | 00:43 | If I click on the Preview link here I
get a preview of the web site with TP
| | 00:50 | equals one turned on and a specific
template, so I can see all of my module
| | 00:54 | positions here for the web site.
Close that tab and if I click on the beez_20
| | 01:00 | Details I'll go into a
screen that looks like this.
| | 01:05 | On the left side of the screen
these are the Template Master Files that are listed.
| | 01:09 | We can edit the main page template.
Basically that's the major look of the web site.
| | 01:15 | We can also edit the error page
template. This is the page that displays when
| | 01:20 | you get a 404 Page Not Found error or
other type of error on the web site, and
| | 01:26 | we can also edit a printer-
friendly view template as well.
| | 01:30 | These are all available to us here
with this particular template master.
| | 01:35 | On the right side of the screen we have
a listing of all kinds of style sheets
| | 01:39 | that are here. Fortunately they are named
such that you can kind guess that what they are.
| | 01:44 | Template RTL stands for the
right to left template for Joomla.
| | 01:49 | This is for people who work with
languages that are read from right to left,
| | 01:52 | instead of left to right.
| | 01:54 | Template.css is probably the bulk of the
CSS for this web site. print.css refers
| | 02:00 | to printer friendly versions, position
refers to the positioning and then we
| | 02:05 | have the personal and the nature.
| | 02:06 | Remember the dropdown in the
templates style where we could switch between
| | 02:10 | the Nature and the Personal color schemes,
and that probably contains colors for those.
| | 02:16 | Layout might contain some layout
information. We have some IE style sheets, Opera
| | 02:20 | and Mozilla and Konqueror style sheets.
| | 02:23 | We also have some general
styling and something for black.
| | 02:27 | So you can guess the content for most
of these just from the names and if we
| | 02:31 | click on any of these in particular,
let's just try template.css, we'll go into
| | 02:36 | a window where we can
work with the CSS right here.
| | 02:41 | And one of the wonderful new features
in Joomla 1.6 is that we've actually been
| | 02:46 | given a color-coded editor. Hooray!
| | 02:48 | So we can see what we're dealing it's
much easier to read the code here than it
| | 02:53 | was previously where
every thing was all the same color.
| | 02:56 | So I strongly, strongly, strongly
recommend before you ever open up any of these files,
| | 03:02 | you make a backup of your web
site, even if that backup is just copying
| | 03:06 | the existing CSS and pasting it into a
text file that you have on the side, in
| | 03:11 | case you really messed something up.
| | 03:13 | You'll want to have that available, so
that you can plug it back in and fix your
| | 03:17 | site if you do something really bad.
| | 03:21 | Let's take a look at the main page
template and you'll see that this is also
| | 03:25 | color-coded. The stuff at the top here
is all PHP and then we get into a little
| | 03:30 | bit HTML, which is color-coded, and
things that are commented out and so forth.
| | 03:36 | So once again, you're more than welcome
to poke around to the HTML and the CSS
| | 03:42 | for these templates that come with
Joomla, but be very, very sure that you make
| | 03:47 | a backup before you do too much.
| | 03:50 | I'll be doing a course later on
creating and editing custom Joomla 1.6
| | 03:54 | templates, where I'll go into great
detail that constructing your own Joomla
| | 03:59 | template from scratch and editing in
working with the HTML and CSS files within
| | 04:03 | Joomla, at a later title.
| | Collapse this transcript |
| Adjusting template masters with the HTML and CSS editors| 00:00 | You can create new template styles in
Joomla based on template styles that
| | 00:05 | are already existing.
| | 00:07 | Let's take a look at how that works.
| | 00:09 | If we go to Extensions > Template
Manager and let's duplicate our Beez2
| | 00:16 | template by putting a checkmark next
to it and then clicking the Duplicate button,
| | 00:21 | we've just made a copy of Beez2,
and that means that we can now change
| | 00:27 | some of the options associated with
this template and assign it to different
| | 00:31 | pages of the web site.
| | 00:33 | So what I'm going to do is go into
Beez2 - Default, number two, and I'm going
| | 00:37 | to change the name of the style so
that you know what this is, to Alternate
| | 00:44 | Tagline and what I want to do is assign
this just to the Shop pages of the web site,
| | 00:51 | these three here.
| | 00:52 | So when you go into the Shopping part
of the web site, the tagline is going to
| | 00:56 | read "Great Shopping Great Values."
| | 01:00 | So I'm going to change that site
description from the "Best Olive Oil in the
| | 01:03 | World" to "Great Shopping Great Values,"
and I'll go ahead and click the Save
| | 01:12 | button, and I'll refresh
the front-end of the web site.
| | 01:16 | As expected the homepage hasn't
changed but when I go to the Shop page I now
| | 01:22 | have a different tagline, "Great
Shopping Great Values," just like this.
| | 01:28 | And when I'm in other sections of the web
site it says "The Best Olive Oil in the World."
| | 01:33 | This is a great way to be able to make
small customizations without having to
| | 01:37 | know HTML or CSS, and then apply
them to other pages in the web site.
| | 01:42 | I know that we could take that
tagline and accomplish the same thing by
| | 01:46 | working with a custom HTML module and
assigning the module to the pages where
| | 01:51 | we want that to display.
| | 01:53 | So think of this as just a simple
example of one way we can customize the
| | 01:58 | styling of this page.
| | 01:59 | We could have said, for example, attach a
style sheet to make the page the blue
| | 02:05 | theme for a few of pages or the
green theme for some of the other pages.
| | 02:09 | That type of thing is a little bit more
complicated and harder to implement than
| | 02:13 | just a module would be.
| | 02:15 | But these template styles make
styling certain sections of the web site
| | 02:20 | very easy for people without knowledge
of HTML and CSS, like your clients, so
| | 02:26 | this is one of the great
new features in Joomla 1.6.
| | Collapse this transcript |
| Changing the admin template| 00:00 | I would like to give a tremendous hat
tip to my good friend Andrea Tarr who
| | 00:05 | created the Hathor template in Joomla 1.6.
| | 00:08 | Andy got the job of creating the Hathor
template back in 2009 when she was part
| | 00:13 | of the Google Summer of Code and as
part of that project she was tasked with
| | 00:17 | creating a fully
accessible administrator template.
| | 00:21 | You may be familiar with
the concept of accessibility.
| | 00:24 | This is the concept that people with
various disabilities are able to still
| | 00:28 | work with the web site that maybe they
cannot use a mouse, maybe they can only
| | 00:32 | navigate by keyboard, or they may be low vision
or blind, or they may have some other disability.
| | 00:39 | Andy created the Hathor template with
all of the accessibility points in mind
| | 00:43 | and I would like to show
that template to you now.
| | 00:46 | If you are building a site for the
government in particular and especially the
| | 00:49 | U.S. government or for colleges or
universities where there are requirements for
| | 00:54 | accessibility compliance such as
Section 508 or WCAG sometimes called the WCAG,
| | 01:01 | the Hathor template will go a long way
to helping you meet those requirements
| | 01:04 | for your client at least on the backend.
| | 01:07 | Remember that your frontend template has
nothing to do with the backend template.
| | 01:12 | So your frontend template
would also need to be coded with
| | 01:15 | accessibility features in mind.
| | 01:18 | Many of those accessibility
features are built into the Beez templates.
| | 01:22 | But if you download a commercially
available template or a free template, those
| | 01:26 | accessibility features may not be present.
| | 01:29 | Personally, if I needed to code a
template with accessibility in mind, I would
| | 01:34 | probably do it from scratch.
| | 01:36 | Let's take a look at the Hathor template.
| | 01:39 | If we get to Extensions > Template
Manager, we will go ahead and select Hathor
| | 01:46 | from our list of templates right here
and you'll see that the backend changes.
| | 01:51 | That's because we are now looking at
the Hathor design here in the backend of
| | 01:54 | the Administrator template.
| | 01:56 | So I am going to go to Site > Control
Panel just so that you can see some of
| | 02:01 | the differences here.
| | 02:02 | If I go to Content > Article Manager,
you'll also see that this looks a
| | 02:07 | little bit different.
| | 02:08 | One of the most notable differences is
that the icons that were previously up
| | 02:12 | here in the upper right corner are now
down here just above the content and it's
| | 02:18 | nice especially if you're working on a
really big monitor to be able to jump to
| | 02:22 | these icons quickly while you're
working with the content down below.
| | 02:27 | Note also that the secondary navigation
now has a tab treatment, so we can click
| | 02:32 | on the tabs here and go to our Category
Manager or Featured Articles for the web
| | 02:37 | site very quickly and easily.
| | 02:39 | I am going to show you some of the
other features in Hathor by going to the
| | 02:42 | Extensions > Template Manager and if
I click on the Hathor template style,
| | 02:49 | you'll notice that we have some
template options that come with this as well.
| | 02:54 | First of all, we can show
the site name in our header.
| | 02:56 | Let's go ahead and turn
that on to see what happens.
| | 02:58 | I will click the Save button.
| | 03:01 | Now it says Two Trees Olive Oil
Administration instead of just Administration.
| | 03:06 | We can also select a color theme and
Hathor ships with four color themes.
| | 03:10 | The one we are looking
at now is called Standard.
| | 03:12 | Andy's favorite is Blue and if we
turn that on, you will see that's
| | 03:17 | actually quite attractive.
| | 03:19 | Nice gradient there and everything.
| | 03:21 | There's also a High Contrast.
| | 03:24 | This is an important feature for people
who have particularly low vision and who
| | 03:29 | may read better with a dark
background and bright text.
| | 03:32 | So this isn't really designed
necessarily for people you have normal vision.
| | 03:38 | You can pick any one of
these themes and show them.
| | 03:41 | You can also make the text bold if you wish.
| | 03:45 | Some people do better reading their text
bold than reading it in the normal format.
| | 03:50 | Again, it adds a little bit of extra
contrast so that you can see what you are doing.
| | 03:53 | I am going to go ahead and turn off
showing the site name and bold text now and
| | 03:59 | I am going to go ahead and hit Save &
Close and I am going to reset my default
| | 04:03 | administrator template back to
Bluestork, because that's what I've been using
| | 04:07 | throughout this training video and I
don't want anyone getting confused by
| | 04:11 | suddenly switching over and using Hathor.
| | 04:13 | But I would like to tell you about
one final feature that has to do with
| | 04:17 | administrator templates.
| | 04:18 | In recent years a lot of people have
gotten into creating their own Joomla
| | 04:22 | administrator template.
| | 04:23 | So if you look around on the web you
may find other administrator templates
| | 04:27 | that are available that you may wish to use
instead of the default Bluestork template.
| | 04:32 | Do keep in mind, however, that if you're
using different administrator templates
| | 04:36 | for different clients you may have a
hard time talking to your client on the
| | 04:40 | phone about how to get
certain tasks done in Joomla.
| | 04:43 | One of the first questions you will
have to ask them is which administrator
| | 04:47 | template they are running and that might not
be a question that they know the answer to.
| | 04:52 | So you might want to think about that
carefully when you start thinking about
| | 04:55 | alternative administrator templates.
| | 04:57 | However, there are now templates that
are available that run on iPads, templates
| | 05:01 | that are designed for mobile use, and
many, many different styles of templates
| | 05:06 | for your PC as well.
| | 05:08 | The other thing to remember is
that because Bluestork is the backend
| | 05:11 | administrator template by default, most
books and videos you'll encounter will
| | 05:16 | wind up using it as part of their
training process, rather than some of the
| | 05:20 | alternative administrator
templates that are currently on the market.
| | 05:23 | The last thing I want to show you is
under Users in our User Manager, we haven't
| | 05:29 | taken a close look yet at our User menu.
| | 05:33 | But inside of our account here, which is
probably the only one in your web site,
| | 05:38 | the Super User account, if I click on
this, an option that I have here within
| | 05:44 | my profile specifically for me, and this
is new in 1.6 and it's such a terrific
| | 05:50 | feature, is the ability to assign an
administrator template to individual people.
| | 05:56 | So, if you have someone on your web
development team who needs to use the Hathor
| | 06:02 | template but the rest of the team
feels more comfortable using Bluestork,
| | 06:07 | you could assign the one person who needs
the Hathor template, the Hathor template
| | 06:12 | right here through their User Manager
profile and everybody else could be
| | 06:16 | running another administrator template.
| | 06:19 | The other great part about that is
you could always leave the Bluestork
| | 06:22 | administrator template turned on for
your clients, so that it would match video
| | 06:27 | training and book training and so forth
that your clients might be referring to,
| | 06:31 | whereas you personally as the web
developer, perhaps you prefer one of these
| | 06:35 | alternative administrator
templates for your own personal use.
| | 06:40 | So that way you can control that all
of your clients have one particular,
| | 06:45 | the Bluestork template let's say, and then
you personally are working with your own
| | 06:50 | administrator template of choice.
| | 06:52 | It's a great new feature in Joomla 1.6.
| | Collapse this transcript |
| Joomla! templates from third-party providers| 00:00 | If you do a quick Google search for Joomla
templates, you'll turn up a zillion results.
| | 00:05 | The results fall in to two
classification, paid or free. Which is better?
| | 00:11 | You already know the answer. It depends!
| | 00:15 | Free is a great price and there are
some very good free templates available.
| | 00:20 | However choose your provider carefully.
| | 00:23 | Since anyone can post a free
template, frequently anyone does.
| | 00:28 | That means that some templates don't
have many module positions, are limited in
| | 00:33 | their ability to customize them, or
they're not tested for all browsers.
| | 00:38 | If you get a free template from a
commercial template provider-- most offer some
| | 00:42 | kind of free templates to
generate traffic to their web sites--
| | 00:46 | you'll wind up with the best quality.
| | 00:49 | In my mind it's worth paying for a
template. I want good quality, good support
| | 00:55 | and a minimum of hair pulling
while I try to get it to look the way I want.
| | 00:59 | I have found that many paid templates
are excellent, particularly those from
| | 01:04 | RocketTheme at rockettheme.com, JoomlaShack at
joomlashack.com and JoomlaArt at joomlaart.com.
| | 01:16 | These are my favorites, but there are
many other great providers out there.
| | 01:20 | In the end, judge your template by its
basic layout. Think about the location of
| | 01:25 | the logo, the primary and secondary
navigation, and how many columns it has
| | 01:31 | versus how many you need.
| | 01:33 | Think about what you need on the
homepage. Just because the module has 20
| | 01:37 | positions doesn't mean you need to fill all 20.
| | 01:42 | Remember also that you can fold the
cost of templates and extensions into the
| | 01:46 | cost of doing business in creating the web site.
| | 01:50 | Frequently, it's a lot cheaper to pay
$50 for a template that's fully debugged
| | 01:56 | then to download a free one and spend
countless hours trying to get it to work
| | 02:01 | in Internet Explorer 7 and Safari.
| | Collapse this transcript |
|
|
10. ACL EssentialsIntroduction to ACL| 00:00 | Joomla 1.6 introduces some very
important changes in regards to permissions.
| | 00:07 | Access Control Levels or ACL is one of
the major new features in Joomla. Now just
| | 00:14 | because you can, doesn't mean you should.
| | 00:18 | If you are building a simple web site,
you may not need any of these permissions
| | 00:22 | and features I'm about to show you.
| | 00:24 | However, if you're in a situation in
which a group of people need to see
| | 00:29 | certain areas of the web site but not
others, or if person A needs to edit only
| | 00:33 | this area of the web site, person B needs to
edit that area, then ACL maybe helpful to you.
| | 00:40 | Because this is an Essential Training
course I'm not going to cover all aspects of ACL.
| | 00:45 | When you get into the backend and
start determining who can edit which items,
| | 00:50 | well it makes the difference between
global article options, menu options, and
| | 00:54 | article options look like a cakewalk.
| | 00:58 | I'm going to give you an overview of how
ACL fits together, and then we'll build
| | 01:02 | a portion of the web site visible to
different audiences once they've logged in.
| | 01:07 | This is a diagram explaining the four
aspects that work together to provide ACL
| | 01:12 | on your Joomla 1.6 web site.
| | 01:14 | First of all, in the
upper-left there is the user.
| | 01:18 | The user is the easiest thing to understand.
| | 01:21 | Users are created in the User Manager
where you can assign the groups to which
| | 01:25 | they belong, the editor they use, the
administrator template they have and
| | 01:30 | other various options.
| | 01:32 | Users belong to user groups.
| | 01:35 | A user group is a group of users
with certain permissions and comment.
| | 01:39 | By default, the groups in Joomla 1.6
include Public, Registered, Author, Editor,
| | 01:47 | Publisher, Manager,
Administrator, and Super User.
| | 01:52 | If you think those sound familiar,
that's because they probably do. These groups
| | 01:56 | have similar permissions and
similar names to those in Joomla 1.5.
| | 02:01 | However, you can change the permissions
if you wish for these existing groups or
| | 02:07 | you can delete these
existing groups all together.
| | 02:11 | You have to keep the Public group but every
other group on the web site can be deleted.
| | 02:16 | Groups may be assigned permissions for
editing the backend of the web site and
| | 02:21 | they maybe assigned permissions for viewing
information on the front end of the web site.
| | 02:26 | There are core permissions.
| | 02:27 | These permissions allow the user group
to complete certain actions, including
| | 02:33 | logging into the front end
or backend of the web site,
| | 02:36 | creating, editing and deleting content,
publishing, unpublishing and trashing
| | 02:41 | content, editing your own content
that you created, accessing the component
| | 02:46 | configuration, and identifying
which user groups are super-users.
| | 02:53 | Permissions are assigned to
groups, not to individual users.
| | 02:58 | If a specific user needs their own
special set of permissions, they need to be
| | 03:03 | assigned to their own user group.
| | 03:05 | Finally, access levels control what
specific groups are allowed to view on the
| | 03:10 | front end of the web site.
| | 03:12 | In Joomla 1.5 these groups were
Public, Registered, and Special.
| | 03:17 | Those are still present and
they're still configured in the same way.
| | 03:21 | Public means anyone can view the content,
Registered means that registered users
| | 03:26 | and higher levels can view the content,
and Special means that Authors, Editors,
| | 03:31 | Publishers, Managers, Administrators,
and Super Users can view the content.
| | 03:36 | It's now possible to make a new access level,
controlling exactly who gets to see which content.
| | 03:43 | Access levels do not inherit
permissions, unlike groups, which do
| | 03:48 | inherit permissions.
| | 03:50 | So if I make a piece of content
available to Publishers only in a certain
| | 03:56 | access level and I am logged in as a
Super User, a Super User who is not part
| | 04:01 | of the Publisher group, I can not see
that particular piece of content even
| | 04:07 | though I am a Super User.
| | 04:09 | So remember that the group is hierarchical.
| | 04:14 | If I'm an administrator and a manager
has permission to do something, it's
| | 04:18 | likely that I inherit that
ability to do the same thing.
| | 04:21 | However, access levels are not hierarchical.
| | 04:26 | If you want managers and
administrators to be able to see the same piece of
| | 04:29 | content, you must specify it as such.
| | 04:33 | I'll be going through user groups and
access levels in detail in the next few
| | 04:37 | videos and I can't emphasize this enough.
Just because you can doesn't mean you should.
| | 04:46 | You do not have to use
ACL at all on your web site.
| | 04:50 | You can leave all of the default
settings alone and for smaller web sites you
| | 04:54 | probably don't need to change a thing.
| | 04:56 | You don't even need to get into this.
| | 04:58 | ACL is a very large and complicated
topic, so I am only going to cover who can
| | 05:03 | see what on the web site.
| | 05:05 | This covers most situations for
most people who want to use ACL.
| | 05:10 | In this chapter, we're going to create
content for two different user groups on
| | 05:15 | the front-end of the web site.
| | 05:16 | We'll create a login area to show
to our Two Trees Olive Oil employees.
| | 05:21 | We'll also have that same login area
for our Two Trees Olive Oil distributors,
| | 05:27 | who can see completely different
content than the employees see.
| | 05:30 | They'll be able to do this via
that same login on the web site.
| | 05:34 | This is something that was not really
possible in Joomla 1.5 and it's a valuable
| | 05:39 | new feature in Joomla 1.6.
| | Collapse this transcript |
| Understanding default groups| 00:00 | By default, permissions in Joomla 1.6
and the ACL system is set up exactly as
| | 00:07 | it was in Joomla 1.5.
| | 00:10 | By default, there are eight user
groups that come with Joomla 1.6.
| | 00:16 | You can see these user groups
by going to Users > Groups.
| | 00:21 | And this will show you a list of all
existing user groups on the web site.
| | 00:26 | These include Public,
Manager, and Administrator.
| | 00:31 | Note the nested way that these are
displayed on the page, indicating that
| | 00:35 | Administrator inherits
permissions from the Manager.
| | 00:38 | The Manager inherits
permissions from the Public.
| | 00:41 | We also have Registered users,
Authors, Editors, and Publishers.
| | 00:47 | Notice again that the
Registered user is a child of Public.
| | 00:51 | And that the Manager and
Administrator are on their own branch of this.
| | 00:56 | So Publisher is inheriting permissions from
the Registered users, Authors, and Editors.
| | 01:01 | Editor inherits permissions
from the Authors and Registered.
| | 01:04 | Finally, we have our own special group
set aside by itself called Super Users.
| | 01:10 | These are the super
administrators for the web site.
| | 01:13 | And they have their own special set of
permissions and they are also a child of Public.
| | 01:18 | You are welcome to use these
default groups when working in Joomla 1.6.
| | 01:24 | They're great for assigning different people
to manage the web site and to make changes.
| | 01:29 | However, if you need to customize ACL,
I have found that these groups get very
| | 01:34 | confusing very quickly.
| | 01:36 | That's because these groups
inherit permissions from other groups.
| | 01:41 | The Zen of Python says that flat
is better than nested. And I agree.
| | 01:46 | If we need to customize the ACL, I do not
work with the settings right out of the box.
| | 01:51 | I am going to make my own groups, my
own users, and my own access levels.
| | 01:55 | And I am going to show you how
to do that in the next few videos.
| | Collapse this transcript |
| Creating a new group| 00:00 | A group is a group of users
with certain permissions in common.
| | 00:05 | There were user groups that come with
Joomla but I recommend creating new user
| | 00:09 | groups for the work we're about to do
| | 00:11 | When constructing user groups, think
about the types of tasks that a group of
| | 00:16 | users will need to execute.
| | 00:18 | In this case, for both our Employees
group and for our Distributor group,
| | 00:23 | they both need to log into
the front end of the web site.
| | 00:26 | Once they are logged in, they should be
able to see different kinds of content.
| | 00:31 | We'll also need to think about our
users and whether they fit in the
| | 00:34 | groups we've outlined.
| | 00:36 | A Distributor group and an Employee
group. Is there any possibility that
| | 00:40 | Distributor is also an Employee or
an Employee is also a Distributor?
| | 00:46 | That's fairly unlikely with this type
of grouping, but those kinds of overlaps
| | 00:50 | should be considered.
| | 00:52 | Our example is pretty simple
intentionally, so we know we need to create two
| | 00:57 | groups, one for the
Employees and one for Distributors.
| | 01:00 | So to create a new group, go to
Users > Groups > Add New Group.
| | 01:10 | We'll enter a title for our group
and in this case, I'm going to enter
| | 01:15 | Distributors user group, so it
becomes clear that this is a user group
| | 01:22 | we're talking about.
| | 01:23 | The Group Parent will be Public.
I'm going to go ahead and click Save & New
| | 01:28 | because I have one more group to
create, which is the Employee user group.
| | 01:34 | Its parent is also the Public.
| | 01:37 | Go ahead and click Save & Close and
you'll see here in our structure for the
| | 01:42 | web site that the Distributor user
group and the Employee user group are now
| | 01:47 | children of Public.
| | 01:49 | All of the default user groups are
listed underneath and we will not be using
| | 01:54 | these on this particular web site.
| | 01:55 | Now that we have our two groups created,
we're ready to create and assign users
| | 02:01 | to these two groups.
| | Collapse this transcript |
| Creating a user| 00:00 | Now that we have user groups created
we're ready to start creating some new users.
| | 00:05 | For this example, I'll create one login
for employees and I'll create one login
| | 00:10 | for distributors, but you could
obviously create multiple users if you wished.
| | 00:16 | Creating a user is a very simple process.
| | 00:19 | Ideally you will create a user for
each person who will access the web site.
| | 00:24 | There really is no need to share logins.
| | 00:27 | That also means that you can delete
logins when they're no longer required if
| | 00:31 | everyone has their own.
| | 00:33 | You don't have to worry about people
who are no longer authorized to access the
| | 00:36 | web site logging in with somebody else's login.
| | 00:40 | So to create a new user we'll go to
the User menu to the User Manager and
| | 00:46 | we'll pick Add New User.
| | 00:49 | And you'll see this form,
which we can complete as follows.
| | 00:53 | I'm going to create a login for my
client Maria Vitalia, who happens to fall
| | 00:58 | into the Employee group.
| | 00:59 | So her Name is Maria Vitalia
and her login name will be maria.
| | 01:06 | I can enter a password for her and
confirm that, or I can leave these blank and
| | 01:11 | when I save this user an email is
generated which will send this information out
| | 01:16 | to Maria at the email address that I specify.
| | 01:19 | However, when I'm working on my
Windows computer with XAMP, likewise on the
| | 01:24 | Macintosh computer with MAMP,
the email function does not work.
| | 01:29 | So this will only work if
you're working on a web host.
| | 01:33 | So I'm really need to go
ahead and type in the password.
| | 01:35 | So I'll go ahead and do that now.
| | 01:40 | Ideally, you'll encourage your users
to change their passwords. Because Maria
| | 01:45 | will receive an email that will
contain her username and password, you should
| | 01:49 | encourage her to change that
password once she logs into the web site.
| | 01:53 | That also means we have to add a link so that
she has the ability to change that password.
| | 01:58 | Encourage her to have a very good,
very strong password, particularly if she
| | 02:03 | becomes a Super User, and as the CEO we might
eventually wind up promoting her to super user.
| | 02:09 | Strong passwords should contain at least
eight characters and they should contain
| | 02:13 | upper and lowercase letters, numbers
and symbols, and those passwords should be
| | 02:18 | stored in a secure location where
they can't be tracked down and used.
| | 02:22 | Please remember that a sticky note on
the bottom of your keyboard does not count
| | 02:27 | as a secure location.
| | 02:29 | So I'll go ahead and enter her email
address, mvitalia@twotreesoliveoil.com.
| | 02:38 | I'm going to scroll down at this point and
currently she is not assigned to any user groups.
| | 02:45 | So I need to assign her to
a few of these user groups.
| | 02:49 | She of course is part of Public.
| | 02:51 | She is also part of the Employee user group.
| | 02:54 | I'm also going to assign her to
the generic Registered user group.
| | 02:58 | This is, in other words, anybody who logs
into the front end of the web site will
| | 03:03 | be able to see certain content and
that's actually going to come in handy for us
| | 03:07 | a little bit later down the road.
| | 03:10 | Over on the right-hand side of the
screen I can assign some settings that apply
| | 03:14 | to her specifically.
| | 03:15 | She is not able to log into the
backend of the web site so there is no reason
| | 03:19 | for me to set her Backend
Template Style or Language.
| | 03:23 | And this isn't a multilingual site
anyway, but if we wanted to do so we could
| | 03:28 | set a Frontend Language
for the web site as well.
| | 03:31 | We can assign her a specific editor.
| | 03:33 | By default we're using TinyMCE.
| | 03:36 | As you'll recall, that's our editor
for entering our contents into the web site,
| | 03:39 | but there are many third-party
extensions that could be used instead as an editor.
| | 03:44 | We could specify a different Help
site than the default that's being used.
| | 03:49 | By default the Help site's written in
English and typically people will use a
| | 03:52 | different Help site if they're
working in a different language.
| | 03:55 | We can also set her time zone, if it's
different than the default for this web site.
| | 04:00 | So I'm going to go ahead and hit Save &
New and you'll notice that we get this
| | 04:04 | error at the top of the page about
"Could not instantiate mail function."
| | 04:08 | That's the error I was telling you about.
| | 04:11 | An email when we create our new user
is normally sent out, but because we're
| | 04:16 | running locally using XAMP or
MAMP, that mail function can't run.
| | 04:21 | It will work on any web site
that's located on a web host.
| | 04:24 | So I'm going to create a second user now.
| | 04:27 | This is Robin Horton, and her login
name is robin, and she has a password, and
| | 04:35 | she has an email, robin@example.com.
| | 04:41 | Robin is of course also part of the
Public and she is part of the Distributors
| | 04:46 | user group, and she is going
to be a Registered user as well.
| | 04:51 | So I'll go ahead and click Save &
Close and this will return us to our User
| | 04:57 | Manager where we can see that we
now have three users for our web site.
| | 05:01 | Maria is part of the Public, Registered,
and the Employee user groups, whereas
| | 05:06 | Robin is part of the Public, the
Registered, and the Distributors user groups.
| | 05:10 | Neither of them have ever logged in
before, but they are able to log into the
| | 05:15 | web site because their
accounts are enabled and activated.
| | 05:18 | The other account that's here is
the one I've been using, which is the
| | 05:22 | account for Super User.
| | 05:24 | Now that we have our users and our user
groups created, we're going to move on to
| | 05:28 | assigning permissions to the
user group in our next video.
| | Collapse this transcript |
| Assigning permissions to a user group| 00:00 | At this point, we have created our user
groups and we've assigned users to them.
| | 00:05 | However, these users can't do
anything yet because the groups have not been
| | 00:10 | assigned any permissions.
| | 00:12 | The permissions for these user groups,
for the Employees and the Distributors,
| | 00:17 | are exactly the same as the
Public user group at this point.
| | 00:20 | So we need to modify both of these user
groups and assign them the permission to
| | 00:25 | log into the front end of the web site.
| | 00:28 | To assign these global permissions to
our groups, we are going to go into our
| | 00:32 | Global Configuration, which is
available under the Site menu or through this
| | 00:37 | icon here on the Control Panel.
| | 00:40 | In the Global Configuration, go to the
Permissions tab, which is the last piece
| | 00:45 | of subnavigation here, and you will
see a fairly complicated screen talking
| | 00:52 | about the various
permission settings for the web site.
| | 00:56 | I'm looking at the Public right now,
which is a little bit hard to understand
| | 01:01 | because nothing is set in terms of permissions.
| | 01:03 | So I'm going to go ahead and take a look
at the Publisher user group, which is a
| | 01:09 | little bit easier to understand.
| | 01:11 | So the way that permissions are set is
through these dropdowns, and there are
| | 01:17 | three settings for each permission.
| | 01:20 | Inherited, Allowed, or Denied.
| | 01:23 | Inherited permission means that it's
inherited through the chain of groups
| | 01:29 | here on the web site.
| | 01:30 | So for our Site Login for this Publisher
it is allowed, and it's allowed because
| | 01:36 | the Site Login permission was
originally assigned to Registered users and it's
| | 01:41 | been inherited through the Author
and the Editor to the Publisher.
| | 01:45 | The Admin Login and Super Admin and
Access Component permissions are not allowed.
| | 01:51 | Note that these permissions are also
inherited via the dropdown here and that's
| | 01:56 | because the Admin Login, Super Admin
and Access Component permissions are not
| | 02:03 | set in the Public group.
| | 02:05 | Any permission that is not set by
default means you can't do anything.
| | 02:10 | Thus the Public group has
none of its permissions set.
| | 02:13 | So, Public users can't do anything
except view pages that are set for the public
| | 02:19 | on the frontend of the web site.
| | 02:20 | Public users can't login to the front or
the backend of the web site or create content.
| | 02:25 | That kind of thing.
| | 02:27 | Because those permissions are not
set in Public and they weren't set in
| | 02:30 | Registered or Author or Editor, when we get
to the Publisher they're simply not allowed.
| | 02:36 | When things are not allowed they
can still potentially be allowed.
| | 02:41 | So if for example, I wanted my
Publishers to be able to log into this web site,
| | 02:46 | I could change the Admin Login
permission from Inherited to Allowed.
| | 02:52 | When I do that and I'll click the Save
button, notice over here that the Admin
| | 02:58 | Login permission is now Allowed.
| | 03:01 | meaning that in fact, I can log into the
backend of the web site as a publisher.
| | 03:06 | I am going to change that back
to Inherited just for a moment.
| | 03:11 | Now you may be thinking that if I
don't want the publisher to perform certain
| | 03:15 | functions such as logging in to the
Administrator why don't I simply deny these things?
| | 03:21 | Well, the issue is when things are
denied, no matter who the parent group
| | 03:26 | setting is, the group being edited, in
this case this publisher, would not be
| | 03:31 | able no matter what to ever be
able to login to the web site.
| | 03:35 | What's more any children of the publisher
would also not be able to log in to the web site.
| | 03:40 | So let me demonstrate that with the Editor.
| | 03:43 | So for the Editor, just to show you how
this inheritance works again, I am going
| | 03:47 | to allow the Admin Login but I'm
going to deny the Super Admin Login.
| | 03:52 | What will see over here after I click
Save is that the Admin Login is allowed,
| | 03:58 | but the Super Admin is denied.
| | 03:59 | Then we are going to see how
that affects the publisher.
| | 04:02 | So I will go ahead and click Save and
just as I said, the Admin Login is indeed
| | 04:08 | allowed, but the Super
Admin permission is the Denied.
| | 04:12 | Now when I go to my Publisher
setting here, notice that my Admin Login is
| | 04:17 | inherited from the editor and it's allowed.
| | 04:21 | But my Super Admin permission is
absolutely totally Not Allowed.
| | 04:25 | It's locked because the Editor was not
allowed to do it and so any children of
| | 04:30 | the Editor, which includes the Publisher,
are also not allowed nor can they be
| | 04:35 | changed, unlike the Access
Component or the Delete permission.
| | 04:40 | I hope this makes this clear as
mud as to how these permissions work.
| | 04:44 | In general, things are denied unless
they are explicitly allowed and you
| | 04:49 | shouldn't really deny anything and if
you do, then be aware that any children
| | 04:54 | will also inherit that deny.
| | 04:57 | Okay, so just to be safe I am going to
go change these settings back here to
| | 05:01 | Inherited and Inherited in my Editor
because I don't really want them to stay that way.
| | 05:07 | So now that I have changed the Editor,
the Publisher should also reflect those
| | 05:10 | changes, which it does.
| | 05:12 | Now I'm going to go and actually
assign my permissions here for the
| | 05:15 | Distributor user group.
| | 05:17 | I am going to click on that.
| | 05:18 | Notice that has inherited everything
from the Public where the Public indicates
| | 05:23 | that nothing is set.
| | 05:25 | So as I said by default that means
it's not allowed. So there we go.
| | 05:29 | What I need to do now for the
Distributors user group is allow people to login
| | 05:33 | to the frontend of the web site.
| | 05:35 | That's called the Site Login permission.
| | 05:38 | So I'm going to change this to Allowed.
| | 05:41 | When I click the Save button, you can
see now that our Distributors user group
| | 05:46 | is indeed allowed to log in to the
frontend of the web site, but they are not
| | 05:49 | allowed to do anything else.
| | 05:51 | We will repeat the same process for the
Employee user group and you see that the
| | 05:56 | Employee user group is a child of Public.
| | 05:58 | They're not a child of the Distributors.
| | 06:00 | So likewise, we will have to set this
individually for the Employee user group.
| | 06:05 | So the Site Login is also allowed.
| | 06:08 | Now I am going to go ahead and hit Save & Close.
| | 06:10 | I have assigned just the Site Login
permission to the Employee user group and to
| | 06:16 | the Distributors user group.
| | 06:18 | So now we have our users, our core
permissions, and our user groups set up.
| | 06:23 | The next thing to configure is the access
levels, which allow these groups to view
| | 06:29 | special content on the frontend of the web site.
| | Collapse this transcript |
| Creating a new access level| 00:00 | At this point we've created a user group.
| | 00:03 | We've added users to that group and
we've assigned permissions to the group.
| | 00:07 | Now all we need to do is specify
which content each group is able to see.
| | 00:13 | An access level is what specific groups are
allowed to view on the front end of the web site.
| | 00:18 | In Joomla 1.5 these groups were
Public, Registered, and Special.
| | 00:24 | Public means that anyone can view the
content whether they're logged in or not
| | 00:28 | logged in, Registered users and higher
can view the content, and Special means
| | 00:33 | that Authors, Editors, Publishers,
Managers, Administrators, and Super Users
| | 00:39 | can view the content.
| | 00:41 | Previously, it was not possible to
deviate from these three access levels.
| | 00:45 | But in Joomla 1.6 it's now possible to
make a new access level controlling who
| | 00:51 | gets to see which content.
| | 00:52 | Permissions for access levels are not inherited.
| | 00:56 | So if I make a piece of content
available to the Publishers only and I am
| | 01:01 | logged in as a Super Administrator
who's not also in the Publisher group as
| | 01:05 | well, I cannot see that piece of content.
| | 01:09 | Even though I am a Super
User, I cannot see that content.
| | 01:13 | Of course, I can see it on
the back end of the web site.
| | 01:16 | I just can't see it on the front end.
| | 01:18 | Therefore you must make sure you are very
clear about which groups can see which content.
| | 01:24 | Remember that access levels apply to
the viewing content only, not to editing
| | 01:29 | or creating content.
| | 01:30 | So to create a new access level, go to
Users > Access Levels > Add New Access Level.
| | 01:38 | And these are the existing
access levels currently.
| | 01:42 | Right now there's one
for looking at this screen.
| | 01:45 | This is where we can add a new
access level by entering a title for that
| | 01:49 | access level and then we can choose which user
groups will have access to view that content.
| | 01:55 | So I am going to put in a Level Title
of Distributor Access Level and to that I
| | 02:04 | will assign the Distributors user group.
| | 02:06 | I am going to go ahead and click Save & New.
| | 02:08 | And I am going to add an Employee Access Level.
| | 02:15 | And to that I'll assign the Employee user group.
| | 02:18 | Note that I have not included
Super Users in either of these.
| | 02:22 | And this means that if I log in with my
Super User login to the front end of the
| | 02:27 | web site, I will not see the
Distributors user group content or the Employees'
| | 02:34 | content on this web site.
| | 02:36 | Go ahead and click Save & Close and we
now return to the Access Levels Manager.
| | 02:42 | And you'll see that we have now five
access levels for this web site including
| | 02:47 | Public, Registered, and
Special, the default settings,
| | 02:50 | and we also have a Distributor
and an Employee access level.
| | Collapse this transcript |
| Configuring content for ACL| 00:00 | We have user groups, users, core
permission assigned to our user groups, and
| | 00:05 | we have access levels.
| | 00:07 | So we have a whole system in place to see
content on our web site, but guess what?
| | 00:11 | We don't have any content to show
our employees or distributors yet.
| | 00:14 | So that's going to be our next step is
to create some content for these two user
| | 00:18 | groups on the web site.
| | 00:20 | So we're still having to work under
the CAM, categories, articles, and menus.
| | 00:25 | So I am going to go through
and create all the categories.
| | 00:27 | We will have a category for
distributors and category for employees.
| | 00:30 | Then I am going to go
ahead and create two articles.
| | 00:33 | Obviously, you could have many,
many more articles than just two.
| | 00:37 | But one article will be for the
distributors, one article for the employees, and
| | 00:42 | then I'm going to link
these to a special user menu.
| | 00:45 | The user menu won't show up on the
web site unless you're logged in.
| | 00:49 | So that's what I am going
to do in this next video.
| | 00:51 | So first of all we need to
start by creating our categories.
| | 00:54 | So we are going to go into our Category
Manager and I am going to click the New
| | 00:58 | button to make a new category.
| | 01:00 | The title for this category
will be Distributor Category.
| | 01:05 | I am adding these words like category
or access level or user group to the end
| | 01:09 | of things, because I'm calling everything
Distributor or Employee except for the actual users.
| | 01:15 | The reason why is I want you to be
very clear how all the information is
| | 01:19 | connecting here in the backend of the web site.
| | 01:21 | So this will be the Distributor Category.
| | 01:24 | It will have no parent and it's published,
but the access here, it refers to the
| | 01:29 | access level and you can only
assign one access level to a category.
| | 01:34 | Only can assign one access
level to a piece of content.
| | 01:38 | So the access level for the Distributor
category will be the Distributor Access Level.
| | 01:43 | See how those fit together?
| | 01:44 | I am going to go ahead and click
Save & New and I am going to create the
| | 01:48 | Employee Category and it will also have
no parent and it will be Published, but
| | 01:56 | it's access level will be
the Employee Access Level.
| | 02:01 | See how that fits together.
| | 02:02 | So, go ahead and click Save & Close and
we will see here in our Category Manager
| | 02:06 | that we now have two new categories.
| | 02:08 | The Distributor Category
and the Employee Category.
| | 02:11 | And whereas all of our previous content
has been for the public, these are for
| | 02:15 | specific groups of users.
| | 02:17 | Now that we've got that taken
care of, we are on to articles.
| | 02:20 | So here in the subnavigation I am going
to switch to Articles and I am going to
| | 02:23 | click my New button and the title
for this will be For Our Distributors.
| | 02:30 | The category will be the Distributor Category.
| | 02:34 | Now because our Distributor Category
is assigned the access level of the
| | 02:39 | Distributor Access Level, technically
speaking if I'm working on this article,
| | 02:45 | I can leave the access level set to Public.
| | 02:48 | The category's access level will
override my article's access level.
| | 02:54 | So in other words, if the
category is set to be viewed only by the
| | 02:57 | distributors, this article,
| | 02:59 | no matter if I pick the Public category or not,
it will be visible only to the distributors.
| | 03:05 | So I am going to anyway set this to
the Distributor Access Level, because I
| | 03:10 | think that it can be confusing to see
our articles say Public when in fact they
| | 03:15 | are accessible by only the Distributors.
| | 03:18 | So while I don't have to set the access
level for my articles, I'm going to set
| | 03:23 | them anyway, because I think it will be
clearer and easier to understand how the
| | 03:29 | content in my web site is configured
after the fact, particularly when I come
| | 03:33 | back six months later or a year later
and I don't remember what I did today.
| | 03:37 | Down in the article text in your Exercise Files
you have an article here for our distributors.
| | 03:43 | So I am going to go ahead and Edit >
Copy and then in my Article Text box I am
| | 03:50 | going to Ctrl+V or Command
+V to paste in the text.
| | 03:53 | I am going to go ahead and take this
Distributor Specials just for fun and
| | 03:57 | change it to a Heading 2 and for the
rest of our content we will go ahead and
| | 04:02 | leave that set to be a paragraph. All right!
| | 04:06 | So that is the super-secret
Distributors special information.
| | 04:10 | So we will go ahead and click on Save & New.
| | 04:13 | Now I am going to have another article here.
| | 04:15 | This will be For Our Employees.
| | 04:20 | The category for this of course is the
Employee Category and although I don't
| | 04:24 | have to set it, I am
still going to set it anyway,
| | 04:26 | the Employee Access Level.
| | 04:28 | Scrolling down to the spot for the
article text, I have an employee's article
| | 04:33 | here from your Exercise Files.
| | 04:36 | I will go ahead and Edit > Copy.
| | 04:39 | Then I will go ahead and Ctrl+V or
Command+V to paste this into my editing box
| | 04:46 | here and I'm going to go ahead and do a
quick little bit of editing here to make
| | 04:51 | this just a little bit more readable.
| | 04:54 | I've now finished editing all of the text here
and my article is ready to go for the employees.
| | 05:00 | So I'm going to go ahead
and Save & Close this article.
| | 05:04 | So we have our categories, we have
our articles, next come our menus.
| | 05:07 | But what I would like to do
is create a separate user menu.
| | 05:11 | It won't even show up on the
web site unless you're logged in.
| | 05:15 | In order to do this, we are going to
create a new menu for the web site and
| | 05:18 | then we will add menu items to it and
then we will take a look at the module
| | 05:21 | for that menu and make sure that that displays
only if people are logged into the web site.
| | 05:26 | So under Menus, we will go to the Menu
Manager and we are going add a new menu.
| | 05:33 | The title for this menu will be the
User Menu and this menu type will be
| | 05:38 | usermenu, all one word all lowercase.
| | 05:40 | We will go ahead and say Save & Close.
| | 05:43 | So now we have three menus for our web site:
| | 05:46 | our Main Menu, our footer menu, and
our User Menu, and note that there's no
| | 05:50 | modules currently linked from
the User Menu to the web site.
| | 05:53 | So, we will have to remember to do
that as soon as we create our links.
| | 05:56 | I am going to click on the name User
Menu to go into that and of course we have
| | 06:01 | no menu items for this menu just yet.
| | 06:04 | So I am going to create a new
menu item by clicking on New.
| | 06:07 | For my menu item type, I am
going to click the Select button.
| | 06:11 | Now I am going to go to Single Article,
because I only have a single article for
| | 06:16 | each one of these areas of the web site.
| | 06:18 | You could of course pick a category
blog or a category list or whatever you want.
| | 06:22 | For the title I am going
to say Employee Information.
| | 06:26 | Its access level of course
will be the Employee Access Level.
| | 06:31 | It is located on the User Menu, not on
the Main Menu, not on the footer menu,
| | 06:36 | and I will need to select my article.
| | 06:38 | So I am going to go ahead and select my
category, which is the Employee Category
| | 06:43 | and pick For Our Employees and then I
am going to go ahead and say Save & New
| | 06:47 | and I am going to select my second menu item.
| | 06:51 | Once again a Single Article.
| | 06:53 | The menu title will be Distributor Specials,
since that's what they are getting. It's Published.
| | 07:01 | The access for this is the
Distributor Access Level only.
| | 07:04 | It's on the User Menu and my article is in
the Distributor Category. For Our Distributors.
| | 07:11 | Now once again because my category is
set to the Distributor Access Level and my
| | 07:17 | article is set to the Distributor
Access Level, technically speaking, I could
| | 07:21 | leave my menu item set to Public.
| | 07:24 | I am also going to set up my Menu
module to only display for Registered users.
| | 07:29 | Now because my menu item is set
specifically to one Access level or another,
| | 07:35 | if I'm logged in as an Employee
I'll only see a link for accessing the
| | 07:39 | employee information.
| | 07:41 | If I set my access to say
Registered user and I was logged in as a
| | 07:47 | Distributor, I would see a link to
the distributor information and to the
| | 07:52 | employee information.
| | 07:54 | But when I clicked on the link for the
employee information, I would get that
| | 07:58 | "You are not authorized to
view this resource" error message.
| | 08:02 | So to keep the user experience
consistent, to keep yourself from getting
| | 08:06 | confused, I think it's important to
continue to assign that access level to the
| | 08:11 | individual menu items, to the
articles, and to the categories.
| | 08:14 | We will go ahead and click Save & Close.
| | 08:18 | So now you see we have two menu items
here on our menu for users who are logged
| | 08:24 | into the web site, but we don't have
any way of displaying this menu yet.
| | 08:27 | So to do that, the last thing we need to
do is go to Extensions > Module Manager
| | 08:33 | and I am going to make a new module,
which of course is a Menu module.
| | 08:37 | The title will be User Menu, and I
am going to hide the title once again.
| | 08:42 | For the Position, I'll go ahead
and display it over in position-7.
| | 08:45 | So it's over on the left side of the page.
| | 08:48 | Now I have a real problem, right?
| | 08:49 | I need this particular module to show up for
both the Distributors and for the Employees.
| | 08:56 | Otherwise, I have to make two
modules, because I can only assign one
| | 08:59 | access level per item.
| | 09:01 | Fortunately, when we created the access
levels, the user groups we assigned to
| | 09:07 | those access levels included either
the Distributor or the Employee and we
| | 09:11 | assigned the Registered user level.
| | 09:14 | Registered users are in common now
between the Distributors and the Employees.
| | 09:19 | So if I set this to Registered,
my module should display for both
| | 09:24 | Distributors and for Employees.
| | 09:27 | The menu where it's going to display is
the User menu and we will go ahead and
| | 09:31 | display the entire menu.
| | 09:33 | So I am going to go ahead and hit Save & Close.
| | 09:36 | So that is present here on the web site.
| | 09:38 | If I go to the front page and I
refresh, I have just one problem.
| | 09:44 | I have all of this great content that's
now hidden behind a login, but I have no
| | 09:48 | way to login to my web site.
| | 09:50 | The next thing I need to do is
add a link to the login page.
| | Collapse this transcript |
| Creating a login link| 00:00 | Our Employees and our Distributors
need a login box so they can access their
| | 00:05 | special content on the
front end of the web site.
| | 00:07 | We currently don't have any way for anyone
to login from the front end of the web site.
| | 00:12 | There are two ways to get a
login box on the web site.
| | 00:15 | The first is through a Login module,
which we covered in an earlier video, and
| | 00:20 | it was created for us by default and
we simply unpublished it because it was
| | 00:25 | kind of cluttering up that left
column throughout our web site.
| | 00:28 | The other thing that we can do is
create a link to a login page, which could be
| | 00:33 | configured on the menu.
| | 00:34 | Both login boxes work the same
way and have the same functionality.
| | 00:38 | It's really just a question of whether
you want to link on the menu or whether
| | 00:41 | you want a big login box on the page.
| | 00:44 | I would prefer to have a link on the
menu, because it will be less clutter and
| | 00:49 | it's just for a limited group of people.
| | 00:51 | So, I would like to add a
login link to our main menu.
| | 00:55 | So to do that, I am going to go to
Menus > Main Menu > Add New Menu Item.
| | 01:00 | And for my Menu Item Type, there is
a whole section of items under Users
| | 01:05 | Manager, which gives us the option of
including a login form, editing user
| | 01:10 | profiles, registering for the web site,
and sending reminders for usernames or
| | 01:15 | password resets. Lots of
handy little tools in there.
| | 01:18 | The one of course we are
interested in now is a login form.
| | 01:22 | So, I am going to go ahead and click that
and for my Menu Title, I will set it to Login.
| | 01:27 | The Menu Location will be the Main Menu
and we are going to go ahead and leave
| | 01:31 | it at the Menu Item Root.
| | 01:33 | Now, for our access level, we
want to leave the Access to Public.
| | 01:37 | Remember that the whole purpose of the
login box is to get logged into the web site.
| | 01:40 | So, in Joomla's eyes, everyone who
arrives on the web site is Public, until they
| | 01:45 | have logged in and then they
become some other kind of user.
| | 01:48 | So, we would definitely want to leave
this link left to the Public access level.
| | 01:52 | Over on the right hand side, we have
some options we can configure here.
| | 01:57 | We have a box on the right
side for Login Description Text.
| | 02:01 | So, I am going to go ahead and enter
some text here to orient people why there
| | 02:06 | is a login on the web site in the first place.
| | 02:08 | So, I am going to say "This login page serves
Two Trees Olive Oil employees and distributors.
| | 02:20 | Please register for an
account to see our latest specials."
| | 02:29 | We could change some of these other
options as well, but that's the only one I
| | 02:32 | am going to go ahead and change.
| | 02:34 | And I am going to go
ahead and click Save & Close.
| | 02:37 | When I refresh the front end of the web
site, our Login link will show up here
| | 02:42 | in the top navigation, which is great!
| | 02:44 | When I click it, I have the
ability to login to the web site.
| | 02:48 | Right now, this is set to log me in with my
super administrator username and password.
| | 02:53 | I am going to go ahead and login and
once I have logged in I am going to return
| | 02:57 | to the homepage of the web site.
| | 02:59 | And notice that there's absolutely no
menu available anywhere here on the web site.
| | 03:06 | Why?
| | 03:07 | Because the super
administrator is not also a registered user.
| | 03:10 | I am going to go back to my Login
screen and log out and now I'm going to
| | 03:14 | try logging in with Maria's login,
which if you want to try this, I set it
| | 03:20 | up as Maria 123456.
| | 03:21 | We'll go ahead and login with that.
| | 03:25 | Notice over here now on the left
side of the screen is a link for
| | 03:28 | Employee Information.
| | 03:30 | It's also available to us on the
homepage, our link to Employee Information, and
| | 03:35 | other pages of the web site as well.
| | 03:37 | When I click on Employee Information,
I get my super secret employee page that
| | 03:42 | tells me all of the information about
the employee bulletin board and what's
| | 03:46 | happening here within Two Trees Olive Oil.
| | 03:49 | When I go back to the Login link and
log out again, this time I am going to
| | 03:53 | login as robin with a password of
123456, Robin is the distributor.
| | 03:59 | We will go ahead and login here.
| | 04:01 | And now you can see that we have
a link on the site here for our
| | 04:04 | Distributor Specials.
| | 04:06 | I can go ahead and click this link for
the Distributor Specials and here we go,
| | 04:11 | all the information is here.
| | 04:13 | Note that Maria, our employee, was not
able to see the distributor information.
| | 04:18 | Robin, our distributor, is not
able to see the employee information.
| | 04:22 | And me, as super administrator, I
can't see either because I'm not part of
| | 04:28 | those access levels.
| | 04:29 | So, we are doing great here.
| | 04:31 | We would have just a couple more tweaks
to make to this web site and we're going
| | 04:35 | to be all set with a really high
quality great system for people to login and
| | 04:41 | see unique content on our web site.
| | Collapse this transcript |
| Allowing self-registration and allowing users to modify their details| 00:01 | For some web sites you will want to encourage
registration from the front end of the web site.
| | 00:05 | If your site has to do with social
networking, a blog with comments, the ability
| | 00:09 | to submit calendar events,
or just submitting web links,
| | 00:12 | these are examples where you would want
to make registration easy and accessible.
| | 00:16 | Sometimes you won't want to
have registration available at all.
| | 00:20 | If there's no interactivity on the site
for anyone but the site administrators,
| | 00:24 | you could turn off registration altogether.
| | 00:27 | To get to these options, go to
the User Manager and select Options.
| | 00:33 | And these are the same kind of options
that we've been seeing throughout Joomla,
| | 00:36 | always available up here
in the upper right corner.
| | 00:39 | First of all, we went to
Allow User Registration
| | 00:42 | by saying that Yes, people
can register for the web site.
| | 00:46 | By default when people do register
for the web site, they are part of the
| | 00:50 | Registered user group, and what I'm
expecting to have happen is we're going to
| | 00:56 | add distributors more quickly than we're
going to add employees to our web site.
| | 01:00 | So what I'd like to do is I'd like to
allow new distributors to come in and
| | 01:05 | register for the web site.
| | 01:06 | It could be a way of them expressing
interest in distributing a product or
| | 01:11 | they might have just signed up to be
distributors and now they're getting their login.
| | 01:14 | Either way, by allowing them to
register themselves, that's a great thing
| | 01:18 | because then I don't have to go
through as the webmaster and go create
| | 01:22 | individual accounts for
all these new distributors.
| | 01:24 | I'll still need to create individual
accounts for employees, but that's okay
| | 01:29 | because we're not adding employees that quickly.
| | 01:32 | So for my New User Registration Group,
I'm going to change the default group to
| | 01:36 | Distributors User Group.
| | 01:38 | Guests to the web site will
definitely be Public, so that's terrific.
| | 01:43 | We don't want to change that.
| | 01:44 | In fact, I can't imagine a situation
where you would ever want to change that.
| | 01:48 | So leave that one alone.
| | 01:50 | For New User Account
Activation, this is new in Joomla 1.6.
| | 01:55 | We now have three options.
| | 01:57 | None means that when a user fills out
the registration form, they get an email
| | 02:02 | and they can login without ever
confirming their email address.
| | 02:06 | Self means they get an email that has
a link in it, which confirms that their
| | 02:12 | email address is legitimate, and
once they click that link then they can
| | 02:16 | login to the web site.
| | 02:17 | And those two options were both
available in Joomla 1.5, and they are great from
| | 02:22 | the point of view, particularly the
Self-registration, that you're at least
| | 02:26 | verifying email addresses.
| | 02:27 | But you still wound up getting a lot
of bogus registrations for some sites.
| | 02:32 | The new option here in
Joomla 1.6 is the Admin option.
| | 02:36 | Users can register for the web site
and then the admin receives an email,
| | 02:41 | in this case the Super User, gets an
email to review that registration and they
| | 02:46 | can decide whether to allow that
account to be activated or not.
| | 02:51 | And that's exactly what we want to do.
| | 02:53 | We don't want just anyone coming to this
web site and being able to sign up as a
| | 02:56 | distributor and see our specials.
| | 02:58 | What we want to do is allow our new
distributors to sign up for the web site and
| | 03:02 | get our specials, and then all I have
to do as the webmaster is approve that
| | 03:06 | it's okay for them to access the web site.
| | 03:10 | I don't have to create a username and a
password and all the rest of that stuff.
| | 03:14 | So this is a great timesaver for we webmasters.
| | 03:17 | So I'm going to go ahead and set that to Admin.
| | 03:20 | The Frontend User Parameters allow
users to change their language, editors, and
| | 03:25 | help screens, all that kind of stuff
that's available for each user, and it
| | 03:29 | allows them to change that.
| | 03:30 | If you say Hide, then users are not
able to change those kinds of things.
| | 03:35 | I'm going to go ahead and leave this set to
Show and I'm going to click Save & Close.
| | 03:40 | Now, I'm going to switch over to the
front end of my web site and I'm going to
| | 03:43 | go to the Login page, and here on the
Login page there is no way for anyone to
| | 03:49 | register for this web site.
| | 03:50 | Normally you see some links underneath
where if you've forgotten a username or a
| | 03:54 | password or you can register for the
web site, but that appears not to be an
| | 03:58 | option here in the Login
page for itself in Joomla 1.6.
| | 04:03 | Those options are available in the module.
| | 04:05 | So what I'm going to do now is add
some links on the side of this page for
| | 04:10 | people who are visiting the web site
who might want to create an account.
| | 04:13 | To do that, I'm going to go into the
backend of Joomla, to Menus > Main Menu
| | 04:19 | > Add a New Menu Item, and the type of menu
item I'm going to add is the Registration Form.
| | 04:25 | The title will be Distributors, Register Here.
| | 04:32 | And it's going to be publicly
accessible because we want everyone to be able to
| | 04:36 | register for the web site.
| | 04:38 | It's going to go on the Main Menu, and
what I'm going to do is set it up as a
| | 04:42 | child of our Login link.
| | 04:44 | So it will show up as
subnavigation on the Login page.
| | 04:47 | I'm going to go ahead and hit Save & Close.
| | 04:50 | Now when I refresh my Login page, you'll see
our link for Distributors to Register Here.
| | 04:56 | When they click on that, they get a
form where they can enter their name, their
| | 04:59 | username, password, confirm that password
and enter their email address twice as well.
| | 05:05 | So this is great.
| | 05:06 | Now distributors are able
to register on the web site.
| | 05:09 | The last little thing I want to add,
the last touch for this web site, is the
| | 05:14 | ability for employees and
distributors to change information easily that's
| | 05:18 | associated with their account, like
their username or their password or
| | 05:22 | something like that.
| | 05:23 | It's very easy to include those menu
links for the users so they can change
| | 05:27 | their password and other information.
| | 05:29 | So to do this, I'm going to go back to
my Menu Manager, but I'm going to take
| | 05:34 | a look at my User menu, because
changing your username and password are things
| | 05:39 | that only the users will be doing,
not the general public, and I'm going to
| | 05:43 | say Add New Menu Item.
| | 05:45 | The Menu Item Type, in this case,
is going to be Edit User Profile.
| | 05:50 | In fact, I can add two links here.
| | 05:52 | One will be to show the user profile
itself and the other one will be to edit it.
| | 05:56 | So I'm going to go ahead and actually
Show User Profile first and the Menu
| | 06:01 | Title here will be My Profile.
| | 06:04 | I'm going to leave it Published and
I'm going to set this to Registered
| | 06:08 | users, because once again, I want both
employees and distributors to be able
| | 06:12 | to see this content.
| | 06:14 | I'll leave it under the Menu Item Root
here on my User Menu, and that's pretty
| | 06:19 | much all I need to configure.
| | 06:20 | I'm going to go ahead and hit Save &
New and I'm going to add another link.
| | 06:25 | This time I'm going to add the Edit
User Profile option, and I'm going to make
| | 06:30 | the menu title say Edit My Profile.
| | 06:33 | The access level will be
again for Registered users.
| | 06:36 | It will be on the User Menu.
| | 06:38 | The Root level is just fine, and I'm
going to go ahead and say Save & Close.
| | 06:42 | I'll hop over to the front end of the
web site and I'm going to log in as maria,
| | 06:47 | 123456, and once I have logged in as
maria, as soon as I log in I actually have a
| | 06:55 | little bit of profile information
here and some information about my basic
| | 06:58 | settings with a link to edit the profile.
| | 07:01 | But if I ever visit around other
pages of the web site I lose that ability.
| | 07:06 | By clicking on the My Profile link
I can see that information again.
| | 07:10 | I also have a link here to edit the profile,
which is duplicated over here in my menu.
| | 07:15 | So now I could go through and change
my name, my username, my password, and
| | 07:19 | I could also set up these options
for my editor, my time zone, and my
| | 07:23 | front-end language if I wish.
| | 07:25 | By adding these little touches to the
web site and thinking like somebody who is
| | 07:29 | going to login to this web site on a
regular basis, you're adding a lot of
| | 07:32 | usability and value to your web site.
| | 07:36 | It was very, very straightforward to
add information about my profile or the
| | 07:40 | ability to edit it, and it's definitely
something you should do because it will
| | 07:44 | just make your users a little happier.
| | 07:46 | And when people need to change
their emails or their usernames or their
| | 07:50 | passwords, they'll bother you with a
lot less phone calls and that is the
| | 07:54 | biggest value of all.
| | Collapse this transcript |
|
|
11. Extending Joomla! 1.6Evaluating extensions in the Joomla! Extensions Directory| 00:01 | As of this recording, there are over
6,808 extensions available for Joomla.
| | 00:07 | Most of these are available for Joomla
1.5, but almost 400 of these and growing
| | 00:12 | are available for Joomla 1.6.
| | 00:15 | With all of these thousands of
extensions available how can you possibly choose
| | 00:19 | the right one for you?
| | 00:22 | I'm going to show you some
pointers for things to look for when
| | 00:25 | evaluating extensions.
| | 00:27 | But first of all, I need to show you
how to find the Joomla 1.6 extensions here
| | 00:32 | on the Joomla Extensions Directory.
| | 00:35 | We are currently looking
at extensions.joomla.org.
| | 00:37 | The Joomla Extensions
Directory, often called the JED.
| | 00:44 | I'm on the homepage here and up in the
right side of the page there is a link
| | 00:49 | to Advanced Search.
| | 00:51 | If you click on this and then in the
search you, of course, can type in
| | 00:56 | various search parameters, but most
importantly if you simply check off the box
| | 01:01 | for Joomla 1.6 Native and click the
Search button you'll come up with a list of
| | 01:05 | the existing Joomla 1.6
extensions on the JED currently.
| | 01:10 | That's mostly true.
| | 01:12 | I've had some developers tell me that
for whatever reason their extensions are
| | 01:15 | not included in that list, but it's a
very good starting point for finding
| | 01:19 | Joomla 1.6 extensions.
| | 01:21 | Note also that there are other
versions of Joomla that are listed here
| | 01:25 | including Joomla 1.0.
| | 01:26 | Joomla 1.0 is not supported as of July 2009.
| | 01:33 | We also have two versions of Joomla 1.5:
Joomla 1.5 Legacy and Joomla 1.5 Native.
| | 01:40 | Legacy indicates a backwards
compatibility system with Joomla 1.0.
| | 01:44 | As of this recording there's really very
little reason to be using Legacy extensions.
| | 01:49 | Joomla 1.5 is been out from three years
and extension developers had plenty of
| | 01:54 | time to make their
extensions compatible with Joomla 1.5.
| | 01:58 | There is no legacy mode in Joomla 1.6.
| | 02:01 | So the only way Joomla 1.6
extensions can run is in Native mode.
| | 02:06 | So there is only one option here.
| | 02:08 | You of course could pick
various categories or names.
| | 02:11 | You could pick various types of
extensions such as a component or module or a
| | 02:15 | plugin or you can type in keywords,
but mostly we're just going to click off
| | 02:20 | that 1.6 box and say Search.
| | 02:24 | This will return a list of almost 400
extensions as of this moment that are
| | 02:29 | using Joomla 1.6 Native.
| | 02:32 | I'm going to show you one of my favorite
extensions of all time and use it as an
| | 02:37 | example of how to identify a really
great extension within the JED, and
| | 02:43 | extension is called Akeeba Backup.
| | 02:46 | You have heard me mention it a few times now.
| | 02:47 | I've used Akeeba Backup for making
your Exercise Files as part of this video.
| | 02:53 | The easiest way to find Akeeba Backup
is to scroll down to the Directory menu
| | 02:59 | here in the JED and this is sort of
down the left column a little ways.
| | 03:05 | One of the options here is the Editors' Picks.
| | 03:08 | If you click on that, the Editors'
Picks are extensions that the editors of the
| | 03:14 | Joomla Extensions Directory who
review the submissions of extensions to the
| | 03:18 | directory have determined are some
of the really truly great extensions
| | 03:24 | available for Joomla.
| | 03:26 | My feeling about Akeeba Backup is
that there's absolutely no reason that
| | 03:30 | everyone doesn't just install it on
their web site and use it all the time.
| | 03:33 | The JED editors have chosen only eight
extensions out of those 6,800 extensions
| | 03:40 | available to be picked as Editors' Picks.
| | 03:44 | So you can take a look at all of these.
| | 03:47 | Unfortunately, not many of them are
1.6 compatible yet, but Akeeba Backup is.
| | 03:54 | So I'm going to go ahead and click on
the link and this will take us into Akeeba
| | 03:59 | Backup listing for the JED.
| | 04:01 | There are number of things that I
would like you to notice about this
| | 04:04 | particular listing.
| | 04:05 | First of all, of course, we have the
name of the extension at the top of the page.
| | 04:10 | We have the note that it's in
Editors' Pick. It's popular.
| | 04:13 | It's been viewed over 150 times a day.
| | 04:15 | The C, M, and P indicate that there
are portions of this extensions that are
| | 04:22 | both component, module, and plug-in.
| | 04:25 | Then we have a little box of
information here that tells us some information
| | 04:28 | about Akeeba Backup.
| | 04:30 | First of all, it tells us that the
most recent version is Version 3.2 Beta 4.
| | 04:35 | Last update on January 12, 2011.
| | 04:38 | That was about two weeks
ago as of this recording.
| | 04:42 | The Akeeba Backup extension
is updated quite regularly.
| | 04:45 | That's a good indication that the
developer is engaged and involved and cares
| | 04:50 | about his extension and is actively updating it.
| | 04:53 | If you see a version that's three
years old, that is an indication that somebody
| | 04:58 | may not be as engaged or involved.
| | 05:00 | They might have put together the
extension as a college project for example and
| | 05:04 | haven't looked back at it in three years.
| | 05:06 | There could potentially
be security issues with it.
| | 05:09 | It's very hard to say.
| | 05:10 | So I like to see that
extensions are updated regularly.
| | 05:14 | Fortunately, when you work with Joomla
1.6 since it was just released on January
| | 05:18 | 10th in 2011, it's likely that all of
these extensions will be up-to-date simply
| | 05:24 | by virtue that be extensions had to
be updated for Joomla 1.6 anyway.
| | 05:28 | It will tell you a little bit about
the license under which this extension
| | 05:32 | is distributed and the date that it was
originally added to the Extensions Directory.
| | 05:38 | So Akeeba Backup was added on the 5th of
June, 2007, which dictates that in terms
| | 05:43 | of Joomla's lifetime this has been on the
Extensions Directory for a very long time.
| | 05:48 | It's a very well-established extension.
| | 05:50 | Now take a look at the
rating and that number of votes.
| | 05:55 | What I like here is that this extension
has four-and-a-half stars with 934 votes.
| | 06:01 | With that many votes it's a great
indicator that there are a lot of people who
| | 06:05 | really love this extension and
think it's very, very important.
| | 06:09 | Note that it's had almost 752,000 views
here on the JED, and this gives you some
| | 06:16 | of the background information for Akeeba Backup.
| | 06:19 | You can read a brief description
underneath about what this extension is,
| | 06:23 | how it works, some of the highlights, and
as you scroll down there will be some
| | 06:27 | screenshots of what the extension looks
like and then you are down into the reviews.
| | 06:33 | When you get into the reviews, what I
would like to see here is that people are
| | 06:36 | actively writing reviews.
| | 06:38 | So I see that the most recent review was
written on January 22, which was just a
| | 06:43 | few days ago, and the vast majority of
people here as I scroll down through the
| | 06:48 | comments are giving Akeeba Backup five stars.
| | 06:52 | So, the fact that it has four-and-a-half
stars probably is from earlier in its lifetime.
| | 06:59 | Right now it's a very mature
extension, a lot of people really like it.
| | 07:03 | You can read their testimonials here
and see what they have said about the
| | 07:08 | extension and of course you can also
submit your own review using this button here.
| | 07:13 | In fact, the extension developers really
appreciate it when you do review their extensions.
| | 07:18 | It helps them improve them or give them
feedback for how well things are working.
| | 07:24 | If you do see any negative reviews,
which I haven't seen any here for Akeeba Backup,
| | 07:29 | but if you do see negative
reviews listed, you want to look for the fact
| | 07:34 | that the developer has
responded to that negative review.
| | 07:37 | Again, it's an indication of the
level of technical support you might
| | 07:40 | receive for the extension and how
engaged and involved that developer is
| | 07:45 | with the extension.
| | 07:46 | I have happened to meet the author
of this extension, Nicholas, who is
| | 07:51 | based over in Greece.
| | 07:52 | He is a terrific guy.
| | 07:54 | He really cares about Akeeba Backup
and I think that this is going be a great
| | 07:58 | extension for you to add to your web site.
| | 08:00 | In the next couple of videos I'm going
to show you how to install Akeeba Backup
| | 08:04 | and how to configure it and to back up
your web site, which is going to be very
| | 08:08 | helpful to you as you
continue to work on your Joomla site.
| | Collapse this transcript |
| Installing Akeeba Backup and creating a backup| 00:01 | If I have not emphasized this enough yet, you
can never be too rich or have too many backups.
| | 00:07 | Backups are something you never think
about until you desperately need one
| | 00:11 | and you don't have it.
| | 00:12 | It's a lesson every Joomla
developer will learn eventually.
| | 00:15 | Sooner or later, your web host will make
backups, if you've picked a good host, and
| | 00:21 | you back up your laptop
files all the time, right?
| | 00:26 | Well, here's another way you can make
backups in Joomla. We have this extension
| | 00:30 | called Akeeba Backup.
| | 00:31 | We have been using Akeeba Backup for
creating the JPA backup files you've been
| | 00:35 | using in the Exercise Files.
| | 00:37 | But right now, I want to show you
exactly how you can make Akeeba work on your
| | 00:41 | web site, so you can install your own
backups at any point in the process.
| | 00:46 | So I'm here at the Akeeba Backup
web site, www.akeebabackup.com.
| | 00:52 | And I am going to download the
free Akeeba Backup core extension.
| | 00:57 | So to do that I am going go to
Download > Official Releases, and under the
| | 01:03 | Official Releases there is
the Akeeba Backup utility.
| | 01:06 | We will go ahead and click for releases
in this category, and you'll see that as
| | 01:12 | of this recording, these are the
options that are available to us.
| | 01:17 | There's a stable version and two betas.
| | 01:20 | Now by the time you take a look at this,
Nicholas is a very active developer
| | 01:25 | and it's likely that your versions are not going
to match up with what you see here in the video.
| | 01:30 | What I want you to install is the most
recent stable version of Akeeba Backup.
| | 01:35 | The process for installing it will be
the same, but I don't want you to go back
| | 01:39 | and install old software.
| | 01:41 | That's a good way to introduce security
holes and other issues into your web site.
| | 01:46 | So we are going to go ahead, go to
3.1.5 (Stable) and we are going to view the
| | 01:52 | files and there are two things here.
| | 01:56 | One is the Akeeba Backup Quick Start Guide.
| | 01:59 | I can't recommend enough how wonderful
his documentation is. If you ever have
| | 02:03 | any questions about how Akeeba
Backup works, you should definitely take a
| | 02:06 | look at his documentation here. And
underneath of that is the actual Akeeba Backup Core.
| | 02:14 | So go ahead and click that Download now
button, and we are going to save this file down.
| | 02:20 | Don't unzip it.
| | 02:21 | Any time you download extensions or
templates in Joomla, they come in a zipped
| | 02:27 | format and it may be the .zip
format or it may be .tar or .tar.bz.
| | 02:33 | All of these are zipped file formats and
you don't need to unzip them before you
| | 02:38 | install them on the web site.
| | 02:39 | Joomla expects to get a zipped
file when you install things.
| | 02:43 | So now I am going to jump back into
the backend of my Joomla web site and to
| | 02:48 | install Akeeba Backup, I'm going to go
to Extensions > Extensions Manager and
| | 02:53 | right here we have the option of
installing in three different ways.
| | 02:58 | We can install from a URL, if we have
a URL for where our extension lives.
| | 03:03 | We can install from a directory somewhere on
our computer, or we can upload a package file.
| | 03:08 | And 99 times out of a hundred,
upload the package file is to go.
| | 03:13 | What they mean by a package file is
that zip file that you have just unloaded.
| | 03:16 | It's a package of a bunch of things.
| | 03:18 | So I am going to go ahead and click on
the Browse button and I am going to go to
| | 03:23 | my Downloads folder, which is
where I downloaded Akeeba Backup.
| | 03:27 | Here is the file that I downloaded,
Akeeba 3.1.5-core, and I will click the Open
| | 03:33 | button and then I'll click Upload and Install.
| | 03:37 | If all goes well, you should see
message at the top of the screen that says
| | 03:41 | installing the component was
successful and occasionally you'll see a message
| | 03:45 | underneath that will talk about what was
installed here and sometimes how to get
| | 03:49 | help and that type of thing.
| | 03:51 | Akeeba Backup is a component.
| | 03:54 | So it's located under our Components
menu and now you should have a link
| | 03:58 | here for Akeeba Backup.
| | 03:59 | Go on to that link to Akeeba Backup
and in this case, we've got a Control
| | 04:04 | Panel available to us and there are
many different options for configuring
| | 04:10 | Akeeba but in my experience, at this
point in its software development cycle,
| | 04:16 | I can use it directly as is, right out-
of-the-box and I don't have to make any
| | 04:20 | changes to it at all.
| | 04:22 | To make a backup, you simply
need to click the Backup Now button.
| | 04:25 | It will take you to a page in which
you can make some notes about what you're
| | 04:30 | backing up or why you're backing it up.
| | 04:33 | That can be very helpful. For example,
you could make a note here saying I'm
| | 04:37 | backing up my web site before I
install some component or another.
| | 04:41 | Occasionally, when you install some of
these Joomla extensions, you may break
| | 04:46 | something on your web site and having
a backup where you can rollback to the
| | 04:51 | state before is an extremely
important and helpful thing.
| | 04:55 | I usually put a short description
up here at the top, so I'm going to say
| | 05:00 | practice backup is going to be my name,
and then over here on the side is a
| | 05:06 | button for Backup Now.
| | 05:07 | So I will go ahead and click that and
Akeeba Backup tends to work very quickly.
| | 05:13 | So you see here that it is just going to
go through a few steps and what Akeeba
| | 05:17 | Backup is doing is it's backing up all
of the files that are located in your
| | 05:23 | Joomla installation and it's also
including a copy of your database.
| | 05:29 | All of this is compressed
together in something called a JPA file.
| | 05:34 | This is part of the reason Akeeba Backup
is so great, because it does include all
| | 05:38 | 4,000 odd Joomla files plus the database.
| | 05:43 | If you just backup the files for your
web site, you're missing all of the data
| | 05:47 | behind your site and if you just
backup your database, you're missing all of
| | 05:52 | the files including templates, any
images you've installed, and you could be
| | 05:57 | missing other information on the site as well.
| | 05:58 | Once the backup is completely done, you have
the option of administering your backup files.
| | 06:05 | Click this button and you'll see all of the
backups that you have made for your web site so far.
| | 06:10 | So at this point, I have a single backup.
| | 06:12 | It's called the practice backup and I can go
ahead and download this now to my computer.
| | 06:18 | This seems a little odd to do considering
that I'm running my copy of XAMPP locally.
| | 06:24 | So downloading just really means
transferring the file from one directory to
| | 06:28 | another, but if you are on a web host,
a download would actually be something
| | 06:32 | you would want to do to
download the file from your web host.
| | 06:35 | All you have to do is
click on the link over here.
| | 06:38 | It will give you a message saying that
downloading backup files through your
| | 06:41 | browser can result under certain
circumstances to corrupt or partial downloads
| | 06:46 | and subsequent restoration failure.
| | 06:48 | And I will tell you that in the
hundreds of sites that I have used Akeeba Backup,
| | 06:53 | I have only once had a file
that was corrupted when I downloaded it,
| | 06:58 | and what I had to do with going to the site
through FTP and download the backup that way.
| | 07:03 | Once I did that, it restored correctly,
but almost always this works correctly
| | 07:07 | through your browser window.
| | 07:09 | Go ahead and say OK.
| | 07:10 | It will ask us where you want to
save the file and it will go ahead and
| | 07:14 | download that backup file to
wherever you have specified.
| | 07:18 | In this case, it's going to my Downloads folder.
| | 07:20 | At this point in time, if you've
been following along and you have XAMPP
| | 07:24 | installed on your computer or MAMP
and you're running your copy of Joomla
| | 07:27 | locally, you now have your web site
and your backup file both located on
| | 07:32 | the same hard drive.
| | 07:34 | If for some reason your hard drive
fails-- and by the way hard drives have
| | 07:38 | a 100% failure rate.
| | 07:40 | It's only a question of when they will fail.
| | 07:42 | You will lose your site and all
of your backups at the same time.
| | 07:45 | I strongly recommend that at this point,
you copy that backup file to some other drive,
| | 07:51 | whether that's a thumb drive or
whether you've got a big backup drive
| | 07:55 | that you used to back up your
computer, or you copy it to a CD or a DVD.
| | 07:59 | Then even more ideally and even in a
more paranoid fashion-- by the way, paranoia
| | 08:05 | is a positive trait in IT.
| | 08:07 | You'll separate the location of
this backup from your computer.
| | 08:10 | In other words, take it to your
safety deposit box, give it to a friend at
| | 08:14 | their house, and so forth.
| | 08:15 | That way if your house burns down,
you have another backup in another
| | 08:18 | location if you need it.
| | 08:20 | I know it sounds like overkill and it
sound like paranoia, but top IT companies
| | 08:25 | have been making backups and
storing them offsite for years.
| | 08:28 | You will be wise to follow their lead.
Otherwise one day you're going to learn a
| | 08:32 | hard lesson from the school of hard knocks.
| | Collapse this transcript |
| Installing and using Simple Image Gallery| 00:01 | One of the common things that people
add to web sites these days is an image
| | 00:04 | gallery, and if you go to the Joomla
Extensions directory and do a search,
| | 00:09 | you'll turn up dozens of different
kinds of image galleries, and they range
| | 00:13 | from the incredibly full-featured, lots and
lots of things they do, to the very simple.
| | 00:19 | And I tend to prefer the very simple.
| | 00:21 | Things that are simple from a
client to configure and do the job that I
| | 00:25 | need done without a lot of extra bells and
whistles that I have to explain to my client.
| | 00:30 | I am currently looking at the
Joomla Works web site, which is at
| | 00:33 | www.joomlaworks.gr, and this is a
great developer who has put out a number of
| | 00:41 | really great quality extensions for Joomla.
| | 00:43 | I am going to scroll on down the page
here past some of his big promotions and
| | 00:49 | I am going to go down to the bottom of
the page where he has some free downloads.
| | 00:53 | I worked with all of the extensions
that are here on this page and I have been
| | 00:56 | very satisfied with all of them.
| | 00:58 | One of my favorite image galleries
is one of the simplest ones out there.
| | 01:01 | This is called Simple Image Gallery
and it is right here on the web page.
| | 01:06 | Note that it is compatible for both
Joomla 1.5 and 1.6, which is not yet true
| | 01:11 | for the other extensions on this page.
| | 01:13 | As you saw earlier at the top of the
page, he is working on to bringing these into
| | 01:17 | compatibility for Joomla 1.6.
| | 01:18 | So I am really going to go ahead and
download the Simple Image Gallery by
| | 01:23 | clicking on this link and we're going to
go ahead and download this and save this.
| | 01:28 | In my case I am saving it to my
Downloads folder. And leave it all zipped up.
| | 01:32 | Once again it downloads as a ZIP file.
| | 01:34 | Note also that the Simple
Image Gallery is a plug-in.
| | 01:37 | That's a very different kind of extension
then what we've been working with before.
| | 01:41 | So we have some new considerations to think
about when working with plug-ins on our web site.
| | 01:44 | I am going to switchover to my
backend of Joomla and I am going to go ahead
| | 01:50 | and install the Simple Image Gallery, which we
do by going to Extensions > Extension Manager.
| | 01:55 | I am going to click Browse to
browse for this extension. Here it is.
| | 01:59 | I am going to say Open and I am
going to say Upload & Install.
| | 02:03 | I get a confirmation message that
I've installed a particular plug-in.
| | 02:08 | Now the next thing to do is
to go to the Plug-In Manager.
| | 02:11 | By going to Extensions > Plug-In
Manager and we can look down to the list of
| | 02:16 | extensions until we find
the Simple Image Gallery.
| | 02:19 | which is right here.
| | 02:20 | Typically when a plug-in installs,
it installs and it's turned off by default.
| | 02:27 | So almost always when you install a
plug-in, you are going to have to go to the
| | 02:30 | Plug-In Manager and turn it on.
| | 02:32 | Now plug-ins are a very
different kind of extension.
| | 02:36 | So far we have taken an in-
depth look at components and if we want
| | 02:40 | a component to show on the web site, we
make a link to it through our Menu Manager.
| | 02:44 | When you click on the link,
you see the component.
| | 02:46 | Our modules display on
the web site via a position.
| | 02:50 | So you assign the modules a position
and provided the position is present on a
| | 02:55 | given page of the web site and
the module is assigned to that page,
| | 02:58 | the module displays.
| | 03:00 | Plug-ins tend to be more of the
behind the scenes type of programs.
| | 03:05 | For example, your editor in Joomla is a plug-in.
| | 03:09 | That's the TinyMCE where we've been
entering content into Joomla. There are
| | 03:14 | third-party variations on that,
some of which are quite good.
| | 03:18 | They serve as a replacements for
TinyMCE and they are plug-ins.
| | 03:21 | You don't have to do anything
necessarily; they just sort of work.
| | 03:25 | For Simple Image Gallery the
way this works is it's a plug-in.
| | 03:29 | It will automatically does some
processing of the images for you and it displays
| | 03:35 | them on the web page.
| | 03:36 | All automatically behind the scenes,
but in order for it to work correctly we
| | 03:41 | will have to insert a little code,
which the plug-in gives us, into an article
| | 03:46 | and where that code appears Joomla
will do some processing and make the Image
| | 03:51 | Gallery show in that spot on the page.
| | 03:53 | So to make all this magic happen, I am
going to go ahead and click on the Simple
| | 03:57 | Image Gallery link here to
get into my Editing screen.
| | 04:01 | The first thing I need to do over here
on the left side of the screen is enable it
| | 04:04 | and you see that well, of course
we could limit access to this particular
| | 04:08 | plug-in in terms of who can see it.
| | 04:10 | We just went through that in a
lot of detail in the last chapter.
| | 04:14 | Over here on the right side of the
screen, we can set some Basic Options.
| | 04:18 | So the Root folder for image galleries
is the place that the plug-in looks to
| | 04:24 | find folders that might contain images
that you want to display on the web site.
| | 04:29 | By default, this is set to images/
stories, which is a Joomla 1.5 image path.
| | 04:35 | For Joomla 1.6, we are just
going to leave this set to images.
| | 04:39 | Then we are asked for a
thumbnail width and height.
| | 04:41 | I am going to go ahead and just pick 75 pixels.
| | 04:45 | That seems like a nice little square.
It gives you a little peak at something.
| | 04:49 | You can change the image quality.
| | 04:51 | I am going to leave mine to 80.
| | 04:53 | Right now, it's set to resize
| | 04:56 | all of the thumbnails based on these
above dimensions and do the work for you.
| | 04:59 | I'm all in favor of this thing doing
the work for me so that I don't have to.
| | 05:03 | So I am going to leave that Enabled.
| | 05:06 | And then finally there are some
Navigation & caption messages.
| | 05:10 | This will put a little message on top
of the thumbnail where it says this says
| | 05:13 | click for a larger view. Because my
thumbnail is so small at 75 pixels,
| | 05:19 | I think I am going to turn that off,
because otherwise all you are going to see
| | 05:21 | is the instructions.
| | 05:23 | So this is all set up and now as you
scroll down the screen a little bit, the
| | 05:28 | developers put in some nice notes
here on exactly how Simple Image Gallery
| | 05:33 | works and I would encourage you to go
ahead and read through how this works.
| | 05:37 | The piece of code that we're
going to need is this right here.
| | 05:40 | Just this little bit of code.
| | 05:42 | {gallery}myphotos{/gallery}.
| | 05:48 | The word myphotos refers to a folder that
lives somewhere in the images directory.
| | 05:54 | So what Simple Image Gallery will do
is to take all of the images that are
| | 05:58 | located within that folder, turn them into
thumbnails, and then display them on your page.
| | 06:04 | So I am going to go ahead and say
Edit > Copy to copy that little bit of code.
| | 06:10 | And then I am going to scroll over the
top of the page and say Save & Close.
| | 06:14 | Now I'm going to go to an article where
I'd like to have this image gallery display.
| | 06:19 | So I think I am going to go ahead and
display this on the Home page of the web site.
| | 06:23 | So I am going to go to Content >
Article Manager. I am scrolling down and find
| | 06:27 | my homepage article.
| | 06:29 | There it is, and down here in my article,
I am going to go ahead and add the code
| | 06:35 | that I just copied, and it
doesn't need to be bold.
| | 06:39 | So this is telling Simple Image
Gallery, the little curly brackets with the
| | 06:43 | word gallery or /gallery call Simple
Image Gallery, and now we need to tell it
| | 06:48 | what folder to look in.
| | 06:49 | Well, I have got some nice photos
available already in the random folder.
| | 06:53 | Those were the images that I am
using for the random image module.
| | 06:57 | You of course could create another folder and
upload a bunch of pictures to it if you wish.
| | 07:01 | So I am going to go ahead and say
Save & Close, and now when I go back and
| | 07:06 | refresh the homepage, just like that I
get a nice little image gallery showing
| | 07:11 | up underneath, and when I click any of
the pictures, I get a full version of it
| | 07:17 | in this light box that shows up on the page.
| | 07:20 | I can roll my mouse over it and click Next.
| | 07:23 | I can click Previous, so I can now
navigate through the image gallery as I wish.
| | 07:28 | If I add more pictures to the image gallery,
let's say I upload another five or six pictures,
| | 07:34 | just automatically Simple Image
Gallery will pick up those pictures, make
| | 07:38 | thumbnails, and show them here on the web page.
| | 07:40 | It is really wonderful
little extension for doing that.
| | 07:43 | Now while I'm sitting here looking at
this homepage, I just realize that the
| | 07:49 | word Home is still appearing at the top
of this page and I really need to get
| | 07:52 | rid of that because?
yeah, we are on the homepage.
| | 07:56 | So let's get rid of that.
| | 07:57 | I am going to go back to my menu item for
the homepage, which is under Menus > Main Menu.
| | 08:02 | Then click on my Home link and down
here under Page Display Options, I am going
| | 08:09 | to say No to Show Page Heading.
| | 08:13 | For the Home article for whatever reason,
Show Page Heading is set to Yes, and
| | 08:18 | so it takes the menu title and
displays it at the top of the page.
| | 08:22 | By setting this to No, that should be
all we need to do to get rid of that word
| | 08:26 | Home at the top of the page.
| | 08:28 | When I refresh, that is indeed gone,
and now my homepage really is starting to
| | 08:33 | look like a homepage.
| | Collapse this transcript |
| Upgrading extensions| 00:01 | One last very important thing I need to
talk about is upgrading your web site and
| | 00:06 | upgrading your extensions.
| | 00:08 | When you install Joomla, no matter
what version you're using, as open source
| | 00:13 | software in particular, you need to
stand on top of all updates that come
| | 00:17 | out for the software.
| | 00:19 | Typically, Joomla itself is updated
every 6-8 weeks, a new update is released.
| | 00:25 | For example, 1.6.0 to 1.6.1. And it's
very important you stay on top of those
| | 00:32 | updates, because frequently
they are security patches.
| | 00:35 | If you don't stay on top of your
security releases, you'll get out of date very
| | 00:39 | quickly and you therefore leave
yourselves open to hackers visiting your web
| | 00:44 | site and doing very bad things.
| | 00:47 | So you need to be sure that you
upgrade the Joomla itself to make sure that
| | 00:52 | your site stays secure.
| | 00:53 | Often overlooked though is the
need to stay up-to-date with all of the
| | 00:58 | extensions for your web site as well.
| | 01:01 | As you download an extension and you
plug it in and you configure it, you think
| | 01:05 | you're done, but extensions can also
develop security holes as well over time,
| | 01:10 | or perhaps the developer
wants to fix certain bugs.
| | 01:13 | And so your extensions are also coming
out with updates and it's import to stay
| | 01:18 | on top of those as well.
Otherwise you will get site hacked.
| | 01:22 | So in Joomla 1.5 it was very hard
to stay on top of these updates.
| | 01:26 | There were some third-party extensions
that you could install to help you do the
| | 01:30 | updates in Joomla 1.5 for the core of
Joomla. Most extensions though required
| | 01:35 | you to uninstall the extension and then
reinstall the new extension and you are
| | 01:39 | worried about losing your data when you
did that and it just wasn't necessarily
| | 01:43 | the best system in the world.
| | 01:45 | One of the nice new features of Joomla
1.6 is a built-in updating system and I'm
| | 01:51 | going to show you how that works now.
| | 01:53 | First of all, as always you need
to make sure that you stay on top of what
| | 01:57 | version of Joomla that you're running.
| | 01:59 | It is noted down here at the bottom of
the screen, the current version of the
| | 02:04 | Joomla core software that you're running.
| | 02:06 | In my case I'm running 1.6.0.
| | 02:09 | Something that can easily get confused,
because Joomla 1.6 had 15 betas all of
| | 02:15 | which are labeled as Joomla version
1.6.0, is exactly which 1.6.0 you're running,
| | 02:21 | so let me show you
that little thing real quick.
| | 02:24 | Under Site, there is a System
Information item and in the System Information,
| | 02:31 | it will tell you exactly the version
of the database that you're running,
| | 02:36 | the version of PHP that you're running, and
the version of Joomla that you are running.
| | 02:40 | So my Joomla version is listed as 1.6.0
stable that was released on January 10th.
| | 02:47 | Make sure that your version of Joomla
doesn't read some version of the beta
| | 02:50 | software, particularly if you run
across a client who might be running a web
| | 02:53 | site that says it is running 1.6.0.
By going into the System Information this
| | 02:59 | the only way you'll be able to
determine which 1.6.0 you were running.
| | 03:02 | All right, now though we've done that
let's take a look at how these updates are
| | 03:06 | going to happen in Joomla.
| | 03:08 | If you go to Extensions > Extension
Manager we already use the Install tab here
| | 03:13 | for installing software on your web site.
| | 03:16 | However, there is an option
here now to update items as well.
| | 03:20 | If you see nothing listed and it say
there's no updates, you can click the Find
| | 03:25 | Updates button up here in the upper
right-hand corner and Joomla will access the
| | 03:30 | Internet and pull down any
updates that need to happen.
| | 03:33 | So one of things that need to be
updated is Akeeba Core, that's our Akeeba Backup,
| | 03:39 | and it's noting that the
current version is actually 3.2 beta4.
| | 03:43 | We downloaded 3.1.5, the stable
version, and so it's telling us that we can
| | 03:50 | update right from here.
| | 03:51 | So if I want to update Akeeba, I can go
ahead and check this off and click the
| | 03:56 | Update button and the update will go
ahead and download from the Internet and run,
| | 04:00 | and notice that now when I go to
my Akeeba Backup it'll tell me that I'm
| | 04:07 | here I'm running 3.2 beta4 and
it's ready to back up the web site.
| | 04:10 | So, one of these great new features in
1.6 is the very easy way of upgrading
| | 04:16 | your extensions and upgrading Core
Joomla. As Core Joomla comes out with new
| | 04:21 | update you're going to find them
there right in your Extensions Directory.
| | 04:26 | So I encourage you to keep those web
sites up-to-date, keep your security up,
| | 04:32 | keep the hackers out.
| | 04:33 | It's just a few clicks these days.
| | 04:35 | It's so easy to do, you have no
excuses anymore for not keeping your web site up-to-date.
| | Collapse this transcript |
|
|
12. Launching Your Site and BeyondLaunching your site| 00:01 | Our web site is all finished.
| | 00:03 | All that's left for us is
to launch it on a web host.
| | 00:05 | So what we need to do now is
transfer our Joomla site from our local copy
| | 00:09 | running right there in front of you
on MAMP or XAMPP and transfer it to
| | 00:13 | some kind of web host.
| | 00:15 | If you haven't done so already make a
backup of your web site using Akeeba
| | 00:21 | Backup and remember that's under
the Components > Akeeba Backup.
| | 00:25 | We installed it in Chapter 11.
| | 00:26 | You can go back and refer to those
videos if you need to go through the process
| | 00:30 | of how to install it and how to make a backup.
| | 00:32 | You will create a JPA file,
which you will need to download.
| | 00:36 | If you are doing that and in other
words you're creating your own personal
| | 00:40 | backup right now today to upload to
your web host, then you'll also need to
| | 00:46 | download something called Kickstart and
Kickstart is available here at Download
| | 00:52 | under the Official Releases. And if
you scroll down to you Akeeba Kickstart,
| | 00:58 | view the releases in this category,
look for the most recent stable version
| | 01:04 | that will work with your version of Akeeba that
you downloaded and installed for your web site.
| | 01:11 | If you are going to use the Exercise Files,
you do not need to download Akeeba Kickstart.
| | 01:17 | We are going to take the JPA that's
located in the Exercise Files folder and the
| | 01:23 | Kickstart that's also located in the
Exercise Files folder and we are going to
| | 01:27 | use those two together.
| | 01:29 | The reason why I am making this
difference in Akeeba Backup writes their version
| | 01:33 | of Kickstart to match to a
version of the backup utility.
| | 01:37 | So the Kickstart and the Backup work together.
| | 01:40 | If you download a version of
Kickstart sometime in the future and you're
| | 01:45 | trying to use it with the JPA file that was
created sometime in the past, this may not work.
| | 01:51 | So if you are using the Exercise Files,
you use the kickstart.php that's there
| | 01:55 | along with the JPA file and if you're
creating your own backups and you're
| | 02:00 | moving your own site to the web
server, use the JPA you just created and the
| | 02:05 | kickstart.php that you're
about to download from here.
| | 02:08 | Once you download this from the Akeeba
Backup web site you'll download a zip file.
| | 02:13 | Unlike most of Joomla zip files,
| | 02:15 | you will actually open it and
inside you'll find kickstart.php.
| | 02:19 | That's the file that you need.
| | 02:21 | kickstart.php also ships with a bunch
of language files so that you can run in
| | 02:27 | Kickstart in a variety of languages.
| | 02:29 | By default the language is English.
| | 02:32 | So if you just put kickstart.php and
the JPA file together and you're living
| | 02:37 | here in the United States or Great
Britain and you want to build a web site in
| | 02:40 | English, you are all set.
| | 02:43 | Then what you are going to need is
your web hosting account and we have a web
| | 02:47 | hosting account established here at
Bluehost and we've logged into the control
| | 02:52 | panel for Bluehost and all that
information was provided to us when we
| | 02:56 | registered for a Bluehosting account.
| | 02:58 | They sent us an email that had our login
information and how to access the control panel.
| | 03:02 | So you're going have to
refer to all that information.
| | 03:05 | Every web host is different in terms
of the email, where you go, what the
| | 03:09 | addresses are, how you
access your control panel.
| | 03:12 | So follow those instructions to get
to something that may or may not look
| | 03:16 | like this quite frankly.
| | 03:18 | Bluehost is using something called cPanel,
which is an open source control panel.
| | 03:22 | It's used by a wide variety of web
hosts and you may see something pretty
| | 03:27 | similar to this in the backend of your web site.
| | 03:31 | But you may also have a different kind
of control panel and you'll have to hunt
| | 03:35 | around for similar options for
what I'm going to present here.
| | 03:38 | So what I am going to first is I am
going to scroll down to the Files portion
| | 03:43 | of the control panel.
| | 03:45 | Here under Files there's a File Manager.
| | 03:48 | Let's go ahead and click on that.
| | 03:51 | Inside of my Bluehost
account I am going to go into the
| | 03:54 | twotreesoliveoil_biz folder.
| | 03:57 | In some web hosting accounts you
will go straight to www folder or
| | 04:01 | something called htdocs.
| | 04:03 | It all just depends on how
your web host is configured.
| | 04:07 | This is the way it works for Bluehost.
| | 04:09 | So I am going to double-click on
twotreesoliveoil_biz and these are some default files
| | 04:15 | that come with the
folder when we first configure it.
| | 04:19 | The first thing I am going to do is
get rid of those files by holding down my
| | 04:23 | Shift key and selecting them all
and then I am going to click Delete.
| | 04:27 | They ask me if I'm sure.
| | 04:29 | I am going to say yes.
| | 04:30 | So I have got nothing left here in this folder.
| | 04:32 | So now I am going to go ahead and upload.
| | 04:35 | In this case, I'm working with the
Exercise Files so I'm going to go into my
| | 04:40 | Exercise Files folder, go into
Chapter 12, go into 12_01, and I am going to
| | 04:47 | choose my JPA file, which is going
to be set to upload, and I am going to
| | 04:52 | upload kickstart.php.
| | 04:55 | Both of these are going to upload into the
root of my twotreesoliveoil.biz web site.
| | 05:02 | So that upload is now complete.
| | 05:04 | I am going to close this window and if
I hit reload, you will see that I have
| | 05:09 | two files here now on my web page.
| | 05:11 | I am going to open another tab and I am
going to go www.twotreesoliveoil.biz and
| | 05:20 | you will see that we have two files.
The same two files that we saw in the File
| | 05:24 | Manager are now showing up here on the web site.
| | 05:26 | I am going to click on kickstart.php.
| | 05:30 | When I do that the Kickstart program
runs and it starts with a disclaimer here
| | 05:35 | about things you need to know
about the way Kickstart works.
| | 05:38 | Please go ahead and read through that.
| | 05:40 | I'm going to click to continue.
| | 05:41 | I am going to leave everything set up
to its default settings and then I am
| | 05:45 | going to click the big green
Start button down here in the bottom.
| | 05:48 | This is going to run the extraction process.
| | 05:52 | Before we run the installer, one of the
things that I'm going to need for my web site
| | 05:57 | is a new database along
with a database user and a password.
| | 06:01 | So I'm going to jump back into my
control panel and I am going to scroll down to
| | 06:06 | the Databases portion of the control panel.
| | 06:08 | Now Bluehost is running
several kinds of databases.
| | 06:12 | The one that Joomla is running is MySQL.
| | 06:15 | So you can ignore all the other ones
and I am going to go into the MySQL
| | 06:20 | Database Wizard by clicking on the link.
| | 06:23 | This is going to ask me for some
information so that it can create a database
| | 06:28 | and a database user and then make the
two of these things talk to each other.
| | 06:32 | It's a really nice utility.
| | 06:33 | So first of all it's going to ask me to
create a database and the name of that
| | 06:37 | database is now hansela1_joomla16.
| | 06:43 | Then I am going to go to the next step
and I am going to create a database user.
| | 06:48 | It's going to ask me for a username.
| | 06:50 | I am going to enter dbuser2 for my
username and then I am going to enter a password.
| | 06:55 | I will enter that password again and I'll
go ahead and click the Create User button.
| | 07:00 | I am going to assign all privileges
to that database user so that Joomla
| | 07:05 | will run correctly.
| | 07:06 | Now I am going to scroll down and I am
going to say Next Step and it will tell
| | 07:13 | me that congratulations,
| | 07:14 | we now have a database called hansela1
_joomla16 and we have a database user
| | 07:20 | called hansela_dbuser2, which is great.
| | 07:23 | That's the information we're going to
need so I hope that as you're following
| | 07:27 | along on your own web host you
wrote some of this information down.
| | 07:30 | You're going to need it to restore
your web site on your own web host.
| | 07:35 | So I am going to go back to my Kickstart tab
and I am going to click on Run the Installer.
| | 07:41 | This is going to ahead and
run my Akeeba Backup installer.
| | 07:44 | So it's going to give me some
information here and we are running all of the
| | 07:47 | right versions of things.
| | 07:48 | So we will say Next.
| | 07:52 | It's going to ask me about some
information to restore the database.
| | 07:56 | So the Database type is indeed
MySQL. The Database server hostname is
| | 08:00 | localhost typically.
| | 08:03 | Your host may be different.
| | 08:04 | You may have to check with them.
| | 08:05 | The User name is hansela1_dbuser2 and
you will need to enter that password again.
| | 08:15 | The Database name in hansela1_joomla1.6.
| | 08:16 | We will go ahead and hit the Next button.
| | 08:24 | This will think for a minute and then
it'll tell us that it has dumped all of
| | 08:27 | the information into our new
database, which is great. Say OK.
| | 08:33 | In this next screen it's going to ask us
for some information that it's bringing
| | 08:37 | over from the old web site including a
site name, the site e-mail address, and
| | 08:41 | the site sender name.
| | 08:42 | I'll go ahead and leave the Live site URL blank.
| | 08:45 | I am going tell it to use the
directories under my new site root.
| | 08:49 | Now if you're familiar with using
Akeeba Backup you're probably used to just
| | 08:54 | going on to the next screen and being
done with this, but for Joomla 1.6 you may
| | 08:58 | need to take a look at the
Super Administrator settings.
| | 09:02 | You could enter a username and
password, but you definitely need to enter an
| | 09:06 | e-mail address, which is webmaster@
twotreesoliveoil.com. Go ahead and click the
| | 09:12 | next button and it will tell you that
your configuration has been all written.
| | 09:18 | The last thing we need to do
is click this link to remove the
| | 09:21 | installation directory.
| | 09:22 | So that's been deleted. Hooray!
| | 09:27 | And it's going to redirect us
to the front end of the web site.
| | 09:31 | We can go ahead and get
rid of our Kickstart window.
| | 09:34 | We can get rid of our File Manager window
and we can get rid of our control panel.
| | 09:39 | So here we are on the front end of our web site.
| | 09:42 | You can take a quick flip through things
and see that it's exactly the same site
| | 09:46 | we just had running on our local machine.
| | 09:49 | Now it's launched and it's
available to the world if they go to
| | 09:52 | twotreesoliveoil.biz.
| | Collapse this transcript |
| Training the client on front-end editing| 00:00 | The web site is live and you've
got your check. What more is there?
| | 00:05 | Well, did you train your client to
make their own changes to the web site?
| | 00:09 | It's really not that hard to do and
it will save your time later, because
| | 00:14 | wouldn't you rather be building new web
sites than changing spellings of things
| | 00:18 | and adding sentences to
web sites? I sure you would.
| | 00:21 | You can set your clients to make
changes to the front-end of the web site only,
| | 00:25 | which is really terrific, because it's
a very friendly environment to edit from
| | 00:29 | the front-end of a web site.
| | 00:31 | Front-end editing is somewhat
limited. Depending on your client,
| | 00:35 | that could be a really good thing though.
| | 00:36 | So I'm going to show you how
front-end editing works now.
| | 00:39 | I'm going to go to my Login page and
then I'm going to go ahead and enter my
| | 00:44 | Super User name and
password, which is Jen, 123456.
| | 00:47 | I'm going to go ahead and log in, and
when I go to just let's say the About page,
| | 00:54 | you'll notice that a little icon shows
up in the upper right-hand corner of the
| | 01:00 | web site, a little pencil icon.
| | 01:02 | The only reason why I'm seeing that
pencil icon is because I'm logged into the
| | 01:06 | web site and I have
permission to edit these articles.
| | 01:10 | So if I click the pencil icon, an
editor will come up in the window and you can
| | 01:16 | see here that I can change the title
of my article and I have all of the
| | 01:22 | features for editing this particular
article that I had on the backend of the
| | 01:25 | web site in terms of the
TinyMCE buttons that I can click.
| | 01:29 | And I also have those buttons at the
bottom of the screen here, all the same
| | 01:33 | ones that I had, including being able
to upload images and insert them into
| | 01:37 | articles, the Read More, the
Pagebreak, and the Toggle Editor items.
| | 01:42 | Under here I have the ability to change
the category in which things are published.
| | 01:47 | I can publish or unpublish articles,
set their Featured state, set when they
| | 01:51 | start and finish publishing, set
their language, and put in meta
| | 01:55 | description, and meta keywords.
| | 01:57 | So editing right here in the front-end
of the web site is great for your client.
| | 02:01 | They login, they surf to the page
they want to edit, they click the little
| | 02:05 | pencil, they make their changes
and then they click Save or Cancel.
| | 02:09 | The downside to editing on the front-end
is that almost always there's no way to
| | 02:15 | create a new article on the web site,
| | 02:17 | there is no way to link new articles to
a menu, and there is no way that you can
| | 02:24 | assign modules to pages from
the front-end of the web site.
| | 02:27 | So the front-end editing is most
helpful for clients who just want to
| | 02:31 | change existing articles and that's
pretty much the limits of what this
| | 02:36 | front-end editing can do.
| | 02:38 | The only people who will have access
when they log in to the web site and have
| | 02:42 | the little pencils in the upper right-
hand corner by default in the default
| | 02:47 | Joomla 1.6 configuration are editors,
publishers, managers, administrators, and super users.
| | 02:54 | Of course all of that can be
overridden in the ACL functionality that's new
| | 03:00 | in Joomla 1.6, but those are the
default groups that may have front-end
| | 03:03 | editing permissions.
| | 03:06 | If you need to make new articles and
link them to menus, you're going to need to
| | 03:10 | give your client back-end editing privileges.
| | 03:13 | If you make the client at the
administrator level for example, they'll be
| | 03:16 | able to get in and create new
articles and link them to menus without any
| | 03:20 | trouble and you should be able to
do that at the manager level as well.
| | 03:24 | Take time to show the client how the
web site works, either through in person
| | 03:28 | training or through
written documentation, or both.
| | 03:31 | This will save you phone calls later and
your client will feel empowered to make
| | 03:36 | their own changes to the web site.
| | 03:37 | Remember, of course, that you can charge
for training in addition to your regular
| | 03:42 | fee for building the web site.
| | 03:44 | Your client is just going to love their
new Joomla web site now that they feel
| | 03:48 | that they are in control and they can
make their own changes to the web site
| | 03:51 | without involving you every time.
| | Collapse this transcript |
| The importance of backups and coordinating backups with your web host| 00:00 | One of the big differences between
static web sites and CMS web sites is that
| | 00:05 | the maintenance and day-to-day
changes primarily happen on a web server.
| | 00:09 | What that means if something very bad
happens, you don't automatically have a backup.
| | 00:16 | In static HTML land, such as a
Dreamweaver site, you could have a copy of the
| | 00:21 | site on your local computer, which
you then copy up to the Web server.
| | 00:25 | However, with the CMS, whole changes are
made directly on the server and they may
| | 00:30 | be made by you and they
may be made by your client.
| | 00:34 | This means you have no local
backup unless you make one.
| | 00:38 | Your web host should be making daily
backups at an absolute minimum and
| | 00:42 | preferably at least a daily and a weekly backup.
| | 00:46 | These backups should contain your
entire Joomla site, files and database, and
| | 00:52 | hopefully it also contains other
account settings like email accounts.
| | 00:57 | Those backups may be stored on the
server, so you'll need to periodically make
| | 01:01 | an offsite backup as well.
| | 01:03 | Akeeba Backup is great for
making backups whenever you wish.
| | 01:07 | You can also configure it to run
periodically and write the backup to offsite storage.
| | 01:12 | That's beyond the scope of this
course but it's explained in detail on the
| | 01:16 | Akeeba Backup web site.
| | 01:18 | Don't assume your host makes backups.
All hosts do in fact make backups but
| | 01:25 | more often than not those backups are not
necessarily available to web hosting clients.
| | 01:32 | They use these backups in case
something bad happens to the server, but there's
| | 01:36 | no guarantee that those backups are made
and they may not be available to you at all.
| | 01:43 | Be sure you have the
backup talk with your web host.
| | 01:46 | Ask how long it would take to restore
a site from backup if something bad did
| | 01:50 | happen, so you get a sense of down time.
| | 01:54 | Make sure any backups are
available to you as well.
| | 01:57 | Find out how many backups they're
making and how often they're making them.
| | 02:01 | Don't hesitate to move eeb hosts if
the answers aren't adequate for you.
| | 02:06 | It's hard leaving a host you may have
loved for many years, but you need to
| | 02:10 | protect your web site with
good backups and great service.
| | 02:14 | And remember the more Joomla sites,
you build the more you have to lose if
| | 02:18 | something bad happens to your web server.
| | 02:21 | Do a little homework now and you'll
save yourself a ton of heartache later.
| | Collapse this transcript |
| Additional Joomla! resources and opportunities to participate| 00:01 | If you've enjoyed this video, and I hope
you have, you might think about getting
| | 00:05 | involved with the Joomla project.
| | 00:07 | Joomla gives you everything for free in
order to build these web sites for your clients.
| | 00:11 | So you could also give back to Joomla.
Otherwise your business isn't going to do
| | 00:16 | very well without Joomla being around.
| | 00:19 | How can you get back to Joomla when you're
a new person and you're just starting out?
| | 00:24 | Actually, there is many ways that are
great and will be very helpful to Joomla.
| | 00:28 | I am back on the Joomla
discussion forums at forum.joomla.org.
| | 00:33 | Anyone can create account here on
the forums and answer questions.
| | 00:38 | You'll discover now that you watch
these videos in Joomla 1.6 that you can
| | 00:43 | contribute right away to the Joomla
1.6 discussion forums where people are
| | 00:48 | asking questions about Joomla configuration.
| | 00:51 | My good friend, Ken Crowder, has
often said that when he got started with
| | 00:55 | Joomla, his goal was to answer at least
two questions for every question he asked.
| | 01:00 | That's how he got very good at Joomla.
| | 01:02 | I recommend you do the same thing.
| | 01:05 | If answering questions isn't your style,
you can always contribute to some of
| | 01:08 | the Joomla official
documentation right here at docs.joomla.org.
| | 01:13 | You don't need to join the documentation
working group to help improve the documentation.
| | 01:18 | Just register here on the Wiki and get started.
| | 01:22 | Fix any errors that you find or take
a look in the cookie jar and consider
| | 01:26 | helping out with one of the
many projects for documentation.
| | 01:29 | The Joomla Bug Squad has just come
through a very active period and putting
| | 01:35 | together Joomla 1.6, but they're
continuing to squash bugs in Joomla 1.6 and
| | 01:41 | they're starting to think
about Joomla 1.7 as well.
| | 01:45 | "I don't know PHP," you might say.
| | 01:47 | Well, neither do I, but you can still
report any bugs that you find into Joomla 1.6.
| | 01:53 | You can also test any patches that other
programmers create to make sure that they work.
| | 01:58 | You can also confirm that certain bugs exist.
| | 02:01 | All of these things are very helpful to
putting out the next version of Joomla.
| | 02:06 | If you speak languages other than
English, you might consider joining
| | 02:09 | the translation teams.
| | 02:11 | Joomla's translation teams make a
point of translating the backend of Joomla
| | 02:15 | into languages from around the world.
| | 02:17 | Right now, Joomla
supports more than 50 languages.
| | 02:20 | They've been translated by people everywhere.
| | 02:23 | If you're interested in meeting fellow
Joomla users, take a look around in your
| | 02:27 | area for a Joomla user group.
| | 02:30 | If you don't find one, you
can always start your own.
| | 02:33 | The directions are right
here on the Joomla web site.
| | 02:35 | There is a user group FAQ right on down
here on the side of the page. Follow those
| | 02:42 | instructions and you too can form a
Joomla user group in your area and start
| | 02:46 | meeting great Joomla
developers that are right near you.
| | 02:50 | I really recommend the user groups.
| | 02:52 | It's terrific networking
and great people to work with.
| | 02:54 | Some of the nicest people
you'll ever meet work with Joomla.
| | 02:58 | Recently, Joomla just started its
first social networking web site
| | 03:02 | at people.joomla.org.
| | 03:05 | There are many groups of people here
working together, thinking about Joomla
| | 03:08 | 1.7, 2.0, the future of Joomla,
discussing issues and extensions in Joomla.
| | 03:15 | They're organizing Joomla Day
conferences and events and there's other various
| | 03:20 | Joomla enthusiast types of
activities happening here all the time.
| | 03:24 | Create an account and start meeting
Joomla people from all over the world.
| | 03:27 | Joomla is also on
Facebook at facebook.com/joomla.
| | 03:33 | You can become a fan along with
the 33,144 other people who are fans.
| | 03:40 | If you're not a Facebook person, you can
always follow a bunch of Joomla people on Twitter.
| | 03:44 | There is all kinds of Joomla people that
are out there tweeting each day, including me.
| | 03:49 | If you'd like to follow me, I'm jen4web.
| | 03:56 | Joomla is a very warm and welcoming community.
| | 03:58 | Remember that Joomla software is
designed and executed by its community.
| | 04:03 | It's not supported by large corporations.
| | 04:06 | It doesn't have any venture
capital funding behind it.
| | 04:09 | It's completely community driven and
the people who love Joomla are the people
| | 04:13 | who must contribute to it.
| | 04:15 | So if you love Joomla as much as I do,
I encourage you to get involved in
| | 04:19 | some way or another and I've given
you some great ways to get involved with
| | 04:22 | Joomla right here.
| | Collapse this transcript |
|
|
13. What's New in Joomla! and in Joomla! 1.7?The new release cycle and versioning scheme| 00:00 | You may be wondering what's
happening with Joomla these days.
| | 00:04 | We waited three years for the release of Joomla
| | 00:06 | 1.6, but in just six months,
Joomla 1.7 was released.
| | 00:12 | You may have heard talk about a Joomla
1.8 or sometimes a Joomla 2.5, and even Joomla
| | 00:18 | 3.0 is being discussed.
| | 00:20 | What's up with Joomla's release cycle
and all of these new Joomla versions?
| | 00:24 | What does this mean for you,
your web sites, and your business?
| | 00:29 | Shortly before the release of Joomla
| | 00:30 | 1.6, a new release cycle was announced by
Joomla's Production Leadership Team, or PLT.
| | 00:36 | Previously, Joomla's new releases
were driven by a list of features.
| | 00:40 | The PLT would establish that list and
when the list of features was completed,
| | 00:45 | software would be released.
| | 00:46 | That meant there was a three-year
gap between Joomla 1.5 and Joomla
| | 00:50 | 1.6, which was not good in the
world of fast-moving technology.
| | 00:55 | So in late 2010, the PLT announced
that they would move to a release cycle
| | 01:00 | releasing a new version of
Joomla every six months.
| | 01:03 | What features were ready would
be included in that new release.
| | 01:06 | If features weren't ready, they would be
incorporated into the next Joomla release.
| | 01:12 | A six-month release cycle for a
web product is quite challenging.
| | 01:16 | The PLT did recognize this, because most
people don't want to do a major change
| | 01:21 | to their web site every six months.
| | 01:24 | As a result, they grouped three of the six-
month releases into a larger release cycle.
| | 01:29 | The first two releases of the
cycle are short-term releases.
| | 01:32 | A short-term release is good for only
seven months before it reaches the end of life.
| | 01:38 | End of life is the point where the
software is no longer supported, meaning
| | 01:42 | there are no more
security fixes available for it.
| | 01:45 | The third release of the release
cycle is a long-term release, which is then
| | 01:50 | supported for 18 months.
| | 01:52 | The start of the release
cycle begins with the .0 release.
| | 01:56 | This is where the new administrator
template is released, along with any changes
| | 02:00 | to functionality that might break extensions.
| | 02:03 | This is a short-term, or seven-month, release.
| | 02:06 | The .1 release comes out six months later.
| | 02:09 | It is anticipated that there will
mostly be bug fixes in the .1 release, but
| | 02:14 | minor changes to
functionality are also typically included.
| | 02:19 | This is also a short-
term, or seven-month, release.
| | 02:22 | The final release in the cycle is a .5
release, which is good for at least 18 months.
| | 02:28 | This should be a very stable release,
fixing more bugs from the first two
| | 02:32 | releases and again introducing
minor changes to functionality.
| | 02:36 | For example, the next release
cycle will be the Joomla 3.X cycle. Joomla
| | 02:42 | 3.0 will start the cycle when it's
released in July of 2012.
| | 02:46 | Joomla 3.1 will be released in January 2013 and Joomla
| | 02:51 | 3.5 will be released in July 2013.
| | 02:53 | Joomla 3.5 will reach its end of life in January 2015.
| | 03:00 | Within a release cycle, the administrator
interface should remain mostly the same.
| | 03:05 | You may see minor additions to
functionality, but you won't see a new
| | 03:09 | administrator template, and you
should not encounter extensions breaking
| | 03:13 | completely between versions.
| | 03:15 | However, there's the oddball extension
that might change the way it does things,
| | 03:20 | or you may need to update extensions to
work with your next version of Joomla.
| | 03:25 | So it behooves you to test your site once
you upgrade and find those little glitches.
| | 03:30 | Upgrading between versions of Joomla
| | 03:32 | within a release cycle should
be simple one-click updates.
| | 03:37 | So what's the status of
the current release cycle?
| | 03:40 | The current release cycle began in
January 2011 with the release of Joomla 1.6.
| | 03:44 | Joomla 1.7 was released in July 2011.
| | 03:49 | After some debate in the community, it
was decided that the third release in
| | 03:53 | this cycle will be called Joomla
| | 03:54 | 2.5, and it will be
released in January 2012. Joomla
| | 03:58 | 2.5 will be good for a full 18 months, or
through July of 2013 at a bare minimum.
| | 04:06 | This does mean that it looks like Joomla
| | 04:09 | can't count for the moment--1.6, 1.7, 2.5--
but the break happened to get Joomla
| | 04:15 | under its new naming convention.
| | 04:18 | And after years of having one version of Joomla
| | 04:20 | not compatible with the next, there
were many concerns in the community about
| | 04:24 | how this new release cycle would work.
| | 04:26 | Fortunately as promised, the
one-click upgrade between Joomla
| | 04:30 | 1.6 and 1.7 came to pass, and it
looks like the leadership of Joomla
| | 04:35 | is committed to easy upgrades going forward.
| | 04:37 | I'll show you how to upgrade your Joomla
1.6 sites to Joomla 1.7 in the next video.
| | Collapse this transcript |
| Upgrading your site from 1.6 to 1.7| 00:00 | We're looking at the back end of our
Two Trees Olive Oil web site, which is
| | 00:05 | currently running Joomla 1.6.0.
| | 00:08 | And how do we know that?
| | 00:09 | If you look down at the very bottom of
the screen, you'll notice that there is a
| | 00:12 | version number there. And it's 1.6.0.
| | 00:16 | You can also find the version number
to confirm that you're actually running
| | 00:20 | 1.6.0 and not one of the many
betas that came before Joomla
| | 00:24 | 1.6, which also say they're Joomla
| | 00:27 | 1.6.0, by going here to Site and then going
to the System Information item under Site.
| | 00:34 | And this will tell you all of the
information about what version of PHP you're
| | 00:39 | running, the version of the database, as
well as your version of Joomla. Joomla
| | 00:42 | 1.6 is no longer supported as of the time
of this recording, which is November of 2011.
| | 00:48 | Joomla 1.6 hasn't been supported actually since
August of 2011; it reached its end of life.
| | 00:55 | It's very important to
stay on top of your Joomla
| | 00:58 | updates and putting this site, the Two
Trees Olive Oil site, as it is out on
| | 01:02 | the Internet now is probably somewhat unsecure,
because there have been security updates to Joomla
| | 01:08 | since that point in time.
| | 01:10 | So it's very important to upgrade our Joomla
web site to the latest version.
| | 01:14 | Fortunately, moving from Joomla
| | 01:16 | 1.6 to 1.7 is a breeze, and it makes
me so happy to be able to see that
| | 01:22 | incorporated into the back end of Joomla.
| | 01:25 | So to upgrade your site to Joomla
| | 01:27 | 1.7, what you're going to need to do
is go to Extensions > Extension Manager.
| | 01:33 | And we've been through some of the
things here in the Extension Manager in
| | 01:36 | previous videos, but the one thing we probably
haven't covered to this point is the Update tab.
| | 01:41 | And if you click on the Update tab,
you'll see that this is where any kinds of
| | 01:46 | updates that are coded correctly
will be incorporated into Joomla.
| | 01:49 | And by coded correctly I mean that any
of your third-party extensions can also
| | 01:55 | be upgraded through this Extension
Manager Update, provided that that
| | 01:59 | third-party developer coded their
extension correctly so that this interface
| | 02:04 | can be used with it.
| | 02:06 | So in order to upgrade your version of
Joomla, the first thing that you should
| | 02:09 | do is ignore whatever is on the screen.
| | 02:11 | I know that's a little bit confusing, but
right now it's telling me I can update to Joomla 1.6.0.
| | 02:15 | I'm already running Joomla 1.6.0. So what we first need to do is hit
this button up here in the upper right.
| | 02:22 | This is Purge Cache.
| | 02:24 | This will make Joomla forget about any of the
updates that are currently available.
| | 02:27 | Then we're going to click on the
button next to Purge Cache, which is the
| | 02:30 | Find Updates button.
| | 02:32 | Go ahead and click that, and Joomla
| | 02:33 | will think a minute, and it will pull
in any updates that are required for
| | 02:37 | your particular Joomla web site, provided, again, that
they've been coded correctly.
| | 02:42 | Now, my good friend Nicholas from
Akeeba Backup has of course coded his
| | 02:46 | extension correctly,
| | 02:47 | so the first thing we see here on our
list is an upgrade to Akeeba Backup.
| | 02:52 | If I put a check mark next to that
and then say Update, our copy of Akeeba
| | 02:58 | Backup will get upgraded here.
| | 03:00 | And you'll see that we get a message
here saying that we've successfully
| | 03:03 | upgraded our web site to the latest
version of Akeeba Backup, which is wonderful.
| | 03:08 | The next thing that you should do is
make a backup of your web site using
| | 03:12 | Akeeba Backup, just in case anything
happens to go wrong while you're upgrading
| | 03:17 | your web site to Joomla 1.7.3.
| | 03:20 | I'm going to go ahead and skip that
step for the moment so I can keep showing
| | 03:23 | you the next step in
upgrading your Joomla web site.
| | 03:25 | So I'm going to back to my Update tab
here, and you'll see that I have Joomla
| | 03:30 | listed here in my Update
manager, and it's version 1.7.3.
| | 03:35 | So put a check mark next to it again and
click on the Update button one more time.
| | 03:40 | And you're going to wait a minute
because what's happening is Joomla, your web
| | 03:44 | site that's here in front of
you, is talking to the Joomla
| | 03:46 | web server to get the most
recent version of Joomla,
| | 03:49 | and it has to download
those updates and install them.
| | 03:53 | The next thing you're going to
see is this completely blank screen.
| | 03:57 | I know the user experience is rather
awful, but unfortunately, this is what you
| | 04:01 | get--a totally blank screen.
| | 04:03 | The key is not to panic.
| | 04:05 | Go ahead and erase the URL back
to the administrator so it says
| | 04:09 | localhost/administrator, or
on a Macintosh, it would be
| | 04:14 | localhost:8888/administrator.
| | 04:18 | Your back end is just fine;
| | 04:19 | you'll see that it's here.
| | 04:21 | And if you take a look at the bottom
of the screen, you'll notice that you're
| | 04:23 | running version 1.7.0.
| | 04:26 | So we've made some progress.
| | 04:29 | What happened between Joomla 1.6 and 1.7
is that there were two major changes.
| | 04:34 | One of them, of course, was just the bug
fixes and all the various updates that happened.
| | 04:39 | The other piece was a database change.
| | 04:42 | So upgrading from 1.6 to
1.7 isn't truly "one-click."
| | 04:47 | We actually have to go
through the process twice.
| | 04:49 | It puts the database change in place, and
then we can put the next phase of the
| | 04:54 | update on top of that.
| | 04:56 | So I'm going to go back to Extensions >
Extension Manager, and you'll see here it says Warning:
| | 05:02 | The update is not complete.
| | 05:04 | It's only partially complete.
| | 05:05 | Do a second update to complete the process.
| | 05:08 | So now if I go to the Update tab, it warns me
again that the update is still not complete.
| | 05:13 | And you can see that I have my update to Joomla
| | 05:16 | 1.7.3, which is the most
current version of Joomla today.
| | 05:20 | So I'm going to go ahead and check that box
and then click my Update button one more time.
| | 05:26 | And this will move me from Joomla
| | 05:28 | 1.7.0 to 1.7.3, which is the
most recent version of Joomla
| | 05:33 | at the time of this recording.
| | 05:36 | Now we might not have had to do so
many steps if we had kept our Joomla
| | 05:39 | 1.6 site up to date.
| | 05:41 | As there are updates released for Joomla
| | 05:44 | 1.6 or 1.7, you should be updating
your site all the way along, and you follow
| | 05:49 | this exact same procedure.
| | 05:51 | Go into Extensions > Extension Manager,
click on the Update tab, click on the
| | 05:57 | Purge Cache button, and then click on
the Find Updates button, and then click on
| | 06:00 | the Update button once you've
selected your updates from the list.
| | 06:03 | Yeah, I know. One click? More like five
or six, but I'll take it because it's so
| | 06:07 | much easier than what we used
to have to do in Joomla 1.5.
| | 06:11 | So as you see here, the web site has
been upgraded, and there are no more
| | 06:16 | updates that are available.
| | 06:18 | You can confirm you're running
the correct version of Joomla
| | 06:20 | by looking at the bottom of
the screen at version 1.7.3.
| | 06:25 | Now we should take a look at the front
end of the web site just to make sure
| | 06:29 | nothing has changed over the
course of making our updates.
| | 06:32 | So I'm going to flip over to the Two
Trees Olive Oil tab, and I'm going to
| | 06:37 | refresh this web site to take
a look at the homepage here.
| | 06:41 | And it looks like things are working
great on the front end of our web site.
| | 06:45 | If I click on some of the images here in
my simple image gallery, they are still
| | 06:51 | loading and the large versions, and that's great.
| | 06:56 | My About Us page is looking very good.
And you should just keep on flipping
| | 07:01 | through the tabs that are on the top of
the day, look at the links that are on
| | 07:04 | the side, and so forth.
| | 07:06 | As you flip through the site here,
you're going to come to the Links page, and
| | 07:10 | one of the things that
did change between Joomla
| | 07:12 | 1.6 and 1.7 is this Links page.
| | 07:15 | You'll notice that it says Web Link in
front of all of these particular links
| | 07:19 | that we have for this web site,
| | 07:21 | so that is something that we will need to fix.
| | 07:23 | So if I go back to my back end of Joomla
| | 07:26 | and I go to Components > Weblinks, then
I'm going to go to my Options tab up
| | 07:32 | here in the upper right.
| | 07:34 | And you should be on the Weblink tab,
which is the very first one on the list.
| | 07:40 | You'll notice that the settings for
the Weblink, they're set to open in a new
| | 07:43 | window by default, which is great.
| | 07:46 | These are counting their clicks, how
many times they've been clicked on, and that
| | 07:50 | will be reported here in the
Web Link Manager, which is fine.
| | 07:53 | I'm going to go ahead and leave that on.
| | 07:54 | The third item is should it show
text, an icon, or a web link only?
| | 08:00 | And what I really want to
show is just a web link.
| | 08:03 | But right now what's happening is it's set
the Icon and Select Icon has nothing selected,
| | 08:09 | so it's showing the words Web Link.
| | 08:11 | I'm going to switch this over to the
Web Link Only and say Save & Close.
| | 08:16 | And now when I refresh the web
site, I have just my links here.
| | 08:22 | Notice however we could have put in an
icon if we wanted, we could have chosen a
| | 08:25 | nice icon, we could have picked one of
the olive bullets and deposited those all
| | 08:30 | in place, or we could just leave the
listing very simple, the way it is here.
| | 08:34 | So that's how you go
about upgrading your Joomla
| | 08:38 | 1.6 site to Joomla 1.7.
| | 08:41 | I hope you all go ahead and do that right
now for anybody who is still running a Joomla 1.6 site.
| | 08:45 | It's really important to
get the move to Joomla 1.7.
| | 08:49 | And when Joomla 2.5 comes out, the process for moving
from 1.7 to 2.5 should be exactly the same
| | 08:56 | as what I've covered here, or
something very close to it.
| | 08:58 | So keep an eye out for updates.
| | Collapse this transcript |
| Changing page breaks to tabs or sliders in article formatting| 00:00 | You are probably wondering at this point
what the major differences are between Joomla
| | 00:03 | 1.6 and 1.7, and actually they are
very much the same kind of product,
| | 00:09 | particularly from a site builder perspective.
| | 00:11 | If you are a site builder and you're
just working with Joomla, plugging in
| | 00:15 | extensions and templates and getting
things to work--in other words, you are
| | 00:19 | not doing programming--
you will find that Joomla
| | 00:22 | 1.7 is pretty much exactly
the same as Joomla 1.6.
| | 00:24 | They are about 98% the same.
| | 00:27 | There're a handful of new features. A
few little buttons and things have changed
| | 00:31 | in places between versions, but
other than that there are very little
| | 00:35 | differences between the two versions.
| | 00:38 | The big change between Joomla
| | 00:39 | 1.6 and 1.7 is the concept of a
framework or platform, which has always
| | 00:45 | been part of Joomla,
| | 00:46 | and is now separated from the CMS, and
they are being run as two separate projects.
| | 00:52 | So the Joomla CMS is running and depends on
the framework, whereas the Joomla
| | 00:57 | framework is more or less its own project.
| | 00:59 | They're definitely connected at the hip.
| | 01:02 | They want to make sure that they stay in
sync as they move forward so that the Joomla
| | 01:05 | CMS can keep using the framework and
the framework can continue to support the
| | 01:09 | CMS, but they are running on their own
development areas with their own teams of
| | 01:15 | developers, many of whom do overlap.
| | 01:18 | So just be aware of that, that there
is this new concept of a framework or a
| | 01:21 | platform that's out there, if you hear
it mentioned, and you should just know
| | 01:25 | that it typically has to do
with programming and geekery.
| | 01:29 | So for 1.7 site builders like you and
me, we are the ones who are building
| | 01:34 | web sites with the Joomla
| | 01:35 | CMS and to us there is very little
difference between Joomla 1.6 and 1.7.
| | 01:40 | I just wanted to cover a few of the great
new features that you will see in Joomla
| | 01:43 | 1.7, and the first one I am going to
cover is my all-time favorite, a huge
| | 01:48 | hat tip to my good friend Brian
Teeman, who put together a presentation
| | 01:53 | called Hidden Joomla
| | 01:54 | Secrets, and in that presentation he
pointed out this feature that I had no idea
| | 01:59 | it existed and I am so excited to have found it.
| | 02:02 | So this one has to do with
page breaks inside of Joomla.
| | 02:06 | If we go over to our About section of
the web site and we go to History &
| | 02:10 | Timeline, this is the way that we
had the page configured to start with.
| | 02:14 | When we first recorded this video with Joomla
| | 02:17 | 1.6, we had a page called History and Timeline,
| | 02:21 | there was navigation over here on the
side, and I could flip between years and
| | 02:25 | see information about what was
happening with the history and timeline of Two
| | 02:29 | Trees Olive Oil, which is great.
| | 02:31 | It's a very nice thing.
| | 02:32 | It's kind of ugly looking, and it's kind
of old technology, but it works just fine.
| | 02:36 | Well, there are some ways that we can
modify the way this page looks now in Joomla
| | 02:40 | 1.7, which is really fun.
| | 02:43 | So if I flip back to the back end of Joomla
| | 02:45 | and I go to Extensions > Plug-in
Manager, and I am going to scroll on down to
| | 02:49 | Content-Pagebreak, and I am going to click that.
| | 02:54 | Over on the right side of the screen,
we actually have some options for
| | 02:57 | Content-Pagebreak at this point.
| | 03:00 | Now these options are going to apply
to every page on the web site that is
| | 03:05 | running page breaks within Joomla.
| | 03:07 | You can't have one set of page break
pages have one set of formatting and
| | 03:11 | another set of page break pages
have a different set of formatting.
| | 03:14 | They are all going to have the same
formatting because of this plug-in.
| | 03:17 | Now you might be able to find a third-
party extension that will do that for you,
| | 03:21 | but not here within core Joomla.
| | 03:24 | So if you take a look at our Basic
Options here, the first thing that it says is
| | 03:28 | the Article Index Heading
is currently set to Hide.
| | 03:32 | If I set that to Show and say Save
and refresh the front end of my web site,
| | 03:37 | you will see that it now says Article Index
over top of our dates here over on the right side.
| | 03:43 | And Article Index was always
just sort of a hokey sort of title.
| | 03:47 | I would like to change it to something else.
| | 03:49 | I can type in my own custom article
index heading here, maybe perhaps Through
| | 03:55 | the Years, and say Save, and
refresh the front end of the web site.
| | 04:02 | So now instead of Article
Index, it says Through the Years.
| | 04:06 | But maybe you want to get rid of this
box on the side altogether, and that
| | 04:09 | is also possible now.
| | 04:11 | The Table of Contents option
here is currently set to Show;
| | 04:15 | if we set that the Hide and we say Save,
and I refresh this page, the box on
| | 04:21 | the side goes away and now we just have a
series of pages with the navigation on the bottom.
| | 04:27 | That's not really an improvement I think.
| | 04:29 | I think it's better to have that index
over on the side, but it gets better.
| | 04:34 | The part that really excites me is
this dropdown here down at the bottom that
| | 04:38 | says Presentation Style.
| | 04:39 | So right now we are presenting this by
pages, a series of pages that we can
| | 04:43 | flip through and read more information, but we
also have two additional options: Sliders and Tabs.
| | 04:50 | So let's try the Sliders option, and
let's save that, and when you refresh the
| | 04:55 | front end of your web site, you will
find that we now have our dates here in a
| | 05:00 | series of sliders. And I can click
on them and these will pop up with the
| | 05:05 | information, which is really
quite fabulous when you look at it.
| | 05:09 | Don't worry about this one
at the top that says 1903.
| | 05:11 | I will show you how to
fix that in just a minute.
| | 05:14 | The other option here was Tabs.
| | 05:17 | So if you switch to Tabs and go ahead
and say Save and refresh this page, now
| | 05:23 | we will have a series of tabs going
across the top, and we can click on each one
| | 05:26 | of the tabs to see the latest
information, which is also extremely cool.
| | 05:31 | I think I am going to keep this set to Tabs.
| | 05:33 | For me this works for this site,
because the tab names are short--
| | 05:38 | there is only a few of them--and we're
just going to have one row of them, even
| | 05:41 | if we add some more tabs about the more
recent past and we also need to add 1903
| | 05:46 | to these tabs going across the top.
| | 05:48 | The sliders are better--the
vertically oriented sliders are better--
| | 05:53 | if you have lots of content or long
titles, or you have the potential of adding
| | 05:57 | more stuff over time.
| | 05:59 | So those sliders are great
for frequently asked questions.
| | 06:03 | Think about having a question as the
title of the slider and the answer showing
| | 06:07 | up underneath as people click through
things, or a list of steps in a procedure
| | 06:11 | is another way to present that type
of thing. Or here, we are going to do a
| | 06:15 | historical timeline.
| | 06:17 | So let's fix this problem with 1903.
| | 06:19 | I am going to go back here
in the back end of Joomla
| | 06:22 | and say Save & Close, and then I am
going to go to Content > Article Manager and
| | 06:28 | I'm going to go to my About category
and find my History & Timeline article.
| | 06:34 | Click on that and scroll in down here.
| | 06:38 | So what's going on is we have a series
of these pages, and 1903 is showing up
| | 06:45 | here as sort of a preamble
to the history and timeline.
| | 06:48 | What we need to do in order to make it
in a tab is we will actually need to put
| | 06:52 | a page break right before 1903.
| | 06:53 | So go ahead and put your cursor right before
the 1 in 1903 and then hit the Page Break button.
| | 07:00 | Give it a title of 1903 and an alias
of 1903 and say Insert Page Break.
| | 07:07 | Then scroll back up to the top and say Save.
| | 07:11 | Now when I refresh my page you'll see
that 1903 shows up here as part of the tabs.
| | 07:17 | Obviously you can also go through
and take 1903 out of the content.
| | 07:21 | So this would present a little bit
better than instead of saying 1903 in the tab
| | 07:25 | and 1903 in the content.
| | 07:26 | You also have the opportunity to put
in a bit of preamble text on the top of
| | 07:32 | this article between the words history
and timeline and the tabs underneath.
| | 07:36 | So to do that, go to the back end of Joomla
| | 07:39 | again, and I am going to go to this article.
| | 07:43 | The easiest way to get before this
page break is to use the Toggle Editor
| | 07:48 | button and just before where it says,
hr title 1903, alt 1903, go ahead and
| | 07:56 | type in <p> </p>. What we have just done is
we coded a blank paragraph.
| | 08:10 | We are just going to type in that
little bit of code there and then hit the
| | 08:13 | Toggle Editor button again, and now
you'll have room to type above that, and we
| | 08:17 | can say, "Our history is long on great
taste, quality, and commitment to customer
| | 08:31 | satisfaction," or whatever sort of
preamble you would like to put in there.
| | 08:39 | And I have an extra space there
at the start of that sentence.
| | 08:42 | Go ahead and hit the Save button and
now when you refresh this page, you'll see
| | 08:49 | that we have a little sentence on the
top and we have our tabs underneath.
| | 08:52 | The sentences always staying in place, and
the tabs change as you click through them.
| | 08:58 | So using the sliders or the tabs could
definitely add some usability to your web site.
| | 09:03 | It can also add a little bit of
sizzle, better presentation for some of
| | 09:06 | these long articles.
| | 09:08 | So this is a really great feature in Joomla
| | 09:09 | 1.7, and I hope you will all
get a chance to give it a try.
| | Collapse this transcript |
| Introducing the offline access permission| 00:00 | One of the new permissions in Joomla
1.7 is the Offline Access Permission.
| | 00:06 | I talk a lot about the Offline
Access Core Permission in Joomla 1.7:
| | 00:11 | Access Control Lists In Depth,
which is available in the lynda.com
| | 00:16 | Online Training Library.
| | 00:19 | The Offline Access Permission
was just introduced in Joomla
| | 00:21 | 1.7, and it has to do with who can log
into the front end of your web site when
| | 00:26 | the site is offline.
| | 00:28 | So first of all, how do
we take the site offline?
| | 00:31 | Right now if I take a look at the
front end of my web site and I just hit
| | 00:34 | Refresh, I am looking at
the homepage of my web site.
| | 00:37 | It's publicly available; anyone can see it.
| | 00:39 | But if my web site was under construction,
or if I wanted to make an intranet, I
| | 00:46 | might not want this
homepage to show to everyone.
| | 00:50 | So what you can do is go into your Global
Configuration and this option has been in Joomla forever.
| | 00:56 | You can take your site offline under
the Site tab here. The Site Offline
| | 01:00 | permission is set to Yes instead of No.
| | 01:04 | Go ahead and hit the Save button, and
when we refresh the homepage, you'll get a
| | 01:10 | page that looks like this, and it
indicates that the site is currently offline for
| | 01:14 | maintenance, which may
or may not really be true.
| | 01:17 | But anyway, you've taken the site
offline and you have to enter a user name and
| | 01:20 | password in order to get in.
| | 01:21 | Now, we have two users created for
this web site already other than the
| | 01:26 | administrator, and Maria
Vitalia is the CEO for the company.
| | 01:31 | And if Two Trees Olive Oil is
undergoing a site redesign, Maria probably would
| | 01:35 | like to know what's going on, and she
would like to log in every once in a while
| | 01:39 | and check and see what's
happening with the site redesign.
| | 01:43 | So in order to do that, Maria would
enter her username and password.
| | 01:47 | Username is maria and her password is 123456.
| | 01:52 | And if we hit Log in, Maria
can't log in to the web site.
| | 01:55 | The reason Maria can't log in to the
web site is because she doesn't have
| | 02:00 | permission to log in to the
web site. Up until Joomla
| | 02:01 | 1.7 the only people who could log in
through this Site Offline screen would be
| | 02:08 | super administrators.
| | 02:10 | But we can now control who has the
permission to login to the front end of Joomla
| | 02:14 | via the Site Offline permission.
| | 02:17 | So let's try to give Maria
permission to log in to this web site.
| | 02:22 | I'm going to flip to the back end
of Joomla, right here in the Global
| | 02:24 | Configuration, and I am going to
switch over to the Permissions tab.
| | 02:27 | In the Permissions tab, I am going to
go to the Employee User Group, and right
| | 02:33 | now the Employee User Group is
allowed to log in to the front end of the web
| | 02:36 | site, and that's all we've
allowed them to do, which is great.
| | 02:40 | That works wonderfully well for the
little behind-the-scenes login feature that
| | 02:44 | we set up earlier in this video.
| | 02:47 | Under the Offline Access permission,
I'm going to change this from Inherited, or
| | 02:52 | Not Allowed, to Allowed.
| | 02:55 | By changing this permission, I will
then allow anyone who is a member of the
| | 02:58 | Employee User Group to log in to the
web site when it's in this offline mode.
| | 03:03 | I am going to go ahead and hit Save &
Close, and when I flip to the front end of
| | 03:09 | the web site and now try to log in as
Maria, Password of 123456, and I click Log
| | 03:15 | in, I am in fact allowed to log in
to the front end of the web site.
| | 03:21 | So the Offline Access permission is very handy.
| | 03:24 | You can give it out to your
clients so that they can log in.
| | 03:27 | Notice Maria doesn't have any of the
little editing pencils showing up anywhere
| | 03:31 | here or the front end of the web site,
so she can't edit any of the text.
| | 03:34 | She just sees the site as it currently
is in its state of production, which is a
| | 03:39 | great use for offline access.
| | 03:40 | If you would like to build your web
site out on the Internet but hide it from
| | 03:44 | search engines while the building
process is underway, the Offline Access can
| | 03:50 | also be used as a way of setting up
intranet, and I cover that in Joomla 1.7:
| | 03:56 | Access Control Lists In Depth.
| | Collapse this transcript |
| Expanded user profiles for site registration| 00:00 | I'm here on the front end of our Two
Trees Olive Oil web site, and I'm going to
| | 00:05 | take a look at the area
that's here behind the login.
| | 00:08 | If I go over to the Login link and click,
we have our Login screen where anybody
| | 00:12 | can log in to the web site who has an
account, and then over here on the right
| | 00:17 | side of the screen, there's this
link for Distributors, Register Here!
| | 00:20 | Also, at the bottom, it
says Don't have an account.
| | 00:22 | If I click that, I'll get the screen
where I can register for this web site,
| | 00:26 | fill in my name, my username, a password, and an
email address, and that's all I get to fill in.
| | 00:31 | This is great if you're running a web
site where not a lot of information is
| | 00:35 | required, but if you're a distributor
of the Two Trees Olive Oil product line,
| | 00:39 | it's likely that Two Trees Olive Oil
would like to know a little bit more about
| | 00:43 | you than what's listed here.
| | 00:46 | Up until this point, the only way to
get that additional information would be
| | 00:49 | through a third-party extension.
| | 00:50 | A lot of people like to use
Community Builder, and incorporate Community
| | 00:54 | Builder with Joomla in order to put in those extra fields
for user registration, which is great.
| | 01:01 | But wouldn't it be great if it
could be done within the core of Joomla?
| | 01:05 | And fortunately, in Joomla
1.7, this additional feature is in place.
| | 01:10 | So to do that, we're going to go
over to the back end of Joomla
| | 01:13 | and then going to go once again
to Extensions > Plug-in Manager.
| | 01:18 | And if your plug-ins are set to
display over 20 to a page down here at the
| | 01:22 | bottom of the screen,
this plug-in will be on page 2.
| | 01:25 | So hit the Next button, and again,
scroll all the way to the bottom and you'll
| | 01:29 | find an option here called User-Profile.
| | 01:32 | Go ahead and enable that
by clicking on the red blob.
| | 01:35 | It'll turn it into a green check
mark. And then click on User-Profile.
| | 01:41 | You'll see over here on the right side
of this plug-in, we have the options for
| | 01:46 | including some additional User Profile
fields for both the registration side of
| | 01:51 | things and for the administrator side of things.
| | 01:55 | Remember that a new user could be
created on the front end of the web site
| | 01:58 | via the Registration link or the back end
of the web site via the site administrator.
| | 02:03 | Also, when users need to go in and edit
their own information, you can give them
| | 02:07 | access to these extra fields in the
second part of this plug-in where it says
| | 02:11 | User Profile fields for the edit form.
| | 02:13 | They can make changes if
things are enabled here.
| | 02:16 | By default, all of these are set to
Optional, meaning that all of these fields
| | 02:20 | are going to show up now on the User
Registration form, and all of these will
| | 02:24 | show up as optional items.
| | 02:26 | So if I go back to the front end of
the web site and just hit Refresh, you'll
| | 02:31 | see that we have some required
fields on the top for registration and
| | 02:35 | underneath, all of this optional stuff,
in terms of addresses, and zip codes and
| | 02:40 | even a favorite book--probably not
terribly relevant to Two Trees Olive Oil.
| | 02:46 | So some of these things
you might want to disable.
| | 02:48 | For example, I'd like to require that they
put in Address 1, but Address 2 will be optional.
| | 02:54 | I'll require that they put in the city.
| | 02:56 | I'll require that they put in a region and
I'll require that they put in a ZIP Code.
| | 03:00 | I'll leave a Country in place, but
it'll be optional, because Two Trees Olive
| | 03:04 | Oil is largely just distributing
within the United States right now.
| | 03:08 | We'll require them to put in a phone
number, we'll leave the Web site optional,
| | 03:12 | and then I'm going to turn off,
completely, Favorite Book, About Me, Terms of
| | 03:18 | Service, and Date of Birth, because I
don't care about any of those things in the
| | 03:22 | context of this web site.
| | 03:24 | So you see how I've set
all of those to Disabled.
| | 03:27 | I'm going to set the second set of
settings to exactly the same as the first.
| | 03:32 | Go ahead and hit the Save button on the
top of the screen, and now when you go to
| | 03:35 | the front end of the web site and
refresh, you'll see that our User Profile is
| | 03:40 | in place and we've requested
certain pieces of information.
| | 03:43 | Some of these are required,
as indicated by the red star.
| | 03:46 | Now, this is a wonderful thing from
the front end of the web site, because
| | 03:51 | everybody who registers for the web
site will now have to fill in all of
| | 03:54 | this additional information to become a Two
Trees Olive Oil distributor, which is great.
| | 04:00 | One thing to keep in mind however--I'm
going to go ahead and hit Save & Close
| | 04:03 | here--is when you work with your users
on the back end of this web site. If I
| | 04:08 | happen to open up my User Manager and I
happen to open up Maria Vitalia, and I
| | 04:12 | can change her password or assign her to
different user groups and so forth, and
| | 04:16 | as I try to leave, I'm
going to hit Save & Close.
| | 04:20 | I'm not able to leave the screen, no
matter how many times I click Save & Close.
| | 04:24 | And it's a little bit confusing because
it's not obvious why this isn't working.
| | 04:29 | Well, it actually is
right here under User Profile.
| | 04:32 | When you click that, you'll see that
now that we've added these user profiles,
| | 04:37 | if you ever come into the User Manager
and need to make changes, you're going
| | 04:41 | to have to fill in this additional
information in order to leave the screen
| | 04:45 | because you've made the information required.
| | 04:47 | So go on ahead and fill in Maria's information.
| | 04:50 | So you have to fill in at
least the required fields.
| | 04:53 | If you want to fill in the other fields
as well, you're more than welcome to,
| | 04:56 | and go ahead and hit Save & Close.
| | 04:58 | And now Maria's information is
there in the back end of Joomla.
| | 05:02 | Now unfortunately, there isn't any
report that I can run that will export all of
| | 05:07 | that information for me automatically.
| | 05:09 | It is, however, saved in the database
inside of the MySQL database for Joomla.
| | 05:15 | So if you know an engineer who could
give you a report, they could generate a
| | 05:19 | list of all of your users with their
addresses and phone numbers and favorite
| | 05:24 | books and all the rest
of it, coming out of Joomla,
| | 05:26 | but there's no interface yet inside of Joomla
| | 05:29 | that would generate that
user report list for you.
| | 05:32 | Maybe it'll come in a future version of Joomla.
| | 05:34 | Let's keep our fingers crossed on that.
| | Collapse this transcript |
| New loadposition parameters| 00:00 | In Joomla 1.6: Creating and Editing Custom Templates,
I showed you a technique of including
| | 00:06 | modules inside of an article
using something called load position.
| | 00:11 | Load position has been around Joomla
| | 00:12 | for quite a long time, and it's the
way that we can create our own special
| | 00:17 | module position inside of an article
and then display a module, or several
| | 00:20 | modules there in that position.
| | 00:22 | There have been some changes to load
position and the way it works in Joomla
| | 00:25 | 1.7, and I'd like to show you how that works.
| | 00:28 | I'm going to add the banner ads that are
currently occurring at the bottom of the Joomla
| | 00:32 | web site right now,
| | 00:35 | down here on the bottom that are for
various kinds of olive oil, and I'm going
| | 00:39 | to put those inside the body of my Shop page.
| | 00:42 | So I'd like those banner ads to occur right
here underneath the text for the Shop page.
| | 00:48 | So in the back end of Joomla
| | 00:49 | I'm going to start by going to my Article
Manager and I'm going to go to my Shop page.
| | 00:54 | This screen here in my Article
Manager is filtered via the Select Category
| | 00:59 | dropdown here, and I've
chosen Shop from the list.
| | 01:02 | These are all of the articles located
within the Shop category, and I'm going
| | 01:06 | to the Shop article.
| | 01:08 | Down at the bottom of the Shop article,
I'm going to add some code, and the way
| | 01:12 | that this is done is we're going
to put in a curly bracket, the word
| | 01:16 | loadposition--all one word--
space, and then the position name.
| | 01:21 | And I'm going to call this a position of shop.
| | 01:23 | And the reason why I'm calling it shop
because I'm on a Shopping page, shop will
| | 01:27 | be something that's easy to remember,
and the position of shop doesn't occur
| | 01:31 | anywhere else within the template of the site.
| | 01:34 | If I called this position something
like position five, which is something
| | 01:38 | that's already in use on the web site,
then my module would show up in the
| | 01:42 | position five on the template, as well
as position five inside of my article,
| | 01:47 | and I wouldn't want that to happen.
| | 01:48 | So a unique name for that module is what we
need here inside of the loadposition code.
| | 01:54 | I'm going to go ahead and hit Save & Close.
| | 01:57 | Then I'm going to go to Extensions >
Module Manager. And all I'm going to do is,
| | 02:02 | the banner ads down here at the bottom,
I'm just going to duplicate this module
| | 02:07 | and have it display now inside of
the shop position on the Shop page.
| | 02:11 | So I'm going to put a check mark next
to the TTOO banner ads, and I'm going to
| | 02:16 | hit the Duplicate button, and you'll see
that we now have a copy of that module.
| | 02:21 | I'm going to go ahead and click on the
name, and I'll go ahead and call this
| | 02:26 | TTOO banner ads - Shop page
so I know where this is going.
| | 02:31 | I'm going to give this a new position
of shop. All you have to do is type that
| | 02:36 | in the Module Position.
| | 02:37 | And we'll change the Status to Published.
| | 02:39 | All of the other parameters that are
here for my banner ads, I'm going to go
| | 02:44 | ahead and just leave them
exactly as they are for the moment.
| | 02:47 | Go ahead and hit the Save button.
| | 02:49 | And when I Refresh the Shop page, you'll
see that our banner ad is now occurring
| | 02:54 | inside of the article.
| | 02:56 | And in theory, as we continue to
Refresh the page, a randomly chosen banner ad
| | 03:01 | should reload every time into the page.
| | 03:05 | So that's working great!
| | 03:06 | What I'd like to do now is put a
header on top of this particular banner ad,
| | 03:12 | something about trying the new products
that are coming out from Two Trees Olive
| | 03:16 | Oil, and I'd like to have that text
to show up on top of the banner ad.
| | 03:22 | Currently, you'd probably think the way
to do that is simply to show the title
| | 03:27 | here inside of the Modular Manager, and
I give this a title like "Have you tried
| | 03:34 | our latest olive oil flavors?"
| | 03:42 | And I'm showing the Title, so now
that should show up on the page.
| | 03:45 | When I say Save and I refresh inside of
the browser here, notice that the header
| | 03:50 | does not display for this module.
| | 03:53 | And the reason why is anytime we have a
module displaying inside of an article,
| | 03:57 | it always displays in the
type of display called raw.
| | 04:01 | And what raw means is that there is no
wrapping divs around that module, and the
| | 04:06 | title of the module doesn't display;
whether it's set to Show or set to Hide,
| | 04:10 | the title simply doesn't display.
| | 04:13 | So what's new about this in Joomla
| | 04:14 | 1.7 is we can now get our modules to
display with that header, and we can
| | 04:20 | also get the formatting.
| | 04:22 | Remember the types of module formatting
include XHTML, which will wrap a single
| | 04:26 | div around the module, and Rounded,
which will wrap four divs around the module.
| | 04:32 | The theory behind that being
previous to CSS 3 what we do is create a
| | 04:36 | rounded-corner image for each of the four
corners and assign one to each one of the divs.
| | 04:42 | So I'm going to modify my loadposition code now.
| | 04:46 | Now that I've turned on the header
here in the module, I'm just going to go
| | 04:49 | ahead and say Save & Close.
| | 04:51 | And I'm going to go back to my Content,
back to my Article Manager, back to the
| | 04:55 | Shop page, and I'm going to add
some code here after loadposition.
| | 05:00 | So, it's going to say loadposition
shop followed by a comma, no space, and
| | 05:05 | then the word xhtml.
| | 05:07 | And what this will do is wrap a single
div around my module, and by specifying a
| | 05:14 | module chrome--in other words XHTML
or Rounded--this will also display the
| | 05:20 | headline for my particular module.
| | 05:22 | So I'm going to go ahead and say Save,
and now when I refresh the Shop page, now
| | 05:28 | we actually get the title for
our module displaying here as well.
| | 05:32 | Having the ability to include the type
of module chrome inside of our module is
| | 05:37 | an incredibly helpful trick
that's here in Joomla 1.7.
| | 05:40 | I've also showed this
same trick in Joomla 1.7:
| | 05:45 | Access Control Lists In Depth, where I
have a series of modules on a web page
| | 05:50 | and then depending on who has access
to see those modules, the correct module
| | 05:55 | position will load with its header, and
that works very well for a landing page
| | 06:00 | for a login for example.
| | Collapse this transcript |
| Reexamining the redirect component| 00:00 | One of the coolest new features in Joomla
| | 00:02 | 1.6 and 1.7 is the Redirect component,
and unfortunately, when I recorded this
| | 00:08 | title for the first time, the Redirect
component was still fairly buggy and I
| | 00:11 | wasn't able to show it to you.
| | 00:13 | But it's working great now in Joomla
| | 00:14 | 1.7, and it's one of the features that
just makes my life so much easier, and I
| | 00:20 | am learning a ton about my web
site through the Redirect component.
| | 00:24 | So I'd like to show you a
little bit how that works.
| | 00:27 | So I am looking at the front end of
the web site here, and as you know, we
| | 00:31 | can surf around the web site. We can click
on links and this goes to pages and so forth.
| | 00:37 | If I had a broken link in my web site,
or if I had entered a URL that is not
| | 00:42 | valid--so for example, let's
take the word news here in my URL,
| | 00:46 | localhost/index.php/news, for Macs it
would be localhost:8888/index.php/news.
| | 00:55 | Change the word news to the word say
dog and hit Enter to go to that page, and
| | 01:01 | what you will get is a 404 page,
which is really not terribly surprising.
| | 01:05 | The reason you get a 404 error page
is because the page called dog doesn't
| | 01:09 | exist on this web site.
| | 01:11 | Previously, well, you got a
404 page, what can you do?
| | 01:15 | Well, we can style this 404 page in
a custom manner, but in the end it's
| | 01:19 | still just a 404 page.
| | 01:21 | Now with the Redirect component what
happens is, in the back end of Joomla,
| | 01:25 | under Components, under Redirect, the
Redirect component is actively logging
| | 01:31 | what pages we've tried to access
and have not been able to get to.
| | 01:36 | And in fact, the dog address that I just
typed in is one of those pages. And you
| | 01:41 | see here in the Redirect Manager--and
depending on what you've been doing, you
| | 01:44 | may have more links than this,
depending on if you've typed in bad URLs while
| | 01:48 | you've been developing your web site.
| | 01:50 | So the one that I just typed in was
dog, and you'll see that it's here.
| | 01:54 | They're calling it an Expired URL,
meaning that it's a URL that has expired and
| | 01:59 | that it doesn't exist anymore.
| | 02:01 | If I click on it, I'll go into a
screen where I can edit this a bit further.
| | 02:06 | So my original URL is the one that says dog.
| | 02:09 | If I copy this using Ctrl+C or Command+C
and paste this into my Destination, Ctrl+V
| | 02:15 | or Command+V, and change dog to say news,
| | 02:20 | this would mean that anytime somebody
types in the dog URL, they're actually
| | 02:24 | redirected to the news page.
| | 02:26 | And over on the right I can enable that.
| | 02:30 | Notice too that there is a
blank here for a comment.
| | 02:33 | I can put in a comment
about what this was about.
| | 02:36 | Go ahead and say Save & Close, and now
when I go to the same address on the top
| | 02:42 | of the page here,
localhost/index.php/dog and I refresh it, this actually
| | 02:48 | refreshes me and redirects me to the news page.
| | 02:51 | So that's pretty cool!
| | 02:53 | Where the real power of the Redirect
component though is when you redesign your web site.
| | 02:57 | Just recently my company,
4Web, redesigned our web site.
| | 03:00 | We moved from Joomla 1.5 to Joomla
| | 03:02 | 1.7 right around the end of
September, and we put up the site.
| | 03:06 | And after the first day with the new
4Web web site up and in place, I had a whole
| | 03:13 | page of redirects, because of course
our URLs changed between the old 1.5
| | 03:18 | site and the new 1.7 site.
| | 03:20 | The Redirect component
tracked all of those URLs.
| | 03:23 | And what was interesting to me was to
see what pages people were visiting,
| | 03:27 | because remember, some people are
going to visit pages that are from a search
| | 03:30 | engine, some people are going to visit some
pages that were bookmarked, and in fact,
| | 03:36 | I also had some pages that didn't exist on
my site and have never existed on my site.
| | 03:41 | For example, people were looking for my
WordPress admin page so that they could
| | 03:46 | probably hack my web site.
| | 03:48 | Obviously my site is Joomla and not WordPress, so they
didn't find the WordPress admin page.
| | 03:52 | They also tried to find phpMyAdmin
and a whole bunch of other things.
| | 03:56 | So the Redirect component, in my case,
informed me not only about which pages
| | 04:01 | people had been visiting on my old site
and were very interested to see on the
| | 04:05 | new site, so I could redirect those,
| | 04:07 | it also told me about how hackers are
working in terms of finding pages that
| | 04:13 | never existed on my site, and redirecting
them to, say, the homepage or something else.
| | 04:18 | So that is one use of the Redirect component.
| | 04:21 | Another use of the Redirect
component is for marketing campaigns.
| | 04:25 | On a web site that you might be building,
you may have a very, very long URL for
| | 04:29 | a page and a marketing campaign that
you'd like to shorten so that it could be
| | 04:33 | published, say in a news
magazine or in an advertisement.
| | 04:37 | And when you have a short unique URL, you can
track how many people have visited that URL.
| | 04:42 | So that might be something that you want to do.
| | 04:44 | You could actually create a special URL here.
| | 04:48 | Let's say we're going click the New
button here in the Redirect Manager. And
| | 04:53 | for our Source URL, let's put in
localhost/index.php/special, as in we're
| | 05:01 | running a store special.
| | 05:03 | And let's say that that redirects to
the Shop page. And I've just clicked on
| | 05:08 | the Shop page here in the navigation,
I'm copying the URL for the Shop page,
| | 05:13 | and I'm going to paste it in the blank
for the destination URL, and make sure
| | 05:17 | that that's enabled.
| | 05:18 | And we can leave a note here in the
Comment, say, "Marketing, November 2011 ad
| | 05:26 | campaign," so that we remember
exactly why we created this particular URL.
| | 05:33 | Go ahead and hit Save & Close, and now
when I go to the front end of the web
| | 05:36 | site--let me go back to the homepage
so you can see what's happening. And I
| | 05:39 | enter this URL of localhost/index.php/
special, a URL that exists nowhere on the site.
| | 05:48 | It will redirect me to the Shop page,
where hopefully there's some kind of
| | 05:52 | special that I'm actually running.
| | 05:54 | You can use Google Analytics from
there to track exactly who has put in that
| | 05:58 | special URL and use Joomla
| | 06:00 | to make sure that that URL is
redirecting to another page.
| | 06:03 | So the Redirect component is
incredibly useful and incredibly powerful.
| | 06:07 | A lot of people have used other third-
party extensions for this before, such as
| | 06:11 | JoomSEF or sh404SEF, and there
are some other extensions as well.
| | 06:18 | And you can certainly continue to use
those third-party extensions, but for me
| | 06:22 | personally, I've always been a fan of
using Joomla's core products wherever
| | 06:26 | possible, because they are supported,
and they will be migrated to versions and
| | 06:30 | they don't hold me up. When Joomla
| | 06:31 | 2.5 comes out, it will come out with all
the extensions ready to go. When Joomla
| | 06:35 | 3.0 comes out with all of its
extensions, it will be ready to go, and I won't
| | 06:39 | have to wait on a third-party developer to
come out with their solution to the product.
| | 06:44 | So I personally prefer to use what's
in core wherever possible and use
| | 06:48 | third-party extensions to
supplement where needed.
| | 06:51 | If you prefer to use one of those
other solutions like sh404SEF, you're
| | 06:55 | certainly welcome to do so, but
the Redirect component is probably a
| | 06:59 | stripped-down version of those kinds of things,
and it's available there to you in the core.
| | 07:03 | Quick and easy to use. I recommend it.
| | Collapse this transcript |
| Background images in custom HTML modules| 00:00 | Well, another new change in Joomla
| | 00:02 | 1.7 is some additional functionality
that's been assigned to the custom HTML module.
| | 00:07 | And over here on the homepage, over in
the right column, our Testimonials is a
| | 00:11 | custom HTML module. And what I'd like to
do is use this new functionality in the
| | 00:17 | custom HTML module to enhance this right column.
| | 00:20 | What I can do now is assign a background
image to a custom HTML module, and I am
| | 00:26 | going to show you how to do that. So in the back
end of Joomla, if you go to Extensions > Module Manager, and we're
| | 00:32 | going to go to the Testimonials
Module, which is here in position 6,
| | 00:36 | and you'll notice the new thing
that's available to us here inside of the
| | 00:41 | custom HTML module is over on the right
side of the page, where we have Select
| | 00:46 | a Background-Image. And if you mouse
over that, the tooltip will tell you that
| | 00:50 | it will insert the background image as an
inline style for the wrapping div element.
| | 00:55 | For those of you who know what that
means, in terms of CSS, you're probably not
| | 00:59 | going to be terribly happy.
| | 01:00 | But for those of you who don't know
CSS and just want to stick a background
| | 01:03 | image inside of your module,
you will be happy people.
| | 01:06 | So I'm going to go ahead and hit my
Select button and I'm going to browse now to
| | 01:11 | my Desktop. Down here at the bottom, I
am going to click my Browse button again
| | 01:15 | for the Upload files,
and I am going to go to my exercise files.
| | 01:19 | I am going to go to Chapter 13, to
video number 08 here, and you'll see that
| | 01:24 | I've taken the olive image and faded
it out a bit. Go ahead and say Open, and
| | 01:28 | Upload, and we'll put the olives
image inside of the Media Manager here.
| | 01:33 | I will select this from the list and say Insert.
| | 01:37 | And so what this is going to do is put the
image of the faded olives behind my Testimonials.
| | 01:42 | I am going to go ahead and hit the Save
button on the top and then refresh the
| | 01:47 | homepage of the web site, and you'll see
over here in my right column that I now
| | 01:51 | have a background image.
| | 01:52 | To answer questions that people
have about this particular background
| | 01:55 | image, the code for it is an inline style
inside of the div that goes around the module.
| | 02:01 | It does tile the image in both the X
and the Y directions, and as you see here,
| | 02:07 | there is no styling with it in terms of,
say, moving the text in so that there's a
| | 02:11 | little bit of padding between the edge
of the image and the start of the text.
| | 02:17 | So if you are a CSS guru, you
probably aren't going to want to use this
| | 02:22 | particular feature here
inside of the custom HTML module.
| | 02:27 | You won't have any need to use this interface
to include a background image for your modules.
| | 02:33 | If you want a background image,
you'll probably just write one in your CSS.
| | 02:36 | But for those of you who don't know CSS,
this could be a handy way to quickly
| | 02:41 | put in a background image.
| | 02:42 | Just know that if there are additional
adjustments that you want to make--and
| | 02:47 | what I would do here would be to move
this text in a little bit, so that it's
| | 02:51 | not smashed up against the edges here,
and maybe some other tweaking I would
| | 02:55 | want to do with this--
| | 02:56 | unfortunately, you're not going to be
able to do that through the interface that
| | 03:00 | you have in the custom HTML module.
| | 03:02 | So it is what it is.
| | 03:03 | It may be very helpful to some
of you. And this is new in Joomla
| | 03:07 | 1.7, the ability to add
background images to custom HTML modules.
| | Collapse this transcript |
| Changes to search in a menu item| 00:00 | One of the things we never added to
this web site when we were building it the
| | 00:04 | first time is we never
added a search page to the site.
| | 00:07 | And the truth of the matter is for a site of
this size, we probably don't need a search at all.
| | 00:11 | It's probably just too small.
| | 00:13 | But if you wanted to add a
search, you certainly could.
| | 00:15 | It is core to Joomla,
the ability to add a search.
| | 00:20 | So I wanted to show you a couple of
changes that are made to search, because
| | 00:23 | when I tried using search in Joomla
| | 00:24 | 1.7, I got very confused by the
interface, and Brian Teeman once again had to
| | 00:30 | come to my rescue and straighten
me out as to what was going on.
| | 00:33 | So if you flip over to your back end of Joomla,
| | 00:36 | let's say we want to add a
search links to that top navigation.
| | 00:39 | So we're going to go to menus and we're
going to go to Main Menu > Add a New Menu
| | 00:43 | item. And the menu item type we're
going to want to add is a search page.
| | 00:48 | So right here under Search, the only
option is something called List Search Results.
| | 00:53 | First of all, that name is pretty
misleading, because it sounds like it's done
| | 00:57 | a search for you already and it's
delivering certain results for you, like you
| | 01:01 | don't have a box that you can type stuff in
and get a search page as you would expect.
| | 01:06 | Rest assured that this is the correct
option, even if the wording is a little bit awkward.
| | 01:10 | So go to List Search Results, and
we'll give this a title of search, and if I
| | 01:16 | just say Save at this point,
and go to the front-end of Joomla
| | 01:19 | and refresh, you'll see that we get a search
link that shows up here in the top navigation.
| | 01:24 | When I click on that, I do in fact get
a blank screen with the search that's
| | 01:30 | here and I can type in whatever word I
want to type in, like olive oil, that
| | 01:35 | better return some results, and
then this was going to return all of the
| | 01:40 | results for the web site that
contain the word olive oil. There we go!
| | 01:45 | So what's new in Joomla
| | 01:46 | 1.7 is what's over on the right side of the
screen, and here's where I really got confused.
| | 01:51 | So on the right side of the screen,
there is an option here that's
| | 01:54 | called Required Settings,
| | 01:56 | even though these settings are actually
not required. And because there's no star
| | 02:01 | here that you know that they're not
required, but if you read the words
| | 02:04 | required setting, it sure looks like
it's a required setting, and that's where I
| | 02:08 | got really thrown off.
| | 02:09 | So even though it's called
Required Settings, they're not required.
| | 02:12 | This is looking for a search term,
and if I put in a search term here, what
| | 02:17 | will happen is when I click my link called
search, it's going to already do a search for me.
| | 02:23 | So let's say my search term is shop, and
I say Save, what this will do is when I
| | 02:29 | am going to go to my homepage and then
back to search, note that it's already
| | 02:35 | put the word shop into the search
results, and it's pulled up the results for
| | 02:39 | all of the pages that mentioned the
word shop, whether that's a shop the
| | 02:42 | category, shop the article, or
shop as a word in a sentence.
| | 02:48 | Brian Teeman and others have suggested
that this could be used for a tagging solution.
| | 02:54 | In other words, you can set up a series
of keywords in some of your articles and
| | 02:58 | then use search to pull up matches to
the pages that contain those specific
| | 03:02 | keywords, and that might
work at some level or another.
| | 03:07 | It certainly is close to tagging as
you're ever going to get inside of core Joomla.
| | 03:11 | But if you really want tagging, there
are a lot better third-party solutions
| | 03:15 | that are out there for that.
| | 03:16 | K2 is one of the best, and it's
ready for Joomla 1.7 at this point.
| | 03:21 | You can also look at some of the other
CCK or Content Construction Kit solutions
| | 03:25 | like ZOO, is another one
that would offer tagging.
| | 03:28 | So there are other ways to accomplish this.
| | 03:31 | To me, this method of using search is awkward.
| | 03:34 | It hasn't really quite been thought through yet.
| | 03:36 | It probably need some updates to its wording,
and I'm hoping we'll see all of that in Joomla 2.5.
| | 03:41 | But for now, rest assured that this is
all available to you. If you wanted to
| | 03:46 | give search or try, don't get thrown
off by the awkward interface that's here
| | 03:51 | that's present on the back end, and
hopefully that will get fixed in Joomla 2.5.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Congratulations!
| | 00:02 | You've built a great
looking web site using Joomla 1.6.
| | 00:06 | It must be good to know that you've got
the basics of Joomla now under your belt
| | 00:10 | and you're ready to build your next web site.
| | 00:12 | If you have enjoyed this title, you
might enjoy other titles that I've recorded.
| | 00:17 | If you'd like to learn more about
planning your web site before you start
| | 00:20 | building, be sure to watch my
Web Site Strategy and Planning video.
| | 00:25 | Coming soon I'll also be recording a
video called Joomla 1.6: Creating and
| | 00:31 | Editing Custom Templates, which we'll
talk about how to build your own custom
| | 00:36 | template using HTML and CSS.
| | 00:39 | And finally, if you need to know how
to prepare a design for your web site or
| | 00:44 | create graphics for your web site, be
sure to watch Preparing CMS Web Graphics
| | 00:49 | and Layouts Using Open-Source Tools,
which features GIMP as a Photoshop
| | 00:54 | substitute and Composer as
a Dreamweaver substitute.
| | Collapse this transcript |
|
|
