IntroductionWelcome| 00:03 | Hi! I am Jen Kramer. Welcome to Joomla!
2.5 Essential Training.
| | 00:08 | Content management systems are growing
in popularity for creating both simple
| | 00:12 | and complex websites. Joomla!
| | 00:15 | is one of the three best-known open-source
content management systems in the world.
| | 00:18 | In this course I'll show you how to
install WAMP and MAMP to turn your computer
| | 00:23 | into a mini web server.
| | 00:24 | We'll then install Joomla!
| | 00:27 | After that we'll learn about the CAM
(Categories, Articles and Menus), as well
| | 00:32 | as adding components and modules to
your website for extra functionality.
| | 00:36 | We'll explore some of Joomla!'s latest
features including Nested Categories, the
| | 00:40 | Flash Uploader and the Media
Manager and the Redirect Component.
| | 00:43 | We'll change the look of a website using Joomla!
| | 00:46 | Templates, and we'll get a peek at the
basics of Joomla!'s new access control
| | 00:50 | lists or ACL features.
| | 00:52 | We'll also take a look at working
with multiple languages in Joomla!
| | 00:56 | Finally you'll learn how to move your
site from a local computer to a Web host.
| | 01:00 | So if you're ready, let's
get started with Joomla! 2.5
| | 01:03 | Essential Training.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Exercise Files are available to
premium subscribers of Lynda.com and to those
| | 00:05 | who purchase the DVD.
| | 00:06 | Simply download the Exercise Files
to your computer and place them on the
| | 00:10 | Desktop for ease of access.
| | 00:12 | The Exercise Files are
organized by chapter number.
| | 00:16 | Whenever an exercise file is
available for a video, you'll see a yellow
| | 00:20 | overlay at the bottom of the screen
that indicates the location and the name
| | 00:24 | of the exercise file.
| | 00:26 | Jump in files are available
at the start of each chapter.
| | 00:29 | This is the current state of the Joomla!
| | 00:31 | site at that point in time.
| | 00:33 | You do not need to install these jump in
files to follow along with this course.
| | 00:38 | They are provided only in case you get
lost during a chapter or if you'd like to
| | 00:42 | jump forward to a specific chapter.
| | 00:45 | It's expected that most viewers will
follow along with this course in video order.
| | 00:49 | So the jump in files should not be required.
| | 00:52 | I will cover how to install the jump
in files in Chapter 1, Video number 5,
| | 00:56 | Restoring Your Site From Backup, Jump In Files.
| | 01:00 | Working with the Exercise Files
can add great value to the training.
| | 01:03 | However, if you don't have access to
the Exercise Files you can still follow
| | 01:07 | along with the videos, often using
your own files and have a fulfilling
| | 01:12 | learning experience.
| | Collapse this transcript |
| Understanding Joomla!| 00:00 | You might have built a website before
with Dreamweaver, FrontPage or GoLive.
| | 00:05 | These tools usually create
what are called static websites.
| | 00:09 | A Static Website is quite simple.
| | 00:11 | Open up your Web browser
and type in a Web address like
| | 00:16 | www.lynda.com/index.html.
| | 00:19 | A Web browser is a piece of software
that displays webpages from the Internet
| | 00:24 | like Internet Explorer,
Firefox, Safari, Chrome or Opera.
| | 00:29 | The request for the webpage goes from your
computer also called the client to the web server.
| | 00:36 | Server is a tricky word that
means two different things.
| | 00:39 | One is the hardware sense of the word.
| | 00:41 | A Server is a very powerful
computer that is shared in some way.
| | 00:45 | Server can also be used in the software sense.
| | 00:48 | Server Software is
designed to serve up Web pages.
| | 00:52 | Apache and Internet Information Server,
or IIS, are examples of server software
| | 00:58 | that are compatible with Joomla.
| | 00:59 | The term Web server is frequently used
interchangeably with the term Web host.
| | 01:05 | However, they are somewhat different.
| | 01:07 | A Web host is a service that
offers Web servers for your use.
| | 01:12 | The Server locates a page called index.html
in its files for lynda.com and then
| | 01:18 | it 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:28 | sends those files along as well.
| | 01:30 | The client and the Web browser then
display this page plus the images and any
| | 01:35 | other associated files.
| | 01:37 | The system is static in that
the page contains fixed content.
| | 01:42 | The Server simply picks the right page
from the right location and sends it.
| | 01:46 | There's no processing of that page required.
| | 01:49 | You create the Web page on your
computer, the client, and you send a copy of
| | 01:54 | those pages to the Web server via
FTP, the File Transfer Protocol.
| | 02:00 | All the Web server does is store
those pages and send out copies of them as
| | 02:05 | they are requested.
| | 02:06 | A Content Management System or CMS is a
very different thing than a static site.
| | 02:12 | A CMS is a Web application.
| | 02:14 | This is software that runs on the
server and it does not run on the client.
| | 02:19 | For example, Microsoft Word
runs on your computer, the client.
| | 02:23 | The Google Docs however runs on a server.
| | 02:26 | Both applications are designed to
create an edit Word processing documents.
| | 02:31 | But the way they get that
job done is very different.
| | 02:34 | CMSs generally function in the same
kind of way, from a bird's eye perspective.
| | 02:39 | The Server software, middleware software
and database software may vary, but the
| | 02:44 | way the functionality happens is all the same.
| | 02:47 | So in the case of a Content Management
System, you will have a procedure that
| | 02:51 | goes something like this;
| | 02:53 | Just like you did before, on the
computer that's in front of you, the client,
| | 02:57 | open a Web browser and type in a Web
address like www.samoca.org/index.php.
| | 03:06 | Your computer sends a request
for this page to the Web server.
| | 03:09 | The Web server looks at its files and
realizes the page you've requested is
| | 03:13 | written in PHP, a programming language.
| | 03:16 | The Web server knows it can't
send this page as-is to the client.
| | 03:20 | Some processing must be done to it first.
| | 03:23 | So instead, the Web server
sends this request to PHP.
| | 03:28 | PHP looks at the document and
determines that some information needs to be
| | 03:31 | pulled from the database and then processed.
| | 03:34 | PHP, a programming language, is
functioning as middleware in this way.
| | 03:39 | This means that PHP mediates the
discussion between the Web server and the database.
| | 03:45 | The server and the database
can't talk to each other directly.
| | 03:48 | They need a translator that can
understand server speak and database speak.
| | 03:53 | Other examples of programming language
used in this kind of role include ASP and
| | 03:57 | .NET, ColdFusion, Java and Perl.
| | 04:01 | A DATABASE is a collection
of organized information.
| | 04:04 | The database type that we will
use in Joomla! is called MySQL.
| | 04:08 | But other types of databases
include Microsoft SQL or Oracle.
| | 04:13 | Access is a database that runs on your
laptop and is not suitable to use in a website.
| | 04:19 | A new feature in Joomla! 2.5
| | 04:20 | is support for some Microsoft
environments, including Windows Azure, the
| | 04:26 | cloud platform that Microsoft offers.
| | 04:28 | In addition to supporting Microsoft
SQL Server 2008 and SQL Azure, Joomla! 2.5
| | 04:33 | supports Azure storage CDN
and Azure Deployment.
| | 04:40 | It also supports PostgreSQL which is
of course not a Microsoft product but an
| | 04:45 | open-source database.
| | 04:46 | The Microsoft products are beyond the
scope of this particular Lynda.com course,
| | 04:51 | but you can learn more about
Windows Azure and WebMatrix if you go to
| | 04:56 | Microsoft's website.
| | 04:58 | The database will then receive a request for
information from PHP via a database query.
| | 05:04 | The requested information is copied
from the database, and sent back to PHP.
| | 05:09 | PHP arranges the database information
in the way specified within the PHP code.
| | 05:15 | The actual PHP code is stripped out
from the page and replaced with plain old
| | 05:19 | HTML according to the instructions on that page.
| | 05:23 | Now that the page is created and it
consists of HTML and its associated files,
| | 05:28 | like CSS and JavaScript, the entire
package is now sent to the client to view.
| | 05:34 | All of this happens in the blink of an eye.
| | 05:37 | In order to run Joomla!
| | 05:38 | therefore, you must have a Web server
configured with Apache or IIS, PHP and
| | 05:44 | MySQL, including the right
versions of those pieces of software.
| | 05:50 | You can check joomla.org for the latest
requirements and recommended Web hosts.
| | 05:55 | So obviously a CMS is way more
complicated than a static website.
| | 05:59 | In fact you may be intimidated by all
of that technology running your website.
| | 06:04 | Why are CMSs preferred over static websites?
| | 06:08 | Because of the power of the database,
websites are much easier to maintain with
| | 06:12 | a CMS, than they are with a static
website, from the perspective of somebody who
| | 06:17 | doesn't have a lot of technical knowledge.
| | 06:19 | If you wish to make changes to a CMS
website, you can change it without knowing
| | 06:24 | any HTML, PHP, MySQL or anything else,
which means that your average customer
| | 06:30 | can easily create new pages, link them
to menus, change content and make other
| | 06:35 | updates without talking to you at all.
| | 06:39 | In a world where we increasingly
integrate photo galleries, calendars, social
| | 06:43 | media, news feeds, blogs and other
dynamic information and we require that those
| | 06:49 | websites be served up in a format
that's suitable for PC or Mac as well as
| | 06:54 | mobile devices, a CMS becomes more
important due to the ease of integrating all
| | 07:00 | of these features into a single website.
| | 07:02 | If you still feel like a CMS
is complicated, don't panic.
| | 07:07 | This movie is as geeky as
the rest of this title gets.
| | 07:10 | Keep watching and you'll start to
feel more comfortable with Joomla!
| | 07:14 | very shortly.
| | Collapse this transcript |
| Planning a web site | 00:00 | Do you have plan for this website
that you're 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:11 | We were taught to write the middle of
the paper before the introduction and the
| | 00:14 | conclusion, and we were encouraged to
proofread everything to make sure it
| | 00:18 | flowed from start to finish.
| | 00:20 | Creating a website is not so
different from the term paper process.
| | 00:24 | First you need to start with a
plan for what you're building.
| | 00:27 | You can then concentrate on building
the inside pages of the website getting
| | 00:31 | some of the content into place.
| | 00:33 | After the inside pages or built go back
to the homepage and get it into shape.
| | 00:38 | Finally, debug the website and make
sure everything is working correctly
| | 00:42 | before you launch it.
| | 00:43 | In this course we'll be building a Joomla!
| | 00:45 | website for SAMOCA, the San
Angelico Museum of Contemporary Art.
| | 00:50 | Your website should
reflect three kinds of goals.
| | 00:53 | First of all think about
the organizational goals.
| | 00:57 | The site is a reflection of
the organization behind it.
| | 01:00 | That organization whether it's a
business, nonprofit, school, club or your own
| | 01:05 | personal site has a reason for existing.
| | 01:08 | What's the reason it exists? Who does it serve?
| | 01:11 | What is it trying to achieve?
| | 01:13 | Understanding this background will
help you understand how the website can
| | 01:17 | support the organization.
| | 01:19 | In the case of SAMOCA the
organizational goal is to serve the Southern
| | 01:22 | California community with the best
modern art from new emerging artists as well
| | 01:26 | as from established artists.
| | 01:28 | They wish to engage children and
adults in the community furthering their
| | 01:32 | love of modern art.
| | 01:33 | Now that the goals of the
organization are clear, think about why users are
| | 01:37 | coming to the website in the
first place. Who are they?
| | 01:40 | What do they want from this website?
| | 01:42 | What environment are they in when
they are looking for this webpage?
| | 01:46 | In general, users want to find out
when the museum is open and its admission
| | 01:50 | price, what kinds of art are on display
at the museum and they'd like to learn
| | 01:54 | about the latest news and upcoming events.
| | 01:57 | Museum volunteers need to know about
their shift schedules and special benefits
| | 02:01 | available to them in
addition to other information.
| | 02:04 | Most museum visitors will be viewing the
website from their Mac or their PC, but
| | 02:09 | occasionally they may look at the
website on their mobile phone, and that's
| | 02:13 | particularly true if they
need directions and hours.
| | 02:16 | The museum also gets a number of
visitors from French speaking countries, and so
| | 02:21 | we'll need to be sure that we have
some information on the website that's
| | 02:25 | presented in French as well as in English.
| | 02:27 | Once you understand the organization's
goals and the user's goals the website's
| | 02:32 | goals become much clearer.
| | 02:34 | People visit the SAMOCA website to
find out more information about the museum,
| | 02:38 | about their main collection and their
visiting collections, and to find out how
| | 02:42 | much it costs to see the museum and its location.
| | 02:45 | Volunteers need additional
information about scheduling, as a result we've
| | 02:49 | designed a site with the structure
and content to support the goals of the
| | 02:52 | organization, the users and the website.
| | 02:55 | This is a very brief summary about how
to think strategically about this website.
| | 03:00 | If you'd like to learn more, and I
hope you do, be sure to watch my website
| | 03:04 | strategy and planning title
available here at Lynda.com.
| | Collapse this transcript |
| Understanding Joomla's release cycle and its versions| 00:00 | You maybe wondering, what's
happening with Joomla! these days.
| | 00:04 | We waited three years for the release of Joomla! 1.6,
| | 00:07 | but just 6 months
later Joomla! 1.7 was released.
| | 00:11 | Six months after that here comes Joomla! 2.5.
| | 00:13 | You may have heard talk about a Joomla! 1.8
| | 00:16 | and where did that go and even Joomla! 3.0
| | 00:20 | is being discussed.
| | 00:22 | What is up with Joomla!'s release cycle
and all of these new Joomla! versions?
| | 00:26 | What is it mean for you
your websites and your business?
| | 00:30 | Shortly before the release of Joomla! 1.6
| | 00:32 | a new release cycle was announced by
Joomla's production leadership team, or PLT.
| | 00:38 | Previously Joomla's new releases
were driven by a list of features.
| | 00:43 | The PLT would establish that list,
and when the list of features was done
| | 00:47 | software would be released.
| | 00:48 | That meant there was a
three year gap between Joomla! 1.5
| | 00:51 | and 1.6, which was not good at all
in the fast-moving world of technology.
| | 00:58 | So late in 2010, the PLT announced
that they would move to a release cycle,
| | 01:03 | releasing a new version of
Joomla! every six months.
| | 01:06 | What features were ready would
be included in the new release.
| | 01:09 | If features were not ready than they would be
incorporated into the next Joomla! release.
| | 01:14 | A six month release cycle for a
Web product is quite challenging.
| | 01:18 | The PLT did recognize this, because
most people don't want to make a major
| | 01:22 | change to their website every six months.
| | 01:25 | As a result they've grouped three
of these six month releases into a
| | 01:29 | larger release cycle.
| | 01:32 | The first two releases of this
cycle are short-term releases.
| | 01:36 | A short-term release is good only for
seven months before it reaches the end of life.
| | 01:40 | End of life is the point where the
software is no longer supported, meaning that
| | 01:45 | there are no more
security fixes available for it.
| | 01:48 | The third release of the cycle is the
long-term release which is supported for
| | 01:52 | 18 months at a minimum.
| | 01:54 | The start of the release
cycle begins with a .0 release;
| | 01:58 | this is where the new administrator
template is released along with any changes
| | 02:03 | to functionality that might break extensions.
| | 02:06 | This first release is a short-term
or seven-month release.
| | 02:10 | The .1 release comes out six months
later. It's anticipated that there will
| | 02:15 | mostly be bug fixes in this release,
but minor changes to functionality are
| | 02:19 | also typically included.
| | 02:21 | This is also a short-term
or seven-month release.
| | 02:24 | The final release in the cycle is a .5
release, which is good for at least 18 months.
| | 02:30 | This should be a very stable release.
| | 02:33 | Fixing more bugs from the first two
releases and again introducing minor
| | 02:37 | changes to functionality.
| | 02:38 | For example, the next release
cycle will be the Joomla! 3.X cycle.
| | 02:44 | Joomla! 3.0
| | 02:44 | will start the cycle when
it's released in September, 2012.
| | 02:49 | Originally this release was
scheduled for July of 2012, but the PLT is
| | 02:53 | pushed the release back. Joomla! 3.1
| | 02:55 | will be released in March, 2013 and Joomla! 3.5
| | 02:58 | will be released in
September, 2013. Joomla! 3.5
| | 03:02 | will reach its end of life in March, 2015.
| | 03:08 | Within a release cycle the
administrator interface should remain mostly the
| | 03:12 | same. You may see minor additions to
the functionality, but you won't see a new
| | 03:17 | administrator template, meaning a
completely new look and feel for the
| | 03:21 | configuration or administrator site of Joomla!
| | 03:24 | And most extensions should be
compatible between versions.
| | 03:27 | You may see a few extensions which
break, but these will be very few.
| | 03:32 | Upgrading between versions of Joomla!
| | 03:34 | within a release cycle should be
a simple one click style update.
| | 03:39 | So what's the status of
the current release cycle?
| | 03:42 | The current release cycle began in January,
2011 with the release of Joomla! 1.6.
| | 03:46 | Joomla! 1.7 was released in July, 2011.
| | 03:51 | After some debate in the community, it
was the decided that the third release in
| | 03:55 | this cycle would be called Joomla! 2.5
| | 03:56 | and it was released in
January of 2012. Joomla! 2.5
| | 03:59 | will be good through December 2013
as announced at developer.joomla.org.
| | 04:07 | This does mean that it looks like Joomla!
| | 04:09 | can't count, but the
break happened to get Joomla!
| | 04:12 | under its new naming convention.
| | 04:14 | After years of having one version of Joomla!
| | 04:17 | not compatible with the next.
| | 04:19 | There were many concerns in the community
about how this new release cycle would work.
| | 04:23 | Fortunately as promised, the
one click upgrade between Joomla! 1.6
| | 04:26 | and 1.7 came to pass, as did the
one click upgrade between 1.7 and 2.5.
| | 04:33 | It looks like the leadership of Joomla!
| | 04:35 | is committed to easy upgrades going forward.
| | Collapse this transcript |
|
|
1. Installing Joomla!Understanding the installation process| 00:00 | Before we get started with the
mechanics of installing Joomla!
| | 00:04 | it's nice to know what the general
steps are in advance and why you're
| | 00:08 | doing what you're doing.
| | 00:09 | In an earlier video I talked about Joomla!
| | 00:11 | as a Web application. Joomla!
| | 00:13 | needs a Web server, a programming
language and a database available so that
| | 00:17 | it can run correctly.
| | 00:18 | In this place we'll be looking at
Apache as our Web server, PHP as the
| | 00:23 | programming language and MySQL as the database.
| | 00:26 | Your local computer, that one sitting
right there in front of you does not have
| | 00:30 | this software installed on it.
| | 00:32 | So we'll have to install it
first before we install Joomla!
| | 00:36 | Take the first letter of Apache,
MySQL and PHP and that spells AMP.
| | 00:42 | You may have heard of LAMP before, with
L stands for Linux and Linux, Apache,
| | 00:47 | MySQL and PHP or LAMP is
frequently what is installed on a Web host.
| | 00:53 | In your case it's likely you're running
either Windows or Mac as your operating system.
| | 00:57 | Therefore for Windows we'll
install WAMP, which stands for Windows,
| | 01:01 | Apache, MySQL and PHP.
| | 01:04 | For the Mac people we'll install MAMP.
| | 01:07 | For instructions on how to install WAMP
and MAMP please refer to David Gassner's
| | 01:11 | video which will go
through those topics in detail.
| | 01:15 | Once the software is running, our
picture gets a little complicated.
| | 01:18 | Rather then having two computers
talking to each other, the client running the
| | 01:22 | Web browser and the server running Joomla!,
Apache, MySQL and PHP, we now have a
| | 01:28 | single computer which performs
both functions at the same time.
| | 01:32 | Hopefully this doesn't blow your mind.
| | 01:34 | Then, once either MAMP or WAMP are
running on your computer, we'll install Joomla!
| | 01:40 | And I will go through that with
you in upcoming videos. Once Joomla!
| | 01:44 | is in place, we can then
start building our website.
| | 01:47 | The other alternative, if you don't want
to run MAMP or WAMP on your computer is
| | 01:52 | for you to get some Web hosting, install Joomla!
| | 01:54 | on your web host and work there.
| | 01:56 | I'll cover the positives and negatives
of working locally on the computer in
| | 02:00 | front of you versus working
remotely on a Web host in the next video.
| | Collapse this transcript |
| Running Joomla! locally vs. running Joomla! on a web host| 00:00 | When working with Joomla!, some people
choose to build their websites locally and
| | 00:04 | then move those websites
to a Web host for launch.
| | 00:07 | Other people build the site directly on the
Web host. Which is best? Of course it depends.
| | 00:13 | Here are some guidelines in
choosing which works best for you.
| | 00:16 | When you run Joomla!
| | 00:17 | locally, there are few advantages.
| | 00:20 | First of all, no one sees the site
before you're done, so you can make as many
| | 00:24 | mistakes as you want, as often as you want.
| | 00:27 | There are no Web hosting fees until
you're ready to launch, so if the site
| | 00:31 | takes you many months to build
you're not paying Web hosting fees in the
| | 00:34 | process of building a website.
| | 00:36 | And of course, there's no Internet
involved with running the website, you can
| | 00:39 | run MAMP or WAMP on your local machine
without Internet access and that's really
| | 00:44 | handy, if you're working
remotely or if you're on an airplane.
| | 00:46 | However, there are several
disadvantages to running Joomla! locally as well.
| | 00:50 | First of all, no one sees
the site before you're done.
| | 00:53 | So, if you're going to wrong direction
your client can intervene earlier in the
| | 00:56 | process. It also means that any of your
collaborators, think about designers and
| | 01:01 | engineers, content specialists,
search engine optimization specialists, or
| | 01:05 | anybody else who needs to see this
website; they're not going to see it until
| | 01:09 | it's completely done unless they come
over and visit you in person and take a
| | 01:12 | look at your computer, so that
can be a real downside to this.
| | 01:15 | And finally, once you finish building
your website on your local computer, you
| | 01:19 | do have to move it to your Web host,
and then of course test to make sure that
| | 01:23 | the site transferred correctly.
| | 01:25 | I'll be covering how to transfer the
website from your local computer to your
| | 01:29 | Web host much later in this course,
but it is an extra step that you wouldn't
| | 01:33 | have to do if you built
directly on the Web host.
| | 01:36 | As far as advantages to running Joomla!
| | 01:37 | directly on the Web host and working
there; first of all, you don't have to
| | 01:41 | install MAMP or WAMP, you install Joomla!
| | 01:43 | one time and won't have
to move the website later.
| | 01:46 | Typically, your Web host is going to
give you a temporary website address, a
| | 01:51 | temporary URL, where you can go to see
the website and you have to know that
| | 01:55 | URL in order to view the website until you
transfer your domain name to point to the website.
| | 02:01 | You can also run Joomla!
| | 02:02 | in something called off-line mode,
which again I'll cover much later in
| | 02:06 | this particular course, which will
make sure that your site is hidden
| | 02:09 | behind a password, so that not just
anybody can see the website while it's
| | 02:13 | under construction.
| | 02:14 | A final advantage to running Joomla!
| | 02:16 | locally on your Web host is that your
client can see what you're doing while you
| | 02:19 | build the website, as can
all of your collaborators.
| | 02:22 | However there are several disadvantages
to running Joomla! on the Web host. First of
| | 02:26 | all you're going to pay for that hosting
while you're developing the website and
| | 02:30 | if you wind up with a six-month Web
development cycle, well, you're going to be
| | 02:33 | paying for hosting for six months while
the site is under construction, you run
| | 02:36 | the risk of someone seeing the site
before you're done who shouldn't see the
| | 02:40 | site, but if you do use the password
protection that I just talked about, that
| | 02:44 | will eliminate this problem for you.
| | 02:46 | Finally, you do have to have an
Internet connection to work on the website and
| | 02:50 | if that internet connection is slow or
non-existent, it's going to be really
| | 02:54 | painful try to get any work done at all.
| | 02:56 | So, what's best for you?
| | 02:57 | Well, if you're the only person
building a website and you're the only person
| | 03:01 | you have to make happy while you're
building that website, say you're building
| | 03:04 | a personal website,
| | 03:06 | building the site locally makes great sense.
| | 03:08 | If you only have a dial-up internet
connection, because you live in, oh I don't
| | 03:12 | know remote southern Vermont like many
of my friends, you might also want to
| | 03:16 | consider building your websites locally.
| | 03:18 | However, if you're going to have a
client and you're going to have people
| | 03:21 | helping you with this website, you might want
to consider building directly on a Web host.
| | 03:26 | Personally, I build all of my
websites on a Web host, because I am always,
| | 03:31 | always working with distant
collaborators and clients.
| | 03:34 | For the purposes of this training video
however, I will be building the website
| | 03:38 | locally. That way if you're following
along with me and with the exercise files,
| | 03:42 | we have standardized
everything as much as possible.
| | 03:45 | Web hosts are all different, so
it's hard to train you how to use this
| | 03:47 | specific Web host out there.
| | 03:50 | However, if you do follow along
with me using WAMP or MAMP, and use the
| | 03:55 | exercise files in this course,
everything is standardized, and you should come
| | 03:59 | out with exactly the same results that
I do here in the video, which is why we
| | 04:02 | offer exercise files.
| | 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:07 | There's more to consider in
a Web host than the price.
| | 00:09 | Here are some pointers for
picking out a good Web host.
| | 00:12 | First of all, make sure that
your Web host supports Joomla!'s
| | 00:16 | minimum requirements.
| | 00:17 | Here is the Requirements are
posted here on Joomla!'s website.
| | 00:20 | And you'll see here that these are
listed for Joomla! 2.5, 1.7 and 1.6.
| | 00:26 | The recommended level of PHP support
is 5.3, the absolute minimum is 5.2.4.
| | 00:31 | But if you compare that with Joomla! 1.5,
which is just below there, you'll
| | 00:36 | see that these requirements are
significantly higher than what you
| | 00:40 | previously had with Joomla! 1.5.
| | 00:42 | So if you're using hosting previously
with your Joomla! 1.5 site, you will want
| | 00:46 | to double check those requirements to
make sure that Joomla! 2.5 will be able to
| | 00:51 | run on exactly the same Web host.
| | 00:53 | Second, be very, very sure that
your host provides great backups.
| | 00:58 | Most hosts do backups, but sometimes
those backups are only available to
| | 01:03 | the hosting provider.
| | 01:04 | They are made in case the server
catches fire, gets flooded or has some other
| | 01:08 | catastrophic failure.
| | 01:09 | These kinds of backups may not be
available to you if your site is hacked, or if
| | 01:14 | you do something wrong or something
terrible, and your website went up crashing.
| | 01:19 | If there are backups available to you,
find out how often they are made and how
| | 01:23 | long it takes to restore from backup.
| | 01:25 | Ideally, a daily backup and
a weekly backup will be made.
| | 01:29 | The daily backup is a backup of the
previous day's site. The weekly backup is
| | 01:33 | made once a week, usually on a Sunday
and it's held for a week in case the
| | 01:37 | daily backup fails.
| | 01:39 | Finally, be sure to ask how long it
takes to restore from backup if required.
| | 01:43 | Some hosts can take days, during which
your site is down or completely broken
| | 01:48 | and ideally you want to have very
fast response on that, when you do need
| | 01:52 | restoration from backup.
| | 01:53 | Joomla! offers a listing of people who
support Joomla! according to some basic
| | 01:59 | tests that have been run on those
particular Web hosts, I'm looking at
| | 02:02 | resources.joomla.org and on this
particular Joomla! site, you can take a look at
| | 02:09 | various hosting providers that are recommended.
| | 02:11 | Rochen, which is the first one
featured here, is the official Web host for
| | 02:14 | joomla.org and they make backups twice a day.
| | 02:18 | They hold those backups for some time and
you'll always have backups available to
| | 02:22 | restore your website.
| | 02:23 | The staff knows quite a bit about
Joomla! and they actively support Joomla! 2.5.
| | 02:28 | This is where I'm hosting all of
the websites for my company 4Web Inc.
| | 02:31 | and I strongly recommend Rochen.
| | 02:34 | But, there are many other hosting
companies that are listed here, 27 results as
| | 02:38 | of the time of this recording, and you
are welcome to work with any of these.
| | 02:42 | They should work just fine with Joomla!,
| | 02:44 | so if you need recommendations, go to
resources.joomla.org and take a look for
| | 02:49 | the Web hosting providers, for
recommendations, for hosts that will support
| | 02:53 | Joomla! very well for you.
| | Collapse this transcript |
| Installing Joomla! 2.5| 00:00 | Finally, the moment we've all been waiting for.
| | 00:02 | It's time to install Joomla!.
| | 00:04 | I'm going to do this on my computer
using WAMP, but if you're on a Mac, you
| | 00:09 | will need to use MAMP.
| | 00:10 | The first thing you need to is
install WAMP on your Windows computer and in
| | 00:14 | order to do that, I recommend you
take a look at David Gassner's video,
| | 00:18 | Installing Apache MySQL and PHP,
which is right here on the lynda.com
| | 00:22 | website. Scroll on down to the
third chapter, where it says Installing
| | 00:26 | WampServer on Windows.
| | 00:28 | And that will show you how to
install WampServer on your computer.
| | 00:31 | Once you're done with that, you should
be able to go directly to local host.
| | 00:35 | You'll see up here on the top, I have
typed in the word localhost and you should
| | 00:39 | see a Server Configuration page
looks something similar to this.
| | 00:43 | If you've gotten this far, then you're in
great shape, you are exactly where you need to be.
| | 00:47 | So the next step is now to install
Joomla! and the first thing in that process is
| | 00:51 | to go download the latest version of Joomla!.
| | 00:53 | So, I am going to go to joomla.org
and this is the Homepage of Joomla! here.
| | 00:59 | And we're going to go download the most
recent version of Joomla! that's available.
| | 01:03 | As of time of this
recording, this is Joomla! 2.5.1.
| | 01:07 | It's possible that when you're watching
this video, there will be a much later
| | 01:11 | version of Joomla! released.
| | 01:12 | You should download whatever the
latest version of Joomla! 2.5 happens to be
| | 01:17 | and you can get there by clicking on this
Download button right here on the Joomla! website.
| | 01:21 | So when I click on that, I am going to
come to a page that will show me the most
| | 01:25 | recent full package of the
software that's available.
| | 01:28 | And you can see right here that
it says where 2.5.1 Full Package.
| | 01:33 | There's a Zip file we can download.
| | 01:34 | I am going to go ahead and click that
link and I am going to save this file
| | 01:37 | down, which will take just a
second, and that's gone ahead and opened.
| | 01:42 | I am going to minimize my browser
window here, and I am going to go to my
| | 01:46 | Windows menu and I'm going to go to My Computer.
| | 01:49 | I am going to go to my C: Drive.
| | 01:51 | And from my C: Drive
| | 01:52 | where I have installed WAMP
I have a folder here called WAMP.
| | 01:56 | Inside of that folder I
have another folder called www.
| | 02:00 | And in here there is probably two files
from when you installed WAMP initially.
| | 02:04 | You can go ahead and delete those,
just highlight them and hit Delete.
| | 02:07 | You don't need them.
| | 02:09 | And from here we are going to copy in
all of our Joomla! files and folders.
| | 02:14 | So what I am going to is from my
Downloads here I am going to open up the Zip
| | 02:17 | file, and I'm going to simply highlight
everything here, holding down my Shift
| | 02:22 | key and clicking to highlight everything.
| | 02:24 | And then I am going to drag
that all into my www folder here.
| | 02:28 | And it will take a few minutes for
this to unpack and decompress directly
| | 02:32 | into this www folder.
| | 02:34 | Meanwhile while that's happening, back here in
Firefox and I am going to open up phpMyAdmin.
| | 02:40 | And to get there, all I have to do
is type in localhosts/phpmyadmin.
| | 02:44 | phpMyAdmin is a program that allows me
to interface with MySQL database that is
| | 02:51 | running as part of my WAMP installation.
| | 02:54 | And this is a fairly recent version.
| | 02:56 | The interface here looks different
than what I've seen before, so if you're
| | 02:59 | running some other version of WAMP or
if you're working with a Web host, your
| | 03:03 | screen may also look slightly different.
| | 03:05 | The only thing I needed to do here in
phpMyAdmin is to create a new database.
| | 03:09 | So in order to do that, I'm going to go
here to Databases which is located right
| | 03:14 | here on the top of the page.
| | 03:15 | And you will notice this spot here
where it says I can create a new database.
| | 03:18 | I am going to enter the name joomla25 as
in Joomla! 2.5, that's going to the name
| | 03:23 | of my database, and I am going to say Create.
| | 03:25 | It will report that that database was
created and you'll see it listed over here
| | 03:29 | on the left side of the screen as well.
| | 03:32 | That's all we need to do with phpMyAdmin.
| | 03:34 | Okay, so now, if I take a look at my
folder, my zip has completely unzipped and
| | 03:39 | I have all of my files available to me here.
| | 03:41 | So, now I have all the files associated
with Joomla! and I have a blank database.
| | 03:46 | Now it's time to connect
the two together. So do that.
| | 03:48 | Right here in my Web browser, I am
just going to go to plain old localhost.
| | 03:52 | And by going to localhost this will
redirect me directly into the installation
| | 03:57 | folder and I can go forward from here.
| | 03:59 | So I'm located in the United States.
| | 04:00 | I am going to go ahead and choose my
languages English (United States) right
| | 04:05 | here from the main screen, say Next.
| | 04:07 | This is going to report to me what
types of versions of PHP are running and
| | 04:12 | whether there are any issues or
problems with installing Joomla! here in this
| | 04:15 | particular environment.
| | 04:17 | You'll notice that under the
Recommended settings there's a couple of things
| | 04:20 | that are changed from the Recommended
settings, but again, since that's the
| | 04:24 | Recommended settings portion of the
screen, it's not as important that the
| | 04:28 | recommendations match up with the actual.
| | 04:30 | What's important is the top part of the screen.
| | 04:32 | If you have any No's showing up here
in the Pre-Installation Check, that is a
| | 04:38 | problem and you're probably
not running in a good environment.
| | 04:41 | If you're running in WAMP or MAMP you
shouldn't see those issues, the only
| | 04:44 | place you might see that is if you're
trying to run on a Web server, a Web
| | 04:47 | hosting environment.
| | 04:48 | Okay, I am going to go ahead and hit Next.
| | 04:50 | These are the terms of agreement here
under the GPL and we will agree to those.
| | 04:56 | Then I am going to enter some
information about our database.
| | 04:58 | So you can leave everything pretty
much the way it is, the Database Type, the
| | 05:03 | Host Name is correct, my Username is
going to be root, R-O-O-T, and there is no
| | 05:08 | Password with WAMP so you can leave that blank.
| | 05:10 | The Database Name is the
database name we just created, joomla25.
| | 05:15 | And the Table Prefix, this is what
happens in the database when it's created,
| | 05:19 | every table in the database will be
prefaced with this little bit of a prefix.
| | 05:23 | The prefix is generated randomly and
yours will be definitely different than mine.
| | 05:28 | And don't worry about that.
| | 05:29 | It's supposed to be randomly generated and
it helps with security of your Joomla site.
| | 05:34 | So whatever it is, just go ahead and leave that.
| | 05:36 | You can go ahead and hit the Next button.
| | 05:38 | And on the next screen you
have your FTP Configuration.
| | 05:42 | FTP is the way that Joomla! used to use
to get some files to transfer such as an
| | 05:48 | image upload, so forth, into it's system.
| | 05:51 | In general, you're not going to ever
have to configure FTP here with Joomla!.
| | 05:55 | Alright, it can potentially be a
security issue, and if you want to be a good
| | 05:59 | Web host, this isn't going to necessary at all.
| | 06:01 | So as it says on the top Optional-
Most Users Can Skip This Step, most
| | 06:05 | assuredly, we can skip this step as well.
| | 06:07 | Go ahead and hit the Next
button and now we are on the Main
| | 06:10 | Configuration screen.
| | 06:11 | So, we can give this a site name, SAMOCHA.
| | 06:14 | You can go ahead and enter Your
Email address, info@samocha.org.
| | 06:19 | Then you are going to be asked for
Administrator, Username and Password.
| | 06:22 | And I'm going to break some
terrible rules here right now.
| | 06:26 | I'm going to leave my Admin Username as
admin and I'm going to make my Password admin.
| | 06:31 | And I am going to confirm that password.
| | 06:33 | The only reason why I've left this as
admin, as the username and the admin as
| | 06:36 | the password is because I'm running
this website locally right here on the
| | 06:40 | computer in front of me.
| | 06:41 | As you know, if you've ever watched
Ken Crowder's Joomla! Security video, you
| | 06:45 | know that you should never enter admin
as a username and admin as a password.
| | 06:49 | You might as well hang out to sign
that says, hack my Joomla! site please.
| | 06:53 | And so you always want to be sure to
put in a username and password that's
| | 06:57 | not guessable and you know all of
these rules for good passwords, you know
| | 07:01 | eight characters, use numbers, use
funny symbols, use upper and lower case
| | 07:06 | letters, that kind of thing.
| | 07:07 | The rule that I would add to this is to
never have a username of admin either.
| | 07:11 | And that's because for many years,
admin was the default username for all of
| | 07:15 | your Joomla! installations and you
couldn't customize it as part of installation.
| | 07:19 | So, what I would like for you to do is to
make sure that you change that on your site.
| | 07:23 | However, I am setting this up as
exercise files for you to follow along with,
| | 07:27 | and I want to be sure that you have
something that's easy to remember, so that
| | 07:31 | you are able to get into
my website and follow along.
| | 07:34 | So I am using admin as the
username and admin as the password.
| | 07:37 | The last step here you'll see that there is
the possibility of installing sample data.
| | 07:41 | Sample data is not required to run your
Joomla! website and in fact we will not install it.
| | 07:46 | We are going to create all of our own content.
| | 07:48 | If you are unfamiliar with Joomla! and
you're figuring it out for the first
| | 07:51 | time, the sample data has lots of great
information about Joomla! and how to configure it.
| | 07:56 | It's got some articles and menu items
and modules and things that you can mess
| | 08:01 | around with and get a
sense for how Joomla! works.
| | 08:03 | But, it's really not
necessary in this particular case.
| | 08:06 | I am going to give you all the sample
data you need in the form of exercise files.
| | 08:10 | Go ahead and hit the Next button to continue.
| | 08:12 | And here in the very last screen you
all see that we've installed Joomla! and
| | 08:16 | there's one step to go, and that is
to remove the installation folder.
| | 08:19 | And knowing Joomla! 1.7 and now in 2.5
as well, we actually have a button to let
| | 08:24 | us do that so easily, which is just great.
| | 08:26 | Go ahead and hit the button to Remove
the Installation Folder and it's gone.
| | 08:31 | And at this point, we can go to either
the front-end of the website or to the
| | 08:35 | Administrator screen.
| | 08:36 | So if I click the button to go to the
front-end of the website, this is going to
| | 08:40 | take me just to the localhost address.
| | 08:42 | You see up here in the website address bar.
| | 08:45 | And you'll see there's not a whole
lot on this website, because we just
| | 08:48 | installed Joomla! and
there's just not much there.
| | 08:50 | If I go to localhost/administrator we
will get the Login screen to login to
| | 08:56 | the backside of Joomla!.
| | 08:58 | One final piece of advice.
| | 09:00 | In order to create this Joomla! website,
you have now tracked usernames and
| | 09:04 | passwords for, one your domain name
registration, when you registered the domain
| | 09:08 | name for this website.
| | 09:09 | Two, you have Web hosting FTP and
control panel information and you may
| | 09:13 | even have a login for some kind of trouble
ticket system associated with your Web host.
| | 09:18 | You have some kind of username and
password for your database and you have a
| | 09:21 | username and password now for your
first account to login to the backend of
| | 09:25 | your Joomla! website.
| | 09:26 | That is a whole lot of usernames and
passwords to remember for one website.
| | 09:31 | And if you're going to build a bunch
of Joomla websites going forward, that
| | 09:35 | problem just gets more and more complicated.
| | 09:37 | As a Web professional, you should have
some way of storing all of your usernames
| | 09:41 | and passwords in a secure way.
| | 09:44 | There are online repositories for doing
this as well as systems that run on your
| | 09:48 | individual computer, if you don't
have to share logins with anyone.
| | 09:51 | Be sure to look into one of these
systems and find one that works for you.
| | 09:55 | They're available for Mac, for PC, they
are platform agnostic, they are online,
| | 09:59 | they are unique to a given computer,
so you have lots and lots of choices to
| | 10:03 | find one that works for you.
| | 10:05 | And of course they're free and paid as well.
| | 10:06 | By the way, if you have a Word document
where you have listed all your usernames
| | 10:10 | and passwords, or you store your
usernames and passwords on a sticky note
| | 10:14 | underneath your keyboard, that's not security.
| | 10:17 | Be a professional, go find a
professional password management system, you will
| | 10:21 | be so grateful later by the time you
have built many, many Joomla! sites that you
| | 10:25 | have this great system in
place to track that information.
| | Collapse this transcript |
| Restoring the site from a backup (the jump-in files)| 00:00 | At the start of each chapter in
this video you'll find jump in files.
| | 00:05 | This is a zipped file, as
well as an SQL database dump.
| | 00:09 | And the idea behind these is if you
get stuck somewhere along the way in a
| | 00:13 | chapter or if you'd like to just jump
in to this video at a specific point in
| | 00:18 | time, skipping over some other parts,
you have a site available to you that's
| | 00:23 | current to that moment at the start of
the chapter that you can install on your
| | 00:27 | local computer and work with.
| | 00:29 | You do not need to use these
jump in files for every chapter.
| | 00:34 | You don't need to go through and follow
along with me the whole way through the
| | 00:37 | course and then erase your
work and install a jump in file.
| | 00:40 | They're only there really for emergency or
in case you're skipping around a little bit.
| | 00:45 | My expectation is that you'll be
following along in this course from start to finish.
| | 00:49 | So the first thing we need to do is make
space for our jump in files to be installed.
| | 00:53 | So I'm going to go to My Computer, to my
C drive, to the wamp folder, and to www.
| | 01:00 | Mac people you're going to go into your
MAMP area, you're going to go into your
| | 01:06 | htdocs folder, and you should
see something very similar to this.
| | 01:09 | What you're going to do
now is make a new folder.
| | 01:12 | So I'm going to make a new folder and
I'm going to give it a name of jumpin.
| | 01:16 | And the reason why I've made a
folder here inside of my www site or my
| | 01:21 | htdocs site is because this will
give you the ability to have multiple
| | 01:25 | instances of Joomla!
| | 01:26 | running on your local computer.
| | 01:28 | I'm going to double-click on the
jumpin folder and from my Exercise Files, in
| | 01:32 | Chapter 1, #05, I'm going to open up
joomla25_files by double-clicking on it,
| | 01:40 | and I'm going to highlight everything
that's inside of that zipped file, and I'm
| | 01:44 | going to drag it into my jumpin folder.
| | 01:46 | And this will decompress,
this will take a minute.
| | 01:51 | Okay, so now all of our files are in
place here inside of our jumpin folder.
| | 01:55 | The next thing I want to do is, close
this window here, I'm going to open up my
| | 02:00 | Web browser and I'm going to
go to localhost/phpmyadmin.
| | 02:05 | Mac people, if you go to your MAMP
control panel and click on the link for
| | 02:09 | phpMyAdmin this should
take you to the same place.
| | 02:12 | Now what I'm going to do is make a new database.
| | 02:14 | So I'm going to do that by clicking on
the databases item here, and I'm going to
| | 02:19 | enter a name for my new database.
| | 02:21 | I'm going to call it jumpin and I'm
going to say Create, so this will tell me
| | 02:24 | that the Database of jumpin has been created.
| | 02:27 | When I click on the database over here
on the left side of the screen, I can now
| | 02:30 | import my database file.
| | 02:32 | So I'm going to browse for my Exercise
Files which are on my Desktop in Chapter
| | 02:37 | 1, in folder 05, the SQL file there.
| | 02:41 | And I'm just going to tell it, leave all
the settings set to default, and say Go, and
| | 02:45 | this will import my database into Joomla!.
| | 02:48 | So if all goes well you should see a
whole bunch of stuff show up on the
| | 02:52 | left side of the screen.
| | 02:53 | The last thing I need to do is
back in my files here, I need to edit
| | 02:57 | configuration.php, and you can use any
kind of editor to edit this particular file.
| | 03:03 | You can use Dreamweaver, you can
use TextMate, or TextPad, or Notepad,
| | 03:09 | whatever works for you.
| | 03:10 | I'm going to actually open it with WordPad and
we're going to update a couple of things here.
| | 03:16 | So where it says the database,
we're going to change that to jumpin.
| | 03:20 | For our WAMP users the username for the
database is root and the password is blank.
| | 03:25 | If you're on a Mac, that username is
root and the password is root, so you may
| | 03:30 | need to change this.
| | 03:32 | Okay, so go ahead and Save
and you can close that WordPad.
| | 03:36 | Now when you go back to your computer
you should be able to go localhost/jumpin
| | 03:43 | and you should see the
state of the current website.
| | 03:45 | It should come right on up for you.
| | 03:46 | So that's the way you can use jump in
files to bring you up to speed at whatever
| | 03:51 | point you're in during the course.
| | 03:53 | Again they're not required; you
certainly don't have to install any of them.
| | 03:56 | If you follow along with the videos with
me and you go in order, you'll discover
| | 04:00 | that you really don't
need the jump in files at all.
| | Collapse this transcript |
|
|
2. A General Overview of Joomla!A quick tour of the Joomla! interface | 00:01 | So now that we've got WAMP
installed, we've got Joomla!
| | 00:04 | installed, that's great thing.
| | 00:05 | Let's login to Joomla!
| | 00:06 | and take a look at the administrative
interface and see what we can find there.
| | 00:10 | So I am currently at localhost/administrator
for those of you who are on PCs
| | 00:16 | running WAMP, and for those of
you running MAMP you might be at
| | 00:19 | localhost:8888/administrator.
| | 00:20 | We're going to go ahead and login to the
website using the username and password
| | 00:28 | that you've created as part
of your installation process.
| | 00:31 | Mine is admin for the username and
admin for the password, and I'm going to go
| | 00:36 | ahead and tell Firefox to remember that
for me because I'll be using it quite a
| | 00:39 | bit over the course of this particular video.
| | 00:41 | So now that we're logged into Joomla!
| | 00:43 | we're taking a look at
Joomla!'s Control Panel here.
| | 00:46 | This gives us access to all of the
aspects of the backend of Joomla!'s
| | 00:50 | administrator interface.
| | 00:51 | A few things that you
should notice right off the bat;
| | 00:54 | Down at the bottom of the screen,
roughly in the center is the version of Joomla!
| | 00:58 | that you're currently running, which is Joomla! 2.5.1
| | 00:59 | in the case of my particular installation.
| | 01:04 | You may have a different number and it
should tell you exactly which version of Joomla!
| | 01:07 | you're running.
| | 01:08 | The other place you can go to
find out what version of Joomla!
| | 01:10 | you're running as well as any other
versions of software like PHP or MySQL is if
| | 01:15 | you go to Site>System Information, and
if you click that, you'll get a window
| | 01:21 | that will give you all of the
information about exactly which Joomla!
| | 01:24 | version you're running and
information about PHP and so forth.
| | 01:29 | So this is a great window,
if for some reason Joomla!
| | 01:32 | ever discontinues the version number at
the bottom of the screen, you can always
| | 01:36 | go to this screen to find this information.
| | 01:38 | Okay, I'm going to go back to the
Control Panel, back to Site>Control Panel,
| | 01:41 | gets me back to the big icons.
| | 01:43 | All of the icons that you see here are
duplicated somewhere in Joomla!'s menu
| | 01:47 | structure, and Joomla!'s menu structure
goes here across the top of the page.
| | 01:51 | I'm going to tell you a little bit about
what you can find on each of the menus.
| | 01:54 | So on the Site menu you have a link
back to the Control Panel, a link to your
| | 01:58 | individual profile, meaning that your
information as a user in the Joomla!
| | 02:02 | system, in this case the user of admin.
| | 02:05 | The Global Configuration is a place
you can go to configure some big global
| | 02:09 | variables for the website, such as
whether it's running in off-line mode,
| | 02:12 | information about search engine
friendly URLs, information about global meta
| | 02:16 | tags and metadata for the site, as well as
some big permissions which I covered in
| | 02:21 | Joomla! 1.7 Access Control Lists.
| | 02:24 | The Maintenance item here covers
checking in some information back into Joomla!
| | 02:29 | Things that might have gotten checked
out and are unable to be used, can be
| | 02:32 | checked back in using the global check-in.
| | 02:34 | There is also a cache here
that you can clear, quite easily.
| | 02:37 | I'll cover these much later in the course.
| | 02:39 | Under the Users tab you'll see that we
have a User Manager, Groups, and Access Levels.
| | 02:45 | I covered these extensively in Joomla! 1.7
| | 02:46 | Access Control Lists and I'll cover
them in a later chapter in the course
| | 02:52 | as to how they work.
| | 02:53 | User Notes is a new feature in Joomla! 2.5
| | 02:55 | and this will allow you
to do exactly what it suggests.
| | 02:59 | You can leave a note about specific
users and any information that you'd like to
| | 03:03 | associate with a specific user here.
| | 03:05 | That could be helpful for example, if
you've created some dummy logins for
| | 03:09 | testing, you can make a note about what
those dummy logins are and what kinds of
| | 03:14 | information they should be able to access.
| | 03:16 | Mass Mail Users does exactly what you'd expect.
| | 03:18 | It sends a mass email to all of
the users of your Joomla! site.
| | 03:22 | Warning, this is not a substitute
for e-mail marketing, for services like
| | 03:27 | MailChimp or Constant
Contact or Vertical Response.
| | 03:31 | Mass Mail Users is a great way to
get in touch with a handful people very
| | 03:34 | quickly but you don't want to get your Joomla!
| | 03:37 | Webhost tagged as a spam machine which
is very easy to do if you start sending
| | 03:42 | out lots of emails from your Joomla! website.
| | 03:44 | So if you're going to use Mass
Mail Users, use it with caution.
| | 03:48 | Menu does exactly what you would expect;
| | 03:51 | this is where you can attach pieces of
content to the menus for your website.
| | 03:55 | The Content menu is where you can
find information and the ability to
| | 03:59 | create articles for your website as well as
categories, which I'll cover in great detail,
| | 04:03 | feature some of those articles so that
they show on the Homepage of your website
| | 04:07 | as well as the Media Manager which is
where you can upload things like PDFs or
| | 04:11 | images for your website.
| | 04:12 | The Components menu contains all kinds
of little programs that run within Joomla!
| | 04:17 | some of which I'm going to cover in
some later videos. New in Joomla! 2.5
| | 04:19 | is the ability for Smart Search,
which I will cover in a separate video
| | 04:25 | what that all means.
| | 04:26 | The Redirect component was new in Joomla! 1.6
| | 04:28 | and that helps to manage
particularly helpful in website redesigns where you
| | 04:33 | have old URLs that need to map to
in page on the new Joomla! website.
| | 04:37 | Those of you who are familiar with Joomla! 1.5
| | 04:38 | will notice that the Polls
component is missing in Joomla! 2.5.
| | 04:42 | That was dropped as something that Joomla!
| | 04:45 | would carry as a feature.
| | 04:47 | The Extensions menu is where you can
find the information about modules for your
| | 04:52 | website, these are little bits of
functionality that generally run in the left
| | 04:56 | or the right column of a
website or header or footer.
| | 04:59 | Plug-ins as well as templates, which of
course change the look of your website,
| | 05:03 | and the Language Manager, which I'm
going to cover in detail in an entire
| | 05:06 | chapter. You can run as
many languages in your Joomla!
| | 05:09 | website as you wish.
| | 05:10 | We're going to be building a
website that's in both English and French.
| | 05:13 | The Extension Manager is where you
can go to manage extensions including
| | 05:17 | installing and uninstalling extensions,
as well as managing the most recent
| | 05:21 | version of your Joomla!
| | 05:22 | Installation, as well as some of
the versioning for extensions, if your
| | 05:28 | extensions have been hooked
up to use Joomla!'s system.
| | 05:30 | And again I'm going to cover all
of that much later in the course.
| | 05:33 | Finally, we have a very helpful Help menu.
| | 05:36 | Joomla! Help is available throughout the website.
| | 05:39 | So if you just simply go to the Joomla!
Help here, this will put you into screen
| | 05:43 | which will give you all of the help
that is available to you here within
| | 05:46 | Joomla!, you can see that there is a
Table of Contents over here on the left
| | 05:49 | side of the screen and on the right
side of the screen is the information that
| | 05:52 | corresponds to that.
| | 05:54 | Help is also available contextually, so
if for example, I go to the Content menu
| | 05:58 | and to the Article Manager, I have
the option for help over here as well.
| | 06:02 | If I click on the Help within one of
these specific items, I'll get some
| | 06:06 | information that pertains
specifically to this part of the Joomla!
| | 06:10 | administrator interface.
| | 06:12 | Also on the Help menu is the ability
to go to the Official Joomla!'s Support
| | 06:15 | Forum, which is at forum.joomla.org.
| | 06:18 | You can go here and post any of your
questions, and volunteers from around the
| | 06:22 | world will be happy to answer them.
| | 06:23 | My friend Ken Crowder has often said the
way he learned in Joomla! was to try to
| | 06:28 | answer two questions for every question he
asked, and that's how he got so good at Joomla!
| | 06:32 | so fast.
| | 06:32 | I recommend that you do the same thing.
| | 06:34 | Contribute back to the Joomla!
| | 06:35 | project by answering questions on the forum,
it's a great way to help out. The Joomla!
| | 06:39 | Documentation is in the form of a Wiki
which is at docs.Joomla.org, and you can
| | 06:45 | go here to look up information
about the latest version of Joomla!
| | 06:48 | And since it's a Wiki, you can also edit any
of the information there that you might find.
| | 06:53 | Finally, there's some useful Joomla!
| | 06:54 | links that are available to you
including the Joomla! Extensions directory which
| | 06:58 | I'm going to cover later in the course.
| | 07:00 | Links to Translations for
Joomla!, there is something like 45
| | 07:04 | languages available.
| | 07:06 | The Joomla! Resources directory which
I mentioned in an earlier video.
| | 07:09 | That's where you can go find help with
hosting or consulting with Joomla!
| | 07:13 | other types of resources.
| | 07:15 | The Community Portal will get you
up-to-date with all the latest Joomla!
| | 07:18 | events and Joomla! blog
posts from around the world.
| | 07:22 | The security Center
focuses on Joomla!'s security.
| | 07:24 | Developer Resources are largely
oriented towards developers, but not entirely.
| | 07:29 | Most of the information about Joomla!'s
release cycle and when you can expect the
| | 07:32 | next version of Joomla!
| | 07:33 | to come out will be located in the Joomla!
| | 07:35 | Developer Resources site.
| | 07:37 | And finally the Joomla! shop where
you can go and purchase all of the
| | 07:40 | fabulous T-shirts and Joomla!
| | 07:41 | paraphernalia you can stand.
| | 07:43 | Now that you have a sense for where
everything is here in the back end of
| | 07:47 | Joomla!, I would like to go ahead and
get started with building our Joomla!
| | 07:51 | website.
| | Collapse this transcript |
| Modifying the Global Configuration | 00:00 | The Global Configuration is the place
where we set the major configuration
| | 00:04 | elements of the website.
| | 00:05 | Let's take a look at the Global Configuration.
| | 00:08 | There are two ways you can get to it.
| | 00:09 | You can either go through this icon,
located right here on the Control Panel in
| | 00:13 | the back end of Joomla!.
| | 00:14 | There is the screen you
get as soon as you log in.
| | 00:16 | Remember we logged in using the
username of admin and the password of admin.
| | 00:21 | This icon will take you to the Global
Configuration or alternatively you can go
| | 00:25 | to Site> Global Configuration, either
one takes you to the same place and here
| | 00:29 | is the Global Configuration screen.
| | 00:31 | This is where you set some fairly
major settings for the whole website.
| | 00:35 | So we're going to set a few
of these things up right now.
| | 00:37 | First of all, starting on the left side
of the screen, you'll see the Site Name.
| | 00:40 | The Site Name was configured as
part of Joomla!'s installation process.
| | 00:44 | But this is where you can go to change
that Site Name to anything else that you like.
| | 00:48 | The next four items: Site Offline,
Offline Message, Custom Message and Offline
| | 00:53 | Image all have to do with taking
your site offline. Which in Joomla!
| | 00:56 | means that you're going to hide your
entire site behind a username and password.
| | 01:01 | This is great if you
happen to be building a Joomla!
| | 01:03 | website on a Web server and you want
to be sure that nobody can see that
| | 01:07 | information, until the site is complete.
| | 01:10 | I'm going to walk you through how to
use the Site Offline configuration options
| | 01:15 | in several chapters from now.
| | 01:17 | The Default Editor setting, here has to do
with the editor that's used inside of Joomla!
| | 01:22 | and the editor is a box where you
can type in information and format that
| | 01:27 | information accordingly, with Bolds
and Italics and Links and so forth.
| | 01:31 | That editor is located in things like
the Article Manager, the Category Manager
| | 01:35 | or Custom HTML Module and
many other places in Joomla!.
| | 01:39 | By default this is using TinyMCE, and
that can be swapped out for another editor.
| | 01:44 | We will swap it out for JCE in a later video.
| | 01:47 | Default Captcha is something
that's new in Joomla! 2.5.
| | 01:51 | Captcha is that system that you can
use to type in funny characters, that are
| | 01:55 | very hard for machines to read, but
less difficult for humans to read and this
| | 02:00 | will help keep robots and spammers
from sending you contact forms, and for
| | 02:04 | registering for your website.
| | 02:06 | So Captcha is a wonderful setting
that will reduce a lot of the work in the
| | 02:10 | funky e-mails you wind up getting from your
contact form from various kinds of spammers,
| | 02:14 | speaking from experience. The
Default Access Level has to do with ACL
| | 02:19 | access control lists.
| | 02:20 | I covered this extensively in Joomla! 1.7
| | 02:22 | ACL here at Lynda.com.
| | 02:25 | By default, that Access Level is set
to Public, in other words all of the
| | 02:29 | content that you're going
to create on your Joomla!
| | 02:31 | website by default is visible by the
public and that's probably really the way
| | 02:35 | you want to just leave it, unless you
happen to be building an intranet, and
| | 02:39 | everything is hidden behind a password.
| | 02:41 | That might be a situation in
which you want to change that.
| | 02:43 | Down at the bottom of the page, we
have some Global Settings for Metadata
| | 02:47 | including a Meta Description and Meta
Keywords and these are the default meta
| | 02:52 | information that will show up on every
page of the website unless you choose
| | 02:55 | to overwrite it on an article by article
bases, or within menu items inside of Joomla! 2.5.
| | 03:00 | I'll cover exactly how that works
later on, but for now let's fill in our
| | 03:04 | default information.
| | 03:06 | Inside of your Exercise Files folder,
inside of Chapter 2, inside of 02_02,
| | 03:12 | you'll find a text file called metainfo
and you'll see that we have our keywords
| | 03:17 | here on top of the page.
| | 03:18 | If you just go ahead and select them,
by clicking and dragging and saying Edit>
| | 03:21 | Copy, and then we can go into Joomla!
| | 03:25 | here and under Site Meta Keywords, I'm
going to right-click on this and say Paste.
| | 03:30 | You can also use Ctrl+ or
Command+V to paste in that text.
| | 03:34 | I'm going to go back to my Notepad
document here, and for the description once
| | 03:38 | again I'm going to highlight the text
that's here and you can say Ctrl+ or
| | 03:41 | Command+C to copy or Edit> Copy and
here inside of the Meta Description I'm
| | 03:48 | going to right-click and pick Paste.
| | 03:50 | You can also do Ctrl+ or Command+V to paste
that information into the Meta Description.
| | 03:55 | So now this information will show up
on every page of the website, unless we
| | 03:59 | overwrite it specifically.
| | 04:00 | The Robots item down here in the
bottom indicates that Robots, such as the
| | 04:05 | Google Spider, who might be visiting
your website to index it for search
| | 04:09 | engines, should index all of the pages on your
website and follow links that are located there.
| | 04:15 | There are some other options that are
available in terms of Index or No index,
| | 04:19 | Follow or No follow, in various
combinations, you can look online for
| | 04:22 | information about how these different
settings vary, and why you might choose to use them.
| | 04:27 | But in general, for a search engine
purposes, if you have a public website and
| | 04:30 | you want people to find information
about you in the search engines, you should
| | 04:34 | leave this set to Index and Follow.
| | 04:36 | Okay scrolling back on up here to the
top, under our Search Engine Optimization
| | 04:40 | Settings or SEO Settings.
| | 04:42 | This is where you can turn on
information about search engine friendly URLs and
| | 04:46 | some other information here, in terms of
configuring those URLs in your browser.
| | 04:50 | The last item is Including Site Name in
Page Titles and this has to do with the
| | 04:55 | front end of our website which
I've opened up in a new tab here.
| | 04:58 | You'll see that up here at the very
top of the page, my tab says Home.
| | 05:02 | It doesn't tell me what
website I am on. It just says Home.
| | 05:05 | It's picking up the word Home from the
main content here on the website, which
| | 05:09 | is the Home page, which has no content
but it does at this point have a menu
| | 05:14 | link and that's not terribly helpful in
terms of Bookmarking and it's certainly
| | 05:18 | not helpful in terms of
Search Engine Optimization.
| | 05:20 | So, one of the things that you can make
this information a bit more helpful to
| | 05:24 | the search engines is to turn on
the Site Name in your Page Titles.
| | 05:28 | The Site Name comes from the Site Name
setting over here on the left side of
| | 05:32 | the screen and you can include that Site Name
before or after the page title on your page.
| | 05:37 | So I'm going to go ahead and set it
Before, and then I'm going to hit the Save
| | 05:40 | button up here in the upper right,
and when I do that and I hit the Refresh
| | 05:44 | button on the front end on my website
you'll see that my HTML browser page title
| | 05:49 | is now changed to SAMOCA-Home.
| | 05:51 | This is great for bookmarking.
| | 05:53 | It's also a good way of putting site
identification in your HTML title tags
| | 05:57 | which will help with search engine optimization.
| | 05:59 | I'll talk more about this in some later videos.
| | 06:01 | But this is one of the things that
you should definitely enable in your
| | 06:04 | Global Configuration.
| | 06:06 | The other tabs that are here located
inside of the Global Configuration include
| | 06:10 | the System and the Server tabs which are
full of all kinds a geeky settings that
| | 06:13 | you should probably not touch.
| | 06:15 | So just skip over those, and leave
those for your engineer to deal with.
| | 06:18 | The Permissions tab has to do with
ACL, again that access control lists.
| | 06:23 | For your website I cover
this extensively in Joomla! 1.7
| | 06:25 | Access Control Lists, available here at
Lynda.com and finally the Text Filters tab.
| | 06:31 | This is a new location for this information.
| | 06:34 | It has always been available in your
Article Manager, inside of the options
| | 06:38 | where you can set Text Filtering there.
| | 06:40 | I'm going to cover this
particular tab in another video later on.
| | 06:43 | Finally, in the upper right-hand corner
here, we have four buttons to choose from.
| | 06:47 | The Save button is the
same as Apply in Joomla! 1.5.
| | 06:50 | In other words it saves your settings but it
keeps this screen open for further editing.
| | 06:55 | The Save & Close button will save your
settings, any changes that you've made
| | 06:59 | to the screens and close out of the
Global Configuration screen returning you
| | 07:03 | to the Control Panel.
| | 07:05 | The Cancel button will get rid of any
of the changes that you've made since the
| | 07:08 | last time you save and return you to
the Control Panel, and the Help will give
| | 07:12 | you contextual help for this specific
screen here in the Global Configuration.
| | 07:16 | So I'm going to go ahead and hit
Save & Close and get return to the
| | 07:18 | Control Panel here.
| | 07:19 | As I said, there's many things that are
available in the Global Configuration.
| | 07:23 | I'll be returning to that several
times over the course of this video.
| | 07:26 | But for now, this is enough to get you started.
| | 07:28 | Let's take a look at some of the
other great features that are available
| | 07:31 | here inside of Joomla!
| | Collapse this transcript |
| Using the Media Manager| 00:00 | The Media Manager is where you can upload
images, PDFs, office documents and so much more.
| | 00:06 | You can link from Joomla! articles
| | 00:07 | to these items for your website.
| | 00:10 | You can upload more than one file at a time,
unlike earlier versions of Joomla! 1.5.
| | 00:14 | That's right the Flash Uploader is back again.
| | 00:17 | Let's take a look at the
Media Manager and see what's new.
| | 00:20 | You can get to the Media Manager by
either going to it via the Control Panel
| | 00:24 | icon here or you can go to Content>
Media Manager. Either way takes you to the
| | 00:30 | same place and you'll notice here, the
first thing you might see in the Media
| | 00:34 | Manager is that the old stories
folder that was available in Joomla! 1 .5,
| | 00:37 | is no longer here and all of the
old images have been cleaned out of the
| | 00:42 | Media Manager, which is a wonderful thing.
| | 00:45 | So at this particular point in time,
there are very few images that are left in
| | 00:48 | the Media Manager by default.
| | 00:50 | If you scroll on down, on the screen,
down towards the bottom, you'll notice
| | 00:54 | that there our interfaces here for
creating folders and there's an interface
| | 00:58 | for uploading images.
| | 00:59 | So let's start by creating a folder.
| | 01:01 | Maybe you want to have some PDFs on your
website and you'd like to make a folder
| | 01:05 | specifically for PDFs.
| | 01:06 | All you need to do is type in the name
of that folder here into this box, like
| | 01:10 | PDF and click the Create Folder button.
| | 01:13 | This will create the folder, just
like that within the Media Manager.
| | 01:17 | If I then click on the folder called PDF,
I now have an interface where I can
| | 01:21 | upload images here directly into that area.
| | 01:24 | To get back to the main level of the
website, simply go over here to the
| | 01:27 | Media folders and click on the very topmost
folder and you'll be back where you started.
| | 01:32 | You can also upload images directly
here into Joomla!, and you can do that by
| | 01:36 | using the interface down here
at the bottom of the screen.
| | 01:39 | Click the Browse button and we're
going to go to our Desktop, to the
| | 01:43 | Exercise Files folder.
| | 01:45 | I'm going to go to Chapter 2
and I'm going to go 02_03.
| | 01:48 | Inside of here, I have an
image, I'd liked to upload.
| | 01:51 | Go ahead and select it and say
Open and then say Start Upload.
| | 01:54 | This will go ahead and upload your
image directly into the Media Manager, into
| | 01:59 | whatever folder you happen to have
opened at that particular point in time.
| | 02:03 | You can also delete images very easily
and you can delete one image or you can
| | 02:07 | delete several images at a time.
| | 02:09 | To delete one image, all you need to
do is click on the red X here inside of
| | 02:13 | each individual image and
that will get rid of it.
| | 02:15 | Or you can check off, multiple
images like this and then click the Delete
| | 02:20 | button up here in the top.
| | 02:22 | Right now, I'm just going to get rid
of the image I just uploaded, simply by
| | 02:25 | clicking the Delete button right here
and you'll see that that image goes away.
| | 02:29 | Let's take a look at some of the options
that are available here for the Media Manager.
| | 02:33 | If you go up here to the upper right
to the Options button, and click that,
| | 02:37 | you'll see that there are several
things you can configure where the Media
| | 02:39 | Manager is concerned.
| | 02:41 | First of all we have our Legal
Extensions in File Types, and what these are by
| | 02:45 | default are generally image file formats, as
well as formats for Office and Open Office.
| | 02:52 | So things like PPT or DOC are available
as Office format but also we see ODG and
| | 02:59 | ODP and ODS, those have to do
with the Open Office format as well.
| | 03:03 | If there are other types of files
that you'd like to be able to upload, you
| | 03:06 | can add those extensions to list and they'll be
allowed to be uploaded through the Media Manager.
| | 03:11 | The Maximum Size for these files by default is
set to 10 MB. That's a Joomla! size restriction.
| | 03:17 | Remember that PHP may also restrict
the size of files that you can upload.
| | 03:22 | This used to be a big problem
with earlier versions of PHP.
| | 03:25 | It's not as much of a problem now.
| | 03:27 | But if you increase your Maximum Size
here in the Media Manager for your files,
| | 03:31 | and then you still find that you can't
upload files of that size or smaller, you
| | 03:35 | might check your PHP settings to find
out if you can still upload large files.
| | 03:39 | You can set a path to your images
folder and your files folder, as a default if
| | 03:43 | you wish and then down here towards the
bottom there is the Flash Uploader which
| | 03:49 | I alluded to earlier.
| | 03:50 | Go ahead and set that to
Yes and say Save & Close.
| | 03:53 | You're going to notice here that the
interface down at the bottom of the screen changes.
| | 03:57 | This will allow you to select multiple
images at a time, so you can upload 10 or
| | 04:02 | 20 images at a time, and upload them
all at once into the Media Manager.
| | 04:06 | Simply click the Browse files button,
and this will go to your Desktop in
| | 04:12 | Exercise Files> Chapter 2> 02_03.
| | 04:15 | You can select your images from
here or anywhere else on your computer.
| | 04:19 | You can select many of the images and say Open.
| | 04:22 | They'll show up down here in a list at
the bottom of the screen, and then you
| | 04:25 | can click the Start Upload button when you
have all of your images that are all queued up.
| | 04:30 | When you say Start Upload, it'll
upload each image successfully directly
| | 04:33 | into the same folder.
| | 04:35 | So if you have images that are going to
different folders, you'll need to upload
| | 04:38 | the images to specific folders sequentially.
| | 04:41 | Once you've uploaded your images, if
you scroll back on up the screen and click
| | 04:44 | on the thumbnail, you'll get a larger
version of the picture, so that you can
| | 04:48 | see it a little bit more
clearly which might be helpful to you.
| | 04:51 | The Media Manager is a great place to
store all of our files for the Web that
| | 04:55 | have to do with media, like images, PDF
files, Office documents or any other type
| | 04:59 | of file that you're going to link to,
on the website or display on the website.
| | 05:03 | So keep the Media Manager in mind, as you work
with different kinds of media on your
| | 05:08 | Joomla! website.
| | Collapse this transcript |
| Creating content in Joomla!| 00:00 | Let's start working on
creating some content in Joomla!.
| | 00:03 | To make an article appear on our
website, we have to follow three steps in
| | 00:08 | a particular order. Step one,
| | 00:10 | Create a category for that content,
if it doesn't already exist. Step two,
| | 00:14 | Create an article within that
category. Snd finally step three,
| | 00:18 | Create a link to the article within the
menu where you'd like that link to appear.
| | 00:23 | In Joomla! 1.5,
| | 00:23 | we had sections, categories,
articles and menus, the SCAM.
| | 00:29 | In Joomla! 2.5 the sections are gone.
| | 00:32 | We can now nest categories
as many levels deep as wish.
| | 00:36 | But each article still has a single
category assigned to it in the end.
| | 00:40 | There are no multiple categories
for an article, one category only.
| | 00:44 | So our SCAM has now become the CAM.
| | 00:47 | You must create the category first, the
article second and the menu links third,
| | 00:52 | due to the way the database is constructed.
| | 00:54 | You cannot go out of order.
| | 00:56 | Some users like to create all of the
categories for the website first, then all
| | 01:00 | of the articles that live within those
categories and then link everything up to the menu.
| | 01:04 | That's the process we're
going to use here in this video.
| | 01:07 | Other people like to complete the
process for each item, creating one category,
| | 01:12 | one article and link it to the menu
and then go back again and create another
| | 01:16 | category if required, create another
article and create another menu item.
| | 01:19 | It doesn't matter which methodology
you prefer in that regard, as long as you
| | 01:24 | keep the steps in order:
category, article, menu, the CAM.
| | Collapse this transcript |
|
|
3. Creating CategoriesCreating categories for a site| 00:00 | Planning your categories for your Joomla!
| | 00:02 | website may be the hardest part of
the process of creating categories,
| | 00:06 | articles, and menus.
| | 00:07 | It is easy to create categories but
how do you know what categories to create
| | 00:12 | and how do you know how they all hook together?
| | 00:15 | There's a few rules for creating categories.
| | 00:17 | First of all, when working with
categories it's frequently a good idea to match
| | 00:22 | the site map, at least as a starting point.
| | 00:24 | So in other word start with a category
for your main navigation and then create
| | 00:28 | some subcategories for items
within that sub navigation.
| | 00:31 | The articles can then be placed into
the correct categories accordingly.
| | 00:35 | This is a great starting point for
organizing the categories for your website,
| | 00:38 | but there are some other things that
might impact your category structure.
| | 00:42 | Permissions, particularly those
relating to Access Control Lists (ACL),
| | 00:46 | can cascade down into those categories
and that may impact your organization.
| | 00:51 | I'm going to go over that a little bit more
later, when I talk about ACL in a later video.
| | 00:56 | Functionality of your website might
also impact how categories are nested
| | 01:01 | or created, and we'll take a look at that
a little bit further in the video as well.
| | 01:05 | But if you want to, for example, group
together some content to create a blog,
| | 01:09 | it's useful if it's all in the same category,
and that may impact how your site is organized.
| | 01:15 | So let's go ahead and take a look at
the site map for this website, and in your
| | 01:19 | Exercise Files, I've put together
a site map for you which is here.
| | 01:23 | So the way it looks is we start with
the Main Menu for the website, and on the
| | 01:27 | Main Menu, we're going to
have some top-level navigation.
| | 01:29 | Those items include Home, About, News &
Events, Collections, Links, and Contact Us.
| | 01:36 | Underneath some of these items,
we have some sub navigation.
| | 01:39 | So for example under About we're going
to have two additional pages; Volunteer
| | 01:43 | with Us and a page about Our Director.
| | 01:45 | Under News & Events we'll have two
secondary navigation items; a News item and
| | 01:49 | an Events item. And then we'll
have some items that fall under those.
| | 01:53 | Those will be individual articles that are
actual News articles and Events articles.
| | 01:57 | Under Collections, we're going to
have two sub navigation items; an item on
| | 02:01 | Visiting Exhibits and one on the
Permanent Collections at the museums.
| | 02:06 | And under the Contact Us, we'll
have an item for Directions.
| | 02:08 | Later in the course we'll add a second
menu to this website which will go on the
| | 02:13 | footer of the page and that Footer menu
is going to contain links to the Privacy
| | 02:17 | Policy, a Login, and a Site Map.
| | 02:20 | So here on this site map I've already
spelled out exactly which categories you
| | 02:24 | need to create for this website
and the names of those categories.
| | 02:27 | So we're going to use this to
enter this information into Joomla!.
| | 02:31 | So I'm going to go ahead and
open up my backend of Joomla!
| | 02:34 | here, Log In, and from your Control
Panel, you can go to the Category Manager
| | 02:39 | which you can get to either through
this icon here on the Control panel or
| | 02:43 | you'll go to Content>Category Manager, and
right from here, we can click on Add New Category.
| | 02:49 | And so we're going to enter a title
for this category, we'll start with the
| | 02:52 | About category so the title will be About.
| | 02:55 | And that is literally all of the
information that is required to create a
| | 02:59 | category in Joomla!, simply the name.
| | 03:01 | And I know that because that is a start item
here which indicates that it's a required field.
| | 03:06 | All of the other information that's
here within the screen is not required and
| | 03:11 | not anything that you have to
complete to make a new category.
| | 03:14 | To create our next category, I have a
few choices of buttons up here in the
| | 03:18 | upper right and I shall explain what they are.
| | 03:21 | Save indicates that I will save the
information about this category and return
| | 03:25 | to the same screen to continue editing.
| | 03:27 | It's the equivalent of the
Apply button in Joomla! 1.5.
| | 03:31 | Save & Close means that I will save this
new category called About and return to
| | 03:36 | the main Category Manager screen.
| | 03:38 | Save & New means that I'll save the
screen that I'm in now, creating the About
| | 03:41 | category, and I'll get a blank screen
to come up immediately after, so I can
| | 03:45 | create my next category.
| | 03:47 | That is a fabulous feature that's been
available now in Joomla 1.6 and 1.7, and
| | 03:52 | now in 2.5. And it saves tons of time
when you're creating lots of categories
| | 03:56 | and lots of articles.
| | 03:58 | The Cancel button will get me out
of the screen entirely and no About
| | 04:01 | category will be created.
| | 04:03 | And of course, the Help button
gives me contextual help pertaining to
| | 04:06 | the Category Manager.
| | 04:07 | So I'm going to go ahead and hit Save
& New, and my next item, I'm going to
| | 04:11 | create is the News & Events category.
| | 04:14 | So I'll go ahead and type in News & Events
and I'm going to hit Save & New one more time.
| | 04:20 | Now I need to make the
subcategories for News & Events.
| | 04:23 | The News category and the Events
category within the News & Events category, and
| | 04:29 | so to do that I'll type in the word News.
| | 04:31 | Now since I want this to be a
subcategory of the News & Events category, I have
| | 04:35 | to make one additional change.
| | 04:37 | Here under Parent you'll see that I
have three categories that currently exist.
| | 04:42 | The Uncategorized category which
means that these are articles that that
| | 04:46 | basically are not assigned to
category, which is something a little bit
| | 04:49 | fictitious because of course
uncategorized is a category all by itself.
| | 04:54 | And the About category
and News & Events as well.
| | 04:56 | So I would like News and Events to be
the parent category for the News category.
| | 05:01 | So I'm going to go ahead and select
that and then I'm going to hit Save & New.
| | 05:04 | And I'm going to repeat the same
process for the Events Category, so I'll type
| | 05:08 | in Events and I'm going to put
this under the News & Events category.
| | 05:13 | So I'm going to continue this
process here in the site map, creating some
| | 05:17 | additional categories, the
Collections category, the Visiting Exhibits, the
| | 05:20 | Permanent Collections, a Contact Us
category, and I'm going to go ahead and go
| | 05:25 | off-line to do that and I
will see you in the next video.
| | Collapse this transcript |
| Modifying categories| 00:00 | Did you finish entering all of
the categories into the website?
| | 00:03 | Let's see how you did.
| | 00:05 | From here, in the Control Panel, let's
go back to a Category Manager which you
| | 00:08 | can get to by either the clicking the
icon for the Category Manager here, or
| | 00:12 | going to Content>Category Manager.
| | 00:14 | And you should see a list of
Categories here, which if you've entered them
| | 00:18 | correctly they should look something like.
| | 00:20 | So here's the Uncategorized Category
which was already provided for you.
| | 00:24 | About, News and Events with News and
Events as subcategories, then we've
| | 00:28 | collections with Visiting
Exhibits as a Subcategory. And Oops!
| | 00:33 | I made a mistake here, my Permanent
Collections not only has some typos in it,
| | 00:37 | it's actually located in the wrong
location here inside a Category Manager.
| | 00:41 | And then finally, we have a Contact Us Category.
| | 00:44 | Fortunately, it's very easy to edit your
Categories once you've made mistakes.
| | 00:49 | All you need to do here from the
Category Manager is to click on the word and
| | 00:54 | this will push you into the Editing Screen.
| | 00:56 | So I am going to change this now to
Permanent Collections, spelled correctly.
| | 01:01 | Note that right underneath of
this title Permanent Collections is
| | 01:05 | something called the Alias.
| | 01:07 | The Alias may be used in
generation of search engine-friendly URLs.
| | 01:12 | So at this particular point in time,
we don't have any URLs for our website,
| | 01:16 | because we haven't hooked up any
of our content to a menu item yet.
| | 01:20 | But at this point in time, we now have
all those typos that I just had that are
| | 01:24 | present in that Alias.
| | 01:25 | So it's probably a good idea to simply
erase what's here in the Alias and what
| | 01:30 | will happen is Joomla!
| | 01:31 | will go ahead and
generating a new Alias for this.
| | 01:35 | If you're really in the search engine
optimization, you can always type in your
| | 01:38 | own Alias here, if you wish.
| | 01:40 | But as far as categories go, the Alias
is not always used for search engine-
| | 01:45 | friendly URLs, and it's occasionally used and
it depends on the kinds of links to the menu.
| | 01:50 | All right, the next problem that we
have with this was the Parent was assigned
| | 01:54 | to be the very top level of the website.
| | 01:56 | Now what we need to do is
put this under Collections.
| | 02:00 | So I am going to go
ahead and assign that Parent.
| | 02:02 | And I am going to go ahead and had
Save & Close and now if you take a look at
| | 02:06 | the structure here of our Categories,
you should have a very similar structure
| | 02:11 | to your Categories on the
website that you're building.
| | 02:13 | Now that all the categories are in
place, it's time for us to create some
| | 02:17 | Articles which I'll do in the next video.
| | Collapse this transcript |
|
|
4. Creating Articles and Basic FormattingCreating individual articles| 00:00 | Now that the categories are created for this
website, it's time to create some articles.
| | 00:05 | Each Article may be assigned only one category.
| | 00:08 | That is why you've to create the
categories first, otherwise you would assign
| | 00:12 | all of your Articles to
the Uncategorized category.
| | 00:15 | Remember the CAM: Categories, Articles, Menus.
| | 00:19 | So we first created all of the
Categories and now we can create all the Articles
| | 00:24 | to be assigned to any of those given categories.
| | 00:27 | So to start of with, we need to create Articles.
| | 00:30 | Here in the Control Panel.
| | 00:32 | We can get to the Article Manager
either through this icon here for the Article
| | 00:35 | Manager or we can go to Content>
Article Manager>Add New Article.
| | 00:40 | Here in the Article Manager screen for
creating a New Article, we're ready to go
| | 00:46 | ahead and put in that information
right away. And if you take a look in your
| | 00:49 | Exercise Files, I've given you a text
document here which has information for
| | 00:55 | free articles actually.
| | 00:57 | Starting with the About Us article,
there's a volunteer article lower it for
| | 01:00 | down and then down at the bottom there's
an article about Our Director and we're
| | 01:04 | to go ahead and put all
three of these into the website.
| | 01:07 | So go ahead and start by highlighting
the words About Us and then Ctrl+ or
| | 01:12 | Command+C on your keyboard, click on
the Title blank here on screen Ctrl+ or
| | 01:17 | Command+V to Paste in About Us.
| | 01:21 | The Category for this article will be
the About category and everything else
| | 01:26 | you can leave the same.
| | 01:27 | Scroll on down the screen a little bit,
and you'll see the box here where you
| | 01:31 | put in the Article text.
| | 01:32 | This is the Editor within Joomla!
| | 01:35 | And you can see that there's a few
buttons here for doing some formatting.
| | 01:38 | What we are going to do is now take
the rest of this article from Celebrating
| | 01:42 | the Best of Modern Art and highlight all the
way down through Modern Art Around the World.
| | 01:47 | Ctrl+ or Command+C to copy, click
inside of the Editor box Ctrl+ or
| | 01:52 | Command+V to paste in the text.
| | 01:54 | And that's all there is to
creating a basic article here in Joomla!.
| | 01:58 | All we need do now is hit
the Save and New button.
| | 02:02 | And we'll get another blank screen here,
where we can enter some more information.
| | 02:06 | So I am going to repeat this
process here for Volunteer.
| | 02:09 | Once again Ctrl+ or Command+C,
Ctrl+ or Command+V, assign this to the
| | 02:14 | About Category and then
highlight the rest of the article.
| | 02:17 | Ctrl+ or Command+C, Ctrl+ or Command+V.
And one more time for the
| | 02:25 | Our Director article, same exact process.
| | 02:30 | Copy the words Our Director as the
Title and paste them in place, assign this
| | 02:34 | to the About Category, scroll on down, copy
the article and paste that on in to the Editor.
| | 02:43 | I'm using Notepad here on the PC which is
the default text editor that comes with a PC.
| | 02:49 | If you're a Mac, you use something called
text edit that does exactly the same thing.
| | 02:53 | There's no real formatting to these
articles, they are just plain text.
| | 02:57 | You may be wondering, if you can copy
and paste out of Microsoft Word which
| | 03:00 | you can certainly do.
| | 03:02 | But you may run into an issue where you
copy out of Microsoft Word and when you
| | 03:06 | paste into your Joomla! Website,
| | 03:08 | you will wind up with all of
this funky Microsoft Word formatting
| | 03:12 | That can be addressed with some
additional buttons inside TinyMCE, if you
| | 03:17 | configure TinyMCE to have those buttons show up.
| | 03:20 | It can also be addressed by JCE, the Joomla!
| | 03:24 | Content Editor which I'll cover in
great detail in a couple of chapters.
| | 03:28 | And at that point in time, I'll show
you the Microsoft Word button that's there
| | 03:33 | for pasting from Microsoft Word.
| | 03:34 | Meanwhile we're just going to a work
with things from the text format here, and
| | 03:38 | will add formatting after the fact.
| | 03:40 | Alright so we are done with this text
document, go ahead and hit the Save &
| | 03:44 | Close button, and you should be
returned to the Article Manager and you'll
| | 03:47 | see that we've three articles here for
us; the About Us, the Our Director, and
| | 03:52 | the Volunteer article.
| | 03:53 | You'll see in this column that
they're all published because there's a
| | 03:56 | green check mark here under Status, and
they've all been assigned to the About category.
| | 04:01 | And if you go on the front end of the
website, and you hit Refresh, you'll
| | 04:05 | see absolutely nothing.
| | 04:07 | We've put these articles into the
website but they haven't been linked up to the
| | 04:10 | menu yet, which means that they're
not going to show on the font end of the
| | 04:14 | website, so just because you've put
this content in as Articles doesn't
| | 04:19 | necessarily mean it's been
shown the Font end of the website.
| | 04:22 | I'll be getting to how to hook all of
these things up to the menu in the next
| | 04:26 | chapter, but for right now we've some
other things to cover as pertaining to
| | 04:30 | Articles including putting
some images into the Articles.
| | Collapse this transcript |
| Formatting articles| 00:00 | We've gone ahead and created
our first articles in Joomla!
| | 00:03 | but they weren't terribly
interesting in terms of their formatting.
| | 00:06 | We just copied down the text file
and we pasted it right into the Joomla!
| | 00:10 | and while it's very readable, it's
just not terribly interesting looking.
| | 00:14 | So let's take a look at those articles
that we just put in and add a little bit
| | 00:18 | of formatting to them.
| | 00:20 | So I'm going to go to my Article Manager,
I am going to click on the icon here
| | 00:23 | in the Control panel, and here's all
of the articles that I've just created.
| | 00:27 | I'm going to go to the About Us article,
click on the link, and I'm going to
| | 00:32 | scroll down a little bit here and
you'll see that, we actually have some
| | 00:36 | subheadings here within this article
including Celebrating the Best of Modern
| | 00:40 | Art and An Introduction.
| | 00:42 | One of the things that you probably
would like to do with this is to make those
| | 00:46 | subheadings stand out.
| | 00:47 | The way that people normally think
about approaching this is to highlight those
| | 00:50 | words and hit the B button to make them bold.
| | 00:53 | A better way to do this on a webpage is
to use the Heading tags, which will add
| | 00:58 | pre-designed styles that will give
great formatting to this article.
| | 01:03 | What's more, search engines like to
see words inside of Heading tags which
| | 01:07 | will help increase your search
engine rankings for this website.
| | 01:11 | So to do that I'm going to go ahead and
highlight the words Celebrating the Best
| | 01:14 | of Modern Art, and then here in this
dropdown, where it says paragraph I'm going
| | 01:18 | to switch this to say Heading 2.
| | 01:21 | And notice that not only the words
Celebrating the Best of Modern Art but the
| | 01:24 | words underneath starting with SAMOCA
got a little bit larger, that's likely
| | 01:28 | because since we copied and pasted from
a text file, these are only separated by
| | 01:33 | break tags inside of your HTML
rather than actual paragraph tags.
| | 01:37 | So to get rid of this problem I'm just
going to delete the space here between
| | 01:41 | these headings and then hit Return so
that I actually get a Paragraph tag and
| | 01:46 | then within this paragraph, I just need
to click anywhere inside of it and I can
| | 01:49 | switch this back to a Paragraph.
| | 01:51 | So now we have our heading that's a
little big and our paragraph is a bit smaller.
| | 01:56 | It's likely we'll encounter the same
thing here with An Introduction, so I'm
| | 02:00 | going to go ahead and do the same treatment.
| | 02:03 | We'll take out An Introduction
and will make it set to a Heading 2.
| | 02:08 | It looks like An Introduction is
also attached to the paragraph above it,
| | 02:12 | which would make sense.
| | 02:13 | So I'll go ahead and delete those spaces as
well and once again reset this to a Paragraph.
| | 02:21 | So now you see we have a full article
here with two headings that I've gone
| | 02:25 | ahead and put in place, and we
have Paragraphs underneath of that.
| | 02:29 | Those of you who are HTML geeks like me,
you love HTML and you love all those
| | 02:33 | tags, you can in fact get to the HTML here.
| | 02:37 | There's two ways of doing it, one is
you can click this HTML button right here
| | 02:41 | inside of TinyMCE, and you can see the
code that makes up this particular page.
| | 02:46 | Note for example, in between two
paragraphs here, I actually have two break tags
| | 02:50 | that's what I was talking about as
opposed to two actual Paragraph tags, which I
| | 02:55 | could fix here in the HTML or
I could fix inside of the editor.
| | 02:59 | You can also get there by clicking this
Toggle editor button, and that will go
| | 03:03 | ahead and put the text directly in here.
| | 03:05 | What's the difference between Toggle
editor and this HTML button? Well, Joomla!
| | 03:10 | does a certain amount of filtering of
HTML tags, and TinyMCE does a certain
| | 03:15 | amount of filtering of HTML tags.
| | 03:18 | The point of filtering HTML tags is
to try to keep your site safe, so that
| | 03:22 | somebody can't get into your website,
fill up an article with a bunch of
| | 03:25 | hackers, sort of PHP and JavaScript and
all kinds of crazy things, and then wind
| | 03:30 | up blowing up your whole website.
| | 03:32 | So some amount of text filtering has
been applied to this to make sure that none
| | 03:36 | of those bad tags get into place.
| | 03:39 | If you use the HTML button here, inside
of TinyMCE, the Text and Tag filtering
| | 03:45 | for TinyMCE will be applied.
| | 03:47 | If you use this Toggle editor button
down here in the bottom you're actually
| | 03:50 | temporarily removing TinyMCE from the
equation and only Joomla!'s text filtering
| | 03:56 | will be applied in place.
| | 03:58 | I am going to go through text
filtering in great detail in a couple of videos
| | 04:01 | and show you how we can adjust that
to various user groups, so that you can
| | 04:06 | include things in your articles like
YouTube videos and Facebook feeds and
| | 04:09 | Twitter things and so forth.
| | 04:11 | But for now, we'll just go
ahead and leave things as they are.
| | 04:15 | As you might expect, the other buttons
on this page work accordingly, if you
| | 04:18 | highlight a word and you hit the big B
button, you will wind up making it bold.
| | 04:22 | If you highlight something else, Art
Museum for example, and hit the Italic
| | 04:28 | button you'll wind up making things
italic, so these buttons are very Microsoft
| | 04:31 | Word-like in their functionality.
| | 04:35 | You of course can also highlight these
words and hit the button again to turn them off.
| | 04:39 | There's also buttons here for setting
out Bullet Lists or Numbered Lists, that's
| | 04:44 | of course the UL and the OL tags in HTML.
| | 04:47 | You can of course, include some links
here, Superscripts and Subscripts, the
| | 04:52 | Omega character here is actually
inserting a special character like a registered
| | 04:56 | trademark character, that kind of thing.
| | 04:58 | But we are actually very limited in the
number of tools that we have up here on the top.
| | 05:02 | You might be curious to know that there
are ways that we can add some additional
| | 05:06 | buttons to this, so I'm going
to go ahead and do that now.
| | 05:08 | Go ahead and click Save & Close.
| | 05:11 | And if you go to Extensions>Plug-in
Manager, you will find the TinyMCE
| | 05:18 | plug-in listed here, it's about halfway down
the page here in the first page of plug-ins.
| | 05:24 | Go ahead and click on that, and
inside of the screen, this is where you can
| | 05:27 | configure some of the features with TinyMCE.
| | 05:30 | Right now our Functionality is set to
Advanced, and we have actually three choices.
| | 05:36 | Simple will even strip down the
buttons even further and give you almost no
| | 05:39 | choices in terms of buttons, but
Extended will add significantly to the number
| | 05:44 | of buttons that you have.
| | 05:45 | So if you go ahead and switch this to
extended and hit Save & Close, and then
| | 05:49 | we're going to go back to our Article
Manager, and I'm going to click on the
| | 05:53 | About Us article again, you'll see that
now we have many, many more buttons up
| | 05:58 | here in the top for TinyMCE.
| | 05:59 | In fact we may have too
many buttons at this point.
| | 06:03 | Because this many buttons can really
confuse your client, it also gives them a
| | 06:07 | lot of flexibility for adding
formatting to these articles.
| | 06:10 | For example, let's say we want SAMOCA to
be Comic Sans, everybody's favorite font.
| | 06:16 | See how I just did that, and of course
if you take a look at the editor you'll
| | 06:20 | see that it's put in a Span tag
here with a font family of Comic Sans.
| | 06:25 | So you probably don't really want that
happening, so you might want to limit
| | 06:29 | some of these buttons. You want to give
your client a few more buttons but maybe
| | 06:32 | you don't want to give
them all of these buttons.
| | 06:34 | The notable one that's really great to
give them is the Paste from Word button here.
| | 06:38 | If I was copying and pasting from
Microsoft Word, I would copy from my Word
| | 06:42 | Document and then click this button,
Paste from Word directly into this window
| | 06:47 | and that would allow for that code
cleanup, such that all of that funky Word
| | 06:51 | formatting that sometimes comes
over would be taken care of by TinyMCE.
| | 06:55 | I'm going to hit Cancel because I
don't really want to save that Comic Sans
| | 07:01 | font into that article.
| | 07:02 | I'm going to go back to the Plug-in
Manager and then I'm going to back to the
| | 07:06 | TinyMCE plug-in and I'm going to
show you one additional screen here.
| | 07:10 | Under your Advanced Parameters, you do
have the option of turning on and off
| | 07:14 | some of the features here in TinyMCE;
such as the Fonts, for example, is a
| | 07:20 | really great one to hide.
| | 07:21 | So if I set the Fonts to Hide for
example, and then hit my Save & Close button,
| | 07:26 | when I go back to my Article Manager
and I go back to my About Us article I can
| | 07:32 | no longer change my font to
Comic Sans or change the size of it.
| | 07:36 | It's all now under control of
the Style Sheet as a Joomla!
| | 07:39 | designer or Joomla!
| | 07:40 | developer that's probably really
what you want in the end anyway.
| | 07:44 | And you could continue that process
to go through all of these buttons.
| | 07:47 | Having said all of this about TinyMCE
now the default editor that comes with
| | 07:51 | Joomla!, there is a much better
editor that's available called JCE, the
| | 07:54 | Joomla! Content Editor, and in another
couple of chapters, I will go through
| | 07:58 | JCE in great detail.
| | 08:00 | And it too has the ability for
customizing these buttons and giving your client
| | 08:04 | a significantly improved
interface with great usability.
| | 08:08 | I'm very enthusiastic about it and I
install it on all of the sites that I build.
| | 08:12 | So I would encourage you to play
around a little bit here with TinyMCE and
| | 08:16 | see what's possible, but don't get too
excited about all of the features and
| | 08:20 | functionality that are here yet
because there's something coming better in
| | 08:23 | the next few videos.
| | Collapse this transcript |
| Adding an external link| 00:00 | It's very easy to add links to your Joomla!
| | 00:03 | articles which can take people to
other websites or to take people to
| | 00:07 | articles within your Joomla! website.
| | 00:09 | So I'd like to show you how to add an
external link to an article here inside of
| | 00:14 | Joomla!. An external link is one
that would link out to another website.
| | 00:19 | For the internal links, I'm going to
wait until we have JCE installed because it
| | 00:23 | has a great interface for
making quick and easy internal links.
| | 00:26 | That's really not present in TinyMCE.
| | 00:29 | So I'm going to start by getting to
my articles via Article Manager button
| | 00:32 | right here on the Control Panel, and I'm going
to go into the About Us article one more time.
| | 00:39 | And here inside of the About Us
article I am going to make a link to the word
| | 00:44 | Ventura, so here we're in the heart of
Ventura and I'd like this word Ventura to
| | 00:50 | link to a website which I'll open up in
a new tab here, and I'm going to go to
| | 00:54 | www.cityofventura.net, and this is
the website that talks about the City of
| | 01:03 | Ventura and all of the wonderful
things that you can do here, including the
| | 01:06 | Ventura music week, happening right now.
| | 01:08 | So if you go ahead and highlight
the cityofventura.net and do Ctrl+ or
| | 01:13 | Command+C to copy that URL, I'm going
to jump back into the backend of Joomla!,
| | 01:19 | highlight that word Ventura, and
I'm going to click on the link icon.
| | 01:23 | If you've customized TinyMCE as I have
to be in its extended mode, which I just
| | 01:28 | did in the previous video
you'll see lots of buttons like this.
| | 01:31 | If you skipped the previous video and
you have a more stripped-down look, you'll
| | 01:35 | see a lot fewer buttons but in either
case, you'll see a icon that looks like
| | 01:40 | this, which is the Insert/Edit Link button.
| | 01:43 | And if you go ahead and click that,
you'll get a window that comes up and will
| | 01:47 | allow you to put in a website URL.
| | 01:50 | So I'm going to Ctrl+ or Command+V
to paste in that link URL.
| | 01:54 | If you're not using Firefox, make
sure that URL starts with http://.
| | 02:00 | Any time you link to an external
website, your link has to start with that.
| | 02:04 | If it doesn't then it just starts with
the www part of the link, then what will
| | 02:10 | happen is that your website,
and that's whether it's a Joomla!
| | 02:13 | site or Drupal site or WordPress site or
a Static HTML website or anything else,
| | 02:17 | it will think that www.cityofventura.
net is a page within your current website.
| | 02:22 | So make sure it starts with an http://,
and then you can pick a target for
| | 02:28 | that particular link.
| | 02:29 | And what a target is, is whether that
link is going to open in a new window or
| | 02:34 | whether it's going to open in the same window.
| | 02:37 | So by default, all of the links are
set to open in the same window. You can
| | 02:41 | change that with this dropdown
menu here to open in a new window.
| | 02:44 | The last two items have to do with
frames, and I'm not going to talk about
| | 02:48 | frames in this course so you
can safely ignore those two.
| | 02:51 | Personally, I'd like to have my
external links open in a new window.
| | 02:55 | You may prefer not to have
them open in a new window.
| | 02:58 | The key thing is in order to maintain
the usability of your website is, make a
| | 03:03 | decision about how you want
to treat your external links.
| | 03:05 | Either they all open in new windows
or they all open in the same window.
| | 03:10 | And just pick one and use it consistently
for your website and you'll be in good shape.
| | 03:14 | Go ahead and click the Insert button
once it's there, you'll see that the word
| | 03:18 | Ventura turns blue which
indicates that this is now a link.
| | 03:22 | We can't click on it though or open a
new webpage because we're here inside
| | 03:26 | of an editing window.
| | 03:27 | We'll have to wait until we get this
article actually linked to a menu in order to
| | 03:31 | test that link and make
sure it's working correctly.
| | 03:33 | And I strongly recommend any time you
add links here to test them all and make
| | 03:37 | sure they're looking correctly.
| | 03:38 | It's just too easy to make a mistake
when you're putting links into your website.
| | 03:42 | So all we need to do now is hit Save &
Close, and we have successfully added an
| | 03:49 | external link to our About Us article.
| | Collapse this transcript |
| Adding article images| 00:00 | Adding images in Joomla!
| | 00:01 | is a relatively straightforward process.
| | 00:04 | First of all however, you have to have an image.
| | 00:07 | Make sure that whatever image you
choose is in the correct dimensions for your
| | 00:12 | website, and where it's supposed to
fit on your website and Save the picture
| | 00:16 | down in a small file size for the Web.
| | 00:19 | If you don't know how to do this there
are several titles at Lynda.com that can
| | 00:23 | show you how to create pictures in an
optimal format for use on a website.
| | 00:28 | To add a picture to your article, we're
going to start by going to the Article
| | 00:31 | Manager as we've done many times before.
| | 00:33 | I'm just going to click on the icon
right here on the Control panel and I'm
| | 00:36 | going to open up the About Us article.
| | 00:40 | I have some pictures that I'd like to add,
one here for the About Us article and
| | 00:44 | I have one for the Volunteer article.
| | 00:47 | And that picture is going to go right here
just above all of the text that's on the page.
| | 00:52 | So I'm going to put in a blank line
here and make sure that it's a Paragraph
| | 00:56 | and not a Heading 2, and I'm going to
put the image right here as part of this
| | 01:00 | particular article.
| | 01:01 | So to do that I'm going to start by
clicking on my Image button down here, just
| | 01:06 | underneath the editor. This is
going to bring up my Media Manager and this
| | 01:12 | shadowbox type of window here. And if
you notice down here on the bottom, I have
| | 01:16 | the ability to upload files
here into the Media Manager.
| | 01:19 | So I'm going to click my Browse
Files button, and I'm going to go back to
| | 01:25 | Chapter 4, and this is video #4,
and I actually have two pictures here.
| | 01:31 | I can upload them both at once.
| | 01:33 | If I hold down my Shift key and
click on each image, I can then say Open
| | 01:38 | and you'll see that these show up as
two pictures to upload here as part of
| | 01:42 | the Flash Uploader.
| | 01:43 | And in a previous video, where I
talked about the Media Manager, we turned
| | 01:48 | on the Flash Uploader.
| | 01:49 | If you have a box at the bottom of
your screen that just has the button that
| | 01:53 | says browse for a single image file
and then upload, that is the default
| | 01:57 | interface for Joomla!.
| | 01:59 | You can turn on the Flash Uploader
Interface by going into the Media Manager and
| | 02:03 | selecting the Flash Uploader
Interface from the options that are available
| | 02:07 | within the Media Manager.
| | 02:09 | You can go back to Chapter 2 and see
exactly how I did that, or you can upload
| | 02:13 | your images one at a
time into the Media Manager.
| | 02:15 | Whatever works best for you is fine,
but since I have the Flash Uploader turned
| | 02:19 | on I'm going to upload both of these
images at the same time by clicking the
| | 02:22 | Start Upload button.
| | 02:24 | And you'll see that the two images
have showed up here in the Media Manager.
| | 02:28 | So the one I'd like to put in
for the About Us page is the
| | 02:30 | SAMOCA_building.jpg image.
| | 02:33 | So all I need to do is click on that
and it will right at the correct image URL
| | 02:37 | for me right here on the screen.
| | 02:39 | I can pick an alignment for this image,
my choices are to the left or to the
| | 02:42 | right, and that will push the image to
the left or the right side of the page
| | 02:46 | and wrap text around it.
| | 02:47 | However in the case of this particular
article, I'd like that picture to show up
| | 02:50 | at the top of the page and I
don't want to wrap text around it.
| | 02:53 | So I'm going to leave my alignment to Not Set.
| | 02:56 | I can give this image a description.
| | 02:58 | If you know HTML, this is the Alt tag,
in other words this is the alternate
| | 03:02 | text that will show up.
| | 03:03 | If somebody is not able to see images
on their website it's also the text that
| | 03:08 | search engines will read as they read
your webpage for the website, so Alt Text
| | 03:12 | is a great place to put in some
additional keywords for your website.
| | 03:15 | I'm going to go ahead and put in The
SAMOCA building. And one of the things I'd
| | 03:22 | like to do is at the end of my Alt
Text I put in a period (.) and a space.
| | 03:26 | And the reason why I do that is one
of the big users of these Alt tags are
| | 03:30 | people with various types of
disabilities who may be using a screen reader.
| | 03:35 | If you take your Alt Text
and you put a period (.)
| | 03:37 | and a space at the end of it, it reads
more like a sentence if somebody happens
| | 03:41 | to be looking at your
website with a screen reader.
| | 03:43 | It's only two extra characters.
| | 03:45 | It's such a simple thing to do.
| | 03:47 | You might as well go ahead and do it.
| | 03:48 | It will help people who have disabilities.
| | 03:50 | Go ahead then and click the Insert
button on the top of the page, and you'll see
| | 03:55 | that we have this nice big picture of
the museum at the top followed by all of
| | 03:59 | the text at the bottom.
| | 04:00 | We won't actually be able to see how
this picture looks on the page yet because
| | 04:05 | we still have not
connected this article to our menu;
| | 04:08 | we have just a few more videos
to go before we get to that step.
| | 04:11 | But the picture is in the
article at this point in time.
| | 04:14 | So we're going to go ahead and we're
going to click Save & Close, and now I'm
| | 04:18 | going to repeat this process one
more time for the Volunteer article.
| | 04:21 | So I'm going to go ahead and click on
that, and the Volunteer article opens up.
| | 04:28 | Once again I'm going to put this
picture right at the very top of the page, so
| | 04:31 | I'm going to click Return, to
give me space up here on the top.
| | 04:35 | Click my Image button down here on the
bottom of the screen again, and I'm going
| | 04:39 | to click on the volunteer picture here,
and put in for my Alt Text, You could
| | 04:46 | volunteer at SAMOCA.
| | 04:49 | And I'm just going to click the Insert
button, and that will put this volunteer
| | 04:53 | picture here at the top of the screen.
| | 04:57 | Now all you need to do is click the
Save & Close button, and we've put two
| | 05:01 | images into our articles.
| | 05:03 | We've uploaded those pictures to the
Media Manager and that is the very easy and
| | 05:07 | very straightforward way of getting
images into your articles inside of Joomla!
| | Collapse this transcript |
| Using Read More| 00:00 | For our next task, we're going to create
the articles that will ultimately go on
| | 00:04 | a News page for this website.
| | 00:06 | What I would like a have is a series
of articles on a page that will show a
| | 00:10 | little bit of introductory text
followed by a Read More style link, when you
| | 00:15 | click on the Read More link, that'll
take you to the full page of information,
| | 00:18 | about that particular article.
| | 00:20 | This kind of format is called a blog.
| | 00:22 | Think of blog in terms of functionality,
as opposed to somebody who writes about
| | 00:27 | a subject of interest every day on a website.
| | 00:30 | In order to get started creating this
News portion of the website, the best way
| | 00:34 | to do that is to start by creating our
news articles and then I'll show you how
| | 00:39 | to put in the Read More links.
| | 00:40 | So to do that I'm going to start by
clicking on my Article Manager once again,
| | 00:46 | and then I'm going to click on the
New button up here in the upper right.
| | 00:51 | In your Exercise Files there's a
document, which will show you all of the
| | 00:55 | articles that we're going to put in for news.
| | 00:57 | There's three of them.
| | 00:58 | Something about the New Cafe Menu, a
Major Donation Received and New Children's
| | 01:03 | Artworks Program is Announced.
| | 01:05 | So I'm going to start with the New Cafe Menu.
| | 01:07 | Just as we've done before I'm going to
highlight the words New Cafe Menu,
| | 01:11 | Ctrl+ or Command+C to copy that,
Ctrl+ or Command+V to paste it in place.
| | 01:16 | As for the Category, this is going to
be inside of News & Events, but these are
| | 01:20 | specifically News articles.
| | 01:22 | So I'm going to categorize them
under the specifically the News category.
| | 01:27 | And then down here in the Article Text
area, I'm going to go ahead and highlight
| | 01:32 | all of the information here for the New
Cafe Menu, Ctrl+ or Command+C to copy,
| | 01:37 | Ctrl+V or Command+V to paste it in place.
| | 01:40 | So, so far I haven't done anything
different that you haven't seen before in
| | 01:43 | terms of creating a new article for the website.
| | 01:46 | Now what I need to do is specify
exactly where that Read More break is going
| | 01:50 | to occur and where I'd like that to happen is
between the first and the second paragraphs.
| | 01:54 | In other words, right between this very
first sentence of the page and the second
| | 01:58 | sentence that starts the new menu features.
| | 02:00 | So I'm going to click right before
I want that Read More link to occur.
| | 02:05 | I'm clicking at the very end of the
first sentence. And then I'm going to click
| | 02:09 | on the button down here in the bottom
that says Read More. And what you'll see up
| | 02:12 | here on the page is this red dotted line.
| | 02:14 | That red dotted line is not actually
there on the page when you actually view
| | 02:19 | this from the front end in Joomla!
| | 02:21 | you won't see a red line.
| | 02:22 | This is simply a guideline that's in
place that shows you where that Read More
| | 02:27 | break is going to occur.
| | 02:28 | Think about Dreamweaver if you
happen to be familiar with that.
| | 02:31 | Sometimes Dreamweaver will show
you these types of marks within the
| | 02:35 | editing interface that aren't
actually there but they're very helpful as
| | 02:39 | you put together a webpage.
| | 02:40 | You'll notice that Joomla!
| | 02:41 | put in a little bit of an extra
space here which it don't really want.
| | 02:44 | So I'm going to click my Delete key
a couple of times to get rid of that.
| | 02:47 | And that's all there is to it, in terms
of putting in that Read More link here.
| | 02:51 | And when we put this on the front end
of the website, and we create the News
| | 02:55 | blog, you'll see that this will divide
our articles into pieces, which will show
| | 02:59 | you the little bit of text.
| | 03:01 | In this case, SAMOCA proudly announces
a freshly updated cafe menu, it's now
| | 03:05 | available to museum visitors.
| | 03:07 | That will show up on the top part of
the page, and then there will be a Read
| | 03:10 | More button underneath, which you can
click and that will then show you the
| | 03:14 | entire article on the following page.
| | 03:16 | So I'm going to go ahead and click Save
& New, and I'm going to enter my other
| | 03:22 | two articles here, offline.
| | 03:25 | So for the Major Donation Received
Article, once again I'll put in that Read
| | 03:29 | more break between the first and
the second paragraphs and for the New
| | 03:32 | Children's Artworks Program Announced,
again I'll put Read More break between
| | 03:37 | the first and the second paragraphs.
| | 03:38 | You go ahead and do that offline too
and I'll see you at the next video.
| | Collapse this transcript |
| Adding articles to the featured page| 00:00 | As we have been working away here in Joomla!
| | 00:02 | and creating all of these articles,
nothing has actually showed up on the
| | 00:05 | front-end of our website.
| | 00:06 | We've been slaving away over this
website, working away all day long, putting
| | 00:10 | in tons of time and effort into this
website and we still have nothing to show for it.
| | 00:14 | The reason why is that we haven't
created any of the menu items that will cause
| | 00:18 | any of the articles that we've
entered into the system to show up on the
| | 00:21 | front-end of the website.
| | 00:22 | I will be covering how to do that in the
next chapter and then it will look like
| | 00:26 | we do a lot of work really fast.
| | 00:28 | But in the meantime there is a way,
and only one way, to get articles that
| | 00:32 | are inside of Joomla!
| | 00:33 | to show up on the website
without making a menu link.
| | 00:36 | And that is by making them featured
articles which will allow them to appear on
| | 00:40 | the homepage of the website.
| | 00:42 | Previously these homepage articles
were called Front Page Articles, but I've
| | 00:45 | found that a lot of people got that
term Front Page confused with Microsoft
| | 00:50 | FrontPage, and then they started to wonder
why Microsoft FrontPage was inside of Joomla!
| | 00:55 | And they were right to be
upset about that by the way.
| | 00:57 | Fortunately, Joomla!
| | 00:58 | has renamed this to the Featured
Articles which I believe is a little bit more
| | 01:02 | user-friendly. Featured Articles
then show up on the Featured page or the
| | 01:06 | homepage of the website.
| | 01:08 | So in this next video I am going to put
in all of the content for my exhibits
| | 01:12 | portion of the website and I am going
to have a couple of these articles become
| | 01:15 | Featured Articles that will appear on
the homepage, and I am going to walk you
| | 01:18 | through how to do that.
| | 01:20 | Because all of these articles
pertain to exhibits, they all have images
| | 01:23 | associated with them.
| | 01:24 | So the first thing I'd like
to do in the backend of Joomla!
| | 01:27 | is upload all of my images to the Media Manager.
| | 01:30 | I could do that through the interface
that we've used before inside of the
| | 01:34 | individual article or I could just go to
the Media Manager and do this directly.
| | 01:38 | So just to add a little variety to
the process I am going to start by going
| | 01:42 | to the Media Manager.
| | 01:43 | The icons here on my Control panel, or
you can go to Content Media Manager.
| | 01:49 | And down here at the bottom of the
screen I've configured this to use the Flash
| | 01:54 | Uploader so I can upload
lots of pictures at once.
| | 01:56 | I am going to click my Browse Files button.
| | 01:58 | We are going to go to video number six
here and you can see that there are many
| | 02:03 | images that are available here.
| | 02:05 | So I'm going to hold down my Ctrl key
and I'm going to click on each of these
| | 02:11 | individually, so that I can select
all of the images at once and say Open.
| | 02:16 | And you will see all of my images queue
up here underneath, these are all of the
| | 02:21 | images I am going to upload at the
same time, and then I am going to click on
| | 02:24 | the Start Upload button.
| | 02:26 | And you will see boom, boom, boom, all
of my images upload very quickly right
| | 02:30 | here into the Media Manager.
| | 02:32 | Now I won't have to upload them
individually as I go through the rest of the
| | 02:35 | website or on an article-by-article basis.
| | 02:37 | I've just uploaded them all
at once and they are available.
| | 02:40 | So now that images are here, I'm going to go
to Content>Article Manager>Add New Article.
| | 02:47 | Inside of your Exercise Files there is a
text file that has four articles we are
| | 02:52 | going to add to this website.
| | 02:54 | There is a Current Exhibits article
which is very short. Then we have the two
| | 02:58 | articles that will wind up on the
front page of our website as well as on the
| | 03:01 | exhibits page of the website.
| | 03:03 | This includes the article here about the
Current Exhibit and the Upcoming Exhibit.
| | 03:09 | And then finally we have a longer
article here called Permanent Collections.
| | 03:12 | And I will show you how to
put all of those in place.
| | 03:15 | So we'll start with the Current Exhibit article.
| | 03:17 | I will go ahead and Ctrl+ or Command+C
having highlighted the text, paste
| | 03:23 | this into my Joomla! article,
| | 03:24 | and I'll set the category
for this to the Visiting Exhibits.
| | 03:31 | Then once again, I'm going to
highlight the text for the article,
| | 03:35 | Ctrl+ or Command+C,
Ctrl+ or Command+V to paste it in place.
| | 03:38 | And I am going to click in between the first
and second paragraph and click my Read More button.
| | 03:43 | Now I have been clicking between the
first and second paragraph for all of these
| | 03:47 | articles which really has more to do
with consistency and it seems like an
| | 03:52 | obvious place to click and put in a read more.
| | 03:54 | You can put in a Read More anywhere
within your article including, if you wanted
| | 03:59 | to put it here after SAMOCA
presents a collection of paintings.
| | 04:02 | And you wanted to put that Read More
right here, you could click right there and
| | 04:06 | put the Read More in place and Joomla!
| | 04:07 | would be just fine with that.
| | 04:09 | Now I need to add in image to this
article and the image is going to go at the
| | 04:12 | top of the page again.
| | 04:14 | So I'm going to hit Return, just
like that and put the image in.
| | 04:17 | So I am going to click my Image button.
| | 04:20 | And you will see here I have an image
that says exhibits-westhoff. Go ahead and
| | 04:25 | click on that and we can give this an
image description, Westhoff's work at
| | 04:32 | SAMOCA. And I will go ahead
and click my Insert button.
| | 04:36 | So you see that we have an image
here on the top of this article.
| | 04:42 | Now, so far what I have done is no
different than any of the other training
| | 04:45 | videos you have seen to this point.
| | 04:47 | How do I then get this on the homepage?
| | 04:49 | Well, right here, there is an item here
called Featured and you can assign this
| | 04:54 | to the Featured blog layout.
| | 04:55 | So Featured I can change from No to Yes.
| | 04:59 | And by doing that, and then I am going to
hit Save & Close, you'll see here in my
| | 05:03 | Article Manager that the Featured
article is now starred inside of the Featured
| | 05:07 | column, indicating that
this is a Featured Article.
| | 05:11 | If I click on the star again you will
see as the tool tip says this will toggle
| | 05:15 | the article from featured to un-featured.
| | 05:17 | So now as if I go to the front-end of
the website and I click my Refresh button,
| | 05:22 | you'll see that we have our articles
showing up here on the front page of the
| | 05:26 | website, the homepage.
| | 05:28 | I hear you graphic designers out there,
you are screaming and hollering about
| | 05:32 | how ugly this page is, and I know it
says Home at the top and I know that
| | 05:36 | there's all this nonsense here about
Category and Hits and Written by Super User
| | 05:40 | and you want it to all go away right now.
| | 05:42 | I know, because I feel your pain.
| | 05:45 | But this is Joomla!'s default
configuration and I am going to show you how to
| | 05:49 | get rid of all that stuff in later videos.
| | 05:51 | But for right now please just live
with it for the moment and all will come
| | 05:55 | around right in the end.
We will make a prettier site.
| | 05:57 | If you click on the Read More link here
from the homepage, you'll see that this
| | 06:01 | takes you to the full version of the
article with all of the text on the page.
| | 06:05 | All right, so I am going to hit the
Back button to go back to my homepage.
| | 06:10 | So now that that article is in place, let's
put in the second article for the homepage.
| | 06:13 | I am going to go ahead and
click the New button and I'm going to go
| | 06:19 | to the Paul Shellmont: Bird Watching
| | 06:20 | article, highlight the text,
Ctrl+ or Command+C to copy,
| | 06:24 | Ctrl+ or Command+V to paste. We will assign
this once again to the Visiting Exhibits category.
| | 06:30 | We will set our Featured to Yes because
we do want this on the homepage as well.
| | 06:35 | Then I am going to go ahead
and put in my image which is the
| | 06:39 | exhibits-shellmont, picture of birds
there, and say Paul Schellmont at SAMOCA
| | 06:49 | for our Alt tag and say Insert.
| | 06:53 | At the end of the picture, then I am
going to go to my text article here and I
| | 06:58 | am going to highlight all of the text
that pertains to this article,
| | 07:02 | Ctrl+ or Command+C to copy, Ctrl+ or Command+V to paste.
| | 07:05 | I am going to click in between the first
and second paragraph and put in my Read More.
| | 07:11 | I am going to take the words here A
balloon for Marcel and make them italic,
| | 07:16 | because that is the title
of a Oscar-winning short.
| | 07:22 | And so this article is now in place,
you see that we have two paragraphs of
| | 07:26 | information a Read More link, we have an image.
| | 07:29 | So I am going to go ahead
once again and hit Save & Close.
| | 07:33 | And when I refresh the front-end of
the website, you will see that we have
| | 07:38 | our Paul Shellmont article here and
then underneath we have our Current
| | 07:43 | Exhibit article here.
| | 07:44 | And yes, you are absolutely right,
the Current Exhibit article is kind of
| | 07:48 | smooshed up skinny and the upcoming
exhibit article is kind of broad, it goes
| | 07:55 | all the way across the page and you
want the current exhibit listed before the
| | 07:58 | upcoming exhibit, gotcha!
| | 07:59 | We are going to cover all
of that in some later videos.
| | 08:02 | But for right now, just be okay
with what's here, we are getting there.
| | 08:07 | Okay, so now we've got those two items
in place and we have two more articles to put in.
| | 08:13 | We have our Current Exhibits article,
which I am going to do next. Click the
| | 08:19 | New button and I'm going to go ahead
and highlight the title Current Exhibits.
| | 08:26 | Ctrl+ or Command+C to copy,
Ctrl+ or Command+V to paste.
| | 08:31 | This one I'm going to put directly
into the Collections category, here we go.
| | 08:38 | And I'm going to highlight this little
bit of text right here for the article,
| | 08:43 | and I am going to just paste that in place.
| | 08:45 | No Read Mores, and I am not going to
make this a Featured Article either, I am
| | 08:49 | just simply going to put it in
place just like it is just like this.
| | 08:53 | I am going to go ahead and hit Save &
Close, and I am going to put-in my last
| | 08:58 | article by clicking on my New button.
| | 09:02 | And under Permanent Collections I am
going to go ahead and highlight the word
| | 09:06 | Permanent Collections, Ctrl+ or Command+C to copy,
Ctrl+ or Command+V to paste.
| | 09:12 | I am going to put this in the Permanent
Collections category, not going to make it featured.
| | 09:16 | And I'm going to highlight all the text
that you see here, which it's kind of long.
| | 09:21 | Ctrl+ or Command+C to copy,
Ctrl+ or Command+V to paste.
| | 09:26 | And this one is going to take just a
little bit of formatting, we start off with
| | 09:30 | this introductory paragraph here about SAMOCA.
| | 09:34 | Then I'm going to have a subhead here for
Paintings, I am going to set that to an H2.
| | 09:39 | I am going to have a
subhead here for Photography.
| | 09:44 | I am getting rid of the break tags as
you are watching me here and turning these
| | 09:49 | into paragraph tags,
using backspacing and returns.
| | 09:54 | And then last here, I am going to get
rid of those breaks and set Sculpture as
| | 10:02 | an H2 as well.
| | 10:04 | All right, so this will go ahead and
be a summary of all of the permanent
| | 10:08 | collections at the museums in terms of
Painting, Photography, and Sculpture.
| | 10:11 | So I am going to go ahead and hit Save &
Close, and at this point we now have all
| | 10:17 | of our information about these
particular articles here into the system, but
| | 10:21 | I've neglected to put in the pictures.
| | 10:24 | So let me go back and go ahead
and add those pictures to these
| | 10:27 | particular articles.
| | 10:28 | Under Current Exhibits, I am going to
put in the Current Exhibits picture right
| | 10:37 | here at the top of the article.
| | 10:38 | Now it will be this exhibits-current
image. Current Exhibits at SAMOCA, will be
| | 10:49 | my Alt text, go ahead and say
Insert and Save & Close that one.
| | 10:55 | And then we have several images actually
for this Permanent Collections article.
| | 10:59 | Go ahead and click on that.
| | 11:02 | After Paintings we'll put in a Return
here and click our Image button and there
| | 11:07 | is an image here called Paintings,
Paintings in SAMOCA's permanent collection.
| | 11:20 | Insert that picture, that picture
wound up going in the wrong spot.
| | 11:23 | I am clicking on it to highlight and then I am
going to Ctrl+ or Command+X to get rid of it.
| | 11:28 | And I am going to click down here
where I really want it to go and Ctrl+ or
| | 11:31 | Command+V to paste it in place. Let's
see if that works this time, there we go.
| | 11:37 | Then after Photography, once again I
am going to put my cursor right here.
| | 11:42 | I have an image here in the
Media Manager called photography.
| | 11:46 | And say we'll say Photography in
SAMOCA's permanent collection, insert that
| | 11:57 | picture. And it looks like there's
something a little bit buggy going on here
| | 12:01 | because it keeps putting the
pictures at the top of the article.
| | 12:04 | So once again Ctrl+ or Command+X to
get rid of that picture in that place.
| | 12:08 | Scroll on down a little bit Ctrl+
or Command+V to put the photography
| | 12:11 | picture in the right spot.
| | 12:13 | And then once again with Sculpture
click on the Image button, find the image
| | 12:18 | called Sculpture, Sculpture in
SAMOCA's permanent collection.
| | 12:28 | And we will insert that, and once again
it puts it at the top of the article,
| | 12:32 | Ctrl+ or Command+X scroll back on
down to where it should be Ctrl+ or
| | 12:37 | Command+V to paste it in place.
| | 12:40 | So we now have an article
that has three images in it.
| | 12:43 | We have a little bit of introductory
text that we have a subhead of Paintings
| | 12:46 | followed by an image, followed by some
text, subhead of Photography, an image
| | 12:51 | followed by some text and a subhead
of Sculpture followed by an image,
| | 12:55 | followed by some text.
| | 12:57 | Okay, go ahead and hit Save & Close,
and now we've entered the four articles
| | 13:02 | here for the exhibits part of the website.
| | 13:04 | They are all in place, they all have
images. There are two with Read Mores that
| | 13:08 | are showing up on the homepage.
| | 13:10 | Ultimately all four of these articles
will show up on the exhibits page of the
| | 13:13 | website and we will see how to
configure that and make that happen in the
| | 13:18 | Menus chapter.
| | Collapse this transcript |
| Deleting and restoring articles| 00:00 | If you are done with a particular
article and you don't need it anymore, you
| | 00:04 | can delete it entirely.
| | 00:06 | Your other option is to unpublish an article.
| | 00:09 | Unpublishing an article means that
you've left the article in the database, where
| | 00:13 | you could retrieve it again if
somebody changes their mind, but it's not
| | 00:17 | available for viewing on the website.
| | 00:19 | Deleting an article means that you've
removed the article from the database
| | 00:23 | entirely, once you've
permanently deleted it from the trash.
| | 00:27 | So when you tell an article to be
deleted it first goes to the trash and that's
| | 00:30 | where it's going to live until you
empty the trash and delete it permanently.
| | 00:35 | Trash doesn't quite work like it
does in Windows or Mac computer.
| | 00:39 | So I wanted to show you how to delete articles.
| | 00:43 | So we're going to go into the
Article Manager and I am going to create an
| | 00:47 | article specifically to delete it.
| | 00:49 | So I am going to hit my New button and
I am going to call this article Trash Me
| | 00:55 | and I am just going to leave it in the
Uncategorised Category because I don't
| | 00:58 | care, because I am going to delete it.
| | 00:59 | Down here in the text, you have to
have a little bit of text or Joomla!
| | 01:02 | won't save your article.
| | 01:04 | This is a test article to demonstrate
publishing, unpublishing, and deleting.
| | 01:14 | And then I am going to hit Save & Close.
| | 01:16 | And you will see here in my Article
Manager that I have my article right
| | 01:20 | here called Trash Me.
| | 01:21 | What I can do right now in this
particular article is it's available to see on
| | 01:26 | the website, because it's published.
| | 01:28 | How do I know this is a published article?
| | 01:29 | Right here in this column there is a
green checkmark, if I roll my mouse over it
| | 01:33 | says this is a published and current
article, it tells me the date that I
| | 01:37 | published this particular article.
| | 01:38 | Even if I don't make a link directly to
this article because I have it on a menu
| | 01:44 | somewhere on the website.
| | 01:45 | If I have search enabled on my
website it's possible that this particular
| | 01:50 | article can still show up in my search
results or somebody may have a URL that
| | 01:55 | will take them to this article.
| | 01:56 | So any time anything is published here,
you do run the possibility that it could
| | 02:01 | be seen somewhere on your website.
| | 02:03 | If you want to be sure that that
article cannot be seen on your website your
| | 02:07 | choices are to unpublish it or delete it.
| | 02:10 | To unpublish it, simply click the
green checkmark once and you'll see that it
| | 02:15 | turns into a little red blob,
indicating that the article still exists, but it
| | 02:20 | is currently unpublished, meaning that
it won't show up in Search results, even
| | 02:24 | if you have it linked up to a menu,
the article will not display on the
| | 02:28 | front-end of your website.
| | 02:30 | But it is still present
inside of your Joomla! website.
| | 02:32 | And why that might be good?
| | 02:34 | Perhaps this is an article that you
pull out every June for example or you pull
| | 02:39 | it out on June 1, you put it up on the
website for a month and then you pull it
| | 02:43 | off the website on July 1st.
| | 02:45 | And you just would like to keep it in
your system in case you'd like to pull it
| | 02:50 | up and put it out there again next year.
Or you have a boss who might change
| | 02:55 | their mind frequently and you know that
if you delete this particular article in
| | 02:59 | two days your boss might come back to
you and ask for you to put that article
| | 03:01 | back up again and you want to be sure
that you have it so that it's easy to put
| | 03:04 | it back up on the website.
| | 03:06 | So there are great reasons
to unpublish an article.
| | 03:09 | If you want to delete it entirely, it
doesn't matter if it's currently in the
| | 03:13 | published or the unpublished state.
| | 03:15 | Simply put a checkmark next to the
name of that article and then go up to the
| | 03:20 | top of the page and where it says Trash,
go ahead and click the Trash button.
| | 03:27 | You will see that that particular
article has gone to the trash, you don't see
| | 03:31 | it in the list anymore.
| | 03:32 | Is that article actually gone?
| | 03:34 | Well, no, not really.
| | 03:37 | If I make a new article that I call
Trash Me and, another Trash Me article, and if
| | 03:51 | I hit my Save button here in the top
the page, I'm actually going to get an
| | 03:55 | error and the error is going to say
saved with the following error another
| | 03:58 | article from this category has the same alias.
| | 04:02 | That is because I have called this by
the same title, Trash Me, that was the same
| | 04:06 | as the article that I just
trashed, and when Joomla!
| | 04:09 | creates its alias it created it
exactly the same way. Joomla!
| | 04:12 | thinks that because that Trash Me
article is sitting in the trash it doesn't
| | 04:17 | want to create a second
article with the same alias.
| | 04:19 | You have to delete the article
entirely and completely remove it from the
| | 04:24 | database before you can have an
alias that's exactly the same as before.
| | 04:29 | So I am going to hit my Cancel
button here, I don't really want to make
| | 04:31 | another Trash Me article.
| | 04:33 | Let me show you the trash.
| | 04:35 | You would think you could just click on
the Trash button here on the top and see
| | 04:38 | the trash, but in fact that doesn't work.
| | 04:41 | What you'll have to do is use these
dropdowns here on the top of the screen and
| | 04:45 | the one over here that says Select
Status, switch this to the status of Trashed,
| | 04:50 | and this will show you all of the
items that are here in the trash.
| | 04:52 | There's the Trash Me article.
| | 04:54 | To really truly get rid of this article
put a checkmark next to it and then go
| | 04:59 | to the Empty Trash button
here in the upper right.
| | 05:03 | Now you'll see that there are no
articles here in the trash, in order to get
| | 05:07 | back to your regularly published
articles you'll need to switch this dropdown
| | 05:11 | back to either Published to show you
just the published articles or to Select
| | 05:16 | Status which will show you Published,
Unpublished and Archived articles all here in a list.
| | 05:22 | So, there we go, now we have in
fact deleted the Trash Me article.
| | 05:26 | One final point to be sure to remember;
just because you trash an article
| | 05:31 | does not mean that its menu link is
also trashed it's possible to trash an
| | 05:36 | article and still have a menu link
out there that tries to link to an
| | 05:40 | article that no longer exists.
| | 05:42 | So when you're deleting things from
your website I recommend that instead of
| | 05:46 | following the CAM (Categories, Articles
and Menus) you go in reverse order and
| | 05:51 | do the MAC, starting with Menus,
then Articles and then Categories.
| | 05:56 | So delete all your menu items first,
then delete your articles and then
| | 06:00 | delete your categories.
| | 06:01 | And by working backwards from CAM to MAC
then you can be sure that you've gotten
| | 06:06 | rid of any stray links on your website
that might cause usability problems and
| | 06:10 | people wondering why they can't get to
any of the information on your website.
| | Collapse this transcript |
|
|
5. Creating Menus for Your SiteUnderstanding and configuring menus| 00:02 | Remember the CAM;
Categories, Articles and Menus.
| | 00:04 | In the beginning you need
to create Categories first.
| | 00:08 | Once you have Categories in place
then you can create your Articles.
| | 00:11 | Remember that each article is
assigned exactly one category.
| | 00:14 | You have to have all of the articles in
place before you can start creating Menu Items.
| | 00:20 | The Menu Items can be a wide
variety of different things.
| | 00:23 | You can link directly to a single
article or you can make a blog of articles, a
| | 00:27 | list of articles, and there
are many other options as well.
| | 00:30 | I'll be covering all of those here in Chapter 5.
| | 00:33 | Creating Menus for your website.
| | 00:35 | First of all though we need to see
how the menus work. All of Joomla! articles
| | 00:39 | and components must some how to
be linked to a menu. Otherwise Joomla!
| | 00:44 | will not function properly Joomla!'s menus
are divided into two parts; first of
| | 00:50 | all there's this Menu Manager.
| | 00:52 | If you roll your mouse over the Menus
link at the top of the page, you'll notice
| | 00:56 | two things; one being this Menu
Manager and one being the Main Menu.
| | 01:00 | I am going to click on the Main Menu.
| | 01:02 | Here on my Main Menu screen you'll
see that I have exactly one link for a
| | 01:07 | website, the homepage.
| | 01:09 | That's what Joomla! creates
| | 01:10 | for you by default.
| | 01:12 | The second option that I have under
the Menu Item is the Menu Manager, which
| | 01:17 | I can get to here or I can get to it by
clicking on Menus here in the sub-navigation.
| | 01:22 | Both of these take you to the same place.
| | 01:25 | This is the Menus, Menu Manager and
this is where I manage multiple menus for
| | 01:31 | the website, not the items
that actually go on the Menu.
| | 01:35 | This screen gives you
information about the actual menu itself.
| | 01:39 | In this case it's showing us that
there is exactly one Published article, no
| | 01:44 | Unpublished articles and no Trashed menu items.
| | 01:47 | It shows that there is also a module linked
to this menu, over here on the side Main Menu.
| | 01:53 | Our Menu Manager and our Menu Item
Manager are responsible for organizing
| | 01:58 | the links on this menu.
| | 02:00 | However, these do not control where
the menu displays on the webpage.
| | 02:05 | The Module controls where this menu
will display on your webpage, and how many
| | 02:09 | levels of navigation will appear.
| | 02:12 | You can find the Modules
under Extensions>Module Manager.
| | 02:17 | So if I go here, you'll see that I have
this item here called Main Menu and it's
| | 02:22 | currently displaying in position 7.
| | 02:25 | That happens to correspond to
the left navigation of the website.
| | 02:28 | I am going to go ahead and click on this
and you'll see here in my Basic Options
| | 02:33 | that this particular module is
displaying some portion of the Main Menu and it's
| | 02:39 | starting at the very top level of
navigation here, where it say Start Level 1
| | 02:43 | and it's displaying absolutely
everything on the website going down.
| | 02:47 | That's the all here at the end level.
| | 02:48 | I will be going through the Start and
End Level in a later video to show you
| | 02:53 | how you can hone your navigation to
display just a subset of links on specific
| | 02:57 | areas of your website.
| | 02:59 | So now I am going to go
ahead and click my Close button.
| | 03:02 | So remember that your Menus in Joomla!
| | 03:04 | work in two parts; one is the actual
Menu Manager itself, which is where you
| | 03:10 | create the links for your website, and
the second part is the Module which is
| | 03:14 | where the links will display.
| | 03:17 | The Menu Module lives within the Module
Manager under Extensions>Module Manager
| | 03:21 | and Menus live under the
Menus Item in your Joomla!
| | 03:24 | backend navigation.
| | Collapse this transcript |
| Linking an article to the menu| 00:00 | Now that we understand how Menus
work let's get started hooking up our
| | 00:04 | articles to our Menu.
| | 00:06 | Creating a link to an article is
a very easy thing to do in Joomla!.
| | 00:09 | So I am going to start by adding the
About page to our Main Menu which is a menu
| | 00:14 | that's already created for us here in Joomla!.
| | 00:15 | To do that I am going to go to Menus>
Main Menu>Add New Menu Item and you'll see
| | 00:23 | that we get a screen here which will
help us Add that menu item to our website.
| | 00:27 | The first thing that's required is
our Menu Item Type, and if you click the
| | 00:31 | Select button we're going get a
shadow box that comes up that gives us many
| | 00:35 | options that we can choose from for
types of links that we want to create.
| | 00:39 | Well, we want a link to an article, so
we can eliminate everything on this page,
| | 00:43 | except what's over here under Articles.
| | 00:45 | And we really just want to
link to one article on this website.
| | 00:48 | So if you read through the list quickly
you'll notice that Single Article is our
| | 00:51 | option, so go ahead and click that.
| | 00:55 | The next thing this will
ask you for is our Menu Title.
| | 00:57 | These are the words that are going to
show up in the navigation for the website.
| | 01:01 | They are the words that you're going
to click on to take you to this page.
| | 01:04 | In general, your Menu Title is going to
be exactly the same as your Article Title
| | 01:08 | to reduce confusion.
| | 01:10 | But if you happened to be working with
a client who likes very long titles for
| | 01:15 | some of their articles, you may take a
subset of those words to create your Menu Title.
| | 01:19 | So we're linking to the About page, so
we're simply going to type-in the word
| | 01:22 | About for our Menu Title.
| | 01:24 | And then finally, over here on the
right side of the screen under Required
| | 01:28 | Settings, it asks us which
article we would like to link to?
| | 01:32 | So I am going to click the Select
button, and this is going to show me all of
| | 01:35 | the currently available articles on the website.
| | 01:38 | The one I want to link is called About Us,
I am going to go ahead and click that,
| | 01:42 | and then all I am going to
do is click Save & Close.
| | 01:45 | You'll see here now in our Menu Item
Manager that we have two links on our
| | 01:49 | website the Home link and the About link.
| | 01:52 | The Home link is our homepage which we
know because it's selected over here in
| | 01:57 | our column as the default menu item.
| | 01:59 | In other words when you're on your
website and you type-in localhost, the
| | 02:03 | homepage is the page that is going to
load as opposed to the About page or some
| | 02:08 | other page on the website.
| | 02:09 | If I go to the front-end of the
website here and I click the Refresh button,
| | 02:14 | you'll see that my Main
Menu has now grown by one item.
| | 02:18 | The About page and if I click on that,
you'll see that we now have an About Us
| | 02:22 | article, and here we have the big
picture and we have this nice formatting.
| | 02:26 | Remember that we had specified
Celebrating the Best of Modern Art and An
| | 02:30 | Introduction is H2's on this particular
page, whereas the other texture is set
| | 02:35 | up as paragraph text.
| | 02:36 | We can finally also test our link here
for the Ventura to the cityofventura.net.
| | 02:42 | If I go ahead and click that link you
can see that this opens a new tab and the
| | 02:46 | City of Ventura website goes ahead
and opens in that particular tab.
| | 02:51 | So everything works exactly as we
expected it to work and linking to a single
| | 02:56 | article on your Joomla!
| | 02:57 | website is as simple as it can be.
| | 02:59 | Only three pieces of required information,
you have to remember; the actual words
| | 03:03 | that will show up in the Main Menu the
Menu Title, the required article that to
| | 03:08 | which you're going to link, and be sure
that you pick the single article as your
| | 03:12 | Menu Item Type for your particular website.
| | Collapse this transcript |
| Understanding parent and child menu items| 00:00 | Parent and child are common terms used
in programming, but typically designers
| | 00:05 | 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 underneath
the parent, like a secondary navigation item.
| | 00:20 | Children can then 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 | So I am going to take a quick peek at
my site map again which is inside of your
| | 00:32 | Exercise Files and you'll see here
that for our About link for this website,
| | 00:37 | underneath we have a Volunteer
with us and an Our Director link.
| | 00:41 | These are both also single
articles, but they need to show up as
| | 00:44 | secondary navigation;
| | 00:46 | they are not at the same
level as the About link.
| | 00:48 | So About in this case serves as the
Parent and Volunteer with us and Our
| | 00:53 | Director are Children of the About link.
| | 00:56 | So I am going to go ahead and include
links to the Volunteer with us and the
| | 01:00 | Our Director page now.
| | 01:02 | So to do that, I am going to go to
Menus>Main Menu>Add New Menu Item.
| | 01:08 | My Menu Item type, once again, click
on the Select button and I will select a
| | 01:12 | single article from the list.
| | 01:14 | For the Menu Title, I'll call this
Volunteer With Us and I will select my single
| | 01:21 | article over here from the side, click
the Select button, and this is going to
| | 01:26 | be the Volunteer link.
| | 01:28 | Now if I hit my Save button right now, this
would show up at the same level at Home and About.
| | 01:33 | So our navigation would say Home,
About, and Volunteer With Us.
| | 01:37 | I would like Volunteer With Us
to show up under the About link.
| | 01:41 | So I need to change its parent.
| | 01:43 | And over here on the left side of the
screen, you'll notice that we have an
| | 01:46 | option here for a Parent item.
| | 01:48 | Right now, that's set to the Menu
Item Root, in other words, the same level
| | 01:52 | as the homepage link.
| | 01:53 | I'm going to change that to the About
item and then I am going to go ahead
| | 01:57 | and hit Save & New.
| | 01:58 | So I have saved my Volunteer With Us
article and I have opened up a new blank
| | 02:03 | screen here so I can put in the next one.
| | 02:05 | But meanwhile, I am going to
peek over here at my website.
| | 02:07 | If I click on my About link on the
website, you'll see that now we have an
| | 02:12 | option come up for Volunteer With Us.
| | 02:14 | And if I click on the Volunteer With
Us link, then we have our Volunteer
| | 02:18 | article, shows up on the website which is great,
it's exactly what we want to have happen.
| | 02:23 | And if I go back to my Home link,
notice that that secondary navigation under
| | 02:27 | About does disappear. That's by design.
| | 02:30 | We are not wanting to show all
of our navigation all of the time.
| | 02:33 | We want that secondary navigation show
up only when we're in, in that particular
| | 02:36 | part of the website.
| | 02:37 | So I am going to go back here to the
backend and make my second link to the
| | 02:41 | Our Director article.
| | 02:43 | Once again, I am going to click the
Select button and I am going to go to the
| | 02:46 | Single Article, my title would be Our
Director, and the article I am going to
| | 02:53 | select is Our Director.
| | 02:56 | Finally, my Parent Item down here
will once again be the About article.
| | 03:00 | Notice that Volunteer With Us is an
option and I could make Our Director a
| | 03:05 | child of Volunteer With Us, but then that
wouldn't necessarily make a whole lot of sense.
| | 03:10 | Rest assured that you can nest your
navigation as many levels deep as you wish.
| | 03:15 | But should you just because you can?
| | 03:18 | So I am going to go ahead and select
About and I am going to say Save & Close.
| | 03:21 | This will put me back into my Menu
item manager, you will see we have a Home
| | 03:25 | link and About link and you'll notice
that Volunteer With Us and Our Director
| | 03:28 | are children of About, you'll see
that they're slightly indented here.
| | 03:32 | When I go back to the front-end of the website
and I click on the About link, I had two options;
| | 03:37 | the Volunteer With Us and the Our Director page.
| | 03:40 | So here's the information about Our Director.
| | 03:43 | So that is how you set up some
sub-navigation here inside of Joomla!.
| | 03:48 | Linking to single articles is probably one of the most
common things you'll do on your Joomla! website,
| | 03:53 | but you will also wind up
setting up some blogs as well which I am
| | 03:57 | going to cover in the next video.
| | Collapse this transcript |
| Configuring category blogs| 00:01 | Now that we've hooked up a few
articles to our website, what about a bunch of
| | 00:04 | articles on one page, like the News page?
| | 00:07 | I showed you the Read More feature
in an article in an earlier video.
| | 00:11 | That would create a short introduction
to an article with that Read More link
| | 00:15 | underneath, very similar to what we're
seeing on the Home page of the website,
| | 00:19 | but now I'd like that on a
page that's not the Home page.
| | 00:22 | That particular type of functionality in Joomla!
| | 00:25 | is known as blog.
| | 00:26 | Think of that as the blog functionality,
as opposed to some kind of writing with
| | 00:32 | the daily entry as you might be
thinking of in terms of a blog.
| | 00:36 | So we're going to use this blog
display method to display all of our news
| | 00:40 | articles on this website.
| | 00:41 | So to start by creating a blog, we're going to
go to Menus>Main Menu>Add a New Menu Item,
| | 00:46 | and once again, we're going
to start by clicking the Select button here.
| | 00:51 | And this time we're going
to be making a category blog.
| | 00:56 | So we're going to go ahead and click
the Category Blog link here, and notice
| | 01:01 | that we wind up with some different
options over here, particularly on the right
| | 01:04 | side of the page when we pick
a different type of menu item.
| | 01:06 | So I'm going to start by
giving this a title, like News.
| | 01:10 | I'm going to want this on the
same level as my Home and About link.
| | 01:13 | So I'm not going to change the Parent Item.
| | 01:15 | Than over here on the right side of the
screen, I'm going to choose a category.
| | 01:19 | This is actually News & Events.
| | 01:21 | So my category that I'm going to choose
here is the News & Events category.
| | 01:26 | The way this blog will work is it'll
display this category, News & Events, plus
| | 01:30 | the News & Events items that go underneath.
| | 01:33 | I'm going to go ahead and hit Save & Close.
Now when I go to my front end
| | 01:40 | of the website, and I click Refresh,
I'll wind up with a News & Events link
| | 01:44 | here down underneath.
| | 01:45 | Now I can go ahead and click that, and
this particular page is now showing me
| | 01:50 | the subcategories in News.
| | 01:52 | It's not showing me anything for
Events because I haven't entered the Events
| | 01:55 | information just yet.
| | 01:57 | I'll be adding the Events content in a
few videos and if we go back and visit
| | 02:01 | this page at that point in time, we'll see
that there's a link to the Events at that point.
| | 02:05 | So if I click on News, you'll see
that I do, in fact, have my news articles
| | 02:11 | here, all of the Read Mores are in place.
| | 02:13 | Once again, you may not be thrilled
with the layout of this particular page.
| | 02:17 | You may not have been thrilled with the
options that are available to us on this page.
| | 02:21 | Don't panic.
| | 02:23 | In fact, in the next video, on
advanced category blog configuration, I will
| | 02:27 | show you how to take this page and
clean it up and make it look a little bit
| | 02:31 | prettier.
| | Collapse this transcript |
| Advanced category blog configuration| 00:00 | The next part of this website that I
am going to build out is the exhibits
| | 00:03 | portion of the website.
| | 00:04 | The exhibits portion of the
website is called Collections as the main
| | 00:08 | navigation item. I am going to link the
Collections navigation item to a single article.
| | 00:14 | Then I am going to have two-step
navigation items for collections; one will be
| | 00:18 | Visiting Exhibits, which will wind up
being a Category blog, and the second one
| | 00:21 | will be Permanent Collections
which will be a single article link.
| | 00:24 | So let's go ahead and set
all those up real quick.
| | 00:27 | Now hop into the back end of Joomla!
| | 00:29 | and I am going to go to Menus>Main Menu
>Add New Menu Item, and I am going to
| | 00:37 | click the Select button, and I am going
to go to a single article. The single
| | 00:43 | article is going to be my
Collections top level navigation item.
| | 00:49 | The article that I'm going to link to
you is the one that's called Current Exhibits.
| | 00:54 | This will give us a little bit of
information about some of the collections that
| | 00:58 | are there at the museum.
| | 00:59 | I am going to go ahead and click Save & New.
Then I am going to make a link
| | 01:05 | to my Visiting Exhibits.
| | 01:07 | So this is going to wind
up being a Category blog.
| | 01:09 | I will click my Select button again
and I am going to go Category blog.
| | 01:13 | The Menu Title will be Visiting
Exhibits, and my Category will be the
| | 01:22 | Visiting Exhibits category.
| | 01:25 | This is going to be a child of
the Collections main navigation item.
| | 01:31 | Once more I am going to click
Save & New and I'm going to make a
| | 01:36 | single article link again.
| | 01:37 | So under Articles, I am going to go to
Single Article, and I am going to give
| | 01:42 | this menu title Permanent Collections.
| | 01:45 | I am going to make this a child of
Collections as well, and the article for this
| | 01:53 | one that I will select is the
Permanent Collections article.
| | 01:56 | I am going to go ahead and hit Save & Close.
| | 02:00 | Here in that menu item manager, you
will see that we have Collections, Visiting
| | 02:04 | Exhibits, and the Permanent Collections.
When I go to the front end of the
| | 02:08 | website and I click Refresh, my
Collections menu item shows up here.
| | 02:13 | When I click that, I get
information about the Current Exhibits.
| | 02:17 | When I click on Visiting Exhibits
I get my Category blog, which is not
| | 02:22 | formatted in the most beautiful way at
the moment, in which we're about to go fix.
| | 02:26 | I get a link to my Permanent Collections
article as well, which you see here.
| | 02:30 | Okay, so Visiting Exhibits is a category
blog and it's definitely not beautiful.
| | 02:38 | So I'd like to go ahead and change
in the options for formatting this.
| | 02:41 | So to do that here in the backend of Joomla!,
I am going to click on my Visiting
| | 02:45 | Exhibits menu link one more time.
| | 02:49 | So far all we looked at is the
required settings here, which is the Visiting
| | 02:52 | Exhibits category, but there are many
other options that are available to us.
| | 02:57 | The most notable one is the Blog Layout Options.
You'll see here that we have
| | 03:01 | the option of setting up our
blog with the following items:
| | 03:05 | Leading Articles, Intro Articles,
Columns, and Links, and you can type numbers
| | 03:10 | into the boxes here.
| | 03:12 | So what do these things actually mean?
What is the default layout for Joomla!?
| | 03:17 | In your Exercise Files, I have made you
a little sketch here in a Word document.
| | 03:21 | This is the default layout for a
category blog inside of Joomla!, and these are
| | 03:25 | where all of those bits
and pieces of information go.
| | 03:28 | The easiest one to start with is Columns.
| | 03:31 | So the number of columns by default is 2,
and you can see here that between the
| | 03:35 | two sets of intro articles,
there are, in fact, two columns.
| | 03:39 | So in all likelihood, we'll want to
set those columns back to one, that will
| | 03:42 | line up all of the articles
one right after the other.
| | 03:45 | The leading article spans across those
two columns and so it's sort of the main
| | 03:50 | article on the page and the idea is that
you can make it Featured, there are CSS
| | 03:55 | handles in place, so that you can style
it slightly differently than the other
| | 03:58 | intro articles on the page if you wish.
| | 04:00 | Generally speaking though, because I
make my blogs one column, I don't really
| | 04:05 | use the leading article that much.
| | 04:07 | So I am going to set that to 0.
| | 04:09 | The Intro articles, by default,
anyway, show the title a little bit of
| | 04:13 | introductory text in that Read More link.
| | 04:16 | So that's what those represent.
| | 04:18 | And then the final bunch of articles
there at the bottom are those article
| | 04:21 | links, the bulleted list.
| | 04:22 | Those are just a list of titles of
articles with clickable titles that you
| | 04:27 | can take you to the full article.
| | 04:29 | You don't see the Intro text or the Read
more even if you've configured them that way.
| | 04:33 | So this particular layout will
accommodate nine different articles, if you count them
| | 04:37 | all up. What if you have 18
articles or 27 articles on your site?
| | 04:42 | Well, what will happen is you will
wind up getting some navigation across the
| | 04:45 | bottom here very similar to Google
where you have the numbers at the bottom of
| | 04:49 | the screen that would let you switch
between pages. You could navigate to other
| | 04:53 | pages of articles that would presumably
be further back in time, although that
| | 04:57 | is something else you can configure
in your Category blog configuration.
| | 05:00 | So now that you know what those bits
and pieces are, I am going to hop back in
| | 05:04 | the Firefox here, and I am going to use
sort of my default set of numbers when I
| | 05:08 | am building in Joomla! website
| | 05:09 | and working with a Category blog.
| | 05:11 | The number of leading articles will be
set to 0, because I don't want any leading
| | 05:15 | articles to show up.
| | 05:16 | I am going to set my Intro articles to
20, in other words, I am going to have a
| | 05:20 | whole bunch of these on one page.
| | 05:21 | My number of columns will be 1, because
I just want these to line up one right
| | 05:25 | after the other and to occupy the full width
of the page, and my number of links will be 0.
| | 05:31 | I don't particularly like the Links
feature here inside of Joomla!, I think it's
| | 05:35 | confusing that some things are
intro in some things are links.
| | 05:38 | You're certainly welcome to
make use of them if you wish.
| | 05:41 | So I am going to go ahead
and hit the Save button here.
| | 05:44 | This will save my work but keep the
screen open for further editing, and now
| | 05:48 | when I go to this Visiting Exhibits
page and I click the Refresh button, you'll
| | 05:52 | see that my articles extend
fully across the page just like this.
| | 05:57 | So the text is extending across the page and
articles line up one right after the other.
| | 06:03 | One of the things you may be
wondering about is these Read More links.
| | 06:07 | On many websites, you just see the word
Read More, but here in Joomla!, we see
| | 06:11 | Read More:, followed by the title of
that particular article, and you might be
| | 06:15 | wondering why that's done.
| | 06:17 | To a search engine or to people with
disabilities, when they visit your website
| | 06:21 | and they are visiting a news page like
this, you might have 20 different Read
| | 06:25 | More links on the page, and all those Read
More links wind up going to different places.
| | 06:30 | Google tends to rate linked words more
highly than words that are not linked.
| | 06:35 | So by putting in a description for what
the Read More will take you to, you are
| | 06:40 | increasing your keyword density on
your Web pages as well as you're helping
| | 06:45 | people with disabilities know which Read
More link they happen to be clicking to
| | 06:49 | get more information.
| | 06:50 | However, you can turn this off inside of Joomla!.
| | 06:53 | I will be showing you that in couple of
chapters from now when I start to clean
| | 06:57 | up some of the bits and pieces on this
page, like that stuff at the top where it
| | 07:01 | says Category and Published
on and Written by and Hits.
| | 07:05 | There are some other options that
we can configure here inside of our
| | 07:09 | Category blog layout.
| | 07:10 | There're some options here for our
Category itself, these will be more
| | 07:14 | relevant to the news link that we made
in previous video in terms of showing
| | 07:18 | which categories, whether we are going
to show description for those particular
| | 07:22 | categories and images and so forth, and how
many articles happen to be in the category.
| | 07:27 | In our Blog Layout Options, there are a
couple things here that I didn't go over with you.
| | 07:31 | I mentioned the Pagination. If you
exhaust the space that's on the page as set
| | 07:37 | here by our number of Leading
articles, Intro articles, and Links.
| | 07:41 | And you go to a second page of
information whether the pagination is available,
| | 07:45 | how that pagination is formatted.
| | 07:48 | You can also choose an
order for your articles here.
| | 07:50 | By default, the global setting is to
put the most recent article first, but you
| | 07:55 | can also order them in any of the ways
that you see here, alphabetical order or
| | 07:59 | reverse alphabetical order, by author,
or hits, or you can order them in your
| | 08:03 | Article Manager, and then they will
show up here on the page accordingly.
| | 08:08 | There are some other options here underneath.
| | 08:10 | I am not going to go through those just yet,
we'll be covering them in later Joomla!
| | 08:13 | videos.
| | 08:14 | There are lots and lots of options
here for formatting your Category blog.
| | 08:18 | And I encourage you to explore them
even though I am not going to go into a
| | 08:22 | whole lot of detail here right now.
| | 08:24 | If you make changes to any of the
settings that are here inside of this
| | 08:28 | particular menu item and then apply
them or click that Save button one at a
| | 08:33 | time, making sure you know exactly
what to changed and then take a look at the
| | 08:36 | layout of the page,
| | 08:37 | that's a great way to explore each of
these settings and see how they affect the
| | 08:42 | layout of your webpage.
| | 08:44 | Just make sure you take careful notes
about what you've changed, so you can
| | 08:47 | change it back if you
don't like what you have done.
| | Collapse this transcript |
| Configuring category lists| 00:00 | We have now covered how to
create single articles on your Joomla!
| | 00:04 | website and Category blogs.
| | 00:06 | You can also create a list
of articles on your website.
| | 00:09 | So what are all of the particular
articles within a given category?
| | 00:13 | Just a list of their titles,
and that's called the Category List.
| | 00:16 | So I am going to go ahead and implement one
of those for the Events portion of our website.
| | 00:20 | We haven't entered the events information yet.
| | 00:23 | So if you take a look in your Exercise
Files, you'll find a document that has
| | 00:27 | two events articles we are
going to go ahead and enter.
| | 00:30 | So if you start by going to your
Article Manager and click the New button, we
| | 00:35 | are going to make two articles here
one is called Family Programs, Ctrl+ or
| | 00:40 | Command+C to copy that title, and
assign it to the Events category.
| | 00:45 | Then down here in the Article text,
we are going to highlight and Ctrl+ or
| | 00:50 | Command+C to copy that information,
Ctrl+ or Command+V to paste it in.
| | 00:55 | And I will go ahead and skip the
Read More on these because I'm going to
| | 00:59 | create a Category list.
| | 01:00 | So that page will just have a list of
all the titles of my Events categories.
| | 01:06 | It's not going to have any
introductory text or anything.
| | 01:09 | I could put in Read more links if I
wanted to, but they are a little bit redundant.
| | 01:13 | So I'm not going to go-ahead and
put those in at this point in time.
| | 01:16 | So I am going to hit the Save & New
button and I am going to enter my next
| | 01:20 | article which is this Artworks
Program Starts on Saturday, March 3.
| | 01:23 | I am going to highlight the text, Ctrl+ or
Command+C, Ctrl+ or Command+V to paste it in.
| | 01:29 | The Category will be the Events
category and once again, Ctrl+ or Command+C to
| | 01:35 | copy my text from my article.
| | 01:37 | Ctrl+ or Command+V to
paste it in place, there it is.
| | 01:40 | Okay, so I am going to hit Save & Close
and now I have two Events articles.
| | 01:46 | If you remember, one thing I had
mentioned is on the front end of the website,
| | 01:50 | if we now go to the News & Events area
here, all of a sudden I have this item
| | 01:54 | showed up on the News & Events
page is there's a link to the events.
| | 01:58 | This was not here before when we
started this particular video and that's
| | 02:02 | because we had no
content in the Events category.
| | 02:05 | One of the configuration options in the
menu item for News & Events prevents the
| | 02:09 | categories from showing if they have no content.
| | 02:11 | Now that we have a category that has
content in it, the name of the category
| | 02:14 | shows up here in the list.
| | 02:16 | If I click on Events, I actually get a
Category blog of those events and because
| | 02:20 | I didn't put in the Read Mores,
I see the full article here.
| | 02:24 | What I really want for events is just a
list of the events that are coming up.
| | 02:28 | So I am going to need to go back and
change this News & Events link at a later
| | 02:33 | point in time so that my
events are not formatted that way.
| | 02:37 | And I am going to cover that in another video.
But I wanted to point out to you what
| | 02:41 | happened here immediately as soon as I
added the events to the website, so that
| | 02:45 | you can be aware of that when
you're planning you own website.
| | 02:47 | So what I am going to wind up doing now
is I am going to make two sub-navigation
| | 02:52 | items for News & Events.
| | 02:53 | I am going to make a sub-navigation
item called News and I am going to make a
| | 02:56 | sub-navigation item called Events.
| | 02:58 | I am going to set up the News sub-navigation
item as a Category blog and I am
| | 03:03 | going to set up the Events sub-navigation
item as a Category list.
| | 03:06 | So let's go, hop into the back end of Joomla!
| | 03:09 | and I will go to Menus>
Main Menu>Add a New Menu item.
| | 03:13 | And I am going to make that News item first.
| | 03:16 | So I am going to click the Select
button, I am going to the select Category
| | 03:19 | Blog. The Menu Title will be News and
the parent item will be News & Events.
| | 03:26 | My category that I am going to choose is
just the News category, not News & Events.
| | 03:30 | I want to see just the news on this
page. Under my Blog Layout Options,
| | 03:34 | I am going to have no leading articles,
20 introductory articles, 1 column, and 0 links.
| | 03:43 | Go ahead and hit Save & New, and now
I am ready to enter my Category list,
| | 03:49 | which will be for Events.
| | 03:50 | So I am going to go ahead and
select a Menu item type of Category list.
| | 03:56 | The title for this list will be Events and
it's going to live underneath News & Events.
| | 04:01 | So my parent item becomes News & Events.
| | 04:05 | The category I am going to pick is the
Events category from this side, and I am
| | 04:09 | going to go ahead and hit Save & Close.
| | 04:12 | So let's see what has happened
to the front-end of our website.
| | 04:14 | Let me go back to my home
page, click on News & Events.
| | 04:18 | Now I have some sub-navigation here.
| | 04:21 | My News sub-navigation will go to a news
blog which is formatted exactly the way
| | 04:27 | we wish. My Events page will go to
this particular layout, which is a series
| | 04:34 | of articles that are listed here in this table.
| | 04:36 | It shows the author and the number of
hits each one of these articles has gotten.
| | 04:40 | If I click on any of these particular
events, this goes to a page with the
| | 04:44 | full article on it.
| | 04:45 | Now the formatting for my Events page
leaves a lot to be desired again, and
| | 04:50 | so I'm going to format that in the
next video on Advanced Category List
| | 04:55 | configuration.
| | Collapse this transcript |
| Advanced category list configuration| 00:01 | In our previous video, we entered
some events for the website and we've
| | 00:03 | displayed them as a category list and
this is the page that is showing us the
| | 00:07 | events, for the website.
| | 00:09 | It is not beautiful and I really
don't care that these events articles are
| | 00:13 | written by Super User.
| | 00:14 | So it's time to try to pretty this up a
little bit and we can do that with some
| | 00:19 | of the Configuration options
in the Menu item for the Events.
| | 00:23 | So let's go, take a look and
see what's available to us.
| | 00:25 | I am going to hop that back here in to
the backend and go to Menus>Main Menu and
| | 00:31 | I am going to find my Events link
right here, go ahead and click on that.
| | 00:36 | And the last time all we did was we
chose our category of Events, but now we
| | 00:40 | have some other things
that we can take a look at.
| | 00:42 | Once again we can show Category
Titles and Descriptions and so forth.
| | 00:46 | None of these things are particularly
relevant to our Category list, but they're
| | 00:50 | here if you ever need to take a look at them.
| | 00:53 | Under the List layouts though, there
are some things that are very relevant
| | 00:56 | to what we're doing.
| | 00:57 | The Display select refers to this
little item up here in the top where it says
| | 01:01 | display how many links here in the
particular list, and you have the choice of
| | 01:06 | 5, 10, 20, 100 or All.
| | 01:10 | Since I have only got two events here
for this particular website and it's
| | 01:13 | unlikely that we are going to have that
many events at one particular point in
| | 01:16 | time, I am just going to get rid of
this Display drop-down here, and I can do
| | 01:20 | that by setting Display Select to Hide.
| | 01:23 | So here in my particular table, I've
got these headings here on the top and I
| | 01:27 | can click on these to sort my list of
articles by Title or by Author or by Hits.
| | 01:32 | I'd like to turn that off because
ultimately I would like to get rid of the Hits
| | 01:36 | and the Author column.
| | 01:37 | So for the Table Headings, I am
going to go ahead and hide those.
| | 01:40 | I can show a date
associated with my particular events.
| | 01:44 | That date is the date that the
article was entered into Joomla!.
| | 01:48 | That's not the date of the event.
| | 01:49 | So I probably don't want that either;
| | 01:51 | I am going to set that to Hide.
| | 01:52 | If you do choose the date, you can enter
a format here and if you take a look at
| | 01:57 | this, it will tell you the information
about how that's formatted and where to
| | 02:00 | go in your language file
to make formatting happen.
| | 02:03 | It's a little bit complicated.
| | 02:05 | So go ahead and read the
Tool tip if you need to do that.
| | 02:08 | I don't want to show the hits in list
so I am going to hide those and I don't
| | 02:11 | want to show the author in list
so I am going to hide that as well.
| | 02:14 | So I am going to go ahead and hit Save
and then I am going to refresh my Events
| | 02:19 | page and now we have a list of
just the titles of these articles.
| | 02:24 | You'll notice the boxes in the shading here
around these particular items in the list.
| | 02:29 | That has to do with the
template of this website.
| | 02:32 | The template has been formatted so
that these rows in the table are going to
| | 02:37 | have the shading associated with them.
| | 02:40 | If you wished, you could go into the
CSS for the website and take out that
| | 02:44 | formatting here for the category list at
this point in time, or you could pick a
| | 02:47 | template that didn't
have this formatting at all.
| | 02:49 | For the moment, I'm just going to
ignore that the formatting is there;
| | 02:52 | this is closer to what I want.
| | 02:54 | I am missing a title for this page;
| | 02:56 | I would like to have the word Events
appear on the top of the page, which does
| | 02:59 | not appear right now.
| | 03:01 | I will actually cover that when I talk
about setting the Display options for
| | 03:05 | this particular website.
| | 03:07 | I will cover how we can put in a
heading for this page even though it's
| | 03:10 | not currently present.
| | 03:11 | In the meantime, this page is
looking at least a little bit better.
| | 03:14 | We really don't need the author and
the number of hits for these particular
| | 03:17 | articles, and they still worked as we expect.
| | 03:19 | If I click on Name of the article,
I go into a full version of that
| | 03:23 | particular article.
| | 03:24 | We still have lots of formatting to
clean up here on the website, but we are at
| | 03:28 | least getting the content in place that we want.
| | 03:31 | The next thing we need to do is
clean up this News & Events page as I had
| | 03:35 | mentioned in a previous video.
| | 03:37 | Right now I can click on News and I get
the same thing that I get when I go to
| | 03:40 | the News link here, but when I
click on Events, I get an Event list.
| | 03:44 | In the next video, I am going to
change this News & Events link to better
| | 03:48 | reflect what really should be
showing on the News & Events page.
| | Collapse this transcript |
| Creating a featured blog for news| 00:00 | So as I have mentioned a few times,
our News & Events page is somewhat
| | 00:04 | suboptimal in my eyes.
| | 00:06 | It's showing us the
Subcategories of News & Events.
| | 00:09 | If I actually had some articles that
were part of the News & Events category,
| | 00:13 | they would show up on this page just
above the word, Subcategories, here, but I
| | 00:17 | don't really have any.
| | 00:18 | I need something for our top level
page for News & Events to lead people into
| | 00:22 | my Category blog of News, my Category
list of events, and this page really
| | 00:27 | isn't doing it for me.
| | 00:29 | So what I would like to do is I'd like
to be able to pull selected News items
| | 00:34 | and selected Events items, sort of
that featured kind of thing. And I would
| | 00:38 | like to put them here on the News &
Events page so that I can see the most
| | 00:42 | exciting News when I click on News &
Events. If I want all of News, I could
| | 00:47 | go to the News page to see that or if
I want all of the events, I can go to
| | 00:50 | the Events page to see that.
| | 00:51 | Wouldn't that just be the
coolest thing since sliced bread?
| | 00:54 | I think so, and this is a
great new feature in Joomla! 2.5.
| | 01:00 | The concept of Featured articles has
been around for some time and we, in
| | 01:03 | fact, made use of Featured articles earlier
when we configured the homepage for this website.
| | 01:08 | We simply went into the Article manager,
selected some of the items as featured
| | 01:12 | articles and then they show up
on the Home page of the website.
| | 01:16 | But now you can do this on a Category basis.
| | 01:19 | So I can say for the News & Events
portion of the website show me the Featured
| | 01:23 | articles that come from there, and
they will show up then on the top-level
| | 01:28 | News & Events page.
| | 01:29 | So let's see how this works.
| | 01:31 | So, I am going to hop into the back end
of the website and I am going to start by
| | 01:35 | going to Menus>Main Menu.
| | 01:38 | And I am going to go to
my News & Events item here.
| | 01:41 | So right now News and Events is set
to be a Category blog and I'm going to
| | 01:45 | change the type of item that this is,
by clicking on my Select button and I'm
| | 01:51 | going to choose to make
this a Featured articles list.
| | 01:53 | So I am going to go ahead and choose that.
| | 01:56 | This is going to change my interface here and
now I have a few things that I need to tweak.
| | 02:00 | So over here on the right side of the
page, the first thing I need to do is
| | 02:04 | select which categories I'd like to
show as part of my News & Events page.
| | 02:09 | And I am going to click on the word
News & Events, hold down my Ctrl key or
| | 02:13 | Command key on my Macintosh and I am
going to click on News & Events also.
| | 02:19 | So what I'm saying here is I'd like
on the News & Events page to show any
| | 02:23 | featured articles from the
Categories of News & Events, News, or Events.
| | 02:28 | While I am here, I might as well go
ahead and fix my Layout Options; no Leading
| | 02:33 | Articles, 20 Intro
Articles, 1 Column and no Links.
| | 02:39 | And of course, all of the other options
are here that you can go ahead and mess
| | 02:43 | around with any of the other
Menu options you wish to change.
| | 02:46 | I want to go ahead and say Save & Close.
| | 02:51 | When I come back here to the front end
of the website, and I am just going to go
| | 02:55 | back to the homepage briefly and then
to the News & Events page, I will see
| | 02:59 | absolutely nothing on the page. Oh no!
| | 03:01 | What happened?
| | 03:02 | Well, I haven't specified any News &
Events, News, or Events articles as featured.
| | 03:09 | So that's our next step.
| | 03:11 | In the backend of Joomla!, I am going
to go to Content>Article Manager, and I
| | 03:16 | can take a look at all of my articles here.
| | 03:19 | Right now my articles are sorted in
alphabetical order here by title and I know
| | 03:23 | that because I see this little gray
pyramid icon sitting next to the Title item.
| | 03:28 | I'm going to sort by Category to
group things together to make things a
| | 03:31 | little faster to find.
| | 03:32 | So I am going to click on the word,
Category, and you'll see now that my
| | 03:36 | About articles are grouped, my Events
articles are grouped and so are my News articles.
| | 03:41 | So I'd like to feature that a
major donation was received.
| | 03:46 | All I have to do is click on the
Featured icon here and it turns into a start
| | 03:50 | item, indicating that
this is a Featured article.
| | 03:52 | I would also like to feature that the
Artworks program is starting on Saturday,
| | 03:56 | March 3rd, today is February 14th and
so that's not too far in the future.
| | 04:00 | So I am going to ahead and click on that
icon as well to set that as a Featured article.
| | 04:05 | So that's all I have done as I have
chosen one News article and one Events
| | 04:09 | article as featured.
| | 04:11 | And now when I come back here to my
News & Events page and I click the Refresh
| | 04:15 | button, you'll see that my two articles
show up right here on the News & Events
| | 04:20 | page which is absolutely fabulous.
| | 04:23 | Note also that when I go to the
homepage, because they are featured, they
| | 04:27 | will also show up here.
| | 04:29 | I have the Major Donation Received here,
the article about the artworks, and
| | 04:33 | then the two articles we featured
earlier about the upcoming in the Current
| | 04:36 | Exhibit are also featured.
| | 04:38 | Notice that the
formatting is kind of funky here.
| | 04:41 | Well, that's the next
thing to fix in the next video.
| | Collapse this transcript |
| Formatting the homepage| 00:00 | My Home page is looking a little
bit less beautiful than I'd like.
| | 00:04 | If you take a look at it, we've got a
leading article going all the way across
| | 00:08 | the page and then we have three columns
here all smashed into each other, made
| | 00:12 | worse by these pictures that are
associated with some of these articles here.
| | 00:16 | It is not a pretty sight.
| | 00:17 | Also, I might be interested in showing not
quite all of these articles on the Home page.
| | 00:24 | These are all of the featured articles
that are located within my website at
| | 00:28 | this point in time, but I may not want to
show every featured article on my Home page.
| | 00:33 | I may want to show a subset of
those featured articles on my Home page.
| | 00:37 | So how can I make all of that magic happen?
| | 00:40 | Well, fortunately, that's all
configurable through the Home menu item in the
| | 00:44 | back-end of Joomla!.
| | 00:45 | So let's go take a look at that.
| | 00:47 | In the backend of Joomla!, I am going to
go to Menus>Main Menu and I am going to
| | 00:53 | click on the link for the Home page.
| | 00:56 | And over here on the side of the website,
the right side, I have many different
| | 01:01 | Layout Options here.
| | 01:03 | So right now all of the categories on
the website, wherever there is a featured
| | 01:08 | article, because all categories are
selected, those featured articles will show
| | 01:12 | up on the Home page of the website.
| | 01:14 | That means that my Featured Articles
under Visiting Exhibits will show up,
| | 01:18 | featured News & Events are going to
show up, and let's say, I feature something
| | 01:22 | under Contact Us that will show
up on the Home page of the website.
| | 01:25 | And it's possible that I don't really
want all that stuff on the Home page.
| | 01:29 | Maybe I really only want the items that
are part of the Visiting Exhibits on the
| | 01:34 | Home page of the website and maybe I
don't want the news and events at all or
| | 01:37 | maybe I just went Visiting Exhibits and
News and I don't want the Events, which
| | 01:41 | is what I think I'm going to do here.
| | 01:42 | So I'm going to select Visiting
Exhibits by clicking on it, then I am going to
| | 01:46 | hold down my Ctrl key on a PC or
Command on a Mac and I am going to click on
| | 01:51 | News as the other category that I want.
| | 01:54 | So I may be featuring items under
Events, but those particular items that I
| | 01:58 | feature are not going to show up
on the Home page of the website.
| | 02:02 | Let's also fix the formatting while
we are here and my same usual set of
| | 02:06 | numbers; no Leading Articles, 20
Intro Articles, 1 Column, and no Links.
| | 02:13 | I can go ahead and leave
these in the following order.
| | 02:16 | Note that the Article Order is the
Featured Articles Order. I am going to show
| | 02:19 | you how that works in just a moment.
| | 02:21 | Go ahead and click Save & Close and
now when we go to the front-end of the
| | 02:26 | website and I click my Refresh button,
my articles are all lined up one right
| | 02:30 | on top of the other.
| | 02:31 | So the note about the Major Donation
Received is the very first item in the
| | 02:35 | list, followed by the items for the
Upcoming Exhibit and the Current Exhibit.
| | 02:40 | These are in Featured article order.
| | 02:42 | So what does that mean exactly?
| | 02:44 | Well, if we hop back to the Article
Manager here in the backend of Joomla!, go
| | 02:48 | into Content>Article Manager, and I am going
to take a look at just my Featured articles.
| | 02:53 | I can get there right here in the
navigation, where it says Articles,
| | 02:57 | Categories, and then it says Featured Articles.
| | 02:59 | When I click on Featured Articles, this
shows me the order that they're going to be in.
| | 03:03 | And notice that the Ordering
column is grayed out. Why?
| | 03:06 | This is very tricky, because over
here on the left side of the screen, the
| | 03:10 | little gray pyramid shows that we
are currently ordering these by Title.
| | 03:15 | So I need to click on the Ordering
column first in order to come up with what I
| | 03:19 | call the Netflix arrows so
that I can reorder these items.
| | 03:23 | If you've ever rented videos from Netflix,
you've worked with your queue before,
| | 03:27 | and you have these cute little arrows
where you can nudge the movies up and down
| | 03:30 | in your queue, it works exactly
in the same way here in Joomla!.
| | 03:33 | So on the Home page of my website,
remember that my Events article is not showing.
| | 03:39 | So we won't see the ArtWorks Program
Starts on Saturday, March 3, but we will
| | 03:44 | see the Major Donation has been received,
the Upcoming Exhibit, and the Current Exhibit.
| | 03:48 | And if we look at the front end of
the website, you'll see that they are
| | 03:51 | indeed in that order;
| | 03:52 | Major Donation, Upcoming
Exhibit, and Current Exhibit.
| | 03:56 | I can now reorder these,
using my little Netflix arrows.
| | 04:00 | So I can click the down arrow, say,
on the Major Donation received.
| | 04:05 | The other way I can sort these is
by entering some numbers over here.
| | 04:09 | So if I'd like my Current Exhibit to be
listed first, I can put that in as 1, my
| | 04:14 | Upcoming Exhibit will be
second so that will be number 2.
| | 04:17 | The Major Donation Received will be in number
3, and the ArtWorks Program will be number 4.
| | 04:22 | Once I've entered all of these numbers,
you have to hit the old-fashioned floppy
| | 04:27 | disk at the top of the ordering column
to save that information and actually
| | 04:31 | make that order take effect.
| | 04:34 | These techniques for ordering are used
throughout Joomla!, you'll find them in
| | 04:37 | the Menu Item Manager, you'll find them
in the Module Manager, and here they are
| | 04:41 | in the Article Manager as well.
| | 04:43 | Now when I go back to the SAMOCA
home page and I hit the Refresh button,
| | 04:48 | unfortunately, this is not the order that
we were looking at in the Article Manager.
| | 04:53 | We expected to see Major
Donation down towards the bottom.
| | 04:56 | If we take a look here in the backend
of Joomla!, we see that the very first
| | 05:00 | article listed is the Visiting Exhibits, and
the third item listed is the Major Donation.
| | 05:04 | Instead, we have the Major Donation
article at the top of the list and the
| | 05:08 | Current and the Upcoming
Exhibits towards the bottom.
| | 05:11 | So why is this not in the right order?
| | 05:13 | Well, it's always a good idea to go back
and take a look at your Menu Item again
| | 05:16 | when things don't work
according to expectations.
| | 05:20 | So we'll go to Menus and we'll go to
Main Menu and I am going to click the Home
| | 05:24 | link here and I am going to
take a look at some of my settings.
| | 05:29 | So one of the things here, of course,
is that the Article Order is the
| | 05:32 | Featured Articles Order.
| | 05:34 | So in other words we were just in the
Featured Articles Manager, we saw the
| | 05:37 | order that those were supposed to be in.
| | 05:39 | But our Category Order, in other words,
the order in which the categories are
| | 05:43 | going to show is this Use Global.
| | 05:46 | So it's inheriting this setting from somewhere.
| | 05:48 | I am going to cover on what that
inheritance works like in a future video.
| | 05:52 | But note that whatever that Global
Setting is, may be it's by alphabetical or
| | 05:57 | may be it's in Category Manager Order,
it's probably putting the News articles
| | 06:01 | before the Visiting Exhibits articles.
| | 06:04 | So what I am going to do here is I am
going to switch my Category Order to No
| | 06:07 | Order, in other words ignore the
Category Order entirely and pay attention only
| | 06:13 | to the Article Order under Featured Articles.
| | 06:16 | I am going to go ahead and hit Save &
Close, and now when I refresh the home
| | 06:21 | page of this website, finally
these are in fact in the right order.
| | 06:25 | We have our Current Exhibit, the
Upcoming Exhibit and then down here at the
| | 06:28 | bottom, the information about
the Major Donation Received.
| | 06:31 | And the reason they were out of
order was because there was some sort of
| | 06:34 | Category Order that was being
applied to this page in addition to the
| | 06:38 | Featured Articles Order.
| | 06:40 | So now that we've got that all
straightened out, we can move on to our
| | 06:43 | next task.
| | Collapse this transcript |
| Deleting menu items| 00:00 | Deleting menu items is also very
straightforward and simple within Joomla!
| | 00:04 | I am going to show you how to do that now.
| | 00:06 | So we are going to go to Menus>Main
Menu, I am going to add a new menu item,
| | 00:11 | because I am going to need to
make something I want to delete.
| | 00:13 | I like everything that I
have on the menu right now.
| | 00:16 | I'm going to hit my Select button and
let's just make a link to a single article
| | 00:21 | and let's call it, Trash me!
| | 00:26 | And I'll select an article, it doesn't
matter which article because, of course,
| | 00:29 | we are just going to get rid of this right away.
| | 00:31 | So I am just going to link to the
About Us page again and say Save & Close.
| | 00:35 | If I refresh the front-end of the
website, I'll see that I have my Trash me!
| | 00:41 | article here and here's my About Us article.
| | 00:45 | To trash that particular menu item, all
I need to do is put a checkmark next to
| | 00:49 | it and then up here, click the Trash button.
| | 00:52 | That will send the menu item to the
trash, but just as we saw with the Article
| | 00:58 | Manager when you trash an
article, it's not truly gone,
| | 01:01 | it's sitting in the trash.
| | 01:02 | In order to completely delete a menu item,
you have to actually empty the trash.
| | 01:08 | Also, similar to the way articles
work, you can always unpublish any of the
| | 01:12 | links that are here on your menu.
| | 01:15 | All you have to do is click the green
arrow and it will turn into a little
| | 01:19 | red dot indicating that, for example,
Permanent Collections is no longer
| | 01:23 | published on the website.
| | 01:24 | Remember that the article, Permanent
Collections, is still published on the
| | 01:28 | website and if I had Search installed
on this particular website, I would be
| | 01:33 | able to, say do a search for Permanent
Collections, and potentially pull up the article.
| | 01:37 | But there would be no longer a menu link
to that particular item on the website.
| | 01:41 | I am going to republish Permanent
Collections and I'm now going to try to
| | 01:46 | completely trash that Trash me! menu link.
| | 01:49 | In order to do that, I'm going to need
to go to Select Status and pick Trashed.
| | 01:54 | This will show me all of the
items that are here in the Trash.
| | 01:57 | To get rid of them completely, put a
checkmark next to them, and click Empty
| | 02:00 | Trash, and that will make
the item go away entirely.
| | 02:04 | To get back to the Menu Item Manager to
see what's actually there, change this
| | 02:09 | drop-down from Trashed to Select
Status and that will show you all of the
| | 02:14 | published and unpublished menu items
that you have currently on your website.
| | Collapse this transcript |
| Configuring submenus| 00:00 | One of the things you might be
wondering about at this point, now that we have
| | 00:04 | at least some navigation on our website
and some sub-navigation on our website,
| | 00:08 | is whether the navigation has to remain
over on the left side of the page under
| | 00:11 | this heading that says Main Menu.
| | 00:14 | Perhaps you'd like to see the navigation
go across the top of the page, with the
| | 00:18 | sub-navigation showing up on the left
side of the page, when it's appropriate
| | 00:22 | for that sub-navigation to show up.
| | 00:24 | That is actually very
straightforward to configure in Joomla!
| | 00:27 | and we're going to do that kind of
configuration using our modules as opposed to
| | 00:33 | making new menus that would show
up then on the left side of page.
| | 00:37 | Why do we care that it's the modules
that are driving this rather than the menus?
| | 00:42 | First of all, if you create separate
menus with links to the same content,
| | 00:46 | you're potentially creating different
links to the same content, which might
| | 00:51 | impact negatively your
search engine optimization.
| | 00:54 | Second of all, you'll break the
breadcrumb that's available here in the website.
| | 00:58 | The breadcrumb is this little bit of
text right here which shows you where you
| | 01:02 | are in the website navigation.
| | 01:04 | So if I go to say About and then go to
the Our Director page, you see that the
| | 01:08 | breadcrumb grows to show me
exactly where I am on the website.
| | 01:11 | It went from the Home page to my
About page into the Our Director page.
| | 01:16 | And this is showing me the navigation structure.
| | 01:18 | It's not showing me what I clicked
on first and what I clicked on second,
| | 01:21 | although those happen to be the same
thing in this particular situation.
| | 01:24 | By creating a separate left-hand menu,
for example, for About, I would see Home
| | 01:30 | and then Our Director, as opposed to
Home>About>Our Director which is in fact
| | 01:34 | the correct breadcrumb in this situation.
| | 01:36 | It is also possible for Joomla!
| | 01:38 | to do drop-down menus.
| | 01:40 | However drop-down menus do
not ship with Joomla! Core.
| | 01:43 | You'll need to find a third-party
extension and install it in order to make
| | 01:47 | drop-downs for your website.
| | 01:49 | Many of the templates that are out
there will also come with drop-down
| | 01:52 | menus built into them.
| | 01:54 | So, if drop-down and menus are
important to you, you might investigate a
| | 01:57 | template that will support the drop-
down menus, or you can investigate a
| | 02:00 | third-party extension.
| | 02:02 | But both of those are beyond the
scope of this course and you'll find them
| | 02:06 | fairly straightforward to go ahead and set up.
| | 02:09 | But for right now what I am going to do
is I am going to take my main navigation
| | 02:12 | displayed across the top of the website
and then make some sub-navigation that
| | 02:15 | will show up on the left, and I
am going to do that with modules.
| | 02:18 | So let's go see how that's done.
| | 02:20 | Here in the backend in Joomla!,
remember that our actual items that are on the
| | 02:25 | menu are configured under my Menus
item here in the backend, but where those
| | 02:30 | menus appear on the
website show up under modules.
| | 02:34 | So I am going to go to Extensions>
Module Manager and getting into Modules
| | 02:40 | here, just a little bit, I am
actually going to do an entire chapter on
| | 02:43 | Modules later in the course.
| | 02:44 | I am going to click on my Main Menu module.
| | 02:48 | From this particular screen, I can configure
exactly where this is going to show on the page.
| | 02:53 | First of all, one of my pet peeves about Joomla!
| | 02:56 | are the words Main Menu showing
up on the front end of the website.
| | 02:59 | If you've surfed the web for more than
five minutes, you know that that list of
| | 03:02 | things over on the left column are a menu.
| | 03:05 | So why do we need to have it say Main Menu?
| | 03:07 | That's the first sign that you're an
amateur when it comes to Joomla!.
| | 03:10 | I like to turn that off. So go on ahead and click
the Hide button here to hide the words Main Menu.
| | 03:15 | Second of all, we are going to pick
a different position and I'll explain
| | 03:19 | positions in a little bit more detail in
a future video, but positions are where
| | 03:23 | modules can appear on your webpage.
We have a whole list of these.
| | 03:27 | If we click Select Position, this will
show us all of the positions available to
| | 03:32 | us in all of the templates that are
currently installed on our Joomla! website.
| | 03:36 | So the first thing I need to do is
reduce the number of positions here which I
| | 03:40 | can do by going to Select Template
and we are currently using the Beez 2.0
| | 03:45 | template, which is beez_20.
| | 03:47 | This will show us just the positions
that pertain to this particular website.
| | 03:51 | I want my links to
appear on the top of the page.
| | 03:54 | So I'm going to assign them to position-1.
| | 03:56 | I am going to click on that
and I am just going to say Save.
| | 04:00 | So let's see what this does to our website.
| | 04:03 | When I hit the Refresh button here,
you'll see that I do, in fact, get some
| | 04:07 | navigation going across the top
of the page, which is what I want.
| | 04:10 | But I am here on Our Director page and
there is sub-navigation associated with this.
| | 04:16 | And so you see the volunteer with us
in Our Director links that show up over
| | 04:19 | here in the side, which is
definitely not what I want.
| | 04:23 | I want those links to be
over here on the left-hand side.
| | 04:26 | So what I can do here with this
particular module, the module that stretches
| | 04:30 | across the top of the page is limit how
many levels of navigation I am going to see.
| | 04:35 | So I'll start my navigation at Level 1
and I'll end my navigation at Level 2.
| | 04:40 | I am going to go ahead and click Save
again, and when I Refresh my page, my
| | 04:46 | navigation is still in place.
| | 04:48 | I think I actually meant to
set that 2 end at Level 1.
| | 04:52 | We'll go ahead and hit Save and
I'll Refresh my page one more time.
| | 04:56 | So by starting my navigation at Level
1 and ending it at Level 1, I'm showing
| | 05:00 | only my top level of navigation which is great.
| | 05:03 | That's exactly what I want
across the top of the page.
| | 05:06 | But now I can't get to my
sub-navigation for About.
| | 05:09 | I am on the Our Director page, the
navigation exists, but I can't see it
| | 05:13 | anywhere on the website, so what can I do?
| | 05:16 | Well, I can create another module and
configure that second module to show
| | 05:21 | only sub-navigation.
| | 05:23 | So let's go ahead and set that up.
| | 05:25 | I am going to get out of this
screen by clicking Save & Close.
| | 05:29 | And then I am going to make a new
module for the menu and to do that I am going
| | 05:33 | to click the New button here at the top
of the screen, and I am going to click
| | 05:36 | Menu, so it will make me
a fresh new menu module.
| | 05:41 | I'll give this a Title of Left Menu and
I'll definitely hide that, because I
| | 05:45 | don't want to see it.
| | 05:47 | The position I'll assign is position-7.
That's where our previous navigation was,
| | 05:53 | the left-top position.
| | 05:55 | And then over here on the side, I am
going to start my navigation at Level 2,
| | 05:59 | but I'll leave the End Level 2 open.
| | 06:01 | So if I have a third level of navigation,
or fourth level of navigation, those
| | 06:05 | will all show on the left side of the page.
| | 06:08 | Go ahead and hit Save & Close.
| | 06:10 | And now when I refresh my webpage here
on the front-end, you'll see that here
| | 06:15 | I am on the Our Director page.
Over on the left side, we see the
| | 06:18 | sub-navigation associated with the
About portion of the website, Volunteer
| | 06:22 | With Us and Our Director.
| | 06:24 | If I go to News & Events, I have the sub-
navigation associated with News & Events.
| | 06:28 | And if I go to Collections, I have my sub-navigation
that's associated with the Collections.
| | 06:34 | On the Home page, I don't have any subnavigation
at all, because there is no
| | 06:38 | sub-navigation for the Home page link.
| | 06:40 | What I just showed you is pretty
important conceptually within Joomla!.
| | 06:44 | It's not necessary to create separate
menus when you want to have disjointed
| | 06:50 | navigation like this; such as a top
navigation and a left navigation for your website.
| | 06:55 | So many times on Joomla! sites
| | 06:57 | that I have not built where I've
logged in, I see people creating dozens
| | 07:01 | of menus so that they can have subsets
of their navigation appear in different
| | 07:05 | parts of their webpage.
| | 07:07 | Rather than doing that, use the power
of the module to segment your navigation
| | 07:12 | and make it appear exactly where you
need it to appear, and the portion of the
| | 07:16 | navigation that you need to appear on
your website, rather than all that effort
| | 07:20 | to duplicate making multiple menus,
potentially taking a hit on your search
| | 07:25 | engine optimization and so forth.
| | 07:27 | You'll come out much better in the end.
| | Collapse this transcript |
| Creating a new menu and displaying it on the site| 00:00 | There is one last thing I'd like to do
with menus on this website and that is to
| | 00:03 | create a new menu down in
the footer of this webpage.
| | 00:07 | Now, I just lectured you about not
creating too many menus for your website and
| | 00:10 | using modules to slice and dice your
menu links, so that they show up in their
| | 00:14 | correct portions of your webpage.
| | 00:16 | But what I'd like to do now is make
a footer menu and footer menus are
| | 00:21 | very common on websites.
| | 00:22 | You usually find things like privacy
policies and site maps and login links and
| | 00:26 | that kind of thing down in the footer.
| | 00:28 | And that's exactly what I would like to
add to the website is a privacy policy
| | 00:32 | and make it display in
the footer of the webpage.
| | 00:35 | That is a completely appropriate
thing to display as its own menu.
| | 00:39 | So I am going to show you how to make
your own footer menu now and we'll create
| | 00:44 | the Privacy Policy article and
link that up to the menu as well.
| | 00:47 | So I am going to start by
hopping into the backend of Joomla!
| | 00:50 | and the very first thing that I am
going to do is I am just going to set up my
| | 00:53 | Privacy Policy article.
| | 00:55 | So I am going to go to Content>
Article Manager>Add New Article, and in your
| | 01:00 | Exercise Files, you'll find a scintillating
article about the Privacy Policy. It is Lorem Ipsum.
| | 01:07 | Just go ahead and highlight it
and Ctrl+ or Command+C to copy.
| | 01:12 | The title for this article is
Privacy Policy and I am just going to leave
| | 01:17 | this as Uncategorized.
| | 01:18 | I am not going to assign
it any particular category.
| | 01:22 | And then Ctrl+ or Command+V to paste
the Privacy Policy into place, there it is
| | 01:26 | nobody reads it anyway.
| | 01:28 | Now this will be Lorem Ipsum, go ahead
and click Save & Close and we now have
| | 01:33 | our Privacy Policy link here on the website.
| | 01:35 | So now I am going to hook this up to
the menu, but first, I need to make a
| | 01:38 | menu to link it to.
| | 01:40 | So to do that I am going to go to Menus>
Menu Manager and I am going to add a new
| | 01:45 | menu to the website, so I am going to
go ahead and click that and I'll get a
| | 01:49 | screen that looks like this.
| | 01:51 | The title for this
particular menu will be Footer Menu.
| | 01:54 | Why, because it's a menu
that goes in the footer.
| | 01:57 | Menu Type is a little bit
misleading. What this is,
| | 02:00 | is a unique name for your menu, it
should be all lowercase preferably, and it
| | 02:05 | should be all one word;
| | 02:06 | no funny characters, no spaces,
no numbers, no funny characters.
| | 02:10 | So I am just going to call
this footermenu, all one word.
| | 02:15 | You can put it in a description if you like;
| | 02:17 | the menu that goes at
the bottom of the web page.
| | 02:24 | Go ahead and click Save & Close.
| | 02:26 | And now you'll see we have
two menus for this website;
| | 02:30 | the Main Menu and the Footer Menu.
| | 02:32 | Note that also in our column over here
on the side, this indicates that we have
| | 02:37 | two modules that are
currently displaying Main Menu items.
| | 02:41 | Our Main Menu, which is the menu that
now goes across the top of the page and
| | 02:46 | our left menu, but there are no modules
currently available for the Footer Menu.
| | 02:51 | So we are going to need to make a
module to display the Footer Menu before it
| | 02:55 | will show up on the website.
| | 02:56 | But before we do that, I'm just going to
go ahead and make a link to the privacy
| | 03:01 | policy that will appear on the Footer Menu.
| | 03:03 | So to do that, I can go to Menus and
note that now we have a new menu item, the
| | 03:08 | Footer Menu and I can Add a New Menu Item there.
| | 03:12 | What kind menu item?
| | 03:14 | Well, it's just going to be a Single Article;
| | 03:16 | the Menu Title will be Privacy Policy.
| | 03:19 | There is a minor bug here in Joomla!.
Be very careful when you're making a new
| | 03:27 | menu item for anything other than the Main Menu.
| | 03:30 | If you look here at Menu Location,
this will show you where that menu link
| | 03:35 | is going to appear.
| | 03:36 | And right now, even though I went to
this from the Footer Menu, it says it's
| | 03:39 | going to show up on the Main Menu.
| | 03:41 | Make sure that it's showing up on the
correct menu, so it should say Footer Menu
| | 03:45 | instead of Main Menu.
| | 03:47 | The Parent Item is still going to be the
top level item, the Menu Item Root, and
| | 03:51 | then over here on the right of the
screen, we'll select an article and that
| | 03:54 | article will be Privacy Policy article.
| | 03:57 | Go ahead and click Save & Close and
this has actually returned me to the
| | 04:01 | main menu screen here.
| | 04:03 | You'll notice that has
the Home page and so forth.
| | 04:06 | If you go to Menus>Footer Menu, make
sure that you actually have the Privacy
| | 04:11 | Policy that shows up here.
| | 04:13 | If you don't have a Privacy Policy link,
check your Main Menu, you might find
| | 04:18 | the Privacy Policy listed as
the last link on that page.
| | 04:21 | Go into edit that link and make sure
that you indicate that that link should
| | 04:25 | show up on the Footer Menu and not the
Main Menu, you'll see it show up here
| | 04:29 | instead, and then you will be all set.
| | 04:31 | Okay, now that we've got the Privacy
Policy link in place on our Footer Menu,
| | 04:35 | let's go back to Menus>Menu Manager and
you'll notice here that again this says
| | 04:40 | that we need to add a
module for this particular menu.
| | 04:43 | And I am just going to click on that and
this will put us into creating a module
| | 04:48 | for that particular menu.
| | 04:50 | So the Title for this will be Footer
Menu which is something that I will hide
| | 04:55 | and the Position for this particular
Footer Menu item, I am going to put in the
| | 05:00 | Footer middle or position-10.
| | 05:02 | And I am just going to set this up to Show
the Footer Menu and show all levels of it.
| | 05:06 | Right now there is only one link so
there's not a whole lot to format here.
| | 05:10 | Go ahead and say Save & Close.
| | 05:13 | Now when I Refresh this website and
then I scroll on down to the footer, you'll
| | 05:20 | see that I have my Privacy Policy link
down here at the bottom of the page in
| | 05:23 | exactly of the middle of the footer.
| | 05:26 | When I click it, this puts us into the
full article where I can read all about
| | 05:30 | Lorem Ipsum, which is our
Privacy Policy for this website.
| | 05:34 | So when you create a new menu for your
website, remember you need to create a
| | 05:37 | menu, you need to create a module to
display that menu, and of course, you need
| | 05:41 | to create any menu items within the menu itself.
| | 05:45 | All three of those will create a new
menu for your website with working links
| | 05:49 | displayed exactly where you want.
| | Collapse this transcript |
|
|
6. Advanced Article FormattingInstalling and using the Joomla! Content Editor (JCE)| 00:00 | To this point in working on this
particular website, we've been working with TinyMCE.
| | 00:07 | TinyMCE is the editor that you
see in the back-end of Joomla!
| | 00:10 | and the editor is the buttons and the
formatting that go around the box where
| | 00:14 | you enter all of the content.
| | 00:16 | TinyMCE leaves a lot to be desired in terms
of usability, particularly for your clients.
| | 00:22 | I am a fan of a different
editor called JCE or the Joomla!
| | 00:26 | Content Editor, and I'm
looking at the website right here,
| | 00:29 | joomlacontenteditor.net.
| | 00:32 | JCE is a free editor that
you can download and use.
| | 00:35 | It also contains some extensions to it
that may cost a little bit of money that
| | 00:40 | might allow you to do some things
with formatting images and so forth.
| | 00:43 | But we're just going to
concentrate on the free portion of TinyMCE.
| | 00:46 | And so what I'd like to do in this
first video is to download JCE and get it
| | 00:51 | installed on our website and then show you a
little bit of the buttons that go behind it.
| | 00:56 | And then the next thing I'm going to do
in this particular chapter is show you
| | 01:01 | some of JCE's best features and how
it really improves Joomla!'s usability.
| | 01:05 | And then towards the end I'm going to
show you how you can streamline the JCE
| | 01:09 | interface so that specific users wind
up getting only the buttons that they
| | 01:14 | need, whereas you as a Super User
may wind up getting all of the buttons.
| | 01:18 | So JCE is very flexible that way.
| | 01:20 | These are things that you can't do with TinyMCE.
| | 01:22 | So to download JCE, we're going to
start by going to this link on the top
| | 01:26 | that says Downloads.
| | 01:27 | We're going to download the Editor and
we're going to download this for Joomla! 2.5.
| | 01:32 | Go ahead and select Joomla!
| | 01:33 | 2.5 from the list and you
should see two types of JCE;
| | 01:39 | one is a TGZ and one is a ZIP.
| | 01:41 | These are both compressed file formats,
and it really doesn't matter which one
| | 01:46 | you're going to download, but I
typically download the ZIP, so I'm going to go
| | 01:49 | ahead and click the Download button here.
| | 01:51 | The version of JCE that I'm
using right now today is 2.0.21.
| | 01:58 | However, when you are actually
watching this video, it's highly likely that
| | 02:02 | there is a new version of JCE that's
available to you to download and use.
| | 02:07 | The author of this particular extension
is constantly updating JCE. All right!
| | 02:12 | So I've downloaded JCE here.
| | 02:15 | Now I'm going to go over to the
back-end of Joomla! and install it.
| | 02:19 | So when you download JCE, it comes down in the
ZIP format, don't open any of the zipped files.
| | 02:24 | Always with Joomla!, any time you
work with a third party extension, you're
| | 02:27 | always going to leave everything
zipped up and you install the zipped file
| | 02:31 | directly into your Joomla! website.
| | 02:33 | So to install JCE, we're going to go to
Extensions>Extension Manager, and right
| | 02:38 | here under the Install tab, we have the
ability to put in a package file, which
| | 02:43 | would be a ZIP file.
| | 02:44 | So go ahead and hit the Browse button,
I'm going to go to my Downloads folder,
| | 02:48 | and I'm going to pick com_jce_2021 in my case.
| | 02:52 | Go ahead and say Open and say Upload &
Install, and it will take just a second
| | 02:56 | to upload and unpack JCE, and you
should see a screen that's something similar
| | 03:02 | to this stating that JCE has been installed.
| | 03:05 | The next step you'll need to take is to set
JCE as the default editor for your Joomla!
| | 03:10 | website.
| | 03:11 | To do that, go to Site>Global
Configuration and change your Default Editor from
| | 03:16 | TinyMCE to JCE and say Save & Close.
| | 03:20 | Now, when you set your Default
Editor in the Global Configuration, that
| | 03:24 | means that every user on your website will
now be using the JCE editor when they login.
| | 03:30 | If you have users who do not want to
use JCE or who really like TinyMCE or who
| | 03:36 | want to use a different editor, it
is possible to have different editors
| | 03:39 | running on your website.
| | 03:41 | You can set a global editor within the
Global Configuration and then within the
| | 03:46 | User Manager, which we can get to by
clicking on the User Manager icon here, you
| | 03:50 | have the ability to set
specific editors by user.
| | 03:54 | So if I click on the one user that
exists for this account right now, the Super
| | 03:57 | User, which is me, you'll see over here
on the right side of the screen we have
| | 04:02 | the ability to set an Editor.
| | 04:04 | So if I was to set my editor right now
to TinyMCE, I would see TinyMCE as my
| | 04:10 | editor for all of my work,
overriding the JCE setting.
| | 04:14 | Note also in this list there's an
option of setting no editor at all.
| | 04:18 | If you're the kind of person who likes
to work with raw HTML, maybe you want to
| | 04:22 | copy and paste HTML directly out of
Dreamweaver, this is a great way to do it.
| | 04:26 | You can turn off the editor for just
you and then have that ability to put HTML
| | 04:29 | directly into Joomla! Okay.
| | 04:32 | So I'm not going to make any changes here,
I'm just going to click the Close button.
| | 04:35 | So now that JCE is installed and
selected as our default editor, I'm going to go
| | 04:42 | to Content>Article Manager and I'm
going to click on the About Us article, and
| | 04:48 | you can see here that the
JCE editor is installed.
| | 04:52 | These are the buttons that go on the
top of the screen here, which give you all
| | 04:56 | kinds of options for formatting.
| | 04:58 | The buttons can be customized by user group
and I will show you that in a later video.
| | 05:03 | You can also toggle the editor by clicking
this Toggle Editor button up here on the top.
| | 05:07 | It used to read Show/Hide
in previous versions of JCE.
| | 05:10 | And by clicking that you can see
the HTML code that goes behind this
| | 05:15 | particular article.
| | 05:17 | You can roll over any of these
buttons and see what they are.
| | 05:20 | JCE actually comes with its own Read
More buttons and it comes with its own Page
| | 05:24 | Break buttons which you can use, or you
can use the ones that are down here in
| | 05:27 | the bottom of the screen from Joomla!
| | 05:29 | And you can continue to roll your
mouse over any of those buttons if you're
| | 05:32 | wondering what they are exactly.
| | 05:34 | So that is installing JCE and getting
it to work here in your web browser.
| | 05:40 | And now I'm going to show you a
few great features of JCE in the next
| | 05:44 | few videos.
| | Collapse this transcript |
| Adding an internal link| 00:00 | One of JCE's best features for
usability is the ability to browse to another
| | 00:05 | page on the website and create an
internal link within an article.
| | 00:09 | And this makes it so easy for your
clients to do, you can do it as well, and to
| | 00:15 | me it's one of my favorite features in JCE.
| | 00:17 | I really wish TinyMCE had this
kind of feature built into it.
| | 00:20 | So let's take a look at how we can do that.
| | 00:22 | If we go to the Article Manager and
we're going to go to the About Us page, in
| | 00:27 | the course of the About Us page here,
as it talks along, is it mentions a
| | 00:33 | creative mixture of the
visual and performing arts.
| | 00:35 | And I'm going to link the word visual
here to the Permanent Collections page.
| | 00:41 | I have highlighted the word visual
here and now I'm ready to make a link.
| | 00:46 | So to do that, I'm going to click on
the Link icon right here, which is sort
| | 00:49 | of in the middle of the bottom
row of JCE, and this will pull up an
| | 00:53 | interactive dialog box where I can
link to that particular page called the
| | 00:59 | Permanent Collection page.
| | 01:00 | This gives me a number of ways that I
can actually link to that specific page.
| | 01:05 | I can go to it through the Content here
or I can go to it through a Menu Item.
| | 01:10 | The Contacts are for contacts for the
website, and of course those are not going
| | 01:15 | to be in use to create this particular link.
| | 01:17 | Weblinks are something we're going to
create later in this course and Weblinks
| | 01:20 | are not what we need either.
| | 01:22 | It's an article that we're trying to link to.
| | 01:24 | We can either link to it directly
through the Content or we can link to it
| | 01:26 | through the Menu, and the
question is which should we use?
| | 01:29 | And generally you should always use the
Menu link, and the reason why is because
| | 01:33 | the links already exist to
that particular piece of content.
| | 01:37 | If there's no way to link to a piece of
content by the Menu option, then you can
| | 01:42 | link to it by the Content option.
| | 01:43 | When that type of thing might happen is
if you want to link to a specific news
| | 01:47 | article, but your news articles are all
displayed say in a category block or a
| | 01:51 | category list, there's no specific
menu item that goes to any of those
| | 01:55 | particular pieces of content, and in
that case then you could link to it using
| | 01:59 | the Content option here.
| | 02:01 | But wherever a Menu link
already exists, you should use it.
| | 02:04 | That will prevent you from having
duplicate URLs that go to the same page, which
| | 02:09 | can definitely pull down
your search engine rankings.
| | 02:12 | So I'm going to go into Menu here, and
this one of course is in the Main Menu.
| | 02:18 | It's under Collections, and it's
the Permanent Collections link.
| | 02:22 | So I just select that from a list like
this and say Insert, and it will go ahead
| | 02:27 | and create the link for me.
| | 02:29 | Now if I go ahead and say Save &
Close, then I go to the front-end of the
| | 02:33 | website and I go to my About page,
you'll see that we now have a link here to
| | 02:38 | the visual, and if I click on that,
I'll go to my Permanent Collections page,
| | 02:43 | which is exactly the behavior that we wanted.
| | 02:45 | So creating internal
links inside of JCE is a snap.
| | 02:49 | Remember to use Menu wherever possible.
| | 02:51 | If you can't use Menu, then use
Content as the option for browsing to your
| | 02:55 | article of interest where
you need to make the link.
| | Collapse this transcript |
| Linking to a PDF or other document| 00:00 | One of the most common things that
you'll wind up doing on your website
| | 00:04 | is putting up PDFs.
| | 00:06 | Unfortunately, PDFs tend to be
abused on the web a little bit.
| | 00:09 | People like to slap up a
PDF for just about anything.
| | 00:12 | PDFs are ideally used for things that need
to be printed in order to be viewed well.
| | 00:17 | So, think about things like posters
that might advertise a concert or a very,
| | 00:22 | very long document that somebody
might print out to read offline later.
| | 00:25 | In general, it's just not a good idea to
put PDFs on the web because they're not
| | 00:29 | accessible to people with disabilities,
they're not necessarily readable that
| | 00:33 | well by search engines, although,
Google has some ability to read PDFs and
| | 00:38 | they're not indexable very well.
| | 00:40 | So, ideally we try to avoid using
PDFs on the web as much as possible, but
| | 00:44 | having said that, pretty much every
website I've ever built has had PDFs on it.
| | 00:49 | So as a result, I'm going to show you
how to put PDFs up on your website here
| | 00:55 | using JCE, which has a very nice, very
clean and easy to understand interface
| | 00:59 | for putting up those PDFs.
| | 01:02 | Now, one of things that I have
discovered here working with my Joomla!
| | 01:06 | site here on WAMP, is that WAMP has a
limitation for a file size uploads of 2
| | 01:12 | Megabytes and that is probably derives
from the PHP limit for file size uploads,
| | 01:18 | because for many years PHP shipped with
a 2 Megabyte upload limit for file size
| | 01:24 | and that can be changed probably in
the php.ini file or you can look around
| | 01:29 | online to find a way that you can
change file size uploads within PHP.
| | 01:33 | If you're working with a web host, it's
unlikely you're going to have that small
| | 01:38 | of a file size limit at
this point in time in 2012.
| | 01:41 | It's more likely that you're going to
encounter little problem on the server
| | 01:46 | side in terms of uploading a file size.
| | 01:48 | JCE also has a file size limit
associated with it and that is a good thing
| | 01:54 | because it will keep your clients from
uploading honking big files when they
| | 01:58 | really shouldn't be.
| | 01:59 | One of the things that you really want
to try to do with PDFs is to keep the
| | 02:01 | file size as small as possible.
| | 02:03 | So, you can alter the file size within
PHP itself, you can also alter file size
| | 02:11 | within JCE, the interface, and I'm
going to show you where to go to change that
| | 02:15 | if you ever encounter that particular
file size limit and then I'll show you how
| | 02:19 | to put a PDF into your webpage.
| | 02:21 | If you go to Components>JCE
Administration and Profiles, I'm going to talk about
| | 02:27 | profiles in more detail in another video
but profiles are the ability for people
| | 02:32 | to access certain aspects of JCE and
right now we're running the Default
| | 02:35 | profile, so I'm just going
to click on that to edit it.
| | 02:38 | And inside of the profile here under the
Editor Parameters, under the Filesystem
| | 02:44 | you'll see that JCE sets Upload file
default as 1 Megabyte or 1024 Kilobytes and
| | 02:53 | it will tell you that your server's
maximum upload size here is 2048 Kilobytes.
| | 02:57 | Mac people, you maybe have something different.
| | 02:59 | If you're running XAMP you may have
something different, if you're on a web host
| | 03:02 | you may have something different for
your server maximum upload size, and that's
| | 03:06 | something you'll have to adjust through php.ini.
| | 03:09 | You can certainly change your
upload file size here in JCE.
| | 03:12 | I could change it to be the same as my
server by typing in 2048 and override
| | 03:18 | that and I think that that's probably a
pretty smart idea because, truthfully,
| | 03:22 | people are probably going to be
uploading files that are 5 Megabytes and under
| | 03:26 | at this point in time.
| | 03:26 | So, that's probably what I would be targeting.
| | 03:29 | Go ahead and hit Save & Close once
you've made that change and now we're ready
| | 03:33 | to actually link our PDF up to the website.
| | 03:36 | So to do that, I'm going to start by
going to Content>Article Manager and inside
| | 03:41 | of our article on Permanent Collections,
which is down here, I'm going to add a
| | 03:46 | little bit of text to it.
| | 03:47 | Inside of your Exercise Files there's
an extra sentence we're going to add to
| | 03:51 | the Photography section of
the Permanent Collections page.
| | 03:54 | So, right here after that first
paragraph, I'm going to copy this sentence here
| | 04:00 | from my Exercise Files
and Paste that on into JCE.
| | 04:04 | The words, The History and the Practice
of the Art of the Photograph, I'm going
| | 04:07 | to make italic because that's the
title of a book and I'm going to link to a
| | 04:11 | PDF that has some information about this
particularly influential book for this artist.
| | 04:16 | So to do that I'm going to click on
the Link icon here and this is the same
| | 04:20 | screen we saw in the last video where we were
talking about internal links on the website.
| | 04:24 | What I need to do now is upload my PDF
into the Media Manager in order to make a
| | 04:29 | link to it, which I can do
right here from the screen.
| | 04:32 | And the way I do that is I click on
this button here at the end of the URL,
| | 04:36 | which is a Browse button and if I
click on that, this will open up my File
| | 04:41 | Browser, and if we go back to the
Root of my website, this is actually the
| | 04:46 | location of the Media Manager
within my file structure for my Joomla!
| | 04:50 | Site, you can see all the
images that I have there.
| | 04:53 | In an earlier video I made a folder for PDFs.
| | 04:56 | So, if I click on that folder,
you'll see that that is currently empty.
| | 05:01 | There's an index.html in it.
| | 05:02 | That index.html prevents the folder
contents from being read by anybody who
| | 05:08 | might be looking in there, and I
want to upload my PDF to the site.
| | 05:11 | So, I'm going to click on the
Upload button here, which is over on the
| | 05:15 | right-hand side and if I had a PDF
sitting on my desktop I could simply drag and
| | 05:20 | drop it right on into the shaded area here.
| | 05:22 | Alternatively, you can browse for that,
which I will by clicking the Browse
| | 05:26 | button and inside of Chapter 6 inside
of 06_03 you'll find photograph.pdf.
| | 05:32 | Go ahead and select that and say Open
and you'll see that it shows up here in a
| | 05:37 | queue for many things to upload.
| | 05:39 | So, you can continue to queue up PDFs
or images or whatever it is you want to
| | 05:43 | upload and then click the Upload
button and you'll see that a little
| | 05:46 | checkmark appeared stating that that
file had been uploaded and now here it
| | 05:50 | is inside of our File Browser.
| | 05:52 | So, this is what I'm going to link to.
| | 05:54 | So, I'm going to select photograph.pdf
from my list and I'm going to say Insert,
| | 05:59 | and you'll notice that back here on
this screen it's written the URL here
| | 06:03 | incorrectly, images/pdf/photograph.pdf.
| | 06:07 | I can set that to open
in a new window if I wish.
| | 06:10 | Once again, as I said with external
links for your website, those can open in an
| | 06:16 | external window
consistently or an internal window.
| | 06:19 | Likewise with your PDFs, make sure
they open in the same place every time
| | 06:23 | whether they open in the
same window or a new window.
| | 06:25 | I prefer to open them in a new window.
| | 06:27 | Go ahead and say Insert and it
looks like I just lost my italics.
| | 06:32 | So, I'm just going to highlight that
link again and hit the Italic button.
| | 06:35 | So, I've got that back and we have our
link to our PDF here available on our
| | 06:41 | Permanent Collections page.
| | 06:43 | So, I'm going to go ahead and hit Save & Close.
| | 06:45 | So, when we switchover to the front end
of the website looking at the Home page
| | 06:49 | here, we're going to go to
Collections and we're going to go to Permanent
| | 06:53 | Collections and scroll on down here,
you can see we have Paintings and
| | 06:57 | Photography and under Photography we
have this link here that we just made to
| | 07:02 | our PDF, The History and Practice of
the Art of Photography and if I click on
| | 07:07 | that link, it will open up
as a PDF here in a new window.
| | 07:10 | This is Adobe Acrobat that is driving this.
| | 07:13 | If you have the full version of
Acrobat installed you may see something
| | 07:16 | slightly different, an older version of
your plug-in but you should see the PDF
| | 07:20 | come up just like this.
| | 07:21 | So, we know that that works.
| | 07:23 | It opens in a new tab and that is
how you install PDFs on your Joomla!
| | 07:28 | Website using JCE.
| | Collapse this transcript |
| Dividing and formatting long articles using page breaks and the Pagebreak plug-in| 00:01 | The Permanent Collections page we just
used in the previous video to put a new
| | 00:04 | PDF into it, but I'm seeing kind of
looking at it now and it's kind of long.
| | 00:09 | It goes on and on and on about paintings
and photography and sculpture and we're
| | 00:13 | adding more things to it.
| | 00:15 | And it's kind of a laundry list
sort of article at this moment.
| | 00:18 | Seems like there should be a more
attractive way that we could present this
| | 00:21 | information, maybe something a little
bit more fun or interactive, and it is in
| | 00:26 | fact possible to do this now with Joomla!
| | 00:28 | 2.5 using something called Page Breaks.
| | 00:32 | So I am going to switch back
over to the backend of Joomla!
| | 00:35 | and I am going to go back to my Article
Manager and I am going to go back to my
| | 00:39 | Permanent Collections link here.
| | 00:42 | And if I scroll on down the page,
here's my article as it currently stands.
| | 00:48 | Earlier in the course we've put in Read
More links and Read More link takes your
| | 00:51 | article and divides it into two pieces.
| | 00:53 | It gives you a short little
introductory piece of text which would show up on a
| | 00:57 | blog style page, followed by a link
that says Read More which would then take
| | 01:01 | you on to a page that would
show you the full article.
| | 01:04 | Page Breaks work differently however.
| | 01:07 | Page Breaks are designed to take an
article like this and divide it into, say,
| | 01:11 | several pages and you can
navigate across those particular pages.
| | 01:15 | So the way you set up a page break
would be to click again at the end of the
| | 01:19 | sentence where you'd like that page
break to occur, let's say right here, then
| | 01:23 | click the Page Break button that's
down here on the bottom of the page.
| | 01:26 | When I click that, it's going to ask me for
a Page Title and a Table of Contents Alias.
| | 01:31 | So I'll say Paintings for my Page
Title and Paintings for my Alias, and
| | 01:36 | say Insert Page Break.
| | 01:38 | This shows up here in JCE as this gray
bar going across here and that indicates
| | 01:43 | that this is a page break.
| | 01:44 | I am going to repeat this process now,
after Paintings and before Photography;
| | 01:50 | Photography, and Photography, Insert
Page Break, and scroll on down a little
| | 01:57 | further, and then just before
Sculpture once again we'll put in a page break,
| | 02:05 | and Insert Page Break. There you go!
| | 02:07 | So this is now set up.
| | 02:09 | You may want to put in a little bit of a
return here at some of the end of these
| | 02:13 | page breaks so they don't smash
right on up against the edge of the page.
| | 02:16 | I am just going to hit Return to do that.
| | 02:19 | And now when I hit Save for this page,
I am just going to hit the Save button,
| | 02:25 | and I refresh the Permanent
Collections page here, I wind up with a different
| | 02:30 | formatting for this particular page.
| | 02:32 | So what you see here, well, it has always
been possible with Joomla! 1.5 and Joomla!
| | 02:37 | 1.6, which is you see here this
Permanent Collections page that little bit
| | 02:41 | of introductory text.
| | 02:42 | And then either using my navigation
down here on the bottom that says Next, or
| | 02:48 | using the bulleted items over here on
the side, I can then swap between the
| | 02:52 | pages of photography and permanent
collections and so forth, or I can show all
| | 02:57 | pages by clicking on this All Pages link,
which puts everything together on one page.
| | 03:01 | So that's kind of nice, but it seems
like we could do even more with this.
| | 03:06 | And fortunately, we can. New in Joomla!
| | 03:08 | 1.7 and now of course available also in Joomla!
| | 03:11 | 2.5 is the ability to do more styling
with these page breaks here, and that is
| | 03:18 | possible through a plug-in.
| | 03:19 | So I am going to go to the backend of Joomla!
| | 03:21 | and I'm going to hit Save & Close, and
I am going to go to Extensions>Plug-in
| | 03:26 | Manager, and the plug-in I am going to
look for is the one that's called Content
| | 03:32 | - Pagebreak, and it's a
little way down on the page here.
| | 03:36 | And when I click on that, over on the
side here under Basic Options, it's going
| | 03:40 | to give me some options
for this particular article.
| | 03:43 | I can set up a number of different issues here.
| | 03:46 | So one of the things that I
can show is the Article Index.
| | 03:49 | The Article Index is this box over
here on the side which right now doesn't
| | 03:52 | have a label on it.
| | 03:54 | That's because it's set to Show but
there's nothing typed into this box.
| | 03:57 | So if I said, In This Article, that's
a custom index heading and I say Save
| | 04:05 | and refresh my page, I have the words
in this article, will show up here on
| | 04:09 | the top of the box.
| | 04:10 | So then I could swap around
between pages through that way.
| | 04:14 | This will also show the site title
at the top of the page, so the words
| | 04:18 | Permanent Collections up
here on the top of the page.
| | 04:21 | If I go back to the Permanent
Collections page, or if I go to the Paintings
| | 04:25 | page, it will say
Permanent Collections - Paintings.
| | 04:28 | I can turn that off.
| | 04:29 | If I turn that off here, say Hide,
and say Save, and I refresh the page, it
| | 04:37 | will just say Permanent Collections
and then it says Paintings a little way
| | 04:40 | further down on the page.
| | 04:43 | But all of the stuff isn't
really the cool stuff here.
| | 04:45 | I'm actually going to wind up hiding my
Article Index Heading, hiding the Site
| | 04:48 | Title, hiding the Table of Contents.
| | 04:51 | I am going to leave the Show All on.
| | 04:53 | Down here on the bottom though we
have an option for Presentation Style.
| | 04:57 | Right now this is set to Pages, but we
also have Sliders and Tabs, and these are
| | 05:01 | much more fun than Pages.
| | 05:03 | So I am going to set this to Sliders
just for a moment and say Save, and now
| | 05:08 | when I refresh this page, I am going to
go back to my main Permanent Collections
| | 05:11 | page, you'll see that we have a
series of these sliders that show up for
| | 05:16 | Paintings, Photography, and Sculpture.
| | 05:19 | So I can click on the words Photography
and my piece of text about photography
| | 05:23 | will come up on the page.
| | 05:24 | I click on Sculpture, and
this will pop up on the page.
| | 05:27 | I probably want to go back and
take out these headings in the article
| | 05:31 | because now with the headings that
are here on these sliders, it seems a
| | 05:36 | little bit redundant.
| | 05:37 | But you can see how this works.
| | 05:39 | The other option that was there
inside the Presentation Style was Tabs.
| | 05:43 | So if I switch to Tabs and say Save and
refresh this page, you'll see that I now
| | 05:49 | have tabs that go across the top for
Paintings, Photography, and Sculpture.
| | 05:54 | And with the formatting on of this page,
if I kept this as Tabs, I might keep
| | 05:58 | the headings on the top here.
| | 06:00 | But I really like the formatting for the slider.
| | 06:03 | So I am going to switch this back
to Sliders, and say Save & Close.
| | 06:10 | And when I refresh this, you'll see
that it's back to the slider format.
| | 06:13 | And now what I am going to do is go
back to my Article Manager, back to my
| | 06:18 | Permanent Collections article, and I
am going to take out those headings
| | 06:22 | that are on this page.
| | 06:23 | So I am going to take out Paintings and
I am going to take out Photography and I
| | 06:29 | am going to take out Sculpture. There we go!
| | 06:35 | Go ahead and say Save & Close.
| | 06:38 | And when I refresh this page here on
the Permanent Collections, now it looks
| | 06:42 | like I have Paintings followed by
the information about paintings,
| | 06:46 | Photography and the information
about photography, and Sculpture and the
| | 06:49 | information about sculpture.
| | 06:51 | So this is a more attractive presentation.
| | 06:53 | And yes, I know you're really tired of
this stuff up here on the top of the page
| | 06:57 | about Categories and Published
and Written by. I'm getting there.
| | 07:01 | We will be getting rid of that
really, really soon, I promise.
| | Collapse this transcript |
| Customizing which HTML tags are permitted by changing the text filter in Joomla! | 00:00 | Have you ever been working with Joomla!
| | 00:02 | and you wanted to include something
from another site, say a YouTube video or a
| | 00:07 | Twitter feed or a Facebook feed and
those sites spit out a little bit of HTML
| | 00:11 | which you copied and you put into Joomla!,
then it just didn't work and you had
| | 00:16 | no idea what happened, but for
whatever reason you couldn't see that video or
| | 00:22 | that feed inside of Joomla!, you were
very frustrated and you weren't quite
| | 00:26 | sure what happened?
| | 00:28 | Well, you've encountered one of
Joomla!'s features. It's not a bug.
| | 00:31 | It is indeed a feature
inside of Joomla! And Joomla!
| | 00:35 | would like to keep you safe from
hackers and people with bad intentions
| | 00:39 | towards your website.
| | 00:40 | So one of the things that Joomla!
| | 00:42 | does is that for certain HTML tags
that you put into your website, it very
| | 00:47 | helpfully strips them out for you;
| | 00:49 | in some cases, by default.
| | 00:52 | In earlier versions of Joomla!, Joomla!
| | 00:54 | was configured specifically to ignore
tags like iframe, which is a tag that is
| | 01:00 | used inside of YouTube feeds and
Twitter feeds and Facebook feeds and it was
| | 01:05 | very frustrating for a lot of people.
| | 01:07 | I've gotten a lot of questions about
why that was happening and how you could
| | 01:11 | prevent it from happening.
| | 01:12 | So I wanted to be sure to cover
that here in this particular course.
| | 01:16 | Inside of your Global
Configuration there is a place where you can
| | 01:20 | configure which tags Joomla!
| | 01:21 | can and cannot strip out of your code.
| | 01:25 | It's also important to
know that not only Joomla!
| | 01:28 | will strip tags out of your code, the
editor that you're using, like JCE, may
| | 01:34 | also strip tags out of your code.
| | 01:36 | So you're going to need to make sure
in two places that certain tags are
| | 01:41 | permitted for various users for your
website, and I'm going to show you how to
| | 01:45 | do that over the course of the next videos.
| | 01:47 | This video I'm going to work on the Joomla!
| | 01:49 | settings and in the next video I'll
cover the JCE settings. So Joomla!
| | 01:53 | settings used to be located in the
Article Options, they're now located in the
| | 01:57 | Global Configuration.
| | 01:58 | So if you go to the Global
Configuration by clicking on the icon here on the
| | 02:01 | Control Panel, and going to the Text
Filters item here, you'll see all of the
| | 02:10 | current User Groups that
are available within Joomla!
| | 02:14 | Now, those of you who have worked
with ACL, if you have changed ACL on your
| | 02:19 | website, you may have different
User Groups that are pictured here.
| | 02:22 | These are the ones that
come by default with Joomla!
| | 02:25 | If you installed the Sample Data, you
may have some additional groups here that
| | 02:28 | you don't see on this particular list.
| | 02:30 | But if you've installed Joomla!
| | 02:32 | and you did not install the Sample Data
and this is a clean install of Joomla!,
| | 02:37 | this is what you should see on the screen.
| | 02:39 | So for each one of these User Groups
you'll have a certain kind of filtering
| | 02:42 | that's allowed or not allowed.
| | 02:44 | And I'm going to tell you what all
those things are, which you can get if you
| | 02:47 | mouse over the dropdown here, it will
actually spell it all out in detail.
| | 02:51 | But if you take a look at your options,
from the most amount of filtering down
| | 02:56 | to the least amount of filtering,
I'll tell you what they are.
| | 02:59 | So the most amount of
filtering is the No HTML setting.
| | 03:02 | No HTML means, well, no HTML.
| | 03:06 | If you put in any HTML tag, it
will be stripped out by Joomla!
| | 03:10 | and you'll see that our Public User
Group, which is basically anyone who is
| | 03:15 | visiting the front-end of your
website and who is not logged in, and your
| | 03:18 | Registered User Group, are both set to No HTML.
| | 03:21 | In other words, these two User Groups
can't put any HTML into your site at all.
| | 03:26 | That's probably a great setting because
these are the least engaged and involved
| | 03:29 | users with your website.
| | 03:31 | They're casual users and it's quite
possible that there's no reason for them to
| | 03:35 | ever put any content up in your
website so why would they need to put up HTML
| | 03:38 | in the first place.
| | 03:39 | The second most amount of stripping
that will go on is the Default Black List.
| | 03:46 | And that is the setting for Authors,
Editors, Publishers, and Managers.
| | 03:51 | Blacklisting indicates that there are
certain tags that cannot be included
| | 03:55 | inside of your code.
| | 03:57 | If you put in those particular tags, Joomla!
| | 04:00 | will strip those tags out
and not allow them to exist.
| | 04:02 | And the note that comes up when you
mouse over these dropdowns, it tells you
| | 04:07 | exactly what they are, right there where it
says, Tags for Default Black List include:
| | 04:11 | 'applet', 'body', 'bgsound', 'base',
'basefont', 'embed', 'frame', 'frameset',
| | 04:16 | 'head', 'html', 'id', 'iframe',
'ilayer', 'layer', 'link', 'meta', 'name',
| | 04:22 | 'object', 'script', 'style', 'title', and 'xml'.
| | 04:27 | There's also some attributes.
| | 04:28 | Remember, attributes describe an HTML tag.
| | 04:31 | So if your HTML tag is form tags and
attribute would be the action attribute, so
| | 04:38 | 'action', 'background', 'codebase',
'dynsrc', and 'lowsrc' are some that are not
| | 04:43 | permitted by the Default Black List as well.
| | 04:45 | So the Default Black List is great,
it's got a lot of good tags that are
| | 04:49 | being filtered out.
| | 04:50 | However, the iframe tag is one of
those tags that's being filtered out.
| | 04:54 | Now, Joomla!'s development team had a very
good reason to filter out the iframe tag.
| | 04:59 | It can certainly be a security risk,
but it is definitely the tag that is used
| | 05:04 | for things like Twitter feeds,
Facebook feeds, and YouTube videos.
| | 05:07 | So if you'd like to include any of
those on your site, but you otherwise like
| | 05:11 | the Default Black List setting, you
can use the Custom Black List setting.
| | 05:16 | So to make that happen, change the
dropdown here to the Custom Black List.
| | 05:22 | And by default, if you have the Custom
Black List dropdown in place but no tags
| | 05:28 | specified, there is no
filtering happening anywhere.
| | 05:32 | All of the tags that anybody happens to put
into an article, they go right up on the site.
| | 05:36 | You have to then specify every single
tag that should not be included as part of
| | 05:42 | your blacklist, all the tags that
you're not going to tolerate being put up on
| | 05:45 | the website, and they all
have to be listed out one by one.
| | 05:49 | In your Exercise Files I've created a
text file for you that has a list of all
| | 05:53 | of those blacklisted tags by Joomla!,
which you can just highlight and copy,
| | 06:00 | paste into place under the filter
tag's spot here for Super Users.
| | 06:04 | So now what you've created is a
blacklist that's equivalent to the default black
| | 06:08 | list and now you can get rid of
tags or add to tags as necessary.
| | 06:13 | And the tag that I'd like to get rid of
is the iframe tag, so I'm just going to
| | 06:17 | scroll on over here in my Custom Black List
and find my iframe tag and I'm going to erase it.
| | 06:24 | So now the iframe tag is not one of the
blacklisted tags, and what that should
| | 06:28 | mean is that in two videos where I put
a YouTube video into my page, my code
| | 06:33 | should go right on in and it
should not be stripped out by Joomla!
| | 06:36 | So that's a very helpful thing.
| | 06:38 | The last setting that you have is the
No Filtering setting, which is applicable
| | 06:44 | to Super Users and Administrators by default.
| | 06:46 | No Filtering means that you can put in
any HTML tags into your articles and they
| | 06:51 | will show up on the website.
| | 06:52 | So obviously you're only going to use
that setting if you have Administrators
| | 06:56 | and Super Users that you truly trust.
| | 06:59 | Personally, I think I'd go with the
Custom Black List option and not use No
| | 07:03 | Filtering and that would ensure that
you could hone exactly which tags you want
| | 07:08 | people to be allowed to use and not use,
a little bit more control over things
| | 07:14 | than just allowing
absolutely anything. All right!
| | 07:17 | When you're done setting this up,
go ahead and hit Save & Close.
| | 07:20 | Remember that tag
filtering can happen in two places.
| | 07:23 | It happens at the Joomla!
| | 07:24 | level, which you configure through the
Global Configuration, and it can also
| | 07:28 | happen at the editor level, which
will need to change with JCE settings.
| | 07:31 | And that's what we're going to do next.
| | Collapse this transcript |
| Customizing JCE's interface for specific user groups| 00:00 | Now, if haven't gathered by now, you've
probably realized what a huge JCE fan I am.
| | 00:06 | I just think JCE just adds so much
usability and productivity to Joomla!, my
| | 00:11 | clients love it, it's easy to explain,
it's easy to use and I'm going to show
| | 00:15 | you another feature in JCE that I think
is really wonderful and that you ought
| | 00:18 | to definitely think about
working with on your websites.
| | 00:22 | I'm going to go into my Article Manager
here for a moment and take a look at the
| | 00:26 | About Us article again.
| | 00:28 | If you take a look at the editor itself,
there is a zillion billion buttons here
| | 00:33 | and this is JCE's default
configuration and by default JCE shows you every
| | 00:39 | single button that was ever
possible to be used in JCE.
| | 00:43 | That's great for those of us who are
web developers and we want to have a
| | 00:46 | zillion billion buttons, they are
absolutely fabulous, but our clients take a
| | 00:51 | look at all those buttons
and just get horribly confused.
| | 00:54 | They would really rather have less
buttons and be able to do less formatting,
| | 00:59 | then they don't feel like
I don't really know Joomla!
| | 01:01 | because I don't know every single
button that's here on this page.
| | 01:04 | Stripping back to the JCE interface
so that you can have fewer buttons is a
| | 01:08 | really fabulous thing to do, and I'm
going to show you how to do that now in
| | 01:12 | this next video, so that you can set up
a different interface for your clients.
| | 01:17 | That will be straightforward for
them to use that they'll feel like they
| | 01:19 | understand all the buttons and it will
just make them love Joomla! all the more.
| | 01:23 | There's no reason to baffle your
clients with all these buttons.
| | 01:26 | They're never going to use them all.
| | 01:27 | So why do you give then to your
clients in the first place? Okay.
| | 01:30 | So to get that done, I'm going to go to
Components>JCE Administration, and this
| | 01:37 | is where you can configure lots of
things as far as JCE goes, it tells you where
| | 01:41 | you can go for support the version
that you're running and so forth.
| | 01:45 | Inside of here there are a number
of places we can go set settings.
| | 01:50 | The Global Configuration is a spot
where we can put in some settings
| | 01:55 | obviously apply globally.
| | 01:56 | First of all, Cleanup HTML is set to No.
| | 01:59 | I think that's a wonderful thing,
but if you want to have HTML Cleanup
| | 02:03 | turned on, that would mean that JCE
would take a look at your code, delete
| | 02:08 | any extraneous tags.
| | 02:09 | Make sure all the tags match up,
that kind of code cleanup thing.
| | 02:12 | You might have seen this in
action in Dreamweaver before.
| | 02:14 | Generally speaking,
developers turn that kind of thing off.
| | 02:17 | The Format & Display area here has to
do with do new lines form new paragraphs
| | 02:22 | or do they just do page breaks or line
breaks, the BR tag, where is the editor
| | 02:27 | pulling its styles from, from your
Template CSS File or have you written a
| | 02:31 | custom CSS file for looking at the
formatting of your articles within JCE?
| | 02:36 | Should you be compressing JavaScript and CSS?
| | 02:39 | This is something that's very important to
people who do responsive design in particular.
| | 02:42 | They like to compress their CSS
and JavaScript for fast transmission.
| | 02:47 | So there's a number of things here you
can set inside of Global Configuration.
| | 02:51 | Inside of the Editor Profiles however,
you can set up individual profiles for
| | 02:56 | different types of users.
| | 02:57 | So by default we're running the
Default profile, in other words the profile
| | 03:02 | that's in use for all users.
| | 03:04 | So if you wanted to make a new profile,
you could simply hit the New button up
| | 03:08 | here on the top and you can fill in all
of the information to configure one of
| | 03:14 | these profiles from scratch and then
give it a name and hit the Save button.
| | 03:17 | I'm not going to go through the
whole process of filling out all of this
| | 03:20 | information, because there are a
number of screens and this is quite
| | 03:23 | lengthy, but I do want to give you a
sense of what can be done here with
| | 03:28 | these Editor Profiles.
| | 03:29 | So I'm going to go ahead and click on
the Default item here and inside of here
| | 03:34 | you can see what kinds of
things you can configure.
| | 03:37 | So the Default profile for all users is
actually really for all the users except
| | 03:42 | for Public and Registered.
| | 03:43 | You can add additional user
groups or remove user groups from
| | 03:46 | this configuration.
| | 03:48 | You can even specify specific
users to be included as part of this.
| | 03:52 | You don't see any users listed here
because there's only one user for the site,
| | 03:55 | that's me, the Super User.
| | 03:58 | Under Features, this is where you
can specify which buttons will appear.
| | 04:02 | So there's actually a few extra buttons
that JCE has that do not appear inside
| | 04:07 | of the interface and you could
actually add those to the interface if you
| | 04:10 | wanted, but in general I think you're
going to wind up pulling buttons away.
| | 04:14 | So using this interface here, you can
specify exactly which buttons you'd like
| | 04:19 | to show and which buttons
you'd like to take away.
| | 04:23 | Under the Editor Parameters you can
specify some information here for the set
| | 04:27 | up, what is the theme for the toolbar,
in other words how does it look, the
| | 04:31 | location of the toolbar, whether it's
at the top of the screen or at the bottom
| | 04:34 | of the screen, how it's aligned,
various pieces of information like that.
| | 04:38 | The options are very important in some cases.
| | 04:41 | On occasion you may need to include
JavaScript inside of one of your articles
| | 04:45 | and JavaScript frequently gets stripped
out and you think, well, Joomla may be
| | 04:49 | allowing me to use JavaScript,
but it looks like JCE is not.
| | 04:52 | This is where you'd change that setting.
| | 04:54 | You can set this to allow or not allow
JavaScript, allow or not allow CSS and PHP.
| | 04:59 | Keep in mind, anytime you turn any of
these things on, you are potentially
| | 05:03 | opening up yourself to some security
issues so you want to be sure that you have
| | 05:07 | people who you trust, who are going to
be working with this who are not going to
| | 05:12 | do bad things to your website, at
least intentionally, and of course
| | 05:16 | unintentionally they may still
do bad things to your website.
| | 05:18 | So you just want to be very careful
about using these features and understand
| | 05:22 | that they're turned off by
default for a very good reason.
| | 05:25 | You can customize what formatting
elements are available on the dropdown.
| | 05:29 | You can customize what kind of styles are
available, the font sizes and all the rest of that.
| | 05:34 | So all that's customizable here.
| | 05:36 | On the Filesystem, we looked at this
briefly earlier, it is possible to change
| | 05:40 | your maximum Upload file size here
within this interface and other various
| | 05:46 | settings are located here
inside of the Editor Parameters.
| | 05:50 | The Plugin Parameters will specify
certain buttons that are on the site.
| | 05:53 | Should the Readmore button show up
on the JCE toolbar or not, should the
| | 05:57 | Pagebreak button show up
on the JCE toolbar or not.
| | 06:00 | Those are two I'd probably turn off,
because the buttons that are underneath the
| | 06:02 | window work just fine for that.
| | 06:04 | There are some features here you can
specify for the File Browser, whether you
| | 06:09 | can enable or disable the ability to, for
example, Rename Folders, that kind of thing.
| | 06:15 | Likewise with images, there are
some relevant settings here as well.
| | 06:18 | So you can just click on through
these and take a look at all the different
| | 06:23 | ways you can customize and tweak JCE,
and as I said, this goes on for quite a
| | 06:27 | while in terms of specifying
exactly what you can do with tables or
| | 06:30 | spellchecking and so forth.
| | 06:32 | So spend some time clicking
through these and taking a look at
| | 06:36 | JCE's functionality.
| | 06:37 | What I'd recommend is changing no more
than one thing at a time here inside of
| | 06:41 | the configuration and then take a look
at an article and see what your changes
| | 06:46 | have done to impact the
configuration of JCE behind the scenes.
| | 06:50 | Over time what you'll discover is
you'll come up with a set of settings that
| | 06:54 | work really well for your clients and
then you can just configure those settings
| | 06:58 | over and over again every time you
install JCE on a new site, but it's important
| | 07:03 | to keep the interface
inside of Joomla! to a minimum.
| | 07:05 | You want your clients to feel like
this is an easy program to use, that it's
| | 07:09 | very straightforward, they don't get confused.
| | 07:12 | And by giving your clients too many
options, you definitely make them feel like
| | 07:17 | there's something that they're missing
and they don't understand what everything
| | 07:20 | is and they want to
understand what everything is.
| | 07:23 | So the best approach, in my view, is
to strip back the interface as much as
| | 07:27 | possible and just give clients what they need.
| | 07:29 | Everybody will be happier in the end.
| | Collapse this transcript |
| Adding a YouTube video to an article| 00:00 | One of the most common technical
support issues that I see out there
| | 00:04 | dealing with Joomla!
| | 00:04 | is putting videos into articles, and so
many people have issues and troubles and
| | 00:10 | problems putting videos into articles.
| | 00:12 | A lot of that has to do with Joomla!'s
tag stripping, which we just covered over
| | 00:16 | the last two videos, in terms of
permitting or not permitting exactly which tags
| | 00:21 | are going to be allowed or not
allowed inside of the Joomla! interface.
| | 00:24 | So many people have gone to
using extensions for doing this.
| | 00:28 | An extension like AllVideos or
AllVideos Reloaded are two extensions that are
| | 00:31 | very popular for including
videos inside of websites.
| | 00:35 | But I am a big believer with Joomla!
| | 00:37 | that if you don't have to use a third
party extension, you really shouldn't.
| | 00:41 | It's just another piece of programming
that you introduce that could potentially
| | 00:44 | conflict with something else, and
it's just not good to stack your Joomla!
| | 00:47 | site up with a zillion,
billion different extensions.
| | 00:50 | It's just not necessary.
| | 00:52 | And as far as putting a YouTube video into
your webpage, if you've configured Joomla!
| | 00:57 | correctly, it's really a very
straightforward process and there's no reason
| | 01:01 | you can't just do this.
| | 01:02 | So I'm going to show you how
to do this with core Joomla!
| | 01:04 | without having to deal with
any third party extensions.
| | 01:07 | You too can put a video
into your Joomla! articles.
| | 01:12 | So to do this, inside of your Exercise Files,
I've given you a little blurb of text here.
| | 01:18 | We've got an interview here with Jim Sugar.
| | 01:20 | He is one of our photographers in the
permanent collection and I've given you a
| | 01:24 | link to a YouTube video.
| | 01:25 | So I'm going to highlight that link and
open it up in a new tab and press Paste.
| | 01:30 | And this is our video.
(Video)
| | 01:31 | I'm just going to pause that so that
you don't have to listen to Jim, but you
| | 01:36 | are certainly more than
welcome to watch the video.
| | 01:38 | Jim Sugar is a great photographer and he's
got all kinds of interesting things to say.
| | 01:42 | If you scroll down underneath the video,
you'll notice that there's a button
| | 01:46 | here that says Share.
| | 01:47 | And if you click on the button that says
Share, it will give you the link to the
| | 01:51 | video by default, which is in a
shortened format, suitable for Twitter or
| | 01:55 | something like that.
| | 01:56 | The button that you want to click
after that is the one here that says Embed,
| | 01:59 | because what we'd like to do is embed
this video inside of our Joomla! page.
| | 02:03 | When you click on the embed video, it
gives you this little snippet of HTML and
| | 02:07 | it's going to customize that snippet
of HTML to the following dimensions.
| | 02:12 | So right now this is going to
give us a video at 560x315.
| | 02:16 | You could certainly change to one of
these predefined sizes here if you wish, or
| | 02:20 | you can type in your own custom
dimensions and this code will update so that you
| | 02:24 | can put that text at the right
dimensions into your webpage.
| | 02:29 | So this is actually all I want, I'm
just going to use all of the defaults
| | 02:32 | here, and I'm going to highlight
that code, and I'm going to Ctrl+C or
| | 02:35 | Command+C to copy it.
| | 02:37 | Now what I'm going to do is go into the
back-end of my website and I'm going to
| | 02:41 | put this in my Permanent Collections article.
| | 02:44 | So if I go to Content>Article Manager,
and I'm going to scroll on down to the
| | 02:49 | Permanent Collections article, and
inside of my Permanent Collections article,
| | 02:54 | I'm going to scroll on down to
Photography, and I'm going to put a return here
| | 03:00 | after the paragraph that talked
about the PDF we hooked up earlier.
| | 03:04 | And I'm going to toggle the editor so
that I can see the code here on the back-end.
| | 03:08 | There's a little line break that I just put in;
| | 03:10 | it comes right after the PDF, and
right there at that little blank spot, I'm
| | 03:16 | going to paste in my YouTube code,
which just came directly out of YouTube, the
| | 03:21 | thing about the iframe, right there.
| | 03:23 | Toggle the editor back again and
you'll see that I have a little yellow box
| | 03:27 | here, that indicates that there's a
video that's going to go there in that spot.
| | 03:30 | And in your Exercise File, there is a
little introductory sentence, we can go
| | 03:34 | ahead and highlight that, Ctrl+C or
Command+C to copy, make a new line, Ctrl+V
| | 03:38 | or Command+V to paste.
| | 03:40 | So that's a little introductory
sentence to go with that video on that page.
| | 03:45 | And now all I need to do is
hit my Save & Close button.
| | 03:48 | So when I go back to the front-end of
the website and I go to my Collections
| | 03:51 | link, and I go to my Permanent
Collections page, and I go to my Photography
| | 03:58 | Panel here, you'll see that my YouTube
video is right here inside of this page.
| | 04:03 | And I didn't do anything
special to make this happen;
| | 04:07 | I just got my YouTube iframe
video code right out of YouTube.
| | 04:12 | I made sure that this particular user
for the website, which in this case was
| | 04:17 | the Super User we configured two
videos ago, to allow iframe tags.
| | 04:22 | And so all I needed to do was drop that
code right here into the page and now I
| | 04:26 | can play this video about Jim
Sugar right here inside of Joomla!
| | 04:31 | and I didn't have to install
any third party extensions.
| | Collapse this transcript |
| Using article-specific images and links | 00:00 | There aren't many new features in Joomla! 2.5,
| | 00:03 | but there is one new feature that
is quite intriguing and quite interesting
| | 00:08 | and that is the ability to add
standardized images and links to specific
| | 00:12 | articles on your website.
| | 00:14 | This means you can have an image that
would show up in the introductory text on
| | 00:18 | the blog part of the website, and then
when you click through on the Read more
| | 00:21 | link you'll see a larger version of
that image on the full article version of
| | 00:26 | that part of the website.
| | 00:27 | You can also have a spot for some
standardized links, up to three of them, and
| | 00:33 | those will also display in a very
standardized way on your articles.
| | 00:37 | So I'd like to show you how that would
work, and I am going to try using the
| | 00:41 | news articles as the way to do that.
| | 00:43 | So I am going to start, I've got six images
that I need to put into these news articles.
| | 00:47 | There is a small version and a large
version for each of the three news articles.
| | 00:51 | So I am going to start by going to the
Article Manager and then I am going to go
| | 00:56 | order this list by Category, so that
I group all my news articles together.
| | 01:00 | I am going to start by going to the
New Children's ArtWorks Program is
| | 01:03 | Announced, click on the link, and so far
I've really talked a lot about the left
| | 01:08 | side of the screen here in terms of
configuring Titles and Categories and so
| | 01:12 | forth, and then of course everything
about the Editor down here in the bottom,
| | 01:16 | but I've really ignored the right
side of the screen at this point.
| | 01:19 | Some of you may have noticed that there's
something new here, this is new to Joomla!
| | 01:22 | 2.5, and that is this
Images and links item here.
| | 01:26 | If I go ahead and click on that, you'll
see that I have the option of putting in
| | 01:31 | the two images that I've mentioned, the
Introductory Image and the Full article
| | 01:35 | image, including Alt text and
controlling whether they float left or right of
| | 01:39 | the text in the article, and a spot
underneath for putting up to three links
| | 01:44 | that pertain to that article.
| | 01:45 | Inside of your Exercise Files, which
are here on your Desktop, in Chapter 6, in
| | 01:52 | Chapter 06_09, you'll see that we have our six
images as well as a page with the links on it.
| | 01:57 | I am going to double-click
on that to open up my links.
| | 02:00 | So these are the links we're
going to be including in the articles.
| | 02:03 | So I am going to upload my images here
into the Media Manager, I am going to go
| | 02:08 | ahead and click on the Select button
here for this Artworks article, and I'm
| | 02:12 | going to browse my files here in
Chapter 06_09, I am actually just going to
| | 02:18 | click on the first image, hold on my
Shift key and click on the last image to
| | 02:21 | select everything and say Open.
| | 02:24 | Using my Flash Uploader I should be
able to upload all of these images all at
| | 02:27 | once, and now I am going to say Start
Upload and bang, bang, bang, there's all
| | 02:32 | of the images I've uploaded, you'll
see them here in the Media Manager.
| | 02:36 | So I am going to select my image, the
child_painting right here and say Insert,
| | 02:42 | and I can give this Alt text, A
child enrolled in the Artworks program.
| | 02:55 | And likewise for the full article
image, I can go ahead and now choose the
| | 02:58 | larger version, child_painting_large,
insert that, once again, give it Alt text.
| | 03:04 | In fact, I am just going to use exactly
the same thing that I just typed in for
| | 03:09 | the smaller picture.
| | 03:11 | Go ahead and paste that in here and I
am going to include a link for this.
| | 03:16 | In the Exercise Files here, in this
text file, we can just go ahead and
| | 03:20 | highlight this particular link here under
Artworks, and go ahead and paste that in place.
| | 03:27 | And the text will be Artworks artist.
| | 03:34 | Ed Emberley, and now I'm going
to go ahead and say Save & Close.
| | 03:41 | And when I go to the front-end of the
website and I go to News & Events and I
| | 03:45 | click on my News link, you'll see here
that we have a picture now associated
| | 03:50 | with the New Children's ArtWorks Program,
and if I click on the Read more link,
| | 03:55 | and I go into the full version of
this article, I see only one picture, the
| | 03:59 | large version of the picture, and at the
top of the screen I now have this extra link.
| | 04:04 | If I put in three links, all three of
the links would be up here on the top.
| | 04:07 | Those of you who know something about
CSS, I'd like to point out that there are
| | 04:12 | unique styles associated with all of the
placement and locations of these items,
| | 04:17 | which you should be able to override
using CSS, if you'd like these to appear
| | 04:21 | differently on the page.
| | 04:23 | In this particular template, this is
where the related links are showing up and
| | 04:26 | where the photos are showing up.
| | 04:28 | But what's great about this is, now,
here on my blog page, I can have a small
| | 04:33 | version of the article, and
it only shows up one time.
| | 04:37 | When I read more, I have a nice
large version of that picture.
| | 04:41 | I could have cropped this so that I
could have had just the child's face, for
| | 04:44 | example, on the blog page and then here
I could have had the full version of it.
| | 04:48 | So there are many creative things that
you can do with this new image placement.
| | 04:52 | What's more, your client doesn't have
to worry about making sure they put the
| | 04:55 | image in the right place in the
article, making sure they've got all of the
| | 04:58 | alignment correct and the floats
are correct and all the rest of it.
| | 05:01 | You can standardize this across all the
articles on your site, which will give
| | 05:05 | it a nice professional polish.
| | 05:08 | So I am going to go back
here into the backend of Joomla!
| | 05:10 | and I'm going to repeat this
process for the other two articles.
| | 05:14 | So for the Major Donation Received,
under the Images and links, Accordion Panel
| | 05:20 | over here on the right side of the
screen, I am going to go to the donors_small
| | 05:26 | picture to start with, Insert, and the
Alt text for that will be Dr. and Mrs.
| | 05:35 | Stanley J. Jones.
| | 05:41 | And I am going to copy that, Alt text,
and I am going to paste it down here for
| | 05:44 | the full article image.
| | 05:45 | And I'm going to select the donors_
large image for the full article text, and
| | 05:51 | I have a link here which I can paste
in the window and say, More on painting,
| | 06:00 | and I am going to say Save & Close, and now I am
going to work on the New Cafe Menu article item.
| | 06:06 | I am going to go ahead and click on
that, under Images and links, under Intro
| | 06:11 | Image, I'm going to pick the small cafe image.
| | 06:16 | New cafe menu announced, that will be
my Alt text, and likewise for the full
| | 06:23 | article image, I'll pick cafe_large,
Insert, New cafe menu announced.
| | 06:33 | Now, you'll notice that I've always
given these images the same Alt text, you
| | 06:37 | certainly don't have to do that, you
don't even have to use the same image, in
| | 06:41 | both cases you could use two very,
very different images rather than two that
| | 06:44 | are just sized differently.
| | 06:46 | Now I'm going to grab my link here from
my Exercise Files, paste that in place,
| | 06:53 | and then for my text I'll say
Learn more about cafes. Okay.
| | 07:00 | Save & Close.
| | 07:00 | Now when I go back to the front-end of
the website and click on my News link,
| | 07:06 | I'll have three news articles here, and
because we've sized the pictures here to
| | 07:13 | be exactly the same, in this case I
think they are like 144x144, if I
| | 07:19 | right-click on the image and I say View
Image Info, here in Firefox it gives me
| | 07:24 | the dimensions of 144x144 on the screen
and they're all formatted exactly, which
| | 07:29 | adds to that same sort of polish.
| | 07:32 | When I click on any of these Read mores,
I get a nice full size picture along
| | 07:38 | with the text of the article, and the link
is showing up here on the top of the page.
| | 07:43 | I can use my little links down here in
the bottom to jump between articles here
| | 07:47 | that are part of the news category.
| | 07:50 | So this is a very nice feature in Joomla!
| | 07:52 | 2.5 that's available in the core.
| | 07:54 | It starts to approach the CCK nature of
some extensions in Joomla! like K2 or Zoo.
| | 08:01 | CCK stands for Content Construction
Kit and these are more advanced ways of
| | 08:07 | putting content into your website.
| | 08:09 | So it's nice to see Joomla!
| | 08:10 | branching out and putting some of
these features here into the core, where we
| | 08:14 | can make great use of them in
things like our news articles.
| | Collapse this transcript |
|
|
7. Setting Display OptionsWorking with global article options, specific article options, and menu options: Which wins when?| 00:00 | Let's talk about Article Options.
| | 00:03 | Take a look at this page here where
it says Category and Published on and
| | 00:07 | Written by and Hits.
| | 00:09 | One of the most powerful, though
occasionally confusing, aspects of Joomla!
| | 00:13 | is where these sorts of options
appear within Joomla!, because there are
| | 00:19 | three levels of them.
| | 00:20 | There are Global Article Options,
there are Article Options available at the
| | 00:25 | Menu Item level, and there are
Article Options which are available on an
| | 00:30 | article-by-article basis as well.
| | 00:33 | The Global Article Configuration is the
most global and will impact everything
| | 00:38 | on your website immediately.
| | 00:40 | The Menu Article Options and the
article options available on an
| | 00:44 | article-by-article basis are there to
override specific instances of anything
| | 00:49 | that you set up in the Global Article Options.
| | 00:51 | What we are going to do now is I am
going to show you how to set up the
| | 00:54 | Global Article Options in this video,
and we'll clean up this site and really
| | 00:59 | make it look a whole lot better once we get
through these options that we need to set up.
| | 01:02 | So I am going to jump back
into the backend of Joomla!
| | 01:06 | and I am going to go to the Article Manager.
| | 01:09 | And in the upper right-hand corner of
the Article Manager you should have a
| | 01:12 | button here that says Options.
| | 01:14 | This button will probably only show
up if you're logged in as a Super User,
| | 01:18 | it's unusual for you to have permission to
see this button if you're at any other level.
| | 01:23 | Go ahead and click that, and you'll
see that we have many different tabs
| | 01:27 | here and lots of things that we can
configure as far as Article Options are concerned.
| | 01:32 | I am going to start with the Articles
tab here in the Article Manager Options,
| | 01:37 | and we're going to run through
all of the options that are here.
| | 01:40 | First of all, we're going to show
the title of the article of course.
| | 01:44 | Do we want to have the titles linked?
| | 01:45 | Link titles are useful if you're on a
page like the news blog page or on the
| | 01:50 | homepage, so I can actually click on
the words here for these exhibits or I can
| | 01:55 | click on the Read more link.
| | 01:56 | If I turn off Linked Titles, I'll see
the title, but I won't be able to click on
| | 02:00 | it to get more, I'd have to
click on the Read more link.
| | 02:02 | So I am going to go ahead
and leave Linked Titles on.
| | 02:06 | I definitely want to show the Intro Text,
but I don't need to show the Category
| | 02:09 | and I certainly don't need a link to it either.
| | 02:11 | I'm not going to show the Author,
because they're all written by Super User.
| | 02:15 | I don't care about the publication date either.
| | 02:18 | The Show Navigation option pertains to,
I am going to go to the News page and I
| | 02:24 | am going to go to News and I am going
to go to the Children ArtWorks Program.
| | 02:29 | Down here in the bottom you'll see
sometimes these little navigation options
| | 02:33 | that say Next and Previous.
| | 02:35 | If I click Next here, see I go to my next
news article, about the Major Donation Received.
| | 02:40 | I can click here to go next or I can
click here to go to the previous article.
| | 02:44 | And so these are the articles
that are within a given category.
| | 02:47 | And this down here, these specific
buttons for Previous and Next, these are
| | 02:51 | considered to be the navigation that is
referred to here under Show Navigation.
| | 02:56 | It's not a navigation bar for
your website where your menus are.
| | 03:01 | I find that navigation on the bottom to
be a little bit annoying, so I am going
| | 03:04 | to go ahead and turn that off.
| | 03:07 | I definitely want to show my Read mores,
and this is where you can change that
| | 03:11 | showing the title with Read more.
| | 03:14 | You may have noticed, if I go back to
the News page here that these Read more
| | 03:18 | links all say Read more:
| | 03:20 | followed by a bunch of words.
| | 03:22 | Some of you may really like
this and some of you may not.
| | 03:25 | The reason why these additional words
are here is for search engine optimization
| | 03:29 | purposes, because the words located
inside of links are more heavily weighted
| | 03:34 | than words that are just otherwise on the page.
| | 03:37 | So if you have a page with, in this case,
three different Read mores that go to
| | 03:40 | three different pages, that's not as
effective for search engines as saying
| | 03:44 | where you will go when you
click on the Read more link.
| | 03:47 | It also helps people with disabilities.
| | 03:49 | But if you need to turn that off and
you need it to say just Read More, you
| | 03:53 | can change Show Title with Read More
to say Hide, and right now this is Read
| | 03:58 | More Limit indicates how many characters of
the title will show after the words Read More;
| | 04:03 | in this case it's 100 characters.
| | 04:06 | The icons down here at the bottom
are a little bit awkward as well.
| | 04:10 | What these have to do with are these
little icons up here in the corner. In Joomla!
| | 04:15 | 1.5 we used to have another icon
which was a PDF icon and that is no longer
| | 04:21 | supported in Joomla! 1.6 and higher.
| | 04:23 | I believe what happened was that the
PDF code was so out-of-date that Joomla!
| | 04:27 | didn't feel like supporting it anymore,
so it's been dropped from the core.
| | 04:31 | So you can now have a printer-friendly
version of any of these articles and you
| | 04:35 | can email them to a friend.
| | 04:36 | All you have to do is click on these links.
| | 04:39 | And so here's a printer-friendly version
of this New Children's ArtWorks Program
| | 04:42 | Announced, and if I click on the Email
it to a friend, I get a nice little form
| | 04:47 | here that I can fill out to send a
link to that specific article to a friend.
| | 04:52 | Some people really like these,
some people really hate them.
| | 04:55 | So here under Show icons you may
think if I just say Hide, and then say
| | 05:01 | Save, and I Refresh the front-end of my website,
we'll see a whole bunch of stuff disappear.
| | 05:08 | You see here that we've hidden the
icons, but we haven't actually hidden the
| | 05:11 | words, the icons have turned
into words that say Print and Email.
| | 05:14 | So if you want everything to
disappear in that upper right-hand corner, you
| | 05:19 | don't want it to say Print or Email
and you don't want the icons either, you
| | 05:22 | also have to hide the Show
Print Icon and show Email Icon.
| | 05:27 | And you might have noticed that we are
still displaying how many hits each one
| | 05:30 | of these articles has gotten.
| | 05:32 | A hit means that
somebody has viewed the article.
| | 05:35 | Hits are not recorded when the
articles are on a page like this, but they are
| | 05:39 | when somebody goes forward and
does a full Read more of the article.
| | 05:42 | That kind of information is still
available to you inside of the Article Manager
| | 05:48 | and I'll show you just as
soon as I turn this off.
| | 05:50 | So I am going to go ahead and Hide how
many hits, but it doesn't mean that Joomla!
| | 05:54 | is not tracking them for you.
| | 05:55 | Positioning of the links has to
do with the new feature in Joomla!
| | 05:59 | 2.5 that I just covered in the
previous video pertaining to the standardized
| | 06:04 | placement of images and
links inside of a given article.
| | 06:08 | By default those links are
located on the top of the article.
| | 06:11 | I'd actually like them to appear below and
we'll take a look at that here in just a second.
| | 06:16 | I have gone ahead and configured this
article's screen exactly the way I want,
| | 06:20 | I am going to say Save & Close for the moment,
so I can show you the Article Manager screen.
| | 06:24 | Note that we do have a column here
called Hits, so Hits are being tracked.
| | 06:29 | The question with the Article Options
screen is whether those hits are going to
| | 06:33 | show on the front-end of the website.
| | 06:36 | If you go ahead and refresh your News
page here, you'll see that finally things
| | 06:40 | are lining up beautifully here on the page.
| | 06:42 | Doesn't it look just so much
better than what we had before?
| | 06:46 | We have these nice pictures and
everything here on the News page, and when I go
| | 06:49 | to Read more, now my links are showing
up underneath the article, as I specified
| | 06:56 | in the Article Options.
| | 06:57 | I don't have any of the dates or any
of that other information that shows up
| | 07:01 | between the title and the full text of the
article, and the pages are so much cleaner.
| | 07:06 | We go back to the homepage, you'll
notice that the same treatment has been given
| | 07:10 | to the homepage, but also all
of the other pages on the site.
| | 07:14 | The other pages have gotten
the same kind of treatment.
| | 07:16 | I am going to jump back into the
Article Options for another minute to show you
| | 07:20 | that there are other tabs here.
| | 07:22 | There are some interesting options here
in the Editing Layout I am going to come
| | 07:26 | back to in a little while.
| | 07:27 | There are some options here for
configuring how Category blogs, Category lists
| | 07:32 | might appear in a standardized way on
the page, including under Blog/Featured
| | 07:36 | Layouts how the numbers that we were
typing in, in the Menu Items, in terms of
| | 07:42 | the number of leading articles and
intro articles and so forth, that can be set
| | 07:45 | globally, and then you can overwrite
it on a menu item by menu item basis.
| | 07:50 | There are some global settings
here for List Layouts as well.
| | 07:53 | One of the last things is the
Permissions tab, you'll find this available on any
| | 07:58 | of the option screens for any of
the managers you take a look at.
| | 08:01 | And then, Menu Manager, there is an
option screen and there is a Permissions
| | 08:05 | tab associated with it, same for the
Module Manager and so forth, and this is
| | 08:09 | where you can configure who has access to
get into the Article Manager from the backend.
| | 08:15 | That is all part of ACL, I cover
that in a lot of detail in Joomla!
| | 08:19 | 1.7 Access Control lists.
| | 08:22 | That's all the changes we need to
make here for now, and I am going to go
| | 08:26 | over how you can set some different
Article Options inside of Menus in the
| | 08:30 | next video.
| | Collapse this transcript |
| Setting menu options| 00:00 | I'm looking at the News page on my Joomla!
| | 00:03 | website and we just went through the
process of getting rid of a whole bunch of
| | 00:07 | options that are available
to us for the articles here.
| | 00:10 | We got rid of things like showing
the category and who wrote the article
| | 00:13 | and things like that.
| | 00:14 | But this is a News page and it might be
a very nice thing to show dates on this
| | 00:20 | particular page associated
with these news articles.
| | 00:23 | Right now there's no date associated
with it so we have no sense of when these
| | 00:27 | particular news events
actually happened. Joomla!
| | 00:30 | does track a date inside of each
article for when an article was created and
| | 00:35 | when it was modified.
| | 00:37 | The created date means it's the date
that you've hit that New button, you
| | 00:40 | put the information in, and the
moment you click the Save or Save & Close
| | 00:44 | button, that is the moment that, that article
is created and it's recorded in the database.
| | 00:49 | That moment in time will always be the same.
| | 00:52 | For modified date, what that
indicates is the last time you went into the
| | 00:56 | article and made an edit.
| | 00:58 | What we probably like to use is the
created date, which always stays constant.
| | 01:02 | And we might need to customize those
created dates for these articles just a
| | 01:05 | little bit so that it's not showing
the two or three minutes it took me to
| | 01:10 | create these articles.
| | 01:12 | Let's start by editing some article
dates inside of the Article Manager.
| | 01:16 | So if you go into the Article Manager
and I'm going to find my New Children's
| | 01:21 | ArtWork Program Announced article.
| | 01:24 | If your screen doesn't look
quite like mine, I'm still sorted by
| | 01:27 | categories here, not by title.
| | 01:30 | And inside of the New Children's
ArtWorks Program, under the Publishing Options,
| | 01:34 | you'll see that I have a Created
Date and a Start Publishing date.
| | 01:38 | The Created Date is what we need to
change and I can click on my little Calendar
| | 01:42 | icon here and pick a date
that this article was created.
| | 01:46 | Let's go ahead and say that it was
created on March 30, and I can even get rid
| | 01:52 | of the time if I wanted.
| | 01:55 | I can go ahead and say Save & Close.
| | 01:56 | Then I can go to my next article, Major
Donation Received and click on that, go
| | 02:04 | to the Publishing Options and I can
change a Created Date on that as well.
| | 02:07 | Let's make that one happen say March 14.
| | 02:12 | Save & Close that one.
| | 02:14 | And then on the New Cafe Menu,
we'll make that one the oldest.
| | 02:19 | So under Publishing Options, we'll
change the Created Date, let's say, to the
| | 02:25 | 17, and go ahead and say Save & Close.
| | 02:29 | Now we've got some dates in place
and they've got some formatting.
| | 02:32 | So now I'd like to show those dates on
just the news portion of the website.
| | 02:37 | We've turned off dates globally through
the Global options, the ones up here in
| | 02:41 | the upper right-hand corner.
| | 02:43 | But now what I'd like to do is show the
dates for the Created Date, but only on
| | 02:48 | the items that are news items.
| | 02:50 | So how would I go about doing that?
| | 02:52 | Well, fortunately, I can turn on
those dates inside of the menu item that's
| | 02:57 | associated with the news articles.
| | 02:59 | So I'm going to go to Menu>Main Menu,
and I'm going to go down to my specific
| | 03:04 | News article here or News blog link.
| | 03:09 | Under here I have an
option here for Article Options.
| | 03:12 | Right now these are all set to Use Global,
as you'll see, and what that means is
| | 03:18 | it's taking a look at the setting
inside of the Article Options from the upper
| | 03:23 | right-hand corner of the Article Manager.
| | 03:25 | What I'm going to do is I'm going
to override that global setting, and
| | 03:28 | specifically for Show Created Date right here.
| | 03:31 | You'll see that we have three choices.
| | 03:34 | We can Show the Created Date, we can
Hide the Created Date, or we can use
| | 03:39 | the Article Settings.
| | 03:41 | Using the Article Settings indicates
that it will look at each individual
| | 03:45 | article to find out what the setting
is in each specific article and Show or
| | 03:50 | Hide the date accordingly.
| | 03:52 | I'm going to go through that in the next video.
| | 03:54 | But for now what we want to
do is show the Created Date.
| | 03:56 | So I'm going to go ahead and click on
Show there and go ahead and say Save & Close.
| | 04:02 | Now when I Refresh the News
page, there's our Created Date.
| | 04:07 | You may not be very happy with
the formatting of that Created Date.
| | 04:11 | However, it is possible to change this in
a relatively straightforward way in Joomla!
| | 04:16 | 2.5.
| | 04:18 | It has to do with something called
language strings and I'll be covering that in
| | 04:22 | Chapter 11, creating a
website with multiple languages.
| | Collapse this transcript |
| Setting individual article options| 00:00 | I'm on the front end of my Joomla!
| | 00:02 | website and I'm going to go on over to
my Events page by going to News & Events
| | 00:06 | and then clicking on my Events link.
| | 00:08 | And you see that I have two
articles here in a category list.
| | 00:11 | The formatting for a category list is coming
from right now, the Global Article Options.
| | 00:18 | There is some additional formatting that
has come from each individual article as well.
| | 00:22 | If we take a look at the Family
Programs article, by clicking on it, you see
| | 00:26 | that I have a Title and I have some
text here for that particular article.
| | 00:30 | If I click of the Artworks Program article,
there is no title that is showing here.
| | 00:36 | That's because the Article
Title has been turned off in the
| | 00:39 | backend administrator.
| | 00:41 | So if I switch to the backend of the Joomla!
| | 00:43 | and I go to the Article Manager and
I go to the Artworks Program Starts
| | 00:47 | Saturday, March 3 article.
| | 00:49 | I'll see that Show Title
here has been set to Hide.
| | 00:53 | This is now overwriting the
Global Article Option configuration.
| | 00:57 | It's also overwriting a menu option.
| | 01:00 | The Menu itself is set to Show
Global Configuration which means that it's
| | 01:05 | showing what is in the Article options,
and it's not overwriting it there.
| | 01:09 | They may not necessarily override the
Menu options however, depending on how the
| | 01:13 | Menu options have been configured.
| | 01:16 | What I'm going to do right now is I'm
going to reset this particular option to
| | 01:19 | Use Global, and I'm going to say Save &
Close and if we refresh this page here,
| | 01:26 | we can see that the title is back
here for this particular article.
| | 01:30 | Using the individual Article options is
really a very much of last resort when
| | 01:36 | styling your website.
| | 01:37 | Keep in mind that any time that you
style things on an individual one by one
| | 01:41 | basis, it means that you have to go into
each individual article and you have to
| | 01:46 | style and set settings for each one of
those articles individually and if you
| | 01:51 | have hundreds or thousands of articles
on your website that is a lot of work.
| | 01:55 | Ideally what you're going to try to do,
in your approach to setting up options
| | 01:59 | for your articles, is to set
them globally wherever possible.
| | 02:03 | Use overrides on the menu basis
where needed, and then if you have truly
| | 02:08 | variations between articles, you want
to use the individual Article options.
| | 02:12 | One of the things I'm going to show you in a
later video is it's now possible in Joomla!
| | 02:16 | 2.5 to hide the individual
article options entirely.
| | 02:20 | This will keep your clients out of
changing any of those individual Article options.
| | 02:25 | There'll only be one place they can
change any of the options and that will be
| | 02:28 | inside of individual Menu items.
| | 02:30 | That will work much better in the long run.
| | Collapse this transcript |
| Comparing page headings, article titles, and browser page titles| 00:00 | One of the new features in Joomla!
| | 00:02 | 1.6, 1.7 and 2.5 is the concept of
page headings, article titles and
| | 00:07 | browser page titles.
| | 00:09 | And I'd like to demonstrate to you
what the differences are between these
| | 00:12 | particular items, so that you can better
customize your pages using these pieces of content.
| | 00:18 | So I'm going to start by creating a new article.
| | 00:20 | I'm going to go to Content>
Article Manager>Add New Article.
| | 00:24 | And I'm going to give my article a Title,
and in this case I'm going to give it
| | 00:27 | a title of Article Title.
| | 00:30 | I'm going to leave the Category set
to Uncategorized and down here in the
| | 00:33 | Article Text I'm going to type in Article Text.
| | 00:38 | And I'm going to go ahead and hit Save & Close.
| | 00:41 | Now I'm going to go into my Menus
>Main Menu>Add a New Menu Item.
| | 00:47 | I'm going to make a Single Article Menu
Type and I'm going to give this a Menu
| | 00:53 | Title of Menu Title.
| | 00:56 | The Article I'm going to select is
Article Title, and now here on the right
| | 01:01 | side of the screen, you'll notice that we
have an option here called Page Display Option.
| | 01:05 | If you click that, you'll see that we
have the ability to customize a Browser
| | 01:09 | Page Title and the ability to Show or
Hide a Page Heading and also customize
| | 01:13 | what that Page Heading is.
| | 01:15 | My Browser Page Title I'm going
to type in, Browser Page Title.
| | 01:21 | I'll show my page heading and I'm going to
type in for the Page Heading, Page Heading.
| | 01:27 | This is always a great way
to debug things in Joomla!
| | 01:30 | so that it becomes clear what things
are being called on the back end of the
| | 01:33 | website, and then correspondingly were
they're going to show up on the front end
| | 01:37 | of the website, when you're done.
| | 01:38 | So go and hit Save & Close and on the front
end of the website hit your Refresh button.
| | 01:44 | You'll notice that we have a
new item here called Menu Title.
| | 01:47 | Remember that was the blank that we
typed in and we put in Menu Title.
| | 01:51 | So I'm going to click on that and
you'll see now that we have an item called
| | 01:56 | Page Heading, an Article Title.
| | 01:58 | Here in the tab at the top of Firefox
you'll see that says SAMOCA that's our
| | 02:03 | Website name -Browser Page Title.
| | 02:06 | So the Browser Page Title is the
equivalent to the HTML title tag that shows up
| | 02:12 | in the head of your document and
whatever you fill in there will show up in the
| | 02:15 | top tab here in Firefox.
| | 02:17 | It'll show up in the blue bar at the top of
page in Internet Explorer that kind of thing.
| | 02:22 | Anything that's in a Browser Page
Title is very important to search
| | 02:26 | engine optimization.
| | 02:27 | So customizing your Browser
Page Title is a great idea.
| | 02:31 | A Page Heading will show up above the
Article Title on the page, and you can
| | 02:36 | think of this as a big overarching title
for the page, or are you could use Page
| | 02:40 | Headings because you like to style in
better in the template that you work with,
| | 02:43 | in which case you could
hide your Article Titles.
| | 02:46 | In any case you have the ability to
have two headings on your page, probably
| | 02:50 | your Article Title as well as a Page Heading.
| | 02:53 | The place where the Page Heading might be
useful would be in a page like the News page.
| | 02:59 | So when I go to the News page, there is
no indication here that the News page is
| | 03:02 | actually a News page.
| | 03:04 | It's just a series of
articles that are here on the page.
| | 03:08 | Likewise when I go to the Events page,
there is no indication here that this
| | 03:11 | is the Events page.
| | 03:13 | So the page heading could become
very useful here because now I can put a
| | 03:17 | heading at the top of these two pages,
which didn't exist before because I was
| | 03:21 | working with Article Titles and these
are a category blog and a category list.
| | 03:25 | There are no Article Titles to
top the very top of this Webpage.
| | 03:30 | If I go into my News, Menu Item, and
I changed my Page Display Options to
| | 03:36 | show the Page Heading and make the
Page Heading say News>Save & Close and I
| | 03:43 | do the same for Events.
| | 03:44 | I am going to click on Events.
| | 03:45 | I'm going to go into Page Display Options.
| | 03:49 | I'm going to Show the Page Heading
and I'm going type in Events, as my Page
| | 03:54 | Heading and say Save & Close.
| | 03:57 | Now when I Refresh my Events page, you
see that I have a title here of Events.
| | 04:02 | When I go to my News page, I have a
title here at the very top of News.
| | 04:05 | So people are sure that
they've arrived on the News page.
| | 04:08 | So now that we've gotten the News &
Events formatted nicely, I'd like to get
| | 04:12 | rid of this temporary link that I put on
the top of the page here for the Menu Title.
| | 04:16 | So to do that, I'm going to flip
back to the back end here and get out of
| | 04:21 | editing the Events Menu Item here.
| | 04:23 | As I had mentioned before when you want
to get rid of something, you want to use
| | 04:27 | MAC, and when you create something
you use CAM, so Categories, Articles and
| | 04:31 | Menus when you create, Menus
Articles and Categories, when you delete.
| | 04:35 | So the first thing we need to do is delete
our Menu Item, that's our Menu Title down here.
| | 04:40 | I'm going to go ahead and Trash that.
| | 04:42 | And then I'm going to go to the Content
> Article Manager and I'm going to find
| | 04:48 | my Article Title, Article.
| | 04:50 | I'm going to check by it and I'm going
to Trash that, and now when I go back
| | 04:55 | to the front end of the website and I Refresh,
that particular link is gone from the website.
| | 05:01 | Browser Page Titles, Page Headings and
Article Titles are three unique ways of
| | 05:06 | identifying content on your website.
| | 05:08 | All of them are important to making a
smoothly functioning website and labeling
| | 05:13 | your content appropriately.
| | Collapse this transcript |
| Turning off the homepage heading| 00:00 | One of the things I don't really like
about Joomla!'s default configuration is
| | 00:04 | the fact that when you're on the
homepage of the website it proudly announces
| | 00:08 | you're on the homepage of the website,
and many people wonder how do I turn off
| | 00:13 | that Home on the homepage.
| | 00:14 | Well here's the secret.
| | 00:17 | If you take a look at the formatting of
this page you see the Home followed by
| | 00:20 | the article title here, and if you
take a look at the formatting of the News
| | 00:24 | page you'll also see that there's News
followed by an article title that kind
| | 00:30 | of looks like the page heading, that's what
we just put in for the News page, didn't we?
| | 00:34 | Well it's the page heading that's driving
this Home identifier on the top of the homepage.
| | 00:39 | So if we jump back into the back end of Joomla!
| | 00:42 | and go to Menus>Main Menu,
and we click on our Home link.
| | 00:48 | We can scroll on down the page here
to our Page Display Options, and you'll
| | 00:53 | see that Show Page Heading is set to Yes,
although no page heading has been typed in.
| | 00:59 | When the Page Heading is set to Yes, but
there is nothing specified for the Page
| | 01:03 | Heading it will take the Menu
title and display it as a Page Heading.
| | 01:08 | So our Menu title is Home, that's why the
word Home is appearing on your homepage.
| | 01:14 | To get rid of this you can either type
in different text for the Page Heading or
| | 01:17 | you can simply say Show Page Heading: No.
| | 01:21 | Go ahead and hit Save & Close,
refresh the homepage of the website and that
| | 01:27 | annoying little banner on the
top that says Home, it's now gone.
| | Collapse this transcript |
| Setting individual article configuration options| 00:00 | One of the last things I'd like to
cover in this chapter is some of the
| | 00:04 | global article options, and how they
can help to strip-down the interface
| | 00:09 | inside the Article Manager.
| | 00:10 | Let's take a look at a typical
article inside of our Article Manager.
| | 00:13 | I'm going to go to my Article Manager and
I'm just going to click on the About Us link.
| | 00:18 | So far we've explored a fairly good detail the
concept of our Page Title and our Categories.
| | 00:24 | We've of course explored
the Editor in great detail.
| | 00:27 | I have covered that Created
Date in a couple of other videos.
| | 00:30 | And I showed you the Article
options in an earlier video.
| | 00:34 | However, there are some other
options that are available here.
| | 00:37 | The Configure Edit Screen is
specifically what I'm talking about.
| | 00:41 | The Configure Edit Screen, these
are the article options that override
| | 00:45 | the global options that will control
exactly what are showing here within our article.
| | 00:51 | So what about our global
options and configure them.
| | 00:53 | But note that that configuration is
also here inside an individual article.
| | 00:58 | The image is in links I
covered in an earlier video as well.
| | 01:01 | This is where you can put in a
standardized small picture or a large picture for
| | 01:06 | your individual articles.
| | 01:07 | We did this for the news part of the website.
| | 01:10 | And of course here's where you can put in
Metadata such as a Meta description in Meta Keywords.
| | 01:15 | These will override any global
settings that you have in your
| | 01:18 | global configuration.
| | 01:19 | So this a lot for a client, to look
at, a client who just wants to go in
| | 01:23 | and make a simple edit.
| | 01:25 | I've already talked about the
importance of stripping down the quantity of
| | 01:28 | buttons that you have here in JCE to
make a simplified interface for your
| | 01:32 | clients so that they can
easily edit your webpage.
| | 01:35 | Likewise, wouldn't it be great if you
could strip-down the number of options
| | 01:38 | that were here inside of your Article Manager.
| | 01:41 | So your client didn't see all of
those and get confused by them, like the
| | 01:45 | Article options for example.
| | 01:47 | Fortunately there's a way to
do that now in Joomla! 2.5.
| | 01:49 | I'm going to go ahead and hit Close
and here inside of my Article Manager I'm
| | 01:55 | going to go to Options.
| | 01:57 | Inside of our Options button, if you
go to the Editing Layout option, this is
| | 02:02 | what will control what shows up in
the editing interface of the website.
| | 02:07 | So the first one is, Show Publishing
Options, this will Display or hide the
| | 02:12 | publishing options in the Article Edit
view, like changing the date or changing
| | 02:17 | the author for the article.
| | 02:18 | I'm going to go ahead and set this to No,
so you can see that a whole panel will
| | 02:22 | disappear when we disabled this.
| | 02:24 | The Article options I've already
suggested might be a really good thing to hide.
| | 02:29 | Your client isn't likely to get this
screen that we're looking at right now, the
| | 02:32 | Global Article Manager Options when they login.
| | 02:35 | That's something that's
locked down for just super users.
| | 02:38 | But you can turn off the individual
Article Options if you set this option to No.
| | 02:43 | Frontend Images and Links, and
Administrator Images and Links has to deal with
| | 02:48 | that panel that we saw, where you could
enter the two images in the three links
| | 02:52 | associated with a specific article.
| | 02:55 | Right now that is set to display if you're
logged in to the back end of the website.
| | 02:59 | But if you logged in to the front end
of the website, you will not get the
| | 03:03 | interface for entering those
two images and those three links.
| | 03:07 | If you are making use of images and
links, then I would recommend that you
| | 03:11 | standardize where they're available.
| | 03:14 | They should be available in all
likelihood on both the frontend and the backend.
| | 03:17 | So I'm going to go ahead and turn that on.
| | 03:20 | The Links here URL A, B and C refer to
the three links that you could put in, in
| | 03:25 | the Images and Links accordion panel.
| | 03:28 | You can set those links to open in a
parent window by default or open in a
| | 03:31 | new window by default.
| | 03:33 | Which is correct, it'll depend on what
you've decided are the standards for your website.
| | 03:38 | In general, my standards are, if it's
going to open an article within the websites.
| | 03:43 | So it's just going
somewhere else within the website.
| | 03:45 | It would open in the parent window.
| | 03:47 | But if it's going to an offsite link,
I want it to open in a new window.
| | 03:51 | So you can control that here.
| | 03:53 | And then finally at the bottom, you
can control the Float for the Image.
| | 03:57 | Float is a fancy CSS term that means
whether the image is align to left side
| | 04:02 | of the screen or align to the right side of
the screen, with the text wrapping around it.
| | 04:06 | It looks like it's been coded atleast
on this template with a little bit of
| | 04:09 | white space, so the text doesn't
smash right up against the photo.
| | 04:13 | I would recommend that
you do those consistently.
| | 04:15 | They're either both left or they're both right.
| | 04:17 | But of course it's up to your designer or
up to you, to what you think looks good.
| | 04:22 | So I'm going to go ahead and hit Save &
Close, and now when I go back into the
| | 04:27 | About Us article, you'll notice that
I've significantly fewer options over here.
| | 04:32 | That's because I got rid of the
publishing information about when the article
| | 04:35 | was published and who
published it. That's now gone.
| | 04:38 | I only have these options here
to configure the editing screen.
| | 04:42 | Here is the panel for the Images and
Links which we're using in the News portion
| | 04:46 | of this website and here's
the information on the metadata.
| | 04:49 | No border is there any additional
information over here on the side for our
| | 04:53 | clients to get confused by terms of
article options or publishing dates or
| | 04:57 | start to finish publishing dates, which for
most clients is going to work great for them.
| | 05:02 | Obviously for some sites your
clients may need to set a start or finish
| | 05:06 | publishing date, or they may need to
change authorship of an article, in which
| | 05:09 | case you can't turn that Accordion panel off.
| | 05:12 | But the flipside is, they'll know
when it is and they'll know how to use it
| | 05:15 | because you would have trained
them on how to use it, right.
| | 05:19 | So it won't be something there that's
sitting there that's not being used and
| | 05:22 | they're confused as to why it even exists.
| | Collapse this transcript |
|
|
8. Using ModulesConfiguring modules| 00:00 | So far with this Joomla!
| | 00:01 | project, we have set up some
content for the website, and that content
| | 00:05 | consistently shows up in the middle of the page.
| | 00:08 | We have created our very first module,
the Menu Module, which displays on the
| | 00:13 | left side of the page where we happened
to have some secondary navigation, such
| | 00:17 | as say the About page.
| | 00:19 | Modules go well beyond menus though.
| | 00:22 | A module is any bit of functionality
that you'd like to display in some area,
| | 00:27 | other than the main part of the webpage.
| | 00:29 | As I would define the main part of the
webpage that would be where this About
| | 00:33 | Us article occurs, all of that area would be
what I consider the main part of the webpage.
| | 00:39 | And in fact, that is where
components display on your website.
| | 00:43 | Everywhere else on the webpage is
either displaying parts of the template which
| | 00:47 | would be the case of this banner
or they are displaying modules.
| | 00:50 | So in the case of this particular
design, the menu at the top of the page,
| | 00:55 | the breadcrumb here, this menu, a
Login Form and down here on the bottom
| | 01:01 | another menu item here.
| | 01:03 | These are all modules.
| | 01:04 | The question is, how do you know what
module positions are available and how you
| | 01:10 | can assign modules to those positions?
| | 01:12 | So you may be wondering about that and I am
going to show you how to do that in this video.
| | 01:16 | So in the backend of Joomla!,
we are going to start by going to
| | 01:19 | Extensions>Template Manager, and
enable a particular setting here.
| | 01:25 | Under Options, it says Preview Module Positions,
by default this is Disabled on the website.
| | 01:31 | What we are going to so is we are
going to Enable it and say Save & Close.
| | 01:37 | And now if you take a look at the
small icon next to each of these template
| | 01:41 | styles, not the words but the icon
next to each one of these styles.
| | 01:46 | I am going to go to the Beez2 Preview here.
| | 01:50 | If I click that icon, this will open
up a new tab for me and it will show me
| | 01:55 | exactly where all of the
module positions are located.
| | 01:59 | I can see that there's a position 0
here at the very top of the page.
| | 02:03 | I can see that there's a 6,
8 and 3 on the right side.
| | 02:07 | I can see a 12 on top of my article.
| | 02:10 | I can see a position 7 and 5 over here
on the left side of page, and down here
| | 02:14 | across the bottom are 9, 10, 11 and 14.
| | 02:18 | So this is a very helpful view when
I'm trying to figure out where I want to
| | 02:22 | assign a specific module.
| | 02:24 | As part of the module configuration
process, you will need to assign your
| | 02:27 | module to display in a certain position, which
will control where it appears on the webpage.
| | 02:33 | Those of you who are familiar with Joomla!
| | 02:34 | 1.5, probably remember that tp=1 trick,
tp=1 stands for template, and it used to
| | 02:42 | be that we would just go to
the front-end of our website.
| | 02:46 | I am going to hit my Tab here
so I go back to my Home page.
| | 02:49 | We would simply put /?tp=1 at the end
of our URL, and that would also show the
| | 02:57 | module positions on the page.
| | 02:58 | This still works obviously, as I am
taking a look at this page right now.
| | 03:02 | But be sure to remember to enable the
Preview Module Positions option inside
| | 03:07 | of the Template Manager otherwise you won't
be able to preview any of the module positions.
| | 03:12 | To turn off this display of course, all
you need to do is get rid of that tp=1 here.
| | 03:17 | And your website is going to
look perfectly okay afterwards.
| | 03:20 | To turn off the ability for anyone to
preview the module positions for the
| | 03:24 | website, you will want to go
back to the back-end of Joomla!
| | 03:27 | You will want to go back to your
Options and you will want to Disable
| | 03:31 | Preview Module Positions.
| | 03:33 | I am going to leave this Enabled for
the moment though, because I find it
| | 03:36 | extremely helpful to have this
turned on during template development.
| | 03:39 | Furthermore, I frequently leave it on
after I have launched a website, just
| | 03:43 | in case some Joomla!
| | 03:44 | developers wondering how I have done the
magic that is taking place within my template.
| | 03:49 | I don't mind people taking a look at
where module positions are, you have to be
| | 03:52 | pretty geeky to know this trick.
| | 03:54 | But some people are bothered by it and
that's why there is a toggle here now, so
| | 03:59 | that you can Disable it so that people
can't preview your module positions, who
| | 04:03 | may not even have
administrator access to your website.
| | Collapse this transcript |
| Creating a custom HTML module| 00:00 | One of the simplest and most common
modules to configure inside of Joomla!
| | 00:04 | is called the Custom HTML Module.
| | 00:07 | The Custom HTML Module functions like a little
mini article, but it appears in a module position.
| | 00:13 | There's really not much to it.
| | 00:14 | It's just a box where you can type
in any text you want, make links, put
| | 00:18 | in images, and do anything else that
you might happen to want to do with
| | 00:22 | that particular module.
| | 00:24 | I am going to add a module to this website.
| | 00:26 | I am going to put it on the right side
of the page, and the module is going to
| | 00:30 | contain the hours and the social
media icons for Facebook and Twitter, I am
| | 00:35 | going to locate that on the
right side of a page here.
| | 00:38 | So to get started I am going to
go to my Module Manager, under
| | 00:41 | Extensions>Module Manager.
| | 00:44 | You see just like all of the other
managers that you have seen to this point,
| | 00:48 | there is a nice chart here with the
names of the modules, whether they are
| | 00:51 | published or not, their positions
on the page and so on and so forth.
| | 00:55 | I am going to start by clicking the New
button up here on the top of the page,
| | 00:59 | because I want to make a new module.
| | 01:01 | This will tell me all of the kinds of
modules that are installed for me on
| | 01:05 | my particular Joomla! installation.
| | 01:07 | And this is a default Joomla!
| | 01:08 | installation, so these are the
modules that come with Joomla!.
| | 01:12 | I am going to be using the Custom HTML Module,
so I'm going to go ahead and click on that.
| | 01:17 | I am going to start by
giving this module a title.
| | 01:21 | Let's call it Hours, and I am going to
Show that title, I could choose not to
| | 01:26 | show that title if I wish.
| | 01:27 | Under Position, I am going to
click the Select Position button.
| | 01:32 | Right now this is showing me module
positions for all of the templates that are
| | 01:35 | currently installed on my website.
| | 01:37 | What I would like to do is whittle
that down to just the module positions
| | 01:41 | that are relevant to me.
| | 01:42 | So I am going to change my template here
to the beez_2.0 template, and this will
| | 01:47 | show me all of the module
positions that I have available to me.
| | 01:50 | I would like one on the right side
of the page, the one over here called
| | 01:54 | position-6 is for the Right and the top.
| | 01:56 | So I am going to choose that as my position.
| | 02:00 | Scrolling down the page here and we
have the output, and if I go to my Exercise
| | 02:06 | Files, here's my Hours.
| | 02:07 | I am going to go ahead and highlight,
Ctrl+C or Command+C to copy, Ctrl+V
| | 02:11 | or Command+V to paste, and then underneath
I am going to put in my social media icons.
| | 02:16 | I need to upload those so I am
going to click on my Image button.
| | 02:19 | Scroll on down to the bottom of the
page here and browse for those files, there
| | 02:26 | they are, Facebook and Twitter.
| | 02:27 | Select them both, say Open,
Start Upload, boom boom.
| | 02:31 | There's my Facebook icon, here's my Twitter
icon, so I am going to go ahead and put those in.
| | 02:36 | I will go ahead and click on the
Facebook icon first and say Facebook for
| | 02:42 | my Image Description and say Insert, then I
will put in a space or two next to Facebook there.
| | 02:51 | And then I'm going to put in my next
image which is my Twitter icon and I will
| | 02:56 | put in a Description there of
Twitter and Insert. There they are.
| | 03:03 | Now I need to make those links.
| | 03:04 | So if I click on the Facebook icon and
click on my Link icon here inside of JCE,
| | 03:11 | this will give me the screen where I
can enter a link, and in my social media
| | 03:16 | Exercise Files here, here's
my link for the Facebook page.
| | 03:19 | If I highlight all of that, Ctrl+C or
Command+C to copy, Ctrl+V or Command+V to
| | 03:24 | paste, that will put in my entire
Facebook address there, which I am going to
| | 03:29 | want to Open in a new window and say Insert.
| | 03:32 | And I will repeat that
process with the Twitter link.
| | 03:35 | So, here in social media, I am going
to highlight my Twitter address, Ctrl+C
| | 03:40 | or Command+C to copy.
| | 03:42 | Then I'm going to click on my Link
icon here, Ctrl+V or Command+V to paste in
| | 03:47 | that URL, and we will set the Target
to Open in a new window and say Insert.
| | 03:53 | So now I have a Facebook icon that's
linked to Facebook, a Twitter icon that's
| | 03:56 | linked to Twitter, and now if I go
ahead and say Save and I refresh my website,
| | 04:05 | my Hours will show up over here on the
right side of the page which is exactly
| | 04:09 | where I wanted them to be.
| | 04:10 | So you can see that I have the
Hours listed here, I also have links to
| | 04:14 | Facebook and Twitter.
| | 04:15 | If I click on those links to Facebook
and Twitter, I see that I've got my SAMOCA
| | 04:19 | Facebook page and here's my
SAMOCA Twitter feed. So that's great!
| | 04:24 | Those two links work.
| | 04:25 | So we can go ahead and close those tabs.
| | 04:27 | That's the way you
configure a Custom HTML Module.
| | 04:31 | This one was fairly complicated and then I
had some text, some images and some links.
| | 04:35 | You could make your Custom HTML
module as simple or as complex as you like,
| | 04:40 | just remember to put it in the correct
module position for the website and all
| | 04:45 | will be well.
| | Collapse this transcript |
| Assigning a module to the site| 00:00 | In our last video we created a Custom
HTML module and that's the Hours item that
| | 00:05 | you see over there on the right side
of the page with the social media links.
| | 00:09 | We now have this particular module
displaying on every page of the website, the
| | 00:13 | Hours and the social media links.
| | 00:15 | It's possible that you would only want
that on selected pages, may be you really
| | 00:19 | only want it on the Home page or maybe
you want it on the Home and the About
| | 00:22 | page but maybe none of the other pages
on the website, it all depends on the
| | 00:27 | content of the module and
where you would like it to appear.
| | 00:31 | Fortunately, Joomla!
| | 00:32 | offers you some ways that you can
customize your modules so they don't
| | 00:35 | necessarily all appear on all
of the pages of the website.
| | 00:38 | I am going to go ahead and take
a look at a way of doing that.
| | 00:42 | If we hop back to the back-end of Joomla!
| | 00:44 | and we go to Extensions>Module Manager,
you'll see that we have our Hours listed
| | 00:50 | right here inside of the Module
Manager, go ahead and click on that.
| | 00:54 | And if you scroll on down the screen a
bit, underneath the Editor, you will see
| | 00:58 | that we have a Menu Assignment item here.
| | 01:00 | We can decide where the
module is going to display.
| | 01:04 | By default, it displays on all pages of
the site but there are some other options.
| | 01:07 | We can have it display on No pages on
the site, we can only have it display on
| | 01:13 | selected pages, in other words, check
off exactly which pages we want or, we can
| | 01:17 | have it display On all pages except
the selected, which is new in Joomla!
| | 01:23 | 1.6, 1.7 and 2.5, and it's great
because I could say, display this module on
| | 01:28 | every page except for the homepage.
| | 01:31 | And that was a wonderful thing.
| | 01:32 | As you added new pages to the site,
it will display the module and you
| | 01:36 | don't have to remember to turn it on, which
is a big step forward in terms of usability.
| | 01:41 | So I'd like to display this
on Only the selected pages.
| | 01:44 | So I'm going to go ahead and select that option.
| | 01:47 | I don't want it to display on the Privacy
Policy page, which is under the Footer Menu.
| | 01:51 | Under the Main Menu, I don't want it
to display on any of the Collections
| | 01:56 | pages or the News & Events pages, I just like it
to display on the About page and the Home page.
| | 02:04 | So I am going to go ahead and Save & Close.
| | 02:08 | And when I go back to the front-end of
the website and Refresh, my Hours are
| | 02:11 | here and present on the Home page of
the website, but if I go to say the News &
| | 02:15 | Events page, I don't have the Hours present.
| | 02:18 | So that's working exactly the way I want,
and that is how you assign modules to
| | 02:22 | specific pages of the website.
| | Collapse this transcript |
| Creating a breadcrumb module| 00:00 | You might have heard of something
called the breadcrumb before inside of
| | 00:03 | websites, and a breadcrumb is a
contextual piece of navigation that shows you
| | 00:09 | essentially how deep into the
website you've gone. Joomla!
| | 00:12 | comes with breadcrumbs preconfigured for
you, and you can see them right here on
| | 00:16 | the Home page, where it
says, You are here: Home.
| | 00:18 | If I go to the About page of the website,
you'll see that now I am at Home and then About.
| | 00:24 | And if I go say to the
Volunteer page, it will tell me I am at
| | 00:27 | Home>About>Volunteer With Us.
| | 00:29 | So this is what a breadcrumb is, and
it's useful for many people who want to
| | 00:34 | jump back up a level and
aren't quite sure how to get there.
| | 00:37 | It just adds another type of
navigation to your website, so that people have
| | 00:41 | another way of getting back to
a higher level of information.
| | 00:44 | So, what I would like to do now is,
show you how the breadcrumb is configured,
| | 00:48 | even though it's already present here
on the website, we can take a look at
| | 00:51 | some of the settings.
| | 00:52 | So I am going to jump
into the back-end of Joomla!
| | 00:54 | and I am going to go to Extensions>
Module Manager, and inside of the Module
| | 00:59 | Manager, under Breadcrumbs, you'll see that
we have some options that we can configure.
| | 01:05 | Pretty much anytime you take a
look at a module inside of Joomla!
| | 01:08 | the left side of the screen is always
the same, that will always offer the same
| | 01:11 | options here, showing a Title, assigning
a Position, whether that's published or
| | 01:16 | now, what type of access level it's
assigned, Start and Finish Publishing dates
| | 01:20 | and the Language associated with it.
| | 01:22 | And then you can assign it to
specific pages on the website.
| | 01:25 | The right side of the screen typically
contains information that changes between modules.
| | 01:30 | So the first thing that we have is we
can show the words, You are here in the
| | 01:34 | text pathway or not.
| | 01:35 | We could say No, and if we say no and
I am going to hit the Save button and
| | 01:40 | Refresh the front-end into the website,
then you will just see Home, About,
| | 01:44 | and Volunteer With Us.
| | 01:45 | I kind of like the You are here,
so I am going to turn that on.
| | 01:48 | The next question is whether you want to
show the word Home inside of the breadcrumb.
| | 01:52 | And if I set that to No, and
say Save, you refresh the page.
| | 01:58 | It will now say that, You are here,
About>Volunteer With Us, but I don't
| | 02:02 | have the link back to the Homepage and when
I go to the Homepage, it says You are here.
| | 02:06 | So I am inclined to leave the Home
link on, because sometimes that's where
| | 02:11 | people find that home link that they
click on to go back to the Homepage.
| | 02:14 | So I am going to turn that back on as well.
| | 02:16 | Show Last indicates whether it should
show the last item in the breadcrumb,
| | 02:20 | so again, if I go to About, Volunteer
With Us, whether this Volunteer With Us
| | 02:25 | should show or not.
| | 02:27 | If I disable that, let's hit Save,
Refresh this page, it just says, You are here:
| | 02:33 | Home>About.
| | 02:34 | It doesn't tell me that I
am on the Volunteer page.
| | 02:36 | I think it's helpful to show that.
| | 02:37 | So I am going to leave that on as well.
| | 02:39 | The last part is what separates the
breadcrumbs individually, and by default
| | 02:45 | it's this tiny little black triangle.
| | 02:48 | You could also type in a separator on your own.
| | 02:50 | I am going to put in a
space followed by the pipe.
| | 02:54 | The pipe is a vertical line, it's
located usually just above your Enter key or
| | 02:59 | the Return key on your keyboard, and
you'll have to hit Shift to get it.
| | 03:03 | And if I say Save here and then Refresh my
page, my right arrow here will turn into a line.
| | 03:10 | I kind of like the gray arrow too so,
I haven't really changed any of the
| | 03:14 | configuration here in Joomla! at all.
| | 03:17 | I like all of the options that are
turned on by default, I think they work well,
| | 03:21 | but there are things you can
customize inside of your breadcrumbs.
| | 03:25 | I recommend that you put breadcrumbs on
websites that have more than 50 pages,
| | 03:30 | they are very, very
helpful in include breadcrumbs.
| | 03:32 | Under about 50 pages, they
aren't strictly necessary.
| | 03:36 | So this local website is a little bit
small to be using breadcrumbs, but it's
| | 03:39 | such a good piece of functionality.
| | 03:41 | I am going to leave it on the site so
that you have the opportunity to learn
| | 03:44 | what breadcrumbs are and what they are good for.
| | Collapse this transcript |
| Creating a random image module| 00:00 | One of the nice features in Joomla!
| | 00:02 | is a Random Image Module.
| | 00:04 | And what the random image module does
is from a folder of images located inside
| | 00:09 | of your Media Manager it randomly
picks one and displays it on the webpage.
| | 00:13 | It's not a rotating slideshow.
| | 00:16 | You see a lot of those fade-in, fade-
out beautiful slideshows on websites these
| | 00:21 | days, the Random Image
module is not one of those.
| | 00:25 | Those kinds of slideshows are
definitely possible in Joomla!
| | 00:27 | There are several of them that are
available as third-party extensions which you
| | 00:31 | can download and install into your Joomla!
| | 00:33 | site and make a beautiful slideshow out of them.
| | 00:36 | But the random image module is a bit
lower tech and a bit lower bandwidth.
| | 00:40 | Basically, you create this folder
full of images in your Media Manager and
| | 00:43 | then configure a module to pull one of those
images at random and display on your website.
| | 00:48 | So I am going to go ahead
and configure one of those now.
| | 00:50 | I am going to hop into the back-end
of Joomla!, and I am going to start by
| | 00:54 | uploading all of my
pictures to the Media Manager.
| | 00:56 | I can get to the Media Manager right
here from the Control Panel on the icon.
| | 01:01 | And I am going to start by making a
new folder to hold all of those images
| | 01:05 | which I will call random.
| | 01:09 | So there's my random folder and when I
go into the random folder, down here on
| | 01:13 | the bottom I can Browse for my random images.
| | 01:17 | And I'm going to go to folder 08_05
and you'll see I have five random images
| | 01:23 | here on the website.
| | 01:24 | I am going to go ahead and say Open,
so that they stack up here inside of the
| | 01:28 | Media Manager and I am
going to say, Start Upload.
| | 01:32 | And boom, boom, boom all my images are
going to upload here into my random image
| | 01:35 | folder, which is great.
| | 01:37 | Now I am going to go to my Module
Manager, Extensions>Module Manager, and I am
| | 01:42 | going to create a New module,
this will be the Random Image Module.
| | 01:47 | Over on the left side of the
screen as always I am going to give it a
| | 01:50 | Title Random Image.
| | 01:53 | But I am going to Hide it.
| | 01:54 | I don't really want the words Random
Image to show above the random image.
| | 01:58 | I'm then going to assign a position for
this random image and I think I am going
| | 02:01 | to put it over on the right side of the screen.
| | 02:04 | So, I'm going to Select position-6 again,
and then over on the right side of the
| | 02:11 | screen all of the images that are
in that folder are indeed JPEGs.
| | 02:13 | There can only be one image type, there
can either be all JPEGs or all GIFs or
| | 02:18 | all PNGs, but they all have to be the
same type so, make sure that that is true.
| | 02:22 | And for the best most professional look,
you should also make sure that all of
| | 02:26 | your images are the same dimension,
which is something that you would do before
| | 02:29 | you upload them to the Media Manager.
| | 02:31 | You can run them through Photoshop or
Fireworks or even the software that came
| | 02:35 | with your digital imaging camera to
resize those pictures and get them to the
| | 02:38 | right dimensions for your website.
| | 02:40 | Then for the Image Folder, we are going
to tell it to go to images/random and we
| | 02:45 | have the option of specifying a link.
| | 02:47 | The link would be exactly
the same link for every image.
| | 02:50 | So we will have five images but one
link and I tend to find that not terribly
| | 02:54 | useful so I tend not to use
the Random Image Module for that.
| | 02:57 | But it is possible.
| | 02:59 | If you need a bunch of random images
that linked to a different link, so each
| | 03:03 | image is associated with one link and
it needs to load both the image and the
| | 03:07 | link every time, the banner
component is a great way of doing that.
| | 03:11 | You configure your banners in the
banner component and then the Banner Module
| | 03:14 | will display the banners on the website.
| | 03:16 | You can enter dimensions for your
pictures in Heights and Widths, so you
| | 03:19 | can leave that out.
| | 03:20 | I am going to go ahead and hit Save &
Close, and I am going to go back to the
| | 03:24 | front-end to the website, I am going
to hit Refresh, see how this looks.
| | 03:28 | So here on the Homepage, I feel like
that random image really ought to be
| | 03:32 | beneath the Hours and it feels like
it's kind of competing with the text that's
| | 03:36 | over here on the center of the screen.
| | 03:39 | If I go to the About page, it's okay there.
| | 03:42 | I think I like it best here
on the News & Events page.
| | 03:45 | Maybe I wouldn't put it on the
Collections page, it's sort of competing with
| | 03:48 | the collections there.
| | 03:49 | So maybe, I really just want my random
image to be on the News & Events pages.
| | 03:54 | So let's go back into Joomla!
| | 03:56 | and go back to our Random Image, and I am
going to assign this to specific pages then again.
| | 04:02 | So I am going to set this to show the
module Only on the pages selected and I'm
| | 04:07 | going to turn it off on every page
except for News & Events, News and Events.
| | 04:14 | And I will probably leave it on the
Privacy Policy page too, because that's kind
| | 04:17 | of a low contrast sort of
page, lots and lots of text.
| | 04:21 | Go ahead and hit Save & Close.
| | 04:23 | When I Refresh the website, we see
the image over here on the News & Events
| | 04:28 | page, every time I hit Refresh, it
should be pulling in some different images,
| | 04:34 | sometimes it pulls in the same image
several times in a row, but in general it
| | 04:37 | will pull in a new image.
| | 04:39 | And if I go to the Privacy Policy
page, I will see that image as well.
| | 04:43 | But if I am over on the About page,
I don't see it. So that's great!
| | 04:46 | That's exactly what we wanted to
have happen here on the website.
| | Collapse this transcript |
| Creating a newsflash module on the homepage| 00:00 | The next thing I'd like to add to
this website is a Newsflash component.
| | 00:04 | It will show me the latest news
over on the side of the webpage here.
| | 00:09 | And I think where I'd like to put it
is just on the Homepage, and I'd like to
| | 00:13 | put it above this Login Form.
| | 00:15 | So I like to have that Newsflash to
appear there, it will pull one article
| | 00:20 | perhaps from the News & Events areas
and display it right there on the left
| | 00:25 | column of my webpage.
| | 00:26 | So in order to get that done, I am going
to flip over here to the back-end and I
| | 00:31 | am going to create a new module.
| | 00:33 | I am going to go to Extensions>Module
Manager and I am going to click my New
| | 00:37 | button to make a new module, and
this one will be Articles-Newsflash.
| | 00:42 | And when you roll your mouse over
it will give you a little tool tip.
| | 00:44 | This says, The Newsflash Module will
display a fixed number of articles from
| | 00:48 | a specific category.
| | 00:49 | So I am going to go ahead and click on
that, and the left side of the screen is
| | 00:54 | always the same in its
configuration, the Title will be Latest News.
| | 01:00 | I will Show the title.
| | 01:01 | As for its Position, let's go ahead
and put it in the position of position-07
| | 01:07 | which is the left top.
| | 01:10 | Over on the right side of the
screen, we will configure the Category.
| | 01:13 | First of all, click on News & Events
and then hold down my Ctrl or Command key,
| | 01:19 | which will allow me to pick
some other categories as well.
| | 01:22 | So I am going to select these three,
News & Events, News and Events.
| | 01:26 | I can choose whether to Show Images
that appear in those articles or not, I am
| | 01:29 | going to say No because those
articles don't all have images in them.
| | 01:33 | Whether I want to Show the Article Title
or not, I definitely want to show that.
| | 01:37 | Let's go ahead and Linked the Titles as well.
| | 01:39 | The Header Level on the
title can be specified here.
| | 01:41 | These are specified as h4 which is fine.
| | 01:44 | And we can show, Read more link or not.
| | 01:46 | I am going to go ahead and Show it.
| | 01:48 | And I would really just
like one article on the page.
| | 01:51 | And then finally, what order are
those articles going to be pulled?
| | 01:55 | They can be pulled by Publish Dates, so in
other words, the most recent one will show up.
| | 01:59 | By Created Date, so the most
recent created date will be showed up.
| | 02:03 | Ordering, so they can show up in some
order, or a Random selection and I'd like
| | 02:07 | the Random selection.
| | 02:08 | So I am going to go ahead and pick
that, and I am going to say, Save.
| | 02:13 | And down at the bottom of the screen
right now this is assigned to all pages of
| | 02:17 | the website, I only want this on the Homepage.
| | 02:19 | So I am going to say Only on the pages
selected, deselect the Privacy Policy and
| | 02:26 | in fact, hit my Toggle Selection button
here at the top to deselect everything,
| | 02:30 | reselect the Homepage and hit
the Save button one more time.
| | 02:36 | Now when I Refresh the Homepage, there we go.
| | 02:39 | There's my Latest News showing up
right here on the top of the page.
| | 02:43 | Underneath of that is that Login Form.
| | 02:46 | If I hit Refresh again, we wind
up getting a different article.
| | 02:50 | So this would be an excuse for putting
in Read Mores and all of these articles.
| | 02:54 | I see the Family Programs article which
is an events article and doesn't have a
| | 02:58 | Read More, looks a little bit
longer here on the Homepage.
| | 03:02 | Every time I hit Refresh though, a
different article seems to be loading which
| | 03:05 | is exactly the behavior that I wanted.
| | 03:07 | Now I want to mention
something about ordering here.
| | 03:10 | Now that I have two modules here
displaying on the side of the page, inside
| | 03:14 | of the Module Manager, let's go ahead and
hit Save & Close to get out of the Newsflash.
| | 03:19 | You'll notice that we've
currently sorted by position.
| | 03:22 | If you have not, click on the words
Position to make sure that you have your
| | 03:26 | gray triangle right next to it, and
you'll see that right now we have a Left
| | 03:30 | Menu, our Latest News in the Login
Form are all sorted right here down at the
| | 03:34 | bottom of the screen.
| | 03:35 | If I wanted to have these in a
different order, let's say I wanted to have the
| | 03:40 | Login Form above the Latest News, I
need to change the ordering of these.
| | 03:43 | So to do that, we can click on the
Ordering column and that will give us our
| | 03:48 | Netflix arrows so that we can nudge
things up and down to change the order.
| | 03:51 | So for example, I can live the
Login Form up by clicking the arrow, and
| | 03:57 | sometimes they don't work.
| | 03:58 | They are little bit buggy.
| | 03:59 | And if that's the case, then we can always do
the plan B, which is to type in some numbers.
| | 04:04 | So let's say we like the Login Form to be
number 2 and Latest News to be number 3.
| | 04:10 | Go ahead and click the Floppy Disk icon
on the top and now we have the order of
| | 04:15 | a Login Form followed by the Latest News.
| | 04:18 | When I Refresh the Homepage, the Login Form
shows up on top with the Latest News underneath.
| | 04:23 | I would actually like the Latest
News on top, so I am going to go back
| | 04:26 | and change that around.
| | 04:27 | See if my Netflix arrows are working now.
| | 04:30 | So if I click on the arrow, then I'll have
the Latest News followed by the Login Form.
| | 04:34 | And when I Refresh the Homepage of the
website my Latest News is indeed on the
| | 04:38 | top of the left column.
| | 04:41 | More than one module can be assigned
to a given module position, you can also
| | 04:45 | change your ordering within
that position on the page.
| | 04:48 | You don't have to have one position
with one module, you can have multiple
| | 04:52 | modules within a given position.
| | Collapse this transcript |
| Adding a Twitter feed| 00:00 | The next thing I'd like to add
to the website is a Twitter feed.
| | 00:03 | And we've already put on a link to the
Twitter website for SAMOCA, but I'd like
| | 00:08 | to put on an actual feed for what
latest tweets are on the website.
| | 00:11 | So to do that, I need to go to
the Twitter page for SAMOCA which is
| | 00:17 | twitter.com/art_SAMOCA, and you should
get a page that looks very much like this.
| | 00:23 | And twitter will actually put out a
reasonable looking widget that you can
| | 00:28 | plug into your website that will show
your Twitter feed and you can do this by
| | 00:33 | a custom HTML module.
| | 00:35 | So the technique I am going to show
you here works great for Facebook buttons
| | 00:38 | and feeds and all kinds of feeds
from various social media sites.
| | 00:42 | You follow a very similar
pattern in setting them up.
| | 00:44 | So I am going to scroll all the way
down to the bottom of the page here on the
| | 00:48 | Twitter site and I am going to go
to the Resources link here and under
| | 00:53 | Resources, I am going to go
to Widgets>See all widgets.
| | 00:58 | So this is what we want to do;
| | 00:59 | we want to display Twitter updates on
the website for My Website, and we want
| | 01:04 | to show our profile.
| | 01:05 | So we are going to choose the Profile widget.
| | 01:08 | First of all, it's going to ask us
for our username, which is art_SAMOCA.
| | 01:14 | Under Preferences, I am just going to
leave everything here set to the default.
| | 01:18 | For the Appearance, it's
going to ask me for some colors.
| | 01:21 | So for the shell background, which
is this sort of dark gray going around
| | 01:25 | everything, I am going to change this to
1892bf which is the SAMOCA blue and the
| | 01:34 | text is fine just as it is.
| | 01:37 | The tweet background here, this is
the black that you see here, I don't
| | 01:40 | particularly care for that either.
| | 01:41 | I am going to change that
to white which is ffffff.
| | 01:43 | But as soon as I do that, I lose a lot of the
text on the page, so we need to change that.
| | 01:49 | So we'll change the tweet text back to black.
| | 01:53 | So now that's actually readable, but
the green doesn't do a lot for me so I am
| | 01:56 | going to change that as well and the
code I am going to use for that is 4418bf.
| | 02:02 | And that will give me a nice
purple color for the links.
| | 02:05 | So that's looking pretty good.
| | 02:07 | I am going to switch back here to my
Settings to make sure that it does have the
| | 02:11 | right username, does have the
right widget colors and so forth.
| | 02:16 | And it will ask me for some dimensions.
| | 02:17 | I am going to narrow
these dimensions a little bit.
| | 02:19 | We'll make it 200 by, let's say, 250 or I can
check off this box here that says auto width.
| | 02:28 | Then down on the bottom, I can say Test
settings and this is going to give me a
| | 02:33 | little preview of what my SAMOCA
Twitter widget is going to look like which
| | 02:36 | looks great and so now I am
going to click Finish & Grab Code.
| | 02:40 | And this is going to give me a
nice long block of JavaScript.
| | 02:44 | So I'm just going to go ahead and copy
all of that, highlight it all, Ctrl+C
| | 02:48 | or Command+C to copy.
| | 02:51 | Now I am going to hop in
to the backend of Joomla!
| | 02:54 | And I am going to make a new custom HTML module.
| | 02:57 | So I am going to go to Extensions>
Module Manager and I am going to make a new
| | 03:02 | module by clicking the New button
and picking Custom HTML from the list.
| | 03:08 | I'll give this a title of Twitter Feed
and then I am going to hide that title.
| | 03:14 | I'd like this to show up in position
number 6 and I am going to need to reset
| | 03:19 | this to beez_2.0, position-6 and then
down here inside of my JCE here, I am
| | 03:29 | going to toggle the editor and I
am going to paste in my JavaScript.
| | 03:33 | And then I am going to hit the Save button
on the top here and I am going to take a peek.
| | 03:38 | Sure enough you see here, this is
something I was talking about earlier.
| | 03:42 | My JavaScript has been stripped out here.
| | 03:43 | So you see that I've now lost the
script text starts with new twitter.widget.
| | 03:51 | Just highlight what was there and I am
going to paste in what was originally put in.
| | 03:54 | You see the script tags here were stripped out.
| | 03:57 | And they were probably
stripped out by either Joomla!
| | 04:00 | or they are stripped out by JCE.
| | 04:02 | So let's take a look in both
places and go, correct that.
| | 04:06 | So I am going to go ahead and just hit
Save & Close for the moment, I am going
| | 04:10 | to keep my module, but I need to
adjust my text filtering properties.
| | 04:14 | So I am going to start by going to Site>
Global Configuration, and I am going to
| | 04:19 | go to Text Filters and then down here,
we have our Super Users, remember, have
| | 04:23 | the Custom Black List.
| | 04:25 | So, we have applet, body, bgsound.
| | 04:27 | I am just going to scroll on over
here till I get to S for script.
| | 04:32 | There's the script tag and I am going to
go ahead and eliminate that from one of
| | 04:36 | our blacklisted tags.
| | 04:37 | So now I'll be able to put in the
script tag and I'll say Save & Close and then
| | 04:42 | the next place I want to look is under JCE.
| | 04:45 | So I am going to go Components>JCE
Administration>Control Panel and I am going
| | 04:50 | to go into my Editor Profiles,
specifically into the Default profile.
| | 04:56 | And then under the Editor Parameters>
Options, there is an item here about
| | 05:02 | allowing JavaScript,
make sure that's set to Yes.
| | 05:06 | Go ahead and say Save & Close and now
what I am going to do is go back to my
| | 05:11 | Module Manager, Extensions>Module
Manager, and I am going to go into my Twitter
| | 05:15 | Feed and here inside of JCE, I'm going
to Ctrl+A or Command+A to select all my
| | 05:22 | text and get rid of it and then
Ctrl+V or Command+V to paste in that script
| | 05:26 | again, and we'll go ahead and
hit the Save button on the top.
| | 05:31 | Scroll back on down and make sure that
all of your scripts are still in place
| | 05:35 | which it looks like they are.
| | 05:36 | So we can go ahead and refresh the
front end of the website and when we do
| | 05:42 | that, we get our Twitter Feed right here on
the home page of the website which is great.
| | 05:45 | That's exactly where I want it.
| | 05:47 | But I only want the
Twitter Feed on the home page.
| | 05:49 | So I am now in the backend of Joomla!,
going to scroll all the way down to the
| | 05:54 | Menu Assignment, and I am going to
change this to Only on the pages selected.
| | 05:59 | I'm going to clear the selection that's
there and just check off the home page.
| | 06:04 | Check the Footer Menu that's
also unchecked. Okay, great!
| | 06:08 | So go ahead and hit Save & Close,
refresh the homepage to make sure nothing
| | 06:12 | changed with the Twitter widget, looks good.
| | 06:15 | So you can use the same kind of
procedure for including other kinds of feeds
| | 06:19 | on your website, whether that's a Facebook
feed or various buttons or this Twitter feed.
| | 06:24 | It's all very straightforward to do.
| | 06:26 | Make sure that there's no text
filtering going on of the tags that are required
| | 06:30 | to display the widget on your website.
| | 06:32 | And make sure that you'd check in both
places both in Joomla!'s text filtering
| | 06:36 | as well as JCE's or whatever
editor you happen to be using.
| | 06:40 | And then you should be able to plug
that widget right into your webpage without
| | 06:43 | any issues or difficulty.
| | Collapse this transcript |
| Including a module in an article using loadposition| 00:00 | It is possible to include a module
inside of an article and it occasionally even
| | 00:05 | makes sense to do this.
| | 00:07 | I would like to add a Directions page
to this website and I would like those
| | 00:11 | directions to have a
Google Map included in them.
| | 00:14 | But what I'd like to have happen is I
would like to be able to put in the text
| | 00:18 | for the directions, and then
I'd like the Google Map to load.
| | 00:21 | But I'd like to do this in such a way
that I don't have to put the iframe code
| | 00:25 | that the Google Map will require into
my individual article, which will mean
| | 00:29 | that when my client wants to edit the
text around the directions, they're going
| | 00:33 | to have to have permission for
working with iframes. Otherwise Joomla!
| | 00:37 | will strip the iframe code
right out of the article.
| | 00:41 | So one possible way to approach this
would be to create an article for the
| | 00:44 | Directions page that will just have the
text in it, and inside of that article
| | 00:48 | we can call a module.
| | 00:50 | The module then would contain the code
for the Google Map and the client may be
| | 00:55 | locked out of the module altogether
via ACL so the client would never even be
| | 01:00 | able to get to the module to configure it.
| | 01:03 | And as long as they left the little
code in there to call the module then they
| | 01:07 | would not be able to change the map or
the functionality and they wouldn't be
| | 01:12 | able to put iframes into their pages.
| | 01:14 | All of this I think is a really wonderful thing.
| | 01:17 | So I'd like to go ahead and give this a try.
| | 01:19 | I am going to create a
Directions page inside of Joomla!
| | 01:22 | So I am going to go to my
Article Manager and make a new article.
| | 01:25 | So under Content>Article Manager>Add New
Article we are going to make an article
| | 01:30 | called Directions and we're going to
assign this a Category of Contact Us.
| | 01:38 | In your Exercise Files you have the text
here that will be copied and pasted in.
| | 01:43 | So I am going to go ahead and copy my
text for the Directions and paste them
| | 01:46 | right on into the webpage.
| | 01:49 | So it looks like this needs just a
smidge bit of formatting and Please use the
| | 01:55 | map below for directions
to the museum. All right!
| | 01:57 | So now what I am going to do is put in
the code that will call this module and
| | 02:02 | that code looks like this.
| | 02:04 | It's a Curly Bracket followed by
the word loadposition, followed by a
| | 02:09 | position name and that position name
should not exist elsewhere in the template.
| | 02:13 | I tend to be of the school that I call
my module positions by what they are, and
| | 02:17 | a map is going here, I'm
calling this the map position.
| | 02:21 | And that's all it takes, {loadposition map}.
| | 02:26 | So we've just created a module
position within this article and if there is a
| | 02:32 | module that is assigned to the
specific page or to all pages of the site with
| | 02:36 | the position of map, it will
show up in the spot in the article.
| | 02:40 | Now how did I know that it's Curly Brackets
and loadposition, how did I know that?
| | 02:44 | I will show you.
| | 02:46 | Go ahead and hit Save &
Close to close out of the screen.
| | 02:49 | I am going to go to my Plug-in
Manager, under Extensions>Plug-in Manager.
| | 02:54 | And if you take a look for the module
called Content-Load Modules, this is a
| | 02:59 | plug-in that comes with Joomla!
| | 03:01 | and is Enabled by default and it will
tell you exactly what it does, which is
| | 03:06 | within a content like an
article it loads a module position.
| | 03:09 | Here is the syntax to use,
{loadposition user1} or Modules by name,
| | 03:15 | Syntax:{loadmodule mod_login}.
| | 03:18 | In other words, load the
login module in that position.
| | 03:22 | So we are going to specifically call
just the module position which is a
| | 03:25 | little bit simpler.
| | 03:26 | You can adjust the Style over here.
| | 03:29 | By default it's wrapped by Divs, but
you could wrap it by Tables if you wish or
| | 03:33 | not have any divs around it at all.
| | 03:35 | The default is perfectly good.
| | 03:37 | So I am just going to hit the Close button here.
| | 03:39 | So this plug-in is what's driving
loading the module into our article.
| | 03:42 | Now I am going to go into Extensions>
Module Manager and I am going to create a
| | 03:47 | new custom HTML module and I am going
to do that just as I have done before by
| | 03:52 | clicking the New button and choosing
Custom HTML from the list and I am going to
| | 03:57 | give this a Title of Google Map
and I am going to Hide that title.
| | 04:01 | I don't really want it to show.
| | 04:03 | When it asked me for a Position, I
am just going to type in the word map.
| | 04:06 | The reason I am typing map here is
because in my {loadposition} code inside of
| | 04:11 | my article, it called a position called map.
| | 04:13 | We have to make sure that that position
of map is the same on both sides, within
| | 04:17 | the article and within the
module in order for it to show up.
| | 04:20 | Now down here under Custom output you
might be wondering where my JCE Editor went.
| | 04:25 | It's this Toggle Editor button.
| | 04:27 | I had been working in Code View before and
JCE remembers if you're in Code view or not.
| | 04:32 | So anytime if you go into JCE and you
suddenly see a blank screen like this,
| | 04:36 | just click the Toggle Editor button
and it'll bring your buttons back.
| | 04:39 | We actually really want the blank screen.
| | 04:41 | And over here in another tab I've
already put up a map here that is exactly what
| | 04:46 | I want for Main Street in Ventura, California.
| | 04:49 | And I am going to hit my Link button
right here and it will either give me a URL;
| | 04:55 | in other words, I can link to this page
on Google Maps, or I can embed the map
| | 05:00 | itself into my website.
| | 05:02 | And there are options here to
Customize and preview that map if you wish.
| | 05:06 | I'm just going to go ahead and take the default.
| | 05:08 | So I'm going to go ahead and highlight
the code here for Paste HTML to embed in
| | 05:12 | the website and I am going to Ctrl+
C or Command+C to copy that code.
| | 05:16 | Then over here inside of Joomla!
| | 05:18 | I'm going to Ctrl+V or Command+V in
order to paste in that iframe code.
| | 05:23 | Then I am going to go
ahead and say Save & Close.
| | 05:27 | So now I've created my article and I've
created the module that will be embedded
| | 05:31 | within it, now I need to hook this up
to a menu so that I can see the article.
| | 05:36 | So to do that, I am going to go to Menus>
Main Menu>Add a New Menu Item, and I am
| | 05:41 | going to link to a Single Article and
the name of this item will be Directions
| | 05:48 | and I'll select the article from
over here on the side, Directions.
| | 05:52 | And that's all I need to do.
| | 05:53 | Just say Save & Close.
| | 05:55 | Now when I go back to the front end
of the website and I refresh, I have a
| | 06:00 | Directions item show up
here in the main navigation.
| | 06:03 | If I click the Directions link, you'll see that.
| | 06:06 | As expected, I've got directions that
show up here on the page, there's my text
| | 06:11 | from the article, and
underneath is my map module.
| | 06:15 | Now if you're not happy with the way
this looks, you can definitely go back into
| | 06:18 | Google Maps and check out this
Customize and preview the embedded map.
| | 06:22 | There are all kinds of parameters
here that you can change and tweak.
| | 06:26 | If you want this to be down a
little bit further just like this.
| | 06:29 | For example, by moving this around,
that's the way we want it to look.
| | 06:36 | I believe it updates the iframe code
down here on the bottom, which you can then
| | 06:40 | copy and paste into your module again.
| | 06:43 | So there is some possibility here for
minor customization or you could get rid
| | 06:46 | of this bubble altogether
and to show the map that way.
| | 06:50 | Okay, so that is how you embed a map
into your website and you could do the same
| | 06:57 | trick with pretty much anything that's
coming out of any of these social media
| | 07:01 | sites or the mapping sites or anything else.
| | 07:04 | You can go ahead and take some of
those tags that are typically considered
| | 07:08 | blacklistable, the scripting tags for
JavaScript, the iframe tags, and put them
| | 07:14 | in a module as a super administrator.
| | 07:16 | And then that way your clients can
still go in and edit their articles but they
| | 07:19 | don't have to have the ability to
work with script tags or iframe tags.
| | 07:24 | So it's a pretty cute little trick
and it helps to boost the security of
| | 07:27 | the website.
| | Collapse this transcript |
|
|
9. Using ComponentsUsing the content component| 00:00 | Now that you know all about modules
which are one type of extension inside of
| | 00:05 | Joomla!, it's time to learn about
components, another type of extension.
| | 00:09 | You might be surprised to know that
you've already been working with components.
| | 00:13 | Content is a type of component and it
shows up in the main part of the web page.
| | 00:18 | There is only one component per page while
there may be many modules on the same page.
| | 00:25 | So, looking here at the home page of
this website, you can see that we have
| | 00:29 | many modules we've put into place
over the last few videos, we have a
| | 00:33 | navigation bar across the top, we have
our Latest News and our Login Form and
| | 00:38 | our breadcrumb on the left side, we
have Hours and our twitter feed on the
| | 00:42 | right side, and down here in the
bottom we have our Privacy Policy link which
| | 00:46 | is part of the Menu module.
| | 00:50 | Right in the middle of the page though
we have a series of articles going down
| | 00:53 | the middle, and that is the component
and in this case this happens to be a
| | 00:58 | component displaying featured
articles on this particular page.
| | 01:02 | One of the other major differences
between modules and components is that
| | 01:06 | components require configuration, and they are
linked to the Menu to display on the website.
| | 01:12 | Modules are assigned a position on
the page, whereas components have to go
| | 01:17 | through the Menu in some way or another.
| | 01:19 | Every component has different
configuration options and different ways to
| | 01:23 | connect to the menu so watch out
for that, I will be showing you a few
| | 01:26 | components in later videos.
| | 01:28 | Finally, a component may also
have a module associated with it.
| | 01:33 | A great example of this is a Search module.
| | 01:36 | There's a lot of configuration for
search that goes on in the component, but
| | 01:39 | where the actual search box displays
on the website is done through module.
| | 01:44 | Don't let that trip you up either.
| | 01:45 | So components and modules can in fact
work together to display information
| | 01:50 | on the website.
| | Collapse this transcript |
| Using the contact component| 00:00 | Contact forms on websites are just
about everywhere these days, and in age of
| | 00:05 | Gmail and mobile phones, having an
email address that you click on in order to
| | 00:10 | send somebody an email just doesn't
work very well anymore, and not everybody
| | 00:15 | uses an email client like Outlook or Eudora.
| | 00:18 | So it's nice to be able to offer
people a form, which will send an email no
| | 00:22 | matter what technology you're
using to access the Internet.
| | 00:25 | Fortunately, Joomla!
| | 00:26 | has contact forms built right into it.
| | 00:29 | To create a contact form in Joomla!
| | 00:30 | you're going to create a contact
category and then the actual contact, and then
| | 00:34 | you're going to link it to the menu.
| | 00:36 | So the CAM is in operation at a
different level, even though now we're working
| | 00:41 | with the contact component
instead of the content component.
| | 00:44 | So let's get started
creating this particular contact.
| | 00:47 | We're going to go to
Components>Contacts>Categories.
| | 00:52 | So the first thing we need to do is
create a category for our contacts, and I
| | 00:55 | am going to click on the New button to
create that category and I am going to
| | 00:59 | give it a title, which will be General
Contact Information, go ahead and say
| | 01:07 | Save & Close, that's all you need to
do is enter a title and now we can go
| | 01:11 | ahead and create our contact.
| | 01:13 | So to do that we can click on the
Contacts sub-navigation here, or we can go to
| | 01:18 | Components>Contacts>Contacts, both
take you to the same place, and from here
| | 01:24 | we're going to click on the New button
to create a new contact for the website.
| | 01:28 | We then need to fill in the
information, so we're going to put in a name,
| | 01:31 | SAMOCA will be the name.
| | 01:34 | The Category will be the
General Contact Information category.
| | 01:38 | And then over on the right side of
the screen we have some information
| | 01:41 | for Contact Details.
| | 01:42 | We can put in pictures and positions
and email addresses and so forth, but I'm
| | 01:47 | simply going to say
info@samoca.org is our email address.
| | 01:52 | Our street address is 123 Main St.,
and that's in Ventura, California, 93001.
| | 02:03 | We can put in a phone number and mobile number.
| | 02:07 | If you take a look at your
Exercise Files, it gives you some of that
| | 02:09 | information here, 805-555-5555, and
this little blurb of text here, we're going
| | 02:21 | to go ahead and highlight that, Control
or Command+C to copy it, and then here
| | 02:26 | in the box, the Editor Box here under
Other Information, Ctrl or Command+V to
| | 02:32 | paste this in place.
| | 02:33 | So we've outlined all of the
information here on the contact form.
| | 02:37 | You'll notice that there is a lot of things
that are asked for in the Contact Details.
| | 02:41 | You'll notice that I did not fill all
of them in, you certainly don't have to
| | 02:44 | fill any of them in if you don't want
to, none of them are required fields.
| | 02:48 | However, if you do not
enter an email address, Joomla!
| | 02:51 | will not generate a contact form for you.
| | 02:56 | You have to at least enter an
email address in order for Joomla!
| | 02:59 | to generate a contact form on
the front-end of the website.
| | 03:02 | So now that this is in place, we'll
go ahead and say Save & Close, so we've
| | 03:07 | created our contact.
| | 03:08 | And remember what I said, contact is
a component's display on the website
| | 03:15 | through a menu item.
| | 03:16 | So if I go to the front-end of the
website and Refresh right now, we won't see
| | 03:19 | our contact form, we didn't
assign it to a module position.
| | 03:23 | We have to link it to the menu.
| | 03:25 | So to do that, I am going to go to Menus
>Main Menu>Add New Menu Item, and I am
| | 03:29 | going to make a new kind of Menu Item, I
am going to click on the Select button,
| | 03:34 | and you'll notice we've been working
over here under Articles all this time, but
| | 03:38 | now we're going to work
over here under Contacts.
| | 03:40 | And what I want to do is just make a
link to a single contact, and the screen
| | 03:45 | will change appropriately.
| | 03:46 | So I am going to put in a menu title
of Contact Us, and I am going to select
| | 03:51 | the contact, which is the SAMOCA
contact right here, and I am going to go ahead
| | 03:55 | and hit Save & Close.
| | 03:58 | When I refresh the front-end of the
website, you'll see that we now have a
| | 04:03 | Contact Us link that shows up
here on the top of the page.
| | 04:06 | When I click that, you'll see that we have
our Contact Us page that's been generated.
| | 04:12 | We have all the information here for
the contact, we have a Contact Form here
| | 04:16 | inside of a Slider, and under Other
Information we have the additional
| | 04:20 | information that we pasted
into that particular page.
| | 04:23 | Now, I am not really thrilled with the
formatting of this particular page, I'd
| | 04:28 | like to change that a little bit, and
that is possible, we can change that right
| | 04:32 | within the Contact Form itself.
| | 04:33 | So I am going to go flip back
here to the backend of Joomla!
| | 04:37 | For some reason I'm looking at the
Footer Menu, I am going to switch back to
| | 04:40 | the Main Menu, and I am going to scroll on
down to my contact link and click on that.
| | 04:47 | Notice under Contact Display Options,
just like we went through the Article
| | 04:51 | Options earlier, this is where you can
change formatting for all the various
| | 04:55 | options for your contact, you can
choose to display certain pieces of
| | 04:59 | information or not, it's
better to do it globally.
| | 05:02 | Just like with the articles, the
contact component has a global configuration
| | 05:07 | area where you can configure these
items and then overwrite them in your menus.
| | 05:11 | But the notable item at the top of
Contact Display option is this Display format
| | 05:16 | item, and right now it's set to Use
Global, which actually happens to be sliders
| | 05:21 | within the contact form.
| | 05:22 | I don't particularly like that approach,
I think it hides the contact form and
| | 05:26 | people can get confused.
| | 05:28 | So I am going to switch this to Plain,
and I am going to go ahead and hit Save &
| | 05:32 | Close, and now when I refresh the
Contact Us page, we'll have all of the
| | 05:37 | information spelled out
here on the site appropriately.
| | 05:40 | So that to me is a much better
presentation of the contact form.
| | 05:44 | The last thing I'd like to do is I added
a Directions link up here in a previous
| | 05:48 | video, and I put it as top navigation,
because I didn't have the Contact Us
| | 05:54 | navigation item just yet.
| | 05:55 | So now Directions really ought to live
underneath of Contact Us, so I'd like to move that.
| | 06:01 | So inside of the backend of Joomla!
| | 06:03 | here I am going to go to my
Directions link and click on it, and now I'm
| | 06:07 | going to assign it a parent item of
Contact Us, and I am going to go ahead
| | 06:12 | and say Save & Close.
| | 06:14 | So now when I go to the Contact Us
page and Refresh, I'll also have a link
| | 06:18 | over here on the side to Directions,
which will give us the Directions page
| | 06:21 | that we had before.
| | 06:23 | So that's how you set up a
Contact Us form inside of Joomla!
| | 06:26 | One thing you'll notice about this
particular form is that it's wide open, I
| | 06:31 | can enter my name, my Email, Subject,
and Message, but one thing is missing
| | 06:35 | from this form, which you see quite
commonly these days, and that is a CAPTCHA
| | 06:40 | code, it's one of those codes that help keep
spammers out, and we don't have one of those.
| | 06:45 | So we need to sign up for one of those
and get that on into this website, which
| | 06:48 | we're going to do next.
| | Collapse this transcript |
| Configuring CAPTCHA for a form| 00:00 | One of the new features in Joomla!
| | 00:02 | 2.5 is the addition of a Captcha code
to user registration forms as well as
| | 00:09 | contact forms inside of Joomla!.
| | 00:11 | And boy, this just didn't come soon
enough, I'm so excited that this is a new
| | 00:15 | feature inside of Joomla!.
| | 00:17 | I have many Joomla!
| | 00:18 | sites myself and people frequently are
filling out my contact forms but not just
| | 00:23 | people, all the spammers love my
contact forms too and they love to put in all
| | 00:28 | kinds of stuff that just annoys me no
end and what I really like to do is screen
| | 00:32 | the spammers out so that
they can't send me anything.
| | 00:35 | Only the humans can send me real
messages and that is done through this
| | 00:39 | thing called the Captcha.
| | 00:40 | It's that funny little code that you
sometimes see those warped letters that you
| | 00:44 | have to sort of puzzles through.
| | 00:46 | You as a human can figure those out but
computers can't read them and so that is
| | 00:50 | our mechanism for keeping spammers out
of your various forms on your website.
| | 00:55 | This is now integrated
into Joomla's core and Joomla!
| | 00:56 | 2.5, so I'd like to enable
that for my contact form.
| | 01:01 | Captcha is a plug-in so let's
start by taking a look at that.
| | 01:05 | We're going to go to Extensions>
Plug-in Manager, and I'm going to go to
| | 01:10 | Captcha-ReCaptcha and you'll see here
that this is the plug-in that will put the
| | 01:16 | Captcha in on the website.
| | 01:17 | It's going to require some
information for us to configure.
| | 01:20 | Over here on the site, we can have a
Public Key and a Private Key as well as a
| | 01:24 | Theme, and so we need to go and get
this Public Key and this Private Key, over
| | 01:28 | in the Description it tells us where to go.
| | 01:30 | Right here google.com/recaptcha, so I'm
going to highlight those words and copy,
| | 01:36 | open up a new tab and paste.
| | 01:38 | And so this is the page to sign up for
reCAPTCHA, so I'm going to go ahead and
| | 01:42 | say, Use reCAPTCHA on my site and I'm
going to go ahead and Sign up Now!, and it
| | 01:48 | says you have to have a Google
Account or sign in with your existing Google
| | 01:51 | account in order to use it.
| | 01:53 | So I'm going to go ahead and sign in
with my Google account, and if you don't
| | 01:59 | have a Google account you will probably
need to create one and sign in, it's a
| | 02:02 | pretty quick process.
| | 02:03 | So it's going to ask me if I wanted a
domain which is samoca.org, and I'm going
| | 02:07 | to say, Enable that key on all domains,
and then go ahead and say Create Key.
| | 02:13 | And there is my Public and my Private Key, it
goes ahead and puts those on the screen for me.
| | 02:18 | So for the Public Key, I'm going to
highlight that long string of characters and
| | 02:23 | back here in my backend of Joomla!
| | 02:25 | paste it, my Public Key, and then over
here I have my Private Key, copy that
| | 02:30 | Private Key and then in the backend
of Joomla!, I paste that in the place,
| | 02:35 | and I'm taking out these extra funny spaces to
make sure that that doesn't mess anything up.
| | 02:40 | You have some choices here for your
Theme, Clean, White, Black & Glass, or Red;
| | 02:44 | I'm just going to leave mine on Clean.
| | 02:46 | Feel free to play around
with the themes if you wish.
| | 02:48 | Go ahead and click on Save & Close.
| | 02:51 | So now Captcha is
configured here within Joomla!.
| | 02:55 | The next thing I need to do is enable
Captcha within the Global Configuration.
| | 02:59 | So if I go to Site>Global Configuration,
under the Site tab here, there is the
| | 03:05 | way we can configure the default Captcha.
| | 03:07 | So right now none is selected,
we're going to pick Captcha - ReCaptcha.
| | 03:12 | You might be wondering why Joomla!
| | 03:14 | has left this unselected for you, it's
possible that you could integrate other
| | 03:18 | forms of Captcha into Joomla! as a plug-in.
| | 03:21 | If you're an engineer and you can
write such a plug-in, you could make that
| | 03:24 | happen and then you could pick a
different default Captcha here for Joomla!
| | 03:27 | But we're just going to use
what's already built-in to the core.
| | 03:31 | So go ahead and say Save & Close, and
now in theory, just by doing that having
| | 03:36 | configured the plug-in and enabled the
Captcha in the Global Configuration, it
| | 03:40 | should now show up on our Contact Form.
| | 03:42 | So if I go to the front-end of the
website, and I want my Contact Us page, just
| | 03:47 | clicking on the main navigation, I'm
going to hit Refresh, and you'll see here
| | 03:53 | that now in my Contact Form down here
in the bottom, I do in fact have that
| | 03:57 | Captcha in place right here
down on the bottom of the form.
| | 04:01 | And it's a required field, so that
means that somebody who wants to send me a
| | 04:05 | message must complete the Captcha
successfully in order to send me that message.
| | 04:10 | Helps keep the spammers down and
I'm very, very happy this feature is
| | 04:14 | now included in Joomla!
| | 04:15 | 2.5.
| | Collapse this transcript |
| Creating a contact list| 00:00 | Now that I have got my one generic
contact on the website, the next thing I'd
| | 00:03 | like to do is have several
additional contacts appear on the website.
| | 00:08 | I need to have a contact information
for the Executive Director, the head of HR
| | 00:13 | and a Volunteer Coordinator, all of
those need to be listed on the website in
| | 00:17 | addition to the generic contact.
| | 00:19 | And so this lends itself to a category list.
| | 00:22 | So what I am going to do now is I am
going to add those three additional
| | 00:26 | contacts to the website.
| | 00:28 | Then I am going to modify my menu item
so that my Contact page will now become a
| | 00:32 | contact list, and show
you how all of that works.
| | 00:36 | So we get started here.
| | 00:37 | We are going to go to Components>
Contacts>Contacts and I am going to go ahead
| | 00:43 | and make some more contacts.
| | 00:44 | Go ahead and click the New button
and the first person from your Exercise
| | 00:48 | Files is Shannon Gottschalk and
she'll be put in the General Contact
| | 00:54 | Information Category.
| | 00:55 | Under Contact Details her position
is Executive Director, and her Email
| | 01:01 | is shannon@samoca.org.
| | 01:04 | There is a picture available for her,
so let's go ahead and upload that.
| | 01:07 | I'll hit the Select button
to get into the Media Manager.
| | 01:10 | Then I am going to browse for my files
and I am going to select all three of
| | 01:14 | these, and say Open and Start Upload.
| | 01:19 | And all of our pictures are
now here in the Media Manager.
| | 01:23 | So Shannon is the one that I'd like to
show on this particular profile, I am
| | 01:26 | going to go ahead and say Insert.
| | 01:29 | And so here she is, all of her
information, and I am going to go ahead and say,
| | 01:34 | Save & New actually because
I have more people to enter.
| | 01:38 | My next contact is Kimberly McNeil.
| | 01:42 | Highlight and copy and paste this on in.
| | 01:46 | Under Contact Details we can go ahead
and select her image, kimberly_mcneil
| | 01:53 | Insert, and her position is HR
Director and there's her Email address.
| | 02:00 | So her position is HR
Director and her Email address.
| | 02:05 | I am going to hit Save & New one last time.
| | 02:07 | The third person that we
need to put in is Chad Anderson;
| | 02:12 | I am going to copy and paste that on in.
| | 02:14 | He is part of General Contact Information.
| | 02:17 | Under his Contact Details we will
select him from the list, chad_anderson,
| | 02:22 | Insert, and his position is
the Volunteer Coordinator.
| | 02:27 | Highlight, copy and paste that in,
and his Email is chad@samoca.org. Okay.
| | 02:36 | So I have gone ahead and hit Save &
Close, and it looks like I missed assigning
| | 02:41 | Kimberly McNeil a category, so I am
going to go back on in and assign her the
| | 02:46 | General Contact
Information Category, Save & Close.
| | 02:49 | One of the great things about these
managers, whether it's the Article Manager,
| | 02:53 | the Menu Manager or Contact Manager;
| | 02:55 | you always take a look at all the
information and make sure quick layouts
| | 02:58 | whether things were entered correctly.
| | 03:00 | Okay, so now that that's all in place, now I
need to hook these contacts up to the menu.
| | 03:06 | So to do that, I am going to go to Menus>
Main Menu and down here for the Contact
| | 03:11 | Us link I am going to change that,
and I am going to change the Type.
| | 03:15 | So instead of the Single Contact I am
going to hit the Select button and instead
| | 03:19 | change it to List Contacts in a Category.
| | 03:23 | And the Category I am going to
select is the General Contact
| | 03:26 | Information Category.
| | 03:27 | And I am going to go ahead and click
the Save button, refresh the front-end of
| | 03:31 | my website and click the
Contact Us link and see what we get.
| | 03:35 | So what we get is this chart going
across the page of names of people and their
| | 03:41 | positions as well as their contact information.
| | 03:44 | I don't think I really need the
Country column, and I probably don't really
| | 03:47 | need the State or the Suburb either, because
all of these people are from the same place.
| | 03:51 | And I probably need a better name for
SAMOCA for the general contact forum
| | 03:55 | than what I have here.
| | 03:57 | So let's make some changes to the
layout of this particular page, the General
| | 04:01 | Contact Information.
| | 04:03 | So under our List Layouts we have
the option here of making some changes.
| | 04:08 | So for example, I do not want to show
Country, we will Hide that, we'll Hide the
| | 04:13 | City or State, we will Hide the City or
Suburb, and I am going to go ahead and
| | 04:19 | hit the Save button one more time.
| | 04:22 | Refresh the front-end of this website
and that's pretty much the information
| | 04:26 | that I'd like to have there is, a
Name, a Position and a Phone Number.
| | 04:29 | So now I am going to go back to
Contacts and I am going to modify the SAMOCA
| | 04:34 | contact person here to say,
General Contact Information.
| | 04:39 | Let's just take a quick peek while I am
here at some of these other listings as well.
| | 04:42 | Let's take a look at Shannon
Gottschalk, so here she is.
| | 04:46 | We can see her picture right here on the page.
| | 04:48 | She has got her contact form with the Captcha.
| | 04:51 | And because we did not enter any
additional information about her, there's
| | 04:54 | nothing at the bottom of the screen.
| | 04:56 | So the layout is really good.
| | 04:58 | Okay, so I am going to go
back into back-end of Joomla!
| | 05:01 | I am going to click Save & Close to get
out of this screen, and I am going to go
| | 05:05 | to Components>Contacts>Contacts and then
I am going to click on the SAMOCA link.
| | 05:10 | And I am going to change the
name from SAMOCA to General Contact.
| | 05:15 | And since I have space in the
Position column, I can go ahead and put in a
| | 05:19 | position, Contact us with general requests.
| | 05:24 | Even though, that's not the position,
it will tell people what it's there for.
| | 05:29 | I am going to go ahead and hit Save & Close
and when I Refresh this page, there we go.
| | 05:35 | There is our General Contact listed
first, Contact us with general requests and
| | 05:39 | a Phone number, and then some additional
people underneath with their positions.
| | 05:43 | This is exactly what I was looking for
on this webpage, so I'm very happy with
| | 05:47 | the way that this is turned out.
| | Collapse this transcript |
| Using the web links component| 00:00 | The next thing I'd like to add to the
museum website is a series of links of
| | 00:04 | other museums and some things to do
around Ventura, so that people can plan
| | 00:09 | their whole day, coming out to visit
the museum, they can go and see some other
| | 00:13 | museums or do some other fun
things in Ventura while they are there.
| | 00:16 | It helps to drive traffic to the museum
to have a page like this, and I'm going
| | 00:21 | to use the Weblinks component
in order to create this page.
| | 00:24 | Weblinks of course is located on the
Components Menu, under Weblinks, and just
| | 00:29 | like everything else in Joomla!, there
are categories that must be created first
| | 00:33 | before you can create your content, in
this case, it's not Articles, they are
| | 00:36 | Links, and then you're going
to display this on the menu.
| | 00:39 | So I'm going to start by going
to Components>Weblinks>Categories.
| | 00:44 | As you might expect, we have one Category;
| | 00:46 | exactly, it's the Uncategorized Category.
| | 00:49 | I'm going to make two Categories.
| | 00:51 | In your Exercise Files you'll see that we
have a series of Links spelled out here.
| | 00:56 | We're going to have two categories;
| | 00:58 | one called Museums and one's called
Things to Do in Our Area, and we have
| | 01:02 | a little bit of descriptive text that's
going to go, associated with those categories.
| | 01:05 | So I'm going to start by clicking my
New button, and I'm going to make my
| | 01:11 | Museums Category, and then under the
Description down here I'm going to take my
| | 01:17 | little bit of text right here, highlight
it, Ctrl+C or Command+C to copy, Ctrl+V
| | 01:22 | or Command+V to paste, and
I'm going to click Save & New.
| | 01:29 | My second item here is Things to Do
in Our Area, highlight that, Ctrl+C or
| | 01:33 | Command+C to copy, Ctrl+V or Command+V
to paste, and then down here in the
| | 01:38 | Descriptive box, I'll highlight some
text, Ctrl+C or Command+C to copy, Ctrl+V
| | 01:43 | or Command+V to paste.
| | 01:44 | I'm doing a little formatting here
while I'm working on this. Okay.
| | 01:50 | So now we have two categories, which
is great, I'm going to go ahead and hit
| | 01:53 | Save & Close and now I'm ready to
actually create the links that will go
| | 01:57 | within those categories.
| | 01:58 | So to do that I'm going to click on
the Weblinks item here and I'm going to
| | 02:02 | click the New button, and I'm going
to put-in a title for my Weblinks.
| | 02:07 | So back up here we're going to go to
MassMOCA, the Massachusetts Museum of
| | 02:11 | Contemporary Art, that will be
the text that goes in the Title box.
| | 02:16 | The URL is right underneath.
| | 02:18 | I'm going to highlight that, Ctrl+C
and Ctrl+V, right on in, and the
| | 02:22 | Category will be Museums.
| | 02:24 | Then I'm going to click Save & New and
repeat this process for the Museum of
| | 02:30 | Contemporary Art in Los Angeles, Save
& New, and repeat the process one more
| | 02:38 | time for the Museum of Chinese in America,
and that will also be in the Museums category.
| | 02:44 | Now, I'm going to still hit Save & New
again, and I'm going to put in my Links
| | 02:47 | now for the Things to Do in Our Area.
| | 02:50 | So there's the Two Trees Olive Oil
Orchard Tour, go ahead and copy and paste
| | 02:54 | that in, twotreesoliveoil.com, put that
in Things to Do in Our Area, Save & New.
| | 03:05 | Channel Islands National Park, a really
wonderful place, and that will be Things
| | 03:11 | to Do in Our Area, Save & New.
| | 03:14 | And then the La Brea Tar Pits.
| | 03:15 | So copy and paste that in, Things to Do in
Our Area, and now I can say Save & Close.
| | 03:22 | So we'll return to the Web Links Manager
here and you'll see that we have six links;
| | 03:26 | three for Things to Do in
Our Area and three for Museums.
| | 03:30 | So that's all in place.
| | 03:32 | And now the next thing to do is,
we're going to go and create a link to our
| | 03:38 | Weblinks on the front-end of the website.
| | 03:40 | So to do that, we'll go to
Menus>Main Menu>Add New Menu item.
| | 03:44 | And we can select a Menu Item Type by
hitting the Select button, and I'm going
| | 03:48 | to scroll on down to Weblinks,
which is down here in the lower left.
| | 03:52 | So we have a choice of Listing our Web
Link Categories or Listing All of the
| | 03:56 | Links in a Category in one specific category.
| | 03:59 | So what I want to do is I want to
list my categories, I have two of them.
| | 04:03 | So I'm going to pick List All
Web Link Categories as my Type.
| | 04:08 | And my Menu Title will be Links, and we
can Select a Top Level Category, and the
| | 04:14 | Top Level Category is just going to be Root.
| | 04:16 | So it will go ahead and list all of the
links for all of the categories on the website.
| | 04:20 | Let's go ahead and say Save, and when
I Refresh the homepage of the website,
| | 04:25 | you'll see that we have a new
link come up here, the LINKS link.
| | 04:29 | So when you look at the front-end of the
website, you should see something like this.
| | 04:34 | But you may see something
completely different as well.
| | 04:37 | That's because I found a bug
here in the Weblinks in Joomla!
| | 04:41 | So if you're running version 2.5.1,
this is likely what you've seen but I've
| | 04:46 | reported the bug to Joomla!
| | 04:47 | so you might see something different if
you're running a later version of Joomla!
| | 04:50 | 2.5, and if that's the case, just
hold on we'll get to the way the screen
| | 04:55 | is supposed to look.
| | 04:56 | For those of you who might be looking at
the screen and seeing this, come with me.
| | 05:02 | We're going to go back to the backend of Joomla!
| | 05:04 | and we're going to get out of the Menu
Item for our Weblinks, and we're going
| | 05:08 | to go to Components>Weblinks, and we're
going to go to the Options here in the Weblinks.
| | 05:13 | Those of you running Joomla!
| | 05:14 | 2.5.1, it's likely that you have on
your Categories tab here, the third one
| | 05:20 | over, your Subcategory descriptions and
your numbers of Web links are set to Show.
| | 05:25 | What I'd like for you to do right now
is to switch them to Hide, hit the Save
| | 05:29 | button, and now switch them back to Show
again, and hit the Save button one more time.
| | 05:36 | When you refresh the front-end of the website,
you'll now see what you should be seeing.
| | 05:41 | And what's happening here is that
there's likely some kind of disconnect between
| | 05:45 | the radio button state and the actual
value in the database that's being stored.
| | 05:49 | By toppling those buttons and saving in
between, we've reset the values in the database.
| | 05:54 | So you should be seeing something like
this, which is the name of the Category,
| | 05:57 | Museums and Things to Do in Our Area,
the Descriptions that go with each of
| | 06:01 | these categories, and then
something that's the number of links.
| | 06:05 | Now that we're all at the same
starting state, now I can go forward with how
| | 06:08 | we're going to change the screen around.
| | 06:10 | In the backend of Joomla!
| | 06:11 | again, I'd actually really not like to
Show the number of Web links, I think
| | 06:16 | that looks a little bit unprofessional.
| | 06:17 | So I'm going to turn off the number of
Web links and just click my Save button,
| | 06:22 | and now we'll just have the name
of our Category and the Description
| | 06:25 | underneath, which is great.
| | 06:27 | Here inside of the List Layouts tab, I
have some things I'd like to change as well.
| | 06:32 | The List Layouts are going to come up
when I click on say Museums here, and
| | 06:36 | we go to this page.
| | 06:38 | So we have the name of the category
Museums, we have our Description, and then
| | 06:42 | we have this Table Layout here, and I
would like to get rid of this Display item
| | 06:47 | over here on the right-hand side, I'd
like to get rid of the number of hits, and
| | 06:51 | I'd like to get rid of all of
the icons here on the site as well.
| | 06:54 | So to do that, here under List Layouts,
I'm going to Hide Display Select, I'm
| | 07:01 | going to hide the number of hits as well.
| | 07:03 | The links description is something if
you had put in a description of every
| | 07:07 | link, you could show that
description or hide the description.
| | 07:10 | We didn't use it so I'm just
going to leave it set the way it is.
| | 07:13 | And if you have a lot of links on a
page, it could go into Pagination;
| | 07:17 | in other words, you'll see the little
numbers at the bottom and you can flip
| | 07:20 | between numbers of screens of links.
| | 07:22 | You can either show or hide
that pagination if you wish.
| | 07:25 | We have so few links, it really doesn't
matter so I'm just going to leave that
| | 07:27 | set to the defaults.
| | 07:29 | And then the last thing I'm going to
change is under the Weblink tab here, these
| | 07:32 | are items that pertain specifically to
individual Web links, and what I'm going
| | 07:37 | to do is I'm going to switch Count Clicks to No.
| | 07:40 | And for Icons, right now you have that
little globe icon next to each one of the
| | 07:45 | Web links, I'm going to
switch that over to Web Link Only.
| | 07:47 | I don't really feel the need to tell
people that those are links, I think
| | 07:51 | they're kind of obvious that they're
links, and I don't think the icon is
| | 07:54 | particularly attractive.
| | 07:56 | So now I'm going to go ahead and say
Save & Close, and when I refresh my
| | 08:02 | front-end of the website here, you'll
see that we have just a list of the links
| | 08:06 | here within the Museums category.
| | 08:07 | If I go back to the Top Level Links
page and I take a look at Things to Do in
| | 08:12 | the Area, we have a very similar layout there.
| | 08:14 | So that's all working really well.
| | 08:16 | The last thing that I want to do is on
this Top Level page, I'd like to actually
| | 08:21 | put a header somewhere on the top here
saying that this is in fact the links
| | 08:25 | page, and I'd like to add a brief
description above the two categories.
| | 08:30 | So to make those changes, we're
going to go back to the Menu Item.
| | 08:33 | So I'm going to go to Menus>Main Menu,
and I'm going to scroll on down to Links,
| | 08:40 | and here inside of Links, I am going to
go to the Page Display Options, Show a
| | 08:44 | Page Heading, and I'm going to
set the Page Heading to be Links.
| | 08:48 | And then under Categories Options, up
here on the top there is a place where we
| | 08:55 | can put in the Top Level Category Description.
| | 08:57 | Inside of your Exercise Files, in your
Web links document, there's a little bit
| | 09:02 | of text down here on the bottom, where
it says Description for your top level
| | 09:05 | category, if you highlight that and
pick copy, you can paste that right on in
| | 09:12 | the box here, and then go
ahead and hit the Save button.
| | 09:16 | And now when we Refresh the front-end
of the website on this LINKS page, you
| | 09:20 | should see your LINKS page heading
here and you'll see the little bit of text
| | 09:24 | that you just pasted in as well.
| | 09:25 | So this is everything that
I want to do with Weblinks.
| | 09:28 | This now looks correct and
it's functioning correctly.
| | 09:31 | I'm going to go ahead and hit Save
& Close here on the backend, and our
| | 09:34 | Weblinks are all set.
| | Collapse this transcript |
| Using the redirect component| 00:00 | The Redirect plugin was introduced in Joomla!
| | 00:03 | 1.6 and it is such a great addition to Joomla!
| | 00:06 | For any of you who happen to be
redesigning your websites, where you previously
| | 00:11 | had something up whether that was a Joomla!
| | 00:13 | site or whether it was some other type
of website, you have a series of links
| | 00:17 | for your website that are well-
established inside of search engines and in
| | 00:20 | bookmarks on people's computers.
| | 00:22 | Once you redesign your website, it's
likely that many of those links will change
| | 00:26 | as soon as you launch your site.
| | 00:28 | They don't exactly match up with the old
links that were on the previous website.
| | 00:32 | So what do you do?
| | 00:33 | Well, in the old days, there were some third-
party extensions you can install in Joomla!
| | 00:38 | that would redirect traffic from those
old URLs to the new URLs and they work
| | 00:44 | just fine, but they were third-party extensions.
| | 00:47 | Now, inside of Joomla!
| | 00:49 | there is a core extension called the
Redirect Component that will allow URLs to
| | 00:54 | redirect from an old location to a new location.
| | 00:56 | They are also useful for anytime you
want to run say a marketing campaign with
| | 01:02 | a specific URL for a webpage, and that webpage
may or may not necessarily exist on the website.
| | 01:09 | You'd like to redirect that URL that you
put into your ad which is maybe a short
| | 01:13 | pithy URL, you'd like to redirect it
to a page with a much longer URL that no
| | 01:17 | one is going to type in all of that information.
| | 01:20 | The Redirect Component is also useful for that.
| | 01:22 | So let's take a look at how
exactly a Redirect Component would work.
| | 01:26 | So I am going to start here on
the front-end of the website.
| | 01:29 | I am going to go over to the About page
which is the page that exists, and I am
| | 01:34 | going to just edit my URL here.
| | 01:35 | I am going to change the word about to
the word dog, and because I know that
| | 01:40 | there is nothing on this website that
talks about dogs and I am going to go
| | 01:44 | ahead and hit Enter, and sure enough, Joomla!
| | 01:47 | tells me that, that page cannot be found
which is not shocking in the slightest,
| | 01:51 | because well it doesn't exist on this website.
| | 01:54 | So what I'd like to do now is I like
to make sure that this webpage about the
| | 01:59 | dog redirects to the About page.
| | 02:02 | So in order to find out how that's
happening, I am going to switch to
| | 02:05 | the backend of Joomla!
| | 02:07 | And I am going to take a look at
Components>The Redirect component.
| | 02:12 | And here in the Redirect component,
you'll notice that this is tracking how many
| | 02:16 | incorrect URLs have been
entered into my website.
| | 02:19 | This is done through a plugin,
the plugin has to be enabled.
| | 02:22 | We have a note here on the screen
saying that The Redirect Plug-in is enabled.
| | 02:25 | The plugin itself is not very exciting,
there's nothing there you can configure
| | 02:28 | but it's inside of the Plug-in Manager
and you can turn it on or off according
| | 02:32 | to your needs at that
particular moment in time. What Joomla!
| | 02:35 | has done for me is it's logged the
fact that I had a page that somebody
| | 02:40 | requested that could not
be found within the Joomla!
| | 02:42 | system and now what I can do is I can
edit this Redirect here, I can just go
| | 02:48 | ahead and click on it.
| | 02:50 | And it will tell me that the Source
URL was this dog page, and I can redirect
| | 02:56 | this to any page on my website, so if
I just copy that URL and Paste it into
| | 03:01 | the Destination spot and change Dog
to About, and then I can make a little
| | 03:07 | comment here just to track the status of what's
happening, Redirect the special dog page to About.
| | 03:18 | Just in case I wonder why I might be
doing this later, I could put a note on
| | 03:21 | about the marketing campaign
or anything else I want to do.
| | 03:24 | And then over here on the right
side, I will set this to Enabled.
| | 03:28 | And if I say Save & Close, you will
see that the expired URL is here, the new
| | 03:33 | URL is there, and it's currently published.
| | 03:36 | So if I go right back to the front-
end of the website where I had the dog
| | 03:40 | address here and I hit Refresh, I
actually now get the About Us page because
| | 03:46 | we've now mapped the fact that, that dog page
redirects itself right over to the About page.
| | 03:52 | So that's a wonderful thing inside of Joomla!
| | 03:55 | In this case, I've used it for
redirecting a URL that doesn't exist to a page
| | 03:59 | that does exist, which is exactly what
you do with if you had a whole bunch of
| | 04:03 | URLs that were left over from
your previous version of the website.
| | 04:07 | Now, you can be proactive on this as well.
| | 04:11 | This was rather reactive, it waited for
the 404 error to occur on the front-end
| | 04:16 | and then we were able to put-in
a Redirect to what's happening.
| | 04:20 | But, you can also be proactive about it.
| | 04:22 | I could just create a New
redirect right here, say for a blank one.
| | 04:28 | So if I had say for the Source URL with
cat, localhost/index.php/cat and I want
| | 04:36 | to redirect that to let's say the
About page, I could do that as well.
| | 04:41 | And although I have never gone to the
front-end of my website and typed-in cat
| | 04:44 | in the first place, now I have a
redirect in place in case I ever do.
| | 04:48 | So now, if I go back here and change
About to Cat, this will also redirect
| | 04:55 | to the About Us page and that happened
before I had track that a 404 error had occurred.
| | 04:59 | So, proactive or reactive;
| | 05:02 | the Redirect component is a wonderful
addition to Joomla! 1.6, 1.7, and 2.5;
| | 05:09 | you are going to find it incredibly
useful as you start working on your redesign
| | 05:14 | projects for websites.
| | 05:15 | It's a great way to make sure that
visitors never get 404 errors as a result of
| | 05:21 | having bookmarked pages that no longer
exist, or URLs that change as a result
| | 05:25 | of a site redesign.
| | 05:27 | Helps you keep your traffic up in
the search engines, it's a great new
| | 05:30 | component all around.
| | Collapse this transcript |
| Exploring search and the Finder in Joomla! 2.5| 00:01 | It's very common for websites to
have a search feature these days.
| | 00:03 | Just a little search box somewhere in
the site where you can type in words that
| | 00:07 | you're looking for and come up
with a page of results. Joomla!
| | 00:09 | has had search in it ever
since the very beginning.
| | 00:12 | But, starting in Joomla!
| | 00:13 | 2.5, there is a new kind of
search on the block. In fact, Joomla!
| | 00:18 | ships with two kinds of search, and if
you take a look at Components, you'll see
| | 00:25 | here there are in fact two
kinds of search now on your website;
| | 00:28 | there is the regular search,
the same old search that Joomla!
| | 00:31 | has had since 2005, and we
have this new Smart Search.
| | 00:37 | So what's the difference between the two,
other than one is old and one is new,
| | 00:40 | so therefore it must be better.
| | 00:42 | Well, actually the old search is very
well-tested and it integrates with a lot
| | 00:48 | of third-party extensions.
| | 00:49 | Like for example, K2 or ZOO or any
of the other Content Construction Kit
| | 00:55 | components that happen to be out there.
| | 00:57 | Smart Search at this point in
time only integrates with Joomla!'s
| | 01:01 | core functionality.
| | 01:03 | It does not integrate with any
of the third-party components.
| | 01:07 | That is something we anticipate will be
changing very rapidly, now that Joomla!
| | 01:11 | 2.5 is out, Extensions Developers are
going to be very interested in using Smart
| | 01:16 | Search, and I think we're going to
see more people using it in the future.
| | 01:19 | But, in the meantime, we have two
kinds of search that ship with Joomla!
| | 01:24 | and which one you should use will
depend on whether you're using Joomla!'s core
| | 01:27 | functionality or not.
| | 01:29 | Now, I am going to show you how to use
Smart Search because I think that's the
| | 01:33 | future search for Joomla!
| | 01:34 | You'll find that Joomla!'s core,
regular old 2005 era search is very simple and
| | 01:40 | straightforward to use.
| | 01:41 | There are lots of documentation around
it on the web if you need to figure out
| | 01:45 | how to use that and set it up.
| | 01:46 | So in order to use Smart Search, the way
we are going to start off by doing that
| | 01:51 | is we have a plug-in we have to enable.
| | 01:53 | So if we go to Extensions>Plug-in
Manager, so here in the Plug-in Manager, we
| | 01:59 | are going to go find the plug-in here
for Content-Smart Search, and you'll see
| | 02:03 | that it's turned off by default.
| | 02:05 | I'm going to go ahead and click on
it and all I need to do is enable it.
| | 02:09 | So I am going to switch the Status
here to Enabled and say Save & Close.
| | 02:13 | So that's step one.
| | 02:15 | Step two, we are going to go to the
Components>Smart Search, and here inside
| | 02:21 | of Smart Search, we need to index all of
the content that's available on the website.
| | 02:25 | And so to do that, we're going to click this
Index button up here on the top of the page.
| | 02:30 | And this is going to run an indexer for
this website, we're going to give it a
| | 02:35 | minute or two to go ahead and run. Okay.
| | 02:41 | So now this says that the indexing process is
complete and it's safe to close this window.
| | 02:46 | So we will go ahead and close the window,
and this has gone through and indexed
| | 02:50 | all of the content here on the website.
| | 02:53 | What indexing mean is that it's
analyzed all the pages of the website, and
| | 02:57 | it has a database of information available to it, so
that Smart Search will work correctly. All right!
| | 03:02 | So now that we have configured our
Smart Search component, now we need to
| | 03:09 | actually display the search box on the website.
| | 03:12 | The way we can do that is through a module.
| | 03:14 | So I am going to start by
going to Extensions>Module Manager.
| | 03:18 | I am going to make a new module and
notice that there is a Search module that is
| | 03:25 | the regular 2005 era search box.
| | 03:28 | There is also a Smart Search
Module, we want Smart Search Module.
| | 03:32 | So I am going to go ahead and choose that,
and I am going to put-in the title as Search.
| | 03:36 | I am going to hide that title.
| | 03:39 | For the Position, once again I am going
to pick my beez_2.0 template here, and
| | 03:45 | we actually have a position-0 which is
designed for search, so I am going to go
| | 03:48 | ahead and choose that.
| | 03:50 | It's possible to have some search
filters, or search suggestions and things,
| | 03:54 | that's what these options over here are for.
| | 03:57 | The search suggestions if you have ever
used Google in the last couple of years,
| | 04:01 | you might notice that as you start
typing in characters, a bunch of suggestions
| | 04:05 | drop down as things you might
actually be trying to type into Google.
| | 04:09 | That is what the search
suggestions will do for you.
| | 04:12 | The Advanced Search option will
give you the option of going to a more
| | 04:15 | advanced search if you wish.
| | 04:17 | It's set to hide by default.
| | 04:18 | I would recommend leaving
that to hide as a default.
| | 04:21 | It's rare that people are
really good at using Advanced Search.
| | 04:24 | But, you could certainly turn it on if
you have a lot of power users and they
| | 04:28 | are asking for a very advanced search interface.
| | 04:31 | The Search Filter has to do
with an ability inside of search.
| | 04:36 | You can pre-configure some parameters
around search and then have your module
| | 04:41 | run within those parameters, and we may
take a look at that later in the video.
| | 04:46 | But, for right now, it's a fairly
advanced topic, so I am going to sort of skip
| | 04:49 | over it for the moment.
| | 04:50 | We'll go ahead and we will say Save &
Close and if I refresh the front-end of
| | 04:55 | the website, you'll see that we now
have a search box here, and I could type
| | 05:00 | something in it like stanley, and you
see here that as I started to type-in
| | 05:06 | stanley j jones that Joomla!
| | 05:09 | has come up with some suggestions for me.
| | 05:11 | Yes, I meant Stanley J Jones and I can
hit Enter and here are my search results
| | 05:17 | for Stanley J Jones;
| | 05:19 | the Major Donation Received
article that we have in place here.
| | 05:22 | So that's a very brief overview
of what Smart Search is about.
| | 05:26 | As I've alluded to there is some
additional functionality in here like Search
| | 05:29 | Filters, and so forth.
| | 05:31 | There is some documentation out
on the web you can take a look at.
| | 05:34 | You can also use Smart Search filters
and working with multiple languages on the
| | 05:38 | website which is something we are
going to cover in the next chapter.
| | Collapse this transcript |
|
|
10. Using TemplatesChanging the look of the site using templates| 00:00 | Templates define the way
a website looks. Joomla!
| | 00:03 | comes with several different templates,
for the front-end of the website and for
| | 00:08 | the back-end of the website.
| | 00:09 | There are many more templates available
for free download or by paid download,
| | 00:14 | and of course you can
always code your own templates.
| | 00:17 | Let's take a quick peek at our
Template Manager which you can find under
| | 00:21 | Extensions>Template Manager.
| | 00:23 | You'll see that we have several template
styles listed here in our Template Manager.
| | 00:27 | Those of you who are familiar with Joomla!
| | 00:29 | 1.5, Styles are something
new that started in Joomla!
| | 00:33 | 1.6 and have carried into Joomla! 2.5.
| | 00:37 | Previously, we had just a screen of
templates, but now we have two screens;
| | 00:42 | the Styles here and over on the tab
here, a series of Template Masters.
| | 00:48 | Template Masters are where you would go
to edit your HTML and your CSS, whereas
| | 00:52 | Styles are the way that you assign
the look of specific templates to the
| | 00:57 | front-end or the back-end of the website.
| | 00:59 | As you see here on our listing, there
are four templates available to us for
| | 01:03 | this website, and they're all
listed on the same screen with these
| | 01:06 | Administrator Templates.
| | 01:08 | So, Bluestork and Hathor down here on
the bottom of the screen are Administrator
| | 01:13 | Templates and they come
bundled with Joomla! 2.5.
| | 01:16 | Bluestork is the default admin template,
you know that because there's a star
| | 01:20 | next to it here in the Default
column, and Hathor is a fully accessible
| | 01:26 | Administrator Template and
that one comes with Joomla!
| | 01:29 | 2.5, but it's not currently in use.
| | 01:33 | For the front-end of the website, there
are three templates available which you
| | 01:36 | can see here in the Location column
that there are three of those available.
| | 01:40 | We are currently using the Beez_2.0
template which you see by the star in
| | 01:45 | the Default column.
| | 01:46 | But, there is also a Beez5 template by
default and the Atomic template as well.
| | 01:52 | In the coming videos, I'll show you how
to change these template styles, and how
| | 01:56 | to use the Template Manager
to modify your HTML and CSS.
| | 02:00 | It's possible to have multiple styles
assigned within your website, and we will
| | 02:03 | go through all of that.
| | 02:05 | However, I will not be
covering how to code your own Joomla!
| | 02:08 | template in the Joomla!
| | 02:09 | 2.5 Essential Training course.
| | 02:12 | If you are interested in learning how
to create your own custom template, be
| | 02:16 | sure to watch Joomla!
| | 02:17 | 1.6 Creating and Editing Custom Templates.
| | 02:21 | Although, the title suggests
that this is just for Joomla!
| | 02:24 | 1.6, these videos work just fine, no
issues with Joomla! 1.7 and Joomla!
| | 02:31 | 2.5 as well.
| | Collapse this transcript |
| Setting the default template style and assigning template styles| 00:00 | It's very easy to redesign your
site in just a few clicks in Joomla!
| | 00:04 | 2.5 using the template
styles that come with Joomla!
| | 00:07 | So, let's take a look how we can do that.
| | 00:10 | I am going to start by going
to Extensions>Template Manager.
| | 00:14 | And from here, you see that we have
two default templates that are assigned;
| | 00:18 | the Beez_2.0 template is assigned as
the default template for the front-end
| | 00:23 | of the website, and the Bluestork
template is assigned as the Administrator
| | 00:27 | side default template.
| | 00:28 | What I am going to do is redesign the
front-end of my website with just one click.
| | 00:33 | I'm going to switch from Beez_2.0 to Beez5.
| | 00:37 | All I am going to do is click on the star here,
and now the Beez5 template is the default.
| | 00:43 | When I go to the front-end of my website,
to the homepage, instantly my website
| | 00:47 | has been redesigned and it's now
something about fruit, and I can click around
| | 00:51 | through the website.
| | 00:52 | You can see that things have in fact
changed and that's a wonderful thing.
| | 00:59 | I can certainly go back, and switch
that back to the Beez2 template just as
| | 01:03 | easily by going ahead, and
assigning the Beez2 template as the default.
| | 01:06 | When I Refresh the homepage again, the
website changes back to the way it was.
| | 01:11 | I can also assign different looks
to different pages of the website.
| | 01:15 | So let's say that I wanted to have the
About Us page, and the News & Events page
| | 01:20 | to take on the Beez5 look, while I
wanted the other pages on the website to take
| | 01:24 | on the Beez_2.0 look.
| | 01:26 | Now obviously, this is really a fashion-no.
| | 01:29 | You would not use such radically
different designs on a website.
| | 01:33 | But, you might have a situation
where you'd have a different color scheme
| | 01:37 | between a couple of pages for example,
or maybe a couple of different layouts,
| | 01:41 | and styles are a great way to do that.
| | 01:43 | So if I go into the Beez5 template
here, Template Style, you will see that
| | 01:48 | I have the option of making a few changes
down here on the bottom for the Menu assignment.
| | 01:53 | Right now, no pages are
assigned to the Beez5 template.
| | 01:56 | But, if I click some off, let's say
About, Volunteer With Us, and Our Director
| | 02:00 | as well as News & Events, News and
Events, and I go ahead and say Save & Close.
| | 02:07 | When I go back to the homepage and
Refresh, you will see that the homepage still
| | 02:11 | looks like the homepage.
| | 02:12 | But, when I go to the About page,
we have the Beez5 look here.
| | 02:17 | The News & Events page also has that
Beez5 look, the Collections page goes back
| | 02:20 | to the Beez_2.0 look.
| | 02:22 | So that was very easy to do.
| | 02:24 | Obviously, I am not going to keep that.
| | 02:26 | So I am going to go back into the Beez5
Template Style here, and I am going to
| | 02:31 | turn off all the things that I just checked.
| | 02:35 | So now, Beez5 is not assigned to any
pages on the website, and say Save & Close
| | 02:41 | and so now when I go back to the News & Events
page, it's still a same look that I had before.
| | 02:47 | So Template Styles are a very
useful new feature in Joomla! 2.5.
| | 02:53 | It is possible to have multiple styles
in place for your website, or you can use
| | 02:57 | just one as your default, and Template
Styles apply to both the front-end of the
| | 03:01 | website as well as the back-end.
| | Collapse this transcript |
| Creating new template styles| 00:00 | One of the things I'd like to do is
customize the template that we've been
| | 00:04 | working with just a little bit.
| | 00:05 | We really don't want this website to say Joomla!
| | 00:08 | Open Source Content Management
even though we absolutely love Joomla!
| | 00:11 | We'd really prefer it to
say something about SAMOCA;
| | 00:13 | the San Angelico Museum of Contemporary Art.
| | 00:17 | So I am going to change the look of this
website a little bit, and to do that, I
| | 00:21 | am going to jump into the back-end of Joomla!
| | 00:24 | and I am going to go to
Extensions>Template Manager.
| | 00:27 | What I am going to do, I am going
to start by making a copy of the
| | 00:31 | Beez2 template style.
| | 00:34 | All I have to do is put a checkmark
next to it and say Duplicate, and this will
| | 00:38 | make a copy of that template for me.
| | 00:40 | I am going to go ahead, and assign that
as the default, and then I am going to
| | 00:45 | click on the style here, and I have all
kinds of things here in place that I can
| | 00:51 | customize over here on the
right-hand side of the screen.
| | 00:55 | So these are the options that we happen
to have with this particular template.
| | 00:58 | So one of the things I am going to do
is I am going to change my template color
| | 01:01 | from Personal to Nature, and I am going
to change my Site Title from Joomla to
| | 01:06 | the San Angelico Museum of Contemporary Art.
| | 01:15 | And for the Site Description, I'm
going to put-in Art for a New World.
| | 01:22 | I am also going to clear the path of
the logo here because I am not going to
| | 01:26 | use an image for that.
| | 01:27 | If I go ahead and click the Save
button, and I refresh the front-end of my
| | 01:32 | website, I've instantly
changed the look of the website here.
| | 01:37 | So now we have some navigation up on
the top, we have a nice big headline here
| | 01:43 | about the San Angelico Museum of
Contemporary Art, and we have our Search box
| | 01:48 | over here on the side.
| | 01:49 | So as you scroll on down
the page, you can see that.
| | 01:53 | This is looking pretty nice.
| | 01:54 | You can go over to the About Us
page, everything is looking good.
| | 01:57 | So you can go ahead and click on
through the site here, and see that we've
| | 02:01 | redesigned this very nicely.
| | 02:04 | The next thing I'd like to do is
specifically on the About Volunteer With Us
| | 02:10 | page, I'd like to change this tagline
from Art for a New World, to the Art of
| | 02:16 | Helping, because we like to
encourage people to volunteer.
| | 02:20 | So in order to change the tagline
on this one page, I need to make a
| | 02:23 | new template style.
| | 02:26 | So I am going to go ahead and hit Save
& Close here in the back-end of Joomla!
| | 02:31 | and I am going to take my now new
these two template style here, and I am
| | 02:37 | putting a checkmark by it.
| | 02:38 | I am going to click the Duplicate
button, and I am going to click here on
| | 02:41 | Beez2 Default number 3.
| | 02:44 | And the first thing I am going to do is
I am going to change the Style Name here
| | 02:48 | to SAMOCA-Volunteer page.
| | 02:52 | I am going to assign this to the
Volunteer With Us page down here under Menu
| | 02:57 | Assignment, and I am to going change my
Site Description from Art for New World
| | 03:02 | to the Art of Helping, and I
am going to say Save & Close.
| | 03:08 | And for this other style here called
the Beez2 Default number 2, which is our
| | 03:12 | default style, I am going to click on that, and
I am going to change its name to SAMOCA-default.
| | 03:21 | So, what I've done here is I have
taken the existing Beez2 default style, and
| | 03:26 | I have made two copies essentially which are
the two that I am now using on the website;
| | 03:31 | the SAMOCA default as well
as the Volunteer Page default.
| | 03:34 | The reason why I made copies was just
in case that if I ever needed to go back
| | 03:38 | to my Beez2 default template style, I
have a copy of it, and then I can refer to
| | 03:43 | it or reassign it or do
whatever I need to do with it.
| | 03:47 | Now, when I go to the front-end of
the website on the Volunteer page, and I
| | 03:51 | Refresh, my tagline says The Art of
Helping, and when I go to the other pages of
| | 03:56 | the website, it does say Art for New World.
| | 03:59 | So this is a fairly minor change that
we've made in our template style, but
| | 04:03 | hopefully it will give you some
ideas of things that you can do with
| | 04:06 | template styles to change the look of
one or several pages on your website
| | 04:11 | in a very straightforward manner
without having to know HTML or CSS or do
| | 04:15 | any funky programming.
| | 04:17 | However, if you do like HTML and CSS and funky
programming, you're going to love the Joomla!
| | 04:21 | Templates course.
| | 04:22 | Be sure to go check that out.
| | Collapse this transcript |
| Adjusting template masters with the HTML and CSS editors| 00:00 | Now that you know a bit about the
template styles, I'd like to take a closer
| | 00:04 | look at our template masters.
| | 00:06 | So, to look at the template masters,
we are going to once again go to
| | 00:10 | Extensions>Template Manager.
| | 00:12 | The styles are in the
screen that you see by default.
| | 00:15 | The template masters are over here
on this link that says Templates.
| | 00:19 | Go ahead and click on that, and you
will see that we have a series of items for
| | 00:24 | all of the templates that
are here on our website.
| | 00:27 | So there is the Atomic template, the
Beez5 template, the Beez2 template as well
| | 00:31 | as the two administrator templates;
| | 00:34 | the Bluestork and the Hathor templates.
| | 00:37 | You don't see the SAMOCA
template listed in here.
| | 00:39 | That's because the SAMOCA
template style is just an instance of the
| | 00:44 | Beez_2.0 template itself.
| | 00:47 | So any changes that we need to make
to the SAMOCA template style eventually
| | 00:52 | tie back to Beez_2.0.In this screen, you
have all kinds of wonderful information here.
| | 00:57 | Over on the far left, if you click on
the little thumbnail here, you'll wind up
| | 01:02 | with a larger version of the template,
so you can get a good look at what
| | 01:06 | exactly it is, and what it's doing.
| | 01:08 | You can see that this is a Site template,
and the Version of that template, the
| | 01:13 | version 2.5 when it was
created. Who created it?
| | 01:16 | Hurray for Angie Radtke, my good
friend in Germany, and over here under
| | 01:21 | Template, you can see that we have both
the ability to go to the details in the
| | 01:25 | files as well as the preview.
| | 01:27 | And if I click the Preview, this
will open up a new tab with all of our
| | 01:31 | Module Positions outlined.
| | 01:33 | The reason that the Module Positions are
showing up outlined is because we still
| | 01:38 | have turned on inside of the Template
options the ability to show our Module
| | 01:44 | Positions on the front-end of the website.
| | 01:46 | I am going to go ahead and close this tab.
| | 01:49 | If I click on the Details and Files
link, I go into a screen that is probably
| | 01:55 | familiar to many of you
who are used to Joomla! 1.5.
| | 01:59 | This shows you some of the stylesheets
associated with this template as well
| | 02:04 | as the master files.
| | 02:05 | Now previously, in Joomla!
| | 02:07 | 1.5, there was only one
master file and that was index.php.
| | 02:12 | You would edit that for absolutely
everything and if you happen to have an error
| | 02:16 | page or a customized print preview page,
those types of pages would be located
| | 02:23 | in the back-end of Joomla!
| | 02:24 | and you had to go in through the
file structure to actually edit them.
| | 02:27 | They've now taken those files and made them
show up on the administrator side of Joomla!
| | 02:31 | so that you can edit them more easily.
| | 02:33 | So if I click on Edit the main page
template, this will put me into a screen
| | 02:38 | where I can edit the HTML here
for this particular template.
| | 02:42 | And you will notice one of the
wonderful things here is that our code is now
| | 02:46 | color-coded, so it's a lot easier to
read than it was before, which is a
| | 02:50 | very, very helpful thing.
| | 02:52 | So you can hop on in here and
you can make changes to this.
| | 02:55 | If you are unfamiliar with all of
this gobbledygook code here, I strongly
| | 03:00 | encourage you to copy out what is here,
put it in somewhere else, look at it in
| | 03:05 | Dreamweaver for example, or any
other text editor, and make your changes.
| | 03:10 | Make sure you have a backup of this
because it's possible to break your site
| | 03:13 | like really, really badly, if you make
changes to your template and you don't
| | 03:17 | know what you're doing, and you
don't know what are your major mistakes?
| | 03:19 | So backups are your friend.
| | 03:21 | Make sure you have a good backup for
this before you get too far down the road
| | 03:26 | of making changes that you
don't know how to fix. Okay.
| | 03:30 | Now, I am going to hit
Cancel to get out of this.
| | 03:33 | Likewise, if you clicked on the error
page or the print view template, you'll
| | 03:35 | see a similar editing screen.
| | 03:37 | But, of course those templates are
applied to different areas of the site.
| | 03:41 | On the right side of the screen,
you'll see all of the CSS files that are
| | 03:44 | associated with this template.
| | 03:46 | And some people think that all of the
CSS files load everytime the webpage loads.
| | 03:52 | But, in fact, if you read the names of
these style sheets, you'll see that it's
| | 03:57 | likely only a subset of these, style
sheets are going to load on any given page.
| | 04:01 | For example, there is a style
sheet here called nature.css.
| | 04:06 | That is the style sheet that is making
our website look that nice teal green color.
| | 04:11 | But, notice that right next
to that is nature_rtl.css.
| | 04:15 | RTL indicates Right to Left, and this
is the style sheet that will be used if
| | 04:21 | you happen to have a Right to Left
language installed on your website;
| | 04:24 | many forms of Arabic for
example are right to left languages.
| | 04:28 | And since this is a core Joomla!
| | 04:30 | template, Angie has had to make sure
that she puts in a bunch of style sheets to
| | 04:34 | cover all kinds of languages.
| | 04:37 | So you can see that some of
these other ones are here for other
| | 04:40 | various situations.
| | 04:41 | We have a konqueror style sheet, a
mozilla style sheet, and an opera style sheet
| | 04:45 | as well as one for
ie7only, a generic one for IE.
| | 04:50 | Those style sheets
obviously are browser specific.
| | 04:53 | They are only going to load when the
browser loads in specific situations.
| | 04:57 | There's also a few color styles.
| | 04:59 | So there's one here for black,
there's one that's a general style sheet;
| | 05:02 | template.css is going to contain most of the
styles for this particular template however.
| | 05:08 | If you click on any of these, let's
click on template.css, you will see that we
| | 05:13 | have a series of styles that are
located here in our editing window, and they
| | 05:18 | are color-coded as well, and you can
make changes to these however you like.
| | 05:22 | Again, if you do get in here and make
changes to your styles, make sure you keep
| | 05:27 | a backup of what was here originally,
so that you don't have a small tragedy
| | 05:31 | befall your website because you
broke something and you can't fix it.
| | 05:34 | So, that is the Template
Manager here inside of Joomla! 2.5.
| | 05:39 | This is a great place for you to go if
you know HTML and CSS preferably from a
| | 05:43 | hand-coded perspective.
| | 05:44 | You're going to use this a lot when
you're building hand-coded templates for
| | 05:48 | your website and I cover this part of the
Template Manager in great detail in Joomla!
| | 05:52 | 1.6 Creating and Editing Custom
Templates which by the way works absolutely
| | 05:57 | fabulously well in Joomla! 1.7 and Joomla!
| | 05:59 | 2.5.
| | Collapse this transcript |
| Changing the admin template| 00:00 | Finally, I'd like to give a tremendous
hat tip to my good friend Andy 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
| | 00:12 | was working for Joomla!
| | 00:13 | as part of the Google Summer of Code,
and as part of that project she was tasked
| | 00:17 | with creating a fully
accessible administrator template.
| | 00:21 | You maybe familiar with
the concept of accessibility.
| | 00:24 | This is the concept that people with
serious disabilities need to still be able
| | 00:29 | to work with your website.
| | 00:30 | It could be that they can't use a mouse
or they can only navigate by keyboard or
| | 00:35 | they may be no vision or blind, or they
may have some other type of disability.
| | 00:39 | Andy created the Hathor template with
all of those accessibility points in mind
| | 00:43 | and I'd like to show you that template now.
| | 00:46 | If you are building a site for the
government in particular or for colleges and
| | 00:50 | universities where there are
requirements for accessibility compliance such as
| | 00:54 | Section 508, the Hathor template will
go a long way to helping you meet those
| | 00:58 | requirements for your
client at least on the backend.
| | 01:02 | Remember that your front-end template has
nothing to do with the backend template.
| | 01:08 | So your front-end template
would also need to be coated with
| | 01:11 | accessibility features in mind.
| | 01:13 | Many of those accessibility
features are built into the Beez templates.
| | 01:18 | So let's take a look at Hathor.
| | 01:20 | If I go to Extensions>Template Manager,
right now Bluestork is our default
| | 01:25 | template but to make Hathor our default
template all I need to do is switch the
| | 01:29 | star from Bluestork to Hathor, and you
will see immediately that the default
| | 01:34 | template changes and that's because
we are on the admin side of Joomla!
| | 01:38 | and these are the admin
templates we are working with.
| | 01:42 | So as soon as we change to the
default, all of the pages on the backend
| | 01:45 | change accordingly.
| | 01:47 | So we now have a different looking site here.
| | 01:50 | You can see that things are still
on the same places, you still have
| | 01:53 | these dropdown menus.
| | 01:55 | They are still available;
| | 01:56 | we still have the fly-outs
that are available and so forth.
| | 01:59 | If we go to the Article Manager for
example under Content, you can see that we
| | 02:03 | have a screen with a bit more of a grid,
it's a bit easier to read, the buttons
| | 02:08 | have been moved from the upper right
part of the screen over here to just the
| | 02:11 | top left, minimizing the amount of
movement that needs to be made to get to the
| | 02:15 | New button and so forth.
| | 02:17 | The Control Panel has a little bit more
contrast to it to make the buttons pop
| | 02:21 | out a little but more.
| | 02:22 | So you can see all those things right upfront.
| | 02:25 | Again when I go to Extensions>Template
Manager and I go to the Hathor template;
| | 02:31 | there are some options here
for continuing to style this.
| | 02:35 | For example, I could show the site
name and the template header, I could set
| | 02:38 | that to Yes, and if I click Save,
you'll see that SAMOCA Administration now
| | 02:43 | shows up on the top right
corner of the Joomla! template.
| | 02:47 | I can also select various colors.
| | 02:49 | So this is the Standard color.
| | 02:51 | Note that we also have the High Contrast option;
| | 02:53 | a high contrast maybe particularly
useful for some people with various visual
| | 02:57 | disabilities, they find it easier to
read light text on a dark background and so
| | 03:02 | the Hathor template has
that style built right into it.
| | 03:06 | You could also make the text bold if
you wish which again helps some people
| | 03:09 | with various types of disabilities to
be able to read the text on the screen a
| | 03:13 | little bit more easily.
| | 03:15 | But again these accessibility
features are only applying to the backend of
| | 03:18 | the website not to the front-end of the
website, so just be sure you keep that in mind.
| | 03:22 | I am going to go hit Save & Close here,
back to my Template Manager and I am
| | 03:26 | going to switch back to Bluestork
by clicking the Default star here.
| | 03:32 | So now we are back in the
Bluestork template and away from Hathor.
| | 03:34 | It should be noted that perhaps you are
working with a team of people where one
| | 03:39 | person might need the Hathor
template or two people might need the Hathor
| | 03:42 | template, or they might just prefer the
Hathor template whereas the rest of your
| | 03:46 | team like Bluestork or there are many
other administrator templates that are
| | 03:50 | available that you can download and use,
you might wonder how you can assign
| | 03:54 | different Administrator
templates to different users.
| | 03:57 | Well fortunately, new in Joomla!
| | 03:59 | 1.6 and higher, under Users>User Manager
and if I go into my Super User account,
| | 04:09 | over here on the right side of the
screen, you do have the ability to assign a
| | 04:12 | Backend Template Style.
| | 04:14 | So by default all of your users on your
site are set to use the default template
| | 04:19 | which is the one that
starred in the Template Manager.
| | 04:22 | But you could take a specific
template for them from this list.
| | 04:26 | So if you wanted, I could assign say
Bluestork for the whole website, but for
| | 04:31 | specific users I could assign
them the Hathor template or any other
| | 04:34 | Administrator template they
might happen to want to use.
| | 04:38 | So that's just a few words on Hathor.
| | 04:40 | It's a great feature in Joomla!
| | 04:43 | to have Hathor available because
it does make the backend of Joomla!
| | 04:47 | accessible, and that's not
something you can say about other content
| | 04:50 | management systems.
| | 04:51 | They haven't done nearly the amount of work
with the accessibility that Joomla! has done.
| | 04:55 | So it's nice to have Hathor
available specifically for instances where
| | 05:00 | accessibility especially
on the backend is required.
| | Collapse this transcript |
| Exploring Joomla! templates from third-party providers| 00:00 | If you do a quick Google search for Joomla!
| | 00:03 | templates, you'll turn up about a
zillion results, and the results will fall
| | 00:07 | into two classifications, Paid templates
and they are the words templates with a
| | 00:11 | fee or free templates. Which is better?
| | 00:16 | You already know the answer. It depends.
| | 00:20 | Free is such a wonderful price
and there are some very good free
| | 00:24 | templates available.
| | 00:26 | However, choose your
template provider very carefully.
| | 00:30 | Since anyone can post a free template
frequently, anyone does post those free
| | 00:35 | templates and that means it some
templates don't have many module positions for
| | 00:40 | example or they're limited in their
ability to customize those templates, or
| | 00:44 | they're not tested across all browsers.
| | 00:47 | If you get a free template from a
commercial template provider, you'll find that
| | 00:51 | most of those commercial template
providers offer some free templates somewhere
| | 00:56 | in order to drive traffic to their websites.
| | 00:58 | Superb quality, they will be well
tested, they will be well supported, and if
| | 01:02 | you absolutely have to have a free
template I would recommend you go to the
| | 01:06 | commercial template providers
and go find their free templates.
| | 01:08 | You'll be very limited in your
choices but the quality will be great.
| | 01:12 | In my mind, it's totally
worth paying for a template.
| | 01:16 | I want good quality, good support, and
a minimum of hair-pulling, well I try to
| | 01:21 | get it to look the way I want.
| | 01:23 | I have found that many paid templates
are excellent and my favorite template
| | 01:27 | providers are RocketTheme here, we
use RocketTheme all the time at 4Web, my
| | 01:32 | company, and they have excellent
templates, a lot of them are mobile compatible.
| | 01:37 | We also like Joomla Bamboo, this is another one.
| | 01:40 | They have a very different style
than the RocketTheme templates.
| | 01:44 | They tend to be more minimalist and
make lovely use of layout and we also like
| | 01:49 | the Joomla Shake templates
which tend to be great for business.
| | 01:52 | They are a little bit more plain, a
little bit more clean and some people
| | 01:57 | really like that look.
| | 01:58 | So between Joomla Shack, Joomla Bamboo
and RocketTheme, this is what we tend to
| | 02:02 | use at my web development company.
| | 02:05 | There are many, many other great
template providers that are out there.
| | 02:09 | But those three are my favorites in particular.
| | 02:12 | In the end what you need to do is
judge your template by its basic layout.
| | 02:15 | Think about the location of your logo,
primary and secondary navigation, how
| | 02:20 | many columns it needs to have on the
homepage, or the inside pages and keep in
| | 02:25 | mind how many columns do you really need.
| | 02:27 | Just because your template comes with
four columns or five columns, if you only
| | 02:32 | need two, does that
really matter as the feature?
| | 02:35 | Think about what you need on
the homepage of your website.
| | 02:38 | Just because the template comes with 20,
or 30, or 60 module positions, it does
| | 02:44 | not mean that you need to have 60
modules on a page and I certainly hope you do
| | 02:48 | not have 60 modules on a page.
| | 02:51 | Remember also that when you are working
with a client, you can fold the cost of
| | 02:56 | templates and extensions into the
cost of business in creating the website.
| | 03:00 | So I recommend that when you put your
websites out to bid, you definitely add
| | 03:05 | some money so that you can have
the ability to buy templates and buy
| | 03:09 | extensions as necessary.
| | 03:11 | Finally, many template manufacturers
are now including mobile phone options
| | 03:15 | bundled with their templates.
| | 03:16 | You can install one of these
templates and have the site compatible with
| | 03:20 | mobile phone browsers in addition to looking
and working great on a PC and a Mac immediately.
| | 03:26 | So I encourage you to think about
mobile phones and your approach to mobile on
| | 03:31 | your website, and if mobile is
important make sure you download a template that
| | 03:35 | does have a mobile option to it,
whether that's by responsive design or a
| | 03:39 | separate mobile template.
| | 03:41 | Frequently it's a lot cheaper to pay
$50 for a template that's fully debugged
| | 03:45 | and comes with a mobile option out of
the box than it is to download a free one
| | 03:49 | and then spend countless hours trying
to get it to work at Internet Explorer 7
| | 03:53 | and Safari, and not to
mention all of those mobile phones.
| | 03:56 | So in my mind templates are
the most amazing deal out there.
| | 04:01 | The fact that it's had all the
debugging done for you and that there is nothing
| | 04:04 | to do, you just plug it in and it just
works, that is just a tremendous thing.
| | 04:09 | So I encourage you, if you have no money for
anything else buy your template for your Joomla!
| | 04:15 | website.
| | Collapse this transcript |
|
|
11. Creating a Web Site with Multiple LanguagesOverview of configuring a multilanguage site| 00:01 | In the United States, it's relatively
rare that we build Web sites in any
| | 00:04 | language other than English.
| | 00:06 | However, we do have a growing Spanish-speaking
community in some parts of the United States.
| | 00:11 | As a result, many Web sites increasingly
deliver content in English and in Spanish.
| | 00:16 | Some Web sites in government or healthcare
may wish to serve people in several languages.
| | 00:21 | Fortunately, one of Joomla!'s major strengths
is it's ability to support multiple languages.
| | 00:26 | Joomla! is a project built by
participants from around the world
| | 00:29 | speaking many different languages.
| | 00:31 | In fact, Joomla! has been translated into
dozens of languages from around the world.
| | 00:36 | What's more, Joomla! is also localized.
| | 00:39 | Localization means that
a language is adapted
| | 00:42 | to a certain country or region's
flavor of the language.
| | 00:45 | Think about the difference between
Canadian French and French spoken in France,
| | 00:49 | or English spoken in the U.S.
versus the United Kingdom.
| | 00:53 | Joomla! supports these
differences as well.
| | 00:56 | It turns out that SAMOCA is frequently attended
by a substantial French-speaking population.
| | 01:02 | Therefore SAMOCA would like some of the pages on
the Web site display in French as well as English.
| | 01:07 | This chapter will cover how to create
a Web site in two languages in Joomla!
| | 01:11 | If you need to support more than two
languages, you can use the same process
| | 01:15 | demonstrated here for each language of interest.
| | 01:17 | And I have an example for you.
| | 01:19 | SAMOCA is an animation company based in the
Basque region of Spain and they approached
| | 01:24 | us to build a Web site for them about their
cartoon characters here in The Howoldies series.
| | 01:30 | And they needed this Web site built in English,
which is what we're looking at here,
| | 01:35 | each page for our cartoon characters,
has Videos and some favorite things
| | 01:41 | that each cartoon character likes
to do as well as some video games,
| | 01:44 | and the videos are playable
right here inside of Joomla!
| | 01:47 | and you can also add
comments over here on the side.
| | 01:50 | But in addition to being in all of
these cartoon characters with their own
| | 01:55 | individual preferences, it's also
available in Spanish with each cartoon
| | 02:00 | character translated into a different
language, as well as it's available in Basque.
| | 02:06 | So this was a fairly challenging
Web site for us to build because
| | 02:10 | there is quite a complicated design here.
| | 02:12 | We had to do a lot of custom templating
work, a lot of template override work,
| | 02:16 | all of which is covered in Joomla! 1.6:
Creating and Editing Custom Templates,
| | 02:21 | which also works great in Joomla! 1.7 and 2.5.
| | 02:24 | And we had to go through all the work of working
in multiple languages to build this Web site.
| | 02:30 | So I'm going to cover how we went about
that process in the next several videos,
| | 02:34 | so that you too can build a multiple
language Web site inside of Joomla!
| | Collapse this transcript |
| Downloading and installing the French language pack| 00:00 | As I mentioned in the last video, the
SAMOCA Web site has a fairly substantial
| | 00:06 | French-speaking population that likes
to come visit the museum, and so,
| | 00:10 | they've requested that some of the Web site
be offered in French as well as English.
| | 00:13 | So we're going to get started on building
that part of the Web site for them.
| | 00:17 | The very first step in building Joomla!
| | 00:20 | in multiple languages is to install
what's called a Language Pack,
| | 00:23 | and a Language Pack is a full
translation of Joomla!'s back-end
| | 00:28 | and any of the core components
that might display on the front-end,
| | 00:33 | it's all been translated
into your language of choice.
| | 00:37 | So, of course here in the back-end, the
translation would cover all of the
| | 00:41 | Control Panel icons you see here
in the menus and so forth.
| | 00:44 | On the front-end, if you think
about things that display from Joomla!,
| | 00:47 | think about the contact form and the
labels on a contact form for example,
| | 00:51 | that's text that comes
right out of Joomla! and
| | 00:53 | that would be automatically
displayed by the French language pack.
| | 00:57 | However, your articles for example are
not translated by Joomla! automatically;
| | 01:03 |
you need to go through and translate
those, preferably with a human who
| | 01:07 | knows how to translate things
into the language of choice.
| | 01:11 | You could always install a
translation tool like Google Translate,
| | 01:15 | but if you've used Google Translate as an
English speaker and you've tried translating
| | 01:19 | a piece of content from some other language,
you know that Google Translate isn't perfect
| | 01:23 | and the translations can sound a little choppy.
You can safely assume that that's true for
| | 01:27 |
people reading your Web site, from
English to another language as well.
| | 01:31 | So the best translations
are always done by humans.
| | 01:34 | Google Translate is a pretty poor substitute,
but it's as good as we've got at the moment.
| | 01:40 | In any case, however you translate
your articles, the first part of
| | 01:44 |
this process is to install this language pack
that will translate various parts of Joomla!
| | 01:48 | So we have to download that language pack,
and so I'm going to go to joomla.org and
| | 01:53 |
I'm going to go to the Extend menu option here
and I'm going to go to the Translations item.
| | 02:00 | And this is going to tell me where I can go to
download Translations for all kinds of languages,
| | 02:06 |
Note that there are a different set
of translations for Joomla! 1.5,
| | 02:10 | then there are for 1.6, 1.7, and 2.5.
| | 02:14 | So we're going to go to
the 2.5 Translation Packs,
| | 02:18 | and this is going to tell us
that we need to go to JoomlaCode.
| | 02:22 | And if you take a look here, there are
so many language packs here for Joomla!,
| | 02:29 | and this is just the first page;
there are two pages of them.
| | 02:32 | I'm actually going to change my sort here
to sort in the other order on this page.
| | 02:38 | That way I can scroll on down and
find the French language pack,
| | 02:40 | which will be under F for French.
| | 02:42 | So this is the one that we want, and
if you take a look over here we have
| | 02:46 | two versions of it; there is a
version 1 and a version 2.
| | 02:48 | I'm going to assume version 2
is more complete and up-to-date.
| | 02:51 | So I'm going to go ahead and click on
that link and save that on down to
| | 02:55 | My Computer, which is now
here in my Downloads folder.
| | 02:58 | So once you've downloaded your Language Pack,
| | 03:02 | you can hop into the back-end
of Joomla! and install it.
| | 03:05 | Just like any other extension in Joomla!,
you're going to install your Language Pack
| | 03:09 | by going to Extensions > Extension Manager,
and here in the spot called
| | 03:14 | Upload a Package File, is where
you're going to upload your Language Pack.
| | 03:18 | You can install templates here,
components, modules, plug-ins and languages
| | 03:23 | all through the same interface.
| | 03:24 | So I'm going to browse for my Language
Pack which is in my Downloads folder,
| | 03:29 | and there it is, FR_joomla_lang_full,
and I'm going to upload and install it.
| | 03:35 | And it will tell me that this is
the Full French Language Pack and
| | 03:39 | it does include some
translations for TinyMCE as well.
| | 03:43 | So now if I take a look at Extensions >
Language Manager, this will show me all of
| | 03:48 | the languages that I have
installed on my Web site.
| | 03:51 | So this first tab is telling me what
languages are installed that work on the
| | 03:54 | front-end of my Web site,
so the public facing side.
| | 03:57 | And right now I have two; I
have English and I have French.
| | 04:01 | If I look at the Administrator tab here,
which is of course the backend of Joomla!
| | 04:06 | that we're looking at now,
| | 04:07 | I also have available to me English and French.
| | 04:10 | English is the default but we could
create some new users and assign them the
| | 04:14 | French interface if they are
more comfortable working in French.
| | 04:18 | The third tab here has to do with content,
and for the moment all of our content
| | 04:22 | is currently in English.
| | 04:23 | The next step is to add an item
here for creating French content,
| | 04:27 | which I will do in the next video.
| | Collapse this transcript |
| Creating the French content language| 00:00 | Now that we have our French language
pack installed, our next step is to create
| | 00:05 | what's called a Content Language, which
will give people the ability to assign
| | 00:10 | certain pieces of content
to a specific language.
| | 00:13 | Right now if I take a look at a piece
of content inside of my Article Manager,
| | 00:17 | let's just look at the About Us article,
| | 00:20 | the Language drop-down is located
right here under the Edit Article option,
| | 00:24 | right at the top of the page, and
currently the language is set to All,
| | 00:27 | in other words it is considered to
be an international article of sorts.
| | 00:32 | If I click on the dropdown here, I
can either assign this article to the
| | 00:35 | language of All, or I can assign it
to specifically an English article.
| | 00:40 | What I need to do now is make sure that there
is an option in this drop-down for French,
| | 00:43 | and so that is the next
thing we're going to do.
| | 00:46 | So if I go to my Language Manager,
| | 00:49 | I'll go-ahead and hit Cancel to get
out of this screen, and I'm going to go to
| | 00:53 | Extension > Language Manager and I'm going
to go to the Content tab here on the top.
| | 00:59 | So now I've got English here as my option.
| | 01:02 | I'm going to go ahead and add French.
| | 01:04 | So I'm going to click New to make a new
language, and it's going to ask me for a Title.
| | 01:09 | So I'm going to put in the title of French.
| | 01:11 | The Title Native is fran?ais.
| | 01:14 | I apologize to all of the
French speakers out there.
| | 01:16 | I'm not sure how to put the
cedilla on the bottom of the C.
| | 01:20 | My URL Language Code is typically fr.
| | 01:22 | There are some international standards
for these that I encourage you to follow,
| | 01:26 | and the Image Prefix will also be fr.
| | 01:29 | The Language Tag will be fr-FR.
| | 01:33 | The Language Tag is constructed
to show the language,
| | 01:36 | followed by the country,
the localization code.
| | 01:39 | So in the case of French, we're
speaking French which is the lowercase fr,
| | 01:44 | from France which is the capital FR.
| | 01:46 | You find other language codes
for Canadian French for example.
| | 01:49 | There would be a different code for
that, and you can look those up online.
| | 01:53 | Note also over here on the side that
we have the option of assigning a
| | 01:57 | Custom Site Name to French content.
| | 02:00 | So the Web site Title right now is SAMOCA
(San Angelico Museum of Contemporary Art).
| | 02:07 | If I wanted to translate that to French,
I could certainly do that and I could
| | 02:11 | type that in, the French equivalent
of that here as the Custom Site Name.
| | 02:15 | That's what the purpose of this is.
| | 02:17 | So go ahead and hit Save & Close, and now
when I go to Content > Article Manager
| | 02:23 | and I take a look at my About Us article,
| | 02:26 | I do now have the option of assigning
my Language to either English or French,
| | 02:31 | which was the purpose of this whole exercise.
| | 02:34 | It's not just sufficient to install
the language packs for French;
| | 02:37 | you also need to create the type of
content available, so that it shows up in
| | 02:40 | the drop-down and in the next video,
we'll start doing some work with assigning
| | 02:44 | our articles and our menu items and
our categories to specific languages.
| | Collapse this transcript |
| Adjusting category structures for multiple languages| 00:00 | In order to construct a Web
site in multiple languages
| | 00:06 | in a way that page not found
errors are not produced,
| | 00:08 | you need to structure
it in a certain way.
| | 00:10 | Way back at the beginning of this course,
where I started to talk about the CAM,
| | 00:15 | the Categories, Articles and Menus,
| | 00:16 | I talked about category structure
roughly corresponding to the site map.
| | 00:19 | When you work with more than one
language on a Web site, this is a situation
| | 00:24 | where the categories will be slightly
different than your site map.
| | 00:28 | What you would like to do is to start with some
top-level categories that are for each language.
| | 00:34 | So we should have a top-level English
category and a top-level French category,
| | 00:38 | and then underneath those we'll have all
of the categories that we've just created,
| | 00:42 | for example for the English
side of the Web site.
| | 00:45 | We can put those all as
children of that main English category.
| | 00:49 | And then for the French category we'll
start to create categories for that as well.
| | 00:53 | So what I'm going to do now is I'm going
to go into my Category Manager,
| | 00:58 | and I' going to create two new categories.
| | 00:59 | So I'm going to click my New button and
I'm going to create one called English,
| | 01:05 | and the Language for that category will
be English and I'm going to say Save & New,
| | 01:11 | and my next category will be
French, and the language for
| | 01:15 |
that category will be French, and I'm
going to go ahead and say Save & Close.
| | 01:22 | And you'll see that down here at the
bottom I now have two categories here,
| | 01:25 | the English category
and the French category.
| | 01:28 | All of the other categories here
are assigning a language of All,
| | 01:31 | which is Joomla's default.
| | 01:33 | It assigns the language of
All to all the other categories.
| | 01:35 | What I need to do now is take all of these
categories, that have a language of all,
| | 01:40 | and I need to assign them a language
of English, because we're going to
| | 01:44 | differentiate between
English content and French content.
| | 01:48 | So to do that, I'm going to just go ahead
and check off all of these categories,
| | 01:52 | and I'm going to do two things.
| | 01:54 | First of all, down here at the very
bottom of the screen, there are some
| | 01:58 | Batch processing items that
you can do here in Joomla!
| | 02:01 | Rather than going into each one of these
categories and resetting the language
| | 02:05 | and so forth, we can go ahead and set all that
stuff in one fell swoop, its beautiful thing.
| | 02:12 | So I'd like to change the Language
here from All, to English (UK).
| | 02:16 | So all I need to do is say do it and you'll
see that now all of my categories are
| | 02:23 | assigned to English, which is great.
| | 02:25 | The next thing I need to do is I need
to move all of these categories,
| | 02:29 |
to go under the English category.
| | 02:31 | So to do that, I'm going to check
all of these off one more time
| | 02:36 | and I'm going to move these
now to be children of English.
| | 02:39 | So we Select the Category for Move/Copy,
that category is English,
| | 02:43 | make sure Move is selected
not Copy and then say Process,
| | 02:48 | and you'll see now that all of our
categories have been moved under English.
| | 02:52 | Unfortunately in the process
of doing this Move,
| | 02:55 | the structure of those
categories is somewhat destroyed.
| | 02:59 | So we're going to need to go
through each one of these
| | 03:01 | and reset the correct Parent
for each one of these.
| | 03:04 | Uncategorized, About, News & Events are all in
the correct place here and are under English.
| | 03:09 | But News & Events, the individual items
for News & Events, need to be children of
| | 03:14 |
News & Events, and the Visiting
Exhibits and Permanent Collections,
| | 03:18 |
need to be children of Collections.
| | 03:19 | So I need to go ahead and adjust those now.
| | 03:22 | Let me go into News and I'm going to change
its Parent to News & Events, Save and Close.
| | 03:29 | I'm going to click on Events, change
its Parent to News & Events, Save and Close,
| | 03:37 | and then down here under Visiting Exhibits,
I'll change its Parent to Collections,
| | 03:43 |
Save and Close,
| | 03:47 | And Permanent Collections, I'll change
its Parent to Collections, Save and Close.
| | 03:55 | Now we had to go through this step of
rearranging our Categories and changing
| | 03:58 | our structure here because we
originally just built this Web site
| | 04:02 | the way that you would just build a single
language Web site and now we're somewhat
| | 04:05 | retrofitting it for multiple languages.
| | 04:08 | So we're going through some extra steps here.
| | 04:11 | If you knew from the beginning that
you are going to be building a Web site in
| | 04:13 | more than one language, you would
certainly put in these categories for English
| | 04:17 | and French right from the beginning, and
then you would go through and add these
| | 04:22 | categories as children of
those languages to start with.
| | 04:25 | The other thing I'm going to do while I'm
here, now that we've adjusted our categories,
| | 04:28 |
is to adjust our articles, to
make sure that they are all
| | 04:31 |
assigned the English language as well.
| | 04:33 | So to do that I'm going to
switchover to Articles,
| | 04:36 | which is right here,
in our secondary navigation.
| | 04:39 | All of the articles on this Web site
currently are all English articles.
| | 04:43 | I'm going to go ahead and
check off all of these articles.
| | 04:46 | Just by clicking the single
checkmark up here on the top,
| | 04:49 | it'll check all of the things underneath.
| | 04:51 | Scrolling down to the bottom of the
page and say Set Language as English
| | 04:56 | and then go ahead and say Process.
| | 04:58 | And now all of our articles are set to English.
| | 05:01 | So we're all set to go there.
| | 05:02 | In the next video we'll go ahead and start
creating some of our French content.
| | Collapse this transcript |
| Creating French language categories and articles| 00:00 | Now that we have created a new structure
in our categories for our two languages,
| | 00:05 | the English and the French structures,
and we've assigned all of our existing
| | 00:09 | articles to the English language, it's time
to add some French content to our Web site.
| | 00:14 | In your Exercise Files, you will find
four documents, and one of these is a list
| | 00:20 | of all of the French categories that
we're going to create for the Web site.
| | 00:24 | I'm not translating the
entire Web site into French;
| | 00:27 | I'm just going to do a couple of pages,
and that happens to be the About Us page
| | 00:31 | and the Collections page.
| | 00:34 | And of course under Collections,
we have two additional categories,
| | 00:37 | the Visiting Exhibits and
the Permanent Collections.
| | 00:41 | So these are the names of the categories
in French that we need to create.
| | 00:46 | Once we've done these, we'll go
ahead and create some articles as well.
| | 00:49 | So to create the categories, we need
to go to the Category Manager,
| | 00:53 | and the process is exactly the same
creating these articles for French
| | 00:57 | as it was when we created all of our
categories originally in English.
| | 01:00 | We're going to click the New button
up here on the top of the page,
| | 01:06 | and I'm going to copy a title.
Ctrl+C or Command+C to copy.
| | 01:11 | Ctrl+V or Command+V to paste. We'll
set the Parent to be the French category,
| | 01:17 | and make sure you set your
Language to French. Click Save & New.
| | 01:20 | And our next category is Collections,
probably not pronounced that way in French.
| | 01:28 | Go ahead and put that in as the Title.
| | 01:31 | The Parent is the French category
and the Language will be French.
| | 01:35 | Go ahead and say Save & New one more time.
| | 01:39 | Our next category is this one.
Ctrl+C or Command+C to copy,
| | 01:45 | Ctrl+V or Command+V to paste.
| | 01:47 | Our Language again is French and the
Parent is Collections. Say Save & New.
| | 01:55 | And for our last category, go
ahead and highlight the text,
| | 02:00 | Ctrl+C or Command+C to copy,
Ctrl+V or Command+V to paste.
| | 02:04 | The Parent will be Collections
again, the Language is French,
| | 02:09 | and go ahead and say Save & Close.
| | 02:12 | So now you should have your
English categories on the top,
| | 02:16 | you should have your French
categories down here in the bottom.
| | 02:18 | The reason French is on the bottom is
that E comes before F in the alphabet,
| | 02:22 | and we are looking at
these in that following way.
| | 02:25 | So in the language column you should see
all of your articles are assigned a language.
| | 02:29 | It should be either English or French.
| | 02:31 | If you have articles that are not
assigned a language or it says All,
| | 02:34 | you need to go on in there and make sure
that each of these categories belongs to
| | 02:38 | either English or French.
| | 02:41 | Okay, now we're ready to
put in our French articles.
| | 02:44 | So I'm going to switch over
to my Articles tab here, or
| | 02:47 | you can go to Content > Article Manager, and
I'm going to start creating some articles here.
| | 02:53 | Let me go into the
French categories document
| | 02:56 | and I'm going to close that
because we're done with it.
| | 02:57 | While I'm here, the copy for the
English About Us article got revised
| | 03:04 | and the feeling was the phrasing of the
English article was a little bit awkward
| | 03:07 | for translating into French, so we've
changed some of the wording here.
| | 03:10 | So I'm going to go ahead and revise my
About Us article, I'm going to go ahead
| | 03:14 | and highlight all the text here, Ctrl+C
or Command+C to copy,
| | 03:19 | and then I'm going to go into my About Us
article, the English one right here,
| | 03:22 | I'm going to leave the image in place,
scrolling down here to starting with
| | 03:27 | Celebrating the Best of Modern Art,
and I'm going to remove the text that's
| | 03:32 | there and then paste in this new text.
| | 03:34 | Of course I'm going to have to go
through and put in the formatting again,
| | 03:39 | Celebrating the Best of
Modern Art should be an h2.
| | 03:43 | We have a paragraph of information.
| | 03:45 | Then we have An Introduction;
| | 03:50 | that should also be an h2. Alright.
| | 03:55 | So that's all set; go ahead and
say Save & Close for that one,
| | 03:59 | and now we're ready to go ahead
and create our French content.
| | 04:02 | Again, it's just exactly
the same as we've done before.
| | 04:05 | Go ahead and click the New button, and I'm
going to start with my French About Us content.
| | 04:09 | I've tried to put this in for you.
| | 04:12 | If you don't know any French at all,
| | 04:13 | hopefully you'll still be
able to follow along here.
| | 04:16 | I've given you the Category to assign it, the
Title of the article, and then the Article Body.
| | 04:21 | So we'll start with the Title.
| | 04:22 | I'm going to go ahead and copy that
title, put it on into the Title spot here.
| | 04:27 | The Category will be French, and
actually it will be this one here,
| | 04:33 | Qui sommes-nous, which is the About Us article
or the About Us category I should say.
| | 04:39 | We'll switch the Language over to French
and then we'll go ahead and copy in
| | 04:45 | the content here for
the Article Body, copy that.
| | 04:51 | We can put in the picture as well; all we
have to do is click on the Image button
| | 04:55 | and we can select the About Us
image here, that's the samoca_bldg.
| | 05:01 | And if you have a translation available for
an alt tag, you could certainly put that in.
| | 05:06 | I'm just going to put in samoca.
| | 05:09 | and I'll go ahead and say Insert.
| | 05:11 | And then after the samoca picture,
we can paste in our French content.
| | 05:17 | Once again, there's two subheads in
this article that we need to format.
| | 05:20 | So I'm going to go ahead and format those
as h2s and then the second one here.
| | 05:27 | Alright, so that article is in place,
we'll go ahead and say Save & New
| | 05:36 | and our next article has
to do with the volunteers.
| | 05:40 | So that is the title
right there, Benevole,
| | 05:46 | and the Category will be Qui sommes-nous,
the Language is French.
| | 05:52 | I apologize to all the French people out
there if I'm pronouncing things incorrectly.
| | 05:58 | I last had French in high school.
| | 06:01 | Go ahead and highlight the text here
on the page for the Article Body,
| | 06:06 | go ahead and paste that on in.
| | 06:09 | And you could certainly add the
picture to this as well if you wish;
| | 06:12 | we did have a volunteer picture.
| | 06:14 | If you don't remember which one it
was, if we go to the About page on the
| | 06:17 | front-end of the Web site and Volunteer With
Us, so it's the picture that looks like this.
| | 06:21 | We can certainly put that in
place here inside of our article.
| | 06:25 | Click on the Image button and
we'll scroll on down here,
| | 06:29 | it's called volunteer.jpg, and I'm going
to jump back into my About Us content here
| | 06:39 | and just take this word volunteer, and put
that in as our alternate text and say Insert.
| | 06:49 | So now you have your
Volunteer article all set.
| | 06:54 | Always double-check to make sure
you've assigned the correct Category
| | 06:57 | and the Language is set to French.
| | 06:59 | Now we can go ahead and say Save & New.
| | 07:02 | We're done with the About Us content and we're
going to move on to the Collections content.
| | 07:05 | Now that you've seen me do this for two
articles, I'm going to go through and
| | 07:08 | create the four articles that are associated
with the Collections part of the Web site.
| | 07:14 | Do this yourself right now
and then we'll be right back.
| | 07:24 | Okay, so I have gone ahead and successfully put
in all of the content here for the Web site,
| | 07:29 | and if you take a look, we now have our
article manager that has a mix of articles;
| | 07:33 | some are in English, some are in French.
| | 07:35 | It may get confusing for how you can
filter these so that you can see them.
| | 07:40 | There is a dropdown up here at the top
of the Article Manager that will allow
| | 07:44 | you to switch between All, the language
of All, which is nothing, which is good.
| | 07:48 | It's always good to check that to
make sure you've assigned all of your
| | 07:51 | articles to a language.
| | 07:53 | You can look and see just your
English articles,
| | 07:55 | so there's just your English articles,
| | 07:57 | and you can switch this to French and
you can see just your French articles.
| | 08:02 | So there they are. Alright!
| | 08:05 | Now that we've got all of our articles
into the system, we know from the CAM,
| | 08:08 | Categories, Articles, and Menus,
the next thing up is Menus,
| | 08:12 | and that's what I'm going
to cover in the next video.
| | Collapse this transcript |
| Creating the English menu and a universal homepage| 00:00 | Now that we've created categories
for both of our languages
| | 00:03 | and articles for both of our languages,
| | 00:05 | it's time to take a look at the menu
structure for both of our languages.
| | 00:09 | In this video, I'm going to deal
with the English side of things,
| | 00:11 | and in the next video, we'll deal
with the French side of things.
| | 00:15 | So I'm going to start by taking a
look at our current menu structure.
| | 00:18 | So right now we have two
menus for this Web site;
| | 00:22 | a Main menu and a Footer menu, and
I'm going to tell you right away
| | 00:25 | I'm going to ignore the Footer menu for now.
| | 00:27 | You would follow the same procedures
that I'm going to follow for the Main menu.
| | 00:31 | You could do the same exact treatment for the
Footer menu on the French side of things as well.
| | 00:35 | I'm just going to ignore it
because I'm just going to show you
| | 00:38 | with the one Main Menu for right now.
| | 00:40 | So what we need do is we
need to create two new menus.
| | 00:44 | We need to create an English-only menu
and we need to create a French-only menu.
| | 00:48 | What's left over, that exists already, the
Main menu, is going to house a home page
| | 00:53 | that will be considered to have all languages.
| | 00:56 | This will be the page that people arrive
on before they necessarily choose one of
| | 01:00 | the two languages for the Web site, and this
is the way Joomla! sets things up by default.
| | 01:05 | So the first thing we need
to do is create two new menus.
| | 01:08 | So to create new menus, we're
going to go to Menus > Menu Manager,
| | 01:12 | and I'm going to create a new
menu by clicking on the New button.
| | 01:16 | So I'm going to call this the English
Menu, a Menu type of englishmenu,
| | 01:21 | all one word, hit Save & New, and
then I'm going to make the French Menu.
| | 01:26 | French Menu, and frenchmenu,
all one word, and Save & Close.
| | 01:34 | So you'll see now that we
have two new menus down here;
| | 01:36 | the English Menu and the French Menu.
| | 01:38 | No modules assigned yet; I'll
cover those in a separate video.
| | 01:41 | Now I'm going to go into my Main Menu
and take a look at my content there.
| | 01:46 | So I can click on that by going to the
Main Menu and what I'm going to do is
| | 01:51 | I'm going to select all of the content for
the Main Menu except for the Home page,
| | 01:56 |
deselecting the Home page.
| | 01:58 | And down at the bottom of the
screen in the batch processing part,
| | 02:03 | I'm going to first of all assign
all of these to the English language.
| | 02:06 | So we'll set the Language
to English and say Process,
| | 02:12 | and so now you'll see that the Home
page is still set to the Language of All,
| | 02:14 | but all of the menu items underneath
are set to English as their language.
| | 02:20 | Once again, I'm going to select all of
my items, unselecting the Home page, and
| | 02:25 | then I'm going to move these, so make
sure the Move button is selected here and
| | 02:30 | I'm going to move these to the English menu.
| | 02:33 | I'm going to pick Add to this menu and I'm
going to go ahead and click the Process button.
| | 02:38 | So what's left now on the Main Menu is
just one item, just this Home page, and
| | 02:44 | that's all that should be left on the Main Menu.
| | 02:46 | Last of all, I'm going to make
a copy of the Home page item
| | 02:49 | and I'm going to copy that
over to the English site.
| | 02:53 | The reason I'm copying it is because
that Home page that exists right now,
| | 02:58 | is actually laid out exactly as I want for
the English site, and I am just going to
| | 03:03 | copy it over and work with it from there.
| | 03:06 | So I'm going to select Copy from my
batch processing down here and I'm going
| | 03:12 | to select to copy to the
English menu and say Process.
| | 03:17 | The Home menu item itself stays here on the Main
menu, as you can see, with the Language of All.
| | 03:22 | Now I'm going to switch over to my English menu,
and you'll see all of my English menu items,
| | 03:27 |
unfortunately once again, they have had their
structure disrupted in the course of moving these
| | 03:33 | and I'm going to have to reset which are
the children and which are the parents.
| | 03:36 | And down here on the
bottom, I have my Home page.
| | 03:39 | So I'm going to start
here with the Home page
| | 03:41 | because there's a couple of
adjustments I need to make to it.
| | 03:43 | I'm going to click on the Home page item,
I'm going to change the name from Home-2
| | 03:48 | to just Home, I'm going to change
the Language here to English,
| | 03:54 | and then I'm actually going
to set the Default Page to Yes.
| | 03:59 | This is potentially a little confusing.
| | 04:01 | To this point I've said that there's only
one default page for the entire Web site
| | 04:04 | and that would be your Home
page for the entire Web site.
| | 04:07 | That's the start item, that's the
home item, that's located on Main menu.
| | 04:11 | But now that we're working in multiple
languages, we will actually have a
| | 04:16 | Home page for English and we will have a Home
page for French as well, or a default page,
| | 04:20 | and the way you set that up is
within the language of English,
| | 04:24 | there can be one default page and
this is going to be our default page.
| | 04:28 | So I've selected Yes
from this menu as well.
| | 04:31 | Finally, I really want this
all the way up at the top.
| | 04:33 | So under Ordering, I'm going to select
this as my First item on the list, and
| | 04:38 | then I'm going to click Save & Close.
| | 04:40 | Now when I go back here to my Menu Manager,
you will see that our Home page is listed
| | 04:44 |
first, the Language is English, and I
have an icon available designating this
| | 04:51 |
as my English Home page, which you can tell
by the British flag that's displaying here.
| | 04:56 | Okay, so the next thing I need to do is go
through the rest of the items here in this
| | 05:00 | list and reset these to the correct
nesting level as children within the menu.
| | 05:06 | So I'll do the first one here for you and
then I think you'll rejoin me in a few minutes.
| | 05:12 | So I'm going to go into Volunteer With Us
and I'm going to change its Parent Item
| | 05:16 | from the Menu Root to About
and say Save & Close.
| | 05:21 | Then I'll go into Our Director, which is
also supposed to be a child of About, and
| | 05:25 | I will change its Parent Item from the
Root Level to About, and say Save & Close.
| | 05:34 | Then I will go into the
individual News & Events items.
| | 05:37 | They should be children of
News & Events, this item here.
| | 05:40 | Visiting Collections and Permanent Collections
should be children of Collections,
| | 05:43 | and Directions should be a child of Contact Us.
| | 05:46 | So those are all the additional
changes that I need to make,
| | 05:49 | and I'll see you in just a minute or two.
| | 05:53 | So if you're all done rearranging your menus,
| | 05:56 | you should see something very
similar to this for the structure.
| | 05:59 | This is exactly the structure that we
had before when all of these menu items
| | 06:03 | were located on the Main menu.
| | 06:05 | Since then we have set their
language to all these items to English.
| | 06:09 | We made a copy of the existing Home page
and we set that to the English Home page
| | 06:14 | for the Web site, and we've restructured
the navigation here accordingly.
| | 06:19 | Once again, the reason why we had to go
through this process of redoing the structure
| | 06:25 |
here on this menu was we originally built
this Web site without two languages in mind,
| | 06:29 |
and so we're retrofitting things to some extent
| | 06:32 | by rearranging menu items and
rearranging categories and things.
| | 06:36 | If you start a Web site from the beginning where
you know it's going to be in multiple languages,
| | 06:41 |
you would use the structures that I'm
demonstrating over the course of this chapter
| | 06:45 |
and you wouldn't have to go through,
and redo structures and so forth.
| | 06:48 | It would be a relatively simple
process from the beginning
| | 06:52 | to build out these sites accordingly.
| | 06:54 | So rest assured that this is not
normally part of the process of creating
| | 06:58 | a multi-language Web site in Joomla!;
| | 07:00 | this is something we're going
back and doing after the fact.
| | Collapse this transcript |
| Creating the French menu| 00:00 | Now that we have got the
English menu taken care of
| | 00:03 |
and we have our Universal Language
All Home page on its own menu,
| | 00:07 | it's time to go ahead and create the French
Menu with links to all of the French content.
| | 00:12 | To do that, in your Exercise Files you will
find a document called French menu items
| | 00:17 | that has a list of all of the
menu items that we need to create.
| | 00:21 | I've put the English translations
next to it in parentheses;
| | 00:24 | you don't have to include
those in your menu items.
| | 00:27 | But we'll go ahead and set
this up as the Home page.
| | 00:31 | One thing that I didn't do when I put
all of the content into my Article Manager
| | 00:36 | for French, I did not assign any of
these articles as featured items.
| | 00:40 | So I'd like to go ahead and do that
very quickly, and then we'll go ahead
| | 00:45 | and create our Home page for the site
and all the subsequent pages for this
| | 00:48 | French portion of the Web site.
| | 00:50 | So I'm going to go to the Article
Manager and I'm going to look at just
| | 00:55 | my French articles, which I can filter
using this Language dropdown showing
| | 00:58 | just the French articles.
| | 01:00 | And the two articles that I'd like to
show on the Home page will be one about
| | 01:03 | Siobhan Westhoff, which I can click
on the Featured item here for,
| | 01:07 | and Paul Shellmont, so I'll click on
the Featured item for that as well.
| | 01:12 | Okay, so now I'm going to go to
Menus > French Menu > Add New Menu Item
| | 01:18 | and we'll start by creating the home page.
| | 01:20 | So I'm going to click the Select
button to make a new menu link
| | 01:23 | and I'm going to make a
list of Featured Articles
| | 01:25 | and it should show the two items I
just featured from the Article Manager.
| | 01:29 | So I'm going to choose Featured items,
and my Menu Title will be right here.
| | 01:35 | Ctrl+C or Command+C to copy, Ctrl+V or
Command+V to paste,
| | 01:40 | and it's going to ask me which
categories I'd like to show.
| | 01:43 | I can go in down here to French and
select all of the French content here,
| | 01:48 | because of course this is going to
be going on the French Home page.
| | 01:51 | Over on the left side of the screen, make
sure that the Language is set to French.
| | 01:57 | We can also enter our numbers here for
Leading Articles, which should be zero,
| | 02:01 | 20 Intro Articles, 1 Column, no Links, and we
should be able to go ahead and hit Save & New.
| | 02:11 | Our next item is the About page, so we'll go
ahead and pick our text here for the About page.
| | 02:17 | This is just going to be a link to a single
article, so we'll go ahead and hit on Select,
| | 02:21 |
and we'll go to Single Article,
we'll give this a title,
| | 02:27 | and we can choose our article
over here from the side.
| | 02:30 | Once again here in the dropdown, I can
switch this to just my French Articles.
| | 02:35 | And I'm looking for this one right here.
| | 02:39 | Make sure that you set your language to
French, and go ahead and say Save & New.
| | 02:45 | The next article is the Volunteer
article, once again a Single Article.
| | 02:49 | We'll go ahead and copy the Menu Item
Title for that, copy that, paste that in.
| | 02:57 | Make sure that we set our Parent
Item to be the About Us page and
| | 03:03 | we'll want to make sure that our Language is set
to French and we'll select our article from list.
| | 03:10 | Go ahead and say Save & New.
| | 03:13 | Our next one is the Collections
page, and the Collections page,
| | 03:16 | the top-level page is just
linked to a single article.
| | 03:19 | So we're going to go ahead and pick Single
Article from the list and we'll go ahead
| | 03:24 | and pick Collections will be the title and
once again make sure French is the language.
| | 03:32 | Over here on the right side of the screen,
we're going to pick the very first article
| | 03:37 | here as that content for that
page; go ahead and say Save & New.
| | 03:43 | The next two items were category blogs.
| | 03:46 | And so to create that, we'll go
ahead and hit the Select button,
| | 03:49 | and we'll pick Category Blog from
the list and we'll give this a Title.
| | 03:54 | This will be our Visiting Exhibits,
Ctrl+C to copy, Ctrl+V to paste.
| | 04:01 | And we're going to assign this a
Language of French, and we'll make sure that
| | 04:05 | the Parent Item is Collections, and
we're going to choose a Category
| | 04:10 | and the category we're going to
choose is this one right here;
| | 04:15 | Blog Layout Options, make sure
there are no Leading Articles,
| | 04:19 | 20 Introductory Articles,
1 Column, no Links.
| | 04:26 | Go ahead and say Save & New.
| | 04:29 | Our Permanent Collections
article was a Single Article,
| | 04:32 | so go ahead and choose that from the list.
| | 04:36 | Copy and paste its title, Ctrl+C or Command+C
to copy, Ctrl+V or Command+V to paste.
| | 04:42 | The Parent Item will be Collections.
| | 04:48 | Make sure you pick French as the Language
and select your article from the list.
| | 04:54 | And now go ahead and say Save & Close.
| | 04:57 | This is looking at our English menu now.
| | 04:59 | If I switch over to the French Menu
here in the dropdown on the top,
| | 05:03 | you'll see that we have our homepage, here's
our About page and the Volunteer page,
| | 05:07 | the Collections page, and the
two sub pages that go there.
| | 05:10 | We need to set our French Home
page, which I can set over here,
| | 05:13 | clicking on the Star and we
should see a French Flag appear.
| | 05:17 | Notice also in the dropdowns that this will
tell us exactly about all of our menus.
| | 05:22 | Our Main Menu contains the default item
for the whole Web site, that Main Home page.
| | 05:26 | We also have our separate English
Menu and our separate French Menu.
| | 05:30 | So we are in good shape here with our menus.
| | 05:33 | And the next thing we need to worry about
is how we're going to display these menus
| | 05:37 | on the front-end of our Web
site, which we do through modules
| | 05:40 | and I'll cover that in the next video.
| | Collapse this transcript |
| Changing the menu modules on the site| 00:00 | Now that we have all of the menus
configured for our website, in both English
| | 00:04 | and French, now it's time to create the
menu modules to display these on the website.
| | 00:08 | So to do that, we're going to start by
going to Extensions > Module Manager and
| | 00:13 | inside of here, remember we actually
have two modules currently displaying the
| | 00:19 | main menu on our website.
| | 00:20 | There is the Main Menu module in
position-1 that goes across the top of the
| | 00:24 | page, and there is the Left Menu
module which is in position-7 which is the
| | 00:29 | sub-navigation that shows up
on the left side of the page.
| | 00:32 | We're going to need to adjust
these for English and French.
| | 00:35 | So to do that, I am going to start by
putting a checkmark next to our Main Menu
| | 00:39 | module and I am going to duplicate it.
| | 00:42 | Duplicating it means that I just made
a copy of all of its settings, which for
| | 00:46 | the most part are correct. I am just
going to need to tweak a few things.
| | 00:49 | So I am going to put a check next to Main
Menu again and duplicate it one more time.
| | 00:54 | So now I have two
duplicates made of the Main Menu.
| | 00:56 | Mine showed up on top of Main Menu;
yours may show up on the bottom.
| | 01:00 | Don't panic; it's totally fine.
| | 01:02 | And for Main Menu itself, the
original item, I'm going to unpublish it by
| | 01:06 | clicking on the green check.
| | 01:07 | You'll see that it turns into a little red blob.
| | 01:11 | The two Main Menu items that
are left here I'm going to edit.
| | 01:14 | So I am going to click on one of them and I
am going to change the name to English Menu.
| | 01:19 | It stays and stands in position-1 and
the language I am going to set to English.
| | 01:24 | Over on the right side where it says
Select Menu Main Menu, I am going to change
| | 01:29 | this to the English Menu. And I am
going to go ahead and hit Save & Close.
| | 01:35 | And I need to publish that as well,
so I am going to go ahead and click the
| | 01:37 | green checkmark. There we go.
| | 01:40 | And then on the other Main Menu (2)
that's left, I am going to click on that,
| | 01:44 | and I am going to call this the French Menu,
and I am going to set its language to French.
| | 01:50 | I am going to make it published.
| | 01:53 | And for the Menu, obviously I am going
to select the French Menu and go ahead
| | 01:58 | and say Save & Close.
| | 01:59 | So now I have an English Menu and a
French Menu going across the top of the
| | 02:02 | page, and they are assigned the
languages of English and French.
| | 02:06 | Down here at the bottom of
the page, I have a Left Menu.
| | 02:09 | And now I am going to put a checkmark
next to that, and I am going to duplicate
| | 02:13 | that a couple of times.
| | 02:14 | So we're going to hit the Duplicate
button here and make one copy of it and
| | 02:20 | then once again put a checkmark next
to it and click the Duplicate button
| | 02:23 | to make a second copy.
| | 02:26 | And so now we have our Left Menu
and two copies. We can unpublish the
| | 02:31 | existing Left Menu.
| | 02:33 | For the Left Menus that are left here,
I am going to click on Left Menu (2) and
| | 02:38 | we'll change this to the English left menu.
| | 02:40 | I am going to make it Published, and I
am going to set the Language to English,
| | 02:46 | and I will have this
show up on the English Menu.
| | 02:49 | Go ahead and say Save & Close. And now
for the other Left Menu item, I am going
| | 02:55 | to change that. We'll make
this stuff French left menu.
| | 03:00 | It will be Published, it will be
French for its Language, and it will be
| | 03:04 | associated with the French Menu.
| | 03:06 | Go ahead and say Save & Close again.
| | 03:09 | So now we have our menu
modules all configured here.
| | 03:13 | You can see that we have them set
to English and French in both cases.
| | 03:17 | If I go to Menus > Menu Manager, you'll
see that my English Menu now has two
| | 03:22 | modules displaying it, and my French
Menu has two modules displaying it as well.
| | 03:27 | If I look at the front-end of the
website, I might see some funkiness here.
| | 03:31 | So you sort of see a bit of the
English Menu, you see something that sort of
| | 03:35 | turns into French here.
| | 03:36 | It's a little bit funky.
| | 03:38 | Don't worry about it yet. We still
have several more steps to configuring our
| | 03:42 | multi-language website, and so don't
be too concerned about how the front-end
| | 03:47 | is looking just yet.
| | 03:49 | It's coming along. We'll get there shortly.
| | Collapse this transcript |
| Creating French and English template styles| 00:00 | So far we've taken our categories, our
articles, our menus, our menu modules,
| | 00:05 | and we've converted these
all over to English and French.
| | 00:08 | One of the last things we need to
do to split this Web site into the
| | 00:11 | two languages, is to take a
look at our template as well.
| | 00:15 | Recall that on the Home page of our
Web site we have some words on here
| | 00:19 | that are in English, like the name
of the site and its tagline.
| | 00:22 | We may want to have French versions
of that as well, and it is possible to
| | 00:26 | use template styles to have our French version
of the template as well as the English version.
| | 00:31 | So we're going to go ahead and do that now.
| | 00:34 | Under Extensions > Template Manager,
you'll see that we currently have
| | 00:40 | two front-end templates that are in use;
| | 00:42 | the SAMOCA-default and
the SAMOCA-Volunteer page.
| | 00:45 | So what we're going to do is
we're going to make two copies of the
| | 00:48 | SAMOCA-default and we're going to
make two copies of the Volunteer page and
| | 00:52 | then we're going to set those copies one to
English and one to French, in both cases.
| | 00:56 | So we'll start with the SAMOCA-default.
| | 00:57 | I'll go ahead and put a checkmark next to
it and say Duplicate, and then I'm going to
| | 01:03 | repeat that process again; a checkmark
next to default and click Duplicate.
| | 01:07 | So we now have here for
our SAMOCA-default (2),
| | 01:11 | I'm going to change the name
to SAMOCA-English default,
| | 01:17 | and I'm going to set this to the
English default for the Web site,
| | 01:21 | and I'm going to go ahead and leave everything
else the same, because this is fine,
| | 01:26 | the translations are already in place
here for the site title and description.
| | 01:30 | Go ahead and say Save & Close.
| | 01:32 | And as we saw with the menus, you'll see
that the English default template style
| | 01:37 | also has an English flag here
inside of our Style Manager.
| | 01:40 | I'm going to go to my other copy,
SAMOCA-default (3) and I'm going to change
| | 01:45 | it to SAMOCA-French default, and I'm going
to set this as the default for the French site.
| | 01:54 | I also need to change my translation
over here on the right side of the screen.
| | 01:58 | I've given that to you as a
document here, French template styles.
| | 02:02 | So the Site Title, we can go ahead and
highlight, Ctrl+C or Command+C to Copy,
| | 02:07 | Ctrl+V or Command+V to Paste.
| | 02:09 | Then go ahead and copy the Tagline,
Ctrl+C or Command+C to Copy,
| | 02:17 | Ctrl+V or Command+V to Paste.
| | 02:20 | Okay, so that's all set, go
ahead and say Save & Close.
| | 02:24 | So now you see that we have default
pages for our English and our French,
| | 02:28 | as well as the overall
default for the language=all.
| | 02:32 | Now for the Volunteer page we're going
to have to do exactly the same thing.
| | 02:35 | I'm going to put a checkmark next
to the Volunteer page and Duplicate,
| | 02:39 | and then a checkmark again next to
the Volunteer page and Duplicate.
| | 02:44 | And so I'm going to go into the
template style for the Volunteer page
| | 02:49 | and change this to the
English Volunteer page.
| | 02:54 | I don't need to change anything else,
because this is already translated.
| | 02:57 | Go ahead and say Save & Close.
| | 03:00 | And then in my other copy of the
Volunteer page, I'm going to click on that,
| | 03:05 | and I'm going to change this
to the French Volunteer page,
| | 03:11 | and I'm going to change once again
the Site Title and the Site Description.
| | 03:16 | So my Site Title, once again, go ahead and
highlight this, Ctrl+C or Command+C to Copy,
| | 03:22 | Ctrl+V or Command+V to Paste and then
our Tagline for the Volunteer page
| | 03:29 | is this one here, Ctrl+C or Command+C to
Copy, and Ctrl+V or Command+V to Paste.
| | 03:35 | So there we go, and this should be
assigned to the Volunteer With Us
| | 03:40 | page on the French Menu;
so this one right here.
| | 03:43 | So now we can go ahead and say Save &
Close and you'll see that we have our
| | 03:49 | French Volunteer page is not
the default page for the site,
| | 03:52 | because nothing is
selected in the Default column.
| | 03:55 | That's totally okay, because we
have a French default template style,
| | 03:59 | it's specified up here.
| | 04:00 | Same for the English, although I forgot
to assign that to the Volunteer page.
| | 04:05 | So let me go back into the English Volunteer
page and I will assign that to the
| | 04:10 | Volunteer With Us English
page. Save & Close.
| | 04:15 | And we still have the style left over
here for the generic Volunteer page
| | 04:19 | and nothing is assigned to it currently.
| | 04:21 | That was our original
Volunteer page template style.
| | 04:24 | I'm just going to leave that in place.
| | 04:25 | So you should in the
end have a default page,
| | 04:30 | which is ultimately the one
that will work with language=all,
| | 04:33 | your two Home pages
for English and French,
| | 04:35 | and you should have two English
and French Volunteer pages,
| | 04:38 | as well as a generic Volunteer
page with nothing assigned.
| | 04:41 | If your template styles look like mine,
| | 04:43 | then we're all set and we're ready
to move on to the next task.
| | Collapse this transcript |
| Creating the language switcher module| 00:00 | We've essentially got most of the
translation bits and parts all in place now.
| | 00:04 | We could continue on making copies of
modules and making sure they're all
| | 00:08 | translating all of the components and so forth.
| | 00:10 | But I think at this point you get the
idea of how fine-grained everything is
| | 00:14 | and how much language permeates your Web site,
| | 00:16 | how much work you have to do to make sure
that you have two good translations of your site.
| | 00:21 | So the next thing that we're going to
do is we're going to add the ability to
| | 00:25 | the Web site to switch
between French and English.
| | 00:27 | And that is done through a
Language Switcher module,
| | 00:30 | and that is available as part
of Core Joomla! which is great.
| | 00:34 | So to create the Language Switcher module,
| | 00:36 | I'm going to go to Extensions > Module
Manager and I'm going to make a new module.
| | 00:41 | So I'm going to click the New button and
here on the list is the Language Switcher.
| | 00:46 | So I'm going to go ahead and
choose the Language Switcher.
| | 00:48 | I'll give it a Title of Language Switcher
and I'm going to go ahead and Show that
| | 00:54 | title, you certainly don't have to do that.
| | 00:57 | The Position on the page, I'm going to
select my beez-2.0 template
| | 01:01 | and I'm going to put it in position-7,
which is over on the left column.
| | 01:05 | You can make these language-specific,
if you wish.
| | 01:09 | You can set the language here to let's
say English, and you can enter some text
| | 01:13 | over here on the side that would say
choose your language, and then you could
| | 01:16 | make a second language switcher, and you
could have some different text that would
| | 01:20 | show up over here to say
the same thing in French.
| | 01:22 | I'm just going to leave
mine to Language of All.
| | 01:26 | Over here underneath, these are some of the styling
options that you have for the Language Switcher.
| | 01:32 | You could have a Dropdown where you
can toggle between the two languages
| | 01:35 | via just a drop-down type of menu,
| | 01:38 | or you can have some Flags. You could
have it Display horizontally or not,
| | 01:43 | and you have it display
the active Language or not.
| | 01:46 | I'm just going to leave all of this set to
default, just rest assured that it's all here,
| | 01:50 |
and go ahead and say Save & Close.
| | 01:53 | And now when I refresh the front end
of the Web site, our menus are still not
| | 01:57 | quite the way they're supposed to be; don't
panic, we're going to fix that in the next video.
| | 02:01 | But you'll see the Language Switcher is
over here on the left side of the page,
| | 02:06 | and I can switch over to French
and I can switch over to English
| | 02:10 | and at the moment there's
not a whole lot going on here.
| | 02:14 | But when we get to the next video, and
we turn on the plug-in that will enable
| | 02:19 | a lot of this stuff, you'll see that we're
going have a great functioning Web site.
| | 02:24 | But it just doesn't come
together until the very last video.
| | Collapse this transcript |
| Enabling the language filter system plug-in| 00:00 | As we saw in the last video, our Language
Switcher isn't exactly switching languages
| | 00:04 |
just yet, so this is the last
thing that we need to enable.
| | 00:08 | The Language Switcher relies on a
plug-in in order for it to work correctly,
| | 00:12 | and so we need to make sure
that that plug-in is enabled.
| | 00:14 | So if we switch back to
the back-end of Joomla!,
| | 00:17 | to enable the plug-in you have to
go to the Plug-in Manager, under
| | 00:20 | Extensions > Plug-in Manager, and if you
take a look at all the plug-ins that are here,
| | 00:25 | the easy way to find the Language Switcher
plug-in is to go to Select Type of System,
| | 00:32 |
and the Language Filter will show up on top.
| | 00:34 | If you go ahead and click on that, there
is one thing we're going to enable,
| | 00:37 | the Menu associations, and we're
going to publish it or Enable it.
| | 00:43 | Go ahead and say Save & Close and now when
you refresh the front-end of the Web site,
| | 00:48 |
what you should see happen is your menu will
suddenly resolve itself and it will think
| | 00:53 |
it's in English. So our navigation is back
and it looks like it's working correctly.
| | 00:58 | If I switch over to French by clicking
on the French Flag, you should see your
| | 01:03 | French content here on the homepage,
exactly as expected, and of course you
| | 01:08 | have a reduced menu relative to
what you have on the English site,
| | 01:12 | but you should have all of your French
content in place, your French sub-navigation
| | 01:16 | over here on the side, and the site should
generally be working exactly as the English site.
| | 01:23 | It looks like we might have a few
things in a different order here,
| | 01:27 | but you could tweak all of that back in,
your Joomla! articles and so forth.
| | 01:31 | You can change your order of things,
but in general it looks like all of our
| | 01:34 | French content is now working correctly
and we can easily switch back and forth
| | 01:38 | between English and French
using our Language Switcher.
| | Collapse this transcript |
| Configuring menu item associations| 00:00 | So we have a multilingual Web site
and if we stopped working on this now,
| | 00:04 | it would still be pretty darn cool.
| | 00:06 | I'm on the English part of the Web site.
If I go to the About page for example,
| | 00:10 | I could be here reading about the About page
and then decide I want to switch over to French.
| | 00:14 | If I click on the French flag, I do
in fact switch over to the French site,
| | 00:18 | but I go back to the Home
page of the French site.
| | 00:21 | Wouldn't it just be so cool if I was on the
About page on the English site and then
| | 00:26 | I switched the language, if it would switch
me over to the About page on the French site?
| | 00:31 | That would be pretty darn awesome.
| | 00:33 | Well, fortunately, starting in Joomla!
1.7, that is in fact possible.
| | 00:37 | So I'm going to show you
how to configure that now.
| | 00:40 | In the back-end of Joomla!,
go to Menus > English Menu.
| | 00:44 | And if you go to the About page,
over on the right side of the screen,
| | 00:50 | there's an item called Menu Item Associations.
| | 00:53 | If you click on that, this will tell you
| | 00:55 | a list of all of the languages
that are available on your site.
| | 00:58 | In our case, we only have
French as the other language,
| | 01:01 | but you can put in
other languages as well
| | 01:04 | and switch the association
from French to Qui sommes-nous.
| | 01:08 | Go ahead say Save & Close.
| | 01:11 | And I'm going to repeat this
process now for the Volunteer page,
| | 01:14 | I'm going to associate that with Benevole.
| | 01:18 | Again, I apologize for my French pronunciations.
| | 01:21 | Go to Collections and we're
going to associate this one
| | 01:26 | with the Collections page in French.
| | 01:27 | Go to our Visiting Exhibits page and
we're going to associate this one
| | 01:36 | with the Visiting Exhibits page in French.
| | 01:40 | Same for Permanent Collections.
| | 01:42 | We'll associate that with the
Permanent Collections page in French.
| | 01:47 | What you're going to see now here in
the Menu Manager is the fact that some
| | 01:51 | of these pages are in fact associated,
so you see that they're linked,
| | 01:54 | the little Link icon that
shows up in this column,
| | 01:57 | that's an indication that these English
pages have an association with a French page.
| | 02:02 | If we go to the French menu, you'll see
that all of those associations also exist.
| | 02:07 | We certainly could do it from
this direction if we associate
| | 02:09 | the French Home page with
the English Home page.
| | 02:17 | Now all of our French pages have
associations exactly as they should,
| | 02:22 | because the French menu is
a subset of our English menu.
| | 02:25 | Not all of the English menu items are
going to have an association because
| | 02:29 | we didn't translate all
of these pages for French.
| | 02:31 | Okay, so let's see how that
impacts the front-end of the Web site.
| | 02:35 | If I refresh the French Home page here
and I go over to the About Us page,
| | 02:40 | so now I'm looking at the page
of content here in About Us.
| | 02:43 | If I switch over to English, I go straight to
the About Us page in English. How cool is that!
| | 02:49 | When I go to the Collections page here,
I can switch back on over to the French
| | 02:53 | side of things and see the
French translation of that page.
| | 02:57 | This is an incredibly useful new feature with
multiple language Web sites here in Joomla!
| | 03:02 | It's well worth implementing this.
| | 03:04 | The key to making sure that all these
associations work is that when you go into
| | 03:09 | your plug-ins under Extensions > Plug-in
Manager, and if you take a look at your
| | 03:13 | Language Filter, I'm looking at my Plug-in
Manager with it filtered to showing me
| | 03:18 | all of the system plug-ins.
| | 03:20 | If you look at your Language Filter plug-in,
make sure that Menu associations is set to Yes.
| | 03:25 | If this is set to No, anytime you switch
between the French and English versions
| | 03:30 | of the site, you'll just go back to the
Home page, which is perfectly acceptable.
| | 03:34 | It's just slightly slicker,
in order to be able to switch
| | 03:37 | between the two pages that match.
| | Collapse this transcript |
| Exploring language overrides| 00:00 | The last thing I'd like to cover
in Joomla! in terms of languages,
| | 00:04 |
is the ability to change some of the
language strings that occur within Joomla!
| | 00:08 | Joomla! itself has some language files
that are available in the back-end.
| | 00:12 | You've always been able to go into the
language files and change some of the
| | 00:16 | information that's there so that the
page will read exactly as you wish it to.
| | 00:20 | But the problem was, if you ever ran an
upgrade on your Web site and language files
| | 00:24 | were affected by that upgrade, all of
your changes would be overwritten and lost.
| | 00:28 | So what happens instead now is that we have
the ability to do overrides for our languages.
| | 00:34 | And what the overrides will do is
save your changes independent of the
| | 00:39 | core functionality of Joomla!,
| | 00:40 | so that when you upgrade Joomla!, the
language files are not overwritten,
| | 00:44 | which is a really wonderful thing.
| | 00:45 | One of the things that happens when you
fill out a contact form on the Web site,
| | 00:48 |
and you fill in all the information
and you click the Submit button,
| | 00:51 | is that you'll get a message on the top of
the page that says Thank you for your message.
| | 00:55 | And I find that clients really want to
customize that message on the top of the
| | 00:59 | contact form page quite a bit.
| | 01:01 | You won't see that message when you're
running your Web site within XAMPP or WAMP
| | 01:07 | or MAMP, and the reason why is because those
particular systems are not configured to
| | 01:11 |
send an email; what you'll actually get
on the top of those pages in those cases
| | 01:15 |
are an error message about, they
couldn't launch the mail function.
| | 01:19 | That's because your local copy of Joomla!
is not configured to send email.
| | 01:23 | But if you run Joomla! on a server
and you fill out a contact form
| | 01:27 |
on a real web-hosting environment, you will
get that message that the email was sent.
| | 01:31 | So what if you want to customize that message?
| | 01:33 | It's actually very
straightforward and easy to do now.
| | 01:36 | So I'll show you how that's done.
| | 01:38 | We hop into the back-end of Joomla!, and
we go to Extensions > Language Manager.
| | 01:43 | The last tab that's available to us in
the Language Manager is the Overrides tab.
| | 01:48 | So if you click that, this will show
you a list of all of the overrides,
| | 01:51 | in this case on the English site.
| | 01:53 |
You can also pick the front-end or the back-end,
| | 01:56 |
so you can change language
in either environment,
| | 01:58 | either language that's appearing
in the front-end of the Web site,
| | 02:00 | or language that's appearing on the
administrator side of the Web site.
| | 02:04 | You can do this for the
English site or the French site.
| | 02:06 | What I'm interested in changing
is that message that comes up
| | 02:09 | on the contact form which
starts with Thank you.
| | 02:11 | So I'm not sure exactly where that message
is stored inside of the language strings.
| | 02:15 |
I don't know what the variable
name is that stores that string.
| | 02:19 | I have no idea of any of this
stuff, so how do I change it?
| | 02:22 | Well, you start by changing it by clicking
the New button up here in the upper right
| | 02:26 | and take a look at the
right-side of the screen.
| | 02:29 | So this tells you exactly how to do this.
| | 02:32 | If I'm interested in changing some text
somewhere, I can just type in the start of that.
| | 02:36 | So if I click here on the search box,
it's going to think for just a second,
| | 02:41 | and I type in the words thank you, tell me
what all the things are that I can change
| | 02:46 | that have a thank you somewhere in them.
| | 02:48 | And this searches through all of the
language strings that are on the Web site.
| | 02:52 | Remember, a string is just a grouping
of characters and letters and spaces.
| | 02:57 | Typically, it's a sentence or something,
and these are all strings that are available.
| | 03:01 | So the way that these are presented to
you, the very top part here where it says
| | 03:06 | COM_CONTACT_EMAIL_THANKS,
that's the name of a variable.
| | 03:11 | Think back to algebra, it's like X.
In this case, this is the variable that
| | 03:15 | controls the thank you
message for that contact form.
| | 03:19 | And the text that is associated with
that variable is "Thank you for your email."
| | 03:22 | So that is exactly what I want to change.
| | 03:25 | All I need to do now is just click on
that, and it fills in the information over
| | 03:29 | for me on the left side of the screen.
| | 03:32 | So now I can change this, instead of
saying, "Thank you for your email."
| | 03:36 | "We will get back to you within the
next business day," and if I say Save,
| | 03:45 |
that will in fact be saved, and when
I put this Web site up on a server,
| | 03:50 |
and I fill out the contact form, I will see
that full text displayed on the Web site,
| | 03:56 |
and you could put in any additional
text that you wish as part of this.
| | 04:00 | So this is a very powerful new
feature here in Joomla! 2.5,
| | 04:05 | the ability to have these language
overrides and to customize messages
| | 04:09 | within the front-end and
the back-end of Joomla!,
| | 04:12 | which means that all this text that
used to be rather difficult to get to
| | 04:16 | and finicky to maintain, is now
very straightforward and useful.
| | 04:20 | And so the language overrides, I encourage
you to take a look at them and start to
| | 04:24 | think about how you might change
some of your text in Joomla!
| | 04:27 | to give your users a better
experience and make your clients happy.
| | Collapse this transcript |
|
|
12. ACL EssentialsIntroduction to access control lists (ACL)| 00:00 | One of the big new features
released in Joomla! 1.6,
| | 00:03 | and which carries into Joomla! 2.5,
is ACL, or Access Control Lists.
| | 00:09 | ACL is all about who can see
different content on the Web site
| | 00:12 | as well as who can create and change
which content on the Web site.
| | 00:16 | You'll hear this frequently
referred to as permissions.
| | 00:19 | You can see permissions popping up in
operating systems like Linux and Windows,
| | 00:23 | as well as in software
systems in work environments.
| | 00:27 | ACL is a very complicated in-depth topic.
| | 00:30 | It's also very much beyond the scope
of this course, as it's very advanced.
| | 00:36 | In this course I'm going to focus on the
default ACL features with Joomla! 2.5.
| | 00:41 | If you would like to know more
about ACL, I encourage you to watch
| | 00:45 | Joomla! 1.7 and 2.5 Access
Control Lists in Depth.
| | 00:50 | There is nothing wrong with leaving
permissions exactly as they are,
| | 00:54 | which is what we'll do in this chapter.
| | 00:56 | For small Web sites, where you may
have one person or a handful of people
| | 01:01 | maintaining the Web site, it's likely
that you won't even need ACL at all.
| | 01:06 | If you're working on
a much larger Web site
| | 01:07 | where you have many contributors,
ACL may indeed be helpful.
| | 01:12 | Throughout Joomla! you'll see tabs and
various configuration screens for permissions.
| | 01:17 | This has to do with ACL.
| | 01:19 | I recommend that you stay away from
changing these screens until you have
| | 01:23 | a better understanding of what you're doing.
| | 01:25 | Remember, just because you
can doesn't mean you should.
| | 01:30 | For now, let's concentrate on understanding
| | 01:32 | ACL's default configuration
in the upcoming videos.
| | Collapse this transcript |
| Exploring Joomla's default user groups and permissions| 00:01 | By default, Joomla! comes preconfigured
with a series of user groups.
| | 00:05 | These are the same user groups that
were available to you in Joomla! 1.5.
| | 00:09 | Let's take a look at the different user
groups that you have to choose from and
| | 00:13 | the permissions associated with each of them.
| | 00:15 | So to get to the list of user groups that
are available on your Joomla! installation,
| | 00:20 |
you can go to Users > Groups.
| | 00:23 | And this is the screen that will tell
you all about the user groups that are
| | 00:26 | available to you on a specific
Joomla! 2.5 installation.
| | 00:30 | By default, in out-of-the-box
configuration from Joomla!,
| | 00:34 | there are eight different user groups to
choose from, and they include the following.
| | 00:40 | Public indicates that these are essentially
the people who are visiting the front-end
| | 00:44 |
of your Web site, who do not have a login
or any other way to get into your Web site.
| | 00:49 | They're just browsing the front-end of
the Web site and taking a look at content.
| | 00:52 | They're considered part of the Public group.
| | 00:55 | Registered users are those who can log
into the front-end of the Web site and
| | 01:00 | sometimes by logging into the
front end of the Web site,
| | 01:02 | they'll get to do some
kind of special function.
| | 01:06 | Typically, that involves viewing content
that might not be available to people
| | 01:09 | who are not logged in to the Web site,
but it may include some things
| | 01:13 | associated with third party extensions.
| | 01:15 | For example, maybe you need to be a
registered user before you can comment
| | 01:18 | on a blog or maybe you have to be a
registered user before you can post in a forum.
| | 01:22 | Authors are allowed to create
articles for the Web site.
| | 01:28 | They're not allowed to publish them,
they can't hook them up to menus,
| | 01:32 | but they can create articles for the Web site,
| | 01:35 | and they are not published
until somebody approves them.
| | 01:38 | Editors can create articles for the
Web site and they can edit any article
| | 01:43 | that exists on the Web site, but only
from the front-end of the Web site.
| | 01:46 | Publishers can create articles, edit any
article on the Web site, and publish or
| | 01:51 | unpublish articles, again, all from the
front-end of the Web site, logging in there.
| | 01:57 | Managers are where you can start
logging into the back-end of the Web site.
| | 02:00 | A manager can log into the back-end of the
Web site and will get many of the options
| | 02:04 | that you see growing across the top of the
page in the back-end administrator screen.
| | 02:09 | However, managers can't do anything
with users and they can't necessarily do
| | 02:14 | anything with modules or templates or so forth.
| | 02:17 | They can essentially create content, edit
content, publish and un-publish content,
| | 02:22 |
they can link things to menus, but
they can't change a template for example.
| | 02:28 | An Administrator is a group that can do
almost anything on the Web site with the
| | 02:33 | exception of changing some of
the option configuration screens.
| | 02:37 | And what I mean by that are icons like this in
the upper right-hand corner that say Options.
| | 02:41 | Those are generally only
available to super administrators.
| | 02:44 | Generally speaking, administrators do not have
access to those unless they've been given it.
| | 02:48 | And finally, the Super Users are of the same
group as Super Administrators in Joomla! 1.5,
| | 02:55 | and Super Users can do anything
on the back-end of the Web site.
| | 02:59 | So these are the groups that you have
available to you and a brief summary of
| | 03:03 | what they can do and what they cannot do.
| | 03:06 | You are welcome to use any of Joomla!'s default
user groups when you create new users for
| | 03:11 |
your Web site which is what we'll do
in our next video, or you can ignore
| | 03:14 |
all of Joomla!'s default user groups and
create your own user groups from scratch.
| | 03:18 | If you're interested in doing that
and creating some new user groups,
| | 03:21 | then do take a look at my ACL videos
that are available here at Lynda.com
| | 03:25 | and I'll walk you through
the process of doing that.
| | Collapse this transcript |
| Creating a user| 00:00 | Now that you're familiar with the user
groups, let's go ahead and create a new
| | 00:03 | user for our website.
| | 00:05 | What I'd like to do is I'd like to
create some content for the front-end of the
| | 00:09 | website that will be
available only to our volunteers.
| | 00:13 | So when somebody logs into the front-
end of the website, they'll be able to
| | 00:16 | see a piece of information that's just
for volunteers and you have to use the
| | 00:21 | login in order to see it.
| | 00:22 | So I'm going to create a new user.
And creating new users is so simple,
| | 00:27 | I don't understand why
people do this all the time.
| | 00:29 | I have people who call me up and ask me
to take a look a look at their Joomla!
| | 00:32 | sites and they send me a login
that's usually the login that they use to
| | 00:36 | access the website.
| | 00:37 | And fortunately, I'm an honest person
and so that works out just fine, but not
| | 00:42 | everybody is as nice and honest as I am.
| | 00:44 | If you're going to share a login to
your website--you're looking at a new
| | 00:48 | developer for example--you should
really create a brand-new user account for
| | 00:52 | them so that they can see your website
and then when they're done with it, you
| | 00:56 | can delete that user login.
| | 00:59 | It's a much better way to go than
giving people access to your own user account,
| | 01:03 | and it's just so simple.
| | 01:05 | So I'm going to go to Users > User Manager >
Add New Users, and I'm going to enter a
| | 01:11 | name of Volunteer, a login name of
volunteer, a password of volunteer,
| | 01:19 | volunteer, and an e-mail
of volunteer@samoca.org.
| | 01:28 | Down at the bottom of the screen,
you can assign this particular user to as many
| | 01:32 | or as few user groups as you wish.
| | 01:34 | In my case I just want them to be
registered users, which is already checked
| | 01:38 | off here on the list.
| | 01:40 | I could uncheck Registered, and I could
check off any of these other names that
| | 01:43 | are here on the list, but I'm just
going to leave this as a registered user.
| | 01:46 | Over on the right-hand side of the
screen, you will see that we have several
| | 01:50 | additional options that we can
customize for this specific user.
| | 01:54 | We could assign them a
specific backend template style;
| | 01:57 | I talked about that earlier as you
could give somebody Hathor Interface instead
| | 02:01 | of giving them the Bluestork Interface.
| | 02:04 | We can assign them a language, so if
our volunteers all speak French, we could
| | 02:08 | give them the French language
on the front-end and the backend.
| | 02:12 | We could also assign them a specific editor.
| | 02:14 | Right now, the default editor is JCE, but
if this user really wanted to work with
| | 02:18 | TinyMCE instead, we could do that.
| | 02:20 | We can assign them a specific Help
site, and we can also give them a time zone
| | 02:24 | that they're working in; otherwise, they
take all the defaults for these, for the
| | 02:27 | most part from the Global Configuration screens.
| | 02:31 | Go ahead and say Save & Close, and
you'll get this error at the top of the
| | 02:36 | screen about "Could not
instantiate mail function."
| | 02:39 | What that means is normally when you
create a new user on your website, an e-mail
| | 02:43 | is generated to the
address that you just created.
| | 02:47 | So in this case the email was
attempted to be sent to volunteer@samoca.org but
| | 02:51 | because we're running our local web
server, either WAMP or MAMP, that means that
| | 02:57 | it's not configured to send emails
and you get this error at the top of the
| | 03:00 | screen, which is totally fine.
| | 03:02 | If you have this on a web hosting
environment, that email would be sent.
| | 03:07 | So now that we've created that
registered user login, let's see how it works.
| | 03:12 | As I said before, registered users are
allowed to log in to the front-end of the
| | 03:15 | website only; they can't
log in to the backend of the website.
| | 03:18 | So if I log out of my Joomla! site
here and I put in volunteer as my username
| | 03:25 | and volunteer as my password, I will
discover that I am not allowed to get in,
| | 03:31 | and I get an error that says I don't
have access to the administrator section of
| | 03:34 | the site, which is absolutely true.
| | 03:36 | So I'm just going to log in again as Admin.
| | 03:38 | Then I'm going to flip over to the
front-end of the website and from here, I'm
| | 03:43 | going to enter my username of volunteer
and my password of volunteer. And from
| | 03:49 | here, you'll see that I in fact have
logged in to the front-end of the website.
| | 03:53 | Nothing changed on the website because
I haven't configured any special content
| | 03:57 | for people who have logged into the
website yet, but my login form is working
| | 04:01 | and I am able to log in.
| | 04:03 | So creating logins for users is
very quick, very simple, and very
| | 04:07 | straightforward, and you should
definitely create new users instead of giving
| | 04:11 | people your own username and
password to get into a Joomla! website.
| | Collapse this transcript |
| Exploring the default access levels| 00:00 | Joomla! has access levels, which
unfortunately is a very confusing term.
| | 00:05 | But access levels are what drives who
can see what on the front-end of Joomla!
| | 00:10 | And by default the access
levels that come with Joomla!
| | 00:13 | are Public, Registered and Special,
and you can find this by going to
| | 00:16 | Users > Access Levels, and there they
are: Public, Registered, and Special.
| | 00:21 | Public content is viewable by anyone who
happens to be looking at your Web site,
| | 00:25 | whether they're logged in or not.
| | 00:27 | Registered content is available
to registered users and higher
| | 00:31 | and you have to be logged into
the Web site in order to see it.
| | 00:34 | Special content is available for
Authors and higher; so Authors, Editors,
| | 00:38 | Publishers, Managers, Administrators, and
Super Users can see a given piece of content,
| | 00:44 |
provided that they're
logged into the Web site.
| | 00:46 | These three access levels have always
been available inside of Joomla!
| | 00:50 | and they're available by
default in Joomla! 2.5.
| | 00:53 | What's new with Joomla! 1.6, 1.7, and 2.5 is
that you can create additional access levels,
| | 00:59 | so you can more finely slice and dice who can see
which content on the front-end of the Web site.
| | 01:04 | The access level system is almost a separate
ACL system from other permissions in ACL,
| | 01:10 | like creating or editing content,
or accessing various aspects of the
| | 01:16 | back-end configuration inside of Joomla!,
| | 01:18 | and who can see what is treated very differently
than who can do what within the Joomla! system.
| | 01:23 | So it can be somewhat confusing.
| | 01:25 | With many access control list systems in
other places, you'll find who can see what
| | 01:31 | is integrated with the other permissions.
| | 01:34 | If you'd like to learn more about how
you can slice and dice content so that
| | 01:38 | certain groups of users can see
only certain pieces of content,
| | 01:42 | I go through a very detailed example of this
in Joomla! 1.7 Access Control Lists in Depth,
| | 01:49 | if you'd like to take a look at that.
| | 01:50 | Meanwhile, in the next video I'll show
you how you can configure your content
| | 01:54 | to take advantage of the
registered access level.
| | Collapse this transcript |
| Configuring content for ACL| 00:00 | Now that we have a user in place who can
see content that's specifically for the
| | 00:04 | volunteers, for registered users, I'm going
to go ahead and create some special content
| | 00:09 |
that will only be visible to those who are
logged into the front-end of the Web site.
| | 00:13 | And to do that, I'm going to
start by creating a category
| | 00:16 | which will be a category specifically
designed for that kind of content.
| | 00:20 | Then I'm going to make an
article and a menu item,
| | 00:23 | and display that menu item on
the front-end of the Web site,
| | 00:26 | I'm going to show you how to
configure all of that in one video.
| | 00:28 | So we're going to start
with the Category Manager,
| | 00:31 | and we're going to start by
creating a piece of content.
| | 00:34 | I'm going to make a New category,
and this is going to go within
| | 00:37 | the English category and this
will be called Volunteers.
| | 00:42 | It's going to be published and the parent
will be English, and the Access for this
| | 00:47 | will be set to Registered users only,
and so that's the point of this.
| | 00:51 | We're putting it within English because
this is going to contain English content.
| | 00:56 | If I wanted to have French content available,
I would make a category for French volunteers
| | 01:01 |
and put that under the French category.
| | 01:04 | So I'm going to go ahead and
say Save & Close, and you'll see
| | 01:08 | that we have a new category called
Volunteers, and it is for registered users.
| | 01:13 | I forgot to set my language,
let me go back in there
| | 01:16 | and set that language real
quick English, there we go.
| | 01:20 | This is why it's always good to
check these things in your manager
| | 01:23 | because it's very quick, they really pop
out if you haven't set things correctly.
| | 01:27 | Alright, so our Volunteers category is all
set, now we're ready to create some content.
| | 01:32 | If we go over to Articles, and I'm going to
click my New button to make a new article,
| | 01:37 | and the Title, I'll call
this Just for Volunteers.
| | 01:41 | The Parent Category will be Volunteers.
| | 01:47 | It's published, it's available only to
registered users and the language is English.
| | 01:51 | And if I scroll on down the page I can
go ahead and enter some information here.
| | 01:55 | This page can only be seen by volunteers.
| | 02:01 | Obviously you could make this page
far more complicated than that.
| | 02:06 | Go ahead and say Save & Close.
| | 02:08 | Now I'm going to add a new
menu item to our English Menu.
| | 02:11 | Go to English Menu > Add New Menu Item,
and I'm going to select the Item Type.
| | 02:18 | This is just going to be a Single Article,
and the Title will be Just for Volunteers.
| | 02:26 | My article over here on the right-hand side
will be the Just for Volunteers article.
| | 02:32 | Scrolling on down the page here, I'm
going to put this as its own item on
| | 02:37 | the top-level navigation and I'm
going to set the Language to English,
| | 02:42 | and I'm going to set the
Access level to Registered.
| | 02:46 | So I'm going to go ahead
and say Save & Close.
| | 02:48 | Now when I go to the front-end of the
Web site, let me Log out, and I hit Refresh,
| | 02:55 | I'm not going to see the menu
item up here on the top navigation.
| | 02:59 | But if I login as volunteer, volunteer,
Log in, you see that I get a link on the
| | 03:08 | top navigation here that appears
that wasn't there before I logged in.
| | 03:12 | And when I click on that link, I get
my article that's all about volunteers.
| | 03:18 | Now of course, I could make this far
more complicated. I could set up a separate
| | 03:22 | menu for my users. I could make that
menu appear and disappear selectively.
| | 03:28 | The example I'm giving you here is very,
very simple and very straightforward
| | 03:32 | in the world of ACL, because this is an
essential training course and it gives you
| | 03:36 | a taste of what can be done here with ACL.
| | 03:39 | So now what I'm going to try doing
is logging out as a volunteer,
| | 03:42 | you'll see that this page disappears.
| | 03:44 | I'm going to go back to the Home page
and I'm going to log out of the Web site.
| | 03:49 | So now if I login as Admin you'll see
that when I login as admin, and it says,
| | 03:57 | "Hi Super User," I can also get
to the Just for Volunteers page.
| | 04:00 | That's because super users are included
in part of the registered access level.
| | 04:05 | Okay, so that's pretty much the way
you can make special content for the
| | 04:10 | front-end of your Web site so that
selected groups of people can see it.
| | 04:15 | The next thing I'd like to do is
work on configuring some of the
| | 04:18 | user registration options over here
on the left-side of the screen,
| | 04:21 | which I'll do in the next video.
| | Collapse this transcript |
| Configuring user registration| 00:00 | I'm on the front-end of
the Web site here in Joomla!
| | 00:03 | and I have just created a special
page for my volunteers for the museum.
| | 00:08 | And only volunteers that have a login
are able to log into the Web site to see
| | 00:12 | that special page for volunteers.
| | 00:15 | However, over here in the
Login box that I've been given,
| | 00:18 | I have the option of creating an account and
if I click on the Create an account link,
| | 00:23 | I'm able to fill out this
information including a name,
| | 00:26 | pick a username and a password and an
email address, enter my CAPTCHA code,
| | 00:31 | and I can register for this Web site
right here without even being a volunteer.
| | 00:36 | What I'd really like to do since
there's only a fixed number of volunteers
| | 00:39 | for the museum, I really don't want just
anybody registering for this Web site.
| | 00:44 | I want to control that.
| | 00:46 | In fact, I'd probably like to just make
those logins on the back-end myself
| | 00:49 | or perhaps my volunteers all
share the same volunteer login.
| | 00:54 | That way I don't have people who are
not really affiliated with the museum
| | 00:58 | creating accounts for
this Joomla! Web site.
| | 01:00 | So how could I turn off
that Create an account link?
| | 01:04 | Well, fortunately, that's not too hard.
| | 01:07 | So if I go on into the back-end of Joomla!
| | 01:10 | and I'm going to go
to Users > User Manager
| | 01:14 | and up here in the upper right-hand
corner, there is the option of Options.
| | 01:19 | If I go into this, this will give me a
number of options that are worth going over.
| | 01:25 | So, first of all, should
we Allow User Registration?
| | 01:28 | Well, no, I don't want
User Registration Allowed.
| | 01:32 | If I did want User Registration, what
user group would those new users belong to?
| | 01:37 | Remember with ACL, we can create custom
user groups and so it might make sense
| | 01:41 | to have them belong to some other
user group other than registered.
| | 01:45 | So I can set that here along with
the guest user group, in other words,
| | 01:49 | the people who are able to see
any content on the Web site,
| | 01:52 | which Joomla!'s configuration
calls them Public.
| | 01:55 | For the user account activation,
there are some great options here.
| | 01:58 | What this means is when somebody
fills out the user registration form,
| | 02:02 | what do they need to do to
make their account live?
| | 02:05 | Potentially, it's nothing at all;
| | 02:06 | they could just fill out the
form and then they have a login;
| | 02:08 | they can log right into the site without any
further verification that they are real people.
| | 02:14 | Self would indicate that, once they've
filled out the registration form,
| | 02:18 | they'll get an email to
them at their email address.
| | 02:22 | This is a great way to make sure that
people are giving you real email addresses
| | 02:25 |
when they register for your Web site, because
if they don't give you a real address,
| | 02:30 |
they won't get the special link that
they click on to activate their account.
| | 02:34 | And finally, Admin would notify the
Site Administrator, the Super User,
| | 02:39 | that someone has registered for the Web site
and then the Super User could approve or
| | 02:43 | not approve those users as
those accounts are created.
| | 02:46 | That feature is new in
Joomla! 1.6 and higher
| | 02:49 |
and it's very useful for a number
of people in their Web sites.
| | 02:53 | You have the option of configuring the
notification email to administrators,
| | 02:57 | when people create accounts for the
Web site, should I get an email saying
| | 03:01 | that somebody has created an
account or something has happened?
| | 03:03 | You can turn that on or off.
| | 03:05 | What version of CAPTCHA should
you use for your Web site?
| | 03:08 | The default would be the one we've
already configured called ReCaptcha,
| | 03:12 | but of course, you could select
other options from this list.
| | 03:16 | When people log into the front end of
Joomla!, should they be able to see
| | 03:20 | bits and pieces of information about their
login, including the ability to change
| | 03:24 | their username and password on login.
You can turn that on and off as well.
| | 03:28 | You can also turn on the ability
to toggle a front-end language,
| | 03:31 | Should people to be able
to see English or French?
| | 03:33 | So you can turn that on or off here
in the User Configuration as well.
| | 03:38 | The second tab has
to do with Mass Mail.
| | 03:41 | Mass Mail from the screen would
send an email to all users who
| | 03:44 | are registered for your Web site.
| | 03:47 | This is not email marketing;
I can't stress that enough.
| | 03:50 | A lot of people think that they can do
email marketing through this interface.
| | 03:54 | The problem with using this kind
of interface for email marketing,
| | 03:56 | first of all, it's not
particularly attractive.
| | 03:59 | This is going to send a text message to all
the users who are registered for the Web site.
| | 04:03 | The second and more important problem
is when you do email marketing,
| | 04:08 | you'd ideally like your emails to be
delivered, and if your Joomla! site
| | 04:12 | is generating email to thousands of
users, it could very quickly be tagged
| | 04:18 |
as a spamming server, because places
like AOL or Comcast, in particular,
| | 04:24 | are very bad about recognizing
email from sources like that.
| | 04:28 | In the best case, all your emails
wind up at the spam filter;
| | 04:30 | the worst case, your server gets labeled
as a spamming server, and your rankings
| | 04:35 | in the search engines decline
and all kinds of bad things happen.
| | 04:39 | So I would not use this
for email marketing.
| | 04:41 | This is really designed to email three or
four people who might be important people
| | 04:47 | to get a mass mail from
this particular interface.
| | 04:50 | Personally, in six-and-a-half
years of using Joomla!,
| | 04:52 | I have never used Mass
Mail, but it's here.
| | 04:56 | So personally, I'd advise you to
do exactly what I do; ignore it.
|
|
|
