IntroductionWelcome| 00:00 | (music playing)
| | 00:04 | Hi! I am Jen Kramer.
Welcome to Joomla! 3: Essential Training.
| | 00:09 | Content Management Systems are growing
in popularity for creating both simple
| | 00:13 | and complex Web sites.
| | 00:16 | Joomla! is one of the three best-known open-source
content management systems in the world.
| | 00:20 | In this course I'll show you how to
install WAMP and MAMP to turn your computer
| | 00:25 | into a mini Web server.
| | 00:27 | We will then install Joomla!
| | 00:29 | After that we will read about the CAM,
Categories, Articles, and Menus as well
| | 00:35 | as adding components and modules to
your Web site for extra functionality.
| | 00:39 | We will explore some of the Joomla!'s
| | 00:41 | latest features including new administrator
and Website templates that can be
| | 00:45 | customized quickly and easily.
| | 00:47 | We will change the look of
the Website using Joomla!
| | 00:50 | templates and we will get a peek at
the basics of Joomla!'s Access Control
| | 00:54 | Lists or ACL features.
| | 00:56 | We will also take a close look at working
with multiple languages in Joomla!.
| | 01:00 | So if you're ready let's
get started with Joomla! 3:
| | 01:03 | Essential Training.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the lynda.com
Online Training Library or if you
| | 00:05 | are watching this tutorial on a DVD-ROM
you will have access to the exercise
| | 00:09 | files used throughout this title.
| | 00:11 | Simply download the exercise files
to your computer and place them on the
| | 00:15 | desktop for ease of access.
| | 00:17 | The exercise files are
organized by chapter number.
| | 00:21 | Whenever an exercise file is available
for a video, you'll see an overlay at
| | 00:25 | the bottom of the screen that indicates the
location and the name of the exercise file.
| | 00:30 | Jump-in files are available
at the start of each chapter.
| | 00:34 | This the current state of the Joomla!
| | 00:36 | site at that point in time.
| | 00:38 | You do not need to install these jump-in
files to follow along with the course.
| | 00:42 | They are provided only in case you get
lost during a chapter or if you'd like to
| | 00:46 | jump forward to a specific chapter.
| | 00:48 | It's expected that most viewers will
follow along with this course in video
| | 00:52 | order so the jump-in files are not required.
| | 00:56 | I will cover how to install the jump-in
files in Chapter 1 video number five
| | 01:01 | Restoring your Site from
Backup using the jump-in files.
| | 01:04 | Working with the exercise files
can add great value to the training.
| | 01:08 | However, if you don't have access to
the exercise files, you can still follow
| | 01:13 | along with the videos, often using
your own files and have a fulfilling
| | 01:17 | learning experience.
| | Collapse this transcript |
| Understanding Joomla!| 00:00 | You might have built a Web site before
with Dreamweaver, FrontPage, or GoLive.
| | 00:04 | These tools usually create
what are called static Web sites.
| | 00:07 | A static Web site is quite simple.
| | 00:10 | You type in a Web address like www.lynda.com/
index.html into your computer's Web browser.
| | 00:18 | A Web browser is a piece of software
that displays Web pages from the Internet
| | 00:22 | like Internet Explorer,
Firefox, Safari, Chrome, and Opera.
| | 00:27 | This request for the Web page goes from your
computer also called the client to the Web server.
| | 00:35 | Server is a tricky word that
means two different things.
| | 00:37 | One is a hardware sense of the word.
| | 00:40 | A server is a very powerful
computer that is shared in some way.
| | 00:44 | Server can also be used in the software sense.
| | 00:47 | A server software is
designed to serve up Web pages.
| | 00:49 | Apache and Internet Information Server
or IIS are examples of server software
| | 00:56 | that are compatible with Joomla!.
| | 00:58 | The term Web server is frequently used
interchangeably with the term Web host.
| | 01:03 | However, they are somewhat different.
| | 01:05 | A Web host is a service that
offers Web servers for your use.
| | 01:10 | The server locates the page called
index.html in its files from lynda.com.
| | 01:15 | Then sends a copy of this
page back to the client.
| | 01:19 | It also finds any associated images, CSS,
Flash files, JavaScript, and so forth
| | 01:26 | and it sends those along as well.
| | 01:28 | The client displays the page, plus
the images and the associated files.
| | 01:33 | The system is static and that
the pages contain fixed content.
| | 01:37 | The server simply picks up the right
page from the right location and sends it.
| | 01:42 | No processing of that page is required.
| | 01:44 | You create the Web pages on your
computer, the client, and you send a copy of
| | 01:49 | those pages to the Web server via FTP.
| | 01:52 | All the Web server does is store those
pages and send out copies as requested.
| | 01:58 | A Content Management System or CMS
is very different than static site.
| | 02:04 | A CMS is a Web application, software
that runs on the Web server instead of
| | 02:09 | running on the client.
| | 02:11 | For example, Microsoft Word
runs on your computer, the client.
| | 02:15 | Google Docs, however, runs on the server.
| | 02:18 | Both applications are designed to create
and edit word processing documents, but
| | 02:22 | the way they get that
job done is very different.
| | 02:26 | CMS generally functions in the same
kind of way from a bird's-eye perspective.
| | 02:30 | The server software, middleware
software, and database software may vary, but
| | 02:36 | the functionality is all the same.
| | 02:38 | Just like before, type in a Web address
like www.lynda.com/index.php into your
| | 02:49 | computer's Web browser.
| | 02:50 | Your computer sends this request
for the page to the Web server.
| | 02:54 | The Web server looks at its files and
realizes the page you requested is written
| | 02:58 | in PHP, a programming language.
| | 03:01 | The Web server knows it can't
send this page as is to the client.
| | 03:05 | Some processing must be done first.
| | 03:07 | So instead the Web server sends
this request to the PHP application.
| | 03:12 | PHP looks at the document and
determines that some information needs to be
| | 03:17 | pulled from a database and then processed.
| | 03:19 | PHP is functioning as middleware in this way.
| | 03:23 | This means PHP mediates the discussion
between the Web server and the database.
| | 03:28 | The server and database can't
talk to each other directly.
| | 03:32 | They need a translator that can
understand server speak and database speak.
| | 03:36 | Other examples of programming language
used in this role include ASP and .NET,
| | 03:42 | ColdFusion, Java, and Perl.
| | 03:45 | A database is a collection
of organized information.
| | 03:49 | The database type that we will use in Joomla!
| | 03:52 | is called MySQL, but other types of
databases include MSSQL or MSSQL or Oracle.
| | 04:00 | Axis is a database that runs on your
laptop and is not suitable to use in a Web site.
| | 04:05 | Joomla! has been designed to work
primarily with MySQL, but it supports some
| | 04:10 | other databases as well.
Joomla! 2.5 and Joomla! 3
| | 04:13 | supports some Microsoft environments
including Windows Azure, the cloud platform.
| | 04:18 | In addition to supporting Microsoft
SQL Server 2008 and SQL Azure,
| | 04:24 | Joomla! 2.5 supports Azure Storage CDN and
Azure deployment and so does Joomla! 3.
| | 04:30 | Both Joomla! 2.5 and Joomla! 3
also support PostgreSQL.
| | 04:36 | However, be careful just because Joomla!
| | 04:38 | supports alternative databases does
not mean third-party extensions support
| | 04:43 | those databases as well.
| | 04:44 | Check with extension providers to find
out if the extension you want to use is
| | 04:49 | compatible with these other databases.
| | 04:50 | Finally, the database receives a request
for information from PHP via a database query.
| | 04:57 | The requested information is copied
from the database and sent back to PHP.
| | 05:02 | PHP arranges the database information
into the way specified in the PHP code.
| | 05:07 | The actual PHP code is stripped out
from the page and replaced with HTML
| | 05:11 | according to the instructions on the page.
| | 05:14 | Now that a page is created and it
consists of HTML and associated files that is
| | 05:20 | sent to the client to view.
| | 05:22 | All of this happens in the blink of an eye.
| | 05:24 | In order to run Joomla!, therefore,
you must have a Web server configured
| | 05:28 | with Apache or IIS, PHP, and MySQL
including the right versions of those
| | 05:34 | pieces of software.
| | 05:35 | You can check Joomla.org for the latest
requirements and recommended Web hosts.
| | 05:40 | So obviously a CMS is way more
complicated than a static Web site.
| | 05:45 | In fact, you might be a bit intimidated by
all of that technology running on your site.
| | 05:49 | Why are CMSs preferred over static Web sites?
| | 05:53 | Because of the power of the database
Web sites are much easier to maintain with a
| | 05:57 | CMS than they are with a static Web site.
| | 06:01 | If you wish to make changes to the
CMS Web site, you can change it without
| | 06:05 | knowing HTML, PHP, MySQL, or anything
else, which means your average client can
| | 06:11 | easily create new pages, link them to
menus, change content, and make other
| | 06:16 | updates without talking to you.
| | 06:18 | In a world where we increasingly
integrate photo galleries, calendars, social
| | 06:23 | media, news feeds, blogs, and other
dynamic information a CMS becomes more
| | 06:29 | important due to the ease of
integrating these features into the Web site.
| | 06:33 | If you're still feeling like a
CMS is complicated, don't panic.
| | 06:37 | This movie was as geeky as
the rest of this title gets.
| | 06:41 | Keep watching and you will start
feeling more comfortable
| | 06:43 | with Joomla! shortly.
| | Collapse this transcript |
| Planning your website| 00:00 | Do you have a plan for this
Web site that you're about to build? No?
| | 00:05 | Well, you are not alone.
| | 00:06 | 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
| | 00:15 | the conclusion, and we were encouraged
to proofread everything to make sure it
| | 00:18 | flowed from start to finish.
| | 00:20 | Creating a Web site 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 Web site, getting
| | 00:31 | some content in place.
| | 00:33 | After the inside pages are built, go
back to the homepage, and get it in shape.
| | 00:37 | Finally, debug the Web site and make
sure everything is working correctly
| | 00:41 | before you launch it.
| | 00:43 | In this course, we will be building a
| | 00:45 | Joomla! Web site for kinetECO, a company
specializing in alternative energy,
| | 00:50 | specifically wind and solar energy.
| | 00:52 | Your Web site should
reflect three kinds of goals.
| | 00:55 | 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:06 | personal site has a reason for existing.
| | 01:09 | What's the reason it exist? Who does it serve?
| | 01:12 | What is it trying to achieve?
| | 01:14 | Understanding this background will
help you understand how the Web site can
| | 01:17 | support the organization.
| | 01:19 | In a case of kinetECO, the organizational
goals to create a new cool technology
| | 01:24 | for harnessing energy from wind and
solar resources and they need to make sure
| | 01:28 | the world knows about the
work that they're doing.
| | 01:31 | Now the goals of the organization are
clear think about why the users are coming
| | 01:35 | to the Web site in the
first place. Who are they?
| | 01:38 | What do they want from this Web site?
| | 01:40 | What environment are they in when
they're looking at this Webpage?
| | 01:43 | In general, users want to read about
the latest products to get a sense of
| | 01:47 | what's possible with alternative energy.
| | 01:49 | They also want to know what's new
in alternative energy development.
| | 01:53 | Finally, investors need information
about the management of the company.
| | 01:57 | These users are typically younger people
with a strong commitment to the environment.
| | 02:01 | For the most part they're looking at the
site on a desktop computer, but there's
| | 02:05 | rapid growth in the site being viewed
on a tablet like the iPad or Android
| | 02:09 | tablets, as well as on mobile phones.
| | 02:12 | Distributors also need specialized
information for installing kinetECO solar
| | 02:17 | panels and wind turbines as well.
| | 02:19 | In addition to new potentially confidential
information about trends and products.
| | 02:24 | Once you understand the organization's
goals and the user's goals, the Web site
| | 02:29 | goals become much clearer.
| | 02:31 | kinetECO needs to inform the public about
new products that they've been releasing.
| | 02:35 | They'd also like to inform funders
of the progress made in developing new
| | 02:39 | products and technologies.
| | 02:41 | They also want to support
their distributors in the field.
| | 02:44 | The people who are installing
kinetECO's solar panels and wind turbines
| | 02:47 | for other customers.
| | 02:49 | As a result we've designed a site
with a structuring content to support the
| | 02:53 | goals of the organization,
the users, and the Web site.
| | 02:57 | This is a very brief summary of how to
think strategically about this Web site.
| | 03:01 | If you'd like to learn more, and I
hope you do, be sure to watch my Website
| | 03:05 | Strategy and Planning title
available here at lynda.com.
| | Collapse this transcript |
| Understanding Joomla's release cycle and versions| 00:01 | You may be wondering whats
happening with Joomla! these days.
| | 00:04 | We waited three years for
the release of Joomla! 1.6.
| | 00:07 | But since January of 2011, a
little under two years ago, we had four
| | 00:12 | major versions of Joomla! released.
| | 00:13 | What's up with Joomla!'s
| | 00:14 | release cycle and all of
these new Joomla! versions?
| | 00:18 | What does this mean for you,
your Web site, and your business?
| | 00:21 | Shortly before the release of Joomla! 1.6,
| | 00:24 | a new release cycle was announced by
Joomla!'s Production Leadership Team or PLT.
| | 00:30 | Previously, Joomla!'s new releases
were driven by a list of features.
| | 00:34 | The PLT would establish that list
and when the list of features was done,
| | 00:38 | software would be released.
| | 00:40 | That meant there was a three year
gap between Joomla! 1.5 and Joomla! 1.6
| | 00:44 | which was not good in the
fast-moving world of technology.
| | 00:49 | So in late 2010 the PLT announced
that they would move to a release cycle,
| | 00:54 | releasing a new version of
Joomla! every six months.
| | 00:58 | What features were ready would
be included in the new release.
| | 01:01 | If features weren't ready then they would be
incorporated in the next Joomla! release.
| | 01:05 | A six month release cycle for a
Web product is quite challenging.
| | 01:10 | The PLT did recognize this, because
most people don't want to make a major
| | 01:14 | change to their Web site every six months.
| | 01:16 | As a result they grouped three of the six
month releases into a larger release cycle.
| | 01:21 | The first two releases of the
cycle are short-term releases.
| | 01:24 | A short-term release is good for only
seven months before the end of life.
| | 01:28 | End of life is the point where the
software is no longer supported, meaning no
| | 01:33 | more security fixes are available for it.
| | 01:36 | The third release of the cycle is the
long-term release which is supported
| | 01:40 | for at least 18 months.
| | 01:42 | The start of the release
cycle begins with a .0 release.
| | 01:45 | This is where the new administrator
template is released along with any changes
| | 01:49 | to functionality that might break extensions.
| | 01:52 | This is a short-term or seven-month release.
| | 01:55 | The .1 release comes out six months later.
| | 01:58 | It is anticipated that there will be
mostly bug fixes in this release, but minor
| | 02:03 | changes to the functionality
are also typically included.
| | 02:07 | This is also a short-term
or seven-month release.
| | 02:10 | The final release in the cycle is a .5
release, which is good for at least 18 months.
| | 02:15 | This should be a very stable release,
fixing more bugs from the first two
| | 02:19 | releases and again introducing
minor changes to functionality.
| | 02:23 | This release cycle is the Joomla! 3.x cycle.
| | 02:27 | Joomla! 3.0 was released in September 2012.
| | 02:30 | Joomla! 3.1 will be released in
March of 2013 and Joomla! 3.5
| | 02:35 | will be released in September 2013.
| | 02:38 | Joomla! 3.5 will reach its end-of-life
around March 2015.
| | 02:43 | With any release cycle the administrator
interface should remain mostly the same.
| | 02:48 | You may see minor additions to
functionality, but you won't see a new
| | 02:51 | administrator template, meaning a
completely different look and feel for the
| | 02:55 | configuration side of Joomla!, and most
extensions should be compatible between versions.
| | 03:01 | You may see a few extensions which
break, but these will be very few.
| | 03:05 | Upgrading between versions of Joomla!
| | 03:06 | within a release cycle should
be a simple one-click update.
| | 03:11 | So what's the status of
the current release cycle?
| | 03:14 | There are two current versions of Joomla!
| | 03:16 | available for you to use right now.
| | 03:19 | Joomla! 2.5 is the current long-term
release of Joomla!.
| | 03:22 | It is recommended that
sites currently running Joomla! 2.5
| | 03:25 | should stick with that
until Joomla! 3.5 is available.
| | 03:29 | That promotes maximal
stability to the Web site.
| | 03:32 | Joomla! 3.0 is the start of the
new release cycle.
| | 03:36 | This version of Joomla!
| | 03:37 | is still being debugged and new
features are still being added.
| | 03:40 | This is a less stable version of Joomla,
but it does offer some advantages
| | 03:44 | over Joomla! 2.5.
Most notably Joomla! 3.0
| | 03:47 | is mobile compatible out-of-the-box.
| | 03:50 | It is also possible to design responsive
Web sites using the bootstrap framework
| | 03:54 | from Twitter, which ships with Joomla! 3.0.
| | 03:57 | I'll be covering that in Joomla!
| | 03:59 | responsive Web sites also
available at lynda.com.
| | 04:02 | Joomla! 1.5 which was an extremely
popular version of Joomla!
| | 04:06 | is no longer supported. Neither is
| | 04:09 | Joomla! 1.0, 1.6, or 1.7.
| | 04:13 | All of these versions of Joomla!
| | 04:15 | should be migrated to Joomla! 2.5
| | 04:16 | as soon as possible.
| | 04:19 | Please see my video, Migrating
from Joomla! 1.5 to Joomla! 2.5,
| | 04:22 | available here at lynda.com to
learn how to migrate your older Joomla!
| | 04:27 | sites to the new version.
| | 04:29 | Which version of Joomla! should you use?
| | 04:31 | Well, it depends.
| | 04:33 | Particularly, for those who are new to
Joomla!, I recommend starting with
| | 04:37 | Joomla! 2.5 while Joomla! 3.0
| | 04:38 | is the current version of Joomla!.
| | 04:42 | Joomla! 2.5 has the most documentation
available and the most extensions as well.
| | 04:47 | Joomla! 2.5 will be supported three months
beyond the release of Joomla! 3.5.
| | 04:52 | So it will be supported until
sometime around December 2013.
| | 04:56 | As time goes on you should start
building new Web sites in Joomla! 3.1.
| | 05:01 | The second release of the cycle,
typically has fewer bugs and glitches.
| | 05:06 | Plus, it has better support
for extensions and templates.
| | 05:09 | You'll also be on the path
to move your site to Joomla!
| | 05:11 | 3.5 when it's available.
| | 05:13 | If your site is currently running
| | 05:15 | Joomla! 2.5, keep your site there
until Joomla! 3.5 is available.
| | 05:19 | How hard will it be to move your
sites from Joomla! 2.5 to Joomla! 3.5?
| | 05:23 | No one can say for sure at this point.
| | 05:26 | However, everyone is hoping that this
will be a straightforward move rather than
| | 05:30 | the more difficult migration that happens when
sites move from Joomla! 1.5 to Joomla! 2.5.
| | Collapse this transcript |
|
|
1. Installing Joomla!Understanding the installation process| 00:00 | Before we get started with the
mechanics of installing Joomla!
| | 00:03 | it's nice to know what the general
steps are in advance and why you're
| | 00:07 | doing what you're doing.
| | 00:08 | In an early video I talked about
| | 00:11 | Joomla! as a Web application.
| | 00:13 | Joomla! needs a Web server, a programming
language and a database available so that
| | 00:18 | it can run correctly.
| | 00:19 | In this case we'll be looking
at Apache as our Web server;
| | 00:22 | PHP is the programming
language and MySQL is the database.
| | 00:27 | Your local computer, the one sitting
right there in front of you does not
| | 00:31 | have this software installed on it, so
we'll have to install it first before
| | 00:35 | we install Joomla!.
| | 00:36 | Take the first letter of Apache
MySQL and PHP that spells AMP.
| | 00:42 | You may have heard of LAMP before
where the L stands for Linux, which is
| | 00:47 | frequently the operating system of the Web host.
| | 00:49 | In your case it's likely that
you're running either Windows or Mac as
| | 00:53 | your operating system.
| | 00:54 | Therefore, for Windows we'll install WAMP
which stands for Windows Apache MySQL PHP.
| | 01:02 | For the Mac people we'll install MAMP.
| | 01:05 | Once this software is running our
picture gets a little complicated.
| | 01:09 | Rather than having two computers
talking to each other, a client running a Web
| | 01:14 | browser and the server running Joomla!,
Apache, MySQL and PHP, we'll now have a
| | 01:20 | single computer which performs both functions.
| | 01:23 | Did I just blow your mind?
| | 01:26 | Then, once MAMP or WAMP or running on your
computer we'll install Joomla! Once Joomla!
| | 01:32 | is in place we can start building our Web site.
| | 01:35 | The other alternative is for you to
get some Web hosting, install Joomla!
| | 01:39 | on your Web host and work there.
| | 01:41 | I'll cover the positives and negatives
of working locally versus working on a
| | 01:45 | Web host in the next video.
| | Collapse this transcript |
| Running Joomla! locally vs. running Joomla! on a web host| 00:00 | Some people choose to build locally;
| | 00:02 | then move the site to the Web host for launch.
| | 00:05 | Other people build the site
directly on the Web host. Which is best?
| | 00:09 | Of course, it depends.
| | 00:11 | Here are some advantages
to running Joomla! locally.
| | 00:14 | No one sees the site before it's done, so
you can make as many mistakes as you want.
| | 00:19 | Also, know there is no Web hosting
fees until you're ready to launch.
| | 00:24 | Finally, there is no Internet
connection required to run the Web site.
| | 00:28 | That's really handy if you're
working remotely or if you're in an
| | 00:31 | airplane flying somewhere.
| | 00:33 | There are disadvantages to
running Joomla! locally however.
| | 00:37 | First of all, no one sees
the site before you're done.
| | 00:40 | So if you're going in the wrong
direction, your client can't intervene
| | 00:43 | earlier in the process.
| | 00:45 | It also means that any collaborators
like designers, engineers, content
| | 00:49 | specialists or search engine
optimization specialists don't see the site
| | 00:54 | running until it's done.
| | 00:55 | Once the site is done you do have to
move the site from your local computer to
| | 00:59 | the Web host, and that's a couple of
extra steps it's not horribly difficult,
| | 01:04 | but it is a few extra steps.
| | 01:06 | There are some great
advantages to running Joomla!
| | 01:08 | on your Web host however.
| | 01:10 | First of all you don't have to install
MAMP or WAMP, you can just install Joomla!
| | 01:15 | directly right on your Web host.
| | 01:17 | You install Joomla!
| | 01:18 | once and you'll never
have to move the site later.
| | 01:21 | And your client can always see what
you're doing while you're building the
| | 01:24 | Web site as can all of your collaborators.
| | 01:27 | So you can get feedback as you're
building a Web site, rather than not getting
| | 01:31 | any feedback until the end of the process.
| | 01:34 | However there are
disadvantages to running Joomla!
| | 01:36 | directly on your Web host.
| | 01:37 | First of all, you're going to pay for Web
hosting while you're developing the Web site.
| | 01:42 | you are on the risk of someone seeing
the Web site before you're done, who should
| | 01:45 | not be seeing the Web site.
| | 01:47 | However there are ways around this and
I'll cover those elsewhere in the video.
| | 01:52 | Notably you can password
protect your entire Joomla!
| | 01:54 | Web site so that no one will see it
unless they have the password to login.
| | 01:59 | You also need to have a fast
Internet connection to work on the Web site.
| | 02:02 | If the connection is slow, working on
the Web site will really truly be painful.
| | 02:08 | So what's best for you? It depends.
| | 02:11 | If you're the only person building on
the Web site and the only person you have
| | 02:15 | to make happy is yourself, building
the site locally makes great sense.
| | 02:19 | If you only have a dial-up Internet
connection you might also want to consider
| | 02:23 | building sites locally.
| | 02:25 | However, if you're going to have a client
and you're going to have people help
| | 02:29 | you with the Web site, you might want
to consider building on a Web host.
| | 02:33 | I build all of my sites in a Web host
personally, because I'm always working
| | 02:36 | with distant collaborators and clients.
| | 02:39 | For the purposes of this training
video however I will be building on
| | 02:42 | the Web site locally.
| | 02:43 | That way if you're following along
with me and with the Exercise Files,
| | 02:47 | we've standardized things as much as possible.
| | 02:50 | Web hosts are all different so it's
hard to train you on how to use any one
| | 02:54 | particular Web host that's out there.
| | Collapse this transcript |
| Web hosting overview| 00:00 | Just because your Web host sysa they
support Joomla!, doesn't necessarily mean
| | 00:05 | that they support Joomla!
| | 00:06 | well or that they even support
the current version of Joomla!.
| | 00:10 | There's more to consider in
a Web host than the price.
| | 00:13 | Sometimes Web hosts that cost $5 a month
are actually more expensive than those
| | 00:17 | that cost $20 a month.
| | 00:19 | Here are some pointers for
picking out a good Web host.
| | 00:22 | First of all before you do anything at
all come to this page at joomla.org and
| | 00:28 | make sure you take a look at the
technical requirements for running Joomla!.
| | 00:33 | And right here on the top of the
page you'll see that we have listed the
| | 00:36 | requirements for Joomla! 2.5, 1.7, 1.6,
| | 00:37 | and underneath of that we have
the requirements listed for Joomla! 3.
| | 00:43 | Notice that the Minimum requirement
for PHP in particular and for MySQL is
| | 00:51 | significantly higher for Joomla! 3
| | 00:54 | than it was for Joomla! 2.5.
| | 00:56 | You're going to have to make sure that
you have PHP 5.3.1 or higher installed on
| | 01:03 | your Web host in order to run Joomla! 3.
| | 01:05 | Most Web hosts out there are still
running PHP 5.2 and while there may be some
| | 01:12 | sort of upgrade mechanism built into
some Web servers, in some cases you can go
| | 01:17 | through and you can upgrade a particular
version of PHP in a folder, you need to
| | 01:22 | be sure that that in fact is possible.
| | 01:25 | If you go with a host that's still running PHP
5.2 you will not even be able to install Joomla! 3.
| | 01:31 | So be very, very careful in particular
with your version of PHP, but also with
| | 01:35 | your version of MySQL.
| | 01:36 | Secondly, you want to be very, very sure
that your host provides great backups.
| | 01:42 | Many hosts do backups but sometimes
these backups are only available to
| | 01:46 | the hosting provider.
| | 01:47 | They're made in case the server catches
fire or gets flooded or has another type
| | 01:51 | of catastrophic failure.
| | 01:53 | These backups may not even be available to you.
| | 01:57 | If there are backups available to you
find out how often they are made and how
| | 02:01 | long it takes to restore from backup.
| | 02:03 | Ideally a daily backup and a
weekly backup will be made.
| | 02:07 | The daily backup is a backup
of the previous day's Web site.
| | 02:10 | The weekly backup is made once a week,
usually on Sunday and it's held for week
| | 02:14 | in case the daily backup fails.
| | 02:16 | Finally be sure to ask how long it
takes to restore from backup if required.
| | 02:21 | What the host considers a valid
reason to restore from backup.
| | 02:24 | Some hosts can take days during
which your site is down or broken.
| | 02:29 | Find out if you have access to those
backups or if the host alone can access
| | 02:33 | the backups, and find that out long before
you ever need a backup from your Web host.
| | 02:38 | If you're looking for resources for Joomla!
| | 02:40 | Web hosting, come to this page at
resources.joomla.org, these are Joomla!
| | 02:44 | Web hosts that have had some basic
testing run on them by the Joomla!
| | 02:51 | Project and these are places
that definitely support Joomla!.
| | 02:56 | You'll want to double-check with
them to make sure that they are still
| | 02:58 | supporting the most recent Joomla!
| | 03:00 | hosting requirements, but you can
scroll and down this list and you can see
| | 03:05 | many hosts that are listed here, these are
great places to go and purchase Web hosting.
| | 03:10 | Once again to reinforce a point, $5 a
month hosting sound like a great deal, but
| | 03:16 | if you windup pulling your hair
out for an hour trying to get Joomla!
| | 03:19 | installed, you've just lost money on that deal.
| | 03:22 | So make sure that you are not paying for
a super cheap host and that super cheap
| | 03:29 | host doesn't come with backups
and it's really hard to work with.
| | 03:32 | It's better to pay a little bit more
money so that you can work with Joomla!
| | 03:36 | easily, that you have backups that
you can access when you need them.
| | 03:39 | Because the day will come when you need
those backups and you'll be so glad that you did.
| | 03:44 | So make sure that you take a
look here at some great Joomla!
| | 03:47 | Web hosts that are
recommended here on the Joomla!
| | 03:50 | resources directory.
| | 03:51 | Make sure they support the most recent
version of PHP and you'll be all set for
| | 03:55 | hosting your Joomla! Web site.
| | Collapse this transcript |
| Installing Joomla! 3.0| 00:00 | Finally, the moment we have all been
waiting for, time to install Joomla!
| | 00:05 | Before you can install Joomla!, you
are going to need to install either WAMP,
| | 00:09 | if you're on a Windows computer or
MAMP, if you're on a Macintosh computer.
| | 00:13 | And you can get those URLs by going to
Google and Googling for WAMP or MAMP and
| | 00:19 | that will lead you to the Web sites
where you can download this free software,
| | 00:23 | and install it on your computer.
| | 00:25 | If you need more information about how
to download WAMP or MAMP, you can take a
| | 00:30 | look at David Gassner's course on WAMP
and MAMP, and follow his instructions for
| | 00:35 | installing that software.
| | 00:37 | Once you have it working, you'll know
that you have it working if you open up
| | 00:42 | your Web Browser and you go on the PC
to localhost just the word localhost and
| | 00:48 | hit Enter, there is no .coms, no .orgs,
just localhost, and you should see a
| | 00:53 | page that looks very similar to this.
| | 00:55 | If you're on a Macintosh, you'll need
to go to a page that's something like
| | 00:59 | localhost:8888 and you should see a
page with an elephant on it, which will be
| | 01:06 | the MAMP installation.
| | 01:07 | And if you see those pages then
you've done everything correctly.
| | 01:13 | Once you have that installed, the
next thing we need to do is download
| | 01:16 | and install Joomla!
| | 01:17 | So, to do that you're going to open up
by Web Browser, open up a New tab and go
| | 01:23 | to www.joomla.org and this is the Joomla!
| | 01:27 | Web site in its current incarnation.
| | 01:29 | And you can see that they are talking
about Joomla 3.0!, right here on the Home page.
| | 01:34 | So, what we would like to do is download Joomla!
| | 01:37 | So what we're going to do is here,
under the Download tab you can see that, we
| | 01:41 | can either download Joomla! 2.5
| | 01:42 | or download Joomla! 3.0 and downloading
Joomla! 3.0 is what we want to do.
| | 01:48 | So, go ahead and click on Download Joomal! 3.0
| | 01:50 | full package, this will put us
on to a page for downloading Joomla!
| | 01:55 | and the first thing that's
listed is downloading Joomla! 2.5,
| | 01:58 | which is recommended for most Web sites,
and if we scroll that a little bit
| | 02:04 | further, we get to downloading Joomla! 3.0.
| | 02:06 | And what we want to do is download wherever
the most recent version of Joomla! 3.0 is.
| | 02:11 | So, right now today, that is
| | 02:13 | Joomla! 3.0.1 Full Package, a zip file.
| | 02:17 | If you're watching this video some time,
later than today, as it's likely to be
| | 02:21 | the case, what you will want to do is
look for the same kind of button whether
| | 02:25 | that's Joomla 3.1 or Joomla 3.5 or
some other version of Joomla! 3.0.
| | 02:30 | Just look for this button, go ahead and
click on it, I'm running Firefox, so I
| | 02:34 | get a window that looks like this.
| | 02:36 | If you happen to be running Chrome,
Safari or Internet Explorer, you'll get
| | 02:40 | something similar to this
but not exactly the same.
| | 02:43 | It's going to give you a choice of
either opening the file that you download or
| | 02:47 | saving it to your computer,
and you can do either.
| | 02:49 | I am going to go ahead and open this
up, because ultimately what I am going
| | 02:53 | to want to do is pull all of these files
out and put them into my WAMP Installation.
| | 02:59 | So, I am going to go ahead and say Open
with and I am going to say OK, and what
| | 03:05 | will happen is that Joomla!
will go ahead and download here.
| | 03:08 | And here are all of the
files that make up Joomla!
| | 03:11 | inside of that zipped file.
| | 03:12 | What I am going to do now is,
inside of my computer here, inside of C
| | 03:21 | drive, inside of my wamp folder, and inside
of my www folder this is where these Joomla!
| | 03:29 | files are going to go.
| | 03:30 | If you're working on a Macintosh,
you're going to go to Applications, you're
| | 03:35 | going to find your MAMP Installation
and you're going to look for a folder
| | 03:39 | called htdocs, and inside of the
htdocs folder is where all of this
| | 03:44 | information is going to go.
| | 03:46 | The very first thing that I am going to
do here inside of this folder, is take
| | 03:50 | what's here, just going to highlight it
and delete, and send all of that stuff
| | 03:54 | right to the Recycle bin.
| | 03:56 | Macintosh people, if there is
anything that's in that htdocs folder, go on
| | 04:00 | ahead and delete that as well.
| | 04:02 | One small point I would like to make
for some of you who follow along with many
| | 04:07 | of my courses, you may already have
something in your www folder or your htdocs
| | 04:11 | folder that maybe another Joomla!
| | 04:13 | Installation, that you would like to keep.
| | 04:15 | If that's the case, just make a New
folder inside of www or htdocs and you
| | 04:22 | can install Joomla!
| | 04:23 | in that other folder.
| | 04:24 | In order to see that version of Joomla!,
in that Installation, what you'll need
| | 04:29 | to do is go to localhost/that
folder name, on WAMP or localhost:
| | 04:35 | 8888/that folder name, if you're on a
Macintosh, and that will show you that
| | 04:41 | installation of Joomla! 3.0.
| | 04:43 | But I'm just going to do this right
straight into the www folder for those of
| | 04:47 | you who are new to this process.
| | 04:49 | So, what I'm going to do is, here
inside of my zip file that I downloaded,
| | 04:54 | I'm going to go ahead and I'm going to
highlight absolutely everything that's here
| | 04:58 | inside of this folder and I am simply
going to drag that contents here into my
| | 05:04 | www folder back here on my WAMP installation.
| | 05:09 | If I was doing this on a Mac I would
be dragging these files into my htdocs
| | 05:13 | folder, and we'll give just a minute
to go ahead and transfer the stuff.
| | 05:17 | Okay, so, we have unzipped all those
files and folders and we've copied them
| | 05:21 | into the www folder in WAMP or htdocs
folder on MAMP, and you can close the
| | 05:28 | window that had all of the zip file in it.
| | 05:31 | So got ahead and close that.
| | 05:32 | So that's step one, we have downloaded Joomla!
| | 05:35 | We've unzipped it and we've copied it
into location here inside of our folders.
| | 05:41 | The next thing we need to do
is make a database for Joomla!
| | 05:44 | and to do that what I am going to do
is, I'm going to go to my Web Browser
| | 05:49 | and I'm going to go to a localhost/phpmyadmin,
that's if you are here on a WAMP machine.
| | 06:02 | If you're on a Macintosh machine from
that MAMP page with the little elephant
| | 06:06 | on it, there is a link where you can click
on that, to go to this same phpMyAdmin screen.
| | 06:12 | Or you can go to localhost:8888/phpmyadmin
and that should take you to the same interface.
| | 06:19 | So, now we just need to make a Database.
So, to do that we're going to click on
| | 06:24 | the tab up here at the top that says Databases.
| | 06:28 | And right here in the middle of the page,
is a box where it says create database.
| | 06:32 | So, all we need to do is type in a
name for a Database, how about Joomla?
| | 06:37 | So, go ahead and type in a name for
your Database and say Create and that will
| | 06:41 | make a Database here for you inside of
phpMyAdmin, that's all you need to do.
| | 06:45 | Just create the blank Database, and you
do not need to create a Database user,
| | 06:50 | or a Database user name and password,
none of that needs to be done, we can use
| | 06:54 | the default Database user
that comes with WAMP or MAMP.
| | 06:58 | So, you can go head and close that as
soon you're done, so that's step two.
| | 07:04 | We have downloaded Joomla!
| | 07:05 | we unzipped the files, we made a
Database and now we're ready to run the
| | 07:09 | installation process.
| | 07:10 | So, in another tab inside of Firefox, go
ahead and go to localhost or localhost:8888.
| | 07:20 | If you already got it open as I do here,
just hit the Refresh button, and this
| | 07:24 | should open Joomla's installation screens.
| | 07:25 | So you'll notice, those of you who are
familiar with Joomla!, this looks really
| | 07:31 | quite different than what we've seen before
with Joomla, but it's still the same old Jooomla!
| | 07:37 | underneath and it's pretty much the
same information you're accustomed to,
| | 07:40 | it's just arranged differently now on the screen.
| | 07:43 | So, first of all, we can select a
language that we would like to have
| | 07:47 | installed here with Joomla!
| | 07:48 | and you can choose any
one of these from the list.
| | 07:52 | I'm just going to stick with English
and the United States localization.
| | 07:56 | Under the Main Configuration, I
can type in a name for my Joomla!
| | 08:00 | Web site, this is required information,
I know that because it's starred.
| | 08:05 | So, I am going to type in a
name for this as kinetEC0.
| | 08:10 | I can provide a description for this
Web site, if I wish, this will wind up
| | 08:15 | being the global meta description for the
Web site, it's something you can set in Joomla's!
| | 08:20 | Global Configuration.
| | 08:21 | I'll show you how to do that later
in another video, but for those of you
| | 08:25 | who are familiar with Joomla!, if
you already have that Global Meta
| | 08:28 | Description available, you can put it
in here and it will show up on every
| | 08:32 | page of your Joomla! Web site.
| | 08:33 | Over here on the side is your Admin
Email, so I am going to go ahead and put
| | 08:39 | that in as info@kineteco.com, then I am
going to put in my Admin Username and Password.
| | 08:46 | By default, my Admin
Username is pre-filled in as Admin.
| | 08:50 | If you are doing this in the real world,
where these Web site is going to go out
| | 08:54 | and be seen by millions, do not use
Admin as your Username use anything else in
| | 09:00 | the world, but Admin.
| | 09:02 | The reason why is for many, many, years
| | 09:05 | Joomla! 1.0 and Joomla 1.5 Admin was the default
Username and there was no way to change that.
| | 09:11 | So, any time a hacker comes to visit
your Web site, the very first thing they are
| | 09:15 | going to try to do is get into your
Web site using the Username of Admin, and
| | 09:19 | that will be half of the information that
they need to get into your Joomla! Web site.
| | 09:23 | Why give hackers such an easy ride?
| | 09:26 | So, ideally you'll change this to
absolutely anything else and ideally you're
| | 09:32 | going to set an Admin Password that's strong.
| | 09:34 | So use uppercase and lowercase letters,
use some funny characters, use some numbers.
| | 09:41 | Having now told you all of that I'm
going to ignore all of my own advice.
| | 09:45 | And I am simply going to put in an Admin
Username and Admin of Admin Password of Admin.
| | 09:50 | Why?
| | 09:51 | Because I'm running Joomla!
| | 09:52 | right here on my local computer and
I'm not really concerned about an outside
| | 09:57 | hacker hacking into something that's
running on the computer that's in front of me.
| | 10:01 | As soon as we get all the way through
this course to the very end, and I need to
| | 10:06 | transfer this Web site to my Web host,
one of the very first things that I am
| | 10:11 | going to do as soon as I put this on my
Web host is change my Login immediately
| | 10:15 | from Admin, Admin to anything else in the world.
| | 10:19 | Although I'm using Admin, Admin now
please do not use that in the real world so
| | 10:24 | I am going to confirm my Password of Admin.
| | 10:27 | Scrolling on down here a little bit further,
those of who you are familiar with Joomla!
| | 10:31 | will notice this thing at the
bottom that says Site Offline.
| | 10:35 | This is a new feature in Joomla! 3.0.
| | 10:37 | You can install Joomla so
that you can have the whole Site Password
| | 10:42 | Protected right from the
start as soon as it goes live.
| | 10:46 | And what that means is that when you go
to the front end of the Web site and you
| | 10:50 | want to see the Web site as it's installed.
| | 10:53 | You'll have to type in a Username and
Password in order to see that interface.
| | 10:56 | So, that's great to have this
Username and Password available, if you're
| | 11:01 | building something that's out on a Web
host and you don't want the world to see
| | 11:05 | it while it's under construction.
| | 11:06 | But right here inside of our local
computer, this a little bit inconvenient to
| | 11:11 | constantly have to type in a Username
and Password, see the front end of the Web site.
| | 11:15 | So I am going to leave this set No,
but certainly feel free to set it to Yes,
| | 11:20 | and this is something that you can
figure inside of Joomla!'s Global
| | 11:23 | Configuration and turn it on
and off as often as you like.
| | 11:26 | So, if you leave it Off for now but
later you want to turn it on, it's a very
| | 11:31 | straight forward and easy process to do.
| | 11:32 | So don't feel like this is
your only opportunity. All right.
| | 11:35 | Scroll back on up to the top of the
screen and we'll hit the Next button, this
| | 11:40 | will take us into
Information about our Database.
| | 11:42 | So what we're going to do here with
our Database is leave the Database Type,
| | 11:46 | Set to MySQLi our Host Name is going to be
localhost, if you're running MAMP or WAMP.
| | 11:52 | if you're writing this on a Web Server,
a Web hosting environment, it's likely
| | 11:56 | that your Host Name is still localhost,
but you'll need to check with your Host
| | 12:00 | to make sure that it is or it's
something different and your Host will tell you
| | 12:04 | that, enter your Username for your Database.
| | 12:07 | Now for WAMP people, the Username is
Roots and the Password is blank, for those
| | 12:14 | of you who are MAMP people, your
Username is root and your Password is root.
| | 12:21 | So, make sure you enter root twice, if
you run MAMP, WAMP people just has root
| | 12:27 | Username and no Password as you
can see that's a real security issue.
| | 12:32 | Okay, and then finally, we need to
remember our Database Name and that was just
| | 12:37 | Joomla and if you called yours
something else then type in whatever it is that
| | 12:41 | you called your Database.
| | 12:43 | The last part is the Table Prefix
this is randomly generated by Joomla!
| | 12:47 | it's a random five character prefix
that will go in front of the Database Table
| | 12:52 | Names inside of Joomla and there is no
reason to change this Joomla will just
| | 12:57 | pick something random for you.
| | 12:59 | If you wanted to type in something in
particular, you could, but generally
| | 13:03 | speaking that's something you can just ignore.
| | 13:05 | So I am going to go ahead and hit Next
and of course, by the way, that Database
| | 13:09 | Table Prefix, you are going to have
something entirely different than what I
| | 13:13 | have here in my screen, and that's
okay, it's not going to affect anything,
| | 13:17 | just go ahead and leave it there.
| | 13:18 | So, now I am going to go ahead and hit
Next, and I'm in my final screen here
| | 13:24 | where I have a choice of
installing some sample data.
| | 13:28 | And in previous of Joomla!, there was
only one set of sample there, you pretty
| | 13:32 | much pick to say Yes or No in terms
of Installing it. With Joomla! 3.0
| | 13:36 | there are five different kinds of
sample data that you can install and what
| | 13:41 | Sample Data is, is a bunch of
Content both Articles, Categories, Module,
| | 13:47 | Configurations, a whole bunch of stuff,
that will set your Web site up for you in
| | 13:51 | advance to either be a blog or
brochure based Web site, or the default sample
| | 13:56 | data that we've always had in Joomla!.
| | 13:58 | Or even this new test environment,
which is really designed for the Joomla!
| | 14:02 | Bug Squad, the people that test Joomla!
| | 14:04 | before it's released to the public.
| | 14:07 | I am actually going to leave my sample
data to None, because I want a completely
| | 14:11 | blank installation of Joomla!
| | 14:12 | You are more than welcome to install any
of this sample data, but what I find is
| | 14:18 | that what eventually happens is that
you're going to delete it all anyway and it
| | 14:22 | just creates extra work to
delete it in the long term.
| | 14:25 | But if you'd like to install any of
the Sample Data just so you can poke
| | 14:29 | around and see Joomla's!
| | 14:30 | New Features by all means go ahead
and pick one of those, and install it.
| | 14:34 | Down towards the bottom of the
screen we can Configure Email and here's a
| | 14:38 | whole bunch of these setting kind of
things, that we are used to see in the
| | 14:42 | first few screens of Joomla! Installation.
| | 14:45 | The nice part about all of this is that
it's down at the bottom of the screen,
| | 14:47 | because really, truly, only super geeks
need to take a look at all the stuff,
| | 14:52 | for the rest of us it's probably all
configured just fine go a head and let it be
| | 14:57 | exactly the way it is.
| | 14:59 | So I am going to hit this Install
button and as you can see Joomla!
| | 15:03 | is installing, very, very quickly
and then congratulations!
| | 15:07 | Joomla! is now installed.
| | 15:09 | The very last thing that we have
to do before we can run Joomla!
| | 15:12 | is to remove the installation directory,
and that is done by clicking this very
| | 15:17 | convenient button right here.
| | 15:18 | So it will tell you that the Installation
folder has been successfully removed
| | 15:24 | and now we can proceed to look at the
front end of the Web site by clicking
| | 15:27 | this button here called Site or the back end of
the Web site, the Administrator Site of Joomla!
| | 15:33 | in the Configuration screens
by clicking on this button here.
| | 15:36 | So, I am just going to go ahead and
click on the Site button and you can see
| | 15:41 | that we have a Installation of Joomla!
| | 15:42 | right here and this is the way
the front end of our Web site looks.
| | 15:46 | This is where we're starting from, not
terribly exciting at the moment but we
| | 15:50 | will be putting in some content here and
making it more interesting in the next few videos.
| | 15:54 | So, one last little piece of advice to
those of you who are either professional
| | 16:00 | Web Developers who are making the
transition from building static Web sites into
| | 16:03 | building these content management system
based Web sites, or for those of who you
| | 16:08 | who want to become professional Web developers.
| | 16:10 | As you can see there's a lots of Database
Usernames and Passwords, there is Joomla!
| | 16:15 | Logins, there Web hosting,
Usernames and Passwords, there's domain name
| | 16:19 | Usernames and Passwords, there is a
lot of Username and Passwords that are
| | 16:23 | associated with a content management
Web site and, particularly if you're a
| | 16:27 | professional, you need to track all of
these in some way or another and you need
| | 16:31 | to do this in a secure way.
| | 16:33 | There are a lot of online
repositories available for tracking Usernames and
| | 16:38 | Passwords, some of these run in your
individual local computer, some of these
| | 16:42 | run as some kind of service that
you can sign up for in the world.
| | 16:47 | I recommend that you find one of
these services and make use of it because
| | 16:52 | you're going to need to come back to
zillions of Usernames and Passwords,
| | 16:56 | there's no way that you can
possibly remember all of these.
| | 16:59 | My personal favorite is called Pass
Pack, and if you go to www.passpack.com.
| | 17:07 | You'll see that this is a very user-friendly
password repository that you can
| | 17:12 | sign up for, I believe it's
free for up to a hundred accounts.
| | 17:16 | So as you are just getting into
Content Management systems, you can certainly
| | 17:20 | sign up for this and use it for free
and it will track all of those wonderful
| | 17:25 | Usernames and Passwords for
every Web site that you built.
| | 17:27 | The fact that it's online means that
there's even ways that you can share
| | 17:32 | this with collaborators or with clients,
if they need to access those Usernames
| | 17:35 | and Passwords as well.
| | 17:36 | So, make sure you have some sort of way
of professionally tracking all of your
| | 17:41 | Usernames and Passwords whatever
method it is, that you wind up choosing.
| | Collapse this transcript |
| Restoring the site from a backup using the jump-in files| 00:00 | The best way to watch this course and
to get the most out of it is to start at
| | 00:05 | the beginning of the course, and watch
all the way through, in sequence, movie by
| | 00:09 | movie, and follow along with what I
am doing to build a Joomla! Web site.
| | 00:13 | But, if for some reason, that's not
going to be possible, either, you want to
| | 00:18 | jump into start up another chapter or
you want to skip over a bunch of stuff, or
| | 00:23 | if as you're working away inside of Joomla!
| | 00:26 | something funny happens, and everything
blows up, I have provided for you some
| | 00:31 | Exercise Files that you can use
to restore your Web site in Joomla!
| | 00:36 | so that you can continue to
follow along with the videos.
| | 00:39 | Those jump-in files are going to be
available at the start of every chapter.
| | 00:45 | So, go to the folder number one inside
of whatever chapter, and you will find
| | 00:51 | these jump-in files that
you can use to restore Joomla!
| | 00:54 | You do not need to restore Joomla!
| | 00:57 | at the start of every chapter, don't do that.
| | 01:00 | That's just way too much work.
| | 01:02 | In general, just continue to follow
me right on along through all of my
| | 01:06 | examples and so forth.
| | 01:07 | Only use these jump-in files if you
absolutely need to restart your Joomla!
| | 01:11 | site for whatever reason.
| | 01:13 | If you do wind up needing to use these
jump-in files, I am going to walk you
| | 01:17 | through the process of how to put those,
into WAMP or MAMP, so that you can
| | 01:21 | get up and running again
with your copy of Joomla!
| | 01:24 | So, inside of your Exercise Files,
in this case, I am working in video
| | 01:29 | number five of chapter 1.
| | 01:30 | So here, I've provided these files for you.
| | 01:33 | But, as I said, they'll be in
the first folder for every chapter.
| | 01:37 | If you double-click on this folder, you
will see that there are two files that
| | 01:41 | are located within this;
| | 01:42 | one will be the zipped file that
will contain all of your Joomla!
| | 01:46 | files and the other one is an SQL
file, that's a copy of your database.
| | 01:50 | So here's what you need to do.
| | 01:52 | Go ahead and open up a window into your
computer and find your copy of WAMP or MAMP.
| | 01:59 | And remember, PC people, that's
inside of the www folder inside of the wamp
| | 02:04 | folder on your C drive.
| | 02:06 | For Mac people, it's the htdocs folder
that's inside of your MAMP application,
| | 02:12 | inside of Applications on your Macintosh.
| | 02:15 | Take whatever files are in here,
and just go ahead, and delete them.
| | 02:18 | So, I am going to go ahead and
get rid of my copy of Joomla!
| | 02:23 | And what I am going to do to start with
is from my Exercise Files, I am going to
| | 02:30 | double-click on the zipped file, and
that will go ahead and unzip this for me
| | 02:34 | and show me all these folders that are here.
| | 02:37 | I'm going to select everything, and I'm
going to drag this all on over into my
| | 02:44 | www folder here in wamp or into
the htdocs folder inside of mamp.
| | 02:49 | We will give that a minute to copy.
| | 02:52 | So, I've copied all of the
files over here into Joomla!
| | 02:56 | So, that's step one.
| | 02:58 | Step two, I need to now take this
database, and I need to copy this database
| | 03:05 | into phpMyAdmin where Joomla! can access it.
| | 03:10 | So, I am going to open up my Web
browser, and I'm going to go to
| | 03:14 | localhost/phpmyadmin, Mac people,
go to localhost:8888/phpmyadmin.
| | 03:24 | I'm going to go into Databases.
| | 03:27 | So, here's my database called joomla;
I am going to check next to it, and then
| | 03:32 | I am going to click on the icon, not the
word to drop, but the icon called Drop.
| | 03:36 | And if you mouse over it, it's
not going to change into a finger.
| | 03:39 | So don't let that throw you.
| | 03:41 | Click on the icon, and it will say
you're about to destroy an entire database.
| | 03:45 | Are you sure?
| | 03:46 | Say yes, and you've just
destroyed your entire database.
| | 03:50 | But, it's really not that bad.
| | 03:51 | What we're going to do is make another one.
| | 03:53 | Just click on the Databases Tab again,
and we're going to create a new database.
| | 03:57 | I am going to call it joomla again.
| | 03:59 | It's exactly the same name,
and say Create. So there it is.
| | 04:02 | Then, I am going to click on joomla
over here on the left side of the screen.
| | 04:07 | And now I'm going to import my SQL file.
| | 04:11 | All I need to do is go to the Import
Tab here, and I'm going to browse in my
| | 04:16 | computer, in my Exercise Files, in this
case, inside of Chapter 1, in this case,
| | 04:22 | inside of folder number 5 here.
| | 04:24 | I'm going to select my SQL file,
and I am going to say Open.
| | 04:29 | Everything else that's here on the
screen can go ahead and stay the same,
| | 04:32 | just go ahead and say Go.
| | 04:34 | It will go ahead and import
the entire Joomla! database.
| | 04:37 | One thing you should note of course is
that my extension here, my five character
| | 04:42 | extension which was randomly
chosen when we installed Joomla!
| | 04:45 | will be different than the five
character extension that you had when
| | 04:49 | you installed Joomla!
| | 04:50 | So you will see that change.
| | 04:52 | But, the actual design of this Joomla!
| | 04:54 | database will not change at all.
| | 04:56 | You will just see those first five
characters change when this happens.
| | 05:00 | If you are on a PC at this point
in time, yours should be all set.
| | 05:04 | You should be able to open up a new
tab, and you should be able to go to
| | 05:08 | localhost and your Web site
should come right back up again.
| | 05:11 | If you are on a Mac, what will happen is you
will get an error when you go to localhost:8888.
| | 05:18 | You will see an error saying about
it could not talk to the database.
| | 05:22 | And the reason why is because your
database username and password is different
| | 05:28 | than the people who are working on the PC.
| | 05:29 | Remember, the PC people had a
database username and password of root and a
| | 05:34 | password of nothing, whereas you MAMP
people, on the Macintoshes had a username
| | 05:39 | of root and a password of root.
| | 05:41 | So, Mac people only, you are going to have
one more step you're going to need to do.
| | 05:46 | And what you're going to want to do is
inside of your htdocs folder, go and find
| | 05:52 | right in the root, there's a
file here called configuration.
| | 05:54 | You're going to want to open that up
in something like TextEdit or BBEdit or
| | 06:01 | Dreamweaver or any one of a
thousand of other kinds of programs.
| | 06:06 | Not Microsoft Word, but a
program that will edit text files.
| | 06:10 | So, I am going to go ahead and do that now.
| | 06:13 | I'm going to open mine with WordPad.
| | 06:16 | You're going to see this exact
screen here, and this is all these various
| | 06:21 | variables that Joomla! needs in order to run.
| | 06:24 | What you want to do is scroll on
down to where it says 'public password.'
| | 06:29 | You'll see nothing here.
| | 06:30 | That's because I've recorded this on a
PC and WAMP does not require a password
| | 06:35 | in order for this to run.
| | 06:36 | Mac people, what you're going to need
to do, and again, Mac people only, not PC
| | 06:40 | people, go ahead and type-in the word root here.
| | 06:44 | I go ahead and save this file.
| | 06:47 | Once you've done that, when you come
to localhost:8888 again, Mac people, you
| | 06:53 | should see the KinetECO screen.
| | 06:56 | This is probably the area that you had before
when you tried to access your Joomla! site.
| | 07:01 | I'm getting it now because I just set a
password for my database user which is not needed.
| | 07:07 | So, I am going to hop on back here
to WordPad and I am going to take that
| | 07:12 | password out, because really, it just
broke my whole Web site, not a good thing.
| | 07:17 | I'm going to save that.
| | 07:18 | I am going to come back here to
Firefox and I am going to refresh.
| | 07:23 | And my Web site is back again.
| | 07:25 | So, Mac people only, make sure you do
that extra step of changing that password.
| | 07:29 | And PC people, you won't need to do that at all.
| | 07:32 | You will be all set, you will be ready to go,
and we can move on to the next video.
| | Collapse this transcript |
|
|
2. A General Overview of Joomla!A quick tour of the Joomla! interface| 00:00 | Now that we have Joomla!
| | 00:01 | installed let's take a look
at the back-end of Joomla!
| | 00:04 | or the administrator side of Joomla!.
| | 00:07 | We will need to login to see that and we
will take a look at the interface and a
| | 00:11 | little bit about the menus that
are located in a back-end of Joomla!.
| | 00:14 | So I am going to go to localhost/administrator.
| | 00:22 | And if you're on a Mac you are going
to go to localhost:8888/administrator.
| | 00:29 | And if we go there you will see that we
come to a login screen and we are going
| | 00:34 | to login with the username and
password that we established as part of
| | 00:37 | installation and that was admin as our
username and admin as our password and
| | 00:44 | go ahead and log in.
| | 00:45 | And this is Joomla!'s Control Panel
this is where you'll land once you log into
| | 00:50 | the back-end of Joomla!.
| | 00:52 | And for those of you who
have worked with Joomla!
| | 00:54 | before you'll notice that this is
radically different than what you used to
| | 00:57 | see when you log into Joomla!.
| | 00:59 | So on the right side of the screen we
have a series of shortcuts, these are
| | 01:03 | little icons that will take you to some
of the most commonly used areas inside
| | 01:07 | of Joomla!, including making articles,
the article manager, the media manager at
| | 01:12 | various configuration screens.
| | 01:13 | On the left side of the screen you'll
see that we have a number of system issues
| | 01:19 | here where we can configure things in
Global Configuration, clear out the cache;
| | 01:24 | install new extensions for the Web site.
| | 01:26 | All of this stuff we are going to be covering
over the course of the next many, many videos.
| | 01:30 | So let's take a look at the menus
that go across the top of the page.
| | 01:34 | So first of all if you click on the
icon up here in the upper left-hand corner,
| | 01:40 | this will open the front-end of the
Web site in a new tab, so you can see the way
| | 01:45 | your Web site is looking.
| | 01:46 | Here in the back-end of Joomla!
| | 01:47 | once again there are series of menus
here with drop-downs and various pieces of
| | 01:52 | information on each of these menus.
| | 01:54 | The System menu is where you can go to
come back to the Control Panel which is
| | 01:58 | the screen that we are on right now.
| | 02:00 | You can also configure things in the
Global Configuration including the meta
| | 02:05 | keywords in the meta
description for the entire Web site.
| | 02:08 | You can set up some text filtering for
putting articles into the Web site, you
| | 02:13 | can set up information concerning the database;
| | 02:15 | there is a number of things
that go on in Global Configuration.
| | 02:18 | Global Check-in is a way you can check
items into the Web site that might have
| | 02:22 | been checked out that were
failed to have been checked in.
| | 02:25 | I'll go through that in a little
bit more detail in a future video.
| | 02:28 | We can clear the cache for the Joomla!
| | 02:30 | Web site or purchase expired cache and
one of the important screens that's here
| | 02:34 | that you may windup using
frequently is the System Information.
| | 02:37 | If you click that link this will give
you all of the critical information about
| | 02:42 | the system that's currently
running your Joomla! Web site.
| | 02:45 | So notably it's going to tell you things
like your database version and your PHP version.
| | 02:51 | So these are things that are very
important that you're going to need to know.
| | 02:55 | It'll also tell you what version of Joomla!
| | 02:57 | you're running because on the front-end
of the Web site by default you don't see
| | 03:00 | the version of Joomla!
| | 03:01 | that you're running anymore.
| | 03:03 | That is something that we can turn on
and I will show you how to do that in
| | 03:06 | a future video, but if that feature is
not turned on inside the back-end of Joomla!
| | 03:10 | you're going to have to come to this screen to
find out what version of Joomla! you are running.
| | 03:15 | So that is what the
System Information is here for.
| | 03:18 | So I am going to go back to the Control
Panel by selecting Control Panel under
| | 03:22 | System, so I am back to this screen.
| | 03:24 | The Users menu item will give you
lots of things you can look at for users
| | 03:27 | including creating new users,
assigning them password as well as all of the
| | 03:32 | commands that you are going to
need to configure ACL for the Web site.
| | 03:35 | ACL is Access Control Lists and this is
controlling who sees what and who can do
| | 03:40 | what on the Web site.
| | 03:42 | Mass Mail Users is an option that's
here inside of Joomla!, it's kind of old,
| | 03:47 | I really actually wish they'd
take it out of Joomla! altogether.
| | 03:49 | But the idea here is that you can send
an e-mail only formatted in text format
| | 03:55 | to people who are
registered for the Joomla! Web site.
| | 03:57 | The downside to this is, first of all
it's only a text e-mail, you can't do any
| | 04:02 | HTML formatting or anything exciting like that.
| | 04:04 | And the other thing is of course that
e-mail is coming from your Web server
| | 04:09 | which may potentially mean that your
Web server winds up getting blacklisted as
| | 04:13 | a spam server that's sending a lot of spam.
| | 04:16 | You're far better off using a true e-mail
newsletter type of service, if that is
| | 04:21 | the kind of thing that you want to do.
| | 04:23 | Use something like Constant Contact or
VerticalResponse or MailChimp or any one
| | 04:28 | of a number of other
services that are out there.
| | 04:30 | They are designed to make sure that
your e-mails are delivered, that you don't
| | 04:34 | get blacklisted for spam, that they
make it past all of the filters on AOL and
| | 04:38 | Comcast and Gmail and all the rest of them.
| | 04:41 | I would recommend just staying away
from the Mass Mail Users functionality in
| | 04:45 | Joomla!, there's too many downsides to it.
| | 04:47 | The Menus item is where you go to make
new menus for your Web site as well as add
| | 04:51 | items to existing menus.
| | 04:53 | So right now we have a menu in the front
of the Web site, it only has a home link
| | 04:58 | on it, but this is where we go
to add additional menu items.
| | 05:01 | The Content menu is someplace we will
spend a lot of time, this is where we add
| | 05:06 | new pieces of content to the Web site
including articles as well as we can manage
| | 05:09 | our images in the Media Manager.
| | 05:12 | Components are big functionalities
that we add to Joomla!, they take up the
| | 05:17 | entire screen when they display.
| | 05:18 | So things like the Contact forms for
the Web site are an example of that.
| | 05:24 | This also contains some Administrator
side components as well that will be
| | 05:28 | useful to you like updating to the
next version of Joomla! via the Joomla!
| | 05:31 | update link or the redirect link which
is a great piece of functionality that
| | 05:35 | will allow you to direct old Web
addresses to currently existing pages,
| | 05:41 | it's very, very helpful functionality when
you upgrade the Web site or your redesign
| | 05:44 | the Web site from a static site
or previous version of Joomla!.
| | 05:49 | Under Extensions this is where we
can manage some additional pieces of
| | 05:53 | functionality, I will cover the
Language Manager in the chapter on multilingual
| | 05:58 | Web sites so your Joomla! site
| | 05:59 | can be presented in more than one language.
| | 06:02 | We'll be working with
ours in English and Italian.
| | 06:04 | There's a Template Manager which
changes the look of the Web site as well as
| | 06:09 | modules and plug-ins which are two
additional kinds of extensions and I'll walk
| | 06:13 | you through all of that in other chapters.
| | 06:15 | The Extension Manager is where
you go to install extensions or
| | 06:19 | uninstall extensions.
| | 06:21 | Finally the Help menu contains
lots of great resources for getting
| | 06:24 | additional help with Joomla!.
| | 06:27 | You can go to the Official Support
Forum which is at forum.joomla.org which is
| | 06:31 | where you can go and ask many
questions about Joomla! and how it works.
| | 06:35 | There's a documentation wiki
where you can read about Joomla!
| | 06:38 | and get additional help.
| | 06:39 | And there are these additional
links to other on property resources at
| | 06:43 | joomla.org including the Joomla!
| | 06:45 | Extensions directory which
I'll cover in a future video.
| | 06:48 | The place of Joomla Translations where
you can go to download additional Joomla!
| | 06:52 | translations so that Joomla!
| | 06:54 | can run in a language other than English.
| | 06:56 | The Joomla Resources directory where you
can get recommendations for Web hosting
| | 07:00 | or other firms and freelancers
who can help you with Joomla!
| | 07:04 | Web site development and training.
| | 07:06 | The Community Portal which is a
centralized location where you can learn about
| | 07:10 | the latest what's going on with Joomla!.
| | 07:12 | The Security Center where you get
updates about what's happening with Joomla!
| | 07:16 | from a security perspective.
| | 07:18 | What you need to watch out for, for
security holes, how you can improve the
| | 07:21 | security of your Joomla! site.
| | 07:23 | The Developer Resources location where
you can find out about Joomla!'s roadmap
| | 07:27 | and get involved with developing Joomla!
| | 07:30 | and the Joomla Shop which is where you
can go to buy T-shirts and hats and all
| | 07:34 | kinds of other fun Joomla! paraphernalia.
| | 07:36 | Over here on the very far right of
the screen is a link for Super User.
| | 07:41 | Here is where you can go to edit your
account so you can change your username or
| | 07:44 | your password or put in additional
information about yourself and you can also
| | 07:48 | log out of the Web site with this link.
| | 07:50 | Down at the very bottom of the screen
there is another link to view the Web site
| | 07:55 | and if I click this it does exactly the
same thing as clicking the KinetECO link
| | 07:59 | up here in the upper right-hand corner.
| | 08:01 | This will also tell us who's logged
into the site in terms of visitors
| | 08:05 | and administrators.
| | 08:06 | The little mail icon indicates anybody who might
have sent you an e-mail within the Joomla! system.
| | 08:12 | Again that's a feature that I don't
generally use, don't recommend using.
| | 08:16 | And then finally logging out of the Web site.
| | 08:19 | So if you click on the Logout link, you of
course will logout of the back-end of Joomla!.
| | 08:24 | So that is a very quick tour
through what's available in Joomla!
| | 08:27 | what's available for interfaces, what's
available for menu items and in all of
| | 08:32 | the next many videos I will be going
through exactly what all those menu items
| | 08:37 | are and how they work.
| | Collapse this transcript |
| Exploring responsive design in Joomla!| 00:00 | One of the great new features in Joomla! 3.0
| | 00:03 | is the fact that it is mobile
compatible right out of the box.
| | 00:08 | So we're looking at the front-end
of our KinetECO Web site and this is
| | 00:12 | the default Joomla! template
that comes with Joomla! 3.0.
| | 00:16 | The template is called Protostar.
| | 00:18 | I am going to go through Protostar in a
lot more detail in the templates chapter,
| | 00:21 | but I wanted to show you that this is
built using responsive design principles.
| | 00:27 | Responsive design is one of these very
hot skill sets that are out there right now.
| | 00:32 | The term was coined by Ethan Marcotte
who defines responsive design as having
| | 00:36 | three characteristics that were very important.
| | 00:38 | One was a flexible grid, one was
images that resize and the third is media
| | 00:45 | queries, which is something
you can use in CSS. So Joomla! 3.0
| | 00:49 | ships with the Bootstrap framework
and this is a framework of HTML5, CSS3
| | 00:57 | and jQuery which is bundled together
and maintained by Twitter, Twitter the
| | 01:01 | company, not Twitter the application.
| | 01:04 | You can learn more about Bootstrap
if you go to my course Up and Running
| | 01:07 | with Bootstrap and it will go through just
the Bootstrap side of things using Dreamweaver.
| | 01:11 | But Bootstrap is now baked into Joomla! 3.0
| | 01:14 | which means that Joomla! 3.0
| | 01:16 | is shipping with a responsive grid
and the ability for images to resize
| | 01:22 | and with media queries and I
wanted to show you that in action.
| | 01:26 | So I'm here looking at the front-end of
the Web site, my browser is Firefox and
| | 01:30 | it's currently maximized to this window.
| | 01:33 | If I click on this so it's no longer
maximized this has actually stepped back to
| | 01:37 | the size of a mobile phone window and
you can see that the elements on the page
| | 01:42 | have rearranged themselves.
| | 01:43 | If I grab the corner of this window
and I drag this on out a little bit,
| | 01:48 | you'll see that the design of this page
rearranges a little bit as I continue to pull this.
| | 01:55 | And you can see it snap at
little points in time here.
| | 01:58 | It's very hard to say exactly how
this is going to impact our Web site.
| | 02:02 | So when we are looking at something
with absolutely no content in it
| | 02:06 | whatsoever at this point.
| | 02:07 | But as we continue to add content to
this Web site and add more functionality to
| | 02:12 | it we'll go back and we'll take a look
at the responsive nature of the front-end
| | 02:16 | here and how it's handling the additional
content and extensions that we're
| | 02:20 | adding to this particular design and how
that is affected here on the front-end.
| | 02:26 | But, since Joomla! ships with Bootstrap it's not
only used here on the front-end for a template;
| | 02:30 | it's also used in the back-end of the Web site.
| | 02:32 | So if I log in here into the back-end
of the Web site, remember that admin is
| | 02:36 | the username and admin is the password,
likewise here I can grab the corner of
| | 02:42 | my browser window and my administrator
template will actually adapt, you can
| | 02:47 | see it adapting here. I've hit
a break point in the way that Joomla!
| | 02:52 | is configured with the media queries
and you can see that we've gone from
| | 02:56 | a three column design down to a one
column design, everything is still here,
| | 03:01 | it's just further down on the page.
| | 03:03 | And as I continue to go a little bit
smaller in this window, the navigation has
| | 03:09 | actually disappeared, I'm left with
this little icon here in the corner,
| | 03:13 | when I click that I still see
Joomla!'s navigation, it's all here.
| | 03:17 | It's no longer displayed as drop-down menus;
| | 03:19 | you can see that there are secondary
navigation here spelled out in the page in
| | 03:24 | addition to these top-level menu links.
| | 03:26 | So I could go and click on any of these
things and click on this again to make
| | 03:30 | that shut down the rest of the way.
| | 03:33 | If I continue to make this page
smaller, mimicking something like a
| | 03:37 | mobile phone, you see that this
is now approximately the width of a
| | 03:41 | mobile phone screen. So you can
actually administer your Joomla!
| | 03:45 | Web sites now using a mobile phone or using a
tablet or like an iPad or an Android tablet.
| | 03:50 | And that is a wonderful thing because
if you're ever in a situation where you
| | 03:55 | need to make a quick change to a Joomla!
| | 03:58 | Web site, but all you have handy is
your phone, finally you can actually go in
| | 04:01 | and make those changes and that's right
out of the box using the default Joomla!
| | 04:05 | administrator template, which is
called Isis and ships with Joomla! 3.0.
| | 04:08 | So that is the responsive nature at these
Joomla! templates, I'll go through
| | 04:13 | Joomla! templates in much more detail
in the template chapter of this course,
| | 04:17 | but I wanted to point this out to you now
so that you would know that you could
| | 04:21 | continue to work with Joomla!
| | 04:23 | on your tablet or on your phone as
easily as you do on your desktop.
| | Collapse this transcript |
| Modifying the global configuration| 00:00 | One of the first things you might want
to configure when you hop into Joomla!
| | 00:03 | is the Global Configuration.
| | 00:05 | And just like the name suggests this is where you
configure the big pieces of your Joomla! Website.
| | 00:11 | So let's go ahead and take a
look at Global Configuration.
| | 00:15 | There are several ways you can access
Global Configuration from the Control Panel.
| | 00:19 | It's available here under system;
| | 00:22 | the second link down is
for Global Configuration.
| | 00:25 | It's available here on the right side
of the screen under the QUICK ICONS there
| | 00:29 | is a link to Global Configuration, and it's over
here on the left side of the screen under system.
| | 00:34 | All three of these links take you to
the same place, so pick one and click it
| | 00:39 | and you'll be located here
inside of the Global Configuration.
| | 00:41 | So this is where we can change many of
the big items on this Website, things
| | 00:47 | like the site name, so the site name
is KinetECO, perhaps I really want this
| | 00:53 | to be KinetECO, Inc.
so I could change my site name to that.
| | 00:58 | The Offline functionality I described
to you a little bit earlier while we
| | 01:02 | were installing Joomla!, let
me just show you how that works.
| | 01:05 | If I put the Site Offline by saying
Yes and then I click this big green save
| | 01:10 | button up here at the top of the page,
the big green save button will save my
| | 01:14 | settings but will keep this
window open so I can continue editing.
| | 01:18 | You'll see a message on the top saying
that I just saved this particular page.
| | 01:23 | If I now click on my icon at the top here,
which note now it says KinetECO, Inc.
| | 01:29 | I can open up another tab and you'll
see here, here is my front-end of my
| | 01:34 | Website but it's now hidden behind a login.
| | 01:37 | So I can type in my UserName and Password and
I can login to the front-end of the Website.
| | 01:42 | The advantage of doing this of course
is that only those who have the login can
| | 01:46 | see a site while it's under construction.
| | 01:48 | So I am going to go ahead and turn
that back off again because it's a little
| | 01:52 | bit of a pain in the neck to work with it,
while we're just working here on our local machine.
| | 01:57 | So I am going to set that back to no and
click the big green Save button one more time.
| | 02:02 | You can customize some of the features associated
with the Site Offline in the next few blocks.
| | 02:07 | We can also set our default
editor and a couple of other things;
| | 02:10 | I will be covering some
of these in a future video.
| | 02:13 | Over here on the right side of the
screen is where we can turn on or off our
| | 02:17 | Search Engine Friendly URLs. Those are
turned on by default so that's great.
| | 02:22 | You may want to take a look at some of
these other settings when your site gets
| | 02:25 | to a Web server, but probably the
default settings are fine for running this
| | 02:29 | on the computer that's in front of you.
| | 02:30 | Include Site Name and Page Titles is
a really important thing to turn on.
| | 02:34 | If you take a look at the front-end of
the Website and you take a look here at
| | 02:39 | the tab where this Webpage is being displayed.
| | 02:41 | That tab displays the HTML title tag
and right now that is set to Home, why
| | 02:46 | because this is the homepage and Joomla!
sets it up as Home by default.
| | 02:50 | But it's by itself is not a
terribly descriptive HTML title tag.
| | 02:55 | Search engines weight words that
are located in the HTML title tag,
| | 02:59 | actually fairly heavily.
| | 03:00 | And what's more, if you're trying
to bookmark a Webpage, right now I'm
| | 03:05 | bookmarking something called Home
which tells me nothing about what the
| | 03:08 | site that I'm going to.
So, by default Joomla!
| | 03:11 | ships without this turned on, but it's
far better to change this setting because
| | 03:15 | it will make your page name a
little bit more descriptive.
| | 03:18 | So where it says include site name and
page titles, they are talking about this
| | 03:21 | site name that you set over here in
the left column and we're going to change
| | 03:25 | that to either After, so it
would say Home-KinetECO, Inc.
| | 03:28 | or Before so it would say KinetECO, Inc.-Home.
| | 03:33 | And some people have philosophies as
to whether one is better than another;
| | 03:37 | I'm going to say Before because I
like that better for bookmarking.
| | 03:41 | You can certainly say After if you think
search engines prefer that type of thing.
| | 03:45 | So by putting this to Before and saying
Save again, when I refresh the front-end
| | 03:51 | of the Website, click on the Refresh
icon, you'll see now that my tab says
| | 03:56 | KinetECO, Inc.-Home, so that's
a little bit more descriptive.
| | 04:01 | But of course the word Home
isn't terribly descriptive either.
| | 04:04 | I'll show you how to customize the rest
of this HTML title tag in a future video.
| | 04:10 | But this is key to the first part of it, at
least get the company name in the HTML title tag.
| | 04:15 | Okay, so down here a little bit further
on the page on the left hand side we
| | 04:19 | have the ability to set up our metadata
for this Website including a meta
| | 04:23 | description and meta keywords.
| | 04:24 | My understanding is that search engines
generally aren't reading meta keywords
| | 04:28 | these days, so I didn't prepare any of those.
| | 04:30 | But I do have a meta description;
it's inside your Exercise Files.
| | 04:34 | And if you open that up there's a
little bit of text that is located there.
| | 04:38 | I am going to go ahead and highlight all
of that and say Edit>Copy and I'm going
| | 04:43 | to go ahead right here in this box and
do a Ctrl+V or Cmd+V to paste in that
| | 04:48 | text right here in this box.
| | 04:50 | And you'll see, well it put in a little
funny space there so I'll get rid of that.
| | 04:55 | You'll see that I have a
nice meta description here.
| | 04:59 | This meta description will
display on every page of the Joomla!
| | 05:02 | Website unless I choose to override it
on a page by page basis which I can do
| | 05:06 | either through an article or through a
menu item and I'll show you how to do
| | 05:10 | that in a future video.
| | 05:12 | But I think it's a good practice to set
a global site meta description, because
| | 05:16 | they are used in Google and because
the keywords that are located here can be
| | 05:20 | weighted again for search engines.
| | 05:22 | So, write a short, precise meta
description that's full of keywords that people
| | 05:26 | will use to find your Website and
make sure you put it on in here.
| | 05:30 | The last few parts here that might be of
interest to you down here at the bottom
| | 05:34 | is a thing that says Show Joomla! Version.
This does not show the Joomla!
| | 05:38 | version on the back-end of Joomla!
This will show the Joomla! version
| | 05:41 | in the HTML head of the documents.
| | 05:44 | So if somebody viewed the source for
the Webpage they would see what's called a
| | 05:48 | meta generator tag, it's another type
of meta tag that would indicate that the
| | 05:52 | site was built using Joomla! 3.0.1
| | 05:54 | in this particular case,
what I am using to record today.
| | 05:59 | And so some people feel that that is a
security issue, so you may not want to
| | 06:04 | show that and that is in fact
why this is turned off by default.
| | 06:08 | But if you wish to show your Joomla!
version in the head of your Joomla!
| | 06:11 | document you can certainly turn this
on, so that's what that's there for.
| | 06:15 | Alright, scrolling back on up to the
top here, there are some additional tabs
| | 06:20 | here that you can look through.
| | 06:22 | In general, things that are located
under System are things that you're not
| | 06:25 | going to need to change.
| | 06:27 | These are things like Cache
Settings and Session Settings and
| | 06:29 | Debugging Settings.
| | 06:31 | One of the things though that might be
helpful to you is the Session Lifetime.
| | 06:35 | The Session Lifetime is how long can
you walk away from your screen while
| | 06:39 | working with Joomla!
| | 06:41 | and then return but still be logged in
and right now that's set to 15 minutes.
| | 06:45 | So I can walk away from my computer for
15 minutes or up to 15 minutes and when
| | 06:50 | I come back I'll still be logged into
the back-end of Joomla!, Many people
| | 06:53 | like to change this to a larger number than 15,
in fact I'll go ahead and change mine to 30.
| | 07:00 | I would not recommend changing your
Session Lifetime to any more than about
| | 07:04 | an hour, 60 minutes.
| | 07:06 | And the reason why is, you want to
automatically be logged out of the site if
| | 07:11 | for some reason you walk away for an
extended period of time, you don't want to
| | 07:15 | leave yourself logged in as a session,
somebody could come up to your computer
| | 07:18 | and make changes to your Website and
it's just generally a bad practice to stay
| | 07:22 | permanently logged into the back-end of your
Joomla! Website, it's a security issue.
| | 07:27 | So up the Session Lifetime if
you wish but don't up it too far.
| | 07:32 | So I am going to go ahead and hit my
greens Save button to take that setting.
| | 07:37 | Over here on the Server tab there is
pretty much nothing here you'll ever need
| | 07:41 | to change unless you want to
change your Server Time Zone.
| | 07:44 | So right now this is set to
UTC or Greenwich Mean Time.
| | 07:48 | You can change this on a city by city basis,
at least for those of us in the United States;
| | 07:53 | you can also set this on
a basis of your country.
| | 07:56 | So if you hit the down arrow here
Africa is listed first followed by America
| | 08:01 | and America you can find cities here that
would be relevant to your particular time zone.
| | 08:06 | I am here on the West Coast of the
United States so I am going to choose
| | 08:10 | Los Angeles, but you could certainly set
this to New York or Indianapolis or some
| | 08:14 | of the other major cities that would correspond
to other Time Zones into the United States.
| | 08:19 | And if you're in a country where there
is only one time zone you'll find your
| | 08:22 | country listed in the list.
| | 08:23 | You may eventually want to change
something with Mail Settings, you probably
| | 08:28 | won't need to touch the FTP Settings
and you shouldn't need to touch the
| | 08:32 | Database Settings, you set all of that
up as part of your installation process.
| | 08:38 | Under permissions you'll see that
this is where some of the ACL issues come in,
| | 08:42 | I am going to cover this in detail in
the chapter on ACL, the Access Control Lists.
| | 08:48 | For right now don't touch anything here, it's
very easy to break your site messing with ACL.
| | 08:53 | And then finally there's a tab here for
Text Filter Settings, this controls what
| | 08:57 | kind of HTML tags various levels
of users can put into their Website.
| | 09:01 | I now have a video later where I'd
go through this screen in detail.
| | 09:06 | So, pretty much the only things you're
really going to need to touch inside of
| | 09:09 | the Global Configuration are this first
tab, first Site, there are a couple of
| | 09:13 | issues that you may want to change and
then possibly under System you may want
| | 09:17 | to change the Session Settings to a
higher number, but don't go over an hour.
| | 09:21 | The rest as these tabs are things that
you may not necessarily really need to
| | 09:25 | change or they are things that you're
going to change in a different context and
| | 09:29 | I'll be going through those
in many of the upcoming videos.
| | 09:32 | So for now I am going to go ahead and
hit Save & Close and this will return me
| | 09:37 | to my Control Panel.
| | Collapse this transcript |
| Using the Media Manager| 00:00 | The next thing I'd like to cover is the
Media Manager and the Media Manager is
| | 00:04 | where you can upload images or PDFs or
any kind of document that you'd like to
| | 00:12 | display inside of your Joomla! Web site.
| | 00:14 | And this is where you can organize
those kinds of assets by folder and have an
| | 00:19 | interface for uploading those particular
assets, we'd like to show you how that works.
| | 00:23 | You can get to the Media Manager here
from the Control Panel either here on the
| | 00:27 | right-hand side where there's a link
to the Media Manager or you can go up on
| | 00:32 | the top and go to Content>Media Manager,
either location gets you to the same
| | 00:36 | place and this is Joomla!'s Media Manager.
| | 00:40 | So what you'll see here by default when
you arrive on this Web site is you have a
| | 00:44 | structure of folders over here on
the left side of the screen and that
| | 00:48 | corresponds to the banners folder which
you see here in the middle of the screen,
| | 00:51 | the headers folder which is
right here and sample data.
| | 00:56 | Inside of sample data you'll see that
we have some additional folders that are
| | 00:59 | available, the fruitshop, the
parks, the animals and the landscape.
| | 01:02 | We also have a few versions of Joomla!
| | 01:04 | logos that are located here directly
inside the Media Manager that are just sort
| | 01:09 | of hanging out here, they are
not necessarily in a folder.
| | 01:12 | For those of you who are familiar
with prior versions of Joomla!,
| | 01:14 | specifically Joomla! 1.5,
| | 01:15 | this is no longer in the images/
stories folder inside of your Joomla!
| | 01:22 | Web site, this is now just
the regular old images folder.
| | 01:25 | And inside of that you can make
as many subfolders as you like.
| | 01:29 | When you install Joomla!
| | 01:30 | it does come with these folders with
some additional images in them, so if I
| | 01:34 | double-click for example on the banners
folder, you'll see that there are a few
| | 01:38 | of these banners that are here and available.
| | 01:40 | Clicking on this up button
will take us back up a level.
| | 01:43 | If I double-click on the headers
folder you'll see that here are some headers
| | 01:46 | that are available for use in the Web site.
| | 01:48 | these are used in the sample data for
some of the layouts like the blog layout.
| | 01:53 | Hit the up button again.
| | 01:55 | And here inside of the sample data
folder we have the fruitshop and the park
| | 01:59 | site, either one of these you can
click on and you can go into, you'll see
| | 02:04 | more information and some sample pictures
that are here that you can use on your Web site.
| | 02:09 | So if you happen to be making a site about
Australian animals anyway or about a fruitshop.
| | 02:14 | so you can either click on these
folders to get back on up to a specific folder
| | 02:19 | or you can just keep hitting the up
arrow and you'll wind up at the top of the
| | 02:23 | directory structure.
This is the Thumbnail View;
| | 02:26 | you also have a Detail View, so if you
click on that you'll see the dimensions
| | 02:30 | of the images are listed here in
a column as well as the file size.
| | 02:33 | You could also check off some images if
you'd like to delete them from the site entirely.
| | 02:38 | So what I'd like to show you is how to
upload a picture here to the Web site, and
| | 02:44 | so what I am going to do first of all
is I am going to go ahead and create a
| | 02:49 | folder here inside of this Web site and
I am going to Create Folder, this gives
| | 02:54 | me an interface for creating that
particular folder and I'm going to go ahead
| | 02:59 | and call this blog, because may be I
want to put my blog pictures in this
| | 03:02 | particular folder, so I am going
to go ahead and create that folder.
| | 03:07 | And you'll see here that I've
created a folder here called blog.
| | 03:10 | Now if I click on the blog folder, you
see absolutely nothing and that's because
| | 03:15 | I have not put anything in the blog folder.
| | 03:17 | so now I'd like to go ahead and upload
some pictures here and that's located
| | 03:22 | over here in the big green button over
here in the left-hand corner, go ahead
| | 03:26 | and click on the Upload button and
this will give you an interface for
| | 03:29 | uploading pictures.
| | 03:30 | So if you go ahead and hit the Browse
button, the Browse button will take you to
| | 03:35 | your computer where you can
go through and find your files.
| | 03:39 | I am going to go to my Desktop, to my
Exercise Files folder, inside of Chapter2,
| | 03:44 | inside of video number four, I
actually have three pictures here.
| | 03:48 | So I can go ahead and upload, believe
it or not, all three of these pictures at
| | 03:52 | once without having to select the
one at a time as we have in previous
| | 03:57 | versions of Joomla!.
| | 03:58 | So if I just hold down my Shift key
and select all of these and say open and
| | 04:04 | then say start upload, all of my
pictures will be uploaded into the Joomla!
| | 04:08 | interface right into the same folder.
| | 04:11 | If I wanted these to go to different
folders I'd need to navigate to those
| | 04:14 | folders and then upload the pictures
that belong in that particular folder.
| | 04:18 | If I want to take a look at these
pictures in a little bit more detail,
| | 04:22 | if I click on the icon itself this will show
me a larger version of the picture so
| | 04:26 | I can see what that looks like.
| | 04:28 | And something else that you should know
about is how to delete these pictures.
| | 04:34 | So if I want to get rid of one of
these pictures I put this one in the wrong
| | 04:38 | place, so if I put a checkmark next to
it, I can hit the Delete button here at
| | 04:43 | the top and that will delete that
picture for me, or if I want to upload it
| | 04:48 | I can certainly re-upload that picture again.
| | 04:51 | So these are the kind of things that
you can do here in the Media Manager,
| | 04:56 | you can upload these pictures;
you can upload many pictures at once.
| | 04:58 | The Options button here, it's really
only available to super administrators
| | 05:02 | in the default Joomla!
| | 05:03 | configuration and here inside of
Options is a place that you can setup
| | 05:08 | some specific configuration issues.
| | 05:10 | First of all, what kinds of files will you
allow to be uploaded into the Media Manager.
| | 05:15 | So by default this list of
extensions are what are allowed.
| | 05:18 | So bitmaps, the csv format, which is
associated with spreadsheets usually,
| | 05:24 | the doc format as in Windows documents, gif,
jpegs, these are associated with pictures.
| | 05:32 | And actually if you scroll in over here,
I am just going to hit my arrow key so
| | 05:37 | I can keep on scrolling to the right
you'll see that pngs and pdfs and ppts
| | 05:41 | which are all very popular things to
upload are allowed here as well,
| | 05:45 | and we also have the uppercase
version of all of these things.
| | 05:47 | But, for example one of the file types
that's not allowed for upload is DOCX,
| | 05:53 | that's that new Microsoft Office
extension particularly on the PC where it saves
| | 05:59 | a file, it's DOCX instead of DOC.
| | 06:02 | So I can actually add to this simply by
typing inside of this box, I can put in
| | 06:07 | a comma (,) and just type in docx.
| | 06:10 | So now I am permitting people to
upload the newer Microsoft Word version
| | 06:14 | directly here into the Media
Manager by adding that extension.
| | 06:18 | If I don't add that extension then even
if I have the Microsoft Word 2010 file,
| | 06:23 | I can't upload it into the Media
Manager and this is the reason why.
| | 06:26 | Some of these other file formats may
be you don't want to uploaded, so you
| | 06:30 | could certainly also take those out.
| | 06:32 | The maximum size for your file upload
is listed here and so maximally right now
| | 06:37 | you can only upload a file size of 10 megabytes.
| | 06:41 | That might be a good thing or it might
be a bad thing depending on what kind
| | 06:45 | Web sites you're working on.
| | 06:46 | Some PDFs are really truly enormous
and you might need to up this limitation.
| | 06:50 | On the other hand maybe you don't
want your client downloading their images
| | 06:54 | right from their digital cameras and
putting them directly onto the Web site
| | 06:58 | without resizing them and this
would prevent them from doing that.
| | 07:01 | So you may need to adjust
this maximum size in megabytes.
| | 07:05 | Keep in mind also that PHP itself
has a maximum size for uploads as well.
| | 07:12 | So if you are having issues with
uploading files and you've adjusted this
| | 07:16 | number here inside of Joomla!
| | 07:18 | to a number that's greater than the
file that you want to upload but you still
| | 07:21 | can't upload it, check your PHP
settings, you may find that the PHP
| | 07:26 | has a maximum file size set there.
| | 07:29 | Further down on the screen are some
other things that you can configure.
| | 07:33 | One of the things that I've gone
through in the past is the Flash uploader,
| | 07:37 | the Flash uploader used to allow you to
upload multiple files at once and it was
| | 07:40 | the only way to do it.
| | 07:42 | These days I would recommend you
ignore the Flash uploader altogether.
| | 07:45 | Why? Well, Joomla!
| | 07:46 | is now compatible for mobile phones
and mobile devices which means iPads,
| | 07:50 | iPhones and of course Android is
no longer supporting Flash either.
| | 07:55 | So by turning on the Flash uploader
you're basically indicating that people
| | 07:59 | would not be able to upload images
on their phones and their tablets.
| | 08:03 | So it's probably a bad move to turn
that on at this point in time and since the
| | 08:08 | regular image uploader is now
supporting multiple image uploads,
| | 08:10 | there's really no reason to turn on
the Flash uploader.
| | 08:12 | Alright, so that's what's here and we
can go ahead and say Save & Close, which
| | 08:17 | will save our setting changes that
we've made and close out of that screen
| | 08:21 | returning us here to the Media Manager.
| | 08:23 | So the Media Manager is where you're
going to locate all of your images
| | 08:27 | for the Web site that are associated with
articles and that kind of thing.
| | 08:31 | You can also upload your PDFs here,
your Word documents, any PowerPoint
| | 08:35 | presentations or other file types that
you're going to want to have associated
| | 08:39 | with your content on your Joomla! Web site.
| | Collapse this transcript |
| Creating content in Joomla!| 00:01 | Now that you have gotten a sense of how Joomla!
| | 00:03 | is working, let's work on
creating some content in Joomla!.
| | 00:06 | To make an article appear on our
Web site, we have to follow three steps.
| | 00:10 | First of all, we want to create a
category for the content, if that category
| | 00:14 | doesn't already exist.
| | 00:15 | Then we will create an
article within that category.
| | 00:20 | And finally we'll create a link to
the article in the menu. In Joomla! 1.5,
| | 00:24 | we had sections, categories, articles
and menus, the SCAM. In Joomla! 3.0,
| | 00:33 | the sections are gone, so now we have
categories, articles and menus or the CAM.
| | 00:43 | We can now nest categories as
many levels deep as we wish.
| | 00:49 | But each article still has a single
category assigned to it in the end.
| | 00:53 | You must create the category first, the
article second and the menu item third
| | 01:00 | due to the way that database is constructed.
You cannot go out of order.
| | 01:05 | Some users like to create all the
categories first then all of the articles,
| | 01:09 | then hook everything up to the menu;
| | 01:12 | others like to do the process of each
three of these for each item on the Web site.
| | 01:16 | Either way works fine, whatever
works for you is absolutely okay.
| | 01:22 | It doesn't matter which methodology you
prefer as long as you keep the steps in
| | 01:26 | order, category, article and menu, the CAM.
| | Collapse this transcript |
|
|
3. Creating CategoriesCreating categories for your site| 00:00 | Now that we are ready to put categories
into the Web site, I am going to walk you
| | 00:05 | through that whole process now.
| | 00:06 | So I'm here on the Control Panel
in the back-end of Joomla!
| | 00:09 | and the first place I am going to go is
the Category Manager and you can get to
| | 00:13 | the Category Manager by clicking on the
link over here on the right in the Quick
| | 00:17 | Icons for the Category Manager or
you can go to Content>Category Manager.
| | 00:21 | So I am going to go ahead and go here
to the Category Manager and you'll see
| | 00:25 | here by default we have a
category called Uncategorized.
| | 00:29 | There are no other categories at the
moment because we haven't created any.
| | 00:33 | So what we need to do is we need to
understand what our site map is so we know
| | 00:39 | what kind of categories that we want
to create here inside of the Category
| | 00:42 | Manager for our Web site.
| | 00:43 | So inside your Exercise Files I have given
you the sitemap for what we are going to build.
| | 00:48 | So we are going to start with the homepage
and the homepage is going to use that
| | 00:53 | Uncategorized category, so we have
got the homepage covered already.
| | 00:56 | I'll need to make a category called
Products for the Products page then
| | 01:00 | I am going to make a couple of categories
that are actually willing to be nested
| | 01:04 | inside of each other, I am going to
have an overall news category along with
| | 01:08 | some subcategories for Solar and Press Releases.
| | 01:10 | Then I am going to have some pages,
actually three pages that are all just about
| | 01:14 | information, so about the Company
Structure and Executives are all going to be
| | 01:18 | located inside of the About category.
| | 01:20 | And then the Links and the Contact Us
are going to be driven by components
| | 01:25 | so we are not going to need
Categories for those at all.
| | 01:27 | So why are all these pages in About, all
going under one category, but I have in
| | 01:31 | the News and Information areas,
these broken into separate?
| | 01:34 | Well, the reason why is this; under
the About part of this Web site, these are
| | 01:39 | just pages that are going to talk about
the company in general and the company
| | 01:43 | structure and the company executives,
they are just pages of text,
| | 01:46 | there is nothing really interactive that's going on.
| | 01:48 | So I'm just going to create those as
single articles and hook them up to my Web site.
| | 01:53 | But for my Solar Blog, where I am going
to be blogging about information about
| | 01:59 | cool new solar technologies and my Press
Release category, I am going to have a
| | 02:04 | number of articles that are going to
fall in these areas and once more I am
| | 02:08 | going to want to display these so
that I have little bits of introductory
| | 02:12 | information followed by a Read more link
and probably several of them on a page.
| | 02:15 | To accomplish that in Joomla!, I am going
to need to put them all in the same category.
| | 02:20 | So that's why I've chosen to assign separate
categories to under News and Information.
| | 02:25 | And for the Products category, we'll
actually have several individual products
| | 02:29 | as well and we can display
those together on a page.
| | 02:32 | So that's why they've got their own category.
| | 02:34 | In general what you are going to start
by doing is when you have a sitemap like
| | 02:39 | this, you can start by assigning a
category to each particular area and then you
| | 02:44 | can combine these, it doesn't necessarily
make a lot of sense to make a separate
| | 02:49 | category for each individual page.
| | 02:50 | So it didn't make sense to have an
About category, a Company Structure category
| | 02:54 | and Executives category.
| | 02:56 | So I lumped all those together under
About, but it did make sense to have
| | 03:00 | separate categories under the News and
Information part of the site, because
| | 03:03 | those are going to be large and there
is going to be many articles involved
| | 03:06 | in each one of those areas.
So that's always a good place to start.
| | 03:11 | Once you throw in Access Control
Lists or ACL on top of all of this, you
| | 03:15 | may need to adjust your Category Structure
again, but that's a fairly advanced topic.
| | 03:19 | So my advice would be start with your
sitemap, think about assigning categories
| | 03:24 | to certainly the major pieces of
navigation, assign categories to sub-navigation
| | 03:29 | if it seems required if you're going to
be doing something kind of bloggish or
| | 03:33 | if you are going to have a whole lot
of pages in the subcategories, otherwise
| | 03:36 | lump your sub-navigation under your
main navigation, if it's going to be a
| | 03:39 | simpler structure as it is under About
and that will get you started at least in
| | 03:44 | Joomla!, you may wind up tweaking things
later, but that's easy enough to do.
| | 03:48 | So don't worry about getting it absolutely
perfect when you start building,
| | 03:51 | you can always go back and
change things very easily.
| | 03:54 | So now what I need to do is I need to
create a Products category, a News and
| | 03:59 | Info category, a Solar category, a
Press Releases and an About category.
| | 04:05 | So five categories that I need to create.
Let me show you how to do that.
| | 04:08 | So I am going to start here
inside of my Category Manager.
| | 04:12 | In the upper-left hand corner is a big
green button that says New and that's
| | 04:16 | what I want to do, I
want to make a new category.
| | 04:18 | So I am going to go ahead and click
that button and it's going to ask me
| | 04:23 | for lots of pieces of information.
| | 04:25 | So the only thing that really
matters here is the title of the category.
| | 04:29 | So the first category I am
going to create is Products.
| | 04:32 | So all I need to do is type
that name here into the title.
| | 04:35 | Those of you who have worked with Joomla!
| | 04:38 | For some time, you may be amazed at
how simplified the screen has become,
| | 04:41 | that's because a lot of the options
that you use to see on the right side of
| | 04:46 | the screen have now been hidden, so
these are behind tabs where you have
| | 04:49 | options here for alternative layouts,
you can change Metadata Descriptions and
| | 04:53 | Meta Keywords associated with this and
you have a screen for sitting at ACL as
| | 04:58 | well associated with this category.
| | 05:00 | But for right now, none of those
things are really going to matter for us.
| | 05:04 | All we are interested in is
working on the title for this category.
| | 05:08 | So that's all I need to set up at the moment.
| | 05:11 | If I hit the Save & New button here,
I will save the Products category and open
| | 05:16 | up a new screen, which will have nothing in it.
| | 05:18 | So I can create my next
category which is News and Info.
| | 05:23 | I can hit Save & New again and create
my next category which will be called
| | 05:28 | Solar, Save & New again and I have
Press Releases and finally Save & New
| | 05:37 | one last time and I am going to set up About.
| | 05:40 | About is my last category of the five
that I needed to create, so this time
| | 05:45 | I'm going to hit Save & Close and by
hitting Save & Close, you can see that
| | 05:50 | I have set up my categories here for the Web site.
| | 05:53 | So at this point what I've done is I've
just created five categories, they are
| | 05:57 | all at the same level of hierarchy, but
what I really wanted to do was the Solar
| | 06:01 | category and the Press Releases category.
| | 06:03 | I wanted to set them up as children of the
News and Information category or subcategories.
| | 06:10 | So let's go back in and edit those,
editing a category is very simple,
| | 06:14 | all you have to do is click on the name of
the category and you can make whatever
| | 06:18 | changes are required and if you scroll
on down the page a little bit more you
| | 06:22 | will see some information down
at the bottom here for details.
| | 06:25 | And what I am going to do is I am going
to change this Parent dropdown here from
| | 06:30 | No parent to the News and Information category.
| | 06:35 | And I am going to hit Save & Close.
| | 06:39 | And you will see here in the Category
Manager that Solar is now located as a
| | 06:43 | sub-category under News and Info.
| | 06:46 | Likewise when I click on Press Releases
here and I scroll in down to the bottom,
| | 06:51 | under Parent, I am going to change
the parent to News and Info again.
| | 06:55 | Not Solar, if I have made Solar the
parent then News and Information would be
| | 06:59 | the main parent and then I'd have to
go to Solar and then I'd have to go to
| | 07:04 | Press Releases, which is not what I want to do.
| | 07:06 | I want Solar and Press Releases to be
at the same level, so News and Info will
| | 07:10 | be the parent in both cases.
| | 07:12 | And I am going to scroll back up
to the top and say Save & Close.
| | 07:16 | So there we go, now I have got my
two subcategories set up.
| | 07:20 | Joomla! allows you create as many subcategories
as you like, but this is really all we
| | 07:25 | need for this Web site, it's not an
enormous Web site, it's got a fairly simple
| | 07:28 | structure to it, so we have gone ahead
and set up all of the categories for the
| | 07:32 | Web site, we are doing great.
| | Collapse this transcript |
| Publishing, unpublishing, and trashing categories| 00:00 | I just showed you how to create
some new categories in Joomla!
| | 00:03 | and I showed you how to edit them, but I
didn't show you how to delete them yet.
| | 00:08 | So let's hop back into our Category
Manager which you can get to over here from
| | 00:12 | the Control Panel under Quick Icons, if
you're not already in there and let's go
| | 00:15 | ahead and create a new category here
just to show you how to delete them.
| | 00:20 | So I am going to create a category
called Delete Me and say Save & Close.
| | 00:24 | So there is my category here and to get
rid of this category what I am going to
| | 00:30 | need to do put a checkmark by this and
I click on the trashcan icon up top that
| | 00:35 | will send it to the Trash.
| | 00:36 | But just like your Macintosh or your
windows environment, all you have done so
| | 00:41 | far is actually put that
particular category in the Trash.
| | 00:46 | So the category still exists and that
can potentially cause trouble especially
| | 00:51 | if you decide later to go create
another category called Delete Me, you might
| | 00:55 | get an error about an alias
for that already existing.
| | 00:58 | If you really truly want your category
to be deleted entirely that it doesn't
| | 01:03 | exist in your Joomla! site
| | 01:04 | anymore anywhere else, here's the
second step you're going to have to do.
| | 01:09 | So over here on the side, on the left
side of the screen you will see that we
| | 01:14 | have a number of filters that are
available, one of which is Select Status.
| | 01:17 | This is a way you can filter categories
or articles by whether they're Published
| | 01:21 | or Unpublished, Archived, Trashed and so forth.
| | 01:25 | If I switch this to Trashed, this will
show me the fact that I still have this
| | 01:30 | category called Delete Me.
| | 01:32 | It's just sitting here in the Trash.
| | 01:34 | I could in fact restore this, if I
click the Trash icon here, roll my mouse over,
| | 01:40 | you will see that it says Publish
Item, what this will do is toggle this
| | 01:44 | to the Published state and you see
here now I am looking at my Trashed Items
| | 01:49 | and I don't see anything anymore, that's
because there aren't any more trashed items.
| | 01:54 | Over here under the Filters, see, so I
need to switch this back to my Published
| | 01:59 | items and there is that Delete Me
category one more time. Alright.
| | 02:03 | So now if I really want to get rid of
this, I put a checkmark by it and send it
| | 02:07 | to the Trash, so we know that it's now
under the Trashed state, so now if I go
| | 02:12 | to the Trashed state, there is the
Delete Me category one more time.
| | 02:15 | Now if I really, truly want to get rid of
it altogether, what I am going to do is
| | 02:20 | put a checkmark by this
and then say Empty Trash.
| | 02:24 | Now that item is gone, you see there
is nothing left in the Trash and if
| | 02:28 | I switch back to my Published categories,
you will see truly that category has now
| | 02:33 | gone, it no longer exists anywhere.
| | 02:35 | So what's the best thing to do,
to trash items or something else?
| | 02:40 | My sense is it might be
better just to unpublish things.
| | 02:44 | If you need to get rid of something
totally, if totally screwed up, it's
| | 02:47 | totaling wrong, it totally fine to send things
to the trash, but if your boss comes to
| | 02:52 | you and says I don't want that thing
displaying on the Web site anymore, rather
| | 02:56 | than trashing it, because you know how
bosses are, they may come back to you and
| | 03:00 | change their mind later, you
can always unpublish something.
| | 03:03 | So if you want to unpublish something,
all you need to do is, on the little green
| | 03:08 | icon here where it says Status, you
see if I roll my mouse over it, I get a
| | 03:12 | tooltip that says Unpublished Item.
| | 03:14 | If I unpublish this item, it actually
disappears from my list of categories
| | 03:18 | again because I'm showing only
Published categories, but if I switch to my
| | 03:22 | Unpublished categories, I still have a
category called About, it's simply not
| | 03:27 | available to show on the
front end of the Web site.
| | 03:30 | I can still get to it here
from the back end of the Web site;
| | 03:33 | it's very easy to re-establish it as
available, simply by clicking on the icon
| | 03:37 | again and publishing it.
| | 03:40 | So here, if you have your filter
here set to just Select Status, not to
| | 03:45 | Published or Unpublished, this will
show you both Published and Unpublished
| | 03:49 | items all together in the same list
or you can filter by Published and
| | 03:53 | Unpublished items the same way I
have just showed you with those filters.
| | 03:56 | However, I do want the About category to
be available to me because I'm about to
| | 04:01 | go create some content for the About category.
| | 04:03 | So I am going to go ahead and
check that off and make this Published.
| | 04:06 | The other way that you can publish and
unpublish items is to put a checkmark
| | 04:10 | next to things and use these buttons
up here on the top for publishing and
| | 04:14 | unpublishing or if you happen to be
editing a particular item, you can also set
| | 04:20 | the status down here in the dropdown
so Published, Unpublished, Archived or
| | 04:24 | Trashed, that's also available to you.
| | 04:26 | So remember that trashing
something is actually a two-step process;
| | 04:31 | you have to send it to the Trash and
then you have the empty the trash to get
| | 04:35 | rid of an item entirely and publishing
in unpublishing are really probably the
| | 04:38 | way you want to work with most of your
content inside of Joomla!, it means that
| | 04:42 | you have still got a copy of things
available, if you ever need to republish it
| | 04:46 | to the Web site, you can just click a
button and restore it to its previous state
| | 04:50 | whereas trashing of course, it's a
far more permanent kind of thing and it's
| | 04:54 | hard to get content back, like impossible,
if you do get rid of something from
| | 04:58 | your Web site and then it
turns out you need it later.
| | Collapse this transcript |
|
|
4. Creating Articles and Basic FormattingCreating individual articles| 00:00 | Now that we've created the categories
for this Web site, the next step is
| | 00:03 | the articles, right?
Remember the CAM, Categories, Articles, Menus?
| | 00:08 | We have created all the categories,
we are onto the articles and to create
| | 00:12 | articles for your Web site, we
need to go to the Article Manager.
| | 00:15 | You can get there by going to the
Article Manager from the link over here,
| | 00:19 | on the right side of the screen for
Article Manager, or you can go to
| | 00:24 | Content>Article Manager, either
way takes you to the same screen.
| | 00:28 | And here is the Article Manager, looks
a lot like the Category Manager,
| | 00:32 | that's by design, and as you see here,
there is absolutely nothing to look at,
| | 00:37 | that's because we haven't created any
articles for the Web site yet.
| | 00:40 | So let's go ahead and create some articles.
| | 00:42 | To do that, we are going to start by
clicking on the New button up here in
| | 00:46 | the upper left-hand corner and this
screen will let us go ahead and put
| | 00:50 | articles into the Web site.
| | 00:52 | So I am going to start by making my
About category or my About article,
| | 00:58 | so I am going to ahead and call this About
and the category I want this to go into
| | 01:02 | is the About category.
| | 01:04 | So I'm going to pick that
from my list of categories.
| | 01:07 | In your Exercise Files I have given
you two documents here, one is some stuff
| | 01:11 | for About Us, one is
some stuff for Our Products.
| | 01:14 | Scroll back on up to the top here,
here under the About page I have a Mission
| | 01:18 | Statement and a Company Description.
| | 01:19 | I am going to go ahead and highlight
that and Edit>Copy and then here inside of
| | 01:26 | my window inside of Joomla!, I'm
going to do a Ctrl+V or Cmd+V to paste
| | 01:32 | that content here into my Web page and
it looks like I have got a few funny
| | 01:37 | characters here that I may need to
clean up for whatever reason, must be
| | 01:41 | something weird that Notepad did.
| | 01:43 | So I am just going to clean up a
couple of those funny characters, hopefully
| | 01:47 | you won't any. Here we go, We've, so
you might just need to take a quick look
| | 01:52 | through your copy here and make sure that
nothing funny happened when you pasted it in.
| | 01:56 | Yeah that looks pretty good and
really that's all we need to do.
| | 02:01 | So all we need to do now is click Save
& New and we are going on to creating
| | 02:06 | another article inside of Joomla!.
| | 02:08 | So I'll create the next one here and in the
About us page, this is the Company Structure.
| | 02:13 | So that is the title of the article,
Company Structure, I am going to highlight
| | 02:18 | that and say Edit>Copy.
| | 02:19 | Then in here inside the box, Ctrl+V or
Cmd+V to paste and the category once
| | 02:23 | again is About and then I am going to
Copy my article which is all of this
| | 02:30 | wonderful stuff here, just scroll on
down and Ctrl+C or Cmd+C, Ctrl+V or
| | 02:35 | Cmd+V to paste it on into the Web site.
| | 02:38 | And then once again I am going to go
through and look for any little funny
| | 02:42 | characters or any other oddball things
that might have happened here in the Web site.
| | 02:45 | And I am just going to continue going
through and creating these articles now
| | 02:49 | inside of Joomla!, there are three
About us articles and in the Products copy,
| | 02:56 | there are several, there's a top
level products page which is about five
| | 02:59 | paragraphs long, followed by articles
on the Mini Panel, the Energy Bulbs, the
| | 03:04 | Solar Mug and the Low-Flow Shower Head,
so each one of those is going to be a
| | 03:09 | separate article as well.
| | 03:11 | So I am going to go ahead and take care
of those off-line and we're just going
| | 03:15 | to crank on through and set up a
whole bunch of articles on the Web site.
| | 03:19 | When you are done, and you visit your
Article Manager, you should see them listed there.
| | 03:23 | So I'll show you something like
what that's going to look like.
| | 03:26 | I'll go ahead and hit Save & Close and
you should see a listing of all of the
| | 03:30 | articles you've created here inside of
your Article Manager when you're done.
| | 03:32 | So I am going to go offline now and we
are going to go ahead and put in all of
| | 03:36 | those articles into Joomla!
and I'll see you in the next video.
| | Collapse this transcript |
| Formatting articles| 00:00 | Now that we have put a whole bunch of
articles inside of Joomla!, you might want
| | 00:04 | to apply some formatting to them.
| | 00:05 | To start with all we did was we just
copied out a bunch of stuff from Notepad
| | 00:09 | and dropped it all in the Joomla!
| | 00:11 | and they're really not formatted, and
they don't look terribly attractive.
| | 00:14 | So I want to walk you through some
things that you can do with Joomla!
| | 00:18 | and formatting your articles.
| | 00:20 | So I am going to go back to the Article
Manager, so Content>Article Manager and
| | 00:26 | you should see a whole bunch of articles
here at this point and I think there is
| | 00:30 | about eight or so that you put in, those
include a bunch of Products articles as
| | 00:35 | well as three About articles and
let's just start by clicking on the About
| | 00:39 | article, the very first one here on
the list, and this particular article was
| | 00:44 | divided into two parts, there was a
Mission Statement and then there was a
| | 00:47 | Company Description.
| | 00:48 | And normally what you do in this kind
of situation, would be to take those
| | 00:53 | words like Mission Statement and
Company Description and you might want to
| | 00:57 | mark then up, perhaps you want to set
these to be H2s and H3s since they are
| | 01:01 | headings on the page and so to do that,
it's a relatively straightforward,
| | 01:06 | I am just going to highlight the words
Mission Statement and I am going to go ahead
| | 01:10 | and set these to be H2s.
| | 01:11 | so I am going to pick Heading 2 and
there we go, I have set that to be an H2.
| | 01:16 | But actually the way this article is
set up right now is that everything on the
| | 01:20 | page to be H2s, probably because
this is divided up by line breaks.
| | 01:24 | So I am going to go head and put in an
actual return here and set the second
| | 01:28 | paragraph to be a true paragraph, using
that same dropdown, then I am going to
| | 01:33 | highlight the words here Company
Description and set those to be an H2
| | 01:38 | and so once again we are all tangled up
here, probably with line breaks.
| | 01:42 | How do we know what the HTML looks like?
| | 01:44 | Well, there is this handy button right
here called HTML, if I click that, this
| | 01:48 | will show me the HTML that makes up my
Webpage and you'll see here that I do in
| | 01:52 | fact have line breaks, double line
breaks, dividing up all of the stuff.
| | 01:55 | What they means is, is I apply H2s or
paragraphs, it's applying it to everything
| | 01:59 | that's on the page rather than to
specific lines or specific paragraphs of
| | 02:03 | information and what I needed to do is
make sure that this is actually divided
| | 02:07 | into separate paragraphs before I
go in throughput in the formatting.
| | 02:12 | You can also see what's going on in the
HTML not just through this little HTML button,
| | 02:17 | which puts things in a pop-up,
but you can also turn on and off the
| | 02:20 | editor here by the Toggle Editor button.
| | 02:23 | And here's what the difference is.
| | 02:25 | This HTML here goes through TinyMCE,
which is the editor that's in use here by
| | 02:30 | default on a Joomla! Web site.
| | 02:31 | So this is filtering some of the
stuff that you put into the Webpage.
| | 02:36 | If you use the Toggle Editor button
down here, you're essentially removing the
| | 02:39 | TinyMCE editor from the
entire flow of the Joomla!
| | 02:43 | Web site, so you're going
right straight into Joomla! itself,
| | 02:46 | into the database rather than
filtering anything through an editor first.
| | 02:50 | Sometimes that's an
important distinction to make.
| | 02:53 | So let me just go ahead and
take out these paragraphs.
| | 02:57 | What I am going to do is just hit the
Backspace a couple times and make sure
| | 03:01 | everything is on its own line just like
that and keep on going here, there are a
| | 03:09 | few more paragraphs to go and there we go.
| | 03:13 | So now that everything is on its own
line, now what I can do is here in the
| | 03:21 | second paragraph under Mission
Statement, I can set this to a paragraph.
| | 03:26 | Here under Company Description, I want
that as an H2, but these other things
| | 03:30 | I want as a regular old paragraph, there we go.
| | 03:32 | So now I have set up this page to have our
two headings here and I can say Save & Close.
| | 03:38 | There are some other things I might
want to do, say on the Executives page,
| | 03:44 | I have some executives that are listed
here, maybe I want to adapt those headings
| | 03:48 | in the same kind of way, so I'll let you
go ahead and edit this article, so that
| | 03:52 | you have some H2s set up for these
particular executive names followed by
| | 03:56 | a paragraph of their bio and I am
going to hit Save & Close again.
| | 04:01 | I'll go back and do that offline
after I am done here.
| | 04:04 | Then I am going to go down and to the
Company Structure page and here I might
| | 04:10 | want to do something like KinetECO Inc.
| | 04:12 | Administrative Headquarters and maybe I
want to highlight those words, maybe I
| | 04:18 | want to make them bold or italic or something.
| | 04:20 | So I could go through and I could
highlight each one of these items
| | 04:25 | and set them up with italics.
| | 04:26 | So as you see here there's a whole
bunch of stuff on this site, a whole bunch
| | 04:32 | of buttons that you can use and you can apply
it just about anything here inside of Joomla!
| | 04:38 | in your content, simply highlight and
click the button, works pretty much like
| | 04:43 | Microsoft Word does, so that you have
Bold and Italic, up here on the top.
| | 04:47 | The Underline button, I would not use,
it is available, but of course underline
| | 04:52 | on the Web typically means a link.
| | 04:55 | So, underlined text that's not
clickable is very confusing to users.
| | 04:58 | I would recommend you stay
away from the Underline button.
| | 05:01 | This is Strikethrough, if you want to
have text on your page with a line through it,
| | 05:05 | you can do some alignment things
here, Left, Center, Right or Justified.
| | 05:08 | You have the dropdowns that I have
showed you before, there aren't any
| | 05:11 | styles here at the moment, but we do have
some headings here, located under this dropdown.
| | 05:17 | You can make Bulleted or Numbered Lists,
you can indent things, you can undo
| | 05:21 | things or redo things, making links,
I'll show you in another video, or setting
| | 05:25 | up anchors and so forth.
| | 05:27 | But your number of tools here is
fairly limited, it is possible to change the
| | 05:32 | tools that you have available to you and
I am going to show you how to do that now.
| | 05:37 | If we go ahead and say Save & Close and
I am going to go to Extensions>Plug-in
| | 05:42 | Manager and the editor that's in use
here in Joomla!, this little editing
| | 05:46 | window called TinyMCE in a plug-in, it's a
little application that's running inside of Joomla!
| | 05:51 | that it gives us all these funky buttons
for formatting texts which are really
| | 05:56 | great particularly for clients.
| | 05:58 | If you scroll on down here in the Plug-ins
to the Editor, TinyMCE, and click
| | 06:02 | this, these give us some
configuration options for TinyMCE.
| | 06:07 | Switch here over to the Basic Options
and it will give you some options for
| | 06:12 | functionality and how this should look.
So right now we have this set to Advanced.
| | 06:18 | What I'd like for you to do is set this
to Extended and what Extended will do is
| | 06:22 | give you a whole bunch of buttons.
| | 06:24 | So if we go ahead and say Save & Close
and we go back to our Article Manager
| | 06:30 | and we click on some article again, you
now see that we have an extended array
| | 06:34 | of buttons, lots and lots of different
things that we can do here including adding
| | 06:38 | tables and formatting things which may
be very helpful depending on your kind of
| | 06:42 | Web site also some silly things, we can
put smileys into our text now, woohoo!
| | 06:47 | Or we could add things like the Embedded Media
and that kind of thing which is here as well.
| | 06:51 | Most importantly we have a
button for pasting for Microsoft Word.
| | 06:54 | So if I had a Word document and I had
copied text out of it, if you paste it
| | 06:59 | directly into Joomla!
| | 07:00 | what you will wind up having is some
horrible, horrible, awful terrible markup,
| | 07:04 | it's very, very tangled up and it
goes on forever and ever and ever.
| | 07:08 | So you should never paste from Word
directly because you'll just get a total
| | 07:13 | mess for your Web site, but if you click
on the Paste from Word button first and
| | 07:17 | paste here into this window using
Ctrl+V or Cmd+V to paste into this window,
| | 07:22 | this will clean up all of that
nasty word formatting and insert the
| | 07:26 | information into your Joomla!
| | 07:28 | document without all of the verbose
markup that makes such a mess in any content
| | 07:34 | management system, this is not a
problem unique to Joomla! by stretch.
| | 07:37 | So that is a very important button and it
might be a reason that you would want to do this.
| | 07:42 | You might be wondering how you can
control these buttons because, hey, maybe as
| | 07:46 | much as you love those smileys,
you'd really like to turn them off.
| | 07:49 | So let me show you how to do that real quick.
| | 07:52 | I am going to hit Save & Close to get
out of my About article and if I go back
| | 07:57 | to Extensions>Plug-in Manager and I
go back to TinyMCE, under Advanced
| | 08:03 | Parameters, now that I have picked
Extended, I do have the option here of
| | 08:07 | turning some of that functionality on and off.
| | 08:10 | This only works in the Extended mode,
so I could hide or show the fonts and
| | 08:15 | their availability or the Paste buttons and
so forth and I can just scroll on down here.
| | 08:20 | So smileys, I do not want smileys so
I can hide those by clicking the Hide
| | 08:25 | button here and say Save & Close and
now when I go back to Content>Article Manager,
| | 08:32 | I go back to my article, there will
be no more smileys up here in my list of tools.
| | 08:39 | I would recommend that you go through
and take out any of these buttons that you
| | 08:43 | don't want your clients using that
would be a wonderful, wonderful thing to do.
| | 08:48 | The formatting that you do inside of
the plug-in for TinyMCE will apply these
| | 08:52 | buttons to any person who's editing the Web site.
| | 08:55 | So everybody has the same set of buttons.
| | 08:58 | If you use one of Joomla!'s editor plug-ins
like JCE or some of the other editors,
| | 09:03 | you may have the option depending
on the on editor, of configuring sets
| | 09:08 | of buttons depending on what group
the user falls into, so that might be
| | 09:13 | something that's of value to you, if
you want to have a whole bunch of buttons
| | 09:16 | available to you, but you want your
client to have a smaller subset of buttons.
| | 09:20 | So that might be something to consider when
working with these editors inside of Joomla!
| | 09:26 | All right.
| | 09:26 | So I am going to go through and do some
more formatting of these articles and
| | 09:31 | I will catch you in the next video.
| | Collapse this transcript |
| Adding an external link| 00:01 | Dr. Lodine is one of the founders of
KinetECO and in his Bio that we just dropped
| | 00:06 | into this Web site, there's a mention of
a place called Wind Powering America and
| | 00:10 | he wants to be sure that we
provide a link out to that Web site.
| | 00:13 | So we are going to need to edit that
particular article, and make sure that
| | 00:17 | that link is in place.
| | 00:19 | So, we're going to need to edit that
article and make a link out to that Web site.
| | 00:25 | Inside of your Exercise Files, you'll
find a document that I have provided for
| | 00:30 | you and there is the link, and
it's this whole link right here.
| | 00:34 | Anytime to link out to an external
Web site, you're always going to need to be
| | 00:39 | sure to put http:// in front of that link.
| | 00:44 | If you don't and you leave out the
http://, you will make a link that goes
| | 00:49 | somewhere inside of the Web site, and
it's a broken link, because of course you
| | 00:53 | don't have a page called
windpoweringamerica.gov.
| | 00:56 | So, I've just gone ahead and highlighted
this link here inside of this document,
| | 01:01 | and I am going to say Edit>Copies, so that I
have this ready, when I am ready to go with it.
| | 01:06 | And now from my Control Panel in Joomla!
| | 01:08 | I'm going to go to my Article Manager,
so, Content>Article Manager, and I am
| | 01:12 | going to go to the Executive's page, and
here inside the Executive's page for
| | 01:17 | Dr. Lodine frequently collaborates with
Wind Powering America and the words
| | 01:22 | Wind Powering America are the words that
should link to the Wind Powering America Web site.
| | 01:26 | So, I am going to go ahead and
highlight those words just click and drag to
| | 01:30 | highlight them, and then to make the link,
all I need to do now is click on the Link icon.
| | 01:36 | It's the chain-link icon, in the
second row here, and if I click on that,
| | 01:41 | I can now Paste my link into this window
Ctrl + V or Cmd+V to paste in the
| | 01:45 | link and then comes the question of
whether I should open this link in a
| | 01:49 | New window or the same window.
| | 01:51 | Some people will tell you that when you
link to an external Web site, you should
| | 01:54 | always open in a New window, or New tab,
so that, your Web site is still open and
| | 01:59 | that people can get back to it.
| | 02:01 | Other people feel like you should
never open any windows in a New tab or
| | 02:05 | New window, you should always
open them in the same tab.
| | 02:08 | So in other words, people are leaving
your Web site, and they can't get back to
| | 02:12 | you except by hitting
the back button many times.
| | 02:15 | My advice to you is whatever feels
comfortable to you is fine, but treat all
| | 02:20 | external links on your Web site the same way.
| | 02:22 | So, if you decide that you are
going to go open External links in a
| | 02:26 | New window, open them all in a New window,
don't open some in the same window and
| | 02:30 | some in New Windows.
| | 02:31 | So, at KinetECO we have decided to
open them all in New windows, so here under
| | 02:35 | Target, where it says, open in this
window, or frame, we are going to switch
| | 02:39 | this to Open in a New Window, and then
we just say Insert, and you'll notice
| | 02:43 | that the words Wind Powering America
turn blue, and there's no underline.
| | 02:47 | This is the way that this
happens to look here inside of Joomla!.
| | 02:51 | Blue with no underline is in fact a link.
| | 02:53 | If I try to click this by clicking on
it right now, I'll roll my mouse over and
| | 02:58 | I am clicking my mouse as
hard as I can, nothing happens.
| | 03:01 | Why, because we're here editing
this article inside of Joomla!.
| | 03:05 | To test this link what I would actually
have to do is put this on the front end
| | 03:08 | to the Web site, and we haven't gotten
there yet, because we're still on the A in
| | 03:12 | the CAM, we did our categories
we're still working on our articles.
| | 03:15 | We haven't gotten to
linking them up to menus yet.
| | 03:18 | As soon as we do, we can test
that link to make sure it works.
| | 03:22 | So, that's all we need to do, go ahead
and say Save and Close and we've just put
| | 03:26 | an external link into our Webpage.
| | Collapse this transcript |
| Adding article images| 00:00 | So, so far we've created our categories,
we've created a bunch of articles, we
| | 00:04 | have formatted those articles, now you
are probably interested in putting some
| | 00:08 | images into those articles.
| | 00:09 | And fortunately, that's relatively
straightforward to do with Joomla!.
| | 00:13 | We can upload a lot of bunch of images
to our Media Manager if we have a lot of
| | 00:18 | images to upload or we can
upload the images one at a time on an
| | 00:21 | article-by-article basis.
| | 00:22 | So, I'm going to show you how to
upload images on an article-by-article basis
| | 00:26 | first, then I'll show you how we can
upload a whole bunch of them to the Media
| | 00:30 | Manager and then you can go through
and drop in those pictures in the other
| | 00:34 | articles here in this video.
| | 00:35 | So, I'm going to start by going to my
Article Manager, under Content>Article Manager,
| | 00:39 | and I'd like to add a picture to the About page.
| | 00:43 | So I'm going to start by clicking on
the About link and here inside of this
| | 00:48 | article what I'd like to do is have
this picture up here, sort of over here on
| | 00:53 | the right side of the screen, maybe
I'll make it opposite, the top of the
| | 00:56 | picture should be even with
the top of this paragraph.
| | 00:59 | So click where you'd like to have the
top of the picture aligned with and it's
| | 01:05 | the top of this paragraph, so I'm going
to click at the start of that paragraph,
| | 01:09 | that's where I'm going to want the image to go.
| | 01:11 | So I'm going to now click on this
Image button down here underneath.
| | 01:14 | Yes, there is an Image button up here
on the top, but this is actually a very
| | 01:19 | confusing way to insert images into
your document, because you have to know the
| | 01:23 | path to the image in order to use this
button, but the button down here on the
| | 01:27 | bottom will let you browse for
it, which is far more preferred.
| | 01:30 | So I'm going to go ahead and start by
clicking on this Image button down here on
| | 01:35 | the bottom and this will
show me my Media Manager.
| | 01:37 | So I can put any image that's
already here present inside of Joomla!
| | 01:41 | into my document this way, but I
want an image that's not currently here.
| | 01:46 | So, if I scroll on down the page here, down
at the bottom is the ability to upload a file.
| | 01:51 | So I can browse for that file by hitting
the Browse button, I'm going to go back
| | 01:56 | to my Exercise Files to Chapter 4 and to
folder number 4 and I've labeled all of
| | 02:02 | these pictures for you, so you
can match the picture with the page.
| | 02:05 | So I want this picture here to go on the
About page, so I'm going to select that
| | 02:10 | and say Open and then I'm going to say
Start Upload and you'll see that that
| | 02:15 | image was uploaded and it uploaded
directly into the Images folder.
| | 02:18 | If I had opened those to a subfolder,
I could upload into that subfolder.
| | 02:22 | So I'm going to go ahead and select the
about image here from my list of images
| | 02:27 | and then I can align it from here also.
| | 02:29 | I'll go ahead and align it to the
right side of the screen. I can put in an
| | 02:33 | alt tag, that is the alternative text that
will display if this picture doesn't appear.
| | 02:38 | It's also text that search engines
will read when they look at your Web site.
| | 02:43 | So we can say Wind farm in Bakersville
and you can, if you choose, copy and
| | 02:53 | paste that into the Image Title as
well which some search engines like text
| | 02:57 | there also and it can be the same text
and then once you're done with all of that,
| | 03:02 | back up at the top of the screen here,
go ahead and say Insert and you
| | 03:07 | will see the picture here up
here inside of your article.
| | 03:11 | Now we can't see this on
the Web site just yet. Why?
| | 03:13 | Because remember all of our articles
have to be linked up via menu to the front
| | 03:18 | end of the Web site, so we can't see how
this picture looks just yet, but we have
| | 03:24 | at least put it here and in place.
| | 03:26 | And I'm going to go ahead and say Save & Close.
| | 03:29 | Now as you saw, I actually had a number of
pictures that I'd want to upload into Joomla!
| | 03:34 | and then assign on an article-by-article
basis and I can continue to do that,
| | 03:38 | but I'm going to upload all these
pictures all at once and I can do that
| | 03:42 | through the Media Manager.
| | 03:43 | So if I go to Content>Media Manager and
I can just upload these, I have a bunch
| | 03:48 | of product pictures mostly, I could
make a folder for those or I could just
| | 03:52 | upload them directly
here into the Media Manager.
| | 03:54 | So I'm going to hit my Upload button
and I'm going to browse for all the rest
| | 03:59 | of these pictures, so I'm going to
hold down my Shift key and just select
| | 04:03 | everything and say Open and then I'm
going to say Start Upload and all of those
| | 04:09 | pictures will then be uploaded into Joomla!
so I have all of these other pictures here.
| | 04:13 | Now I can go through in each one of
my articles and let's say here are my
| | 04:18 | K-Eco Energy Bulbs.
| | 04:20 | In every case, I want to have
the picture aligned to the top of the
| | 04:25 | paragraph, so I'm going to click here
before the paragraph, click on the
| | 04:29 | Image button and then find the picture with
that name, so here's the picture for
| | 04:33 | KE-energy bulbs and I'm going to, once
again, align this to the right, I'm going
| | 04:40 | to put in a description like KinetECO
bulbs in a store and I'm going to go
| | 04:51 | ahead and say Insert.
| | 04:52 | So I'm going to repeat this process
now for many of these products pages that
| | 04:57 | I have gone ahead and put in place and
you go ahead and put those into your Joomla!
| | 05:01 | Web site and I'll see you in the next video.
| | Collapse this transcript |
| Using Read More| 00:00 | So, so for on our Joomla! site,
| | 00:01 | we've put in most of the sitemap
but we are missing some major areas
| | 00:05 | of that sitemap still.
| | 00:07 | We are missing our Solar blog, in fact,
the whole News & Information area,
| | 00:10 | the Solar blog and the Press Releases and
I'd like to go ahead and add those now.
| | 00:15 | In the course of putting in the Solar blog
I'll show you how to put in Read More links.
| | 00:20 | So I'm going to start by going to my
Article Manager and I am going to go ahead
| | 00:26 | and go there, and I am going to start
by making a new article, I am going to
| | 00:31 | click the New button here and I
am going to give this a title.
| | 00:34 | In your Exercise Files, you'll find a
document for the solar blog and I am
| | 00:39 | going to go head and take this first
article, Embry house - a model of energy
| | 00:43 | efficiency Ctrl+C or Cmd+C to copy
that, paste that right here into the title.
| | 00:47 | Our Category will be Solar and then I
am going to highlight here the article
| | 00:54 | itself Ctrl+C or Cmd+C the copy,
click in the article Ctrl+V or Cmd+V
| | 01:00 | to paste, there we go.
| | 01:01 | And what I'd like to have happen is,
when I put together my Solar blog finally
| | 01:05 | which I am going to do in the next
chapter on Menus, what I'd like to have on
| | 01:10 | the page when you go to the Solar blog
is the title of the article a little bit
| | 01:15 | of introductory text, and then a link
for Read More, and I think what I'd like
| | 01:19 | to do is for the picture that's associated
with this article, I am going to put
| | 01:23 | that down at the bottom of the article,
so it doesn't show up on that blog page.
| | 01:27 | So what I need to do now in Joomla!
| | 01:29 | is I need to specify
exactly where that break happens.
| | 01:32 | So what part of this article is going
to show up on that blog page, the little
| | 01:36 | bit of introductory text where the Read
More link will show up that I click on
| | 01:40 | it and I go to the full text of the
article which will show me all the text
| | 01:44 | and the picture on this page.
| | 01:45 | So where does that break happen exactly?
| | 01:47 | Well I think that we're just going to
make it happen between the first and
| | 01:51 | second paragraphs, right here.
| | 01:52 | So, make sure I've actually got this
is two paragraphs, I am going to click
| | 01:57 | right here before the start of the
second paragraph, and to put in that
| | 02:01 | Read More link all I need to do is click
the Read More button down here on the bottom.
| | 02:05 | This will put in a little red line
and the red line indicates that the text
| | 02:09 | above this is the introductory text,
this is what we'll show up on the blog page
| | 02:13 | followed by a button that says Read More.
| | 02:15 | And when I click that Read More button I'll
go to a page that will show this full article.
| | 02:20 | The last thing I need to add here is my
image, so I am going to put that on its
| | 02:25 | own line and I am going to click of my
Image button down here on the bottom,
| | 02:30 | I am going to upload an image and I am
going to put this in the blog folder that
| | 02:34 | I created earlier, so I am going to click
on that link, and I am going to upload
| | 02:39 | my picture by clicking on the Browse
button, and I am going to find my picture.
| | 02:43 | And that should be
labeled here, blog-solar-house.
| | 02:44 | So I am going to go ahead and
say Open and start the upload.
| | 02:48 | And I am picking that picture here
and I am going to put in my alt text
| | 02:56 | The Embry house, I am not going to set any
alignment because I've put this picture
| | 03:03 | on its own line, and then
I am going to say Insert.
| | 03:06 | So now I've got a big picture,
I have got my text here and so forth,
| | 03:12 | and that's all I need to do.
| | 03:13 | I am going to go ahead and say Save &
Close, and you can see that I have my
| | 03:18 | article right here inside of my Article Manager.
| | 03:21 | So what I am going to do now is,
I am going to finish putting in my Solar
| | 03:26 | articles, so I have a few more of
these Announcing K-Eco Mini Panels.
| | 03:31 | Trend in alternative energy usage, and
the Farmer installing solar power,
| | 03:36 | I have pictures for a few of these, you'll
find them in your Exercise Files folder,
| | 03:41 | here inside of my folder, I am also
going to put in this News and Information
| | 03:49 | article, it will be in the News and
Information category and I am going to put
| | 03:54 | in the articles here associated with
these press releases, there is three of
| | 03:57 | them, and there is pictures
associated with them as well.
| | 04:00 | So I am going to go through now, I am
going to put all of this content into
| | 04:04 | Joomla!, you do not need to put Read
More links inside of these press releases,
| | 04:08 | just put the Read More links inside of
the Solar blog articles and everything
| | 04:11 | else can go in as a regular article
and add some pictures, and I will see you
| | 04:16 | in the next video.
| | Collapse this transcript |
| Exploring featured articles and pages| 00:00 | We've now created content for
pretty much the entire Joomla! Web site.
| | 00:05 | We've got all of our press releases, our
solar blogs, our products, our about area,
| | 00:10 | it's all plugged into the Web site.
| | 00:12 | The links in the contact will be coming
later under Components portion of Joomla!
| | 00:16 | so the last thing that we are
missing is a page for the home page.
| | 00:21 | So let's go ahead and add that now,
and the way we do that as always we are
| | 00:26 | going to start by going to the
Article Manager and I am going to start by
| | 00:30 | creating a new article.
| | 00:31 | This time I am going to leave this to
the Uncategorized Category this is just
| | 00:35 | a quick little article, I am going to
put it on the home page of the Web site,
| | 00:39 | not terribly concerned about it being
assigned to the right category, and so
| | 00:43 | Uncategorised is a great catchall for
these little articles that are kind of
| | 00:46 | oddballs like this.
| | 00:48 | Inside of your Exercise Files, you'll
find I have created for you this home page
| | 00:53 | article, the first line of course is
the title, and I am going to
| | 00:58 | Ctrl+C or Cmd+C to copy that,
Ctrl+V or Cmd+V to paste that in,
| | 01:03 | and then the second paragraph of
information here I am going to highlight,
| | 01:09 | Ctrl+C or Cmd+C to copy, Ctrl+V or Cmd+V
to paste that on in, and it looks like
| | 01:13 | I've got a little bit of funky formatting, so
hang on just a second while I clean that up.
| | 01:18 | Now I've got my home article in place
here and it's actually very easy to make
| | 01:22 | this now appear directly on the
home page even without that menu link
| | 01:27 | we haven't yet created or edited at all,
and the way that we do that is we make
| | 01:33 | this a featured article.
| | 01:34 | The home page is configured so that
it will show featured articles from
| | 01:37 | any category of the Web site, and all
we need to do is indicate that this
| | 01:43 | is a featured article.
| | 01:44 | We can do that right here on the left
side of the screen under Details where
| | 01:48 | it says Featured, just change that to say
Yes, and go ahead and say Save & Close.
| | 01:53 | You'll see our article will appear
here in our list, here is that article,
| | 01:59 | Harnessing wind and sun for a cleaner,
energized planet and you'll notice next
| | 02:03 | to it is the star, and the star
indicates that this is a featured article.
| | 02:08 | You can turn the featured property on,
either through the article editing screen
| | 02:13 | as I just did, or you can click the star
right here inside of the Article Manager
| | 02:17 | to feature or un-feature articles.
| | 02:19 | Now if I go to the front end of the
Web site and I hit Refresh, I have my article
| | 02:25 | that appears right here on the home page
of the Web site, which is really great.
| | 02:29 | Now as you take a look at that I am
sure you're thinking about things like,
| | 02:33 | I don't want it to say Written by Super
User, and I don't like this Details,
| | 02:37 | Category, Hits, Published stuff, I just
wanted to say the text, and what is this
| | 02:42 | dropdown over here on the side.
| | 02:44 | Well it's all coming soon, so don't
panic, one thing at a time, at least we know
| | 02:50 | we have one article here
displaying on the Web site.
| | 02:53 | And that is a featured article, the
home page by default, displays all of the
| | 02:57 | featured articles on the Web site in a
blog-like format, so that is why we have
| | 03:01 | now at least one article appearing
on our Web site on the home page.
| | 03:05 | And you can add more articles to
this home page simply by featuring other
| | 03:09 | articles right here in the Article
Manager in the back-end of Joomla!
| | Collapse this transcript |
| Publishing, unpublishing, and trashing articles| 00:00 | As you're creating articles for your
Web site, you may wind up with some articles
| | 00:03 | that you don't want, or your boss
may come to your later and say, oh!
| | 00:08 | By the way, that article that was on the site,
well I don't want it on the site anymore.
| | 00:13 | So I want to show you how you can
manage your articles using the states
| | 00:16 | of Published, Unpublished, and
Trashed and comparing and contrasting
| | 00:20 | those particular states.
| | 00:21 | So I'm going to start by going to my
Article Manager, and here inside my
| | 00:26 | Article Manager, I have all these
articles that I've been creating through
| | 00:30 | the course of this last chapter.
| | 00:31 | So, I'm going to go ahead and create
another one right now just by clicking on
| | 00:35 | the New Button and I'm just
going to call this Trash me!
| | 00:39 | I'm going to leave it in Uncategorized and
I'm just going to put in some text Trash me!
| | 00:44 | I'm going to go ahead and say Save & Close.
| | 00:49 | So right now, I have that article.
| | 00:52 | If I scroll on down here in my
Article Manager, I can find it,
| | 00:56 | it's down here under T, Trash me!
There is my article.
| | 00:59 | So right now, this article is published
to the Web site, and you know that it's
| | 01:03 | published because there's
a checkmark next to it.
| | 01:05 | This indicates that the article is
published and available to display
| | 01:09 | on the front end of the Web site.
| | 01:10 | If I click on this green checkmark,
I can toggle this to another state which
| | 01:15 | is called Unpublished.
| | 01:17 | So, when my article is unpublished,
there's a red X that shows up here.
| | 01:22 | What that means is, it's
still here inside of Joomla!
| | 01:25 | it's still available, and I can get to
it here on the back end, I can manipulate it,
| | 01:30 | it just doesn't display on
the front end of the Web site.
| | 01:34 | That might be useful if I have
an article that I am working on.
| | 01:38 | But it's not quite ready to go live
yet, or maybe I have an article that
| | 01:42 | is seasonal, maybe I want to show a particular
article at certain times of the year.
| | 01:47 | But, at the other times of the year,
I don't want it to show in my Web site,
| | 01:51 | and I just like to unpublish it and
then republish it when the correct season
| | 01:55 | comes around again.
| | 01:56 | That is a great way to manage things
like any sort of holiday-related articles
| | 02:00 | or articles related to changing
seasons, whatever it happens to be.
| | 02:05 | The third state that we have for our
articles is actually to trash these.
| | 02:09 | In other words, send them to the trash.
| | 02:11 | And the way that you do that is simply
put a checkmark next to the article name
| | 02:16 | and click the Trash button up here on the top.
| | 02:18 | That will send the article to the trash.
| | 02:21 | You don't see it here in the list anymore.
| | 02:23 | And of course, the Trash works just
like the Trash that's on your desktop,
| | 02:28 | on your Mac, or your Windows computer.
| | 02:30 | When you put things in the Trash,
they are sitting in the Trashcan.
| | 02:33 | You can't do anything with them, you
can't access them, but they aren't quite
| | 02:37 | gone forever just yet.
| | 02:39 | You can always go into the Trash and
drag them out again, likewise in Joomla!
| | 02:44 | So right now, our article called Trash me!
| | 02:47 | is sitting in the Trash.
| | 02:48 | And we can drag it out of the Trash if we want.
| | 02:51 | But, you're not going to see it here in
this view, you can't get to it from here.
| | 02:56 | What you have to do is using these
filters over here on the left side of the
| | 03:00 | screen, I can go into the Trash,
and I can see actually here I've got a
| | 03:04 | couple of articles.
| | 03:05 | I made this one called Trash me!
| | 03:06 | and I trashed an article, I duplicated
something earlier today by mistake,
| | 03:10 | so I actually have more than
one thing here in the Trash.
| | 03:13 | And, so now what I'd like
to do is take this Trash me!
| | 03:17 | article out of the trash.
| | 03:18 | So, if I decided that I really didn't
mean to delete it, what I can do is put a
| | 03:23 | checkmark by this and click the Check
in button, that will move it out, or
| | 03:27 | I can click on this little trashcan right here.
| | 03:30 | And if I click on that, I'm going
to actually publish the item again.
| | 03:33 | So now, in terms of my articles that are
already trashed, well I have got this one.
| | 03:38 | You may not have any at all listed on
your screen, depending on what you've done
| | 03:42 | with your copy of Joomla!
| | 03:43 | And when I switch back to Published, I will
find that trashed article is listed right here.
| | 03:51 | It's back again.
| | 03:52 | So, once again, I can trash this
article again, checking next to that and
| | 03:58 | clicking on the Trash
icon to move it to the Trash.
| | 04:01 | And if I want to get rid of selected
article from the trash like Trash me! here,
| | 04:06 | I can put a check by it,
and I can say Empty Trash.
| | 04:11 | That will get rid of that one article only.
| | 04:13 | It actually leaves everything
else in the Trash that's not checked.
| | 04:16 | If I wanted to get rid of everything,
I'd of course need to check that also,
| | 04:20 | and click on Empty Trash to get rid
of this other article as well.
| | 04:23 | So, that's how you can get
rid of something entirely.
| | 04:28 | Now that I've trashed those two
particular articles, they are unrecoverable.
| | 04:32 | I cannot go back and I can't pull them
out of the Trash, just like it works on
| | 04:36 | your Windows or your Macintosh computer.
| | 04:38 | Once you've actually trashed
something in the Trash and it's gone, you've
| | 04:42 | emptied the Trash, there's no
way to get those articles back.
| | 04:45 | Same here in Joomla!
| | 04:47 | I really recommend that you use the Unpublished
feature more than the Trashed feature,
| | 04:51 | because you can always recover
from any mistakes that you make by
| | 04:54 | unpublishing something very easily.
Just switch it back to the Published state.
| | 04:58 | But, if that doesn't work for you where
you really, truly want to get rid of that
| | 05:04 | particular article, the Trash is
here, and you can certainly use it.
| | 05:07 | Just keep in mind that when you
empty the Trash, it's gone forever.
| | 05:11 | And if you drag something to the
Trash and somebody else is working on the
| | 05:15 | Web site and they trash it
forever, it still just is gone.
| | 05:18 | So, if you think you might ever
need it again, I really recommend just
| | 05:21 | using Unpublishing.
| | 05:22 | That's the way Publishing, Unpublishing,
and Trashing things work inside of Joomla!
| | 05:28 | with your articles.
| | Collapse this transcript |
|
|
5. Creating Menus for Your SiteUnderstanding and configuring menus| 00:00 | So, in the previous two chapters,
we've done an enormous amount of work.
| | 00:03 | We created all these
categories inside of Joomla!,
| | 00:06 | we dumped in a ton of articles with
images and article formatting, all kinds of
| | 00:12 | stuff, and now here we are in the
front end of the Web site, and it looks like
| | 00:16 | we've done absolutely nothing for
the last however long it's been.
| | 00:21 | All we've got here to show for this
is one page on the home page, and that's
| | 00:26 | because we haven't finished our CAM yet;
| | 00:28 | Categories, Articles, and Menus.
| | 00:30 | So, we're finally on to creating menu items.
| | 00:33 | We need to link to our content, it will
show up here in Main Menu, and then we
| | 00:38 | can navigate around on the Web site and see
actually finally what we've built so far.
| | 00:43 | So it's a great place to be right now.
| | 00:45 | There are two parts to the
way menus work inside of Joomla!
| | 00:50 | So, let's take a look here on the back end.
| | 00:52 | Part one is actually creating
the menu links inside of Joomla!
| | 00:57 | So, if you take a look here under Menus,
we have two links off of this, and the
| | 01:03 | one we're most frequently
going to use is Main Menu.
| | 01:06 | So, if we go to Menus>Main Menu, we
get a list of all of the menu links that
| | 01:11 | are current in the main menu, which right
now there is only one, it's the home link.
| | 01:16 | We'll be adding more of
these starting in the next video.
| | 01:19 | The other link off the
Menus menu is the Menu Manager.
| | 01:24 | And the Menu Manager looks like this.
| | 01:26 | And what happens here is
you can create more menus.
| | 01:31 | We'll actually do this in a little while.
We'll create a footer menu for the Web site.
| | 01:36 | So, of course that's going to
display down at the bottom of the Web site.
| | 01:40 | But right now, we only need one
menu and that is our main menu.
| | 01:43 | So, if you wind up on this screen,
you're in the wrong place.
| | 01:47 | You can get to the other place by
over here on the left side of the screen.
| | 01:51 | You can switch to menu items, that
will show you the Main Menu, or you can go
| | 01:55 | to Menus>Main Menu.
| | 01:57 | Now, this is just the way that you
configure what kind of links are going to
| | 02:01 | display inside of that menu, and what
kind of order they're going to appear in.
| | 02:05 | This does not control where on
the Web page that menu will display.
| | 02:10 | The fact that our menu is displaying
right here on the right side of the page
| | 02:14 | in this box is configured somewhere else
entirely, and that is configured under
| | 02:19 | Extensions>Module Manager.
| | 02:22 | So, we have a module called Main Menu.
| | 02:25 | This controls exactly where the menu
will display on the Web page, and how many
| | 02:30 | links are displaying within that
menu and their formatting and so forth.
| | 02:34 | So, this is a separate
part of the menu structure.
| | 02:37 | I will be covering it in a little while.
| | 02:39 | But, the first thing we're going to
concentrate on in the next several videos
| | 02:43 | is creating these menu links, so that
they will display on the Web page, and we
| | 02:47 | can see all of the great content that we've
been working so hard on in the last two chapters.
| | Collapse this transcript |
| Linking an article to the menu| 00:00 | Now that you understand the two
sides of the way menus work in Joomla!,
| | 00:04 | both configuring the menu itself, and where
it displays on the page through the module,
| | 00:09 | let's walk through how to
add a new menu item to our menu.
| | 00:14 | I'm going to make a link to the About page.
| | 00:16 | So I'm going to start by
going to Menus>Main Menu.
| | 00:21 | And, this is my Menu Item
Manager for the main menu.
| | 00:26 | Right now I have one link;
it's the link to the home page.
| | 00:29 | Joomla! makes this for you by
default when you install Joomla!
| | 00:32 | Now I'd like to add a link to the About page.
| | 00:36 | So, I'm going to start by clicking on the
big green New button just like we always do.
| | 00:41 | This is going to tell me that this is a
publish link which is exactly what I want.
| | 00:46 | And the next thing I'm
asked for is the Menu Item Type.
| | 00:49 | So to do this, I'm going to click the
Select button, and this is going to give
| | 00:53 | me the various types of links
that I might have on my Web site.
| | 00:57 | Well, I'm wanting to link to the
About article that I created earlier
| | 01:00 | in the previous chapter.
So, what would I click on?
| | 01:03 | Well, probably this thing
here that says Articles.
| | 01:05 | So I'm going to go ahead and click on that.
| | 01:08 | It's going to give me some
options where articles are concerned.
| | 01:11 | And all I want to do is just link to
one article, so it's probably this one
| | 01:16 | right here, the single article.
So I'm going to go ahead and choose that.
| | 01:20 | The screen is going to update a little
bit to reflect what is required within
| | 01:24 | this particular screen for showing
this About article link on the Web page.
| | 01:29 | And of course, the start items are
what you look for and that's what you
| | 01:33 | are required to put in.
| | 01:35 | So, first of all is, what article
are we going to add to the Web site?
| | 01:39 | Those of you who are familiar
with earlier versions of Joomla!
| | 01:41 | we used to always see this on
the right side of the screen.
| | 01:45 | Now it's over here on the left, because
this is one of the most important things
| | 01:49 | that we have to put in, is that
which article are we linking to.
| | 01:52 | So, I'm going to click on the Select
button again, and I can find my About
| | 01:56 | article from the list,
it's right here called About.
| | 01:59 | And I can give this a menu title.
| | 02:01 | This will be the words that
appear inside of the menu itself.
| | 02:04 | It's what you're going to
click on to go to this Web page.
| | 02:07 | So this is called About.
| | 02:08 | Yes, it's an article called About,
it's a menu item called About.
| | 02:13 | Now, I've called these both the
same things in this particular case.
| | 02:16 | But, I don't have to.
I could have shortened this.
| | 02:19 | The article title maybe
something like about KinetECO, Inc.
| | 02:24 | the amazing company founded five
years ago by visionaries based in Ventura,
| | 02:30 | California, or whatever that
great big huge long title is.
| | 02:32 | If you work in academia, you'll run into
these really, really long titles for articles.
| | 02:36 | And it's not suitable necessarily to
take that incredibly long title and turn it
| | 02:40 | into a link on your navigation.
| | 02:42 | So, you can always shorten
your navigation titles if needed.
| | 02:46 | In this particular case, it's one word.
| | 02:48 | So I've just called my article
and my menu exactly the same thing.
| | 02:53 | Going down a little bit further here, we
want that About link to occur on the Main Menu.
| | 02:58 | So I've got that selected.
| | 03:00 | And this is all we need to configure, just
these three start items or four start items;
| | 03:04 | the Menu Item Type which is a single
article, which article do we want to link to,
| | 03:09 | this one, what is it going to be
called on the page, this thing here,
| | 03:13 | and where is it going to appear?
Inside of the main menu;
| | 03:16 | that's all we need.
Go ahead and say Save & Close.
| | 03:19 | Now, we have two links;
our Home link and our About link.
| | 03:23 | If we go to the front end of the
Web site now and we refresh our page,
| | 03:27 | you'll notice that we have two
links that appear right here;
| | 03:30 | the link to the home page,
and a link to the About page.
| | 03:33 | If I click on the link for the About page,
I see my About page exactly as
| | 03:38 | I would expect, and you see here we have a title.
| | 03:41 | Please don't worry about all of
this blah, blah up here on the top.
| | 03:44 | I will be showing you how to get rid of
that in chapter 7, you can't get rid
| | 03:49 | of who it's written by and the category
it's in, or leave some of these things
| | 03:53 | on and turn some of them off.
I'll walk you through all of that then.
| | 03:57 | And than we have our text and we have our
picture over here on the side. So, this is great.
| | 04:02 | That's exactly what we were looking for.
| | 04:03 | Finally, we can see the results of all
of our work, and I'll see you in the next
| | 04:07 | video where I'm going to add
a few more links to this menu.
| | Collapse this transcript |
| Understanding parent and children menu items| 00:00 | Now that I have my About link on the
Web site, I can link to the other two
| | 00:04 | pages from our site map.
| | 00:05 | So we had an About page as the top
-level page and then we had some
| | 00:10 | sub-navigation associated with that.
| | 00:11 | That was a page about the executives
who are part of KinetECO and we had a page
| | 00:17 | about the structure of the company.
| | 00:18 | So, what I need to do now is I need to
link these two articles to the Web site,
| | 00:23 | and make them appear as
sub-navigation under About.
| | 00:26 | So to do that, I'm going to go to
Menus, and I'm going to go to Main Menu.
| | 00:33 | And right now I just have my
two links; Home and About.
| | 00:35 | So I'm going to add a new link to the Web site,
clicking the New button just like we always do.
| | 00:40 | My Menu Item Type, I'm going
to click the Select button.
| | 00:44 | And once again, I'm working with articles.
So I'm going to click on Articles.
| | 00:48 | And once again I just want
to link to a single article.
| | 00:51 | I just want to link to the executives page here.
So, I'm going to choose Single Article.
| | 00:56 | It's going to ask me which
article I want to link to.
| | 00:59 | I'm going to click on the Select
button, and I'm going to find the
| | 01:03 | article called Executives.
| | 01:04 | And I'm going to give this a Menu
Title of Executives, and the Menu Location,
| | 01:09 | it's going to be inside of
the Main Menu. All right.
| | 01:12 | Now, if I just hit Save, I'm not
going to hit Save & Close, I'm just going
| | 01:17 | hit Save, and when I refresh the
front end of the Web site, I now have three
| | 01:21 | links under my Main Menu;
Home, About, and Executives.
| | 01:23 | But, this isn't really what I want
because right now, executives is at the same
| | 01:28 | level as Home and About.
| | 01:29 | And the way that I showed this in my
site map is executives were sub-navigation.
| | 01:33 | So, what should happen here is from my
Home page, I should just see a link for About.
| | 01:39 | When I click on About, then I should
see the links for the Executives and for
| | 01:45 | the company structure.
| | 01:46 | So, there's one other thing I need to
change here inside of this configuration
| | 01:52 | screen, and that's down
here called the Parent Item.
| | 01:55 | Right now, that's set to the Menu Item Root.
| | 01:58 | Think of that as it's exactly
the same level as your home link.
| | 02:02 | That's not what we want.
We want this to be under the About link.
| | 02:05 | So, what we need to do here is
change this to the About link.
| | 02:09 | This way, this particular link for
executives will now show up under About
| | 02:14 | rather than showing up at the
same level as the home link.
| | 02:17 | Go ahead and say Save & New.
| | 02:19 | And if we refresh the front end of the Web site,
now you'll see that I'm here on the About page.
| | 02:27 | This little link over here for
executives just turned tinier, and it's got a
| | 02:31 | little line in front of it,
showing that it's indented.
| | 02:33 | When I click on the Executives
page, I get my executives text.
| | 02:36 | When I click on the Home page,
that link for executives disappears.
| | 02:41 | It's only present when I'm on the About page
or within the About portion of the Web site.
| | 02:46 | Okay. So let's just do that one more time.
| | 02:50 | I'm going to add one more
link here to the Web site.
| | 02:53 | Once again, this is for
the company structure page.
| | 02:55 | I'm going to click Select.
It's going to be articles.
| | 02:58 | It's still a single article.
| | 03:01 | And the article I'm going to select
is now this Company Structure page.
| | 03:06 | So, I'm going to go ahead, and click
that, my title will be Company Structure.
| | 03:11 | And the Parent Item will be
once again the About page.
| | 03:15 | It's not the Executives page.
| | 03:16 | If it was the Executives page, I'd
have to go to the About page, and then go
| | 03:21 | to the Executives page to finally see
the company structure page, and that's
| | 03:26 | not what I want to do.
| | 03:27 | I want to go to the About page, and see
both Executives and Company Structure.
| | 03:31 | So both Executives and Company Structure must
have the same parent, that's the About link.
| | 03:36 | So I'm going to go ahead and click
that, and I'm going to say Save & Close.
| | 03:41 | And now, when I refresh the front end of
the Web site, there is my link to Executives.
| | 03:46 | There is my link to Company Structure,
and they're both under the About page.
| | 03:51 | And when I go back to the Homepage, all of
that sub-navigation under About disappears.
| | 03:55 | So, that's how we create sub-navigation
with simple articles, and we've done
| | 04:02 | that now for the About portion of this Web site.
| | Collapse this transcript |
| Configuring Category Blogs| 00:00 | Now that we've got the About portion of
the Web site, it's up, it's posted,
| | 00:04 | let's work next on that solar blog, and the
news and information part of this Web site.
| | 00:09 | So, I'm going to start by creating a
link to the News & Information page.
| | 00:14 | And so, to do that, I'm
going to go to Menus>Main Menu.
| | 00:20 | Click on the big green New
button to add a new menu item.
| | 00:22 | And for the News & Information page,
this is just a top-level page on the Web site.
| | 00:28 | And in fact, right now, it's a placeholder page.
| | 00:31 | It doesn't say much, don't worry,
we'll be changing that later in the course.
| | 00:36 | So, under Articles, I'm going
to link to a single article.
| | 00:40 | And which single article am I going to link to?
| | 00:43 | Well, that's the News & Information page.
| | 00:45 | And I'm going to give this a Menu Title
of News & Info, and I'm going to call it
| | 00:51 | News & Info just to show you that I can
call the article News & Information,
| | 00:55 | but I can the menu News & Info,
something entirely different.
| | 00:58 | I want this at the same
level as my Home page link.
| | 01:01 | So, my Parent Item will
remain the Menu Item Root.
| | 01:04 | And I am going to go ahead and say Save & New.
| | 01:07 | If I refresh the front end of the
Web site, you'll see I have a link for
| | 01:11 | News & Info, and you'll see that
there's precious little there.
| | 01:14 | Again, we'll be adding to this page
later in the course, but for right now,
| | 01:19 | this is our placeholder information. Okay.
| | 01:21 | So now we need to make the solar blog, and
this is going to be sub-navigation to News & Info.
| | 01:27 | And it's a blog, so I'm not going to be
linking to a single article the way I did before.
| | 01:34 | So, when I click on my Menu Item
Type, I'm still going to Articles.
| | 01:39 | But, I'm going to go
make this a link to a blog.
| | 01:42 | So, I'm going to go to
the Category Blog down here.
| | 01:45 | And then, it's going to ask me which
category would I like to pull from?
| | 01:49 | Well, I'd like to pull from the Solar category.
| | 01:52 | And I'm going to give this
a Menu Title of Solar Blog.
| | 01:56 | And where is this going to live?
| | 01:58 | Well, it's going to be a sub-navigation
relative to News & Information.
| | 02:02 | So, I'm going to scroll on down my page here.
| | 02:05 | It's sort of scrolling
off the screen a little bit.
| | 02:08 | There we go down there;
| | 02:09 | News & Info is my Parent Item.
| | 02:12 | So, all I did this time was I picked
Category Blog instead of picking Single
| | 02:17 | Article, I've picked my category
of Solar and I gave this a title.
| | 02:21 | I set up my parent and I'm going
to go ahead and say Save & Close.
| | 02:25 | When I refresh the front end of the
Web site, there's my link to the Solar Blog.
| | 02:29 | And when I click on the link for
the Solar Blog, here is my solar blog.
| | 02:33 | So, you see here that I have a big article.
| | 02:37 | It stretches across the top of the Web page.
| | 02:40 | Then underneath, I have these two
columns of information with these other
| | 02:44 | additional articles.
| | 02:45 | And because we went through and we put
in those Read More links, you see here
| | 02:50 | that we have a Read More
link. It says Read more:
| | 02:53 | Farmers installing solar
power in record numbers.
| | 02:54 | If I click that, I go to the full
article for the Web page, and there's my big
| | 03:00 | picture associated with that.
| | 03:01 | So, that is the way my blog is currently
working, and I already hear the graphic
| | 03:08 | designers kind of complaining in the background.
| | 03:10 | They are wondering whether this can
look a little bit different, and can we do
| | 03:14 | anything with the layouts
and how can we improve this?
| | 03:16 | Well, there are some things that we can
do to tweak the look of a category blog,
| | 03:20 | and I'm going to cover all
of those in the next video.
| | Collapse this transcript |
| Advanced Category Blog configuration| 00:00 | So in our previous video, we created
a category blog for our Solar blog.
| | 00:05 | And this particular blog had about five
articles in it and you see that they are
| | 00:10 | displayed here on this
page, four articles I guess.
| | 00:13 | You see that we've got one big article
stretching across the top and then it
| | 00:17 | seems like we have columns
underneath, where we have some additional
| | 00:21 | articles located here.
| | 00:22 | And you're probably wondering
how we can change this layout.
| | 00:25 | Fortunately, it's not that awful.
| | 00:29 | And we can in fact change this layout
just using Joomla!'s interface, you don't
| | 00:33 | have to deal with HTML or
CSS or anything like that.
| | 00:36 | So here in the backend of Joomla!,
let's go to Menus>Main Menu one more time.
| | 00:42 | And we are going to go
down to our Solar blog link.
| | 00:45 | If you go ahead and click on that to
edit it, and so far we've only worked here
| | 00:50 | on the Details tab which allows us
to set up the Menu Item Type and the
| | 00:54 | Category, the name of
the Menu Item and so forth.
| | 00:57 | But notice that there's
also an Advanced Options tab.
| | 01:00 | So if we start by going here, scroll
on down to where it says Blog Layout
| | 01:04 | Options, and you'll see here that
we've got four blanks for Leading Articles,
| | 01:10 | Intro Articles, Columns and Links.
| | 01:13 | And this is how we can
change the layout of our Web page.
| | 01:17 | So let's take a look at each
of these things individually.
| | 01:21 | Here, inside of a typical blog layout,
this is currently set up to have two
| | 01:27 | columns of information. How do we know?
| | 01:29 | Well, we've got two columns of information
right here, one column and two columns.
| | 01:33 | So that's the easy one.
| | 01:35 | Intro Articles indicates these are
articles that have a title, a little bit of
| | 01:39 | text followed by a Read More link.
| | 01:41 | And we have three of these, these
three down here on the bottom,
| | 01:46 | they are here in the columns.
| | 01:47 | And then finally, there is one that's
on the top that spans across these two
| | 01:50 | columns that's called the Leading Article.
| | 01:54 | Finally, we have this
thing down here called Links.
| | 01:57 | I don't have any of those showing
right now on the Solar blog because I don't
| | 02:01 | have enough articles that are
assigned to the Solar category just yet.
| | 02:04 | What the links would indicate is you
have a bullet followed by the title of
| | 02:08 | the article as a link that you can click on
and you can then go read the full article.
| | 02:12 | So it doesn't have the big title the
little bit of text on the Read more, it's
| | 02:17 | just a bullet and the title of the article
that you can click on to go read the full article.
| | 02:22 | By default Joomla!'s settings for
this is one Leading Article, four Intro
| | 02:28 | Articles, two Columns and four Links,
that is the numbers that Joomla!
| | 02:33 | is working with right off the bat.
| | 02:35 | If we want to change those global numbers,
these are globally set, we can change
| | 02:40 | them on a blog-by-blog basis simply
by typing in different numbers here.
| | 02:44 | So what I would like to start by doing
is saying instead of two columns, let's
| | 02:48 | just have one column.
| | 02:50 | And instead of having any links at all,
they are kind of unattractive and they
| | 02:54 | are a little bit confusing.
| | 02:55 | Let's set that to zero.
| | 02:57 | And then here for my Intro Articles, I usually
set this to a big number, like let's say 20.
| | 03:02 | And the reason why is, that way I'll have a
whole bunch of articles appearing on this page.
| | 03:08 | And if I have more than 20 articles
assigned to the Solar category, what will
| | 03:12 | happen is I will wind up with some
navigation on the bottom, a series of numbers
| | 03:16 | that I can click on to go to
more pages of more blog posts.
| | 03:21 | And then finally for the Leading
Articles, this is something that I very seldom
| | 03:25 | if ever use inside of Joomla!, I am
going to go ahead and set that to zero.
| | 03:29 | So these are the numbers that I
typically use for laying out my blogs,
| | 03:33 | particularly my Category blogs.
| | 03:34 | I am going to go ahead and click my
Save button here, that will keep me in
| | 03:38 | the editing screen.
| | 03:39 | And if I refresh my blog, now you can
see that I at least have these items
| | 03:45 | stacked on top of each
other, one after the other.
| | 03:48 | Okay, so one of the things you might
want to do is think about the order in
| | 03:53 | which these are appearing
on the particular blog.
| | 03:56 | Once again if we go to Advanced Options and
I go on down here to the Blog Layout Options.
| | 04:04 | I have some options here for ordering.
| | 04:07 | And this is here under
Category Order and Article Order.
| | 04:11 | I only have one category, so I'm
not going to group together any of my
| | 04:16 | articles by category.
| | 04:17 | So I don't need to mess with that, but
Article Order, I have some options here
| | 04:21 | that are worth exploring.
| | 04:23 | So first of all, I could list my
Featured Articles only, I could make this
| | 04:28 | actually a blog about Featured Articles
and I could order those or I could put the
| | 04:33 | most recent articles first which
probably is really what makes sense for my
| | 04:36 | Solar blog or I could put
the Oldest articles first.
| | 04:40 | I could put them in Alphabetical order
or Reverse, in order by Author, in order
| | 04:45 | by Hits that means in other words how
many times somebody has visited a page, so
| | 04:49 | the most popular pages wind up at the
top of a blog, or finally in something
| | 04:54 | called Article Manager Order.
| | 04:57 | What is Article Manager Order?
| | 04:58 | Well, let me show you what that is real quick.
| | 05:01 | I am going to get out of the screen by
hitting my Close button and if I go here
| | 05:07 | to the Article Manager, I have still
got this set to Trashed, so let me reset
| | 05:12 | that just to select status,
here is all of my articles.
| | 05:16 | What you'll notice right now is that for
the most part these are in alphabetical order,
| | 05:20 | I am not sure why Farmers installing
solar powers first, maybe I have a
| | 05:24 | stray space in front of that.
| | 05:26 | But for the most part this
column is in alphabetical order.
| | 05:30 | What I would like this to be
in is in order by category.
| | 05:33 | So what I am going to do here is I am
going to select like this dropdown over
| | 05:38 | here where it says Select Category.
| | 05:40 | And I am going to select just my Solar
category, that's all I really want to see.
| | 05:44 | And this is now showing me all of the
articles that I have inside of the Solar category.
| | 05:49 | And they are still in order by Title here.
| | 05:52 | And what I could do for example is I
could sort these by Author or I could sort
| | 05:56 | them by Date and this will put them in
some order with the oldest one down here
| | 06:01 | at the bottom and the newest one down
here at the top as I have sorted by date.
| | 06:06 | If I wanted these to be in a different
order like some sort of order that I fix,
| | 06:11 | I can click and drag and drop these.
| | 06:13 | So click on the little down arrows here
in this column and if you click on this
| | 06:19 | little icon, you can click and drag
these and that will reorder your articles,
| | 06:25 | so that they appear in a very specific order.
| | 06:28 | Let's say I want Announcing first,
followed by the Trend, followed by Farmers,
| | 06:32 | followed by Embry house, this is
the exact order that I want things in.
| | 06:36 | I could go ahead and do that.
| | 06:38 | And then what happens is, if I just go
to my blog here and refresh, nothing is
| | 06:42 | going to change in terms of the order
because by default, I think this is set to
| | 06:46 | have the most recent article displaying first.
| | 06:49 | What I will need to do is go back to
Menus>Main Menu, go back to my Solar blog
| | 06:55 | item and go back to Advanced Options
and down under Blog Layout options,
| | 07:03 | then down here I can change my
Article Order to Article Manager Order.
| | 07:09 | And if I say Save, now when I refresh my
blog here, this will reorder to exactly
| | 07:15 | the order that I have
inside of the Article Manager.
| | 07:17 | So the advantage here is that I can put
in my articles in whatever way I want,
| | 07:23 | but I can order them precisely in the
order of what I want them to appear,
| | 07:27 | right here on my page.
| | 07:28 | The downside to this is now you have
to tell your clients about how they need
| | 07:33 | to reorder their articles inside of
the Article Manager and it's part of the
| | 07:37 | procedure when they put in a new article
and it's an extra step for your clients.
| | 07:40 | So unless you absolutely positively
have to have these articles in a certain
| | 07:46 | order and ordering them something
simple like by Date, putting the most recent
| | 07:50 | one at the top of the page is not
going to work for you, use one of those
| | 07:55 | methods if at all possible because it
will just be easier for your client to
| | 07:58 | maintain the Web site once you're out
of the picture you're done building.
| | 08:02 | But if you have to order these things
in a certain order, the Article Manager
| | 08:05 | order can be very helpful.
| | 08:07 | And with that wonderful click-and-drag
interface, which is new to Joomla 3.0,
| | 08:11 | it's relatively straightforward to
reorder those articles and then have them
| | 08:15 | appear here on the Solar blog page.
| | 08:18 | So what I am going to do now is I am
just going to switch this back, I really
| | 08:23 | don't want this to display
an Article Manager Order.
| | 08:25 | So I am just going to
switch this back real quick.
| | 08:28 | Instead of Article Manager Order, I am
going to go back to the Most recent first
| | 08:32 | and I am going to say Save & Close and
now when I refresh my Solar blog, there
| | 08:37 | we go, this will be the oldest article
and it will be down at the bottom,
| | 08:42 | the Most recent article will be at the top.
| | Collapse this transcript |
| Configuring Category Lists| 00:00 | The next link I need to make on this
Web site is a link to the Press Releases and
| | 00:04 | what I'd like to do is, because there
are typically a lot of Press Releases and
| | 00:09 | because you can tell a lot from
a Press Release from the title,
| | 00:12 | they tend to be a little bit dryer
they're like product announcements and that
| | 00:16 | kind of thing, I am going to
take a different approach to this.
| | 00:19 | What I would like to do is I'd like to
have a Web page that displays a list of
| | 00:23 | just the titles of my Press Release and
that will keep my page short and people
| | 00:27 | will be able to scan through those
Press Releases really, really quickly to
| | 00:31 | find information that they need.
| | 00:32 | This is called a Category List and I am
going to go ahead and configure one of those now.
| | 00:37 | To do this I am going to go to the
Menus>Main Menu, and I am going to add
| | 00:42 | another new Menu Item to the Web site so
once again I am going to click the New
| | 00:46 | button and I am going to
select the Menu Item Type.
| | 00:49 | I'm still working with Articles.
| | 00:50 | So I am still going to look into Articles here.
| | 00:53 | What I am going to look
for now is the Category List.
| | 00:56 | A list of Articles in the category.
| | 00:58 | So I am going to go ahead and click on
that and then it's going to ask me which
| | 01:03 | category I would like to use.
| | 01:04 | Well, that will be the Press Releases category.
| | 01:06 | My Menu Title will be Press Releases and
then of course where would I like this located?
| | 01:11 | Well, I'd like this
located down under News & Info.
| | 01:15 | So I am going to go ahead and select
that from the list and I am going to ahead
| | 01:20 | and say Save & Close.
| | 01:21 | Now when I go to the front end of
the Web site and I click on News & Info,
| | 01:25 | underneath I have my two links, one
for Solar blog, the other for Press Releases.
| | 01:29 | When I click on Press Releases, you'll
see that I have a list of all of these
| | 01:34 | particular articles.
| | 01:36 | Right now I happened to
be logged into the Web site.
| | 01:39 | I actually logged into the
Web site a really long time ago.
| | 01:42 | It was way back when I was showing you
the Global Configuration and I showed you
| | 01:46 | how you can hide the whole site behind
and log in and because I'm logged into
| | 01:50 | the Web site here, which you can tell by
looking at this Login form, I have these
| | 01:54 | little icons over here
on the side that say edit.
| | 01:58 | That's because I have the credentials
to edit these articles from the front end
| | 02:01 | of the Web site, right here inside of Joomla!.
| | 02:04 | So what I'd like to do is
to get rid of all of that.
| | 02:08 | What I need to do is make sure I've logged out.
| | 02:11 | So I am going to click this Logout button here.
| | 02:13 | You may not even be logged into the
site, and if you're not logged in and you
| | 02:17 | have a Login form that looks like this,
you might not have ever seen those edit
| | 02:21 | icons over there on the side.
| | 02:23 | Now what you see here on the Press
Releases page is just a list of these Titles.
| | 02:27 | Notice that they also tell you that
they are Written by Super User, which you
| | 02:31 | probably really don't care about and
then over here on the side you have an
| | 02:35 | indication of how many hits each
one of these Articles has gotten.
| | 02:38 | You have a dropdown here on the top
so you can configure how many of these
| | 02:42 | things you're seeing in a time.
| | 02:43 | But you know we are missing a lot on this page.
| | 02:45 | We are missing the words Press Release,
we are missing a little bit introductory text,
| | 02:49 | and we probably want to clean up
the look of this a little bit, which I'll
| | 02:53 | show you how to do all that in the next video.
| | 02:56 | If you click on any of these though,
you will go into a page that will show
| | 03:00 | you the Press Release, along with the
picture and you can just go on through,
| | 03:04 | and you can click on those and see all of
your Press Releases are there and available.
| | 03:08 | But this page itself definitely needs a
little bit of clean up, which I'll cover
| | 03:12 | in Advanced category list
configuration in the next video.
| | Collapse this transcript |
| Advanced Category List configuration| 00:00 | So I'm here on my Press Releases page,
I just created this as a category list
| | 00:04 | in the previous video;
| | 00:05 | it's not a terribly attractive page.
| | 00:07 | Nowhere on this page first of all does it
say that this is the Press Releases page.
| | 00:12 | I only know that because I built this
Web site and there's this funny little
| | 00:15 | dropdown up here on the top, it's
telling me how many hits are in each one of
| | 00:18 | my Press Releases, which can be kind of
embarrassing if you don't get a lot of
| | 00:22 | traffic to your site.
| | 00:23 | The fact that I have one here that has zero
hits, it's kind of sad, you think about it.
| | 00:28 | In fact that these are written by
Super User, you probably don't really care
| | 00:31 | about either, so we need to clean up
the look and feel of this a little bit, so
| | 00:36 | I'm going to show you how to do that now.
If you happen to be at the backend of Joomla!
| | 00:41 | and you go to Menus>Main Menu and
I'm going to scroll on down to Press
| | 00:45 | Releases down here.
| | 00:46 | The last video we worked on this screen
a lot, the Details tab, now I'm going to
| | 00:50 | switchover to Advanced Options and I'm
going to scroll down to the List Layouts
| | 00:53 | down here on the bottom and I'm
going to tweak some of these settings.
| | 00:58 | So Display Select is this little item
right here, the number 10 here, this
| | 01:04 | dropdown, I really don't want that
there, so I'm going to set that to Hide.
| | 01:09 | The Filter field is actually not
displayed by default, but there's a search box
| | 01:13 | that you can have display
here on this page if you wish.
| | 01:16 | If you have a hugely long list of stuff
that might be a very helpful thing to do,
| | 01:21 | but this is set to be turned off by
default, that's the global setting,
| | 01:25 | so I'm just going to leave that in place.
| | 01:27 | Table Headings would give you some
headings on the top of this, Titles and Hits
| | 01:31 | and so forth, I don't really want
that either, so I'm going to leave that
| | 01:35 | exactly where it is, I could Show the
Dates associated with these articles and
| | 01:40 | I could do that, but in fact the dates
are all exactly the same for this,
| | 01:44 | so I'm not going to show that either.
| | 01:46 | And then finally down here Showing
the Hits and Showing the Author,
| | 01:50 | you see those are displayed here.
| | 01:51 | The Hits over here in the
column, the Author is underneath;
| | 01:54 | I actually don't want any of those
at all, so I'm going to Hide those.
| | 01:59 | And if I just go ahead and hit my Save
button, so I can save my changes but keep
| | 02:03 | this window open for editing, then I'm
going to refresh the front end of the
| | 02:07 | Web site and you'll see that already
this page is looking a lot better, a lot
| | 02:11 | less cluttered, it's just a list of
articles, and when I click on these
| | 02:15 | articles, I can see more information,
read the full article and so forth,
| | 02:20 | so that's looking pretty good.
| | 02:22 | But it still doesn't say Press Releases
on this page, so I need to add that.
| | 02:27 | Back here again to the back end of Joomla!
| | 02:30 | back to the Advanced Options for this
particular menu item, and if you scroll on
| | 02:35 | down here, all the way down to Page
Display Options, under Page Display Options,
| | 02:41 | this is where I can customize a few things.
| | 02:44 | First of all I can change my Browser Page Title.
| | 02:47 | So right up here in front end of the
Web site I went through how you got KinetECO
| | 02:51 | up there at the top, you did that
through the Global Configuration,
| | 02:55 | I covered that in an earlier video.
| | 02:56 | Press Releases is the name of the Menu
item and that's what's showing up there
| | 03:00 | on the top of the page.
| | 03:01 | If I wanted to display something
different in that tab, I could type in a
| | 03:05 | browser page title right here and that
would override what's on the top, but
| | 03:10 | what I really want to show the words
Press Releases show up on this page is
| | 03:13 | the Show Page Heading part of this, so
I'm going to set that to Yes and then
| | 03:18 | I'm going to type in a page heading of
Press Releases, and now if I just hit
| | 03:23 | the Save button again, and I refresh my
Press Releases page, you'll see that I
| | 03:28 | have the words Press Releases up here
at the top of the page, so at least now
| | 03:32 | I have some page identity.
| | 03:33 | Now the last thing that I might want
to add is some introductory text that'll
| | 03:37 | appear here, between the word Press
Releases and a list of all the Press
| | 03:41 | Releases that show up underneath.
| | 03:42 | Marketing people love to add a little
bit of blah, blah here at the top, because
| | 03:46 | for some reason they think people read
that, I don't think anybody reads that
| | 03:49 | little bit of text there at the top, I
think people just go right to the press
| | 03:53 | releases, they know what this is, but
marketing people frequently want a little
| | 03:56 | bit of introductory text.
| | 03:57 | So in your Exercise Files I have included
for you a little bit of introductory text.
| | 04:04 | If you go ahead and highlight that and
Ctrl+C or Cmd+C to copy it, we can
| | 04:09 | put this in and have this appear.
| | 04:11 | The place that we put it in
though is a little bit tricky.
| | 04:14 | Inside of our menu item under
Advanced Options, we have the option for a
| | 04:20 | Category Description to either show or hide.
| | 04:23 | By default that category description is
hidden, but I'm going to show you where
| | 04:28 | you can go to put that category description in.
| | 04:30 | So first off all I'm going to set
this Category Description to Show.
| | 04:34 | All we can do here in the Menu item is
set that category description to Show or
| | 04:38 | Hide, we can't set the
category description here.
| | 04:40 | So once you set that to Show, go ahead
and say Save & Close and then I'm going
| | 04:46 | to go to Content>Category Manager
and I'm going to find my Press Releases
| | 04:51 | category and you probably saw this
great big box here, but you didn't know
| | 04:56 | what to do with it and I didn't
tell you back in the category chapter.
| | 04:59 | Well, here's what you can do with it,
you can put in a Description and just like this,
| | 05:04 | and that Description doesn't
necessarily show anywhere unless you're
| | 05:10 | making something like a Category Blog
or Category List and you specify that the
| | 05:13 | category description should show on the page.
| | 05:16 | So, now that I've got my introductory
text here, if I say Save & Close and
| | 05:23 | I now refresh the Press Releases page,
there's my little bit of text right here
| | 05:28 | at the top of my Press Releases, and I've got
all my links to my articles here listed underneath.
| | 05:33 | So Category lists are another way of displaying
a whole bunch of articles on a single Joomla!
| | 05:38 | page, you can also do that with blog,
which would be a different type of layout,
| | 05:43 | but they're a great way of
introducing a bunch of text in Joomla!
| | 05:47 | in a compact form and you can, of course,
top your category list off with a
| | 05:53 | nice-looking title, as well as a
little bit of introductory text if you wish.
| | Collapse this transcript |
| Creating a featured blog for the News page and configuring the homepage| 00:01 | A few videos ago we put a piece of
content in for the News & Information page of
| | 00:06 | the Web site and that News & Information
page looks like this right now.
| | 00:11 | It just says this is the
News & Information page.
| | 00:14 | It's not terribly interesting.
| | 00:16 | What I'd really like to do with this
News & Information page is actually not
| | 00:20 | display what I have here at all.
| | 00:22 | What I'd prefer to do is, I would like
to display a selected group of postings,
| | 00:28 | maybe some from the Solar blog and some
from press releases, but I don't want to
| | 00:32 | display every single article from Solar
blog and every single article from Press
| | 00:37 | Releases on this top
level News & Information page.
| | 00:40 | I just want to feature the few things
that are most current, most important,
| | 00:45 | most sizzling hot kind of things.
So what can I do to make that happen?
| | 00:50 | Well, remember the featured
article option within Joomla!
| | 00:55 | We took one of the articles that we
just put in to the Article Manager and we
| | 01:00 | called it a featured article it
showed up on the home page of the Web site.
| | 01:03 | Well, those featured articles we can
use here for the News & Information page
| | 01:07 | and what we can say is, we would like
featured articles from certain parts of
| | 01:12 | the Solar blog and Press Releases to
show up here on the News & Information page
| | 01:17 | and not any featured articles from other
categories like that uncategorized post
| | 01:22 | that we had originally put up on the home page.
| | 01:24 | So I am going to walk you
through how to do that now.
| | 01:27 | First of all, we're going to pop
back here into the back end of Joomla!
| | 01:30 | and I am going to go to Menus>Main Menu,
and I am going to go down here to my
| | 01:37 | News & Information page.
| | 01:38 | Right now I have this set up
as a link to a Single Article.
| | 01:42 | If I just click on this link, I can
change my Menu Item Type simply by clicking
| | 01:47 | on the Select button here and
choosing something different.
| | 01:50 | So under Articles this time what I'd
like to do is I'd like to do something with
| | 01:55 | Featured Articles and as you see here it
shows all the Feature Articles from one
| | 02:00 | or multiple categories in a
single- or multi-column layout.
| | 02:03 | Now that's exactly what I want.
| | 02:05 | So I am going to go ahead and
choose that and my screen is going to
| | 02:09 | reconfigure itself.
| | 02:10 | And now what I can do is take a look
at my Advanced Options and here in my
| | 02:15 | Advanced Options I can choose
exactly which categories I'd like to have
| | 02:20 | displayed as part of these Featured Articles.
| | 02:23 | So I'm going to click here in the box
and I'm going to select Solar and I am
| | 02:30 | going to select Press Releases and I'm
going to deselect all categories, because
| | 02:35 | I only want to show any featured articles
that are located inside of Solar and
| | 02:40 | located inside of Press Releases.
| | 02:43 | Further down here on the page is the
four boxes I discussed back in the category
| | 02:48 | blog video where I talked about
leading articles, introductory articles,
| | 02:51 | columns, and links, and I am just
going to type in my magic numbers here.
| | 02:56 | 0 for my leading articles, 20 intro
articles, 1 column, and 0 links, and
| | 03:04 | I explained why in that previous
video why I chose those numbers.
| | 03:08 | I am going to pretty much
leave it just like this.
| | 03:11 | So I'm going to go ahead and say Save
& Close, and now if I come back here to
| | 03:18 | the Web site what I am going to do is
am going to click back to the Home page
| | 03:23 | I and then I am going to go back to the
News & Information page that will make
| | 03:27 | sure that link is refreshed and right
now on my News & Information page I have
| | 03:30 | absolutely nothing. Why?
| | 03:33 | Well, I haven't specified any of those
articles to be featured on this page and
| | 03:37 | that's why I don't have any posts at the moment.
| | 03:40 | So I am going to go in back here to my
Content>Article Manager and I am going to
| | 03:48 | sort this all by Category.
| | 03:50 | So let's just take a look at just the
Solar category to start with and let's
| | 03:55 | say that I'd like to feature the K-Eco
Mini Panels and let's say I'd like to
| | 04:03 | feature the farmers here.
| | 04:04 | Then I am going to switch over to the
Press Releases category and let's say
| | 04:12 | I just want to feature here the Wind
turbine farm in Bakersfield.
| | 04:15 | So I have picked three articles here
from my Solar blog category and from my
| | 04:20 | Press Releases category and now if
I go to my News & Information page and
| | 04:25 | I refresh this, you'll see that I have
these articles and they are posted here
| | 04:30 | and just those three articles.
| | 04:32 | So I have my two articles on Solar,
my one article from Press Releases.
| | 04:37 | In terms of the ordering here, I can
change the way these are ordered on the
| | 04:41 | Web site and the way that I do that is
if I go back to Menus>Main Menu and I go
| | 04:49 | back to News & Information and under
the Advanced Options, a little bit further
| | 04:55 | down here the Category Order is
the first thing to take care of.
| | 05:01 | So right now it's either in no
particular order or it's an Alphabetical order
| | 05:07 | or Reverse Alphabetical order
or Category Manager Order.
| | 05:10 | I'm actually going to set this to No
Order that's because I don't want things
| | 05:13 | sorted by category, but I could group
things together by category in this page.
| | 05:17 | So say list all the Solar blog
entries first followed by all of the
| | 05:21 | Press Release entries. I could do that.
| | 05:24 | In this case, I have set it No Order
and what that's going to mean is I am just
| | 05:28 | going to be sorting by articles and
the order that the articles appear.
| | 05:32 | And perhaps, what I will do for Article
Order as I'll say just Most recent first.
| | 05:37 | Then that way the most recent item is
at the top of the page regardless of
| | 05:41 | what category it's in.
That works quite well.
| | 05:44 | It's possible that these articles
actually won't rearrange, but we'll see
| | 05:47 | here in just a minute.
We'll go ahead and say Save & Close.
| | 05:50 | They are already in that order that
would be why they would not rearrange.
| | 05:53 | So I will hit Refresh and in fact
these articles didn't rearrange.
| | 05:57 | So what that indicates to me is I
probably put in my press release articles
| | 06:01 | first when I was entering all the
content into the Content Management System
| | 06:06 | and then I put in these Solar
articles probably in that order.
| | 06:09 | That's why these did not rearrange, but
if you would like to maintain that order
| | 06:13 | so that you have your most recent
article at the top use those settings that
| | 06:17 | I just showed you and that will make sure
that the most recent article appears at
| | 06:20 | the top of the page.
| | 06:22 | The last thing that I need to add to
this is I definitely need something at the
| | 06:26 | top that says News & Information,
because I'm missing that right now.
| | 06:29 | So one more time I am going to hop back
into the News & Information link and I'm
| | 06:35 | going to go to Advanced options and if
I just click on these words up here at
| | 06:40 | the top called Layout Options, this
will collapse the screen so that I can
| | 06:44 | easily jump on down here to the Page
Display Options and I'm going to say Show
| | 06:49 | the Page Heading and that page
heading will be News & Information.
| | 06:57 | And I'll say Save & Close and now when
I refresh this page, I have my title here
| | 07:03 | of News & Information.
| | 07:04 | So things are looking pretty
good here on the news page.
| | 07:08 | Let's see what's going on at the home page.
| | 07:10 | So now here I am on the home page and
those three or four articles that I chose
| | 07:17 | as Featured Articles or the three
that I chose as Featured Articles are now
| | 07:22 | showing up here on the home page as well
and I just really wanted to have on the
| | 07:26 | home page just this little bit of text
about the Harnessing wind and sun for a
| | 07:30 | cleaner, energized planet.
| | 07:31 | I don't want to have these other
articles showing up on the home page.
| | 07:35 | So first of all why did they show up here and
then second of all how can I get rid of them.
| | 07:41 | Well, why they showed up here is
because the home page is by default a
| | 07:45 | featured item blog.
| | 07:46 | Exactly the same thing that we just set
up for the News & Information page and
| | 07:51 | the Featured Item blog by default is
set up to show all of the featured items
| | 07:55 | from all of the categories
everywhere on the Web site.
| | 07:58 | So this is showing our News & Information
pages here or our Solar blog pages and
| | 08:04 | our Press Release pages from underneath
News & Information as well as this
| | 08:10 | individual article in the home page.
| | 08:11 | Now there's two ways that
I could solve this problem.
| | 08:14 | One, I could go into the link for
the Home page and I could say the only
| | 08:19 | category I want to have show up on the
Home page is the Uncategorized category
| | 08:23 | or I could change my menu item type for
the home page from that featured blog to
| | 08:31 | just linking to a single
article. So which is best?
| | 08:34 | Well, it depends.
| | 08:37 | Do I anticipate ever needing to put
any additional content on the homepage?
| | 08:40 | Could I do it all through one article?
| | 08:42 | Is there an advantage to having
the abilities to add these additional
| | 08:46 | articles to the home page?
| | 08:47 | All of that is definitely debatable.
| | 08:49 | But I think what I am going to do just
to make things simple is I am going to
| | 08:54 | switch my Home page menu Item Type to
a Single Article so I'll just show this
| | 08:58 | single article on the homepage.
| | 08:59 | So I am going to go back
to my back end of Joomla!
| | 09:02 | and I am going to go to my Home page link.
| | 09:05 | As I was saying here under Advanced Options
this is currently showing all categories.
| | 09:11 | I could just change this Select
Categories to just show the Uncategorized
| | 09:15 | category and then I would
show my one link on the home page.
| | 09:19 | That's one possible solution.
| | 09:21 | The other possible solution
is what I am going to do now.
| | 09:24 | Under Details I'm going to click my
Select button and I'm going to go to
| | 09:28 | Articles and I am just
going to pick a single article.
| | 09:31 | That's really all I need.
| | 09:32 | And my single article
will be my home page article.
| | 09:37 | So this Harnessing wind and sun for a
cleaner planet, and I am just going to go
| | 09:42 | ahead and say Save & Close.
| | 09:43 | Now when I come back to the home
page and I hit Refresh, I have my Single
| | 09:48 | Article again right here on the home page.
| | 09:50 | My News & Information page though
still has those particular
| | 09:54 | News & Information articles.
| | 09:55 | So I have successfully used the featured
article functionality to set up my
| | 10:02 | News & Information page pulling featured
articles only from two categories,
| | 10:06 | the Solar blog and the Press Releases category,
and I've managed to keep other featured
| | 10:11 | articles out of that particular blog.
| | 10:13 | I've also cleaned up the home page so
that I am just showing one article on the
| | 10:17 | home page of the Web site.
| | Collapse this transcript |
| Publishing, unpublishing, and trashing menu items| 00:00 | On occasion as you add things to your
Web site, you may want to delete or get
| | 00:04 | rid of or temporarily unpublish one of
your menu items and so I want to show
| | 00:10 | you how you can do that.
| | 00:11 | So I'm going to go to Menus>Main Menu
and I am going to add a link to my
| | 00:17 | Web site, and I am going to do that
of course by clicking my New button.
| | 00:21 | I can just go ahead and pick a Single
Article, let's say as my Menu Item Type.
| | 00:28 | And what article shall I pick?
| | 00:29 | Well, let's pick that News and Information
article that we are not really using anymore.
| | 00:33 | And I am going to give this item a
title of Delete Me!, because really
| | 00:40 | that's all I am going to do with this
particular page and I am going to say Save & Close.
| | 00:45 | If I refresh the front end of my
Web site, you'll see the Delete Me!
| | 00:49 | link shows up in the Menu, if I click
on it, I wind up with actually the
| | 00:53 | News and Information page, but
of course it says Delete Me!
| | 00:56 | over here in the Menu Item, that's
because remember our Menu Item and our
| | 01:00 | Article Title can be completely different,
they have absolutely nothing to do
| | 01:03 | with each other, and
here's a great example of that.
| | 01:06 | There are several states to my Menu Items
that I can change right here from my
| | 01:12 | Menu Manager interface.
| | 01:13 | So, I've currently got this item
published and I know that because the status is
| | 01:18 | the green checkmark indicating that
this is a published link inside of my menu.
| | 01:23 | I can unpublish my link simply by
clicking on the green checkmark and that will
| | 01:28 | change it to a red X and as
you see, there's the red X.
| | 01:32 | That will indicate that I still have
this link, it still exists within my menu,
| | 01:37 | but it is not displaying on
the front end of the Web site.
| | 01:41 | And in fact, if I come back here, and I just hit
the Refresh button, I am on the Delete Me! page,
| | 01:46 | it will now give me a 404 error,
and in fact it looks like it's very
| | 01:50 | helpfully given me a dump over here on
the side, this is something output here
| | 01:54 | from WAMP, that you're seeing here on the page.
| | 01:57 | You may or may not see this
if you're working with MAMP.
| | 02:00 | But basically it's a 404 page, it
couldn't find the page that I just had.
| | 02:04 | If I hit my Back button and I go back to
my home page, you'll see that the Delete Me!
| | 02:08 | link is gone for my Main Menu and any
one trying to access that URL, winds up
| | 02:13 | getting a 404 error page.
| | 02:16 | So, republishing that link by putting
a checkmark on it, here we go, will
| | 02:23 | republish the link here on the front
end of the Web site and when I refresh
| | 02:27 | the page, and I click on Delete Me!,
my page is back again.
| | 02:30 | Now I can also trash this particular
Menu Item altogether, and by putting a
| | 02:36 | checkmark next to this and clicking on
the Trash button up here on the top,
| | 02:40 | that will send this particular
item directly to the Trash.
| | 02:44 | So, I don't have it here, showing
up in my Menu list at all anymore.
| | 02:49 | If I go back to my homepage and
I Refresh, I don't have the Delete Me!
| | 02:54 | link listed over here on
the side anymore either.
| | 02:58 | But it is in the Trash, it's not
completely deleted from your Joomla!
| | 03:02 | Content Management System. How do you know that?
| | 03:05 | Well, if you go over here to the left-hand
side of the screen and switch your
| | 03:09 | status to Trashed, you'll
see that I have the Delete Me!
| | 03:12 | link located here inside of the Trash.
| | 03:15 | I can pull it out of the Trash,
simply by clicking on the button here which
| | 03:20 | indicates that this is currently unpublished,
and of course it's in the Trash as well.
| | 03:25 | If I click on this button, that
will pull it out of the Trash.
| | 03:28 | Right now I see nothing on my Menu
Manager screen, because I filtered the
| | 03:32 | results to show me only Trashed items.
| | 03:34 | I need to switch this back to Published
items in order to see my full menu again,
| | 03:39 | and as you see here, Delete Me!
| | 03:41 | is back right here inside of my Menu Structure.
| | 03:45 | To get rid of Delete Me! entirely,
| | 03:46 | you need to put a checkmark by it
and send it to the Trash, switch to
| | 03:51 | your Trashed and then put a checkmark
by this and click Empty Trash, that will
| | 03:59 | truly get rid of the link.
| | 04:00 | You may occasionally find that as you
create new links inside of Joomla!,
| | 04:06 | let's say that you create an About link and
you call that menu link About, then you
| | 04:12 | decide you don't what it and you send
it to the Trash, you don't completely
| | 04:15 | empty the Trash, the menu link is
sitting there in the Trash, and you create a
| | 04:19 | new menu link called About also.
| | 04:21 | What you may see as an error is something
about an alias with this menu item
| | 04:25 | already exists, you can't create
another one and you are like, well,
| | 04:29 | I am looking at my menu and I don't see
anything called About, it might be that
| | 04:33 | there's something called About
that's located in your Trash.
| | 04:36 | So, if you happen to see that error,
what you might want to do is go empty your
| | 04:41 | trash and get rid of whatever is there.
| | 04:43 | That will allow you to create a menu
item that's called more or less the same
| | 04:47 | thing as the menu item that
you just deleted from the Trash.
| | 04:50 | So, that's a fairly common error you'll
see in Joomla!, check your Trash,
| | 04:55 | if you wind up with some sort of alias error.
| | Collapse this transcript |
| Creating a new menu and a login link, and displaying the menu in the footer| 00:00 | The next thing that I'd like to add is
a Footer menu for my Web site, and what
| | 00:05 | I'd like to put down in the footer is,
I'd like to include some links, probably
| | 00:09 | a link back to the homepage, I'll do
that in the next video and I'd like to
| | 00:13 | include a link to a Login Form, and my
Login Form is currently located on the
| | 00:17 | right side of the screen, it's a
module, it's present on every page of the
| | 00:21 | Web site, and I don't particularly care for that.
| | 00:23 | The login is going to be for some of the
distributors for KinetECO, there aren't
| | 00:28 | a lot of them and I'd rather have just
a small non-obtrusive login link down at
| | 00:34 | the bottom of the page rather than
having this big module that everybody looks
| | 00:38 | at wonders what it's for.
| | 00:39 | So, I am going to go ahead and create
this footer menu now and I am going to
| | 00:45 | need to make sure that that goes
into the bottom of the Web page.
| | 00:48 | So to do that I am going to hop
back into the back end of Joomla!
| | 00:52 | and this time I am going
to go to Menus>Menu Manager.
| | 00:55 | Remember the Menu Manager is where you
create additional menus for the Web site
| | 01:00 | and so right now we have one menu, it's
our main menu, we have been adding links
| | 01:04 | to that as we've been going along,
but what we're missing is a footer menu.
| | 01:10 | So I am going to go ahead and create a
new menu by clicking on the big green
| | 01:14 | button here for New, and I am going to
give this a title of Footer Menu, and
| | 01:19 | then it's going to ask me for this
thing called Menu type, it's a little bit
| | 01:23 | misleading, there is only one kind of menu,
but what this indicates is the name
| | 01:28 | for this menu that can be used
in programming behind the scenes.
| | 01:30 | So it's going to be all one word, no
spaces, no funny characters for this
| | 01:35 | particular item, becomes a variable in
the programming, so I am going to call
| | 01:40 | this footermenu, and then
I can put in a Description.
| | 01:43 | This is the menu that displays at
the bottom of the Web site, and the
| | 01:48 | description of course is optional,
I'll say Save & Close, and as you see here
| | 01:53 | I now have a Footer Menu.
| | 01:55 | Right now it has nothing in it, it's
published, but there is no content, that's
| | 01:59 | because we haven't made any footer menu
items just yet, and look at the column
| | 02:04 | here for linked modules.
| | 02:06 | What you'll notice is the main menu has
some modules associated with it, but the
| | 02:11 | footer menu does not.
| | 02:12 | The module is the way that the menu
displays on the front end of the Web site.
| | 02:17 | What we've been doing with the
Menus>Menu Item in the top of the Joomla!
| | 02:21 | Navigation, that is for adding
additional menu items to a particular menu,
| | 02:27 | but where that menu displays on the Webpage
is controlled by a module and we'll need
| | 02:33 | to add a module in order to display our menu.
| | 02:35 | So let's go ahead and do that.
| | 02:37 | All we need to do here is click on a
link to add a module for this menu type.
| | 02:41 | So I am going to click on that and it'll
put me right into the exact screen that
| | 02:45 | I need, I can give this a title of Footer Menu,
although I don't want that to show,
| | 02:51 | so I am going to hide that title,
then it's going to ask me for a position,
| | 02:55 | a position is where it's going
to display on the Webpage, I'll explain
| | 02:59 | this in more detail in the modules
chapter, but for right now if you're just
| | 03:04 | scrolling down to Protostar and look
for the footer position that's where we're
| | 03:09 | going to have it display, and then
just go ahead and say Save & Close.
| | 03:14 | When you refresh the front end of the
Web site, you'll see absolutely nothing,
| | 03:19 | actually the module is displaying, it
just has no content in it, so it doesn't
| | 03:23 | look like we've added anything to the
bottom of the Web page just yet.
| | 03:26 | So, let's go ahead and fix that problem,
let's add that login link that will
| | 03:31 | display at the bottom of the Web page.
| | 03:33 | To do that I'm going to go to Menus>
Footer Menu, notice that my new menu has
| | 03:37 | showed up right here in my dropdown,
and as you can see here I have absolutely
| | 03:44 | no content, so I am going to start by
clicking my New button and this will give
| | 03:49 | me a screen where I can set up my login box.
| | 03:53 | So to do that I am going to click on the
Select button, and this time I am going
| | 03:57 | to go to the Users Manager, and under
the Users Manager are a bunch of things that
| | 04:01 | can be very useful for setting up a
password protected area of the Web site,
| | 04:05 | we'll see them in a future video, but
for right now we're going to go to just
| | 04:09 | the Login Form, and that will create
a page with Login Form on it for us.
| | 04:14 | I am going to give this a title, Login,
and I am going to have it display in the
| | 04:21 | footer of the Web site and then
go ahead and say Save & Close.
| | 04:24 | Now when I refresh the homepage I have
indeed a link down here at the bottom of
| | 04:29 | the screen for Login.
| | 04:32 | If I click that you'll see that I go
to a screen where I have a login form,
| | 04:36 | that's exactly what I wanted.
| | 04:38 | So eventually I'll get rid of the Login
Form interface that's over on the right
| | 04:42 | side of the screen and just leave this
login link down on the bottom, but for
| | 04:48 | right now I am going to go ahead and
leave both, I'll get rid of that Login Form
| | 04:53 | some time in the Module chapter.
| | 04:54 | That is how you create a
new menu inside of Joomla!
| | 04:58 | and we've added a login
link as well for that new menu.
| | Collapse this transcript |
| Creating menu aliases| 00:00 | I just created a new
footer menu for this Web site.
| | 00:02 | It's down here at the bottom of the
screen and you see the link here for the Login.
| | 00:07 | I would like to add to that, I'd like
to add a link to the home page as well
| | 00:11 | down at the footer menu.
So you might think, okay, well, no big deal.
| | 00:15 | We'll just go when we create a new
menu item and we'll link it up to a single
| | 00:19 | article which I'll go to
home page article and we'll be done.
| | 00:22 | The downside to doing it that way is this.
| | 00:25 | First of all, we're just
working with the single article.
| | 00:27 | It's very, very quick and easy
to set up the settings for that.
| | 00:31 | There was only a few things that we
clicked on, but think about some of the
| | 00:35 | category blogs that we've set up for
this Web site so far and all of the settings
| | 00:38 | associated with that.
| | 00:39 | If we take that route where we make a
new menu item in our footer we're going
| | 00:44 | to have to remember all of those
setting that we had already configured for
| | 00:47 | the same menu items before for the
Main Menu and recreate all of those
| | 00:51 | settings in the footer.
Not necessarily the best way to go.
| | 00:53 | The other disadvantage to
doing this is that Joomla!
| | 00:56 | will set up a new link in the footer
and search engines are actually going to
| | 01:00 | view this as an additional page on
your Web site that has exactly the same
| | 01:05 | content and that will earn you a
penalty in the search engines
| | 01:09 | for search engine optimization.
| | 01:10 | You want to have unique pages
with unique content in them.
| | 01:14 | The way around this is using something
called a Menu Alias inside of Joomla!.
| | 01:20 | What this will do is allow you to make
links in your footer menu that go back to
| | 01:24 | the home page or any other page on
your Web site that already exist without
| | 01:29 | creating a new menu item from a
search engine's perspective and without you
| | 01:33 | having to go through and reconfigure
all of the settings that you already
| | 01:37 | configured once before on another menu item.
| | 01:40 | So to do this we're going to
go to the back end of Joomla!
| | 01:43 | and we're going to go Menus and once
again the Footer menu, because that's where
| | 01:48 | I want my link to go.
I'm going to make a new link.
| | 01:51 | So I'm going to click on my New button
and my Menu Item Type this time is going
| | 01:55 | to be under System Links.
| | 01:57 | Down here under System Links we have
some other choices and the one that
| | 02:01 | I want is Menu Item Alias.
| | 02:03 | This creates an alias to another menu item or
think of alias in the senses of the pointers.
| | 02:08 | So we're just going to refer back
to one of the existing menu items.
| | 02:12 | Go ahead and click that and we'll
type in a name which will be Home.
| | 02:19 | You probably don't need to touch
anything else here on this page.
| | 02:21 | There's a Footer Menu.
| | 02:22 | That's where we want it to go.
| | 02:24 | We want the parent item to be
the root. So that's all set.
| | 02:28 | But we also need to indicate what
page this new home item is going to point
| | 02:32 | to and that is under the Advanced Options
tab under Required Settings, this Menu Item.
| | 02:40 | So right now this is set to
Login and that is not what we want.
| | 02:45 | We want to link to the
Home item under Main Menu.
| | 02:48 | So I'm going to go ahead and choose that
and then I'm going to say Save & Close.
| | 02:54 | Now when I go to the front end of the
Web site and I click Refresh, I now have
| | 03:00 | two links down here on
the bottom Login and Home.
| | 03:03 | So two things about these links
down at the bottom of the page.
| | 03:06 | First of all, you're probably
wondering why they are not going horizontally.
| | 03:09 | They are stacked on top of each other.
| | 03:11 | I'll show you how to make those
go horizontally in a future video.
| | 03:16 | The other thing that might be more
bothersome to you right now will be the
| | 03:20 | order of these links.
| | 03:21 | Perhaps, you want Home to be
the first link followed by Login.
| | 03:24 | And I'll show you how to
reorder these links in my next video.
| | Collapse this transcript |
| Reordering menu items| 00:00 | Two videos ago I added a Login link to
this Web site down in the footer and in
| | 00:04 | the last video I added a
Home link to the Web site.
| | 00:08 | So I've got those two links down on
the bottom in exactly the order I added them,
| | 00:11 | Login followed by Home.
| | 00:13 | What I'd really like to do it
have Home first followed by Login.
| | 00:16 | So I need to reorder these menu items.
| | 00:19 | I'll show you how to do that
now in the back end of Joomla!
| | 00:22 | We're going to go to our back end here.
| | 00:24 | We're going to go Menus.
| | 00:26 | In this case we're working
with link setter in the footer.
| | 00:28 | So I'm going to go to the Footer Menu
and you see here that I have my two links.
| | 00:34 | Right now these two links are
listed in the following order.
| | 00:38 | So over here in this far left column,
these three dots that are on top of each other.
| | 00:42 | This is a handle that you
can grab to reorder your links.
| | 00:46 | If you happen to be sorting your menu
items by something else click on say Title
| | 00:51 | or something, you'll notice those
three dots are grayed out and you won't be
| | 00:54 | able to click on them to reorder.
| | 00:56 | You want to make sure that
this is the selected column.
| | 00:59 | To do that click on this little icon on
the top with the arrows and you'll see
| | 01:04 | those three dots go a dark black or gray color.
| | 01:07 | At that point when you roll your mouse
over you'll see it turn into the
| | 01:10 | four-headed arrow and what you can do is simply
click and drag to reorder your menu items.
| | 01:16 | This is so fabulous for Joomla!
| | 01:19 | to have this new click and drop reordering.
| | 01:22 | Previously, we always had to use bunch
of arrows like Netflix style interface
| | 01:26 | where we can nudge our menu items up
and down or we had this complicated method
| | 01:30 | of typing in numbers and clicking the
Save button in order to reorder them.
| | 01:34 | Now it's just a simple drag-and-drop
process to reorder your menu items.
| | 01:39 | I'm really excited about this is one of the
great interface improvements inside of Joomla!.
| | 01:43 | It's really going to help your clients too.
| | 01:45 | So reordering things inside of Joomla!
| | 01:48 | is now very straightforward, just
drag and drop and you'll reorder just fine.
| | 01:53 | Just make sure that you've got that
column selected and the little three dots
| | 01:57 | need to be dark-colored, not the light gray.
| | 02:00 | When there is a dark color that's when
you can grab onto them to reorder things.
| | Collapse this transcript |
| Adding products, moving the main menu, and configuring a dropdown menu| 00:00 | The next thing that I'd like to do is
I'd like to show you how dropdown menus
| | 00:04 | work inside of Protostar. Oh my goodness!
Isn't that a wonderful thing?
| | 00:09 | Yes, Protostar ships with
dropdown menus, it's the first Joomla!
| | 00:13 | template that's shipped with Joomla!
that has dropdown menus built into it.
| | 00:17 | And we can thank the Bootstrap framework
for the presence of those dropdown menus.
| | 00:21 | So I would like to show
you how to configure that.
| | 00:24 | Before we get started with that I need
to add one more a menu item; that is our
| | 00:28 | Products menu, we haven't added that yet.
| | 00:31 | I am going to go ahead and build out
that products part of this Main Menu first
| | 00:35 | and then I will show you how to
start configuring those dropdowns.
| | 00:38 | So here in the back end of Joomla!
I'm going to start by going to Menus>Main Menu.
| | 00:44 | And I am actually just going to use
this Add New Menu Item over here that flies
| | 00:48 | out right over on the side, that will
put me right into the screen where I can
| | 00:53 | start adding menu items.
| | 00:54 | And I am going to select an article, just a
single article, and this will be our products page.
| | 00:59 | So I'm going to select my article.
| | 01:01 | Incidentally, now my list of articles
here is getting a little bit long.
| | 01:05 | Notice, I have all these nice filters
that show up here across the top,
| | 01:10 | I'm just interested right now in my products,
so I can choose products right here from the list.
| | 01:14 | And there is just my product pages,
that's the ones I need to link to,
| | 01:18 | so I am going to pick my Products page
here, give this a title of products.
| | 01:23 | And that will go right there on the very
top level and same level as home for my
| | 01:28 | Web site and I am going to say Save a New.
| | 01:31 | I am going to add my next item, I am
just going to hit my Select button,
| | 01:35 | Articles>Single Article, all of these products
pages are all going to be single articles.
| | 01:41 | And I'm just going to link to this list
and I am just going to start here at the
| | 01:46 | top with energy bulbs and I am
going to work my way on down the list.
| | 01:50 | And I am going to make my menu title
the same as my article title, so that
| | 01:55 | K-Eco Energy Bulbs.
| | 01:58 | And remember the one thing that's different
with this one is that my parent item
| | 02:02 | is not the menu root, my
parent item is now products.
| | 02:06 | And it will be products for all of
these additional items and I'm sliding in
| | 02:09 | here underneath products.
So I am going to click Save a New again.
| | 02:13 | I am going to repeat this process for
the remaining products items and I'll see
| | 02:18 | you on the other side.
| | 02:20 | And there we go, I have just
configured my last item here, I am going to go
| | 02:24 | ahead and Save & Close.
| | 02:26 | And now here in my Menu structure you
see that I have products, I have my four
| | 02:30 | products listed underneath.
| | 02:32 | And when I go to the frontend of the
Web site and I hit Refresh, I have my
| | 02:36 | Products link that shows up, when I
click on it I wind up with my additional
| | 02:40 | pages listed underneath, the Energy
Bulbs, the Low-Flow Shower Head,
| | 02:44 | the Mini Panel and the Solar Mug, terrific.
| | 02:48 | So the next thing I would like to do is
I would like to move this main menu from
| | 02:53 | its location here on the right side of
the screen up to the top and somewhere
| | 02:57 | around in this general area there is a
spot for modules called Navigation, where
| | 03:03 | I can put this navigation bar and
it will show up going horizontally.
| | 03:07 | And that's exactly what I want to do.
| | 03:10 | So what I need to do to move the
location of a menu on the page,
| | 03:15 | remember, goes through the modules.
| | 03:16 | So the modules are located
here in the back end of Joomla!
| | 03:19 | under Extensions>Module Manager.
| | 03:23 | And inside of the Module Manager we
have our module called Main Menu,
| | 03:27 | it's currently in position seven.
| | 03:30 | And I will show you how to find where
those positions are how they are mapped
| | 03:34 | out on the page here in a later video.
| | 03:36 | But for right now just
click on Main Menu to edit it.
| | 03:39 | And here for the position right
now it's located on the right.
| | 03:42 | What I would like to do is change that,
I am going to change it to Navigation.
| | 03:46 | So I am going to go ahead and select
Navigation from the list, and say Save & Close.
| | 03:52 | When I refresh the front end of the
Web site, my module will have moved from over
| | 03:58 | here on the right side of
the screen up to the top.
| | 04:01 | And you'll see that we
have some dropdowns. Hey!
| | 04:05 | Look at that, how cool is that?
| | 04:06 | And that dropdown is only
showing up here in the Products page.
| | 04:09 | Interestingly, that's because we're
within the Products section of the Web site.
| | 04:14 | If I go back to home, you will
notice that that dropdown for
| | 04:17 | Products disappears.
| | 04:19 | We know we have sub-navigation for
About when I click on the About link,
| | 04:23 | I have a dropdown that appears here.
But again no dropdown for Products.
| | 04:27 | So why is this happening?
| | 04:28 | Well, remember when this module was
displayed on the right side of the site,
| | 04:33 | we had the sub-navigation show up,
when we were on the specific areas.
| | 04:38 | What we like to do now though is, we
would always like to have those dropdowns
| | 04:41 | available, no matter where we in the Web site.
| | 04:43 | The other thing we need to have happen
is we need to have this navigation bar
| | 04:47 | go horizontally across the page rather
than stacked in a vertical manner the
| | 04:51 | way it is right now.
| | 04:52 | So, here's what we need to do, let's go
back into Main Menu and let's fix this
| | 04:58 | dropdown issue first.
| | 05:00 | We want to have the dropdowns available
on every page of the Web site all the time.
| | 05:05 | So what we are going to do to have all
of our menu items show in a dropdown
| | 05:09 | menu and have them show on every
page of the Web site all the time,
| | 05:13 | here in our Basic options we are
going to go to this item here called Shows
| | 05:17 | Submenu Items, right now that's set to No.
| | 05:21 | And the way that that works is the
behavior we are seeing when this module was
| | 05:25 | on the right side of the page.
| | 05:26 | When you are the Products section, you
saw the sub navigation for products, but
| | 05:29 | you didn't see the sub navigation for About.
| | 05:31 | What we are going to do now is, we are
going to say Show Sub-menu Items
| | 05:36 | all the time, by setting this to Yes.
| | 05:38 | When you set this to Yes, if this
module was on the right of the screen,
| | 05:42 | you'd always see the sub navigation
all the time, which doesn't necessarily
| | 05:45 | work for that display.
| | 05:46 | But it works great for a dropdown
menu because whenever you roll your mouse
| | 05:50 | over About or Products the
dropdown menu will appear.
| | 05:53 | Go ahead and just say Save and when we
refresh the front end of the Web site,
| | 05:59 | now we'll see the drop downs appear for
About and the dropdowns will appear for
| | 06:04 | Products right here.
| | 06:05 | So that's really cool.
| | 06:07 | Of course, we also have a
dropdown for News & Info.
| | 06:09 | None for home because we don't
have any sub-navigation for home.
| | 06:12 | So the last problem we need to solve
is how do we make this navigation bar go
| | 06:17 | horizontally across the page?
| | 06:19 | Fortunately, that is a property that's
built-in to Bootstrap. Bootstrap has a
| | 06:25 | style that's built into its stylesheet
called Nav-pills and this particular
| | 06:33 | class formats navigation bar to
go horizontally across the page.
| | 06:37 | So to configure this, all we need to
do is now go to our Advanced Options.
| | 06:43 | And here where you have got a menu
class suffix, what I would like for you to
| | 06:49 | type in is the following, a
space followed by nav-pills.
| | 06:55 | Why the space first?
| | 06:56 | Well, what's going to happen in this
particular text, nav-pills will be put into
| | 07:03 | the class attribute inside of the
appropriate HTML tag, and there may be already
| | 07:09 | be some other classes present, in
fact there are in the back end of Joomla!.
| | 07:12 | And if you just put in nav-pills
without the space in front of that
| | 07:17 | you'll wind up running this into
making a whole new class names.
| | 07:20 | So it will be something like menunav-pills.
| | 07:24 | What we want to have is the class of
menu separate from the class of nav-pills
| | 07:30 | and that's why we put a space in front of this.
| | 07:31 | So go ahead and save one more time and
when we refresh this page, our navigation
| | 07:39 | is now going horizontally across the
page and we have dropdowns which all work
| | 07:46 | really, really well and of course we
can now navigate freely around the Web site
| | 07:51 | skipping about to whatever page we
want to go to without necessarily visiting
| | 07:55 | the top-level page first.
| | 07:57 | This same formatting here that I just
put up here on the top for this nav-pills
| | 08:02 | we can now apply down here to
the bottom to the Footer menu.
| | 08:05 | So let's go ahead and take care of
that while we're here, we will go ahead
| | 08:09 | and say Save & Close.
| | 08:10 | And now down here in the Footer menu,
we will do exactly the same thing.
| | 08:14 | If we go to the Advanced Options to the Menu Class
Suffix space nav-pills and say Save & Close.
| | 08:23 | And if we refresh the front end of
the Web site, now our navigation is going
| | 08:28 | horizontally down here on the bottom as well.
| | 08:30 | So that's pretty cool, we've added a
new navigation item, the products with all
| | 08:36 | of its sub navigation, we moved our
menu module to appear at the top of the
| | 08:40 | screen and we configured our dropdown
menus all at the same time.
| | Collapse this transcript |
| Configuring secondary navigation| 00:00 | I love getting e-mails from those of you
who are watching these videos at lynda.com.
| | 00:04 | And for years, I've gotten e-mails
from people who say, gosh, I love Joomla!
| | 00:08 | I love the way the menus work, but I
really want dropdown menus, and I have
| | 00:12 | always had to write back and say, go
download a third-party extension for that.
| | 00:15 | Now that we've got dropdowns built into Joomla!
| | 00:17 | and built into the Protostar Template,
I know some of you are going to be very
| | 00:21 | happy about that, that we've dropdowns
now that show up here across the page.
| | 00:25 | But I also know that some of you are
now going to say, oh, by the way, I really
| | 00:30 | love the way we had it in the old
days, I don't really want dropdowns.
| | 00:33 | What I'd like to have is, I like to have
this main navigation going across the top,
| | 00:37 | and when you click on something like
News & Information, over here on the
| | 00:41 | right side of the screen I'd like to
have some sub-navigation show up here,
| | 00:45 | rather than having these dropdowns,
and I'd like to turn the dropdowns off
| | 00:48 | altogether and just have
this sort of a split navigation.
| | 00:50 | So the main navigation across the top, the
sub-navigation down on the side of the page,
| | 00:54 | how can I possibly configure that?
| | 00:56 | Well, you can still configure that and
you don't have to have these dropdowns
| | 01:01 | if you don't want them, and that's what I'm
going to show you in this particular video.
| | 01:05 | So what I'm going to do now is I'm
going to go into the back end of Joomla!
| | 01:09 | and I'm going to start by making a new
Menu Module and this Menu Module will
| | 01:15 | show up on the right side of the
screen to show you that sub-navigation.
| | 01:19 | So I'm going to start by going to
Extensions>Module Manager and remember that
| | 01:24 | the Module Manager is the way that
these menus display on the Web site
| | 01:28 | and where they display.
| | 01:29 | The module can also specify what
part of the menu you want to display.
| | 01:35 | You do not want to go into the Menu
Manager and make a whole new menu.
| | 01:40 | If you go into the Menu Manager you
make a whole new menu call it the About
| | 01:44 | sub-navigation menu.
| | 01:46 | Two problems happen;
| | 01:47 | first of all, you run the risk of
making duplicate content on your Web site.
| | 01:52 | So you're making links to your pages
that already exist on your Web site,
| | 01:56 | but the second thing that will happen is
if you happen to be using the breadcrumb,
| | 01:59 | the breadcrumb is located right here
on the front end of the Web site.
| | 02:02 | Let me go down into let's say
the Press Releases page here.
| | 02:06 | This breadcrumb that's currently
reading Home, News & Information, Press
| | 02:09 | Releases which accurately reflects the
information architecture of this Web site.
| | 02:15 |
| | 02:15 | If you create a sub-navigation
called Press Releases, you set up a whole
| | 02:19 | separate menu for that, you display
it on the right side of the screen.
| | 02:22 | This breadcrumb will only read Home,
Press Releases, it won't read correctly.
| | 02:27 | In order to keep from making duplicate
content, what we're going to do is use
| | 02:31 | our module as a filtering device to
just show portions of the menu that we want
| | 02:35 | to have displayed on our pages.
| | 02:38 | So here inside of the Module Manager I'm going
to click on my New button to make a new module.
| | 02:43 | And I'm going to go to my menu item here,
because that's of course the kind of
| | 02:49 | module that I want to make.
| | 02:51 | I'm going to give this a Title,
I'm just going to call this Subnavigation,
| | 02:54 | I'm not going to show that title though.
| | 02:56 | Nobody needs to see
subnavigation on top of the links.
| | 02:59 | The Position I want this to appear
in is on the right side of the page.
| | 03:03 | So I'm just going to pick
Right here from the list.
| | 03:06 | And under Basic Options let's make sure
that we're displaying the right menu,
| | 03:10 | I want to display the Main Menu.
| | 03:12 | So let's just see what we've got so far.
| | 03:15 | If I go ahead and hit Save
and refresh my page here.
| | 03:21 | I'm just going to go back to Home.
| | 03:23 | So now I've the navigation going across
the top of the page, I have that same
| | 03:27 | navigation over here on the right.
| | 03:29 | When I go to the About portion of the
Web page you can see that I have some
| | 03:34 | sub-navigation here.
| | 03:35 | That's not really what I want.
| | 03:37 | What I want to have happen is, I don't
want them on the Home page, I don't want
| | 03:41 | to see this module over here at all,
and when I go to the About page,
| | 03:45 | what I want to see is just
Executives and Company Structure.
| | 03:48 | Okay, so let's tweak
this just a little bit more.
| | 03:51 | So, first of all, let's control what page
is this sub-navigation will show up on.
| | 03:56 | We can do that through the
Menu Assignment tab here.
| | 03:59 | Right now this is set to show
on every page of the Web site.
| | 04:02 | What I would like to do is I'd like
it to show on every page of the Web site
| | 04:06 | except for the ones I'm going to select.
| | 04:08 | So if I choose this, by default all
of the pages are selected which would
| | 04:14 | mean that it would display on none of the
pages of the Web site, a little bit confusing.
| | 04:19 | So what I want to do is say
Select None to deselect everything.
| | 04:24 | So I want this module to display on
every page of the Web site except for,
| | 04:30 | I don't want it on the Home page on the
Footer, I don't want it on the Login
| | 04:33 | page on the footer.
| | 04:34 | I don't want it on the
Home page on the Main Menu.
| | 04:37 | But for the other pages that exist right
now, I'd like it on all those other pages.
| | 04:42 | So let's go ahead and say Save again
and let's see how that's affected things.
| | 04:47 | So if I go back to my Home page I no
longer see that menu module, and if I go to
| | 04:52 | the About page, I now have the full navigation.
| | 04:56 | So I've got Home, About, News & Info
as well as my sub-navigation.
| | 05:00 | So I need to make one more tweak, I
want to just see those links Executives
| | 05:05 | and Company Structure.
| | 05:06 | I don't want to see the other stuff and
that's possible here inside of our Menu
| | 05:11 | Module under Basic Options.
| | 05:13 | So we got here to Basic Options what we
have here is our base item is Current,
| | 05:20 | whatever our current page is,
that's where we're going to start from.
| | 05:25 | We could of course specify this as any
of the particular menu items here and
| | 05:30 | that would show for example, let's say
the News & Information sub-navigation
| | 05:33 | on the About Us page. Really, really confusing.
Just because you can doesn't mean you should.
| | 05:41 | So I think Current is
probably a great setting for this.
| | 05:44 | But our Start Level is level 1, so in
other words, start at the Main navigation
| | 05:49 | and then end by displaying all of
the navigation that occurs underneath.
| | 05:53 | What I actually want to have
happen is start at level 2, start at the
| | 05:57 | sub-navigation and then display any third
level or fourth level navigation I have.
| | 06:02 | I don't have any for this
Web site, but you might for yours.
| | 06:05 | So I'm going to set this to level 2
and say Save one more time, and now what
| | 06:10 | happens when I refresh this page I get
just Executives and Company Structure
| | 06:15 | within the About portion of the Web site.
| | 06:17 | When I go to News & Info, I get Solar
Blog and Press Releases, and when I go
| | 06:21 | to Products, I get my sub-navigation over
here as well, which is exactly what I want.
| | 06:27 | And when I go back to the
Home page I don't have it.
| | 06:30 | The last thing you might want to
try doing is, maybe you feel like these
| | 06:34 | dropdowns are a little bit repetitious,
because right now you're going into
| | 06:38 | the About page, the sub-navigation is over here,
maybe you don't want these dropdowns anymore.
| | 06:43 | How do you get rid of them?
| | 06:45 | Well, here's what you do.
| | 06:46 | I'm going to hit Save & Close to get
out of my sub-navigation module and
| | 06:51 | I'm going to click on my Main Menu module,
and in here what I'm going to change is
| | 06:56 | under my Basic Options right now I've started
with level 1 and I'm ending with level All.
| | 07:02 | What I'm going to do is I'm going to
not show my submenu items, remember that
| | 07:07 | will turn off the dropdown except on the pages.
| | 07:10 | So if I'm on the About portion of the
Web site I'll see the dropdown, but
| | 07:13 | if I'm on the Products portion of the Web site
I won't see the About dropdown,
| | 07:18 | and I'm going to change my End Level from All to
level 1, in the words, just show me one level.
| | 07:24 | And if I say Save and I Refresh the
Web site, now I have no dropdowns.
| | 07:31 | I have just my secondary
navigation over here on the side.
| | 07:35 | When I go to News & Information, that
secondary information updates, and I have
| | 07:39 | no dropdowns anywhere.
| | 07:42 | So this is another way of
presenting navigation on your Web site.
| | 07:46 | This particular template we've put it
on the right side of the screen,
| | 07:50 | but depending on what template you're
working with, there might be a left column
| | 07:53 | where you could put that navigation instead.
| | 07:55 | And which approach is better? Well, it depends.
| | 07:57 | It depends on the design for your Web site,
it depends on your user interface,
| | 08:01 | it depends on the kinds of users that
you're working with, it depends on your
| | 08:05 | personal preferences and
your client preferences.
| | 08:08 | But you now have two ways of displaying
navigation on your Web site, whether you
| | 08:12 | do it through dropdowns or whether
you split up your navigation over
| | 08:15 | two modules on the Web site.
| | 08:17 | I'm going to go ahead and turn everything
back on again to get my dropdowns
| | 08:21 | back, and I'm actually going to unpublish
that secondary navigation module,
| | 08:26 | because I'd rather stick with the dropdowns
for this Web site, but now that I've
| | 08:30 | walked through it, that's
the way that you get it done.
| | 08:33 | So let me just walk you through, how
we're going to go back to having those
| | 08:37 | dropdowns show up again.
| | 08:38 | Here once again I'm in my Main Menu
module, I'm going to go to my Basic Options,
| | 08:43 | set by End Level to All, Show my
Submenu Items and say Save & Close.
| | 08:49 | And then for my Subnavigation I'm
simply going to unpublish it, and
| | 08:54 | when I refresh my homepage now I've got my
dropdowns back again and when I go to
| | 08:59 | let's say the Executives page, I don't
have that sub-navigation over here.
| | Collapse this transcript |
|
|
6. Advanced Article FormattingLinking to a PDF or other document| 00:00 | At this point, we have a pretty basic
Web site up and running, we've got our
| | 00:04 | categories, all established, we have
got our articles more or less in place,
| | 00:09 | we've created some menus, we've got
some dropdowns, it finally started to feel
| | 00:13 | like something approximating a real site.
| | 00:16 | So, now that we've gone through the
first iteration of the articles, I would
| | 00:20 | like to show you how we can add some additional
features and functionality to these articles.
| | 00:25 | And one of the things that people ask about a
lot is how they can add a PDF to an article.
| | 00:31 | So I've just received a brochure about
this company and they would like this
| | 00:37 | added to the About page of the Web site.
| | 00:39 | So we are going to need to go back, edit
the About page and add a link to this PDF.
| | 00:45 | So, I am going to show you how to do that now.
| | 00:48 | So, in the back end of Joomla!
| | 00:49 | our first step is going to be to
upload this PDF to our Media Manager.
| | 00:53 | So to do this, what I am going to do
is I am going to go to Content>Media Manager,
| | 00:58 | and I am going to go ahead
and make a folder for these.
| | 01:02 | So, I am going to create a folder, I am
going to call it pdf, create that folder.
| | 01:07 | So there's my folder called PDF and
I can put all of my PDFs in there.
| | 01:11 | And in here, I'm going to go
ahead and upload my PDF file.
| | 01:15 | And so, I am going to go ahead and hit
the Upload button, browse for that file,
| | 01:20 | and that will be on the Desktop, on my
Exercise files in Chapter 6, and here's
| | 01:26 | the kineteco-brochure, go ahead and
say Open and Start Upload and we have the
| | 01:32 | brochure right here.
| | 01:33 | What we need to do is the path to this
particular item, and the way we can do
| | 01:39 | that is we know that our Media Manager
folder is in the images folder inside of Joomla!
| | 01:45 | and we made a folder called pdf
and here's kineteco-brochure.pdf.
| | 01:51 | So, the full path to this PDF file is
images/pdf/kineteco-brochure.pdf,
| | 01:56 | I am just going to copy this,
because this may come in handy.
| | 02:01 | Now that I have the PDF and a Media Manager,
I am going to go to my individual
| | 02:06 | article and I am going
to add a link to that PDF.
| | 02:09 | So, I am going to go to my Content to
my Article Manager, make sure you don't
| | 02:15 | have any of your filtering turned on.
| | 02:16 | I'm going to go to my About article.
| | 02:19 | So I am just going to click on that,
and then down here under the Company
| | 02:24 | Description, I am just going to add
another sentence that says Read our
| | 02:28 | company brochure (PDF).
| | 02:33 | Always good to warn people that
they're going to download a PDF file.
| | 02:37 | If you want, you can tell
them the file size of that PDF.
| | 02:40 | So we can say it's something like 175K in size.
| | 02:43 | And so what I need to do is just make a link.
| | 02:48 | So, I am going to highlight the words
Read our company brochure and I'm going to
| | 02:52 | click on the Link icon here in TinyMCE.
| | 02:55 | So I am going to click on this link icon and
it's going to ask me for the URL for the PDF.
| | 03:00 | Well, as I said before that URL is
images slash (/) and by the way it's the
| | 03:05 | slash going the other way, backward
slashes (/) are here, because I'm working on PC;
| | 03:09 | images/pdf/kineteco-brochure.pdf.
| | 03:12 | Then you can choose to open this PDF
and the same window or in a different window,
| | 03:20 | it doesn't really matter what you pick,
it's just a matter of being consistent.
| | 03:25 | I like to open PDFs in a new window as well.
| | 03:27 | So I am going to go ahead and say Insert
and then I am going to say Save & Close.
| | 03:34 | And now when I go to the front end of
the Web site and I go to the About page,
| | 03:38 | I should be able to scroll on down.
| | 03:40 | Here is the link to read the company brochure.
| | 03:43 | When I click this, this will open a
new tab and here is my PDF and I have
| | 03:50 | that all opened in a new tab, came up
right away, because it's nice and small
| | 03:53 | in terms of file size.
| | 03:54 | Sometimes people are given these PDFs
from their print designers, though they
| | 03:59 | output that as ultimately going to be
going to a printing press for example and
| | 04:03 | they tend to be very, very large in file size.
| | 04:06 | In fact this brochure that I got was
originally 10.5 megabytes and there is just
| | 04:11 | no need for that on the Web, we don't
really need that high-resolution PDF just
| | 04:15 | for people to take a look at here.
| | 04:17 | So, I reduced that file size down to
175K, it still looks great on my browser.
| | 04:22 | So you may want to do that if your
clients hands you a PDF and says post it,
| | 04:27 | and it seems to have a big file size,
particularly if you are going to wind up
| | 04:31 | working with mobile devices that may be
on a slow Internet connection and people
| | 04:34 | who have data plans, be sensitive to
the file size of your PDFs and try to get
| | 04:39 | them as small as possible, so
people have a quick download.
| | 04:41 | So, that's how you add a PDF to your Web site.
| | Collapse this transcript |
| Dividing and formatting long articles using page breaks and the Pagebreak plugin| 00:00 | I am on the Executives page of our Web site.
| | 00:02 | This is under the About section and
right now this page is just a list of
| | 00:09 | people and biographies.
| | 00:10 | It's just one after the other.
| | 00:12 | We can probably improve the look of this
page by adding some photos of these people,
| | 00:16 | but this is a young company and they
haven't had the time to go out and
| | 00:20 | take the photography that's required
to put all these people up here.
| | 00:23 | So what I am looking for is a way that
I can add a little bit more interactivity
| | 00:28 | and a little bit more fun to this page.
| | 00:30 | One possible way of doing this is using
Accordion Panels and you see Accordion
| | 00:36 | Panels in a few places inside Joomla!
| | 00:39 | One of them is for example where we
add if we go to our Main Menu and we try
| | 00:44 | to add a New menu item and we hit our
Select button, these little items here
| | 00:49 | where we click on the titles and then
something drops down, these are Accordion Panels.
| | 00:55 | What I could imagine would be a page
that looks like this that has the names of
| | 01:00 | all of the people who are the employees
that are executives and when you click
| | 01:04 | on their name, you get a
biography for them that appears.
| | 01:07 | That would be a little bit more interactive.
| | 01:09 | So perhaps we can go ahead and add
something like that to the Web site.
| | 01:13 | That is in fact possible and I am going to
show you how to go ahead and do that now.
| | 01:19 | If you go to Content and you go your
Article Manager, scroll on down and find
| | 01:23 | that Executives article, and when you
go into the Executives article,
| | 01:27 | what you'll see is we formatted this so that
we had some H2s that were the names of
| | 01:33 | the people and then of course we
have a paragraph of information here.
| | 01:36 | So what I'd like to do now is I'd like
to set these up with internal page breaks
| | 01:41 | and this is the Page Break button here.
| | 01:43 | So what breaking this up into page breaks
will do is it will put little bits of
| | 01:49 | information originally on
individual pages and then Joomla!
| | 01:54 | actually has a plug-in built-in that
can display those individual pages as a
| | 01:58 | full accordion, as opposed to a series of
individual pages you actually have to flip through.
| | 02:04 | So what I am going to do is, right
before Simon I'm actually going to put in a
| | 02:08 | page break right off the bat, and it's
going to ask me for information
| | 02:13 | a Page Title and a Table of Contents Alias.
| | 02:15 | The easiest way to do this
is just to copy his name.
| | 02:18 | So Ctrl+C or Cmd+C to copy his
name and then right before his name
| | 02:22 | I'll click that Page Break button and I am
just going to paste that information in
| | 02:26 | twice and say Insert Page Break.
| | 02:28 | Then I am going to go my next person,
copy her information, click right before
| | 02:32 | her name, click the Page Break button,
and paste that information in twice.
| | 02:36 | I am just going to do that here
for the last two people as well.
| | 02:41 | Copy that, click the Page Break,
paste in, Insert Page Break.
| | 02:46 | Then finally, for this last one,
copy, click before, click Page Break,
| | 02:53 | and Insert Page Break.
| | 02:54 | Now, that's all I have done so far.
| | 02:57 | If I just go ahead and say Save,
just to save what changes I've made and
| | 03:01 | I refreshed the Executives page.
| | 03:03 | What will happen is I've actually got
this set up with this sub-navigation set
| | 03:07 | up over here on the side and I can
click on the names of any of these
| | 03:11 | executives and you see that they're
sort of presented in their own page
| | 03:15 | and tells you it's page 2 of 5.
| | 03:16 | I can click on through the list here
or I can click on all pages and show
| | 03:20 | everyone together on one page.
| | 03:22 | You might be wondering why on the top
level Executives page I have no content.
| | 03:27 | That's because I put my page
break before the content even began.
| | 03:31 | So if you are going to use this kind
of layout, you might want to have some
| | 03:36 | introductory text over here on the side
that would say something along the lines
| | 03:39 | of our executives are amazing, click on
the navigation on the right in order to
| | 03:43 | explore all of our fabulous people.
| | 03:45 | But we are not going to stay
with this particular layout.
| | 03:48 | This is just Joomla's! default layout for an article
that has page breaks in, a multipage article.
| | 03:53 | We can make changes to this.
| | 03:55 | I am going to go ahead and hit
Save & Close and I am going to now go to
| | 03:59 | Extensions>Plug-in Manager and here
inside of the Plug-in Manager I am going to
| | 04:04 | look for the plug-in called Content-Pagebreak.
| | 04:06 | I am going to click on that to edit it.
| | 04:10 | So this is the plug-in that drives the
ability to break a single article into
| | 04:15 | several pages, the way you just saw.
| | 04:17 | Under the Basic Options, the Presentation style
is what I'm most interested in.
| | 04:23 | Right now that's set to Pages.
| | 04:25 | If I change that to Sliders,
sliders are Joomla's! word
| | 04:29 | for Accordion Panels and if I say
Save and I refresh this page,
| | 04:36 | I now have my Accordion Panels.
| | 04:38 | So I can click on Sally's name and get
her information, click on June's name,
| | 04:44 | click on Jason's name, and get
all of these bios, which is great.
| | 04:47 | That's a wonderful way of laying out this page.
| | 04:50 | It's definitely looks a little
bit better than what we had before.
| | 04:54 | And if you're a CSS wiz, you could certainly
add a little bit more styling to these,
| | 04:58 | maybe some bars that go across
the page or something that might look
| | 05:01 | a little bit more clickable or
little bit more accordion like.
| | 05:04 | What I do want to do right now know
though is I'd like to get rid of these
| | 05:09 | big bold words, because I've already got
their name here and now I've got it again here.
| | 05:14 | What's happening is the big black words
here are the H2s that are inside of the
| | 05:17 | article and the blue clickable words,
these are where we entered each of those
| | 05:23 | page breaks, we put in two pieces
of information, and that's where that
| | 05:27 | information is coming from on the page.
| | 05:29 | You'll notice also here inside of
his Page Break plug-in down here under
| | 05:33 | Presentation Style you also
have the option of Tabs or Pages.
| | 05:37 | Pages are what Joomla! uses by default,
so you saw that one.
| | 05:41 | Tabs would arrange this as a
series of tabs going across the page.
| | 05:44 | You can click on the tabs to
flip between the types of content.
| | 05:48 | But the styling really works if somebody
has configured styling for tabs and
| | 05:53 | this particular template is not styled for tabs.
| | 05:55 | So I am not going to show you this, but
you can take a look if you like on your own.
| | 06:01 | I am going to go ahead and close this
and I am going to go back to my Content,
| | 06:05 | back to my Article Manager, and I am
going to go to my Executives page again.
| | 06:09 | Now I am going to edit this to get rid
of the names of the executives' right here,
| | 06:14 | those H2s that we originally created.
| | 06:17 | Just like that I am just going
to remove those h2s from the text.
| | 06:20 | Remove that one and then one more and
then I am going to Save & Close my article
| | 06:30 | and now when I go back to my Executives
page and I refresh, you'll see that by
| | 06:34 | default I've got Simon Lodine, the
very first one, and he's open by default.
| | 06:39 | I can click on the names of these other
people and their bios will jump up here,
| | 06:43 | just like that and I can
flip between them very nicely.
| | 06:46 | It's a little bit more interactive.
| | 06:47 | It makes the page feel a little bit shorter.
| | 06:50 | It doesn't like quite such a laundry
list of stuff and I think this is
| | 06:55 | a great way of presenting this content.
| | Collapse this transcript |
| Customizing which HTML tags are permitted by changing the text filter in Joomla!| 00:00 | So far I have showed you how to
put a number of articles into Joomla!
| | 00:04 | and we've had no trouble copying
and pasting from Notepad and pasting
| | 00:08 | things into Joomla!
| | 00:09 | One of the things that I'd like to do
in the video following this one is
| | 00:13 | I'd like to put a YouTube video
inside of my Joomla! article.
| | 00:16 | But one of the common problems that
happens when you try to embed something like
| | 00:20 | a YouTube article or Twitter feed or
Facebook feed or any one of these other
| | 00:24 | type of badges and widgets that come
from other Web sites, is that Joomla!
| | 00:28 | tends to strip out the code that you paste in.
This is a feature not a bug.
| | 00:34 | And so what do I mean by this?
| | 00:37 | Well, there are a number of HTML
tags and attributes that you may not
| | 00:42 | necessarily want people
putting into your Joomla! Web site.
| | 00:45 | They can potentially cause security
issues or problems or people might put them
| | 00:50 | in as a way to try to hack into
your Web site. So what Joomla!
| | 00:53 | does by default is it tries to screen out
as many of these tags and issues as possible.
| | 00:59 | Then on top of that, on top of Joomla!
| | 01:02 | screening out tags and things, the
editor that you're using inside of Joomla!
| | 01:06 | which in this case is TinyMCE, also
strips out a set of tags and attributes
| | 01:13 | in some cases, to make sure that
your code is clean and secure.
| | 01:17 | So I wanted to go through where
those settings were, so that we can tweak
| | 01:22 | those settings such that we can then go through
and put a YouTube video in, in the next video.
| | 01:27 | So where I'm going to go to take a
look at this configuration is under the
| | 01:31 | Global Configuration.
| | 01:32 | So here on your Control Panel you can
just click the link here on the left side
| | 01:36 | for Global Configuration, and we're going to
switch to the Text Filters tab here on the end.
| | 01:43 | Now in Joomla! there are a number of different
groups of people who are allowed to use the Web site.
| | 01:49 | These are user groups and users are
assigned to each one of these user groups.
| | 01:53 | By default, when you install Joomla!
| | 01:55 | for the first time, one user is
created and that is a Super User,
| | 02:00 | that's down here at the bottom of the list and under
Super Users and this is set as No Filtering.
| | 02:07 | In other words, Joomla! is not filtering any of
the HTML that you're putting into the system.
| | 02:12 | It just takes whatever the Super User puts in
and it will write it directly to the Joomla!
| | 02:18 | database and save it, for
good or bad or indifferent.
| | 02:21 | Now if you've got Super User access to
the Web site, there is a whole lot of ways
| | 02:25 | you can screw up your Joomla!
Web site being a Super User.
| | 02:28 | So setting this to No Filtering,
works perfectly okay for me.
| | 02:32 | There are some other lower level user
groups that are present here that you may
| | 02:36 | want to create users for, you may assign
these user groups to your clients,
| | 02:41 | this is part of Joomla's! ACL system,
| | 02:42 | Access Control Lists, and
each one of these groups has different
| | 02:47 | permissions to do different things.
| | 02:49 | For example, the Administrator and
the Manager are allowed to log into
| | 02:53 | the backend of Joomla! but the Registered,
Author, Editor and Publisher user groups are
| | 02:59 | not allowed to login to the back end of Joomla!
they can only log in to the front end.
| | 03:04 | So you'll see here that we have different
types of filtering that go on with these
| | 03:08 | particular user groups, and your
choices are a Default Black List,
| | 03:11 | a Custom Black List, a White List,
No HTML, and No Filtering.
| | 03:14 | So what you can do here is the Default
Black List will allow you to put in any
| | 03:20 | kind of HTML except for tags
that are on the Black List.
| | 03:24 | The Custom Black List would let you put in any
kind of HTML except for tags that you define.
| | 03:29 | A White List means that only tags you
specify are permitted, and of course,
| | 03:35 | No HTML means you can't put any HTML
and are all just straight text,
| | 03:39 | and No Filtering means nothing is filtered
at all, you're just allowed to put things
| | 03:42 | straight into Joomla!
| | 03:43 | By default these are the types of
filtering that you have here in Joomla!
| | 03:48 | You'll see things like Public and
Registered are not permitted to put any HTML in.
| | 03:54 | And that makes sense, because these
user groups are just people who will be
| | 03:57 | logging into the Web site, they shouldn't
be doing a whole lot of typing anyway.
| | 04:00 | Whereas, some of the other user
groups like the Authors, the Editors, the
| | 04:04 | Publishers, the Managers, all have a
default Black List that will strip tags out
| | 04:09 | and some of those tags are typically
the iFrame tag or the Java's Applet tag is
| | 04:15 | another one that frequently gets
stripped out, because these can be potentially
| | 04:18 | harmful to your computer
and to your Joomla! system.
| | 04:21 | So this is one place to go
| | 04:22 | if you find that, you'll try to copy
some code from Twitter or Facebook,
| | 04:27 | YouTube, any one of those social media
sites, you're trying to put it into Joomla!
| | 04:31 | somehow, and you're finding
that that code gets stripped out;
| | 04:34 | this is the first place to go.
| | 04:36 | But as a Super User, we
have no filtering, so Joomla!
| | 04:39 | is not doing any filtering for us, it's
not taking any of those HTML tags out or
| | 04:44 | trying to make our code safer.
| | 04:45 | So the second place to look, once
you've taken a look at Joomla!'s settings,
| | 04:49 | is to take a look at your
Editor setting, and our editor is TinyMCE
| | 04:53 | and that is under Extensions>Plug-in
Manager, and if you scroll on down here,
| | 04:59 | you'll find the TinyMCE editor right here.
| | 05:03 | And if you click on that, and you go
switch over to the Basic Options,
| | 05:09 | we were in here a few videos ago where we
switched this to Extended Functionality.
| | 05:13 | One of the additional settings that
we have here as you scroll on down is
| | 05:18 | Prohibited Elements.
| | 05:20 | So by default TinyMCE is programmed not
to allow the script tag, so the script
| | 05:26 | tag is commonly used for dropping
JavaScript into a Web page, not to allow the
| | 05:31 | Applet tag and not to allow the iFrame tag.
| | 05:33 | These prohibited elements apply to
all user groups, so they apply from
| | 05:40 | everywhere from super administrators,
right on down to the registered users.
| | 05:43 | So if you have iFrame listed in your
Prohibited Elements here, you're not going
| | 05:48 | to be able to put a YouTube video
into one of your articles, for example,
| | 05:52 | because it's prohibited here.
| | 05:54 | It also happens to be one of the
prohibited tags inside of the Black List.
| | 05:59 | So if you take it out here, you're going
to permit those with no filtering in Joomla!
| | 06:03 | to have the ability to put an iFrame
tag into the site, but those who have the
| | 06:08 | Default Black List applied to their
user group, there really actually won't be
| | 06:12 | any change, because Joomla! won't allow them
to put in that iFrame tag into Joomla!
| | 06:17 | So what I'm going to do here right now is I'm
going to edit this to take out the iFrame tag.
| | 06:22 | I'm just going to leave script and
applet as my Prohibited Elements,
| | 06:25 | and I'm going to say Save & Close.
| | 06:27 | That will allow us now to put a YouTube
video into an article, and I'll show you
| | 06:33 | how to do that in the next video.
| | Collapse this transcript |
| Adding a YouTube video to an article| 00:01 | Recently KinetEco had a public service
announcement produced and they posted
| | 00:05 | this on YouTube, and now what they'd
like to do is they'd like to include this
| | 00:09 | on the About page of their Web site.
| | 00:11 | So what I need to do now is get this
YouTube video embedded in my Joomla! site.
| | 00:16 | So to do that what I am going to do is,
down here at the bottom of this video
| | 00:21 | there is a button that says Share.
| | 00:23 | So if I click this button that says
Share the first level of sharing you get is
| | 00:27 | just a link and that link will send
somebody to this YouTube page so that they
| | 00:32 | can watch the video.
| | 00:33 | In order to get a YouTube video to
actually play within your page, you're going
| | 00:37 | to need to go one-step further and
that's what this Embed button right here.
| | 00:41 | And this will give you some code in an
iFrame tag and this code will allow you
| | 00:47 | to put the video inside your Web site.
| | 00:49 | There is some minor customization that
you can do here in terms of making the
| | 00:53 | video a little bit larger or you can
pick a Width down here in the bottom or
| | 00:57 | type-in your own custom width, I am
just going to stick with the default
| | 01:01 | 560x315, I am just going to copy
the code that I have here,
| | 01:07 | so Ctrl+C or Cmd+C to copy that code.
| | 01:09 | Remember in the last video, I talked
about filtering tags and so make sure that
| | 01:14 | you've configured TinyMCE so that it
won't strip out your iFrame tag before we
| | 01:19 | go on to the next step.
| | 01:20 | So now that I've grabbed this little bit
of embed code, I can go back to my Joomla!
| | 01:25 | Web site in the back-end here and I am
going to go to Content>Article Manager
| | 01:30 | and I am going to find my About article.
| | 01:32 | So in my About article,
down here towards the bottom.
| | 01:36 | We already added a line here about
reading the company brochure,
| | 01:40 | just after that is where I'd like this
YouTube video to be displayed.
| | 01:43 | So what I am going to do is I am
going to do hit this Toggle Editor button
| | 01:47 | down here in the bottom.
| | 01:49 | And just after that line here in the HTML, I
am going to add the HTML that I just copied.
| | 01:54 | If you don't know HTML you really don't
have to worry about it, just take a look
| | 01:59 | and find the end of where the code
stops, put it in a return and hit Paste,
| | 02:04 | Ctrl+V or Cmd+V to paste that in
that little bit of code that you copied,
| | 02:09 | and that should be all you need to do.
| | 02:11 | Go ahead and say Save & Close and now
when you go back to the front end of the
| | 02:16 | Web site and you go to the About page,
you should see down here on the bottom the
| | 02:21 | YouTube video, and we didn't have to
use a third-party extension and we didn't
| | 02:25 | have to do anything special other than
turn off the tag filtering to allow this
| | 02:30 | YouTube video to be embedded within our
| | 02:33 | Joomla! article which is really quite great,
it's very, very easy to include these
| | 02:38 | YouTube videos inside of articles.
| | 02:40 | The procedure that I just followed is
very similar if you wanted to include a
| | 02:44 | Twitter feed or a Facebook feed of
some kind or feeds from other various
| | 02:49 | social media Web sites.
| | 02:50 | You'll follow a fairly similar
procedure to put those into Web pages.
| | Collapse this transcript |
| Using article-specific images and links| 00:00 | So I'm looking at the Solar Blog page for my
Web site, and I've a series of articles here.
| | 00:06 | They have got the big title and they
have got a little bit of text here,
| | 00:10 | not all of them with Read More buttons but
some of them have Read more buttons that
| | 00:14 | we can click on to go to the full article
with a big picture down here on the bottom.
| | 00:19 | The page itself doesn't
look terribly interesting.
| | 00:21 | One of the things that I'd like to add
to this page is I would like to include
| | 00:25 | a tiny version of that image that I have
associated with most of these articles,
| | 00:31 | and have that show here on this big Blog
page and then once I click on the link
| | 00:36 | I'd like to go to a page that just has
the large version of the image on it.
| | 00:40 | I don't want to see the small version of the
image when I go to the full-size page here.
| | 00:45 | I'd also like some way that these images
become standardized, so that the small
| | 00:51 | images are all of more or less the same
size, the big images are more or less of
| | 00:55 | the same size that they occur more or
less on the same places on the page.
| | 00:59 | So to do that, there is actually an
interface for doing this inside of Joomla!
| | 01:03 | and we haven't taken a look at that yet,
so let's go ahead and look at that now.
| | 01:08 | If I go to Content and I go to the
Article Manager and I'm going to go ahead
| | 01:13 | and filter my articles here just to show me
the articles that are in the Solar blog.
| | 01:17 | So I'm going to Category and choose
Solar from my list, and I have a list of my
| | 01:22 | four articles here that
are part of the Solar blog.
| | 01:25 | And remember that two of these are featured;
| | 01:27 | they are showing up on the News & Info page.
| | 01:29 | So if I click on let's say Farmers
installing solar power in record numbers,
| | 01:34 | this is my article as it currently stands.
| | 01:36 | I have my introductory text here at the top.
| | 01:39 | The red line indicates the Read More
break, and so that's where the button goes,
| | 01:43 | that says Read More, I click on it I
go to a full version of the article that
| | 01:47 | has the image here underneath.
| | 01:49 | And so far I haven't scroll down the
page to show you the rest of what's here,
| | 01:53 | but there is in fact a little bit more.
| | 01:55 | Down here at the bottom of the page is
this panel of Images and Links, and so we
| | 02:01 | can set some standardized images or
standardized links for each of our Joomla!
| | 02:06 | articles that always show up in the
same places on these articles,
| | 02:10 | they will always appear the same kind of way.
| | 02:12 | So that's kind of nice because it adds
a little professional polish to the site
| | 02:16 | in that the placement of
these images is always the same.
| | 02:19 | So what I'm going to do is I'm going to
set up an intro image and a full article
| | 02:24 | image for these articles now.
| | 02:27 | And the way I'm going to do that is
where it says Intro Image,
| | 02:31 | we have to choose one.
So I'll hit my Select button.
| | 02:34 | This will put me into my Media Manager
and I don't have any of these small
| | 02:39 | versions of these images available.
| | 02:41 | If I go into my Blog folder though,
I can certainly upload these.
| | 02:45 | I can hit my Browse button and I'm going
to go to Exercise Folder and Chapter 6,
| | 02:51 | and you see that I have already prepared
for you three small versions of the
| | 02:55 | pictures that appear in the solar blog.
| | 02:58 | If you select these and just hold down
the Shift key we can go ahead and say Open
| | 03:03 | and Upload all of them
at once, which is kind of nice.
| | 03:07 | And now what I can do is choose the
small version of the farmer picture,
| | 03:11 | which is this one here, I know that because
I can roll my mouse over it and the tool tip
| | 03:15 | tells me this is the -sm
or the small version.
| | 03:17 | I'm going to go ahead and
pick that and say Insert.
| | 03:21 | And then it's going to ask me
how I want the image floated.
| | 03:25 | This is set Globally in the article
option, so you can adjust this on a
| | 03:28 | picture by picture basis.
| | 03:30 | But if you do it on a picture by picture
basis, you then have to go through and
| | 03:35 | edit those if the boss comes back to
you and says, oh by the way, all those
| | 03:39 | pictures that are on the left,
now I'd like them all on the right.
| | 03:43 | So I'll show you how to change
that global setting in a moment.
| | 03:46 | We'll put it in some Alt text, Some
solar panels in the farmer's field,
| | 03:54 | and likewise down here I'm going to do
the same for the full article image.
| | 03:58 | Even though we already have the full
article image appearing inside of the
| | 04:01 | article, I'm going to put it down here now.
| | 04:04 | So here I'm going to go to the full-size
version of this picture, and I'm going
| | 04:10 | to click on this to insert it.
| | 04:12 | I'm going to actually take my same Alt
tag from here and paste it down here.
| | 04:16 | And then inside of my article the picture
that I have here now, I'm not going to
| | 04:21 | need this anymore because what will happen
is the big picture will be fed in to
| | 04:26 | this article through the interface
down here at the bottom of the page.
| | 04:29 | So I'll go ahead and now just delete
that image that I have here, and I'm going
| | 04:34 | to go ahead and say Save & Close.
| | 04:36 | And now when I go to the front end of
the Web site and I hit Refresh, I have my
| | 04:42 | small image here inside of my article
followed by my text and if I click on the
| | 04:49 | Read More link I go to the article
where I have the full-size image here.
| | 04:55 | What's happening over here in the corner
is that this image is quite large,
| | 04:58 | the Login form is sitting on top of the
image and that's why you see the corner of
| | 05:03 | the image cut out here.
| | 05:04 | I've told you for a while I'm going to
be getting rid of this Login form which
| | 05:08 | will solve that problem.
| | 05:09 | The other thing that would solve this problem
is to scale this image and make it a bit smaller.
| | 05:14 | Right now it's 900 pixels wide, you could certainly
make it a smaller image for your Web site.
| | 05:18 | And then underneath of that is
all of the text associated with this
| | 05:21 | particular article.
So that's a nice presentation.
| | 05:25 | It's very, very consistent and if
we've sized our images consistently
| | 05:31 | in Photoshop before we upload them into Joomla!
| | 05:33 | then we'll have a nice professional
effect for the solar blog.
| | 05:37 | So what I'm going to do now is I'm going
to edit the Announcing K-Eco Mini Panels,
| | 05:43 | the Embry house, I'm going to go ahead
and edit those exactly the same way.
| | 05:48 | I'm going to call out the small and the
large versions of the image and delete
| | 05:52 | the image that's already present in the article.
| | 05:54 | And that way my Solar blog will be
configured with these images,
| | 05:59 | and I'm going to go ahead and do that now.
I'll catch you on the other side.
| | 06:02 | Okay, so I just finished configuring
this last article, and now I'm going to hit
| | 06:09 | Save & Close and if I refresh the page
here on my Solar Blog you'll see that
| | 06:14 | I have some small pictures.
| | 06:16 | They appear in the same place here,
that's looking great, and then if I click on
| | 06:20 | the full version of the article, in all
cases I've got the larger size picture
| | 06:25 | here with the text that's
located underneath. All right!
| | 06:28 | So I promised you that I'd show you
how you can consistently float these pictures
| | 06:31 | so that they appear the same way in all
of these articles globally in one fell swoop.
| | 06:37 | So the way that we do that is
here inside the back end of Joomla!
| | 06:41 | if we go to Options and then from Options
we're going to go to the Editing Layout.
| | 06:48 | This is controlling the layout of
the article editing page, and the
| | 06:52 | Administrator Images and Links, these
are the links that are occurring at
| | 06:55 | the bottom of those articles.
| | 06:57 | And so we've got that turned on right
now so that we have that available to us.
| | 07:02 | If you're not using this feature in Joomla!
| | 07:04 | all of those images and links underneath
the article you can turn this off,
| | 07:08 | and the way you would do that is just
hit this No button here and save these
| | 07:12 | settings, and all of those extra fields
at the bottom of that page for editing
| | 07:16 | an article would all go away.
| | 07:18 | Scrolling on down here a little bit
further you can configure the way your links
| | 07:23 | are going to open in a new window,
or open in the same window.
| | 07:26 | I didn't use the links so I'm just
going to leave those set the way they are.
| | 07:30 | And then the last part here is the Intro
Image Float and the Full Text Image Float.
| | 07:34 | Right now these are both set to float
to the Left, what I'm going to do is set
| | 07:39 | them to float to the right.
| | 07:40 | And for the Full Text I'm actually
going to say no float at all,
| | 07:44 | because those are so big I just want it to
appear at the top of the article.
| | 07:48 | So I'm going to go ahead and say
Save & Close, and now when I go back
| | 07:53 | to my Solar blog page these images
look like they haven't moved.
| | 07:55 | That is possibly either a bug in Joomla!
| | 07:57 | or it could be that this template is not
configured to float these images correctly.
| | 08:01 | But then if I go into the full-size
article, there is my image, and now that
| | 08:07 | I'm not floating these, look at that, they
don't appear in this right hand column
| | 08:11 | anymore and they are scaling much
better to the size of the Web page
| | 08:15 | so that definitely helps up.
| | 08:16 | We can check out some of these other
pages here in the Solar blog as well.
| | 08:20 | So if we look at the Mini Panels here
that is also looking really, really good.
| | 08:24 | So this functionality in Joomla!
| | 08:26 | is not a full CCK, a full Content
Construction Kit, it's a very, very minor
| | 08:32 | addition to Joomla!'s article editing
capabilities that would allow you to put
| | 08:37 | in a small version of the picture
and a large version of the picture
| | 08:40 | in a consistent format inside
of a blog layout like this.
| | Collapse this transcript |
| Styling images with bootstrap classes| 00:00 | Our Products section of the Web site
has a series of somewhat static pages.
| | 00:05 | There is a bunch of text on these pages
and there's an image associated
| | 00:09 | with that particular block of text.
| | 00:11 | We can go and we can click through all
of these and you'll see there are just
| | 00:15 | lots and lots of images, there are
little bits of text here and there.
| | 00:19 | What I'd like to do is I'd like to
improve the look of these pages
| | 00:23 | by adding a little bit of style, a
little pizzazz to the images themselves.
| | 00:27 | This is new in Joomla!.
Because this version of Joomla!
| | 00:32 | is built with Bootstrap and because
this template is integrating Bootstrap
| | 00:36 | as part of its design, we can leverage
any of Bootstrap's classes that are
| | 00:42 | contained, and provided that we apply
that class in the way the Bootstrap
| | 00:46 | is expecting, we can apply
those styles to our Web pages.
| | 00:49 | One of the most striking ways that we can
do this is where our images are concerned.
| | 00:54 | So right now these images are just square
images that have come right down and out
| | 00:59 | of Photoshop and they are
appearing here in our Web page.
| | 01:02 | But Bootstrap has three
different ways you can style images.
| | 01:06 | And that is in the Bootstrap documentation,
so if you go to getbootstrap.com,
| | 01:12 | you'll wind up on this home page.
| | 01:14 | And if you go to the base CSS navigation
item and then click on images down here,
| | 01:20 | you'll wind up seeing a little
demonstration of the way that Bootstrap
| | 01:25 | can style these images for you.
| | 01:27 | So by applying a class of img-rounded
you will get rounded corners on the edges
| | 01:34 | of your image, and that class
you have to apply to the image tag.
| | 01:38 | If you have img-circle applied to the
image tag, you'll actually get your image
| | 01:43 | displayed in a circle.
| | 01:45 | And finally if you apply a class of img-
polaroid, you'll get your image with a
| | 01:50 | nice little border around it and this
little space in between is a white fill.
| | 01:55 | Not necessarily obvious here on a
white background, but I have looked at this
| | 01:59 | effect on pages where the background was
not white and that will be a white wrap
| | 02:03 | around that picture followed by
the little gray border after that.
| | 02:07 | So I want to show you how we can apply these
three classes to our images inside of Joomla!.
| | 02:13 | So here in the back end of Joomla!
| | 02:16 | I'm going to go to Content>Article Manager
and I am just going to work with
| | 02:22 | my Products, Articles right now so I am
going to Filter by category and go to
| | 02:26 | Products and here are my Products
pages for this particular Web site.
| | 02:30 | So let's say I start here with the
Energy Bulbs, if I click on that, I have
| | 02:35 | this picture of this woman here who is
looking at light bulbs at the store.
| | 02:39 | What I really need to do is click on the
image itself to select it and then here
| | 02:44 | using the little tree icon here in
TinyMCE if I click on that, this will allow
| | 02:50 | me to apply the class that I want to apply.
| | 02:52 | I've not shown you how to use this for
inserting images because it doesn't have
| | 02:56 | an interface for uploading images into
the Media Manager and you have to know
| | 03:00 | the URL for the image in order to
include it in your Webpage,
| | 03:04 | which is definitely less convenient than the
Image button at the bottom of the screen
| | 03:07 | which is what we've been using
to work with images to this point.
| | 03:11 | However, this tree icon has the interface
for putting a class inside of an image tag
| | 03:16 | and that is what
we're going to do right now.
| | 03:19 | So if I switch over to the Appearance
tab here for our pictures, here is where
| | 03:24 | I can apply my Class, this is the CSS
Class and right now it's set to Not Set.
| | 03:30 | So what I want to do is pick value from right
here which will allow me to type something in.
| | 03:36 | So if I type in img-rounded no dot in
front of it and say Update, absolutely
| | 03:42 | nothing is going to happen in TinyMCE.
| | 03:45 | The reason why is TinyMCE is currently
not hooked up to any of our Bootstrap
| | 03:50 | styling, so it's not going to
show right here inside of TinyMCE.
| | 03:55 | One of the advanced things you could
do with TinyMCE is have it pull
| | 03:59 | a stylesheet, may be that stylesheet
contains these three image classes in it,
| | 04:04 | so that you could just pick
them from the dropdown.
| | 04:06 | That would be a great way to
handle this for your client.
| | 04:09 | But you're not going to see the styling
here inside of TinyMCE at the moment
| | 04:14 | because TinyMCE doesn't know what img-rounded
happens to do with this particular image.
| | 04:20 | But once we hit Save and we go to the
front end of the Web site and we go to the
| | 04:26 | Energy Bulbs page, you'll see that we
now have an image with rounded corners.
| | 04:30 | So that's quite nice.
| | 04:32 | If we go to the Low-Flow Showerhead,
I think this one might look good with a
| | 04:36 | circle around it so let's hop
into the back end of Joomla!
| | 04:40 | now I am going to hit Save & Close
and I am going to go to the Low-Flow
| | 04:44 | Showerhead article, once again click
on the Low-Flow Showerhead and click on
| | 04:48 | the tree icon here in TinyMCE,
switch to the Appearance tab, in the Class
| | 04:53 | dropdown choose value and this time
for the value I am going to type in
| | 04:58 | img-circle and say Update.
| | 05:00 | Again I won't see it here in TinyMCE,
but if I say Save & Close and I refresh
| | 05:06 | my Low-Flow Showerhead page, I now have
my image displayed in the circle style.
| | 05:12 | Now this particular image was a little
bit wide in terms of a rectangle,
| | 05:16 | so it's applied the rounded corners to the
edges and it looks kind of a like a oval.
| | 05:20 | But I have another page where this
particular circle works really well,
| | 05:23 | it's over on the About page, this
particular image is sized more like a square
| | 05:29 | and when you apply the circle
style to it, it looks really good.
| | 05:33 | So if I do that now and I go to my
About Articles and I click on the About
| | 05:40 | article and I click on this image and
I click on the tree, click on Appearance,
| | 05:46 | click on value here in the Class dropdown
and type in img-circle and say Update
| | 05:51 | and Save & Close, here on the About page
you'll get a sense of a real circle for
| | 05:56 | this particular image.
| | 05:57 | So let me show you what
the Polaroid effect does now.
| | 06:01 | So let's go to the Products page and
you see here we have this picture of this
| | 06:06 | girl holding a light bulb, I am going
to go back to my back-end of Joomla!,
| | 06:10 | go back to my Products and click on
the actual Products page itself.
| | 06:17 | I'm going to select this image right
here inside of my editor, click on the
| | 06:22 | tree icon and under Appearance, under
Class, under value I'm going to type in
| | 06:28 | img-polaroid and say Update, and Save & Close.
| | 06:34 | And when I refresh the Products page
here you'll see that we have this lovely
| | 06:38 | Polaroid effect, so you have the
little bit of white space here with the nice
| | 06:43 | little border around it.
| | 06:44 | Now I wouldn't necessarily advise you
to use all three effects all over every
| | 06:48 | page of your Web site.
| | 06:50 | I would recommend that you would pick
one of these effects maybe, and use it
| | 06:53 | consistently or maybe two of these effects.
| | 06:56 | So like the circle effect is really
quite eye-popping, maybe you want to use
| | 07:00 | that sparingly on a handful of pages
and then every other image on your site
| | 07:04 | maybe you treat with the Polaroid or
the rounded corner effect, that would be a
| | 07:08 | nice treatment for your Web site, rather
than just sort of sprinkling these three
| | 07:11 | effects anywhere they happen to appear.
| | 07:13 | But I did want to show you how all of them work.
| | 07:15 | So if you remember from Bootstrap in
the documentation, img-rounded, img-circle
| | 07:19 | and img-polaroid, you can add those to
your image tags inside of your HTML and
| | 07:27 | get some great effects for your Web site.
| | Collapse this transcript |
|
|
7. Setting Display OptionsSetting global configuration options for articles| 00:00 | So I've been promising you for several
chapters now that we're going to clean up
| | 00:04 | the way these articles look.
| | 00:05 | Right now, by default, we have an
article title, it links somewhere,
| | 00:10 | actually it links to itself.
| | 00:11 | Even if you're not using the Read More
functionality, we have a line for an author here;
| | 00:16 | we have some details listed
underneath about the category and the
| | 00:20 | publication date which is in European
format, and the hits that we've gotten
| | 00:24 | to this particular article.
| | 00:25 | And I know many of you just want to
get rid of all of this stuff, so do I.
| | 00:30 | So, that's what I am going to cover in
this next video is how we can clean up
| | 00:35 | the way these articles appear.
| | 00:36 | And there are many different
ways that we can do that.
| | 00:39 | We can do this on an article by article
basis, we can do it for an entire menu,
| | 00:43 | or we can do it globally.
| | 00:45 | So I am going to start with globally.
| | 00:47 | Because it's probably true that you
want to get rid of as much of the stuff
| | 00:52 | globally as possible, and then go back
to Menus or Articles to make exceptions
| | 00:56 | to any of the global rules that you will set up.
| | 00:59 | So I am going to start by
going to my back end of Joomla!
| | 01:02 | and I am going to go to Content>Article Manager,
and I am going to click on this
| | 01:07 | Options button up here.
| | 01:08 | This is a button that's only available
to super administrators and it allows
| | 01:12 | me to turn on and off the various aspects
of the Web page that I want to see or not see.
| | 01:19 | So first of all, under Articles,
I can choose to show the title or not.
| | 01:24 | If I hide the article title, then
I just have text on the page without
| | 01:28 | the article title present.
| | 01:29 | That's probably a bad idea for the
design that I'm putting together,
| | 01:33 | so I am going to leave that to Show.
| | 01:34 | However, I probably don't want those
titles linked because they link to themselves.
| | 01:39 | This work is great on a
page like our Solar blog.
| | 01:42 | Because I can click on the title of the
article, and go to the full text of that
| | 01:47 | article, the same as I
can click on the Read More.
| | 01:49 | But, it really doesn't work on a
page like the K-Eco Energy Bulbs.
| | 01:53 | When I click on that, I am
just reloading my Web page.
| | 01:56 | So it's a little bit frustrating.
| | 01:58 | So what I am going to do is turn off
the Link Titles Globally, and maybe I will
| | 02:03 | override those later in the Solar blog.
| | 02:05 | I'm going to show my intro text.
| | 02:07 | That's the little bit of text that
starts off one of our blog posts.
| | 02:11 | So, if I go to my Solar blog, this
tiny little bit of text down here in the
| | 02:15 | bottom is my intro text, I do
want to show that when it's present.
| | 02:19 | The position of the article info can
be Above, or Below or Split, and the
| | 02:24 | Article Info is this information
that's here at the top of the article.
| | 02:29 | I can choose to show the category or not.
| | 02:31 | I am going to hide it.
| | 02:32 | I don't want to link it either.
| | 02:34 | And scrolling on down a little further,
I don't want to show my author, I don't
| | 02:38 | want to show a publication date.
| | 02:40 | The navigation refers to, choose one
of these articles here, if I go into
| | 02:46 | the Trend in alternative energy usage,
I have two buttons at the bottom of
| | 02:51 | every article; it's Previous and Next.
| | 02:53 | And what these do is navigate me
through the category of information.
| | 02:58 | So I can click on these buttons and
then read all of the content within a
| | 03:03 | particular category and when I get to the
bottom there's only one Previous Button.
| | 03:07 | So then, I'll go back through my
previous links to go back up to the
| | 03:12 | first article in that series.
| | 03:14 | I find those buttons kind of confusing
because you don't know what's next.
| | 03:18 | When somebody explains to you what
those buttons do, then they're great.
| | 03:21 | But, it's likely that most people are
going to be looking at your Web site
| | 03:25 | do not know what those buttons do.
| | 03:26 | So I just usually choose to turn them off.
| | 03:28 | That's called navigation for some reason.
| | 03:31 | I am going to go ahead and
turn that off and hide it.
| | 03:35 | I can choose to show my Read More links or not.
| | 03:38 | I'm going to Show them.
| | 03:39 | One of the things that you might have
been wondering about is showing the tile
| | 03:43 | with the Read More link.
| | 03:44 | So once again, here on my Solar blog page, hit
Back a few times here, go back my Solar blog.
| | 03:52 | What I have here is these Read More
links, but it doesn't just say reports.
| | 03:58 | It says, Read More:
| | 04:00 | Farmers installing solar power in
record numbers and some of you are probably
| | 04:04 | wondering why that has all of that text there?
| | 04:08 | Well, search engines tend to weight text
that occurs in a link more heavily,
| | 04:13 | and these Read More items are just links.
| | 04:16 | And so by putting these extra words
including the title in it, we are increasing
| | 04:22 | the weight of those particular
keywords that were used in the title.
| | 04:25 | Furthermore, if you have a disability
of some kind, and you're looking at a blog
| | 04:29 | whether you have 100 posts on the page,
you might have 100 links that all say Read More.
| | 04:34 | You don't know what each individual
Read More link will take you to.
| | 04:37 | So, by turning off that additional text,
you are decreasing the accessibility of
| | 04:42 | your Web site, and you may be
impacting your search engine optimization.
| | 04:46 | Having said all of that, some people really
just want the text that says Read More,
| | 04:50 | and this is where
you would configure that.
| | 04:52 | So, you might want to show the Read More
link, but you don't want to necessarily
| | 04:57 | show the title with it.
| | 04:58 | The Read More Limit would put a
limit on the number of characters in the
| | 05:01 | title for the article.
| | 05:02 | So if you have a very long title, in
this case, it only shows the first 100
| | 05:06 | characters of that title before it cuts it off.
| | 05:09 | The last part of this is showing the icons,
the print icon, the e-mail icon and hits.
| | 05:16 | So right now on our Web page, we
have hits that are located here.
| | 05:21 | And then we have this funny looking gear
icon that occurs over here on the side.
| | 05:25 | And if you click on the gear icon,
what you find located here is a
| | 05:29 | printer-friendly version of this
page, and Email this to a friend.
| | 05:33 | So, if I was to go to the print
version of this page, it comes up in a pop-up
| | 05:38 | window with everything on the screen,
and I can click the Print button to print
| | 05:42 | off just this article.
| | 05:43 | The Email to a friend will come up in a
window, and I can fill in my e-mail information.
| | 05:50 | But, there's no way I can put in a block
of text or say why I am sending this link.
| | 05:55 | I would just fill this out, and it
would e-mail the link for this particular
| | 05:58 | article to somebody.
| | 05:59 | And my sense for these at this point in
time is that we don't see a whole lot of
| | 06:04 | e-mail to a friend anymore on a lot of
these Web sites because so many people are
| | 06:08 | sharing things through social media.
| | 06:09 | And there doesn't seem to be as much
printing going on anymore as there used to
| | 06:13 | be either, and of course you can always
just print these pages off through your
| | 06:17 | Web browser anyway, or people tend to
copy them and paste them into Microsoft
| | 06:21 | Word if they want to control the way
that the page looks when they print it.
| | 06:25 | So I tend to not want to
have these items showing at all.
| | 06:28 | So you might think that simply by
hiding the icons that would be sufficient.
| | 06:32 | So, I am just going to save so far.
So I am just going to hit my Save button here.
| | 06:38 | All the changes that I've
made so far are now saved.
| | 06:41 | And if I refresh my Solar blog here, you
see that my articles are no longer linked.
| | 06:49 | But, I still have the Hits showing
here in the details, and I still have this
| | 06:53 | dropdown and the icon that's associated
with it, with links underneath that
| | 06:57 | say Print and Email.
| | 06:58 | Why are they still here?
| | 06:59 | Well, this Show Icons item only hid the
icons next to the words Print and Email.
| | 07:07 | They did not get rid of the dropdown
or the big icon or anything else.
| | 07:12 | So if you want the Print and the Email
options to go away entirely, what you
| | 07:16 | have to do is Hide the Print icon even
though you already hid the icon and you
| | 07:20 | have to hide the Email icon even
though you already hid that as well.
| | 07:23 | This will actually by setting all three
of these to hide, will get rid of those
| | 07:27 | items on the page altogether.
| | 07:29 | And of course, we'll want
to get rid of hits as well.
| | 07:32 | So if we go ahead and say Save, and I
refresh my page, those details with the
| | 07:39 | hits are now gone, and the dropdown
that showed up over here that had the
| | 07:44 | Print and Email items on it is also gone.
| | 07:47 | So, the page looks a little bit better.
| | 07:50 | It works particularly well here on the
Products page where I just want a title
| | 07:53 | at the top followed by my text.
| | 07:55 | It works great on the Eco Energy Bulbs page.
| | 07:59 | But, here under the Solar blog, I may
actually want those Linked Titles back
| | 08:04 | again so that I can click on those.
| | 08:05 | Maybe I don't want to show the Read More
buttons after all, maybe I just like to
| | 08:09 | have clickable titles where people can
click on them to go to the full version,
| | 08:13 | It would clean up the look a little bit.
| | 08:15 | Some of you might be wondering about
these Read More buttons and their styling,
| | 08:18 | the fact that they look big, horsey,
buttony kind of Read More kind of things,
| | 08:22 | that's all under control
of the CSS. What Joomla! puts out is
| | 08:25 | just a link text for Read More,
so we could change the styling
| | 08:30 | if we wanted to make those links
a little bit more subtle.
| | 08:33 | But, that's kind of beyond
the scope of this course.
| | 08:35 | So, as we generally look around the site,
things are definitely improved by the
| | 08:40 | global changes that we've made.
| | 08:41 | But, there might be a few places where
we would like to override those settings,
| | 08:46 | and I'll show you how to
do that in the next video.
| | Collapse this transcript |
| Setting menu display options| 00:00 | In my last video I cleaned up these
articles, so that we don't have linked
| | 00:05 | titles anymore, we got rid of who the
author was, we got rid of the publication
| | 00:09 | dates, a bunch of stuff went away.
| | 00:12 | And the pages are looking a lot better.
But now that I have done all of that.
| | 00:16 | I am having second thoughts about
this Solar blog page, because the Solar
| | 00:20 | blog page, what I'd really like to
have happen here is, I think I'd like to
| | 00:24 | keep these linked titles, so that I
can click on them to go to the full
| | 00:29 | version of the article.
| | 00:30 | And then there sees Read More links
underneath, I don't really like the styling
| | 00:34 | of these buttons on this particular design.
| | 00:35 | And so I think I'd like to get rid
of the Read More button all together.
| | 00:39 | And just have the article end there,
and if people wanted to read the full
| | 00:43 | version of the article they could
click on the title here and that would take
| | 00:46 | them to the full version of the page.
| | 00:48 | So what I need to do is I need
to override my Global Settings.
| | 00:53 | So in my previous video I set
Global Settings for all of my articles.
| | 00:56 | Now what I need to do is override
those settings, just for the Solar blog.
| | 01:00 | So the articles that are going to be
impacted by this change are all located
| | 01:04 | under a single menu item.
Fortunately Joomla! offers a way
| | 01:07 | that I can change all of these
articles under a single menu item,
| | 01:14 | and I can turn on those link titles again
and I can get rid of those Read More buttons,
| | 01:17 | so to do that I am going to go
into the backend of Joomla! and
| | 01:22 | I am going to go back to my Menu Manager.
| | 01:24 | So I am going to go to Menus>Main Menu
and I am going to find my Solar blog item.
| | 01:31 | Go ahead and click on that, and then
I am going to go to the Advanced Options.
| | 01:35 | And under the Advanced Options, if you go
to the Article Options, located under here.
| | 01:42 | This will override these global settings,
so all this Use Global stuff,
| | 01:47 | that's where that was set;
| | 01:48 | it was set in the Article Options,
that's a global setting.
| | 01:52 | If we set things up here with a
different value, it will override whatever
| | 01:55 | is set in the Global Article Options.
| | 01:57 | So what I'd like to do is have, Yes,
let's have Linked Titles and what I'd like
| | 02:04 | to do is that Read More button, I'd
like that to go away, so Show "Read More."
| | 02:09 | I'd like to say Hide.
| | 02:11 | And Show Title with Read More, we'll hide
that as well, so now if I go ahead and say Save.
| | 02:20 | And I refresh my Solar page.
| | 02:23 | Now I have my titles here that are linked.
| | 02:26 | So I can click on these and go to the
full text of my blog post, but I don't
| | 02:32 | have those Read More buttons anymore, and
I just have them linked here on this page.
| | 02:37 | If I go someplace like the News & Info
page, I still have Read More buttons here
| | 02:42 | and I do not have those linked titles.
| | 02:45 | So this might be another page that I
wish to change or alternatively I could
| | 02:50 | leave it in this kind of layout.
| | 02:51 | It's sort of up to you as to what you'd
like to do on a blog by blog basis, but
| | 02:57 | that is how we can set on override on
the menu level to override our
| | 03:03 | Global Article Options that we configured.
| | Collapse this transcript |
| Comparing page headings, article titles, and browser page titles| 00:00 | There are some more options you can
configure inside of each individual Menu
| | 00:04 | item that can be somewhat confusing.
| | 00:07 | There is a Page Heading, there is an Article
Title, and there's a Browser Page title,
| | 00:11 | and it gets very confusing
what the differences are between these.
| | 00:15 | So I wanted to be sure to take a minute
to explain the differences between Page
| | 00:19 | Headings, Article Titles,
and Browser Page titles.
| | 00:23 | The best way to do this is just to create
an Article and I am going to go ahead
| | 00:28 | and just create a temporary
article and show you how this works.
| | 00:31 | So, under Content>Article Manager,
I am going to go create a New article,
| | 00:37 | and I am going to call this Article Title,
that's going to go in the Title space.
| | 00:42 | So, where you see Article Title,
that will be the Title of the article.
| | 00:46 | I am just going to put this in the
Uncategorized Category, because as soon as
| | 00:50 | I make this thing, I am going to
delete it by the end of the video.
| | 00:54 | Now I'll put in some text, This is the article
text, and I'll go ahead and say Save & Close.
| | 01:01 | Now that I have an article,
I need to link that to the menu.
| | 01:05 | So under Menus>Main Menu, I am going to
add a New Menu item and I'll just
| | 01:11 | link to a single article.
| | 01:12 | So, under Articles, I'll pick Single
Article, and I'm going to need to
| | 01:17 | Select my Article from the list, this is
Article title, is actually the name of the
| | 01:22 | Article that I am going to put here.
| | 01:24 | For Menu Title I am going to call this
Menu Title, and then all the rest of the
| | 01:30 | stuff here under the Details
tab I am going to leave alone.
| | 01:33 | Under Advanced Options, I'm going to
go to my Page Display Options, and here
| | 01:39 | where it says Browser Page Title,
I'm going to put in Browser Page, Title,
| | 01:45 | I will show the Page Heading, and I'll
put that in as well, Page Headings, and
| | 01:52 | I am going to go ahead and say Save & Close.
| | 01:55 | This creates a New menu item on my
Web site and you can see it's listed
| | 02:00 | right here under Menu Title.
| | 02:02 | So, when I go and Refresh my Home page,
you see that I have a New menu item here
| | 02:08 | called Menu Title, and that was
what we typed in the Menu Title blank.
| | 02:12 | When I click on that, I go to
a page that looks like this.
| | 02:16 | So, Page Heading is some additional
text that displays above the Article Title,
| | 02:22 | and it's actually slightly larger
in this particular template.
| | 02:25 | Although it doesn't have to be,
you can style it however you like.
| | 02:29 | The Article Title comes from the
Article itself along with the Article Text
| | 02:33 | Notice up here at the top of the page,
the Browser Page Title is up here,
| | 02:38 | that's the HTML Page Title, the one that
v between the title tags, and the head
| | 02:43 | of your document in your HTML.
| | 02:45 | So, this page is very helpful for
understanding what all of these terms
| | 02:51 | mean inside of Joomla!.
| | 02:52 | When we talk about a Browser Page Title,
that's the thing that appears up here
| | 02:56 | at the top in this tab, the Page Heading
appears above the Article Title,
| | 03:00 | if you happen to be using it;
| | 03:02 | in some cases you're not using it at all.
| | 03:04 | You have your Article Title followed
by some text and that is how your Page
| | 03:09 | Heading, your Article Title, and your
Browser Page Title, as well as your Menu Title,
| | 03:13 | happen to all fit together on a Webpage.
| | 03:16 | What I am going to do now is I am going
to delete that particular Menu item,
| | 03:20 | and I am going to delete that Article,
obviously I don't want this page on
| | 03:24 | the Web site, but I did want to you
demonstrate to you where these particular
| | 03:27 | items fit in a page's layout.
| | Collapse this transcript |
| Turning off the homepage heading| 00:00 | Is anybody else really bothered by this
big honking Home here on the home page?
| | 00:05 | If you have surfed the Internet more than
five minutes you know this is the home page.
| | 00:10 | Do you really need a big honking word
here that says that this is the home page?
| | 00:14 | I would love to get rid of that thing
and fortunately that's completely possible.
| | 00:19 | If you remember from the last video
you might have noticed that our Page
| | 00:23 | Headings come above article titles
and that there are styled to be slightly
| | 00:28 | larger, at least in this particular template. Wow!
Any guesses where that home is coming from?
| | 00:34 | It's slightly larger and it's
positioned above our article title. Yup!
| | 00:38 | It's a Page Heading and it's
turned on for the home page by default.
| | 00:44 | So let's go take a look at the Menu Item and
get rid of that big home thing on the home page.
| | 00:49 | So inside of the back end of Joomla!
I'm going to go to Menus>Main Menu.
| | 00:53 | I am going to click on the Home link.
| | 00:58 | I am going to click on Advanced Options
and I'm going to go to the Page Display
| | 01:05 | Options tab and where it says Show Page
Heading it's currently set to Yes,
| | 01:11 | but notice that nothing is filled
in here for the Page Heading.
| | 01:15 | In the tooltip here this will explain
to you that if you don't type in any text
| | 01:19 | for the Page Heading what it will do is
take the Menu Title and display that
| | 01:24 | in the Page Heading box if you have Page
Heading turned on but no text specified.
| | 01:29 | So, that's exactly what's happened.
| | 01:31 | The word Home is the Menu Title.
| | 01:33 | It's now displayed on the page because
we haven't overwritten it with another
| | 01:37 | text in our Page Heading.
| | 01:39 | To get rid of that big word Home, all
we have to do is turn our Page Heading to No,
| | 01:43 | and say Save & Close.
| | 01:45 | And when we go back to the Home page,
we can refresh this and finally that big
| | 01:51 | honking Home thing is gone.
| | 01:53 | The other thing we might want to do
while we're here is we might want to change
| | 01:57 | our Browser page title, because right
now this says KinetECO-Home and while it's
| | 02:03 | very descriptive of what this is and
it's great for bookmarking, it's is not
| | 02:07 | necessarily is good for search engine
optimization, because you might want to
| | 02:11 | have some keywords embedded in
your browser HTML page title.
| | 02:15 | I am going to take this phrase, Harnessing
wind and sun for a cleaner energized planet.
| | 02:19 | I am going to copy that and I am going
to put that in as our Browser Page title.
| | 02:24 | So back once again in the back end of Joomla!
| | 02:27 | in the Home Menu item, under Advanced
options, and under Page Display options
| | 02:34 | I'm going to paste in, Ctrl+V or Cmd+V,
that phrase as our browser page
| | 02:39 | title and I can say Save.
| | 02:44 | When I refresh this page that will give me
that phrase up there at the top of the page.
| | 02:50 | The other approach I could have taken
that arguably would be better for search
| | 02:54 | engine optimization rather than having that
phrase which already appears on the page,
| | 02:57 | I could say something like
Solar panels, windmills, consumer
| | 03:04 | environmentally-friendly products.
| | 03:13 | And that would get a few more
keywords in my browser page title as well.
| | 03:17 | So that definitely improves our homepage.
| | 03:19 | We don't have that big honking Home
staring us down in the face anymore
| | 03:23 | and now we've got a much better
HTML browser or page title here as well.
| | Collapse this transcript |
| Configuring the back-end and front-end article administrator screens and options| 00:00 | I was making a point that Joomla! had many,
| | 00:02 | many layers to it and my student
said to me, yeah, it's like an onion;
| | 00:08 | many, many layers, and it also can make you cry.
| | 00:12 | One of the ways Joomla! can make you cry
| | 00:14 | is it has so many configuration screens,
and sometimes you're not even
| | 00:20 | using those configuration screens.
| | 00:22 | So they just serve to confuse clients
or they offer you options that you're not
| | 00:27 | going to use in your Web site and
you just like to get rid of things.
| | 00:31 | Fortunately, we even have configuration
screens for getting rid of configuration screens,
| | 00:36 | and I wanted to show you those
here in this next video.
| | 00:39 | So if we go on up to Content and we go
our Article Manager again, and I am just
| | 00:45 | going to peek inside of this first
article here about the farmers,
| | 00:48 | just to take a quick peek at it.
| | 00:50 | You'll notice that we have all of
these tabs that go across the top.
| | 00:53 | So far I've really just focused on this
first screen about the article details
| | 00:57 | and the title, the category, and the
text that we are putting in, in another
| | 01:01 | video I covered the images and links
down here on the bottom, but there's also
| | 01:06 | stuff over here on the side in terms of
is it published or not published,
| | 01:10 | what languages it is in, we can switch to a
tab about Publishing Options where we can
| | 01:15 | set a Start and Finish Publishing date.
| | 01:17 | If you have a something that's sensitive,
for time, you want it on the site
| | 01:21 | for a certain period of time
and it come down automatically,
| | 01:25 | you can schedule that kind of thing.
| | 01:26 | You can have these Article Options.
| | 01:28 | This is yet another way that you can
turn on and off page titles and categories
| | 01:32 | and authors and so forth.
| | 01:33 | This time on an article by article
basis rather than on a menu basis
| | 01:37 | or a global basis, and we have a screen
here for configuring Metadata
| | 01:43 | and our Article Permissions.
| | 01:44 | So this is a lot of stuff here, it's
nice now that it's behind these tabs.
| | 01:48 | So it's a little bit less obvious to
clients, but it's quite possible that
| | 01:53 | you're never going to change these
Publishing Options, and you're never
| | 01:56 | ever going to access these Article
Options and it's also possible that you
| | 02:00 | might never ever want to access the images
and links interface down here in the bottom.
| | 02:05 | So Joomla! has provided a way
that we can turn these things on and off.
| | 02:10 | So if I hit my Close button here and
I go into my Options item here on the top
| | 02:16 | and I go to Editing Layout, I have
four options here, Show Publishing
| | 02:22 | Options, Show Article Options, and
then Front end Images and Links, and
| | 02:26 | Administrator Images and Links.
| | 02:28 | The Publishing Options refers to that
tab that I just showed you inside of an
| | 02:33 | article where you were editing.
| | 02:35 | The Publishing Options tab lets you determine
the start and finish publication dates,
| | 02:39 | it lets you set the author for
the article, that kind of thing.
| | 02:43 | Do you even need that page at all? It's quite
possible that in your Joomla! site that you don't.
| | 02:48 | You can turn this off
globally by setting this to No.
| | 02:51 | Likewise, the Article Options is that
long, long list of titles and titles that
| | 02:57 | are linked and the show Print icons
and Email icons and the hits and
| | 03:03 | all kinds of things like that.
| | 03:04 | Do you even need that on
an article by article basis?
| | 03:08 | Chances are for this one in particular,
probably not, and it really just
| | 03:12 | gets your clients into trouble.
So you can turn this off globally as well.
| | 03:16 | Then finally these last two refer to the
bottom of the main article editing screen.
| | 03:22 | There is the place where we can set the
small version of the picture versus the
| | 03:26 | big picture and the set of links that
might be associated with a given article.
| | 03:31 | We use these in putting
together our Solar blog entries.
| | 03:35 | You can turn on and off that interface as well.
| | 03:38 | By default that interface is turned
off on the front end of the Web site
| | 03:43 | and what I mean by this is it's possible to edit
articles from the front end of the Web site.
| | 03:47 | I haven't showed you how to do that yet.
| | 03:49 | I will show you how to do that in a
much later video, but you could not give
| | 03:54 | your clients access to editing those
articles on the front end of the Web site
| | 03:57 | or adding those particular features by
hitting this to No, but allow people to
| | 04:02 | have access to that interface by
saying Yes on the back end,
| | 04:05 | which is the administrator side.
| | 04:07 | I am actually going to set all four
of these No just for the moment,
| | 04:11 | so you can see how this works.
| | 04:12 | If I say Save & Close and I go back into the
same Farmers installing solar power article,
| | 04:17 | I still have the tab for
Publishing Options, but when
| | 04:22 | I click it, nothing changes.
| | 04:23 | Notice that my Article Details screen
is still present and what's more the tab
| | 04:29 | that said Article Options is now gone entirely.
| | 04:33 | So we don't even have the tab available
to us anymore for those Article Options.
| | 04:38 | Also, on the bottom of the Article
Details screen down here on the bottom,
| | 04:42 | notice that all of that interface for
adding those small versions of pictures
| | 04:46 | or big versions of pictures or
those links, those are all gone.
| | 04:50 | That's a wonderful thing.
| | 04:53 | We've just simplified the interface
hereby quite a bit and made things
| | 04:57 | a lot easier for clients,
because there is fewer options.
| | 05:00 | There are fewer things to distract them.
Now in true Joomla! fashion,
| | 05:04 | now that we have configured
this to turn these things off globally,
| | 05:09 | for all the articles, we can override these
interfaces on an article by article basis.
| | 05:15 | This tab for Configure Edit Screen will
allow you to now say, oh, but for this article,
| | 05:21 | because this is a Solar blog
article, I do want to show the
| | 05:25 | Administrator Images and Links,
although I'll leave my other things set to No.
| | 05:30 | If I say Save, now when I scroll on
down the page here to the bottom I have
| | 05:38 | that whole interface down here where
I can put in my small images and my big
| | 05:42 | images again and configure those, but
this interface will now only be available
| | 05:46 | in this particular article.
I don't really want to do that.
| | 05:50 | So I am going to go back here to the
Configure Edit Screen and I am going to
| | 05:55 | switch this back to Use Global and I'm
going to go ahead and say Save & Close
| | 05:59 | and I am going to go back to my Article
Options and under my Editing Layout tab
| | 06:03 | I am going to turn on the
Administrator Images and Links.
| | 06:06 | I'm using it in the Solar blog right now.
| | 06:08 | I'm just going to leave that available
to all of the articles on the Web site
| | 06:12 | and what I'd do is educate my client that,
that interface is only for the Solar blog.
| | 06:16 | Don't use it on other parts of
the Web site and leave it at that.
| | 06:19 | So I am going to go ahead and say Save
& Close and now if I take a look at the
| | 06:25 | Farmers installing solar power in record
numbers article, you'll see that
| | 06:30 | I have this interface at the bottom
for adding images and links.
| | 06:33 | I do not have anything on the
Publishing Options tab and I do not have my
| | 06:39 | Article Options tab at all, and that is
true for any article that we happened to
| | 06:43 | look at here in the backend of Joomla!.
| | 06:45 | None of those options that I just went
through affect the way the Web site will
| | 06:49 | appear to the public to somebody who
is not logged in and editing an article.
| | 06:53 | The options I just showed you pertain
only to editing articles and what kind of
| | 06:58 | interfaces are available for doing that.
| | Collapse this transcript |
|
|
8. Using ModulesConfiguring modules| 00:00 | So, far we have setup some content
for this Web site the Content that
| | 00:04 | consistently shows up in the middle of
the page, we've created our first module,
| | 00:09 | a Menu module, which displays a page as well.
| | 00:13 | Modules go well beyond menus though a
module is any bit of functionality that
| | 00:18 | you'd like to display in some area
other than the main part of the Web page.
| | 00:23 | It could be something that displays in
the Header, the Footer, the left or the
| | 00:27 | right columns, across the top,
or even inside an article.
| | 00:31 | There are several modules that come with
| | 00:33 | Joomla! by default and will cover
those in the next few videos.
| | 00:36 | The big question is how do you get a module
to display in certain parts of the Web page?
| | 00:42 | Every template comes with certain module
positions, these are positions coded
| | 00:47 | by the person who created the template,
which will ultimately contain
| | 00:52 | the modules for that page, if there are
any modules assigned to that page.
| | 00:56 | There is an easy trick to peek at where
module positions are located within our template.
| | 01:01 | If you're familiar with Joomla! 1.5
| | 01:02 | You might be familiar with
something called the TP=1 trick
| | 01:08 | for displaying module positions on the
Web page, that will trick happens to be
| | 01:12 | disabled by default in Joomla! 3.0.
| | 01:14 | You'll have to turn it on in
order to use this particular trick.
| | 01:18 | So, let me show you how to turn on this
particular trick, show you what the trick is
| | 01:22 | and now I'll show you where your module
positions are located inside of a template.
| | 01:27 | So, to do this will top
into the back end of Joomla!
| | 01:31 | and we're going to go to Extensions,
Template, Manager and we're going to go
| | 01:37 | to the Options here inside the Template
Manager, and we're going to do this
| | 01:41 | Preview Module Positions, which right
now is disabled, we want to enable it,
| | 01:46 | and say Save and Close.
| | 01:47 | If you notice here these icons that
are next to the names of these templates,
| | 01:51 | some of them have turned into little
eyeballs, the template we are currently
| | 01:55 | using for the front end of
the Web site is called Protostar.
| | 01:58 | I know that, because this is the site
template rather than in ministry or template,
| | 02:02 | and there's a star by indicating that this
is the default template for the Web site.
| | 02:07 | So Protostar is what we
are working with right now.
| | 02:10 | If I click on this eyeball right next
to the Protostar template, this will open
| | 02:15 | up a New tab and inside of this New
tab is this page were I have got this
| | 02:22 | red text indicating where all of
my module positions are located.
| | 02:26 | So I have a module positions sort of
up here in the upper right corner called
| | 02:29 | position zero 0, I have one across the top
called Position 1 that's where we put our menu.
| | 02:34 | I have a banner position here across
the top, I have a position 8, which would
| | 02:39 | give me a left side of the screen where
I could position elements on the left of
| | 02:43 | the screen, or position 7 on the right,
a position 3 is just above my Content,
| | 02:49 | position 2 just below it and I have a
footer position as well, and then finally
| | 02:53 | at the bottom there is a debug position,
that would be a great place if you're a
| | 02:57 | developer, you could dump any kind of
debugging code and so forth you can put
| | 03:02 | down there in that particular position.
| | 03:04 | So, that is all of the module positions
that are available here to us in the
| | 03:10 | template and where they're going to go.
| | 03:12 | That's going to be really helpful to us,
as we start working with modules inside
| | 03:16 | of this Web site and we need to be clear
on where those modules are going to be
| | 03:20 | assigned so that we know where they
appear on the front end of the Web site.
| | Collapse this transcript |
| Creating a search module| 00:00 | One of the first modules that I would
like to add to my Web site is a search
| | 00:04 | module and obviously search module
does exactly what it sounds like.
| | 00:08 | It allows you to have a blue box where
you can type in the words and it will
| | 00:13 | search your Web site for those matching words.
| | 00:15 | And inside of Joomla! we actually have
| | 00:16 | two kinds of search, so I want to
acquaint you with what those are.
| | 00:21 | So we'll go ahead and jump
into the backend of Joomla!
| | 00:23 | and I am going to add a
search module to my Web site.
| | 00:26 | So I am going to go to
Extensions>Module Manager.
| | 00:30 | This is always where we go to create
any kind of modules inside of Joomla!.
| | 00:34 | And I am going to make a new module by
clicking the New button and this will
| | 00:39 | tell me all of the module types
that are already installed for me.
| | 00:43 | As you continue to work with
Joomla! one of Joomla's! big
| | 00:46 | strengths is the ability to have some
externally available extensions that
| | 00:52 | you can go to the Joomla! extensions
| | 00:53 | directory, you can go do a bunch
of research and you can find
| | 00:57 | additional functionality for Joomla!
| | 00:59 | You can install that on your Web site,
so you may have a whole bunch of modules
| | 01:04 | in your Web site that might
not originally come with Joomla!
| | 01:08 | But the modules that we have available
to us right now do come with Joomla!
| | 01:12 | we haven't installed anything additionally.
| | 01:14 | I will show you how to do that in a
later video, and all of these modules
| | 01:18 | that are listed here are the choices that we
have for installing something on the Web site.
| | 01:22 | Now as far as search goes, there
are two options to choose from.
| | 01:26 | There is Search and there is Smart Search.
| | 01:29 | Obviously, Smart Search sounds so
much more interesting and so much better;
| | 01:34 | let me tell you what these are.
| | 01:35 | Searches are regular old search,
something that's been available in Joomla!
| | 01:39 | for a very long time.
| | 01:41 | It's your conventional search box you
type something in, it does a search.
| | 01:45 | The Smart Search works more like
Google search where you start to type and it
| | 01:50 | gives you a bunch of guesses, as to
what it might be that you're typing in.
| | 01:54 | The drawback to Smart Search though, at
this point, is that it's currently working
| | 01:59 | great with Joomla's! core content.
| | 02:01 | But as you add more extensions to your
Web site, the current Smart Search module
| | 02:06 | is not necessarily designed to go in Search
content in any of these third-party modules.
| | 02:12 | It will only search the content
within the core of Joomla!.
| | 02:16 | Now that might be fine if you are building
a very simple Web site and pretty much
| | 02:20 | all of your content is located in Joomla's! core,
| | 02:22 | but if you add something like a CCK,
a Content Construction Kit like K2 or Zoo
| | 02:28 | or if you add something an elaborate
calendar for example, like JCal Pro or
| | 02:35 | if you add a shopping cart like
VirtueMart or Redshop, then you might wind up
| | 02:41 | in a situation where you are going to need
to have some sort of search capability
| | 02:45 | for those additional big areas of
your Web site and Smart Search might not
| | 02:49 | necessarily be able to search those areas.
| | 02:52 | Third party developers have to write an
extension in order to leverage smart search.
| | 02:57 | And many of them are still catching up with that.
| | 02:59 | So I am just going to use regular search
for right now, so I am going to click
| | 03:03 | on that to put in my Search box.
I always need to give my module a title.
| | 03:08 | That title will be Search, but I don't
have to show that title on the screen,
| | 03:12 | and in fact, I will just Hide it,
because it will already say Search in or the
| | 03:16 | box itself, what I put it on my screen.
| | 03:18 | The place I am going to position this,
remember we could go into that Map that
| | 03:23 | we pulled up from the Template manager;
that will show us all of the module positions.
| | 03:28 | They are also available here in this dropdown
and if you scroll on down through the dropdown,
| | 03:32 | to the Protostar module positions;
| | 03:36 | you don't want to use these at the
top for Beez3 that is the other template
| | 03:40 | that comes with Joomla!
| | 03:41 | and it has somewhat different
template positions than Protostar.
| | 03:45 | I can scroll on through this, and
I can choose what I want to use
| | 03:50 | for positioning the Search box.
| | 03:51 | So I actually have a position here
called Search, it's in position-0.
| | 03:55 | If you remember from the last video,
it was sort of in the upper right corner
| | 03:59 | of the page, which is pretty
much where I want my Search box.
| | 04:02 | So I am going to go ahead and select that.
| | 04:05 | These are sort of the basic settings
here within a module and you will go
| | 04:08 | through these every time.
| | 04:09 | You will always need to give this a title,
whether or not you want to show that title
| | 04:14 | and the position for that particular module.
| | 04:16 | The other information here is Optional
and you may or may not wind up using it.
| | 04:20 | Basic Options will give you some
options that you might find useful
| | 04:24 | for configuring this module.
| | 04:25 | For example, I might want to set a width
for my Search box, which by default is
| | 04:30 | this sort of generic width of 20, it's
sort of tied to the number of characters,
| | 04:35 | but not exactly, so just
think of it as the number.
| | 04:38 | If you want it bigger, make a number bigger
than 20, or if you want the box smaller,
| | 04:42 | make it a number smaller than 20.
| | 04:44 | The Box Text is what text will
show up inside of the text box.
| | 04:48 | If you leave it blank, in English
anyway will show up as Search...
| | 04:53 | or you can type in any other text
that you wished to have Show.
| | 04:56 | A Search Button would put a little button
after it that would say, something
| | 04:59 | like Go, or Search or something.
You can turn that on or off.
| | 05:03 | You can position that button to the right
or the left of the box and pretty much
| | 05:08 | in English, which is a left to right language;
| | 05:10 | you are going to put that button
on the right side of the box.
| | 05:14 | For those of you who work in right to
left languages, you might want to put
| | 05:18 | that button on the left side of the box.
| | 05:20 | You can also have your Search
Button been an image if you wish.
| | 05:23 | So these are all things that
you can go ahead and configure.
| | 05:26 | What I am going to do is I'm going to
turn on my Search button, I'll leave it
| | 05:31 | on the right and the text will be Go, because
my text in the Search box will say Search.
| | 05:35 | I don't want to say Search... and
then have my button also say Search;
| | 05:39 | it just seems kind of redundant.
| | 05:40 | There are always a few Advanced
Options that are available here.
| | 05:43 | I'll go through these in another video
and then finally there's a Menu Assignment.
| | 05:47 | So on what pages would you
like your Search box to appear?
| | 05:50 | Well, Search is a fairly
important navigational element.
| | 05:53 | I'd like it to appear in all pages of
my Web site, so I'm going to leave my
| | 05:58 | Menu Assignment exactly as is
and I am going to say Save & Close.
| | 06:02 | Now when I go to the front end of the
Web site and I Refresh, I will have a
| | 06:07 | Search box that will appear up here at the top.
| | 06:09 | If I like that Search box to be smaller,
I could change the size of that Search box,
| | 06:13 | right now it's set to 20, I could
make a smaller number which will narrow up
| | 06:17 | this box a little bit and I
enabled the button to appear here.
| | 06:21 | I could certainly turn that off as well.
| | 06:23 | But that is how you include a
Search box inside of your Web page.
| | Collapse this transcript |
| Creating a custom HTML module| 00:00 | KinetECO has been working for quite a
while on installing windmills and solar
| | 00:06 | panels all over parts of California
and they have collected a number of
| | 00:10 | testimonials that they would like
to include on this Web site and those
| | 00:15 | testimonials should go in the
right column of the Home page.
| | 00:18 | So what I'd like to do is I'd like
to get rid of this Login Form just by
| | 00:23 | unpublishing it, and then I'd like to
make a module that will display all of
| | 00:27 | these great testimonials that KinetECO
has collected over on the right column.
| | 00:33 | And the way I can do that inside of Joomla!
is something called a Custom HTML Module.
| | 00:37 | Think of this as a mini article.
It works exactly the same way when you
| | 00:43 | create a Custom HTML Module, it just gives
you space to type anything you want
| | 00:48 | to type into it and it will display
that in the correct module position.
| | 00:51 | So I am going to go ahead and set
that up now. In the back end of Joomla!
| | 00:56 | if I go to Extensions>Module Manager
and the first thing I am going to do is
| | 01:02 | unpublish this Login Form, so I'm
just going to hit that checkmark,
| | 01:06 | turn that into an X and when I refresh
my Home page, now that column is gone.
| | 01:11 | So, then the next thing I want
to do is add my testimonials.
| | 01:15 | In your Exercise Files you will find a
document that has the testimonials in it,
| | 01:20 | at least the three we want
to feature on the home page.
| | 01:22 | I am going to highlight all of those
and Ctrl+C or Cmd+C to copy those
| | 01:27 | and then I am going to make a new module.
| | 01:29 | So I am going to click my New button
here inside of the module manager
| | 01:33 | and scroll on down to the Custom HTML Module.
| | 01:36 | So I am going to go ahead and click
on that and I am going to give this
| | 01:41 | a Title of Testimonials.
| | 01:43 | And I am going to set that title
to Show, I actually do want the word
| | 01:47 | Testimonials to Show up at the top of this.
| | 01:49 | The position I'm going to want to have
is that right side of the screen,
| | 01:53 | I'm going to scroll on down here and I'm
going to pick Right [position-7] and then
| | 01:59 | I'm going to go on to the Basic Options
tab, this will allow me to add a
| | 02:03 | background image for example, to this
particular Testimonials, I don't really
| | 02:08 | want that, so I am going to continue on here.
There are some Advanced Options; again,
| | 02:11 | I'll go through those in another video.
And then finally this one called Custom output.
| | 02:16 | The Custom output tab is where you're
going to paste those Testimonials, so I am
| | 02:20 | going to click inside this box and
Ctrl+V or Cmd+V to paste them into place.
| | 02:25 | And I've got a little formatting here
that I need to cleanup, so give me
| | 02:29 | just a second to fix that.
| | 02:30 | So there we go, I've got my three
Testimonials in place, I've cleaned them up.
| | 02:41 | Now what pages do I want this assigned to?
| | 02:44 | Well, actually I want it only on the
home page, so rather than my Module
| | 02:48 | Assignment On all pages, I'm going to
pick only the pages selected and
| | 02:54 | I am going to select None of those pages
and then check off just the Home page.
| | 02:59 | And that will have my Testimonials show
up in the right column only on the
| | 03:03 | Home page of the Web site.
| | 03:04 | Then I am going to say Save & Close.
| | 03:06 | And now when I go to the front end of
the Web site and I hit Refresh, you can see
| | 03:11 | I have my Testimonials that show up
here on the right column in the Home page.
| | 03:15 | And if I go to my About page, I don't have
anything in the right column at the moment,
| | 03:19 | because I disabled that login box
that was there, so now my About page
| | 03:24 | is stretched to fill the
entire content area here.
| | 03:28 | The Custom HTML Module is incredibly useful.
| | 03:31 | You can use it to put text in, just
like we did here, you could also use that
| | 03:36 | functionality for including a YouTube
video in a module position or a Twitter feed
| | 03:41 | or a Facebook feed, similar to what
I did earlier with an article,
| | 03:45 | you can do that same kind of
thing with a module as well.
| | 03:48 | You'll find the Custom HTML Module to
be very flexible and very useful for
| | 03:52 | a wide variety of applications
on your Joomla! site.
| | Collapse this transcript |
| Modifying the breadcrumb module| 00:00 | The Breadcrumb is a really great feature
for helping to indicate where you are
| | 00:05 | in the navigation on various parts
of a particularly a large Web site.
| | 00:10 | The Breadcrumb is located right here
on the home page and you can see it
| | 00:15 | just says Home here for the moment.
| | 00:16 | If I go further into the site let's say
I go to the About>Company Structure page,
| | 00:20 | that breadcrumb is now down here
at the bottom and it indicates that
| | 00:24 | I am from the home page,
| | 00:25 | I went to the About page and
into the Company Structure page.
| | 00:29 | And it allows me to go jump up a level.
| | 00:31 | I can click on the words About and that
will send me back to the top level
| | 00:35 | About page where I can then navigate
to another page on the Web site.
| | 00:40 | However, I think this breadcrumb is
placed relatively badly, all the way
| | 00:44 | down here at the bottom of the page.
| | 00:45 | I would much rather see this
breadcrumb up at the top of the page.
| | 00:49 | Maybe just above where the article is starting.
| | 00:52 | The other thing I'd like to do is, I really
don't want this breadcrumb showing on the home page.
| | 00:57 | It's kind of a waste here.
I know I'm on the home page.
| | 01:00 | The breadcrumb doesn't do
anything for me. It just says Home.
| | 01:03 | There's nothing here I can click.
There's nothing here I can do.
| | 01:06 | So what I would like to do is move
this up to a module position that's
| | 01:11 | a little bit further up on the page
and I'd like to remove the breadcrumb
| | 01:15 | from the homepage entirely.
This module already exists.
| | 01:18 | So we will edit the existing module.
So if I hop into the back end of Joomla!
| | 01:23 | and I go to Extensions>Module Manager
and I go to my Breadcrumbs.
| | 01:27 | Right now my Breadcrumbs are in position 2
which is called the Breadcrumb position,
| | 01:32 | but as you saw it was down
at the bottom of the page.
| | 01:36 | I would really like to go someplace
else and Top center is at the top
| | 01:42 | of the content area of the Web page.
| | 01:45 | I think the breadcrumb
will be better placed there.
| | 01:47 | So I'm going to choose Top center
for the breadcrumb instead.
| | 01:51 | I'd really like this breadcrumb
not to show on the home page.
| | 01:54 | So under Menu Assignment I'm going to
choose on all pages except those selected,
| | 01:59 | select none of these, and
then select just the home page.
| | 02:03 | So I will put the breadcrumb on every page of
the Web site, but don't show it on the home page.
| | 02:08 | Now I am going to Save & Close and when
I refresh the homepage of the Web site,
| | 02:14 | I don't see the breadcrumb
anywhere now, which is great.
| | 02:17 | That's exactly what I wanted.
| | 02:19 | Now when I go to the About page the breadcrumb
is showing up here at the top of the page.
| | 02:24 | It also happens to be showing the
title of that particular module.
| | 02:28 | That's what that word Breadcrumbs is.
| | 02:30 | By the way, showing the word
Breadcrumbs is not terribly helpful,
| | 02:35 | because Web designers and developers tend
to know the term Breadcrumb, but your average
| | 02:39 | Web surfer certainly doesn't
know the word Breadcrumb.
| | 02:41 | So let's go back and make
sure that that is turned off.
| | 02:44 | So back into the back end of Joomla!
| | 02:46 | we will go to Breadcrumbs one more time
and here where it says Show Title,
| | 02:51 | we will set that Hide and we will say Save & Close.
| | 02:54 | You might be wondering why the vbreadcrumb
title didn't show when it was down
| | 02:58 | at the module position down at the bottom of
the page, but it is showing here at the top.
| | 03:03 | That has to do with the type of module
chrome is being used with a particular module.
| | 03:11 | And by module chrome this happens to be
the HTML that's wrapped around a module
| | 03:15 | before it's displayed on a Web page.
| | 03:17 | This is configurable through the template
and I'll cover how you can configure
| | 03:22 | module chrome in my Joomla!
Responsive Templates course.
| | 03:26 | But for right now you can simply turn
on and off the title and that will take
| | 03:32 | care of any issues that you might have
with the title showing when you don't
| | 03:35 | want to have it showing rather than
coding that into the template itself.
| | Collapse this transcript |
| Creating a random image module| 00:00 | Look at this home page, it's definitely
improved over the last few videos,
| | 00:04 | but it's certainly lacking something special,
and one of the things it's really lacking
| | 00:08 | besides color is, it's lacking a photograph.
| | 00:12 | So what I'd like to do is add a
random image module to the home page
| | 00:16 | of this Web site, and I'm going to put that
over in the left column and I will have
| | 00:22 | a image that will rotate.
| | 00:23 | It's not a fade-in, fade-out
slideshow that comes with Joomla!
| | 00:27 | it's an image that it chooses from a
directory of images, and every time the page
| | 00:32 | is refreshed a different photo is chosen
or at least one is picked at random and
| | 00:37 | usually it's a different photograph.
| | 00:39 | So, let's go ahead and try putting a
random image on the left side of the screen
| | 00:44 | and we'll see if that improves
the look of this particular Web page.
| | 00:48 | So here in the back end of Joomla!
| | 00:49 | I am going to go to my Extensions>Module Manager
and I am going to create a new module,
| | 00:55 | this time this will be the Random
Image module down here under R,
| | 01:02 | and I am going to give this a title of Random
Image, but I am going to hide that title
| | 01:06 | because nobody needs to see that, and
the position for this is going to be
| | 01:11 | under Protostar, and I am going to look for
the left side of the page, position-8.
| | 01:17 | And then under Basic Options I can indicate
the type of image, the folder where
| | 01:23 | it's located and a width and a height,
but unfortunately I don't have the
| | 01:27 | ability to upload images right here.
| | 01:28 | So, I am going to just say Save & Close
for the moment and I am going to jump
| | 01:33 | into my Media Manager, so I can create that
folder and upload a bunch of images to it.
| | 01:37 | So under Content>Media Manager, I am
going to make a new folder and I am going
| | 01:44 | to call that folder random, so this
will be inside of images/random,
| | 01:49 | create the folder, and I am going to go into
the random folder and I am going to upload
| | 01:54 | some pictures, I am going to hit the
Upload button here and then say Browse,
| | 01:59 | and if I go to my Chapter 8 folder, to folder
number five, I am going to go ahead and
| | 02:05 | select the five images
that I have here and say Open.
| | 02:09 | I have already gone through in Photoshop
and I have trimmed up all those pictures,
| | 02:14 | so that they are exactly the same
height and width and I am going to
| | 02:18 | say Start Upload, so boom, there we
go, I've got all five of my pictures
| | 02:22 | uploaded here to the Media Manager.
| | 02:24 | Now I am going to go back to my Module
Manager, Extensions>Module Manager and
| | 02:29 | I am going to go back to my Random Image
module, and to the Basic Options tab,
| | 02:34 | and here I am going to type in my
Image Folder, which is images/random.
| | 02:40 | I could set up a link if I want, it
would be no matter what image was displayed
| | 02:44 | it would go to the same page on the Web site,
I probably don't really want to do that,
| | 02:48 | so I am just going to leave that blank.
| | 02:51 | And as for a width and a height the
image module sort of defaults to this
| | 02:55 | 32 pixel wide sort of pix or type of thing
if you don't specify a width and a height,
| | 03:00 | so I am going to specify a width
of 200 pixels and I am going to leave
| | 03:05 | the height alone, it'll
scale that appropriately.
| | 03:07 | Finally, under my Menu Assignment I
want this to go on only the pages selected,
| | 03:13 | I am going to select No pages and then
just check off the home page, that's the
| | 03:18 | only page I want this random image to
show up on, and I am going to go ahead
| | 03:23 | and say Save & Close.
| | 03:24 | Now when I come back and I refresh the
front end of the Web site here's my random
| | 03:28 | image showing up over here on the side,
and as I hit my Refresh button, I get a
| | 03:33 | different picture loading each time
and I have something of a three-column
| | 03:37 | layout here which is kind of nice.
| | 03:40 | If I wanted this to show up on other pages
of the Web site and I could certainly do that,
| | 03:44 | I could allow that random image
module to display on other pages
| | 03:47 | of the Web site as well.
| | 03:49 | But one other way that I could energize
this page would be to actually have this
| | 03:53 | picture and maybe not in this column,
but what if it appeared here right
| | 03:56 | underneath the content, and I'll show
you how to do that in the next video.
| | Collapse this transcript |
| Including a module in an article using loadposition| 00:00 | So in the last video I added this
random image to the home page and every time
| | 00:05 | I refresh the page I get a different
picture that will load here or at least
| | 00:09 | it picks one at random and sometimes
that's a different picture and sometimes
| | 00:13 | it's the same picture.
| | 00:14 | But what I suggested at the end of the
last video was, what if instead of putting
| | 00:18 | this over here in the left column, what
if I had this picture appear right here
| | 00:23 | underneath the content for the
home page, maybe as a large format picture.
| | 00:29 | Wouldn't that be kind of cool?
And in fact that is possible.
| | 00:33 | What we need to do though is we need
to take our module and make our module
| | 00:38 | appear inside of an article.
| | 00:41 | Normally modules only
appear in module positions.
| | 00:44 | Those module positions are determined
by the template, and I showed you how to
| | 00:48 | figure out where those module positions
were in the first video of this chapter,
| | 00:52 | but you can also make modules appear
inside of articles and occasionally, in a
| | 00:57 | situation like this, that's quite helpful.
| | 01:00 | So what we are going to
do is a two-step process.
| | 01:04 | First of all I am going to edit my
article and I am going to add a little piece
| | 01:09 | of code I'll show and I'll assign a
name for that particular module position,
| | 01:14 | then I am going to go to the back end of Joomla!
| | 01:16 | in the Module Manager and I will
take my module for the random image
| | 01:20 | and assign it to the module position that we
just created, so let's go ahead and do that now.
| | 01:26 | In the back end of Joomla! I am going to go to
Content> Article Manager and I am going to find
| | 01:32 | my home page article, it's this one here
called Harnessing wind and sun for a
| | 01:35 | cleaner, energized planet.
| | 01:37 | At the end of the paragraph here I am
going to add the following code,
| | 01:42 | it's a curly bracket followed by the word
loadposition, all one word, followed by a
| | 01:49 | module position name.
| | 01:51 | I would not want to use an existing
module position name, I am going to have to
| | 01:55 | create a new one here for this particular
module position, I am just going to
| | 01:59 | call it random, because that's what
going there and then a curly bracket
| | 02:03 | to close everything off.
| | 02:05 | So curly bracket loadposition, all
one word, <Space> followed by a module
| | 02:11 | position name and you can make that up,
you can call it anything you want,
| | 02:14 | you could call this George or Sally or Martha,
but it's not necessarily self-documenting.
| | 02:20 | By calling it random I have a pretty
good sense of what kind of module is going
| | 02:24 | to go there, it's the random image
module, go ahead and say Save & Close.
| | 02:27 | And now I need to assign the module to
that position, so I am going to go to
| | 02:33 | Extensions>Module Manager and down here
you'll find the Random Image, I am going
| | 02:39 | to click on that, and instead of position-8
I am going to actually type in this box
| | 02:45 | that appears when I click the Down Arrow,
I am going to type in the word random,
| | 02:49 | that is the position that I just
made and I am going to go ahead and hit
| | 02:55 | my Enter key on my keyboard, and that
will take that position and put it there
| | 02:59 | into the position slot here, it won't be
anything that I'd pick off the dropdown
| | 03:03 | I'll actually have to type it in.
| | 03:05 | The other thing I am going to need to
change is here under Basic Options,
| | 03:10 | I have originally set this width 200 pixels,
but my images are actually set up to be
| | 03:14 | 750 pixels wide, so I am just going to
change this to 750, and then I am going
| | 03:20 | to say Save & Close.
| | 03:21 | Now when I refresh the home page my
random image appears here at the bottom of
| | 03:27 | the page directly underneath the content,
and as I refresh the page I get a
| | 03:34 | different picture showing up
there on the bottom of the page.
| | 03:37 | Also remember that this Protostar
template is responsive, so as I make my page
| | 03:43 | smaller notice that my image will
scale accordingly, so there we go,
| | 03:49 | we're watching that image just scale right
here and as we get really small towards
| | 03:54 | mobile phone size, this
image will continue to shrink.
| | 03:58 | So that's a very nice treatment here
for this page, I really like the way that
| | 04:02 | that's turned out, and that's how you
embed a module inside of an article.
| | Collapse this transcript |
| Exploring administrator modules and turning on the Joomla! version| 00:00 | So I've just spent the last bunch of
videos talking about modules,
| | 00:05 | and all of these modules have appeared
on the front end of the Web site.
| | 00:09 | But, Joomla! actually has a whole another set of
modules that you haven't even thought about yet.
| | 00:14 | If you take a look at the page that's right
here on the screen, this is in fact a Joomla!
| | 00:20 | template and inside of the Joomla!
template is some content and some modules.
| | 00:26 | There are actually Administrator modules
that appear inside of Joomla! as well.
| | 00:30 | And I wanted to introduce you to these Joomla!
| | 00:33 | modules down in the administrator side
of things because they can be very handy.
| | 00:38 | Way back in the beginning of the course
I talked about the lack of Joomla!'s
| | 00:42 | version number showing up
anywhere here inside of the Joomla!
| | 00:45 | administrator interface, and
that's kind of inconvenient.
| | 00:49 | I showed you a workaround for that,
if you go under System and you go to
| | 00:53 | the System Information, you can take
a look at what the Joomla! version is,
| | 00:57 | but you don't see it directly
on the screen the way we used to
| | 01:01 | in previous versions of Joomla!.
This actually happens to me... a Joomla!
| | 01:04 | module that we can turn on and configure.
So let's see how that works.
| | 01:09 | Under Extensions we're still
going to go to Module Manager.
| | 01:12 | But if you look over here on the left
side of the screen, we've been filtering
| | 01:16 | these modules here for the site and
also right above this you'll notice
| | 01:20 | we have tabs for Site and Administrator.
| | 01:23 | If I either change my Filter to Administrator
or click on the Administrator link here,
| | 01:26 | either way it does the same thing,
this shows me all of the administrator
| | 01:32 | modules that appear in the
administrator side of this Web site.
| | 01:36 | So I have things like Logged-in Users,
Popular Articles, and Recently Added Articles
| | 01:42 | that appear in the position of Cpanel.
| | 01:45 | And if you go back to your Control
Panel you'll see that that is in fact
| | 01:50 | what's here, the LOGGED-IN USERS, the
POPULAR ARTICLES, and the RECENTLY ADDED ARTICLES.
| | 01:54 | So you can use your reordering
abilities to reorder those if you wanted
| | 02:01 | something to appear further up on the page.
Down here it says that there is a Joomla!
| | 02:05 | version that currently occurs
in the footer of this template.
| | 02:08 | But if we scroll down to the footer,
I certainly don't see it there.
| | 02:12 | So what I'd like to do is change the position
of this Joomla Version from footer to Cpanel.
| | 02:19 | So what I am going to do is click on
Joomla Version here and this is going to
| | 02:24 | give me all of the Basic Options.
| | 02:25 | What kind of version would I like, would I
like the Short version or the Long version?
| | 02:30 | Would I like to show the word Joomla!
| | 02:33 | when I'm using the Short version or
would I just like to see a number?
| | 02:37 | Which might be something, if you are
customizing this administrator template, maybe you
| | 02:40 | don't want the word Joomla! to appear anywhere.
| | 02:42 | This is the standard Advanced Options
for any module inside of Joomla!.
| | 02:46 | So what I am going to do is I am going to
change this position from the footer here.
| | 02:51 | And this is inside of ISIS which is
one of the administrator templates,
| | 02:54 | and I am going to move this to Cpanel,
and then I am going to say Save & Close.
| | 02:59 | When I go back to the Control Panel for
my Web site here, my Joomla Version shows
| | 03:04 | up right here on the very
top of the screen as Joomla! 3.0.1,
| | 03:07 | it's the very first thing I see now.
| | 03:10 | I love that right there,
that's exactly what I want to see.
| | 03:14 | But some of you may prefer to have this
a little bit further down on the page,
| | 03:19 | because maybe your clients are more
interested in what articles have been added
| | 03:22 | and what are the Popular Articles,
so I could rearrange this.
| | 03:26 | Back under Extensions>Module Manager, you see
here that my Joomla Version is listed first.
| | 03:32 | Switch over to make sure you're using
the Ordering column for sorting,
| | 03:36 | and you know that because the three dot icon
here is a dark gray or black instead of
| | 03:41 | the light gray, and now I can rearrange.
| | 03:44 | So if I want my Joomla Version to appear
at the bottom of the Control Panel,
| | 03:48 | all I have to do is click and drag and let
it go down here so that it will be the
| | 03:53 | last module on the Control Panel.
| | 03:56 | And now when I go back to my Control
Panel I'll see that Joomla Version when
| | 04:01 | I scroll down the page, so
it's down here at the bottom.
| | 04:03 | So you might want to take a look at
some of those Administrator modules,
| | 04:08 | make a backup of your site before you go do
this just in case you happened to change a
| | 04:13 | setting on something and you
are not sure what you changed.
| | 04:15 | Feel free to take a look at those Administrator
modules and what kind of goodies are there.
| | 04:21 | You can customize your interface and
the information that's displayed here
| | 04:26 | by taking a look at those Administrator modules.
| | Collapse this transcript |
|
|
9. Using ComponentsUsing the content component| 00:01 | Now that you know all about modules,
it's time to learn about components.
| | 00:05 | Components are another kind
of extension inside of Joomla.
| | 00:08 | You might be surprised to know that
you've already been working with components.
| | 00:13 | Content is a kind of component, and it
shows up in the main part of the Web page.
| | 00:17 | There is only one component per page, while
there may be many modules on the same page.
| | 00:24 | So let's take a look at the front-end of
our Web site. Taking a look at this, our
| | 00:28 | Search module, our main menu module, our
Testimonials, and the footer Login down
| | 00:35 | here are all modules.
| | 00:37 | We've also got a random image module,
which is embedded inside of the article
| | 00:42 | that here on the homepage.
| | 00:43 | So pretty much everything that's
wrapped around the article Harnessing wind and
| | 00:49 | sun for a cleaner, energized planet is
a module, but the content here in the
| | 00:54 | middle, the title, and the
text; this is a component.
| | 00:58 | Another major difference between
modules and components is that components
| | 01:02 | require configuration, and they are
linked to the menu to display on the Web site.
| | 01:08 | Rather than being assigned a
position on the page, as modules are,
| | 01:12 | every component has a different
configuration option, and different ways for
| | 01:16 | connecting to the menu,
| | 01:17 | so watch out for that. I will show
you a few components in later videos.
| | 01:22 | Finally, a component may also
have a module associated with it.
| | 01:26 | A great example of this is the Search
module where, search is configured in the
| | 01:30 | component, but it's displayed in a module.
| | 01:33 | Menus work very much the same way.
| | 01:35 | Don't let that trip you up.
| | 01:38 | In the back-end of Joomla, Components
have their own menu here, where you can
| | 01:42 | configure the component, and then to
display it on the Web site, you're going to
| | 01:47 | be going to your Menus, and you'll be
making a New menu link, and what will happen
| | 01:52 | is when you Select your menu item type,
you'll find here in your list of menu
| | 01:57 | item types, you'll find something that
corresponds to the component of interest.
| | 02:03 | So that's a brief summary comparing
modules and components, and how they are the
| | 02:08 | same, and how they're different.
| | 02:10 | So remember that components are the big
things on the Web page that fill up the
| | 02:14 | main content area. Modules are all
of the little supplementary things that
| | 02:18 | wrap around it.
| | Collapse this transcript |
| Using the contact component| 00:00 | One of the notable pages missing
from this Web site is a contact page.
| | 00:05 | Right now I have no way for anyone to
contact this company anywhere on this Web site.
| | 00:10 | There's no contact information anywhere.
| | 00:13 | Fortunately, Joomla
| | 00:14 | ships with a Contacts component.
| | 00:16 | And in that Contacts component, you
have the ability to list your contact
| | 00:21 | information, and you can
have a contact form.
| | 00:24 | People can fill out that contact form
to contact you, and that way you don't
| | 00:27 | have to put your e-mail address on the
Web site directly, which might lead to a
| | 00:31 | spammer picking it up, and sending
you all kinds of e-mail you don't want.
| | 00:34 | So to do this, I'm going to
hop into the back-end of Joomla,
| | 00:38 | and I'm going to start
working with the Contacts component.
| | 00:42 | So here under Components, we have a
component called Contacts, and here on the
| | 00:47 | flyout, there are two options;
| | 00:48 | the Categories, and the Contacts.
| | 00:50 | These categories are different than the
categories that you have associated with articles.
| | 00:55 | So these are contact categories
instead of article categories.
| | 00:59 | But the process works exactly the same.
| | 01:01 | We're going to create a category for Contacts.
| | 01:04 | We're going to create the contact
itself, and then we're going to link that
| | 01:07 | contact to the menu, and that's
what I am going to cover in this video.
| | 01:11 | So, I am going to start by
making a contact category,
| | 01:14 | and when you click this, you'll see
that we only have one category by default;
| | 01:18 | that's the Uncategorized category.
| | 01:20 | I am going to go ahead and make a new
category, and I am going to do that by
| | 01:24 | clicking the New button, and I
am going to give this a title.
| | 01:28 | Let's call it The Management.
| | 01:29 | That's all you need to put in to
create a category, just the same way you saw
| | 01:33 | with the article categories, works
the same for the Contact categories.
| | 01:36 | And I am going to say Save & Close.
| | 01:38 | So that's step one.
| | 01:39 | Step two is to create the contact
itself, and that would be under my Contacts
| | 01:44 | link, which I can get to here in left
navigation, or I can go to the dropdown, and
| | 01:48 | select it from there.
| | 01:49 | As you see, I have no contacts right now.
| | 01:53 | But I can add one by clicking the big
green New button, and I am going to fill
| | 01:57 | out this information.
| | 01:58 | So first of all is the Name.
| | 02:00 | In your Exercise Files, you'll find
that I have given you the company address
| | 02:04 | and contact information here.
| | 02:05 | You can just go ahead and copy the
company name as the name that we'll put
| | 02:09 | in. Highlight, Ctrl+C or Command+C to copy:
Ctrl+V or Command+V to paste here into the Web site.
| | 02:15 | The Category, of course,
will be The Management.
| | 02:18 | And that's all you need to
configure here in this particular tab.
| | 02:22 | Now I am going to switch to the Contact
Details Tab, and here is where I can put
| | 02:26 | in some additional information.
| | 02:28 | I don't have to fill in absolutely everything,
but I'm going to fill in a few of these things.
| | 02:33 | One thing that you should fill in if you
want a contact form is the e-mail address.
| | 02:38 | So I am going to highlight that;
| | 02:39 | Ctrl+C or Command+C, and then Ctrl+V or
Command+V. The e-mail address is really
| | 02:45 | important, because if you don't have
an e-mail address specified here, the
| | 02:49 | contact form won't appear.
| | 02:50 | This Email address is the
receiving e-mail address.
| | 02:54 | So when someone comes to your Web site,
and they fill out the contact form, this
| | 02:58 | is where the contents of that form
will be e-mailed; to this address.
| | 03:02 | This address, however, will not
be displayed on the Web site.
| | 03:05 | If you do not specify an e-mail
address in this blank, you will not have a
| | 03:09 | contact form on the Web site,
| | 03:11 | and the reason why is very simple;
| | 03:13 | if somebody fills out that contact
form, and hits Submit, but yet, there's no
| | 03:18 | e-mail address specified, where do the
contents of that contact form go? We don't know.
| | 03:23 | So that's why we don't even
give you the contact form at all.
| | 03:25 | Then we're going to put in
the address for the Web site,
| | 03:29 | and that is right here: 123 KinetEco Drive,
Ctrl+C or Command+C to copy; Ctrl+C
| | 03:34 | or Command+V to paste.
| | 03:36 | Then I am going to put in my City, State,
and ZIP; that's Los Angeles, California,
| | 03:40 | 90025, so Los Angeles, CA, 90025.
| | 03:48 | I am not going to fill in the Country;
KinetECO is pretty much doing business in
| | 03:53 | the US right now. And I am going to
copy over the phone number, highlight that,
| | 03:57 | Ctrl+C, and Ctrl+V to paste
that on into the Telephone blank.
| | 04:02 | You could continue to fill out these
blanks if you want, but that's our basic
| | 04:05 | information here for KinetECO.
| | 04:06 | And I am going to go ahead
now, and just say Save & Close.
| | 04:10 | So we've created a category for our
contact, we've created the contact itself;
| | 04:14 | is there anything showing on the Web site?
| | 04:16 | Well, no, not yet, because this is a
component, and the only way components
| | 04:21 | display on the Web site is if they are
linked through the menu, and we haven't
| | 04:25 | made a menu link yet.
| | 04:26 | So that's our last step in this process.
| | 04:28 | So, I am going to go to Menus >
Main Menu > Add a New Menu Item.
| | 04:34 | And my Menu Item Type, I
will click on the Select button.
| | 04:38 | This time, rather than going to
Articles, I want to link to a contact,
| | 04:41 | so I should look under the
Contacts portion of the screen.
| | 04:44 | And here inside of Contacts, I have several
choices. The one I want, though, is a single contact.
| | 04:50 | I'm just linking to this
one contact's information.
| | 04:53 | Which contact would I want to link to?
| | 04:55 | Click on this button, there's only one,
| | 04:57 | so that's the one I am going to pick.
| | 04:59 | And then for my Menu Title, I
will just call this Contact.
| | 05:02 | That's all of the required
information that I want to fill out.
| | 05:05 | I want this menu item to show
up at the same level as Home,
| | 05:09 | so my Menu Item Root will
stay exactly where it is,
| | 05:11 | and I'm going to go ahead,
and say Save & Close.
| | 05:15 | Now, when I refresh the front-end of the
Web site, I have a link for my Contact page.
| | 05:20 | When I click on that, as you see here,
I have my contact information listed
| | 05:24 | here, and then underneath,
I have a Contact Form.
| | 05:27 | When I click on that, this will pull
up the contact form that I can fill out.
| | 05:31 | Now, I'm not terribly excited
about the way this page looks.
| | 05:34 | I think these icons are kind of cheesy,
and the contact form is really hard to find,
| | 05:39 | so I am going to change a little bit of
the formatting, and I will show you how
| | 05:43 | to do that in the next video.
| | Collapse this transcript |
| Formatting the contact page| 00:00 | In the previous video, I added this
Contact page to the Web site, and this is the
| | 00:05 | way the Contact page currently looks.
| | 00:07 | I have my contact information listed at
the top, and when I click on the Contact
| | 00:11 | Form here at the bottom, I have a
very nice Contact Form available here.
| | 00:15 | But it's not a terribly attractive
page, and I don't like the fact that the
| | 00:20 | Contact Form is hidden
under this slider kind of thing.
| | 00:23 | I also really hate these icons.
| | 00:25 | They are dated from
the Mambo days, I believe,
| | 00:28 | so they are at least seven years old.
| | 00:29 | So, I would like to take those out as well.
| | 00:31 | Let's take a look at how I
can format this Contact page.
| | 00:35 | Here in the back-end of Joomla,
| | 00:36 | I am going to go to
Components > Contacts > Contacts.
| | 00:41 | Then I am going to go to the Options
item that's up here upper right corner,
| | 00:46 | and here inside of my Contact Options, I am
going to change the settings for a few things.
| | 00:52 | First of all, my Display format, by
default, is set to Sliders, and that is what
| | 00:57 | you see in action here on
the front-end of the Web site.
| | 01:00 | Click on things, some things
disappear, and other things reappear.
| | 01:02 | That was really cool for the articles, but
I really don't like it on the Contact Form,
| | 01:07 | So I am going to change
this display to Plain.
| | 01:10 | The other thing I would like
to do is get rid of those icons.
| | 01:13 | So, here under the Icons tab, right
now my setting is for Icons, but I don't
| | 01:17 | have any icons specified.
| | 01:19 | I can specify icons, I can upload
icons, I can just upload new ones, and
| | 01:24 | specify which icons I want to
associated with which fields here for my
| | 01:29 | contact information.
| | 01:30 | But really, I don't want
any icons at all.
| | 01:33 | So I am just going to change my
settings here from Icons to None.
| | 01:37 | Notice that text is also an option,
but I think it's pretty self-explanatory
| | 01:41 | what the contact information is.
| | 01:43 | We have a US-based audience, who is
used to looking at US-based addresses,
| | 01:47 | so I think the page is
pretty self-explanatory.
| | 01:49 | I don't need any extra text.
| | 01:51 | Now I am going to say Save & Close, and
when I refresh the front-end of the Web site,
| | 01:57 | now I have my contact information listed
here at the top, and then underneath, I
| | 02:02 | have my contact e-mail form,
and all of the icons are gone.
| | 02:08 | Now, you may still be kind of unhappy
with the way this works, and looks, because
| | 02:12 | it does say Contact here, and Contact
Form here; you might want to get rid of
| | 02:16 | those. You can get rid of those through CSS.
| | 02:18 | You can just sort of set those to display
none, so that they don't appear here on the page.
| | 02:23 | You could certainly use CSS to alter the
formatting of that address there at the
| | 02:28 | top of the page,
and the alignment of the page.
| | 02:30 | Some people have asked me before about
this contact form. A very common question
| | 02:35 | I get is, how can I add more fields to
the form? Additional fields. Or take away
| | 02:40 | some of the fields, in some cases.
| | 02:42 | And unfortunately,
the answer with the Joomla
| | 02:44 | contact form, this default
one that comes with Joomla,
| | 02:47 | that's part of core; the
answer is, you really can't.
| | 02:51 | It's quite involved if you're ever
going to alter this, and there's really
| | 02:55 | no need to do that.
| | 02:56 | There are a number of really great
contact form extensions that are out there.
| | 03:00 | You can build your own form using
one of these third-party extensions.
| | 03:04 | The one I recommend strongly is
called RSForm!Pro from a place
| | 03:08 | called rsjoomla.com.
| | 03:10 | It's a great extension.
| | 03:11 | It has a small price tag associated
with it, but it's well worth it, and you can
| | 03:16 | build your form to do just anything.
| | 03:17 | It'll also record everything from that
form into a spreadsheet that you can then
| | 03:22 | export in CSV format, or you can look
at it in Excel, or you can look at it in
| | 03:27 | Access, or whatever it is that
you want to do with that data.
| | 03:31 | So, the form itself really can't be altered.
| | Collapse this transcript |
| Configuring CAPTCHA for a form| 00:00 | So, in the previous two videos, we've
created this contact form for our Web site,
| | 00:05 | and it's sitting here right now, and you
can fill it out, and send e-mails with it.
| | 00:10 | It's on your local computer, and those
of you at least who are running WAMP, if
| | 00:15 | you fill this out, and you try to send
yourself an e-mail, you'll get an error.
| | 00:19 | That's because your local
computer is not configured to send e-mail.
| | 00:23 | When you put this up on the server, this
form will send e-mail just fine, but it's
| | 00:27 | not going to work on your local computer.
| | 00:29 | One of the problems, though, once we
finally get this web-site out, and on a server
| | 00:34 | is that this form is not locked down,
and that pretty much anything can come
| | 00:39 | through, and fill it out, and send e-mails,
| | 00:42 | meaning robots, and spammers,
and all kinds of other things.
| | 00:45 | A common way that people are using
these days to prevent that from happening is
| | 00:49 | something called Captcha.
| | 00:51 | And Captcha is a funny little code
that you type in, that only humans can read
| | 00:56 | that code, and match that to letters,
whereas robots, and spammers, and so forth
| | 01:01 | have issues with matching
up the code with the letters.
| | 01:04 | So we're going to go ahead and add one
of these to the Web site, and this happens
| | 01:09 | to be built into Joomla,
| | 01:10 | and it's very straightforward process.
| | 01:13 | So I'm going to show you
how that works right now.
| | 01:15 | Here inside of the back-end of Joomla,
| | 01:17 | what I'm going to do to start with is
I'm going to go to Extensions > Plug-in
| | 01:21 | Manager, and I'm going to find the
thing here called Captcha-ReCaptcha, and I'm
| | 01:26 | going to go ahead and click on that.
| | 01:28 | And this first screen is just going to
give us some information about it, but
| | 01:31 | one of the things that it says here
in the description is that the Captcha
| | 01:35 | plug-in is using ReCaptcha to
prevent spammers, and so forth.
| | 01:39 | And where you can get the codes that
you need to make this work is at this
| | 01:42 | address: at google.com/recaptcha.
| | 01:43 | So I'm going to go ahead and click
that link. It will open this in a new tab,
| | 01:49 | and I would like to use this on my site,
so I'm going to go ahead and click on
| | 01:53 | that, and it will give you
some information about it.
| | 01:56 | I'm going to click on Sign up Now, and
it's going to ask me for my Google login,
| | 02:01 | so I'm going to go ahead and type that in.
| | 02:07 | So, once I log in with my Google account, --
and hopefully you have a Google account;
| | 02:11 | if you don't just sign up for Gmail,
and you'll have a Google account that you
| | 02:14 | can use to sign up for this service --
| | 02:16 | what you can do now is enter the
Domain name for your Web site. This is where
| | 02:21 | your Web site will be when it
launches, and our Web site will be at
| | 02:24 | joomla.kinetecoinc.com.
| | 02:29 | And what I want to do is Enable this
key on all domains, a global key, and then
| | 02:34 | I'm going to say Create Key.
| | 02:36 | And this is going to give me
two funny looking strings here.
| | 02:39 | One is the Public Key, and one is the
Private Key, and I'm going to need both of
| | 02:44 | these to configure Captcha.
| | 02:46 | So here inside the back-end of Joomla,
| | 02:48 | under Basic Options, it's going to ask
me for a Public Key, and a Private Key.
| | 02:53 | So all I need to do now is copy these.
| | 02:56 | Here is the Public Key, and by the way,
your public key will probably look different.
| | 03:00 | Ctrl+C or Command+C to Copy, Ctrl+V
or Command+V to Paste, and do the same
| | 03:06 | thing for the Private Key highlight it,
Ctrl+C or Command+C to Copy, Ctrl+V or
| | 03:11 | Command+V to Paste.
| | 03:12 | This will ask you for the Theme;
by default it's called Clean.
| | 03:17 | It's a very simple looking Captcha,
but you can have some other color
| | 03:20 | themes here as well;
| | 03:21 | White, BlackGlass, or Red. Depending on
what matches your template, you can choose
| | 03:25 | one of those other ones, and I'm
going to go ahead and say Save & Close.
| | 03:29 | So now that I have the plug-in
configured, now we need to tell Joomla
| | 03:33 | to use that particular plug-in, and
to do that I'm going to go back to
| | 03:37 | System > Global Configuration, and here
inside of Global Configuration, right here
| | 03:42 | on the Site tab is the Default Captcha,
and right now there's None Selected.
| | 03:47 | I'm going to set this to Captcha-ReCaptcha,
and say Save & Close.
| | 03:54 | Now what will happen is, when I go to
the front-end of my Web site, and I hit
| | 03:57 | Refresh, I'll see the Captcha code
appear down here at the bottom of the screen.
| | 04:01 | And every time I refresh the page, a
different code is going to come up, just
| | 04:05 | like that, and so I can type in any of
those combinations; whatever shows up on
| | 04:11 | the screen, I just type that
on in, and everything is great.
| | 04:15 | This Captcha plug-in will show on the
bottom of all of your contact forms, by default.
| | 04:20 | It will also show up at the bottom of
any user registration forms that you
| | 04:25 | might have available on the front-end of the
Web site, and we actually do have that right now.
| | 04:30 | If you go to the Login link down at
the bottom, and it says Don't have an
| | 04:34 | account? If you click that, you'll see
that we have a form here for creating a
| | 04:39 | new account on this Joomla
| | 04:41 | Web site, and the Captcha code
appears at the bottom of this.
| | 04:45 | Now, this User Registration form, I'm going
to go through in more detail in another video.
| | 04:49 | It is possible to turn off registration
for your whole Web site, but we haven't
| | 04:53 | touched this yet, and by default, Joomla
| | 04:55 | allows a user registration form to
exist on the Web site, because I created a
| | 04:58 | login form many, many videos ago.
| | 05:00 | So you'll see Captcha appear, then,
associated with contact forms, and associated
| | 05:05 | with the User Registration form.
| | Collapse this transcript |
| Creating a contact list| 00:00 | So, right now on my Web site, I have a
single contact page, and when I click on
| | 00:05 | this, I go to a generic page that will
let me contact the company. I'm not
| | 00:10 | addressing this to anyone in particular,
but I can just send in a generic e-mail
| | 00:15 | here to whoever is on the
receiving end of this form.
| | 00:17 | Over on About part of our Web site,
we do have a list of executives who work
| | 00:22 | here, and we might want to send e-mails
to at least some of these executives,
| | 00:28 | and we might what want to list their
contact information on the Web site as well.
| | 00:31 | One of the things that we can do in Joomla
| | 00:34 | is, rather than just listing a link to a
single contact like this, I could make a
| | 00:39 | list of contacts, and then people can
choose which contact they'd like to contact.
| | 00:44 | So, to do that, I am going to go ahead and
set up three more contacts inside of Joomla.
| | 00:51 | I am going to flip over here to my
back-end, and I'm going to go to Components,
| | 00:56 | Contacts, Contacts, and right
now, I have just one contact.
| | 01:02 | I am going to make three more. I'll walk
you through the first one, and then you
| | 01:06 | can go ahead and put in the other two.
| | 01:08 | So, I am going to go ahead and hit
the big green New button, and inside your
| | 01:13 | Exercise Files, I have given you
information about these contacts. So this
| | 01:18 | will be Sally Kerner, so I am going
to copy and paste her name in here.
| | 01:23 | I am going to put her in the
Category of The Management.
| | 01:26 | Then I am going to switch
over to the Contact Details tab.
| | 01:29 | I have images for these people, so I'm
going to Select an image. This will put
| | 01:34 | me into my media manager, where I
can pull out a picture. Right now
| | 01:39 | I need to upload some pictures.
| | 01:41 | So I am going to go ahead and do that; hit
the Browse button down here on the bottom.
| | 01:46 | I'm going to go Chapter 9, and video number 5,
and you'll see here I have three pictures.
| | 01:52 | So I'll go ahead and open up
those, and start the upload.
| | 01:56 | And you'll see that I have these people now
appearing here inside of the media manager.
| | 02:02 | So, I want to link to Sally, so I am
going to select here from the list, and I am
| | 02:07 | going to say Insert.
| | 02:08 | Then it's going to ask for her
Position; that's here inside of the
| | 02:12 | document. This is just a CFO.
| | 02:14 | And it's going to ask for Email address,
which is right here, Ctrl+C, then Ctrl+V.
| | 02:21 | It'll we ask me for the Address; 123
KinetECO Drive, and once again that will be
| | 02:33 | Los Angeles, California, 90025.
| | 02:40 | And further down on the page here,
we will put in her phone number.
| | 02:44 | Okay, so we've gone ahead and we have
populated this with information. I have
| | 02:52 | two more contacts to make, so I am
going to hit Save & New, and I'm going to go
| | 02:57 | ahead and set up the other two contacts for
the Web site, and I'll see you on the other side.
| | 03:02 | Okay, I have just finished filling out
Jason's information here, and I'm going
| | 03:07 | to go ahead and say Save & Close.
| | 03:09 | Now I have four contacts that are
listed here in my Contact Manager.
| | 03:14 | So now I would like to
display these on the Web site.
| | 03:17 | Right now I have only the management
link displaying. One thing I could do would
| | 03:22 | be to continue to make links to
individual single contacts, maybe a
| | 03:27 | sub-navigation under Contact, and I
could go to each one of these pages,
| | 03:30 | but I think there's a better way to do
this, and that is here under our Menus >
| | 03:35 | Main Menu, I am going to scroll in down
to my Contact link, and click on that.
| | 03:40 | And rather than choosing the type of
single contact, I'm going to click my
| | 03:45 | Select button, and switch.
| | 03:47 | This time I want to take a look
at Listing Contacts in a Category.
| | 03:52 | All of my contacts have gone in that
Category of The Management, and so I'm just
| | 03:57 | going to say, list all the
contacts in a category.
| | 04:00 | Then it's going to ask me which category
I would like; well, that's going to be
| | 04:04 | The Management. And if I just go
ahead and say Save here, and I Refresh the
| | 04:10 | front-end into the Web site -- I am
going to do this by going to the Home page
| | 04:14 | first, and then back to the Contact page --
| | 04:16 | now I have a listing of my
contacts here on the Site.
| | 04:20 | So we have the generic contact that's
listed here, we have Sally kerner, we
| | 04:24 | have June, and Jason, and you can see
here that we have got the phone numbers
| | 04:29 | that are listed over here.
| | 04:30 | The formatting isn't totally
awesome, but we can certainly fix that.
| | Collapse this transcript |
| Formatting the contact list| 00:00 | So, in the last video, we created a
list of contacts here, but this page is not
| | 00:05 | really displaying all that well,
and it's little bit hard to follow.
| | 00:09 | So let's see what we can do to clean this
up using some of the options available to us.
| | 00:14 | So here inside of the back-end of Joomla,
| | 00:16 | If I go back to Components back to
Contacts > Contacts, and I'm going to click on
| | 00:21 | the Options button here
on the top of the page.
| | 00:24 | And as you've seen before in some of
the other areas of the Web site, the
| | 00:28 | Options is where you can configure what
shows and what is hidden on the Web site.
| | 00:32 | I'm going to go to the List Layouts
tab, and here under List Layouts, this
| | 00:37 | is referring to the page that we're looking
at here on the front-end to the Web site.
| | 00:41 | So I'm going to turn some things off.
| | 00:43 | The Display Select is this
dropdown that appears right here.
| | 00:47 | I don't really need that,
so I'm going to Hide that.
| | 00:50 | Our Table Headings are set to Show; I
don't really want them showing, so I'm
| | 00:53 | going to set them to Hide as well. I
can show the Position of the person on
| | 00:58 | the page; I think that will be helpful,
because it will help us know who you
| | 01:02 | want to contact from the list,
| | 01:03 | so I'm going to go ahead
and keep that to Show.
| | 01:06 | I'll keep the Email address hidden.
| | 01:07 | That's their actual e-mail address. When
you click through on there, you'll see
| | 01:10 | the contact form, and they
can contact you from there.
| | 01:13 | I'm going to show their Phone number
as well. Hide the Mobile and the Fax.
| | 01:17 | I'm actually going to Hide the
City, State, and Country as well.
| | 01:21 | The reason why is because these are
all people who are living in exactly the
| | 01:24 | same city and state, so I don't really
feel the need to show that three times.
| | 01:29 | And then if I just go ahead and
say Save, and I refresh this page,
| | 01:37 | so now you can see that
I have my first link here.
| | 01:40 | Here's my generic link, with the phone
number listed over here on the side.
| | 01:43 | The second link is Sally Kerner, and
her title; her phone number is listed all
| | 01:47 | the way over here. And if I wanted to,
I could just turn off the phone numbers
| | 01:53 | here in this view also.
| | 01:55 | It looks like this is the way that this
is set up to display here through CSS.
| | 01:59 | You could certainly use CSS to change
the way this page looks, but changing the
| | 02:04 | CSS is kind of beyond
the scope of this course.
| | 02:07 | What I will do is I will just
turn off the phone number here.
| | 02:10 | And if I go back to my List Layouts tab,
and I scroll on down to Phone, and I say
| | 02:16 | Hide that, and say Save & Close, and I
refresh my page again, then I just have a
| | 02:22 | list of people here.
| | 02:24 | And now when I click through on any
one of these, you can see that June Su
| | 02:29 | Woo is a legal counsel, you have her address,
you have her phone number, it's listed here,
| | 02:33 | and you can send her an e-mail
right here, all within the same page.
| | 02:37 | So these contact lists are a fairly
useful piece of functionality inside of
| | 02:42 | Joomla. You can have contacts for
more than one category, you can list
| | 02:46 | categories of contacts; if you need to
list many, many people in the Web site,
| | 02:49 | that's a great way to go about it.
| | 02:51 | It's nice to include titles associated
with the people here, so there is a
| | 02:55 | little bit of guidance as to who might
be the right person to contact with a
| | 02:59 | specific question or concern
for your Web site.
| | 03:03 | So I've showed you two ways do this;
one is through the single contact, for just
| | 03:07 | one contact, for a very simple Web site.
Here we have a list of contacts for a
| | 03:11 | bigger company. So the
contact component in Joomla
| | 03:14 | is fairly useful, it's configurable,
and give it a shot on your Joomla
| | 03:19 | Web site.
| | Collapse this transcript |
| Using the weblinks component| 00:01 | KinetECO collaborates with a number
of different agencies, and companies, and
| | 00:06 | institutions, and nonprofits that
specialize in solar and wind energy,
| | 00:12 | and they'd like to include a page on
this Web site that shows some of the links
| | 00:18 | to these institutions
where they're collaborating.
| | 00:20 | So I would like to add another link to
this page that would be called Links,
| | 00:25 | and I'd like to classify those links
into solar links, and wind links, and
| | 00:30 | fortunately, Joomla
| | 00:31 | comes with a component
that does exactly that.
| | 00:35 | So I'm going to go ahead
and install that now.
| | 00:37 | I am going to hop in to
the back-end of Joomla
| | 00:40 | here, and I'm going to go to
Components > Weblinks.
| | 00:43 | And as you see here, just as we saw
with the regular old Content in Joomla,
| | 00:48 | just as we saw with Contacts, in our
Weblinks, we also have Categories, and then
| | 00:54 | we have the Links themselves.
| | 00:56 | And then of course, we're going to have
to link whatever we create here in the
| | 01:00 | component to the menu.
| | 01:02 | So we're going to follow the same
procedures we've been following for our
| | 01:06 | Content, and our Contacts.
| | 01:08 | First, we're going to make our Weblinks
categories, then we're going to put in
| | 01:11 | the links, and then we'll
link it all up to the menu.
| | 01:14 | So, here from Weblinks, I am going to
start with Categories, and I am going
| | 01:19 | to start by making a category.
Clicking the New button, I'll give this a
| | 01:22 | Title; Solar Links.
| | 01:25 | And that's really all I need to put in.
There are some other options that are
| | 01:28 | here, but that's pretty much it, and I
am going to say Save & New, and I'm going
| | 01:33 | to make one called Wind Links,
and Save & Close.
| | 01:36 | So now I have two
categories for my links.
| | 01:41 | Next thing I want to do is
actually make my Web links.
| | 01:43 | So over here on the left side of the
page, I am going to click on the Web Links
| | 01:48 | link, or you can go through
the dropdown menus to get there.
| | 01:52 | And of course, I have no links to
start with, so I am going to go ahead and
| | 01:56 | hit the New button.
| | 01:57 | And in your Exercise Files, I have given
you four links here that we can link to.
| | 02:03 | So, the first piece of information I am
asked for here in Web Links is the Title.
| | 02:07 | So I am going to copy this;
Sun Pacific Solar Electric, Inc.
| | 02:10 | I will go ahead and paste that in.
| | 02:13 | Then it's going to ask me for the URL.
| | 02:16 | Well, that's going to be sunpacificsolar.net.
Copy that, paste that here, and my
| | 02:23 | Category is going to be Solar Links.
| | 02:26 | That's all I need to put in.
| | 02:27 | I am going to go ahead and say Save & New.
| | 02:30 | I am going to repeat this process for
California Solar, and then I am going
| | 02:36 | to repeat the process for my Wind
Links, and the change that I will make there
| | 02:40 | is that I'll indicate that the Category is
for Wind Links instead of for Solar links.
| | 02:44 | I am going to go ahead and do that now.
| | 02:46 | I will see you on the other side.
| | 02:48 | Okay, I've just put in my last link here,
and now I'm going to hit Save & Close,
| | 02:53 | and I'm returned to the Web Link
Manager, where I have my four links.
| | 02:56 | I have two of these that are classified
under Solar, and I have two that are
| | 03:00 | classified under Wind.
| | 03:01 | Now I am ready to display this
on the front-end of the Web site.
| | 03:04 | So to do that, I'm going to go to Menus >
Main Menu > Add New Menu Item, and I'm
| | 03:11 | going to create a Menu Item Type.
| | 03:13 | And of course, I'm working with the
Weblinks component, so I will look under
| | 03:17 | Weblinks, and I have three choices here.
| | 03:19 | I can list all of the Web link categories,
or the Web links within a category, and
| | 03:25 | the third option is I can submit a
form, so that somebody could submit other
| | 03:30 | Weblinks to the Web site.
| | 03:31 | I want to go with listing
all the Web link categories.
| | 03:34 | Because I have two categories, I'd like
people to start by looking at what those
| | 03:39 | categories are, and then choosing a
category, which will take them to a page which
| | 03:44 | will have the links on it.
| | 03:45 | So I am going to go ahead and choose that.
| | 03:48 | My top level category here is, where
would I like to start listing all of the
| | 03:52 | categories as part of this?
| | 03:54 | So, Root would be the top level, and
children of that would be Solar Links, and
| | 03:58 | Wind Links. Or I could say something
like Solar Links, if I had a series of
| | 04:02 | subcategories; for example, maybe I
have a subcategory called solar panels,
| | 04:07 | maybe configured for large solar panels,
like the ones that we had on the farms,
| | 04:12 | versus the smaller solar
panels that charge batteries.
| | 04:15 | So I might have some subcategories
under Solar; might have some
| | 04:18 | subcategories under Wind.
| | 04:20 | I don't at the moment.
| | 04:21 | I'm just going to go with Root.
| | 04:22 | Then I am going to give this a Menu
Title; that will be Links. And there are
| | 04:28 | some other options that are here, but
that's really all I need to configure for
| | 04:31 | the moment, and I am going to
go ahead and say Save & Close.
| | 04:36 | Now when I go to the front-end of
the Web site, and I hit Refresh, I have a
| | 04:40 | link for links, and if I click that, I go to a
page that has my Solar Links, and my Wind Links.
| | 04:47 | If I click on Solar Links, I have
my two links that are listed here.
| | 04:53 | And if I go back to my Links
page, I go to my two Wind Links.
| | 04:58 | So, I'm not really thrilled with the way
these pages look, and I'd like to alter
| | 05:02 | some of the settings that I have here.
| | 05:04 | The other thing that I'd like to
change is that my Links link is last on list,
| | 05:09 | because it's the most
recent one that I created.
| | 05:11 | I'd like Contact to be the
last link in the list here.
| | 05:14 | So I'd like it to read Home, About,
News & Info, Products, Links, and Contact.
| | 05:18 | So while I'm here inside of the
Menu Manager, let me rearrange that.
| | 05:23 | So I am going to scroll on down here
to the bottom of the page, grab my Links
| | 05:27 | link and drag and drop it just above Contact,
and that should rearrange these on the page.
| | 05:33 | If I refresh my page here, now you can
see that Links is listed before Contact.
| | 05:38 | So now I am going to work
on the design of this page.
| | 05:42 | So, if I go back to Components > Weblinks,
I am going to go to my Options item
| | 05:48 | here at the top of the page.
| | 05:50 | And something I haven't pointed out to
you yet, you might have seen this in some
| | 05:54 | of the other videos where I worked
with Options. Over here in the left
| | 05:58 | column, you'll see that Joomla
| | 05:59 | has now lined up
all of these Options screens.
| | 06:01 | Obviously, they are
scattered throughout Joomla
| | 06:03 | for configuring options on an item by item
basis, so we have menu options, and we
| | 06:08 | have Web link options, we have
contact options, we have article options.
| | 06:12 | This particular screen, once you get into
one of these options, has the navigation
| | 06:16 | to go switch between all of the
option screens over here on the left side.
| | 06:20 | That's a new interface in Joomla! 3.
| | 06:23 | It's particularly helpful when you're
configuring ACL, Access Control Lists, which
| | 06:28 | I'll be doing in a future video.
| | 06:29 | So, here are some options that I
can change here within my Weblinks.
| | 06:34 | I can set where I'd like
these Weblinks to open.
| | 06:36 | So right now, they're set
to open in the same window.
| | 06:39 | And earlier, where I talked about
linking to an external Web site, I said,
| | 06:43 | pick one; open in the same window,
or open in the new window, but always
| | 06:46 | make the behavior the same.
| | 06:48 | I had open my other external link in a new
window; I'm going to do the same here,
| | 06:52 | so I'm going to say open in a new window.
| | 06:55 | Note that we also have choices of
a pop-up window, or a modal window.
| | 06:59 | A modal window is the one that opens up that has
the screen that's grayed out in the background.
| | 07:03 | So I am going to say open in a new window.
| | 07:06 | It can count the number of clicks each
particular link has gotten, and we can
| | 07:11 | have an icon, or text, or something
displaying next to each Web link.
| | 07:15 | I actually don't want anything, so I'm
going to say just the Web link, thank you!
| | 07:20 | And of course, you can
specify what icon you'd like.
| | 07:22 | I am going to go ahead and say Save.
| | 07:25 | And if I refresh my Links page, now I
have just my two links that are here.
| | 07:31 | Although, it's still showing the hits,
it's still showing the display page, and
| | 07:35 | it's still showing this filtering box,
| | 07:37 | so I'd like to change some of that.
| | 07:39 | So here under Category, it gives me
some options for changing a few things.
| | 07:44 | This particular layout here has to
do with the top level links page.
| | 07:47 | So if I go to the List Layouts, I can
make some changes here, and this applies
| | 07:52 | to my list of Web links that I have here.
| | 07:55 | So I am going to turn some things off. I
am going to turn off the Display Select,
| | 08:00 | I am going to turn off the Hits as well,
| | 08:02 | and I could describe my links; that
was one of the options that I had.
| | 08:06 | I didn't put any link descriptions, so
you can show or hide those as you wish.
| | 08:10 | I am going to go ahead and say Save.
| | 08:12 | And now when I refresh the Links
page, now I just have my links here.
| | 08:17 | My Hits are still showing
here in the right-hand column,
| | 08:20 | so let me just double-check, and
make sure that I turn those Hits off.
| | 08:24 | I am going to go back here
to the back-end of Joomla,
| | 08:27 | and I'm going to go back to List Layouts,
and indeed, Hits is set to Hide here
| | 08:31 | in this particular configuration,
| | 08:33 | but they're still showing here
on the front-end of the Web site.
| | 08:36 | So this looks like a bug
in this version of Joomla.
| | 08:39 | Hopefully, by the time you watch this
video, that bug will have been fixed.
| | 08:43 | You can always hide any of the
elements that you don't want to see on these
| | 08:46 | pages through CSS if the
interface is not quite working correctly.
| | 08:51 | So that's how we add some
more links to our Web site.
| | Collapse this transcript |
| Using the redirect component| 00:00 | Joomla's redirect component is
incredibly helpful if you happen to be
| | 00:04 | redesigning your Web site;
| | 00:05 | if you have an existing Web site that
you've built in Dreamweaver, or FrontPage,
| | 00:10 | or maybe you have it in some other
content management system, it's in
| | 00:13 | WordPress, it's in Drupal, and you want to move
it out of those systems, and put it into Joomla.
| | 00:18 | Anytime you move from one system to another,
the URLs for your Web site are going to change,
| | 00:23 | and what that means is, if somebody
goes to Google shortly after you launch
| | 00:27 | your site, and then type in a URL, or
they search for a page, Google may pull up
| | 00:31 | an old page of yours.
| | 00:33 | And that old page, when they click on
the link to visit it, they are going to
| | 00:37 | come up with a 404 error; that's
that page not found kind of error.
| | 00:42 | This particular Web site we've been
working on is a new design, so those 404
| | 00:47 | errors are less likely to
occur from that type of thing,
| | 00:50 | but it's still possible that somebody
might just be trying to type things into
| | 00:55 | the Web site, and see if they pull up
pages, or somebody may mistype a URL, or the
| | 01:01 | marketing department may come to you
and say, hey, we are going to run a
| | 01:04 | campaign, and we'd like to tie it to
this particular short URL that we're going
| | 01:08 | to run in our marketing materials.
| | 01:10 | We'd like you to set that up to direct
to an existing page on the Web site;
| | 01:14 | maybe something that has a longer URL.
| | 01:16 | So, fortunately Joomla
| | 01:18 | has a way of dealing with this
through the redirect component.
| | 01:21 | So let's say that, for example, I go here
on my About page, and I am wondering if
| | 01:27 | there is a solar page, so I say
localhost/index.php/solar, and I hit Return.
| | 01:34 | What happens is I get this 404 page.
| | 01:37 | And this is Joomla's 404 page. It
indicates that the page cannot be found, and
| | 01:43 | there may be some reasons for that.
| | 01:44 | This 404 page allows me to click on
this link to go back to the homepage, which
| | 01:49 | actually looks like a bug inside of Joomla!
| | 01:53 | When I click on this, I am actually
loading this page over and over again, so
| | 01:57 | that doesn't quite work, but it's a
lovely idea to have that link there.
| | 02:00 | What has happened, though, is that Joomla's
redirect component has indeed tracked this down.
| | 02:05 | So if we go to the back-end of Joomla,
| | 02:08 | and we go to Components, and we go to
the Redirect component, we'll notice that
| | 02:13 | I've actually got two URLs here
that have turned up as 404 errors.
| | 02:19 | One is a delete me page. I used this
earlier in some videos, and when I refresh
| | 02:24 | the page after I had deleted that page
from the back-end of Joomla, I wound up
| | 02:29 | getting a 404 error. The
Redirect component recorded that for me.
| | 02:33 | Also, this thing that I
just typed in, index.php/solar,
| | 02:35 | I have generated a 404 error
for that as well. So Joomla
| | 02:40 | is tracking these for me, and
that's very nice of Joomla.
| | 02:44 | But it's just telling me
what pages have not been found.
| | 02:47 | What I can do, though, is I can say, when
somebody types in the solar, just like
| | 02:52 | that, I'd like to send them to the solar blog.
| | 02:54 | So something I can do is
click on this particular link.
| | 02:58 | So what happens is when it says the
source URL is this, what I just typed in in
| | 03:04 | my Web browser, what is the destination URL?
| | 03:07 | Well, my destination URL is
going to be the solar blog.
| | 03:12 | So I am just going to copy this URL
from here, Ctrl+C or Command+C to copy that,
| | 03:17 | and Ctrl+V or Command+V to paste that in.
| | 03:19 | It could be that somebody wanted this
URL solar on the end, maybe that was a
| | 03:24 | marketing campaign, so we can say New
marketing brochure for solar panels.
| | 03:32 | The comment isn't required, but it's nice
to remember why it was that you created
| | 03:36 | this URL in the first place.
| | 03:38 | And then, of course, the Status of this
particular redirect is either Disabled, or
| | 03:42 | it's Enabled, Archived, or Trashed, so I
am going to say Enable it, and then I am
| | 03:48 | going to say Save & Close.
| | 03:49 | So now what will happen is, the next
time somebody happens to go to this
| | 03:53 | solar page, local host/index.php/solar,
they will be automatically redirected
| | 04:01 | to the solar blog page.
| | 04:03 | So I can create these redirect pages
proactively. In other words, marketing comes
| | 04:09 | to me and says, make this redirect and
point it to this page on the Web site. Or I
| | 04:13 | can do these reactively, so as
people come to my site, and 404 pages are
| | 04:18 | generated, I can respond to that by
directing those links to a page that does
| | 04:25 | exist on the Web site.
| | Collapse this transcript |
|
|
10. Using TemplatesChanging the look of the site using templates| 00:00 | Templates define the way a Web site looks.
| | 00:03 | These are called themes inside of
WordPress, and Drupal, but Joomla
| | 00:06 | calls them templates. Joomla
| | 00:09 | comes with several different templates,
both for the front-end the Web site, and the
| | 00:13 | back-end of the Web site.
| | 00:14 | There are many more templates available
for free download, or for paid download,
| | 00:19 | or of course, you can always code your own.
| | 00:21 | Let's take a quick peek at our
Template Manager, and that can be found under
| | 00:25 | Extensions > Template Manager.
| | 00:27 | So what we have listed right here in
the Template Manager is a combination of
| | 00:33 | two kinds of styles.
| | 00:35 | We have some Administrator side
styles, and we have some front-end styles.
| | 00:40 | And you know the difference, because
here under the Location column, you'll see
| | 00:44 | styles for Administrator, and
styles for the front-end of the Web Site.
| | 00:48 | By default, we have one style that's
chosen as the front-end default, and we have
| | 00:54 | one style that's chosen
as the back-end default.
| | 00:56 | So which ones are those?
| | 00:58 | These are the ones with the stars, so
protostar is our current template on the
| | 01:02 | front-end of the Web site, and isis is our
template on the back-end of the Web site.
| | 01:07 | In the coming videos, I'll show you how
to change these template styles, and how
| | 01:11 | to use the Template Manager to
modify your HTML, and your CSS.
| | 01:15 | It is possible to have multiple styles
assigned to your Web site, and we'll go
| | 01:19 | through all of that.
| | 01:20 | However, I will not be
covering how to code your own Joomla
| | 01:23 | template in the Joomla! 3
| | 01:25 | Essential Training course.
| | 01:28 | If you do want to know how to create
your own custom template from scratch, be
| | 01:32 | sure to watch my Joomla! 3
| | 01:33 | Responsive Design course, and I'll walk
you through the process of creating a Joomla
| | 01:38 | template using the bootstrap
framework to make a responsive custom template
| | 01:43 | for Joomla.
| | Collapse this transcript |
| Setting the default template style and assigning template styles| 00:00 | So finally the moment
you have all been waiting for.
| | 00:02 | To this point in time, we have built our
Web site based on the protostar template,
| | 00:08 | exactly as it is out of the box.
| | 00:10 | Now what I would like to do is show you
a little bit about how we can go about
| | 00:15 | changing the way this Web site looks,
using our template styles inside of Joomla.
| | 00:18 | So, now I am going to happen to the
back-end of the Web site, and I am going to go
| | 00:23 | to Extensions > Template Manager.
| | 00:24 | As you know, we have two administrator
templates, and we have two front-end
| | 00:29 | templates, or Web site templates.
| | 00:31 | By Default, we have protostar as our
template, and it's actually assigned to all
| | 00:35 | of the pages on the Web site.
| | 00:37 | How do I know that?
| | 00:38 | I see that something is Default here,
using the star, and then in the
| | 00:42 | Assigned column, nothing is selected.
| | 00:45 | If I wanted to, I could take the Beez3
template, and assign it to part of the
| | 00:49 | Web site, so let's go ahead and do that.
| | 00:52 | If I clicked on Beez3, and I clicked on
the Menu assignment, I could say let's
| | 00:57 | put Beez3 on the
Products portion of the Web site.
| | 01:00 | So I will check off a bunch of pages on my
list here, and I will go ahead and say Save.
| | 01:06 | When I refresh the front-end of the
Web site from the Home page, I get my
| | 01:11 | different picture for my random image,
but other than that, nothing changes on
| | 01:14 | this part of the Web site.
| | 01:15 | Nothing has changed on the About part
of the Web site either, but if I go to
| | 01:20 | Products, I get a completely
different looking template.
| | 01:22 | This is the Beez3 template, and as you
can see, it has some formatting issues. It
| | 01:28 | doesn't come with dropdown menus,
so it's showing the secondary navigation
| | 01:31 | for Products right here on top of the
main banner for this particular design.
| | 01:36 | And if the design looks familiar, this is
the same design that shipped with Joomla! 2.5.
| | 01:40 | This was the default type of
template. There it was called Beez2, and
| | 01:44 | now it's called Beez3.
| | 01:45 | You can see that we can navigate around
our different pages, and you see that we
| | 01:50 | have a somewhat different looking template.
| | 01:52 | But the important thing that this
brings to mind is that just because you have
| | 01:57 | your modules and your layout all perfected
for one template, when you switch to
| | 02:02 | another, it has different modules,
different module positions, and things are
| | 02:07 | organized differently.
| | 02:08 | So you may wind up with some of these
odd little formatting issues that you'll
| | 02:12 | wind up having to address by taking
your modules, and assigning them to new
| | 02:15 | positions, or correct positions, and
maybe you'll have to make some other tweaks
| | 02:20 | to the template as well.
| | 02:21 | As you can see here,
my banner says Joomla!
| | 02:24 | Open Source Content Management, and
KinetECO doesn't appear anywhere on
| | 02:26 | this particular page.
| | 02:27 | Now, this is kind of a fashion no;
you're probably not going to have this
| | 02:32 | radically different type of layout
between one part of the Web site and
| | 02:36 | another, but you may want to have some
minor variations between, say, your Home
| | 02:40 | page, and your inside pages, or you
might style things slightly differently.
| | 02:45 | Some people like to use a different
color for each section of the Web site;
| | 02:48 | that kind of thing.
| | 02:49 | All right, so I am going to go
hop back into the back-end of Joomla.
| | 02:53 | I am just going to say Save & Close,
so you can see that when another template
| | 02:57 | style is assigned, you have a green
checkmark here that indicates that it is
| | 03:01 | assigned to some other part of the
Web site. But I really don't want Beez3 to
| | 03:05 | stay as the template when it's in use
on the Product pages, so I am going to
| | 03:09 | click on this again.
| | 03:10 | I am going to go back to my Menu
assignment, and I'm going to uncheck all of
| | 03:15 | these items, and just say Save & Close.
And now you see again that protostar is
| | 03:19 | the only template in use on the site,
that it's the Default, and when I
| | 03:23 | refresh my Products portion of the Web site here,
it has returned to my design with protostar.
| | 03:30 | So that's the way you can work with
styles and so forth on your Web site, but
| | 03:34 | let's see what we can do about
customizing the protostar template.
| | 03:38 | All of these templates, or at least
many of them, have the ability to be
| | 03:43 | customized through another screen.
| | 03:44 | If I click on protostar as my Default
template, I have the ability to assign
| | 03:49 | names and so forth here, but under the Options
tab, some templates have this, and some don't.
| | 03:55 | I am able to assign, in the case of
protostar, a few additional fonts, and a few
| | 04:01 | additional colors, as well
as a logo for the Web site.
| | 04:05 | So this is a very nice interface
for adding these particular items.
| | 04:10 | What shows up under the Options tab
depends completely on what template
| | 04:14 | you happen to be using.
| | 04:15 | Some templates don't even have an
Options tab, because there's no option for the
| | 04:19 | template, whereas other templates may
have screens and screens full of things
| | 04:24 | that you can customize where
that template is concerned.
| | 04:27 | I'll go through how you make an
options tab like this, and customize some of
| | 04:31 | these values in my Joomla! 3:
Responsive Templates course.
| | 04:35 | But it's kind of beyond the
scope of Essential Training.
| | 04:38 | So what I would like to do, first of
all, is I would like to assign some colors
| | 04:43 | for the Template Colour
and the Background Colour.
| | 04:45 | You're probably wondering where these
are applied, and so the Template Colour is
| | 04:50 | this little blue line that's at the top
of the page, as well as the blue that's
| | 04:54 | in use for these links, the background
colors on the buttons, it's in use in a
| | 04:59 | number of different places.
| | 05:01 | So what I am going to do first is
change that color, and right here under
| | 05:05 | Template color -- and this is in your
Exercise Files; there is a little text file
| | 05:10 | that will tell you what colors I am using --
| | 05:12 | I am going to copy this first color
here, Ctrl+C or Command+C to Copy, Ctrl+V
| | 05:17 | or Command+V to Paste.
| | 05:19 | If you notice,
this is also new in Joomla! 3,
| | 05:21 | we have this lovely little color
picker pop up here if you would want to pick
| | 05:25 | something else just by using
this interface for picking a color.
| | 05:28 | And if I apply this first color to
the site, and say Save, and refresh the
| | 05:34 | front-end of the Web site, you will see that
color has changed. It's darkened up a little bit.
| | 05:39 | And then the other color that I
can apply is the Background color.
| | 05:43 | Right now it's a very pale gray.
| | 05:44 | What I am going to change it to is this
color right here; Ctrl+C or Command+C to
| | 05:50 | Copy, Ctrl+V or Command+V to Paste, and I
am going to say Save, and when I refresh
| | 05:56 | the front-end into the Web site, now I've
got a brighter orange background color.
| | 06:01 | These two colors that I have picked
are part of the branding that goes with
| | 06:05 | KinetECO, and in terms of their logo and so
forth, this is the style guide that the
| | 06:10 | designer gave me, so I've
picked some colors from that.
| | 06:13 | The last thing I would like
to do is change the banner.
| | 06:17 | So, right now we just have
the words KinetECO, Inc.
| | 06:19 | at the top of the screen, which is fine,
but I have this great banner that the
| | 06:23 | graphic designer has put together for me,
and I would like to show that on the Web site.
| | 06:28 | So here I can go ahead and upload that.
| | 06:30 | Going to the Options tab, here under
Logo, I can click the Select button, and I
| | 06:37 | am going to upload a picture here,
so I am going to hit my Browse button.
| | 06:41 | I am going to go into my Exercise
Files in Chapter 10, folder number 2, and
| | 06:46 | here is the header.
| | 06:47 | I am going to go ahead and say
Open, and then say Start Upload.
| | 06:51 | And this is will upload my banner
right into the media manager, and I can
| | 06:55 | scroll down to find it.
| | 06:56 | It's called Kineteco_header.jpg, and I
am going to go ahead and choose that, and
| | 07:01 | say Insert, and then I am going to say Save.
| | 07:07 | When I refresh the front-end of the
Web site, there. Now it's finally looking
| | 07:12 | like a real Web site,
| | 07:13 | now that I have a really pretty graphic
designed header right here at the top of
| | 07:17 | the page. It's quite lovely, it blends
all the colors together, and I can flip
| | 07:22 | through pages here on the Web site.
You can see that finally it's looking
| | 07:26 | actually kind of professional, and
not quite as low-key as it was before.
| | 07:32 | The last things you can customize here
inside of the protostar template are the
| | 07:37 | Google Font for Headings, you can turn
that on or off, or you can type in one of
| | 07:41 | the Google Font Names.
| | 07:42 | If you go to the Google Fonts Web site,
you can choose some of those options.
| | 07:48 | The last thing I am going to show you is
the Fluid Layout option here at the bottom.
| | 07:53 | Right now inside of Joomla,
| | 07:55 | I have talked to you about the
responsive nature of these templates before.
| | 07:59 | If I make this page a bit smaller, just
by dragging in the corner of my browser,
| | 08:04 | you'll see that this design
snaps to different widths.
| | 08:09 | So it snaps, and looks like the header
is not quite resizing here inside of
| | 08:13 | Firefox, and if I narrow this up a
little bit more, and then as I continue to
| | 08:20 | narrow it, you will see that I have my
navigation, I have my header up here at
| | 08:24 | the top of the page.
| | 08:25 | But I can change those breakpoints. So,
right now it just sort of snaps in a few places.
| | 08:31 | By changing this to the Fluid Layout,
and saying Save, and refreshing this
| | 08:38 | page, this will actually push the
design all the way out of the edges of the
| | 08:43 | browser window. We will probably
need it to change the treatment of this
| | 08:46 | header if we use this type of method.
And as I make the page smaller here, it
| | 08:52 | collapses very, very nicely.
| | 08:54 | This is using Bootstrap's fluid grid, as
opposed to its default grid; that's where
| | 08:59 | the changes are coming from in
regards to this particular template.
| | 09:03 | I am going leave this set to you the,
quote, Static Grid; it's kind of misleading
| | 09:07 | name, because both designs are responsive;
it's just a question of whether it's
| | 09:12 | continuously resizing over different
screen widths, or whether it has got some
| | 09:18 | more distinct breakpoints
as part of that design.
| | 09:21 | So I am going to go ahead and say Save
& Close, and I am going to refresh the
| | 09:26 | front-end of the Web site. So now we
have a very cool looking Web site, and
| | 09:31 | we've made some big improvements
using the interface for improving the
| | 09:36 | protostar template.
| | Collapse this transcript |
| Creating new template styles| 00:00 | In the previous video, I showed you how
we could take the protostar template and
| | 00:05 | its style, and we could customize it,
and we took that one copy of the style,
| | 00:10 | and we customized it, and it's
applied to all of the pages of the Web site.
| | 00:15 | But it's possible to take that same
style, and make a copy of it, and then make
| | 00:20 | tweaks to the copy of it, so that you can
have a slightly different style on some
| | 00:24 | pages of the Web site.
| | 00:25 | So I'm going to go ahead and
show you how to do that now.
| | 00:28 | It's a nice way to make little variations
in your templates. Again, you might
| | 00:32 | have something different for the
homepage, something different for the inside
| | 00:35 | pages of the Web site, so I'll go
ahead and show you how to do that now.
| | 00:39 | Here in the back-end of Joomla,
| | 00:40 | I'm going to start by going
to Extensions > Template Manager.
| | 00:44 | And right now we have just the
copy of the protostar template.
| | 00:47 | But if we put a checkmark next to this,
and I say Duplicate up here on the top, I
| | 00:53 | can make a copy of that template.
| | 00:55 | So then I could click on this, and
rather than calling it protostar-Default (2),
| | 01:00 | maybe I'll call it protostar-Home, and then
I can make a modification just for the homepage.
| | 01:08 | Let's say, for example, that for the
homepage of the Web site, I would like that to
| | 01:14 | have a different background color; maybe
the same template color I'd like to
| | 01:18 | have as the background color for the
Web page, so I've got that in both places.
| | 01:22 | I only want this style to apply to
the Home page of the Web site, so I'll go
| | 01:27 | ahead and check off the Home page of
the Web site, and then I'll say Save.
| | 01:31 | So now what will happen is when I
come to the homepage of the Web site, and I
| | 01:35 | refresh, this particular page has one
color for the background of the Web page,
| | 01:42 | and when I go to other parts of the
Web site, it's got the original orange
| | 01:47 | background color that I chose. But the
Home page now has a different color for
| | 01:51 | the background of the homepage.
| | 01:53 | I could have changed the header graphic,
maybe I would want a really big header
| | 01:57 | graphic on the homepage, and a much
smaller, or maybe a narrower header graphic
| | 02:01 | on the inside pages.
| | 02:03 | That would be something that is very
typical, people will often do; varying a
| | 02:07 | homepage, versus an inside page.
| | 02:09 | And you could certainly do that with
the interface that protostar comes with.
| | 02:13 | So the nice thing about Joomla
| | 02:14 | template styles is that they allow
you to take the same template, make minor
| | 02:19 | tweaks to the way it appears, or text
that appears on the pages, and you can
| | 02:24 | display your page in a number of
different ways, all closely related, all still
| | 02:30 | controlled by the same style sheets, and
the same HTML files, but you can still
| | 02:35 | make minor variations in
the way the Web site appears.
| | Collapse this transcript |
| Adjusting template masters with the HTML and CSS editors| 00:00 | So far I've concentrated on Joomla
| | 00:02 | template styles associated with the
Web site, and the ability to assign template
| | 00:08 | styles to different pages, but there
is also the template master side of our
| | 00:13 | templates, and the template masters are
where you can control the HTML and the
| | 00:18 | CCS that makes up your particular template.
| | 00:21 | So I'm going to show a
little bit about that now.
| | 00:24 | If we go to Extensions > Template Manager,
and we're going to switch over to this
| | 00:29 | Templates tab here, and you can get to
that through the dropdowns, or this link
| | 00:33 | on the left side of the screen,
this will show you all of the currently
| | 00:37 | installed templates for
this version of Joomla,
| | 00:39 | and these are just some
default templates right now.
| | 00:43 | If you scroll on down to the bottom
of the page here, and you go to the
| | 00:46 | Protostar template, you can click on
the Protostar Details and Files link here,
| | 00:53 | this will take us to a page where we
can take a look at our Template Master
| | 00:57 | Files, and our Stylesheets.
| | 00:59 | So we have three choices here
for our Template Master Files.
| | 01:03 | We have the main page template;
that's pretty much the page that displays
| | 01:07 | everywhere throughout the Web site.
| | 01:09 | We have an error page template; that's
basically the 404 error page, and we have
| | 01:15 | the printer friendly view template as well.
| | 01:17 | So you could click on any of
these, and then edit the HTML.
| | 01:20 | I'm going to click on the main page
template, and just show you that what we have
| | 01:25 | here is a mix of some PHP, and as well
as some HTML, and if we scroll on down,
| | 01:31 | there we go; that's the start of the
HTML there, and you can go through here, and
| | 01:36 | you can edit anything you'd like
inside of this HTML. You can make whatever
| | 01:39 | changes you want to make, and so forth.
| | 01:42 | You'll see that there are a number of
places where PHP is used. Anywhere you see
| | 01:47 | this angle bracket, question mark,
| | 01:49 | PHP, and then it's closed
with a question mark,
| | 01:52 | angle bracket, that is PHP code.
| | 01:56 | Some of it is really more on the Joomla
| | 01:58 | side of things than strictly PHP,
but this is code that Joomla
| | 02:02 | uses to get certain bits and pieces of
information from the database, or from
| | 02:07 | certain variables that might
be defined within the template.
| | 02:09 | I'll go through what a lot of
this code means in the Joomla! 3
| | 02:13 | Responsive Design course, but
just know that that is what is here.
| | 02:17 | If you do decide to make changes to your
template, I strongly recommend that you
| | 02:25 | back up whatever is here first.
| | 02:26 | Even if you just highlight all of the
source code, copy it, put it in a text file
| | 02:31 | somewhere, and just have it.
| | 02:32 | If you go in and then edit, and you
make a mistake, and goodness knows, you
| | 02:37 | don't know what you did, you can
always roll back to whatever the original
| | 02:40 | state of this code was.
| | 02:42 | Very, very important to have these backups;
otherwise you can really mess up your Joomla
| | 02:46 | Web site very easily by
messing with the template masters.
| | 02:50 | I'll show you the CSS as well.
| | 02:52 | This is template.css, a single template
style file, and there are a lot of styles
| | 02:59 | here inside of this file. It's quite long.
| | 03:02 | This particular file was generated
as a fusion of some custom styles that
| | 03:07 | were written for this template, as well as
all of the Bootstrap styles that go with it.
| | 03:12 | These were put together, and
outputted in a single template file.
| | 03:15 | So you can edit this file to change the CSS,
and you can change the way the Web site looks.
| | 03:23 | However, as I said before, make sure
you have backups before you go through and
| | 03:27 | do all of these kinds of things,
because you just never know when you're going
| | 03:31 | to make a mistake. You think you know
what you're doing, and you really don't, and
| | 03:35 | you can definitely really kind and
make your Web site look rather bad, so make
| | 03:40 | sure you have those backups.
| | 03:41 | So one of the best ways that you can
back everything up and make sure you have
| | 03:47 | a nice clean backup before you go and
make changes to this is to click the Copy
| | 03:52 | button up here on the top, and you can
just give this a new template name; make
| | 03:56 | sure it doesn't have any underscores or
spaces. So I'm just going to call this
| | 04:00 | jenprotostar, and say Copy Template, and
this will make a new copy of this template.
| | 04:09 | If I say Close, right here inside
of the list of files, I now have my
| | 04:14 | jenprotostar, in addition to protostar,
and now I can go into jenprotostar, I can
| | 04:20 | assign it as the default template for
my Web site, I could make whatever changes
| | 04:24 | I want to make to that copy of the template.
| | 04:27 | And what's nice about that is
protostar will stay right here. All of the
| | 04:33 | original settings, except for the
few little styles that we have changed
| | 04:36 | through the style interface, but the original
HTML, and the original CSS are all secured here.
| | 04:42 | That original HTML and CSS
may change as Joomla
| | 04:46 | is upgraded, so if you work with that
original copy of the protostar template,
| | 04:52 | you may wind up having some
changes over written as Joomla
| | 04:55 | is upgraded in future versions. So I
strongly recommend you do this process of
| | 04:59 | copying that template
and working on the copy.
| | Collapse this transcript |
| Adding an editor.css style sheet for access to certain classes in TinyMCE| 00:00 | Back several videos ago, we added some
styles to some of the images that were
| | 00:06 | located inside of our Joomla
| | 00:10 | site, and they were image-circle,
image-polaroid, and image-rounded, and those
| | 00:16 | three styles come with
the Bootstrap style sheet.
| | 00:19 | They didn't show up inside of TinyMCE, the
editor that we are using inside of Joomla,
| | 00:24 | and the reason why is TinyMCE loads a
style sheet that's located elsewhere in Joomla's
| | 00:30 | file structure if there isn't an
editor.css style sheet available within the
| | 00:36 | template that we are working with.
| | 00:38 | So what I'd like to show you now is
how you can pull some of those styles, and
| | 00:43 | put them into a style sheet, and you
will really improve TinyMCE's interface if
| | 00:49 | you follow this process.
| | 00:51 | just to be a little bit clearer
about what I'm saying here, if we go to
| | 00:56 | Content > Article Manager, and I go edit
the About page, this image over here, I'd
| | 01:01 | just like to apply one of those
classes, image-circle, image-polaroid, or
| | 01:05 | image-rounded to it.
| | 01:07 | Wouldn't it be nice if that was
available here on the Styles menu?
| | 01:10 | So what I'm going to show you how to do
is how to add those particular styles to
| | 01:15 | this Styles menu, rather than taking
the route that we had before, where we
| | 01:19 | selected the image, we went to the tree
icon, and we had to know what the style
| | 01:23 | was, and we had to type it in.
| | 01:25 | So I am going to show you how this works.
| | 01:27 | What we are going to have to do is
go up to Joomla's file structure.
| | 01:32 | Since we are working locally here on
the computer, I'm going to have to go to
| | 01:36 | my Windows Explorer.
| | 01:38 | Mac people, just open up the Finder,
and we're going to go to the ht docs
| | 01:43 | folder inside of MAMP.
| | 01:44 | PC people, you're going to open up your
My Computer folder, we are going to go
| | 01:49 | to the wamp folder,
and go to the www folder.
| | 01:51 | So I'll show you how to do that.
| | 01:53 | We are going to go to Computer here, going to
the C drive, going to wamp, and going to www.
| | 02:00 | So this is Joomla's file structure.
| | 02:02 | Mac people, this is what you should see
inside of your ht docs folder; the same
| | 02:06 | kind of folder structure.
| | 02:07 | If you go into the templates folder,
you will see that I have now four of these
| | 02:13 | items here inside of this folder,
and that is because we have beez3, and
| | 02:18 | protostar; those are the two
templates that came installed with Joomla.
| | 02:21 | Here's jenprotostar; that's the copy of
the template that I made in a previous
| | 02:26 | video, and then last of all, we have
something here called system, and system
| | 02:30 | contains some style sheets, and some
functionality that is called by other
| | 02:36 | templates inside of Joomla.
| | 02:38 | If we hop into the back-end of Joomla
| | 02:40 | here, and if I go to Extensions > Plug-in
Manager, and I scroll on down here to the
| | 02:47 | TinyMCE plug-in, and I switch over to
the Basic Options, and scroll on down the
| | 02:53 | page here a bit, there is an option
here for Template CSS classes, and if you
| | 02:59 | roll your mouse over it, it will tell
you that, by default, TinyMCE is looking
| | 03:03 | for an editor.css file. If it can't find
one in the default template CSS folder,
| | 03:09 | it loads editor.css file
from the system template.
| | 03:12 | So now we can translate what that means.
| | 03:16 | Here inside of my file structure, we
look for an editor.css file inside of
| | 03:23 | protostar; that's my default template
for this Web site, and that's the default
| | 03:26 | template that note is referring to.
| | 03:28 | So if I look inside of a protostar, and
I look inside of the css folder, I only
| | 03:33 | see one style sheet: template.
| | 03:35 | So what that means is, TinyMCE is looking
for editor.css in the system template.
| | 03:42 | So I am going to go back to my main
templates folder, and I am going to look
| | 03:47 | inside of the system folder, inside of
css; here is that editor stylesheet.
| | 03:53 | So I am going to make a copy of editor.css.
All I need to do is right-click on
| | 03:57 | this, and pick Copy, or Ctrl+C or
Command+C will also copy this.
| | 04:01 | Then I am going to go back to my templates
folder, to my protostar folder, to my
| | 04:06 | css folder, and I can right-click, and
say Paste, or Ctrl+V or Command+V will
| | 04:14 | also paste that file into place.
| | 04:17 | So now I have an editor.css file. This
is what TinyMCE will be looking at when
| | 04:24 | it is styling text just inside of
Joomla, just inside of the editor. This is
| | 04:30 | not styling any text that's showing on
the public facing side of the Web site;
| | 04:34 | this is just for styling text in the editor.
| | 04:36 | So now what I am going to do is I'm
going to edit this CSS file using Notepad.
| | 04:43 | If you have Dreamweaver available, or
any kind of text editor, like TextEdit, or
| | 04:48 | BBEdit, you are more than welcome to
open up this file using one of those. So I
| | 04:53 | am going to just edit this; this
will open it up for me in Notepad.
| | 04:57 | And this is showing me some of the
styles that I have here inside of this
| | 05:02 | particular editor document. I'm not
concerned about what's there, so the fact
| | 05:07 | that it's kind of illegible
doesn't really bother me.
| | 05:10 | What I'm going to do is put a few
returns at the bottom of this document, and
| | 05:14 | then I am going to open up, in my
Exercise Files, I've given you a document
| | 05:18 | called additional styles.
| | 05:21 | These are styles that are pulled directly
from the Bootstraps style sheet, and
| | 05:25 | this is how the styling works for
rounded images, ones with the rounded corners,
| | 05:31 | the Polaroid, and the circle-based images.
| | 05:35 | What I am going to do is just highlight
all of that, and say Edit > Copy, and then I
| | 05:40 | am going to paste this into
the editor; say Edit > Paste.
| | 05:43 | So now I have those three
classes that are located here.
| | 05:47 | Then I am just going to say File >
Save. And now when I am here inside of
| | 05:54 | the back-end of Joomla,
| | 05:55 | I am going to get out of this TinyMCE
window that I am in, just by hitting Close.
| | 06:00 | I am going to go to Content > Article
Manager. I am going to go into my About
| | 06:05 | article, which has a nice image. I can
select that image over here. Notice
| | 06:10 | also, that image is already styled here
inside of TinyMCE. That's because this
| | 06:15 | image has assigned the class of image-circle.
Before, TinyMCE didn't know how to
| | 06:20 | style that image. Now that the style is
defined within editor.css, TinyMCE does
| | 06:26 | indeed know how to style
that image, and is styling it.
| | 06:29 | And what's more, over here in the dropdown
for Styles, we have three additional
| | 06:34 | styles: image-rounded, image-polaroid,
and image-circle, so I could change the
| | 06:39 | styling of this image if I wanted to,
just by selecting any of the other options
| | 06:43 | that are here, but I really do
want to leave it with image-circle.
| | 06:49 | So image-circle; there we go.
| | 06:52 | I think that image looks
particularly good in a circle.
| | 06:56 | So I can go ahead and save those
changes, or I can just say Close, because I
| | 07:00 | didn't really change anything here,
and that is how you can lift some of the
| | 07:05 | styles that you would like your clients
maybe to access. Those image styles are
| | 07:10 | a great example of this. And make sure
that they show up inside of the editing
| | 07:15 | environment in TinyMCE, and that way
your clients can apply those styles to the
| | 07:19 | images very easily, and they don't have
to remember what those classes are named.
| | Collapse this transcript |
| Introducing the Hathor admin template| 00:00 | To this point, we've done all of our
work here in the back-end of Joomla
| | 00:03 | with the default template
that Joomla ships with.
| | 00:06 | This is the isis template in Joomla! 3,
| | 00:09 | and this is the sort of the blue on the top,
and the white in the layouts that you see here.
| | 00:15 | But just like all Joomla
| | 00:16 | Web sites, you can change the template on
the front-end. You can also change the
| | 00:21 | template on the Administrator
side of things here in the back-end.
| | 00:25 | And you can go to third-party providers,
and you can download different admin
| | 00:29 | templates for Joomla! 3, but Joomla! 3
| | 00:31 | itself also ships with two admin templates:
| | 00:35 | isis, this one by default, and
there is a second one called Hathor.
| | 00:39 | You may have heard of Hathor before, because it
was available also in Joomla! 1.6, 1.7, and 2.5.
| | 00:47 | So I would like to give you a
little tour of the Hathor template now.
| | 00:50 | If we go to Extensions > Template Manager,
right now we have available to us two
| | 00:56 | admin templates:
that's isis, and Hathor here.
| | 00:59 | What I'm going to do is I'm just going
to click on the star here for Hathor, and
| | 01:04 | set this as the default template.
| | 01:06 | This completely changes
the look of the back-end here.
| | 01:09 | So why does Joomla
| | 01:11 | have two admin templates?
| | 01:12 | Well, this particular template, Hathor,
was built by my good friend Andy Tarr, who
| | 01:18 | was a Google Summer of Code intern
and the summer of 2009, and she wound up
| | 01:24 | working on Hathor as her project, and
what she wanted to create was a fully
| | 01:30 | accessible administrator template.
| | 01:33 | And this template is WCAG level 2
compliant template, meaning that it's great
| | 01:40 | for people who have various kinds of
disabilities, both visual disabilities, and
| | 01:45 | motor disabilities. You can navigate this
entire admin template using a keyboard only.
| | 01:50 | So as you see, it looks fairly different,
but you still have many of the things
| | 01:56 | you have come to know and love.
| | 01:57 | Here is your control panel.
| | 01:58 | You still have dropdowns here, and the
location of all of the items that we've
| | 02:04 | been working with here in Joomla
| | 02:05 | are all still in the same places.
| | 02:07 | If you take a look at something like
the Article Manager, which we've looked at
| | 02:10 | lot, this stretches all the way across
the screen, and actually this display is
| | 02:14 | much more similar to
what we saw in Joomla! 2.5
| | 02:17 | than it is to the 3.0 layouts.
| | 02:21 | We have our Filters that were on the
left side of the screen in the isis
| | 02:25 | template are going across the top here
in the Hathor template, and here are the
| | 02:30 | buttons for creating new items.
| | 02:32 | There's no big green New button.
The New button is still here,
| | 02:35 | it's still on the left, but it
looks very much like the other buttons.
| | 02:39 | There are a few ways you can
customize the Hathor template.
| | 02:43 | Again, these customizations are targeted to
people who have various kinds of disabilities.
| | 02:48 | So if I click on the style for the
Hathor template, I can notably change things,
| | 02:52 | like the color for this template.
| | 02:54 | Some people with various kinds of
visual disabilities see better with a dark
| | 02:58 | background with light text on top of it.
| | 03:00 | So the high contrast template, if I just
choose that, and say Save, will give you
| | 03:06 | that bright contrast that some people
with various types of disabilities require
| | 03:10 | in order to be able to
read the screen more easily.
| | 03:13 | There's also some other color combinations here.
| | 03:15 | There's a brown that's available, and
there is also a blue that's available,
| | 03:21 | and these are tailored to
various types of disabilities.
| | 03:24 | You can make all of the text bold; that
may be helpful, again, for some types of
| | 03:28 | disabilities, or you can leave it
all just at normal font weight as well.
| | 03:34 | You also the ability to change the Site
name and the logo if you wish using that
| | 03:38 | particular interface.
| | 03:40 | So that's a real quick overview
of what Hathor is, and why it's here.
| | 03:44 | And the last thing that I'd like to tell
you is, Hathor might be useful if you're
| | 03:49 | working with a team of people
who are working on a Joomla
| | 03:52 | Web site, and maybe somebody needs the Hathor
template in order to get around in the back-end.
| | 03:56 | But you don't have to require
everyone to use the Hathor template.
| | 04:01 | So what you can do is you can assign
administrator templates on a user by user
| | 04:06 | basis, which is incredibly helpful.
| | 04:09 | I'm speaking specifically here to the
case of disabilities, but even if you want
| | 04:14 | to work with a certain admin template
yourself as a site developer, and you want
| | 04:18 | to have a different template available
for your clients, that's completely
| | 04:22 | possible inside of Joomla! 3.
| | 04:23 | So let me just show you that really quickly.
| | 04:26 | I'm going to hit Close here to
get out of that particular screen.
| | 04:30 | I'm going to reset isis as my default
template by clicking on the star here.
| | 04:35 | Under Users, under User Manager, and if
you click on Super User, which is our only
| | 04:40 | user at this point in time, we do
have the ability to assign administrator
| | 04:45 | templates here within
these particular settings.
| | 04:48 | So under the Basic Settings tab, here
with the back-end template style, I can
| | 04:54 | override the default
for the entire Web site.
| | 04:57 | So by default, as I make new users,
everybody is using the isis template, but I
| | 05:00 | could make exceptions for certain
users, and through this interface, if I set
| | 05:05 | Hathor, then just for this particular
login, they would see Hathor, while everybody
| | 05:10 | else is seeing the isis template.
| | 05:12 | So that's a very helpful
addition to Joomla! 3,
| | 05:15 | and it means that everybody can work
with the administrator template that they
| | 05:20 | are most comfortable,
and most productive using.
| | Collapse this transcript |
| Customizing the Isis admin template| 00:00 | If you just watched my video on Hathor,
you saw that there were a few little
| | 00:04 | customizations that you could make
to the Hathor template, and maybe you
| | 00:07 | were feeling jealous.
| | 00:08 | You want to use isis, but you'd like
to customize the look of isis as well.
| | 00:13 | What kind of customizations
are available for that?
| | 00:15 | Well, that's what I am going to cover now.
| | 00:18 | If we go to Extensions, and we go to
our Template Manager, let's take a look at
| | 00:23 | the isis template by clicking
on it here, inside of our Styles.
| | 00:27 | And the first screen just gives us the
style name, and the template that it's
| | 00:31 | associated with, but under Options, we
do have some things that we can change
| | 00:35 | here, which is incredibly helpful.
| | 00:38 | So first of all, one of the things
that we can change is the color of the
| | 00:42 | navigation bar,
or the color of the header.
| | 00:44 | So we can change the colors that are
associated with these two bars up here at
| | 00:49 | the top of the screen.
| | 00:50 | By default, these are
various shades of blue;
| | 00:52 | you could make them shades of red,
shades of green, whatever you want to do.
| | 00:56 | The logo is available here as well.
| | 00:58 | By default, you see a Joomla! logo.
| | 01:00 | It brands this back-end
as Joomla! running here.
| | 01:04 | But in many cases, there are Web site
development agencies that might wish to
| | 01:09 | brand their copy of
Joomla as their own.
| | 01:13 | So perhaps they want to use their own
company colors, and they want to use their
| | 01:17 | own company logo in the back-end here,
so that this does not say that this is
| | 01:21 | Joomla!, it looks more like a
custom content management system.
| | 01:24 | And that's possible; we can change
the logo assignment here by changing
| | 01:29 | this particular item.
| | 01:30 | The next item about collapsing
the Administrator Menu solves this
| | 01:34 | particular problem.
| | 01:35 | Sometimes when I am working at home
on my super large monitor, I have one
| | 01:41 | browser window open, and maybe I've made
it a little bit smaller, and then on the
| | 01:45 | other side of the screen, I've got a Word
document open, or my e-mail, or something,
| | 01:50 | and I want to be going
back and forth between those.
| | 01:52 | When I minimize the size of my
browser by pulling in the corner here, what
| | 01:57 | happens, of course, in isis that's a
feature, not a bug, is that at some point
| | 02:02 | right here, the menu collapses, and
now I don't have the ability to roll my
| | 02:10 | mouse over the menu options up here on
the top anymore. Now I have to click on
| | 02:15 | this icon to get to these options
here underneath, and then click on each of
| | 02:19 | these to go even further.
| | 02:21 | I don't have the ability to click on
these right now, because I have this
| | 02:24 | open down here on the bottom, and the menu
is normally grayed out at this point in time.
| | 02:29 | If you don't want this change to happen;
if you would like to have the menu to
| | 02:34 | stay constant here across the top,
what you're going to need to do is, down
| | 02:41 | here where it says Collapse Administrator Menu,
right now that's set to Yes, change that to No,
| | 02:47 | and if I just say Save, what will happen
now is, as my window is wide, I have my
| | 02:53 | menu, but as I make my browser window
smaller, the menu does not collapse.
| | 02:58 | I still have it up here, and
it's still available to me.
| | 03:01 | So that's helpful if you're working on
a desktop computer, and maybe you have no
| | 03:06 | intention of working on this site ever
on a tablet, or a mobile phone, so that's
| | 03:10 | a feature you can turn on and off.
| | 03:12 | So I am going to go ahead and put that back
to Yes, because I actually like that there.
| | 03:16 | We can choose to display the
header on the top of the page, or not;
| | 03:20 | if I say No, and say Save, that
header bar that tells me where I am in the
| | 03:25 | Web site, and has the Joomla!
| | 03:26 | logo on it goes away entirely.
| | 03:27 | I kind of like it there, because I like
the fact that it tells me what page I am on.
| | 03:32 | Although it tells me twice;
| | 03:34 | it tells me up here, and it will
replace that down here if you decide to turn
| | 03:38 | off the header. I like it better up here in
the blue bar. It just works better for me.
| | 03:42 | And down here on the bottom of the screen,
there is this module, which says View
| | 03:48 | Site, and has the Log out button, and so
forth on it, right now that is set to be
| | 03:53 | Fixed at the bottom of the page.
| | 03:55 | We can move that around as well.
| | 03:56 | If I said put it at the Top of the screen,
| | 03:59 | that is going to bump that up here to the
top, so I don't have it down here in the bottom.
| | 04:03 | Some people may like that
better here in the workflow.
| | 04:05 | So I am going to go ahead and
put that back down to the bottom.
| | 04:11 | And the last thing that we can
customize here inside of isis, down here at the
| | 04:15 | bottom, is the Sticky Toolbar.
| | 04:17 | And this refers to the buttons for Save,
Save & Close, and so forth, are always
| | 04:23 | available to us,
no matter how long the page is.
| | 04:25 | So if I set my Sticky Toolbar to No, and
say Save, what will happen now is, as I
| | 04:32 | go into a page that's a bit longer, like this,
those buttons will scroll off the screen.
| | 04:37 | The dark blue bar here that has your
navigation on it will always stay in place,
| | 04:41 | but the bar with the
buttons to save will scroll off.
| | 04:45 | I actually think that this is not
a good thing; I love having those
| | 04:48 | buttons there on the top.
| | 04:49 | So if I've scrolled all the way down
many screens of information, I can still
| | 04:53 | just click on the Save button at the top,
rather than having to scroll back up to
| | 04:56 | the top, and then click save.
| | 04:58 | So I am going to turn that back on,
and I am going to say Save & Close.
| | 05:02 | So you have many options to you
for customizing the isis template.
| | 05:06 | You can brand it with your own colors,
and your own logo very easily, without
| | 05:10 | having to edit the HTML and the CSS.
| | 05:13 | You can move some of the elements
around to optimize your personal workflow,
| | 05:18 | and you can optimize isis for your
particular workflow, and to maximize your
| | 05:23 | productivity.
| | Collapse this transcript |
| Working with Joomla! templates from third-party providers| 00:00 | If you do a quick
Google Search for Joomla
| | 00:02 | templates, you'll turn up a zillion
results, and the results will fall into two
| | 00:07 | classifications: paid templates,
or free template. Which is better?
| | 00:11 | Well, you already know the
answer to that: it depends.
| | 00:14 | Free is a great price, and there are some
very good free templates that are available.
| | 00:19 | However, choose your provider carefully.
| | 00:21 | Since anyone can post a free
template, frequently anyone does.
| | 00:26 | That means that some templates don't
have many module positions, they may
| | 00:30 | be limited in their ability to customize
them, or they're not tested for all browsers.
| | 00:36 | If you get a free template from a
commercial template provider, most offer some
| | 00:40 | kind of free templates to generate
traffic to their Web sites, so you will wind
| | 00:44 | up with the best quality.
| | 00:46 | In my mind, it's very much
worth paying for a template.
| | 00:49 | I want good quality, good support, and a
minimum of hair pulling while I try
| | 00:54 | to get it look the way I want.
| | 00:56 | I've found that many of the paid
templates are excellent, and my particular
| | 01:00 | favorite providers are Joomla Bamboo,
| | 01:02 | and Joomla Bamboo
| | 01:02 | is doing quite a bit with responsive
design right now, and they have a
| | 01:07 | very clean kind of look
to their templates.
| | 01:09 | And I've also been a fan of
Rocket Theme for many, many years.
| | 01:13 | These are my two favorites, but there are
many other great providers that are out there.
| | 01:18 | In the end, you need to judge your
template by its basic layout. Think about
| | 01:22 | things like the location of the logo,
the primary and secondary navigation
| | 01:27 | locations, or whether dropdowns are
required, how many columns your Web site
| | 01:32 | design is going to have, versus how
many you think you're going to need.
| | 01:36 | Think about what you need on the
homepage. Just because the module has 20
| | 01:40 | positions definitely does not mean
that you need to fill all 20 positions.
| | 01:47 | Remember that you can also fold the
cost of the template, and any extensions
| | 01:51 | that you might be purchasing, into the cost
of doing business, and creating the Web site.
| | 01:56 | One of thing that I have found to be
helpful through the years is when I
| | 02:00 | provide a price for a Web site, I like
to add about 10% of the cost of that
| | 02:05 | Web site into a little slush fund, as I
call it, and I tell my clients that little
| | 02:10 | fund is available for me to purchase
templates, or extensions, and I will
| | 02:15 | certainly not exceed the cost of that 10%, but I
may spend a little bit of money within that pool,
| | 02:22 | in addition to the cost of the Web site
as a whole. That gives you a little bit
| | 02:26 | of flexibility, so that you have the
ability to buy an extension, or buy a
| | 02:30 | template as required, but you don't
have to take that out of the money that
| | 02:35 | you're being paid for your
time to build the Joomla
| | 02:38 | Web site that your client
hired you to do.
| | 02:41 | Finally, be sure you watch for
responsive designs with Joomla! 3.
| | 02:44 | Joomla
| | 02:45 | ships with the Twitter Bootstrap framework
for building responsive Web sites.
| | 02:49 | Many template manufacturers are incorporating
this into their template designs,
| | 02:53 | meaning that your template will
work on phones, tablets, and desktops.
| | 02:57 | So you might want to look for responsive
design, as opposed to a separate mobile
| | 03:02 | template, and the responsive designs
are less work, there's less to configure,
| | 03:08 | and you'll have one set of content.
| | 03:09 | Sometimes with the mobile templates, you
wind up with a second set of content, or
| | 03:13 | a second set of module positions for
displaying that mobile template, and that
| | 03:17 | might not necessarily
work out the best for you.
| | Collapse this transcript |
|
|
11. Creating a Website with Multiple LanguagesMultilanguage site overview and configuration| 00:00 | 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 US.
| | 00:10 | As a result, many Web sites increasingly
deliver content in English, and in Spanish.
| | 00:15 | Some Web sites in government or
health care may also wish to serve people
| | 00:19 | in several languages.
| | 00:20 | Fortunately, one of Joomla's major
strengths is its ability to support
| | 00:24 | multiple languages. Joomla
| | 00:26 | is a project built by participants
from around the world, speaking many
| | 00:30 | different languages. In fact Joomla
| | 00:32 | has been translated into dozens of
languages from around the world. What's more,
| | 00:37 | Joomla is also localized.
| | 00:39 | Localization means that a language is
adapted to a certain country or region's
| | 00:43 | flavor of the language.
| | 00:44 | Thing about the difference between
Canadian French, and French spoken in France,
| | 00:49 | or English spoken in the US,
versus the United Kingdom. Joomla
| | 00:53 | supports these differences as well.
| | 00:54 | As a turned that kinetECO frequently
work with Italian firms who are doing
| | 00:59 | research in solar and wind energy,
| | 01:01 | and they get a lot of traffic to this
Web site where people would like to have
| | 01:05 | the content presented in Italian.
| | 01:07 | So I am going to show you now how to
build part of this Web site out in Italian.
| | 01:12 | If you need to support more than two
languages on your Web site, you can use the
| | 01:16 | same procedure demonstrated here over
the next several videos for each language
| | 01:20 | of interest on your Web site.
| | Collapse this transcript |
| Downloading and installing the Italian language pack| 00:00 | At this point in the course, we have
built this Web site out using a single
| | 00:04 | language, that's English, and you can
follow all of the steps that I've used
| | 00:08 | this point if you're only going to
build your Web site in one language.
| | 00:11 | But if you are going to build your Web
site in multiple languages, we are going
| | 00:15 | to have to make some tweaks
to the site we already have.
| | 00:18 | We are going to need to
rearrange some Categories.
| | 00:20 | We are going to rearrange some Articles.
| | 00:22 | We'll need to assign some languages.
| | 00:23 | There are many steps that I'll be
going through in the next few videos.
| | 00:27 | If you build your Web site from the
ground up with a second language in mind,
| | 00:30 | then it's probably less work in the
long run, because you've already built the
| | 00:34 | structure into place as you're building
out your Web site, and it isn't so much work
| | 00:37 | retrofitting it for a second language.
| | 00:39 | However, because so many people in
the US build their Web sites in just one
| | 00:43 | language, I wanted to be sure to
demonstrate that, and now I am going to
| | 00:47 | demonstrate how to retrofit
your site for that second language.
| | 00:50 | So the first step in this process is to
install the Italian language pack. Joomla
| | 00:56 | is an open-source project, with
contributors from around the world, and the
| | 01:00 | Italians have a thriving Joomla community.
| | 01:03 | They are very enthusiastic about Joomla,
| | 01:05 | and they have translated Joomla's
| | 01:07 | English version into an Italian
version, and it's available as an
| | 01:11 | official translation.
| | 01:12 | What we need to do now is make sure that
that translation is available to Joomla.
| | 01:16 | What it'll do is translate
the entire back-end of Joomla;
| | 01:20 | all of the administrator
interface will be translated into Joomla,
| | 01:23 | and any messages that appear on the front
of the Web site that are generated by Joomla
| | 01:27 | will also be translated.
| | 01:29 | This does not translate your content.
| | 01:32 | So any content that you're generating,
that you're putting in as an article; that
| | 01:36 | content is not translated by Joomla.
| | 01:39 | So here's how we install
this language pack.
| | 01:42 | First we are going to go to our
Language Manager, which you can get to
| | 01:46 | either here from the link in
that control panel, or you can go to
| | 01:50 | Extensions > Language Manager.
| | 01:53 | This is going to show you all of
the languages that are installed on
| | 01:56 | your current Web site.
| | 01:57 | Right now there's only one.
It's English.
| | 01:59 | This is the languages there are available
for the front-end of the Web site,
| | 02:03 | then under an Administrator here on the side
these are languages available on the back-end.
| | 02:07 | It's just English.
| | 02:09 | What I need to do is
install Italian as a language.
| | 02:13 | So all I need to do -- and
this is new in Joomla! 3.0;
| | 02:16 | previously, we had to go out to the Joomla
| | 02:18 | Web site, download the language pack, and
install it. Now we can do it all within
| | 02:22 | the back-end of Joomla,
which is just great.
| | 02:24 | I am going to click on the Install languages
button, and this is going to give me
| | 02:28 | a list of all of the
official Joomla translations.
| | 02:32 | So these are groups of people from around
the world who have collaborated to make Joomla
| | 02:37 | into these official language packs.
| | 02:39 | So I'm going to scroll on down the page here to
find Italian, and I'm going to check Italian off
| | 02:44 | here, and then I'm going to click the
Install button here at the top of the
| | 02:48 | screen, and we'll just wait a second
for that to download, and it will indicate
| | 02:53 | that installing Italian was successful.
| | 02:55 | Now if I go to Extensions > Language
Manager, you'll see that I have both the
| | 03:00 | English language, and Italian language
installed here in the Web site, both on
| | 03:05 | the front-end of the Web site -- the
Site end of this -- as well as on the
| | 03:09 | Administrator site of this.
| | 03:11 | I could now also run the
entire back-end of Joomla
| | 03:13 | in Italian if I wish.
| | 03:15 | That is something that I can do in the
global configuration; I can set the
| | 03:19 | default language for my copy of Joomla.
| | 03:21 | I can also override that
on a user by user basis.
| | 03:24 | Through the User Manager, I can set
specific users to work with one language
| | 03:29 | or another.
| | Collapse this transcript |
| Creating the Italian content language| 00:01 | So now that Italian is installed as
our second language for this Web site, the
| | 00:05 | next thing I want to do is I want to
create what's called a content language.
| | 00:10 | If you look in any piece of content
here in the Web site -- let's just look at the
| | 00:14 | Article Manager here for a moment,
and look at one of these articles.
| | 00:17 | Over here on the side, we have a
dropdown for Language, and right now that
| | 00:21 | dropdown is populated with All, or English,
but Italian doesn't show up in this dropdown.
| | 00:27 | So what we're going to do next is
create what's called the content language.
| | 00:32 | This is going to populate this
dropdown, so that we can assign languages to
| | 00:37 | specific articles, categories,
menu items, and so forth.
| | 00:40 | So to do this, I am going to
close out my article here.
| | 00:45 | I am going to go to Extensions > Language
Manager, and I'm going to go to a Content
| | 00:50 | item here over in the left navigation.
| | 00:53 | Right now, here is English, which is one of the
two languages that shows up in that dropdown.
| | 00:59 | All is a catchall, and is
always there by default.
| | 01:01 | English is the other language that's there.
| | 01:03 | Now I need to go ahead and
add an Italian content language.
| | 01:07 | To do that, as always, we click the big
green New button, and I am going to give
| | 01:12 | this a Title of Italian, and then
I'm going to assign the native title.
| | 01:18 | This is the way the Italians
would say Italian, which is Italiano.
| | 01:21 | The URL language code is
in the URL for the Web site.
| | 01:27 | What two letter code is going to
show up indicating that you're in one
| | 01:30 | language or another.
| | 01:31 | So it's usually like EN for English, or
ES for Spanish; for Italian it is IT.
| | 01:37 | The image prefix has to do with the
little flags that are going to show up
| | 01:41 | in language switcher.
| | 01:42 | The flags are associated
in the back-end of Joomla,
| | 01:45 | and they are associated
with the various countries.
| | 01:47 | So if you know that two letter country
code, that flag, if it's available, will
| | 01:51 | show up in language switcher.
| | 01:53 | So once again, that's IT.
| | 01:56 | Then the LanguageTtag is the form of Italian
you happen to be using, or the form of English.
| | 02:02 | So by default, the form of
English is en-GB, for Great Britain.
| | 02:08 | There is also en-US, for the United
States. Or for French, for example, you can have
| | 02:15 | fr-FR; that would be the French that's
spoken in France, or fr-QC, for the French
| | 02:24 | that spoken in Quebec.
| | 02:26 | So here for the Language Tag,
it's just it-IT.
| | 02:29 | So this is Italian as the
Italians speak in Italy.
| | 02:36 | That is all we need to fill
out here for this information.
| | 02:39 | Go ahead and say Save & Close, and you
will see Italian will show up here as a
| | 02:45 | language that's available
here as a content language.
| | 02:49 | Now if I go back to my Content, back
to my Article Manager, and I take a look
| | 02:53 | at one of my Articles,
| | 02:55 | here in the dropdown, I now
have the option of choosing Italian.
| | 02:59 | So that's the second step in the
process is creating our content language, so
| | 03:04 | that that is there in a dropdown, and now
we can start to assign that to various
| | 03:07 | kinds of content here
in the back-end of Joomla.
| | Collapse this transcript |
| Adjusting category structures for multiple languages| 00:01 | Normally when you set up a multilingual
Web site, you're going to set up some
| | 00:04 | top level categories, and those top level
categories will be the names of your languages.
| | 00:09 | So we will have a top level English
category, and a top level Italian category,
| | 00:14 | and then within each of those
categories, we will have all of the other
| | 00:17 | categories on the Web site.
| | 00:19 | So right now, we have already created a
whole category structure for this Web site.
| | 00:23 | What we need to do now is make an
English category, and then move all those
| | 00:27 | existing categories into
the English category.
| | 00:29 | And then we'll make an Italian category.
| | 00:31 | So that's what we're going
to do this particular video.
| | 00:34 | I am going to start by going to Content >
Category Manager, and I am going to start
| | 00:40 | by making a New Category.
| | 00:41 | This category is going to be called
English, and we have one additional piece of
| | 00:45 | information we have to assign, and that
is the language. It's down here at the
| | 00:48 | bottom of the screen.
| | 00:50 | Right now the Language is set to All;
we are going to set that to English (UK).
| | 00:55 | And go ahead and say Save & Close.
| | 00:57 | And we have our new
category down here at the bottom.
| | 01:00 | Now what we need to do is take all
of the existing categories, including
| | 01:04 | Uncategorized, because
I do have content in that.
| | 01:06 | And I'm going to move that as
children of the English category.
| | 01:10 | So to do this quickly and easily, I am
going to check all of these by clicking
| | 01:15 | the top box here,
and then uncheck English.
| | 01:17 | And then I am going to click this Batch
button over here in the top navigation.
| | 01:22 | And what I want to do is I want to
move all of these categories to the
| | 01:27 | English category, so I am going to
select English from the list, and I am
| | 01:31 | going to say Process.
| | 01:32 | And there is all of my
categories here as children of English.
| | 01:36 | What happened was when I moved these
all as children of English, it pulled apart
| | 01:40 | my previous category structures.
| | 01:41 | So I am going to take Solar, and I am going
to assign this as a child of News & Info.
| | 01:46 | So now I am going to scroll on down
here to the Parent, and that parent is
| | 01:51 | going to be News & Info.
| | 01:52 | And I'll say Save & Close, and then I am
going to go to my Press Releases, and I
| | 01:58 | am going to set this one the
Parent as News & Info as well.
| | 02:04 | And say Save & Close.
| | 02:05 | So now I have my same category structure
that I had before, but all of these are
| | 02:10 | located inside of the English category.
| | 02:12 | Now, over here in the Language column,
you will see that we currently have one
| | 02:16 | category set to English, and all the
rest of these to All. I'm going to check
| | 02:19 | everything off again, except for
English, and I am to switch all of these to
| | 02:23 | the English category.
| | 02:24 | So to do that, I am going to click the
Batch button one more time, and for setting
| | 02:29 | the language, I am going to pick English
from the list, and say Process, and that
| | 02:33 | will set all of these
categories to English.
| | 02:36 | My last step is to
make an Italian category.
| | 02:38 | So to do that, I am going to click the
New button, and I am going to call this
| | 02:43 | Italian, and down at the bottom of
the screen here I'm going to set the
| | 02:48 | language to Italian.
| | 02:49 | And I am going to go ahead
and say Save & Close.
| | 02:52 | So now I have two top level categories:
English, and Italian. They are assigned
| | 02:56 | their particular languages, and under
English, I have a whole category structure.
| | 03:01 | Now, if I was really building up my
entire Web site in Italian, I would certainly
| | 03:05 | go through and make all of the
additional categories, and so forth.
| | 03:09 | But to save time, and just because
this is just a demonstration of how the
| | 03:13 | multilingual capabilities in Joomla
work, I'm only going to translate two of
| | 03:17 | the pages to Italian.
| | 03:19 | And so I'm not going to go ahead and
make a whole bunch of categories for that,
| | 03:23 | I am just going to put my two
articles inside of the Italian category.
| | 03:27 | But if you were building this out, the
entire Web site into multiple languages,
| | 03:30 | you would certainly want to take that
same category structure, and mimic it in
| | 03:35 | all of your languages
for the Web site.
| | Collapse this transcript |
| Creating Italian language articles and adjusting English articles| 00:01 | Categories, articles, and menus; that's
a theme that we have been exploring all
| | 00:06 | throughout this Joomla
| | 00:07 | course, and the multilingual
chapter is certainly no different.
| | 00:10 | We've organized our categories, so that
we have an English category, and an Italian
| | 00:14 | category, and we've nested all of our
existing categories inside of the English category.
| | 00:18 | So, what's up next?
| | 00:20 | Well, articles of course.
| | 00:22 | It's time to take all of our articles,
and assign languages to them, as well as
| | 00:27 | create our Italian articles.
| | 00:28 | So, I'm going to start by going to
Content > Article Manager, and all of the
| | 00:35 | articles that I have existing in this
site right now are all English articles.
| | 00:38 | So it's most convenient right now
to go ahead and assign all of these a
| | 00:42 | language of English.
| | 00:43 | You see here that my
language is currently set to All.
| | 00:46 | What I need to do is
set that to English.
| | 00:49 | I can use the Batch function
again to do this.
| | 00:51 | So I'm going to check this
box here at the top.
| | 00:54 | All of these articles are going to
be assigned English as their language.
| | 00:58 | So I'm going to click the Batch button here.
| | 01:00 | And I'm going to say Set
Language to English, and say Process.
| | 01:07 | And now you see all of my articles
are assigned the English language.
| | 01:12 | The next thing I need to do
is make my Italian articles.
| | 01:14 | So I'm going to click the New button,
| | 01:17 | and I have the translated articles
available for you in your Exercise Files, and
| | 01:22 | the first article here is the Home page.
| | 01:24 | So this is the line of text that talks about
harnessing solar and wind energy, and so forth.
| | 01:30 | So I'm going to paste that in,
| | 01:32 | and the Category I'm going
to choose is Italian.
| | 01:35 | And then here inside of Notepad, I'm
going to highlight that text, and copy, and
| | 01:41 | paste here into TinyMCE.
| | 01:44 | My last step is, over here on the side
where it says Language, I want to assign
| | 01:48 | this to Italian, and then
I'm going to say Save & New.
| | 01:51 | I'm going to repeat this
process for the second article.
| | 01:55 | This is the About page, and so this
is the title of the article; that's in
| | 02:03 | Italian, and this is the
main body of the article here.
| | 02:09 | I'm going to paste that
on in here into TinyMCE.
| | 02:11 | And then, one last thing to do is to
format this headline here, go ahead and set
| | 02:19 | that to be an H2, and we'll
set this to be a paragraph.
| | 02:27 | So we're all set here, and
remember to set the language to Italian.
| | 02:35 | So Save & Close, and you'll find the
Italian articles are located inside of the
| | 02:42 | list of articles here
in alphabetical order.
| | 02:44 | So here's the About us article in
Italian, and then further down on the page,
| | 02:49 | here is the Home article in Italian.
| | Collapse this transcript |
| Creating the English menu and a universal homepage| 00:01 | Categories, articles, and menus.
| | 00:04 | So, we've done our categories,
we've done our articles; time for menus.
| | 00:07 | What we're going to do is we're going
to have three menus for this Web site, with
| | 00:14 | the fourth being the footer menu.
| | 00:16 | What I will have is one menu, which will
be the current main menu, will become a
| | 00:21 | menu with a single link on it; it'll
be the homepage link, and that link will
| | 00:25 | be assigned a language of all.
| | 00:27 | Then I'm going to have an English menu,
and that will contain all of the links
| | 00:32 | that are currently on the Web site.
| | 00:33 | And I'm going to make an Italian
menu, and that will have all of the
| | 00:38 | Italian links on it.
| | 00:39 | In this video, I'm just going to make
the English menu, and move the existing
| | 00:44 | links over to that English menu.
I'll show you how that works.
| | 00:47 | So here under Menus, I'm going to start by
going to my Menu Manager, and say Add New Menu.
| | 00:55 | And the menu I'm going to create is
called English menu, and the Menu type will
| | 01:00 | be englishmenu, all one word,
| | 01:01 | and I'm going to say Save & Close.
| | 01:03 | So that created the English menu for me,
and just as we've done before, I'm going
| | 01:08 | to go ahead and add a new
module for this menu type.
| | 01:11 | This is a little bit tricky, because I
have a lot of settings that I have to
| | 01:16 | remember for this particular menu.
So my title will be English menu,
| | 01:21 | and I'm not going to show that title. I
want the position to be in the Protostar
| | 01:26 | template, and I want it to be in Navigation.
| | 01:30 | The language for this menu will be
English, so I'm going to set that down
| | 01:34 | here at the bottom.
| | 01:35 | Remember that we also had some
additional settings for this particular menu.
| | 01:40 | Under Basic Options, we want it to show
the sub-menu items; that'll make sure that
| | 01:44 | the dropdowns work in all locations
across the menu. And under Advanced Options,
| | 01:49 | we had a Menu Class Suffix of space,
nav-pills; that'll give us the formatting
| | 01:56 | that will make the navigation bar go
horizontally, and give us those little blue
| | 02:00 | pills that occur behind various menu items.
| | 02:03 | Okay, go ahead and say Save & Close.
| | 02:06 | So we now have two modules here, and
one of these has content in it, that's the
| | 02:12 | main menu, and one of them has no
content at all; the English menu.
| | 02:15 | If we look at the front-end of the Web site,
and hit refresh, we see absolutely no change.
| | 02:20 | And the reason why is, one menu
has content, and one menu does not.
| | 02:24 | Okay, so the next thing I'm going to
do is go back to Menus, and I'm going to
| | 02:29 | go back to Main Menu.
| | 02:30 | Now here on my page are all of the
menus links that I have here on the Web site.
| | 02:36 | What I need to do, first of all, is I
need to assign most of these a language
| | 02:41 | of English, so I'm going to go ahead
and check off this box, uncheck Home,
| | 02:46 | home will remain as the language of all, this
is the big default page for the whole Web site,
| | 02:51 | and all of the other items here in the
list should be checked. And we're going
| | 02:56 | to do that batch process again, and we'll
set the language to English, and say Process.
| | 03:01 | Okay, so now that these are all set, I'm
going to go ahead and move them, so what
| | 03:06 | I'm going to do, once again, is check all
of these off, uncheck Home, and I'm going
| | 03:10 | to click the Batch button, and I'm going
to say we're going to move these to the
| | 03:15 | English menu, and add to this
menu, and I'm going to say Process.
| | 03:21 | What I'll have left behind on the main
menu is just one menu item; that's the
| | 03:25 | homepage. And actually, I want the same
homepage over on the English menu, so
| | 03:30 | with this particular item, I'm going to
copy that over, so I'm going to put a
| | 03:34 | checkmark by this, and I am going to
click my Batch button, and I'm going to pick
| | 03:40 | English menu from the list here, and then make
sure I choose to the Copy button, and say Process.
| | 03:45 | So this menu item is still
available here for me on the main menu,
| | 03:49 | but now when I go to the English
menu, I'll see all of my items here.
| | 03:55 | And once again, those items have been
moved over, but unfortunately they have
| | 04:00 | been pulled out of there
previous structure and nesting.
| | 04:04 | So what I'm going to do here is I'm
going to grab my home menu item, I'm going
| | 04:09 | to drag it on up to the top of the list
here, or as close to the top as I can get,
| | 04:14 | then I'll scroll up, and then I'll
drag it some more. There we go.
| | 04:18 | So as you see here on the English menu
now, I've got my Home page here at the top.
| | 04:23 | The Language for this item is still to
All, so what I'm going to do is I'm going
| | 04:28 | to edit this by going into my Home item,
and first of all, I'm going to switch the
| | 04:32 | Language from All to English.
| | 04:34 | And I'm also going to fix my Menu Title,
which is set to Home, I'm just going to
| | 04:39 | make that regular old Home,
| | 04:41 | and I'm going to get rid of that
Alias as well; the alias will be filled in
| | 04:45 | automatically by Joomla.
| | 04:47 | And I'm also going to set this as the
default page for the English menu, so this
| | 04:53 | will become the English homepage, and
the way that I do that is, right here in
| | 04:57 | this particular screen under default page,
I'm going to set this to Yes, and then
| | 05:02 | I'm going to say Save & Close.
| | 05:03 | What will happen now is, you see the
little British flag right here; this
| | 05:07 | indicates that this is the homepage for
the English menu, as opposed to the main
| | 05:14 | menu, where we have the yellow star.
This is the homepage for the entire Web site,
| | 05:19 | whereas the English menu contains the
homepage for the English side of the Web site.
| | 05:24 | You can tell here from the dropdown
that we have default pages assigned.
| | 05:29 | The little home button here under Main
Menu indicates that this menu contains
| | 05:34 | the homepage for the entire Web site,
and the British flag here indicates that
| | 05:38 | this contains the homepage for
the English side of the Web site.
| | 05:41 | So, the last thing I need to do is I need
to go back to my English menu, and reorder it.
| | 05:47 | So I'm going to click on that, and when
we moved all of these items over from
| | 05:52 | main menu, the way that these were
organized changed, so what I need to do now is
| | 05:57 | I need to click on each
one of these, like Executives;
| | 06:00 | I need to change the parent item from
the Menu Item Root to the About page.
| | 06:04 | And say Save & Close, and I'll repeat
this for Company Structure, change the Menu
| | 06:11 | Item Root back to About.
| | 06:12 | So I'm going to go through, and I'm
going to finish this up here offline for
| | 06:17 | the rest of the site. You know how the
site was arranged before, so I'm just
| | 06:21 | going to go through, and set up the sub-navigation,
so that that is functioning correctly here.
| | 06:25 | And in the next video, we have to address
the modules, and the way these menus are
| | 06:31 | displaying, so that's what we're
going to cover in the next video.
| | Collapse this transcript |
| Changing menu modules on the site| 00:00 | So I've finished rearranging my menus back
to the way that they were structured before.
| | 00:06 | Here under Menus, if you go to Main
Menu, I have just one link, the Home page
| | 00:10 | that's assigned the Language of All, and
it is the default page for the entire
| | 00:14 | Web site, and on my English Menu, I
have my layout here for the entire
| | 00:20 | Web site, and I have restructured
all of these links, so that the
| | 00:25 | sub-navigation is put back in place.
| | 00:27 | On the front-end of the Web site, you'll
see that I now have two navigation bars
| | 00:31 | that are displaying here. One is the
actual English navigation bar; we see that
| | 00:36 | it's configured correctly,
| | 00:38 | so that I have my dropdowns, and
everything is in place. And underneath
| | 00:41 | of it, is this additional link for Home; that
is the default page for the entire Web site.
| | 00:46 | So I need to tweak this now.
| | 00:49 | So here on the administrator
side of things, I'm going to go to
| | 00:52 | Extensions > Module Manager, and the Main
Menu that's here; as you will notice, the
| | 00:57 | Language is set to All, which is great.
All I need to do is unpublish this,
| | 01:01 | so I'm just going to click on that to
unpublish it, and the English menu is
| | 01:05 | completely configured as well, and
it's Language is set to English.
| | 01:08 | So now when I refresh this page, I
should see just the English language bar.
| | 01:13 | Notice, though, that there is no
indication of where we are, and that's because we
| | 01:18 | haven't completely finished installing
the rest of languages on this Web site, as
| | 01:23 | well as putting in a language switcher.
| | 01:25 | Once everything is in place, this menu
bar will work correctly, but when we're in
| | 01:30 | the middle of the process, things
sometimes look like they're horribly broken.
| | 01:33 | So the next thing that I need to do is
create the Italian menu, and display that
| | 01:38 | on the Web site as well,
which I'll do in the next video.
| | Collapse this transcript |
| Creating the Italian menu| 00:00 | Now that my English menu is all
configured, and the module matching is also
| | 00:04 | configured, now I need to create my
Italian menu, hook up my articles to that
| | 00:09 | Italian menu, and configure
that module as well.
| | 00:12 | So I am going to start by going to Menus >
Menu Manager > Add New Menu, and this will
| | 00:19 | be the Italian menu.
| | 00:20 | So this will be Italian menu,
| | 00:22 | the Menu Type will be Italianmenu,
all one word, and say Save & Close.
| | 00:27 | As you see here,
there is my Italian menu.
| | 00:29 | I need to add a module here.
| | 00:31 | So I am going to go ahead
and click this link.
| | 00:34 | This will be the Italian menu,
and I am going to Hide that title.
| | 00:38 | The Position is going to be the same as
all of the other menus, and that will be
| | 00:42 | under Protostar in Navigation position,
and the Language for this will be Italian.
| | 00:47 | Then remember that we have some
additional tabs that we need to set here.
| | 00:52 | Under Basic Options,
Show Submenu Items to YES.
| | 00:55 | Under Advanced Options, the Menu Class
Suffix will be Space, nav-pills, and that
| | 01:01 | will format the navigation bar correctly.
| | 01:04 | Go ahead and say Save & Close.
| | 01:05 | Now I'm going to add the
menu items to my navigation bar.
| | 01:10 | So back to Menus, to the Italian
Menu > Add New Menu Item, and inside your
| | 01:15 | Exercise Files, I have given you the
names for the links here, and from what
| | 01:26 | we've been able to research, it looks
like the Italians call their Home page
| | 01:29 | Home, the English word Home.
| | 01:31 | So we are going to start by linking to
an article, just a single article, and
| | 01:37 | that single Article is going to be, if
I select my category of Italian, the one
| | 01:41 | here with the long title will be the
article that we are linking to, and the
| | 01:46 | Menu Title will be Home.
| | 01:48 | Make sure that you assign the Language
over here to Italian, and set the
| | 01:52 | Default Page to Yes, because this
will become the homepage for the Italian
| | 01:57 | side of the Web site.
| | 01:58 | Go ahead and say Save & New, and then
we're going to add another menu item that
| | 02:04 | will be under Articles > Single Article.
| | 02:06 | The article we are going to link to
is the other one, and the Menu Title is
| | 02:12 | exactly the same, and the Language over
here in the side will be Italian, and then
| | 02:18 | go ahead and say Save & Close.
| | 02:22 | This just put me back
into the English menu here,
| | 02:24 | but in my dropdown menu, you'll see that
I have the Italian menu, with the flag
| | 02:30 | displayed here, and if I click on this,
you'll see that I have two links here
| | 02:34 | in my Italian menu.
| | 02:35 | One is the default Italian homepage, and
then I have this other page here as well.
| | 02:39 | If I look on the front-end of the
Web site, what I am going to see is
| | 02:43 | two navigation bars.
| | 02:44 | I have my English navigation bar here,
followed by my Italian navigation bar.
| | 02:49 | And again, that's because we're in the
middle of the process here of putting
| | 02:53 | together this multilingual Web site.
| | 02:55 | This is a temporary state, where you
are going to have these navigation
| | 02:59 | bars displaying here. Don't panic.
| | 03:01 | In the next couple of videos, we are
going to install the language switcher,
| | 03:04 | and that will switch between these
navigation bars, and display them at the
| | 03:10 | proper points in time.
| | Collapse this transcript |
| Creating Italian and English template styles| 00:01 | So we have designed our categories, our articles,
and our menu modules to various languages.
| | 00:06 | If we wanted, we could continue to go
through the site, and assign more modules to
| | 00:10 | one language or another.
| | 00:12 | But the very last thing that we need
to do is make sure that we have two
| | 00:16 | template styles: one template style for
English, one template style for Italian,
| | 00:20 | and a third template style, which
will be assigned the language of All.
| | 00:24 | So I'm going to go to Extensions >
Template Manager to make this happen.
| | 00:29 | And what I am going to do is I am
going to copy the protostar template once
| | 00:33 | more. So I am going to put a checkmark
next to protostar - Default here, and I am
| | 00:38 | going to click Duplicate.
| | 00:39 | And then I am going to put a checkmark
next to protostar - Default, and
| | 00:43 | click Duplicate again.
| | 00:44 | So now what I am going to do with these is
I'm going to take protostar - Default (2),
| | 00:48 | and I am going to change
this to make this protostar - English.
| | 00:53 | And I will go ahead and make this the
default for the English side of the Web site.
| | 00:58 | And then under Menu assignment, what
I am going to do is I'm going to select
| | 01:03 | everything that's in the English menu.
| | 01:05 | I'll just toggle the selection here.
| | 01:08 | And I'm not going to select the Italian menu,
and I am not going to select the Main Menu.
| | 01:13 | So it's just going to be all these pages over
here for the English menu, and say Save & Close.
| | 01:18 | Then I am going to go to my copy of
protostar - Default (3), and I'm going to
| | 01:22 | rename this as Italian.
| | 01:25 | And I am going to set this as the default
page for the Italian portion of the Web site,
| | 01:30 | and I'm going to assign this to
the two items on the Italian Menu,
| | 01:33 | and going to say Save & Close.
| | 01:36 | So now you'll see that I have my default
Administrator template here; that's the
| | 01:41 | Gold star here. My default template for
the entire Web site; that is the template
| | 01:45 | associated with the language of all.
| | 01:47 | Then I have my default protostar
template for the English side of the
| | 01:51 | Web site, and my template for
the Italian side of the Web site.
| | 01:54 | If I wanted to at this point, and
it would probably be a good idea,
| | 01:57 | I could go through the Italian site,
and for example, maybe I have another
| | 02:02 | graphic like this, instead of
Harnessing wind and sun for a cleaner,
| | 02:06 | energized planet, I could swap this
graphic out for the same graphic with
| | 02:10 | the words in Italian at the top,
| | 02:12 | and that would be a great
addition to the Web site.
| | 02:15 | And of course, I would have also translate
all of my other modules, and so forth.
| | 02:19 | But again, this is just a demonstration.
| | 02:21 | So now that I have all
of my templates in place,
| | 02:25 | so I have got my
categories assigned to languages,
| | 02:28 | I've got my articles assigned to languages,
my menus, my modules, and now my
| | 02:32 | template styles assigned languages,
| | 02:34 | I'm finally ready to turn on the
language switcher, and I am going to do that
| | 02:39 | in the next video.
| | Collapse this transcript |
| Creating the language switcher module| 00:00 | As the second to last step in the process
of making this multilingual Web site,
| | 00:04 | I'm going to go ahead and
create a language switcher module.
| | 00:08 | This is a module that
comes with core Joomla,
| | 00:11 | and it will allow me to toggle
between two languages on the Web site.
| | 00:15 | So to do that, I'm going to go Extensions >
Module Manager, and I'm going to make a
| | 00:20 | New module, and this is going
to be a Language Switcher module.
| | 00:26 | So I'm going to go and click that, I'm
going to give it a Title of Languages
| | 00:30 | Available, I'm going to Show that Title,
and I'm going to put it in the Position
| | 00:34 | of under protostar; I'm going to
put on the right side of the screen.
| | 00:40 | I'm going to leave the Language to All,
and I'm going to say Save & Close. And if
| | 00:45 | I come back and refresh the homepage,
you'll see that my language switcher shows
| | 00:50 | up here down at the bottom of the page,
and I have Italian and English available.
| | 00:54 | Now, just because this module appears
here doesn't mean that it's actually
| | 00:57 | functioning just yet.
| | 00:59 | There is one more step in the process,
and that is publishing the plug-in that's
| | 01:04 | associated with the
language switcher module.
| | 01:07 | Once we've done that, we can really
test this front-end of the Web site.
| | 01:10 | If you try clicking on those flags right
now, you're going to discover the site
| | 01:14 | is fairly broken still.
| | 01:15 | So don't click on the flags just yet.
Let's do this last step before we go
| | 01:19 | give this the test.
| | Collapse this transcript |
| Enabling the Language Filter system plugin| 00:00 | There's one final step that we need to
take care of to make our site multilingual.
| | 00:06 | It's a small step;
it's really easily missed.
| | 00:08 | If you're looking at the front-end of
your Web site, and it's still not behaving
| | 00:11 | quite right, this is probably the step
that you missed, and that is we need to
| | 00:16 | enable the plug-in
for the language filter.
| | 00:18 | So to do this, I am going to go to
Extensions > Plug-in Manager. I am going to go
| | 00:24 | over to page 2 here in the Plug-in
Manager, and I am going to scroll on down to
| | 00:29 | System - Language Filter.
| | 00:31 | And what I am going to do
is simply enable it.
| | 00:34 | All I have to do is click on the red X,
it becomes a green check, and that is now
| | 00:39 | enabled for the Web site.
| | 00:40 | Now when I refresh the front-end of the
Web site, I should see my site function in
| | 00:44 | a multilingual manner.
| | 00:45 | So I am going to switch over here to
the front-end, I am going to hit refresh,
| | 00:49 | and here I am on the Italian homepage,
and the Italian homepage article, and I can
| | 00:54 | also see my About article here
inside of the Italian Web site.
| | 00:58 | And if switch over to English, I have
my English homepage, as well as all of
| | 01:02 | these other pages that you've become
familiar with here on the Web site.
| | 01:06 | But you might notice that there is a few
things missing where the homepage is concerned.
| | 01:10 | So, first of all, what happened to my
random image? There used to be a random
| | 01:15 | image right here, and now
it's gone, so where did that go?
| | 01:18 | Second of all, what happened to
the Testimonials? I used to have some
| | 01:21 | testimonials over here in the right
column; they are gone. What happened to them?
| | 01:24 | I don't see them on the Italian
side either, although I don't really
| | 01:28 | necessarily want them on the Italian
side. Those are English testimonials, and
| | 01:31 | they are not translated into Italian, so I'd
like the testimonials to show on the English side.
| | 01:36 | And then the third thing that's happened
is the background of this Web site is
| | 01:40 | orange now, and it used to be that we
had teal on the homepage, and orange on all
| | 01:44 | the other pages,
so what happened with that?
| | 01:46 | Well, let's tackle these
three problems one at a time.
| | 01:49 | First of all, let's take a look at
the issue with the random image.
| | 01:52 | So, always a good place to start is the
Module Manager, so we're going to go to
| | 01:57 | Extensions > Module Manager, and I'm going
to find my Random Image module, and I am
| | 02:03 | going to go to the Menu
Assignment. Always a good place to start.
| | 02:06 | When a module that you think should
display on the site is not displaying,
| | 02:09 | always check the Menu Assignment.
| | 02:11 | Back when we started building this Web
site, we had just a homepage, and the main
| | 02:15 | menu, and we had a homepage in the footer,
which was an alias type of link, and we
| | 02:20 | had the random image assigned to both of
those pages. It's still assigned there.
| | 02:23 | But since then, we've made an Italian
homepage, and an English homepage, and this
| | 02:28 | module is not assigned
in those locations.
| | 02:31 | So what we need to do is assign it.
| | 02:34 | I am going to check off the English
homepage for the Random Image, and I am going
| | 02:39 | to check off the Italian homepage for
the Random Image, and then I am going to
| | 02:43 | go ahead and say Save & Close.
| | 02:44 | Now when I go back to the front-end of
the Web site, and I click refresh, now I've
| | 02:48 | got my random image
here on my English homepage.
| | 02:51 | But now I need to check the Italian side
of the Web site, and when I check that,
| | 02:55 | I still don't have a Random Image
module here on the Italian side of the
| | 02:58 | Web site. Why is that?
| | 03:00 | Well, when I put in my Italian article,
I did not include the little piece of
| | 03:05 | code that loaded the module.
| | 03:07 | Remember where the
Random Image module came from.
| | 03:09 | We put in a piece of code that said
load position, way back many, many, many
| | 03:14 | videos ago, to load the Random Image
module inside of the article for the
| | 03:18 | homepage for the English side of the
Web site, and that English article is now
| | 03:22 | in use for the language of all
homepage, and the English homepage, so that's
| | 03:27 | why we see it there.
| | 03:28 | But on the Italian side, we don't
have the little code that calls for the
| | 03:33 | Random Image module.
| | 03:34 | So even though the module is
assigned to this page, it doesn't have a
| | 03:37 | location to display.
| | 03:38 | So I need to go back to my
article, and add that little bit of code.
| | 03:42 | So here in the back-end of Joomla,
| | 03:44 | I am going to go to Content > Article
Manager, and I am going to find my Italian
| | 03:49 | Home page article, and I'm going to add
to the end of it {loadposition random}
| | 04:00 | and say Save & Close.
| | 04:02 | And now when I refresh the Italian
homepage, I have my random image showing up
| | 04:07 | here as well, and it's also
present on the English homepage.
| | 04:11 | So that's the first problem solved.
| | 04:13 | The next problem I want solved
has to do with my testimonials.
| | 04:17 | I need to make sure that the testimonials
are displaying on the English side of
| | 04:21 | the Web site, but I don't want
them displaying on the Italian side.
| | 04:24 | So, I am going to go back to the back-end
of Joomla, back to Extensions > Module
| | 04:28 | Manager, and I'm going to go to my
Testimonials module, and I am going to go to
| | 04:35 | the Menu Assignment.
| | 04:36 | Once again, always a great place to start.
| | 04:38 | This module has the same problem as
the Random Image module in that this was
| | 04:42 | originally assigned to the footer menu
home, and the Main menu home, but we now
| | 04:46 | have an English home, and it's not
assigned there, so I am going to go ahead
| | 04:51 | and check that off.
| | 04:52 | The other change I am going to make is
that since this is an English language
| | 04:56 | module, I'm going to assign it
a language of English as well.
| | 04:59 | If I ever wind up adding a Testimonial
module for the Italian side, I can set
| | 05:05 | that up, assign it to the Italian homepage,
and set its language of Italian, so
| | 05:09 | that it will switch properly.
| | 05:10 | So I am going to switch over to my
Details tab, and change the Language from All
| | 05:16 | to English (UK), and go
ahead and say Save & Close.
| | 05:20 | And now when I refresh my English homepage,
there's my Testimonials where I want
| | 05:25 | them, and on the Italian side, I don't have
any testimonials, which is exactly what I want.
| | 05:31 | So, the last part of this has to do with
why the background image is orange now,
| | 05:35 | and what happened
to that dark teal background,
| | 05:38 | and the answer for that
lies in the templates.
| | 05:40 | So in the back-end of Joomla,
| | 05:42 | we'll go to Extensions > Template Manager.
Let's take a look at the templates that
| | 05:46 | we have in use on this site right now.
| | 05:48 | We have isis, which is our administrator
template; that's not causing any problems,
| | 05:52 | but we have these four
templates down here that are in use.
| | 05:56 | We have the protostar - Default template,
which is controlling the language of All
| | 06:01 | for the Web site, and I have a
homepage that's assigned to a copy of that.
| | 06:06 | That is, the homepage of all actually is
assigned this template, and this template
| | 06:11 | is the one that has the teal background
in it, so that's why that page is teal.
| | 06:16 | We made a copy of protostar - Default
with the orange background when we made our
| | 06:20 | English and our Italian template styles.
| | 06:23 | So if I want to have a teal background
on the English side of the site for
| | 06:29 | the homepage, and an orange background
for the rest of the site, I need to
| | 06:33 | make one more clone.
| | 06:35 | So I am going to copy this English template,
put a checkmark next to it, and say Duplicate.
| | 06:40 | This is going to make a
second English template.
| | 06:43 | I am going to click on this to edit it,
and instead of calling it English (2), I
| | 06:48 | am going to call it English Home.
| | 06:49 | And under the Options here, I'll set the
Background Colour to be the same as the
| | 06:54 | Template Colour, so 006078.
| | 07:02 | Then under the Menu Assignment, I'm
going to check the English Home menu as
| | 07:06 | assigned to this, and I am
going to say Save & Close.
| | 07:09 | Now when I switch to the English side
of the Web site, I have my teal background
| | 07:14 | here for the homepage, and I have the
orange background for the About, and all the
| | 07:20 | other pages of the Web site.
| | 07:21 | If I would like to have my Italian
homepage also have a teal background, I'm
| | 07:25 | going to follow that exact same
procedure that I just did for the English
| | 07:29 | homepage, I am going to repeat that
same process for the Italian homepage, and
| | 07:33 | then the Italian homepage will have a
teal background, and orange pages for the
| | 07:37 | other pages on the Web site.
| | Collapse this transcript |
| Debugging with the multilanguage status module| 00:01 | As you've seen as we built this multilingual
Web site, you've noticed that there
| | 00:06 | are a ton of steps that go into
putting together a multilanguage Web site.
| | 00:10 | Lots and lots of little things, lots
of steps that are very easy to forget, or
| | 00:14 | overlook along the way,
and fortunately Joomla
| | 00:17 | has recognized that
this might be a problem,
| | 00:19 | and one of the things that
they've offered here in Joomla
| | 00:23 | in the core is an Administrator module
that may help you debug where you have
| | 00:28 | forgotten a step along the way, or
where a problem might be occurring,
| | 00:32 | and I'm going to show that to you now.
| | 00:34 | So if we go to Extensions > Module
Manager, we'll need to flip over to the
| | 00:40 | Administrator module, so over here in
the left column, pick Administrator from
| | 00:45 | the list, and these are all of the
Administrator modules in the Web site.
| | 00:49 | We looked at these
earlier with the Joomla version.
| | 00:51 | There is another module down
here called Multilanguage status.
| | 00:54 | And if you click on this, as you see
here, this is the module that will show the
| | 00:59 | status of the multilanguage parameters.
| | 01:01 | By default, this is set to show up in
the status bar; that's the little gray bar
| | 01:05 | down here at the bottom of the Web site.
| | 01:07 | I'm going to go ahead and say Published,
and I am going to say Save & Close.
| | 01:11 | Now that this module is published, down
here in the footer of the Web site, you'll
| | 01:16 | see that I have a link here for Multilanguage
Status, right in the very, very
| | 01:22 | bottom left-hand corner.
| | 01:23 | And if I click on this, this will report
what's going on with my current Web site.
| | 01:28 | So it will tell me that the Language
Filter Plugin is enabled, and that's one of
| | 01:33 | those steps that's small,
and very easy to forget,
| | 01:36 | so that's a really helpful thing.
| | 01:38 | It will tell you how many Language
Switcher modules you have published, and how
| | 01:42 | many default Home pages
you have for your Web site.
| | 01:45 | So, how many default Home pages
should you have?
| | 01:48 | Well, the answer for this
Web site is three.
| | 01:50 | You need to have one homepage assigned
to the language of All, and then one
| | 01:54 | homepage for each one of your languages.
| | 01:56 | So since I have two languages, and one
homepage assigned to all, the total is three.
| | 02:01 | So this will tell you if you're missing
one of those homepages for one of the
| | 02:05 | languages that you might be trying to support.
| | 02:07 | The grid down here at the bottom
tells you whether you have the content
| | 02:11 | languages, the site languages, and the
default home pages set up and in place.
| | 02:16 | Remember, the default home
pages I just covered.
| | 02:19 | The content languages have to
do with whether that dropdown is
| | 02:23 | configured correctly.
| | 02:24 | We did is right at the very beginning
of this chapter, where we added Italian as
| | 02:29 | another language that would show up in
the dropdowns that we see in categories,
| | 02:33 | and articles, and menus; it's where we
assign the language for any one of those
| | 02:37 | pieces of information.
| | 02:39 | And then, of course, the site languages;
that is, have you installed the
| | 02:43 | language packs for Joomla?
| | 02:44 | And we had installed Italian right at
the very, very beginning of the chapter.
| | 02:48 | So this little box of information will
tell you if you've missed any of those
| | 02:52 | major steps along the way.
| | 02:54 | If this is looking good, and you might
still be having issues, you might go
| | 02:58 | through and check your content, check
your categories, your articles, your menu
| | 03:02 | items, your modules, your template
styles, and make sure that those are assigned
| | 03:06 | the correct languages, and that you
have enough categories, articles, modules,
| | 03:10 | template styles, and so forth to go
around for all of the content that you're
| | 03:14 | offering on the Web site.
| | 03:16 | So between this, and that double-check
for all of your content, you should be
| | 03:20 | able to put together a multilingual
Web site, and diagnose any problems that you
| | 03:24 | run into along the way.
| | 03:25 | Since I've already got my multilingual
Web site running, and all of this stuff
| | 03:29 | is configured, I don't really need
this module active right now, and in the
| | 03:34 | footer of my Web site.
| | 03:35 | So I'm going to go ahead and close
this pop-up window, and then I'm going
| | 03:40 | unpublish the Multilanguage
status option down here at the bottom.
| | 03:43 | But if you want to keep yours published
and on, there's certainly no downside
| | 03:47 | to doing that.
| | Collapse this transcript |
| Turning off WAMP error reporting| 00:00 | This video is intended for PC
people only who are running WAMP.
| | 00:05 | Mac people running MAMP, you can skip
right over this, and go on to the ACL
| | 00:09 | chapter, or if you happen to
be running XAMPP with Joomla,
| | 00:12 | or you're running Web site on Web
hosting, you can also skip right over this.
| | 00:16 | But those of you who are
running WAMP, We need to talk.
| | 00:20 | When we turned on this language filter
plug-in in the previous video, something
| | 00:26 | happened to our menus.
| | 00:28 | And if you got our menus, and you take
a look at any of them -- let's just look
| | 00:32 | at the English menu --
| | 00:33 | we get these lovely errors
here that appear.
| | 00:36 | And this has to do with
the way WAMP is configured.
| | 00:40 | And they are quite ugly, but they never
show up on my Web hosting; I don't ever
| | 00:45 | see any kinds of errors like this.
| | 00:47 | So, I know that this is a WAMP specific
kind of situation, and it's more of an
| | 00:51 | annoyance than something that indicates
you have done something horribly wrong
| | 00:55 | when your Web site, or that
there's something that you need to fix.
| | 00:59 | So what we are going to do is we are
going to edit the PHP.INI file inside of
| | 01:04 | WAMP to reduce our error
reporting, to make these things disappear.
| | 01:08 | So to do this, if you go your WAMP icon,
and it may be here, or it may be inside of
| | 01:14 | the little arrow here in your hidden
icons, find that green W, and you are
| | 01:20 | going to click on this.
| | 01:21 | You're going to go to the PHP folder,
and you're going to look for PHP INI.
| | 01:26 | And when you click on that, this
should open up in Notepad for you.
| | 01:30 | So this your PHP INI file, and what
we are going to do is we are going to
| | 01:35 | search for something.
| | 01:36 | So under Edit, go to Find, and we are
going to look for error_reporting, and
| | 01:42 | click the Find Next button.
| | 01:44 | And here is a line in that is
commented, the semicolon in front of it
| | 01:48 | indicates that it's commented; click
Find Next one more time, and you'll be
| | 01:51 | on the correct line.
| | 01:52 | Where it says error_reporting = E_ALL.
| | 01:56 | What I would like for you to do is
change this to E_ERROR, all capital letters.
| | 02:07 | And if you now save this
File > Save, close the file,
| | 02:12 | then you are going to go back to WAMP,
and you're going to say Stop All Services,
| | 02:20 | and then you're going to Start All
Services again. That just basically
| | 02:23 | reboots PHP. When the W
is back to being green,
| | 02:27 | you can refresh the page that
you're on here inside of Joomla,
| | 02:30 | and all of those ugly errors will
disappear, and you can get on with your life
| | 02:35 | now that you don't have to
look at them anymore.
| | 02:37 | So this is a very handy little trick.
| | 02:40 | If you wind up with funny errors
showing up in WAMP only, you can use this
| | 02:45 | particular trick to edit your PHP INI
file to turn off those particular errors.
| | 02:51 | You may see them associated
sometime later, where you have third-party
| | 02:54 | extensions on occasion, or something
that might trigger those kinds of errors
| | 02:58 | as well.
| | Collapse this transcript |
|
|
12. Access Control List (ACL) EssentialsIntroduction to ACL| 00:00 | One of the big new features
released originally in Joomla! 1.6,
| | 00:04 | which carries into Joomla! 3.0,
| | 00:07 | is ACL, or Access Control Lists.
| | 00:10 | ACL is all about who can see
different content on the Web site,
| | 00:14 | as well as who can create and
change which content on the Web site.
| | 00:18 | You'll here this frequently
referred to as permissions.
| | 00:21 | You can see permissions popping up in
operating systems like Linux, and Windows,
| | 00:25 | as well as in software
systems in work environments.
| | 00:28 | ACL is a very complicated and in depth
topic. It's also very much beyond the
| | 00:33 | scope of this course, as it's advanced.
| | 00:36 | In this course, Joomla! 3.0:
| | 00:37 | Essential Training, I am going to focus on
the default ACL features with Joomla! 3.0.
| | 00:44 | If you would like to learn more about
ACL, I encourage you to watch Joomla!
| | 00:48 | 1.7 and 2.5: Access Control Lists in Depth.
| | 00:53 | Now, obviously this course was
recorded using a different version of Joomla,
| | 00:57 | and the arrangement of things on the
screen is somewhat different in terms
| | 01:02 | of the administrators, interface, and where
you go to find certain pieces of information.
| | 01:07 | However, the fundamental way you go
through the process to set up ACL has
| | 01:12 | not changed in Joomla! 3.
| | 01:14 | So the interfaces are different, but
the procedures, and the things you click
| | 01:19 | on, and the things you configure are really
the same between the two versions of Joomla.
| | 01:23 | So you should be able to still use this
course to set up ACL for your Joomla! 3.0 Web sites.
| | 01:30 | There's absolutely nothing wrong with
leaving permissions exactly as they are
| | 01:33 | set up in the default, which is what
we're going to do through this chapter.
| | 01:38 | For small Web sites, where you may
have one person, or a handful of people
| | 01:42 | maintaining the Web site, it's
likely you won't even need ACL at all.
| | 01:46 | If you're working on a much larger Web
site, where you have many contributors, ACL
| | 01:50 | may be really helpful. Throughout Joomla,
| | 01:52 | you'll see tabs in various
configuration screens for permissions.
| | 01:57 | This has to do with ACL.
| | 01:59 | I recommend you stay away from
changing these screens until you have a better
| | 02:03 | understanding of what you're doing.
| | 02:04 | Remember, just because you can
doesn't mean you should. For now, let's
| | 02:09 | concentrate on understanding ACL's
default configuration in the upcoming videos.
| | Collapse this transcript |
| Exploring default groups in Joomla!| 00:00 | Joomla's ACL revolves around
certain additional parameters that are in
| | 00:04 | the back-end of Joomla
| | 00:05 | that we haven't even touched yet.
| | 00:07 | There are users; of course, those are
the people who log into the Web site. There
| | 00:11 | are user groups; every user belongs to a
user group, and permissions are assigned
| | 00:17 | to those user groups.
| | 00:18 | There are core permissions that are
available; these are the things that people
| | 00:22 | can and cannot do on the
Web site, and there are access levels.
| | 00:26 | And so I am going to give you a quick
overview of what user groups are, and
| | 00:31 | then in the next video, I'll show you
how to create a user once we know what
| | 00:35 | the user groups are.
| | 00:36 | So here in the back-end of Joomla,
| | 00:38 | we're going to start by going to Users >
Groups, and this will show us all of the
| | 00:43 | default user groups that are
available to us here in Joomla,
| | 00:47 | again, by default. There is absolutely no
reason to keep any of these groups. You
| | 00:53 | are more than welcome to go through
and delete whatever you've got here.
| | 00:56 | Just remember, you can't delete the
Super User group if you've already got
| | 01:00 | somebody in it; that
would be a very bad thing.
| | 01:02 | But the groups that are here by default
are the groups that were available in
| | 01:06 | Joomla! 1.5, with one new addition.
| | 01:10 | So let me tell you about the groups that
we've all known and loved for so many years.
| | 01:14 | Public means anybody who is coming to
the front-end of your Website; they just
| | 01:17 | come to see the Web site. They aren't
interacting with the login screens at all.
| | 01:22 | These are just the people
that arrive on the Web site.
| | 01:24 | Registered users are
one step up from this.
| | 01:27 | Registered users are allowed to log
in to the Web site, but they can't edit any
| | 01:31 | articles, or create articles, or do
anything else; just logging in, and sometimes
| | 01:36 | just logging in is all you need, because
that will allow you to see information
| | 01:40 | that perhaps somebody without a
login would not be able to see.
| | 01:43 | Authors are able to create new content for
the Web site, and they can edit their own content,
| | 01:51 | but they can't edit any other pages on
the Web site. In other words, they can't
| | 01:54 | edit articles they didn't write, and
authors cannot publish what they write.
| | 01:58 | So anything that they write on the
Web site is unpublished by default, and it has
| | 02:03 | to be reviewed by somebody
before it can be published.
| | 02:05 | Editors are able to create new content
for the Web site, as well as edit any
| | 02:10 | content that's available on the Web site.
| | 02:12 | So anybody's content, written by
anybody, anywhere, an Editor can edit.
| | 02:17 | But again, they can't publish any
content, or unpublish content. That is the
| | 02:21 | job of a Publisher.
| | 02:22 | The Publisher inherits all of
those permissions from before.
| | 02:25 | They can log in to the front-end,
they can create content, they can edit
| | 02:29 | anybody's content, and they can
publish, and then unpublish content.
| | 02:32 | So Registered, Author, Editor, and
Publisher all have to do with the front-end
| | 02:37 | of the Web site, logging in
from the front-end.
| | 02:39 | None of those user groups are allowed to
login from the back-end of the Web site.
| | 02:44 | People that can login to the back-end
of the Web site include the Manager,
| | 02:47 | Administrator, and Super Users.
| | 02:49 | So, when the Manager logs in to the
back-end of the Web site, they get a stripped
| | 02:54 | down version of the menu that's seen here.
| | 02:56 | For example, they are allowed to
create content, and they are allowed to put
| | 03:01 | things in the Media Manager,
and create new menu items,
| | 03:04 | but a manager is not allowed to, for
example, manipulate the components, they
| | 03:09 | can't touch the templates, they
may have no access to the modules.
| | 03:12 | So a lot of things are stripped out
from Managers, although they can log in to
| | 03:16 | the back-end of the Web site.
| | 03:17 | Administrators can do almost everything
that we have been seeing here inside of
| | 03:21 | Joomla, except Administrators don't
have access to the global configuration, and
| | 03:27 | many of the Options screens.
| | 03:28 | So like the article Options,
the module options;
| | 03:31 | the template options; all of the
options that we've been seeing in practice.
| | 03:34 | And then, of course,
finally, there are Super Users.
| | 03:37 | And Super Users can log in
anywhere, see anything; do anything.
| | 03:41 | So those are the default
groups that came with Joomla! 1.5.
| | 03:44 | We've since added a new group;
| | 03:47 | this is a new group to Joomla! 3,
| | 03:49 | and that is the Guest group. And
the concept behind the Guest group is,
| | 03:54 | sometimes you'd like some content that
shows up on the Web site by default when
| | 03:59 | people are visiting the Web site,
and they are not logged in at all,
| | 04:02 | but when someone is logged into the
Web site, you'd like that content to
| | 04:05 | disappear, and you'd like people to be
able to see a different option instead,
| | 04:09 | and that is the function of the Guest group.
| | 04:12 | I am going to go through how you can
use the Guest group in your Web site a
| | 04:17 | little bit later on in the videos.
| | 04:19 | So that's a brief overview of what
the user groups are, and I am going to go
| | 04:24 | ahead and put these user groups to
work in the next video, where I create a
| | 04:27 | new user.
| | Collapse this transcript |
| Creating a user| 00:00 | So what I am going to be building in
this chapter is a distributor extranet
| | 00:05 | part of this Web site.
| | 00:06 | KinetECO works with distributors from
all of the world, really, and they would
| | 00:10 | like to make sure that distributors
have up to date information. They want
| | 00:14 | pages with installation instructions,
and they want pricelists, and they want
| | 00:19 | information about up and coming new
products, and so forth; things that they
| | 00:23 | would like to share with their
distributors on a regular basis, but they don't
| | 00:27 | want to share with the public.
| | 00:28 | So what they are going to do is build
this password-protected part of the Web site.
| | 00:33 | And you have to have a login; if you
can log in to the Web site, then you can see
| | 00:37 | this additional information.
| | 00:39 | So what I'm going to do now is start
that process; start the process of building
| | 00:43 | out this little extranet
part of the Web site.
| | 00:45 | To do that, the very first thing I
am going to do is create a new user,
| | 00:49 | and to do that I'm going
to go to Users > User Manager,
| | 00:54 | and this is my User Manager screen
here, and I can see that I have exactly one
| | 00:59 | login here for my Web site at the moment.
| | 01:02 | My login is Super User, and that's my name.
| | 01:06 | You can see my user name, my e-mail
address, other bits of information.
| | 01:10 | And I wanted to talk about the ID just
for a moment. This is the database ID for
| | 01:14 | this particular user that is
showing over here on the side.
| | 01:18 | Back in the old days -- Joomla! 1.0,
| | 01:19 | and 1.5 -- the ID for the
Super User was always 62.
| | 01:24 | And we told people that this was a security
problem, because if you're always on
| | 01:30 | the user ID of 62, a hacker could use
that information to try to get into the
| | 01:35 | Web site, and to hack
this particular account.
| | 01:37 | So in the new versions of Joomla! 1.6,
| | 01:42 | for example, this ID became 42.
| | 01:44 | And 42 was chosen because it's the
answer to life, the universe, and everything.
| | 01:49 | Hey, all you Hitchhikers Guide
to the Galaxy fans out there!
| | 01:52 | But that really didn't solve the
problem; we just picked a new number.
| | 01:55 | With this new version of Joomla,
this ID is randomly chosen.
| | 01:59 | So you're going to see something
different over here in this column.
| | 02:03 | I have got ID number 158.
You've probably got something else,
| | 02:06 | and that's a good thing. It's to help
keep the hackers from guessing your user
| | 02:11 | ID to hack into the database
of the Web site.
| | 02:14 | So that's why that's there.
| | 02:17 | So to create a new user, what I'm
going to do is click my New button.
| | 02:22 | And I can create a new user for
this particular Web site. This is Joe
| | 02:27 | Distributor, that's his Name,
and his Login Name is Joe.
| | 02:30 | And the Password needs to
be at least four characters,
| | 02:35 | so I am going to just do 123456 as his
login, and confirm that Password 123456.
| | 02:41 | Obviously, if I was doing this in
real life, I would want to have something
| | 02:47 | that was a little bit more difficult to guess,
but that's where I'm going to start anyway.
| | 02:52 | The Email for Joe here is joe@example.com.
| | 02:56 | That's all you need to fill
out here on this first tab.
| | 02:59 | Then I am going to switch over to the
Assigned User Groups, and this shows me, by
| | 03:06 | default, that Joe belongs
to the Registered user group,
| | 03:09 | and that's exactly what I want.
Registered users are those who can log in to the
| | 03:13 | front-end of the Web site; not the back-end.
| | 03:16 | And once they're logged in,
they can't necessarily do anything.
| | 03:20 | All they can do is log in to the Web site.
| | 03:22 | By logging in, though, they can see
information that's specific to Registered users.
| | 03:28 | We're going to leverage that
functionality to make some links just for
| | 03:32 | distributors on the front end of the Website.
| | 03:34 | On the other tab for basic settings,
there are some additional things you can
| | 03:38 | configure that may be helpful to you as
you create more users for your Web site.
| | 03:42 | You could give people a
back-end template style.
| | 03:44 | So, if they were able to log in to the
back-end of the Web site, which Joe is not,
| | 03:49 | but if they were able to log in to the
back-end of the Web site you can specify
| | 03:53 | whether the isis or the Hathor
template should be used, or any other
| | 03:56 | Administrator template that you install.
| | 03:58 | You can specify both a
back-end and a front-end language.
| | 04:01 | So once this user has logged in to the
back-end or the front-end of the Web site,
| | 04:05 | we could show them Italian
instead of showing them English.
| | 04:08 | And that's particularly important
here in the back-end for the interface.
| | 04:12 | That is all translated into Italian
for us. We just downloaded and installed
| | 04:15 | that in the previous chapter.
| | 04:17 | So Joe would be able to navigate the
back-end of the Web site in Italian if
| | 04:21 | that was his language.
| | 04:22 | But he can't log in to the back-end, and Joe
is American, so he doesn't speak any Italian,
| | 04:27 | so we will leave those alone.
| | 04:28 | The editor has to do with
TinyMCE, which is installed by default.
| | 04:33 | If you happen to have other editors
installed, you can assign a specific editor
| | 04:37 | to your particular person who is logged in.
| | 04:40 | Now, here's where this is
helpful, all you geeks out there;
| | 04:42 | some of you may actually prefer not to have
an editor at all, and I will show you this here.
| | 04:48 | Notice that one of my choices is
Editor - None. That would just give you a box
| | 04:52 | where you can just put HTML. You have
to mark up everything, there's just HTML
| | 04:57 | tags, and there's no editor at all.
| | 05:00 | That is a really helpful setting if
you want to be setting up HTML, something
| | 05:04 | like Dreamweaver, for example,
| | 05:06 | and then copying that HTML from Dreamweaver
over, and pasting it here into Joomla.
| | 05:11 | You can set up your
specific account to have no editor,
| | 05:15 | yet your client can still maintain
their editor, which is really, really great,
| | 05:21 | because then you don't have to have the
same interface as your client. You can
| | 05:25 | just have the geeky interface, and your
client can have the one that's easier to use.
| | 05:29 | So that's what all these things are here for.
| | 05:32 | I am not going to change the settings
on any of them, but they're here if you
| | 05:36 | ever do need to change the
settings for one of your users.
| | 05:39 | And now I'm just going to hit Save & Close.
| | 05:41 | And I have created my new user, here he
is, Joe Distributor; his User Name is Joe.
| | 05:45 | And I get this little notice at the
top of the screen here, for those of you,
| | 05:49 | particularly, if you're on WAMP.
| | 05:51 | It says, Notice, Could not
instantiate mail function.
| | 05:54 | Normally, when you create a new user for
your Web site, an e-mail is generated, and
| | 05:59 | goes right on out to that person at
the e-mail address you have specified.
| | 06:03 | And that e-mail address will
contain that user's username and password.
| | 06:08 | However, since I'm working here
locally on my computer that's in front of me
| | 06:12 | using WAMP, my local computer is not configured
to do e-mail, and that's why I get this error.
| | 06:17 | Basically, it's telling me I couldn't
send Joe an e-mail to tell him what his
| | 06:21 | username and password were.
| | 06:23 | Well, since that's obviously a fake
e-mail anyway, I don't really care.
| | 06:26 | But just be aware of that, as you work locally,
those e-mails will not be sent, at least on WAMP.
| | 06:31 | I can now take this login, and I'll show you
I can log in to the front-end of the Web site.
| | 06:36 | So if switch here to the front-end of
the Web site, and I scroll on down to
| | 06:40 | the bottom of the page.
| | 06:41 | I have a Login link down here. It's
actually really hard to find, because my link
| | 06:45 | is the same color as the
background of my Web site.
| | 06:48 | That's probably a
design problem, isn't it?
| | 06:50 | So I am going to log in to the
Web site here by clicking on that.
| | 06:54 | And I am going to type in
Joe's information.
| | 06:56 | So I am going to log in as Joe, and the Password
here is 123456, and I am going to say Login.
| | 07:03 | And once I log in to the Web site, I get
a page that has his profile information,
| | 07:07 | and his basic settings here.
| | 07:09 | Notice also, the
background of the Web site changed.
| | 07:12 | Remember that in our template styles,
we had the homepage for our Web site set
| | 07:17 | to have that dark blue color only,
| | 07:20 | and all the other pages were
set to have this orange color.
| | 07:23 | Now that I am logged in as Joe, I can
edit my profile by clicking this button,
| | 07:28 | and I could do things like reset my User Name or
Password here, and reset a few of these options.
| | 07:34 | But these are the only special things
that Joe can currently do on this Web site.
| | 07:38 | He can edit his own profile, change his
User Name, and Password, or he can see his
| | 07:43 | profile displayed on the screen.
| | 07:44 | Those are the only things that exist
right now for him. We will be adding
| | 07:48 | to that functionality.
| | 07:49 | So, to fix this problem with these links
that have sort of disappeared down here
| | 07:53 | at the bottom of this page, I am going to
fix that real fast right now while I'm here.
| | 07:58 | I am going to go over to
Extensions > Template Manager,
| | 08:00 | and I am going to make a change here.
So, rather than having my English homepage
| | 08:04 | here assigned to this particular
template, I am going to click on this, I am
| | 08:09 | going to go to the Menu assignment, and
I am going to uncheck English Home there,
| | 08:13 | and say Save & Close.
| | 08:16 | And that will give me back my orange
background here for the Web site; there we go.
| | 08:20 | And now I can see my footer navigation again.
| | 08:23 | I have done that because now I'm
actually going to use my footer navigation, so
| | 08:26 | it's kind of important
that I'm able to see it.
| | Collapse this transcript |
| Exploring default access levels| 00:00 | Joomla's ACL really has two pieces to it.
| | 00:03 | One part is who can create, edit, delete,
and publish what, and the other side of
| | 00:10 | it is who can see what.
| | 00:12 | So that side of it, the who can see
what side, is controlled by something
| | 00:16 | called access levels, and I just want to
acquaint you with these access levels real quickly.
| | 00:21 | So here under Users,
if we go to Access Levels,
| | 00:24 | by default, there are four
access levels for our Web site.
| | 00:28 | So Public, Registered, and Special
have been around forever inside of Joomla,
| | 00:33 | and Guest is new to this version of Joomla.
| | 00:35 | So Public indicates that that is the public.
| | 00:38 | Anybody who comes to visit the
front-end to your Web site, this is
| | 00:41 | information that anybody can see, and they don't
have to be logged in to the Web site to see it.
| | 00:46 | Registered means that you can log in to
the front-end of the Web site; that's the
| | 00:50 | registered user group side of this.
| | 00:52 | The Registered access level controls
who can see what on the front-end of the
| | 00:57 | Web site once they are logged in.
| | 00:59 | So that would actually include
| | 01:02 | the Registered user group, as well as
Authors, Editors, Publishers, Managers,
| | 01:10 | Administrators, and Super administrators;
all of them have the ability to log in to
| | 01:15 | the front-end of the Web site.
| | 01:17 | All of them can see the content
that's here set up for with the
| | 01:21 | Registered access level.
| | 01:23 | Special means that user groups of
Author and higher can see that particular
| | 01:28 | content; so Authors, Editors, Publishers,
Managers, Administrators, and Super
| | 01:34 | administrators, or Super Users, can all see
that particular information on the Web site.
| | 01:39 | Special is used a lot here in the back-end
for controlling who can see the modules.
| | 01:44 | So like the menu module here at the top
of the screen in my administrator side,
| | 01:49 | the access level
associated with that is Special.
| | 01:53 | And I recommend that you don't really
use Special for the front-end of the
| | 01:56 | Web site. It's become an incredibly useful
thing on the back-end of Joomla in particular.
| | 02:02 | And then the last level, which is new
this time around, is the Guest level, and
| | 02:07 | the Guest level indicates that you are
new to the Web site, and you are looking
| | 02:11 | at something, but this particular item
should display only if you are not logged
| | 02:17 | in, and if you are logged in,
| | 02:19 | then this particular item
would not display at all.
| | 02:22 | So you might have, as we will have later
on in this video, you might have a link
| | 02:26 | that says become a distributor.
| | 02:28 | And that's available if
you're not logged in to the Web site.
| | 02:31 | But if you log in to the
Web site, that link goes away.
| | 02:34 | If you log in,
obviously you're a distributor,
| | 02:36 | so that link that says become a
distributor, it's gone, and it's replaced with,
| | 02:41 | perhaps, some other information, and
that's what we will be building later on in
| | 02:45 | this particular chapter.
| | 02:46 | So remember that access levels have to
do with who can see what; that's all. Who
| | 02:51 | can see what, either of the front-end
or the back-end to the Web site.
|
|
|
