IntroductionWelcome| 00:00 |
♪ (music playing) ♪ Hi, I'm Laura Gordon, web
developer, trainer, and consultant.
| | 00:08 |
My work with Joomla extends beyond
creating sites for customers.
| | 00:12 |
I am also a board member for the Joomla
User Group in New York City.
| | 00:15 |
And regularly teach courses for Joomla
training and elsewhere in New York
| | 00:18 |
several times a year.
I know firsthand how extending Joomla can
| | 00:22 |
make your site not only more dynamic but
your life easier, which is why I'm so
| | 00:26 |
excited to offer you this course.
This course will give you the opportunity
| | 00:32 |
to take your current Joomla site to the
next level.
| | 00:34 |
First we will expand your site by cloning
a pre-built site which you will then use
| | 00:38 |
as the foundation for the course.
After the fundamental site is created, we
| | 00:43 |
can build on it piece by piece, making it
more dynamic by applying Joomla core
| | 00:47 |
functionality and enhancing it with
feature-rich components and modules such
| | 00:50 |
as event managers and news modules.
Lastly, we will spend time on the access
| | 00:57 |
control levels, which limit who can alter
and view different areas of the website.
| | 01:02 |
These are relatively new features to the
Joomla environment and give you much more
| | 01:06 |
control over your site.
This course will help you add dynamic
| | 01:10 |
functionality to your Joomla site so you
can move beyond using basic edited content.
| | 01:15 |
You will also learn to modify templates,
link your site to social networks,
| | 01:18 |
display automatic updates from within the
site and so much more.
| | 01:23 |
| | Collapse this transcript |
|
|
1. Extending Joomla! 2.5Using extensions for your Joomla! site| 00:00 |
Joomla is an open-source content
management system.
| | 00:05 |
But what you get when you install Joomla
is the capability of being able to
| | 00:08 |
install extensions, components and
modules to enhance your system even more.
| | 00:15 |
In this lesson, we're going to review how
you can select the different extentions,
| | 00:18 |
and how to get through the JED, or Joomla
extension directory.
| | 00:23 |
We'll then review the different cost
models of the different extensions and
| | 00:27 |
how you can pay for some or some may be
free.
| | 00:31 |
To begin, if you go to the website
www.joomla.org, this is the main website
| | 00:36 |
for Joomla.
To find extensions, if you go on to the
| | 00:40 |
top and click on extend, you can see here
the directory.
| | 00:45 |
Another term for the Joomla extensions
directory is the JED or the J E D, that
| | 00:49 |
some people may refer to it as.
This is where joomla.org keeps all of the
| | 00:55 |
extensions that you could use in Joomla.
There are other extensions that may not
| | 01:00 |
be found on the JED that are also
valuable as well.
| | 01:04 |
In order to be listed under the Joomla
extensions directory, or the JED, there's
| | 01:08 |
certain requirements that you must meet.
If you scroll down on the left-hand side
| | 01:12 |
you can find the link that says terms of
service.
| | 01:15 |
If you click on the Terms of Service it
goes over all of the different
| | 01:18 |
requirements that are needed in order to
be on the JED.
| | 01:23 |
Anyone is able to submit their extensions
over to the JED.
| | 01:26 |
But as a basic requirement, all
extensions and listings must comply with
| | 01:29 |
the latest version of the Joomla license.
They can't violate or attempt to violate
| | 01:35 |
the security of Joomla extensions
directory.
| | 01:38 |
They cannot post, upload, email or link
to any content that contains any viruses.
| | 01:43 |
You cannot use the directory to send
unsolicited emails.
| | 01:47 |
You cannot impersonate anyone else.
And only one account is allowed per person.
| | 01:52 |
If you're thinking of submitting your
owed extension to the JED, make sure you
| | 01:55 |
go through these terms of service.
One of the biggest advantages of using
| | 01:59 |
tools that are inside of the Joomla
extension's directory are the reviews.
| | 02:03 |
On the left-hand side if I click on All
Categories I can see here all the
| | 02:06 |
different categories of different tools I
can work with.
| | 02:11 |
Let's say I'm looking for image rotators.
So under photos and images, I can click
| | 02:16 |
on Image Rotators and there are 104
different extensions.
| | 02:19 |
Let's scroll down and look at the basic
layout of the directory.
| | 02:23 |
So you can see here what versions of
Joomla the tool will work for.
| | 02:27 |
And just as a note, if it says 1.6
chances are it will work with 2.5.
| | 02:32 |
They're in the process of updating all of
that now.
| | 02:35 |
You can see the number of stars for the
ratings, how many reviews there are for
| | 02:38 |
the product, what type of product it is.
If it's a M it's a module, C component, P plugin.
| | 02:45 |
You have a brief description of it, their
website.
| | 02:48 |
And you also have if it's commercial or
non-commercial and the last date that it
| | 02:51 |
was updated.
As far as commercial and non-commercial
| | 02:55 |
goes, if it's non-commercial, typically
it means it's a free product to download
| | 02:58 |
and you can use it as you wish.
If it's commercial, there are two basic
| | 03:03 |
cost models that go along with Joomla
components.
| | 03:07 |
One cost model is you just pay for the
component itself and you have to pay for
| | 03:11 |
it each time it's used on a different
website.
| | 03:14 |
Another cost model is what you're paying
for is actually the support of the product.
| | 03:19 |
So you can install that product on as
many websites as you want, but you're
| | 03:22 |
paying for one year of support.
So let's say they come up with a new
| | 03:27 |
version, within that year, you are
eligible to get that version, because you
| | 03:30 |
have the support license.
A year later, if you want a new update of
| | 03:35 |
that component, you will need to purchase
a new subscription license.
| | 03:40 |
To look at the reviews, I click here,
where it says 37 reviews on simple spotlight.
| | 03:47 |
And I can scroll down and I can see all
the different reviews from the different
| | 03:50 |
people that have used the product.
To me this is one of the most important
| | 03:54 |
things that I use when I'm trying to
decide what product to use.
| | 03:58 |
In addition, you can go over to their
website.
| | 04:01 |
Once on their website, I recommend you
look at their forums.
| | 04:04 |
The forums is a great support tool where
current users of the product may answer
| | 04:07 |
questions or you want to find out about
their actual support.
| | 04:12 |
In this lesson we reviewed how you can
find the best extensions to enhance your
| | 04:16 |
Joomla website.
First we looked at the different
| | 04:20 |
extensions through the JED or the Joomla
Extensions Directory.
| | 04:24 |
And then we reviewed the different cost
models or different things you should
| | 04:27 |
think about when you're deciding what
extension to install on your website.
| | 04:32 |
| | Collapse this transcript |
| Resources for your Joomla! site| 00:02 |
When you decide to use the Joomla content
management system, you not only get a
| | 00:05 |
content management system, but you get an
entire community of resources.
| | 00:10 |
In this lesson we're going to review the
different resources that will come in
| | 00:13 |
very handy to you when you're building
your system.
| | 00:18 |
First of all, there are different events
that Joomla hosts.
| | 00:21 |
The user groups that are typically free
to attend and then the Joomla.org forums.
| | 00:26 |
To begin, you always want to start off at
the Joomla.org website.
| | 00:30 |
Through this website, you can find all of
your different community resources.
| | 00:34 |
First, let's look at the events.
Go to community and support and then
| | 00:37 |
click on Joomla events.
Typically the user groups all around the
| | 00:45 |
world sponsor a joomla day type event
once a year.
| | 00:49 |
Almost every single month throughout the
year you could probably find a Joomla Day
| | 00:53 |
somewhere Internationally or in the
United States.
| | 00:56 |
A Joomla Day event typically has some
kind of cost involved.
| | 01:00 |
But what you get in that day is the
opportunity to meet with Joomla
| | 01:04 |
developers, Joomla component developers
and members that are on the actual joomla
| | 01:08 |
dot org team.
Usually there are different workshops
| | 01:13 |
that are offered to you and you can go or
attend whatever workshops interest you.
| | 01:19 |
Each gym lit day is typically run by a
specific user group and their run
| | 01:22 |
independently of gym lit dot org.
(UNKNOWN) great idea to attend at least
| | 01:27 |
one of these events per year because not
only you get to mingle with other Joomla
| | 01:31 |
developers, but you will find out whats
next in Joomla.
| | 01:36 |
And so you know what to look forward to.
Another area of resources is Joomla's use
| | 01:41 |
of group community.
If you go to community and support and
| | 01:45 |
click on Joomala user groups, From here
you can see the Joomial user groups that
| | 01:49 |
are all over the world.
Another term for the Joomial user groups
| | 01:55 |
are the jugs, JUG.
Sometimes these meetings have a small
| | 01:59 |
monetary fee to attend, and other times
the meetings are actually free to attend.
| | 02:04 |
Depending on where your local area is,
you should look up whatever user group
| | 02:07 |
meetings happen to be going on in your
specific area.
| | 02:11 |
If you are interested in starting your
own user group.
| | 02:14 |
Feel free to contact other user group
leaders.
| | 02:16 |
To find out information on what you need
to do.
| | 02:19 |
To start a User group.
Personally, I know the User group
| | 02:22 |
meetings that I attend in New York.
Happen once a month.
| | 02:26 |
And each month, we have different
speakers attend the meetings.
| | 02:28 |
To talk about different things that are
happening in the general world.
| | 02:31 |
Or the general community.
We also typically like to have lightning
| | 02:35 |
rounds where people can just ask
questions and give answers, and then
| | 02:37 |
lastly we always try to have time for
some kind of networking area because
| | 02:40 |
that's really what we need from these
user groups.
| | 02:45 |
Another resource you can get from
joomial.org are the forums.
| | 02:49 |
If you go to community and support and
then click on the Joomial forum I highly
| | 02:53 |
recommend you become a user of this form,
and not only should you be getting
| | 02:57 |
answers to your questions, but if once a
week you attempted to answer somebody
| | 03:02 |
else's question.
You will also get to learn more about the
| | 03:08 |
system and as even the most advanced
Joomla users say, that sometimes The most
| | 03:12 |
newbie or intro level users, have the
best answers because they're learning it
| | 03:15 |
from scratch.
The forum is extremely active.
| | 03:20 |
An as you can see, in the Joomla 2.5 ask
support questions, there are over 60,000
| | 03:26 |
posts here.
So if you have any question at all,
| | 03:30 |
chances are, you can find it here.
In this lesson we reviewed different
| | 03:35 |
resources that you can get from
Joomla.org.
| | 03:38 |
First of all attending Joomla days is a
great way to meet new people and to learn
| | 03:42 |
more about the Joomla community.
Attending a monthly user group meeting
| | 03:47 |
again, is that much smaller level than a
Joomla day, but you will also get to
| | 03:51 |
network with different developers in your
specific area and then lastly the Joomla
| | 03:54 |
forums give you a chance to see questions
that other people have.
| | 04:00 |
And perhaps you can help them, or perhaps
they can help you.
| | 04:03 |
| | Collapse this transcript |
| Additional functionality in Joomla! 2.5| 00:00 |
When Joomla 2.5 came out, there were a
lot of new features that were added to
| | 00:04 |
the system.
In this lesson we're going to review just
| | 00:08 |
a couple of those features.
First we're going to look at the Joomla
| | 00:13 |
update notification button which is new
to Joomla 2.5.
| | 00:16 |
The caption in the core that's again new
in 2.5.
| | 00:21 |
And then also how you can change the
notification to administrators when a new
| | 00:24 |
user registers, and then lastly how the
batch copy and move works, because that
| | 00:28 |
is also different in 2.5.
In January of 2011 Joomla 1.6 came out.
| | 00:35 |
That gave us the functionality of acl and
a lot of these features I'm going to
| | 00:38 |
discuss now.
In July of 2011 1.7 came out, and then in
| | 00:43 |
January of 2012 release 2.5 came out.
Release 2.5 is based off of Joomla 1.6
| | 00:51 |
and 1.7.
So the differences between 1.6 and 2.5
| | 00:56 |
are not that great.
So, when I discuss new features for 2.5,
| | 01:01 |
most of those features were actually
initially introduced in Joomla 1.6.
| | 01:07 |
To begin, the first thing to know is the
Joomla update notification.
| | 01:11 |
If you require a new release of Joomla
or, let's say, a new version of Joomla
| | 01:15 |
came out.
Under your quick icons, there will be a
| | 01:19 |
button stating to update Joomla.
If you're not sure and you want to check
| | 01:23 |
the most current release of Joomla, you
can go to Components and Joomla update.
| | 01:28 |
On the Joomla update, it will tell you if
there are additional releases available,
| | 01:31 |
or if you're on the most current release.
This is a really great feature that we've
| | 01:37 |
been waiting for for a long time.
What's nice is now you can tell your
| | 01:41 |
users that they can update the site
themselves at the click of a button.
| | 01:46 |
Just to note, when 3.0 comes out or 3.5
comes out, that release may not be as
| | 01:49 |
simple because of other changes that may
be happening, so I recommend these types
| | 01:53 |
of push-button releases.
It's really for the releases between
| | 01:59 |
2.5.4, 2.5.5, and so forth.
Before clicking a button to move to a
| | 02:05 |
release such as 3.0 or 3.5, you might
want to just go over and make sure that all
| | 02:08 |
of your components are going to work with
that new release of Joomla.
| | 02:14 |
Another feature is how users are managed.
If you go to users and user manager,
| | 02:19 |
there is now an option to work with
Captcha in the Core.
| | 02:25 |
To see that, once you are in User
Manager, click on Options on the top
| | 02:28 |
right-hand side.
The Users Configuration page tells us
| | 02:32 |
what happens when a new user attempts to
register for your site.
| | 02:38 |
Towards the bottom there's an option for
Captcha.
| | 02:41 |
You can turn this on by just clicking on
the drop-down an selecting the Captcha
| | 02:44 |
that you want.
Either I can use default or none selected.
| | 02:49 |
In order for this to completely work I do
need to enable the Captcha plugin.
| | 02:54 |
So now we're going to go back to the plugin
manager, to enable our Captcha plugin.
| | 02:59 |
I can click Cancel here and then go to
Extensions and Plug-In Manager.
| | 03:06 |
Once I'm in the Plug-In Manager, I can
see the option for Captcha-ReCaptcha, and
| | 03:09 |
I can click on it here.
I want this to be enabled, and I can
| | 03:15 |
change the enabled property to enabled on
the left side, and then I need to
| | 03:18 |
retrieve a public key and a private key.
I can get these keys from
| | 03:24 |
google.com/recaptcha and I'm going to
click on the link below and then I can
| | 03:28 |
click on the button to use Recaptcha on
your site and then I can click Sign up Now.
| | 03:36 |
I just have to put in here, the name of
my website, which is www.june-acquarium.com.
| | 03:43 |
So you click on the create key and now
your given the public and the private key.
| | 03:52 |
I can highlight this code, and copy it
using my shortcut keys on my keyboard or
| | 03:56 |
however your able to copy.
Go back to my administration panel, and
| | 04:01 |
in the public key I can paste it in,
again using my shortcut keys on my keyboard.
| | 04:06 |
Then I go back and grab the private key,
copy that, and then go back to
| | 04:10 |
Administration and then paste it in the
private key.
| | 04:14 |
I can then click Save and Close.
Now that I've enabled my plug in and I've
| | 04:21 |
put in what the keys are I can go back to
the user manager, go to options, on the
| | 04:26 |
top right-hand side...
By setting the captcha up here, what that
| | 04:33 |
means is when a person attempts to
register for my website they're going to
| | 04:36 |
have to put in a captcha code which is
generated and it prevents spamming from
| | 04:40 |
getting into your system.
Another new option in 2.5 is the
| | 04:45 |
capability of sending a notification mail
to administrators.
| | 04:51 |
When you set up these options are far as
if you're going to allow user registration
| | 04:54 |
or not, I can click the allow user
registration to 'yes'.
| | 04:59 |
Then I have an option of new user account
activation.
| | 05:02 |
What that means is if when they register,
if they're going to get registered
| | 05:06 |
automatically right away If it is set to
self, then the user is going to get an
| | 05:09 |
email with a link in order to activate
their account.
| | 05:15 |
If its set to administrator then the user
is going to be emailed to link to verify
| | 05:18 |
their email address.
Then an administrator will be notified to
| | 05:22 |
activate the users account.
But if you have one of the options set to
| | 05:27 |
either none or self.
The administrators never going to know
| | 05:30 |
when new people register for the system.
So, this new option gives me the
| | 05:35 |
capability of selecting Yes.
So, if I set this to yes, what that means
| | 05:39 |
is when a new person registers for my
website, the administrator will get an
| | 05:42 |
email message.
And then I click Save and Close.
| | 05:48 |
Another new feature of 2.5 is how the
batch copy and move works.
| | 05:54 |
If you go to Content in article manager.
Prior to release 2.5 the options for copy
| | 06:00 |
an move, were on the top side, up here on
the right.
| | 06:04 |
Now the batch copy an move is at the
bottom of the page.
| | 06:08 |
Let's say I want to move, two of my
articles to a different category.
| | 06:13 |
If I click on the check boxes to the left
and scroll down I have an option.
| | 06:18 |
Select category for move or copy.
I can click on select and move them both
| | 06:23 |
to the general category.
I could select either move or copy, an
| | 06:28 |
then I can click process.
So what this just did was, through a
| | 06:32 |
batch process I was able to move or copy
multiple files at the same time.
| | 06:37 |
If you want to get a complete listing of
all of the new features for Release 2.5,
| | 06:41 |
I recommend you go to the Joomla.org
website.
| | 06:46 |
Once I get to Joomla.org, in the search
box on the top right, I can type in
| | 06:49 |
features for 2.5 and just hit my enter
key.
| | 06:55 |
If I scroll down, I can see the option of
Joomla 2.50 release and click on this
| | 06:59 |
entry right here.
If I scroll down here, I can see the
| | 07:04 |
complete listing of all of the new
features that were added for 2.5 with a
| | 07:08 |
link to each of them that gives you more
information about each of those features.
| | 07:14 |
In this lesson, we reviewed some of the
features in release 2.5.
| | 07:18 |
We looked at the User Manager and how we
can change the options for the users,
| | 07:22 |
such as changing the Captcha and also
changing the administration, as far as
| | 07:26 |
what emails they get.
We looked at the Jooma Update
| | 07:32 |
Notification button.
And then I showed you how you can batch
| | 07:37 |
copy and move files in 2.5.
| | 07:41 |
| | Collapse this transcript |
| Customizing offline access| 00:02 |
A new feature in Joomla 2.5 is the
customization of offline access.
| | 00:04 |
In this lesson, we'll go through the
options of how you can customize the
| | 00:09 |
offline access page by adding a message
and even your own image.
| | 00:15 |
And then we will review how you can give
a registered user offline access, which
| | 00:19 |
is also something that's new for 2.5.
To begin, if you go to the administrator
| | 00:24 |
end of your website, and the website I'm
working in today is
| | 00:27 |
joom-aquarium.com/administrator, you will
have to work on your own website if you
| | 00:31 |
would like to follow along.
First you're going to go to site and global
| | 00:38 |
configuration, and then you want to set
the site settings, which is the first tab.
| | 00:44 |
You have the site name, and then you have
the option here of Site Offline.
| | 00:48 |
The reason why you would use the site
offline is let's say you are in the
| | 00:50 |
process of building the website and you
don't want the general public to see your
| | 00:54 |
website as you're working on it.
But you do want the people or your
| | 00:58 |
customers or other people that want to
view your website and help you out with it.
| | 01:04 |
You want them to have access.
So if we make the site offline, we
| | 01:06 |
basically give the capability of only
people that are able to log on to your
| | 01:10 |
system access.
So for right now, let's turn your site
| | 01:15 |
offline and click on Yes.
For right now, I'm going to use the
| | 01:18 |
custom message.
And a new feature in 2.5 is that I can
| | 01:21 |
actually change this text right here.
Currently it says this site is down for maintenance.
| | 01:28 |
A break, which is a new line, please
check back again soon.
| | 01:32 |
Another customization that we have in 2.5
is the offline image.
| | 01:37 |
What that means is that I can actually
upload an image from my computer to be
| | 01:40 |
displayed on the website when it's
offline.
| | 01:43 |
Perhaps I want my logo to be displayed.
To do that I can click on the Select button.
| | 01:49 |
And then click Browse in order to upload
that image.
| | 01:52 |
And I'm going to upload my image
offline-logo.png.
| | 01:54 |
Click Open and then click Start Upload.
The only requirement for this image is it
| | 02:01 |
should be less than 400 pixels wide.
Other than that it's up to you what you
| | 02:08 |
want this image to look like.
I'm going to select my offline logo and
| | 02:12 |
then click Insert.
Once I'm done, I can click Save and close.
| | 02:19 |
And let's preview the website to see how
it looks.
| | 02:21 |
I can click on View Site on the top
right, and now when I come to the website
| | 02:24 |
I have my logo up here on the top, the
title of the website.
| | 02:29 |
The custom text that I put in there.
And then user name and password.
| | 02:34 |
I can log in as my super administrator.
Click Log In.
| | 02:43 |
And now I can walk through the website.
But what if you want a regular registered
| | 02:47 |
user to be able to access this website?
Prior to release 2.5, you did not have
| | 02:52 |
the capability, only administrators and
super-administrators could access the
| | 02:56 |
website when it was offline.
But typically you're going to be working
| | 03:01 |
with people that you don't want to give
administrator or even editing access to.
| | 03:06 |
So let's see how we can work that out.
Go to the back end, and first, lets add a
| | 03:11 |
user to our system.
If you go to User > User Manager, click
| | 03:15 |
on Add New User, the user name, I'm just
going to type user one.
| | 03:22 |
The log in name I'm going to call it user
one.
| | 03:24 |
I'm going to give it a password.
Confirm it.
| | 03:27 |
I'm going to put in an email address.
And I want this user to be in the group,
| | 03:33 |
registered for a registered user.
And then click Save and close.
| | 03:39 |
Now, if I go back to my website, and I
make sure I log out.
| | 03:43 |
Because I was initially logged in as a
super user.
| | 03:45 |
I'm going to click on Log Out.
And now I'm going to log in again.
| | 03:49 |
But this time as user one.
And click Log In.
| | 03:55 |
But nothing happens.
The reason why is because by default,
| | 03:58 |
registered users do not have offline
access.
| | 04:02 |
Let's fix this now.
If I go back to the administration, from
| | 04:06 |
here I go to Site > Global Configuration,
and then I click on Permissions.
| | 04:13 |
Under Permissions, by default, a
registered user offline access is set to
| | 04:17 |
inherited, or otherwise they are not
allowed.
| | 04:22 |
If I want my user one, and all others
that are in my registered group to have
| | 04:25 |
access to the website while it's offline,
I can change this from Inherited to Allowed.
| | 04:32 |
And then go up and click Save and close.
Now let's go back to the website.
| | 04:38 |
And try to log in.
Click Log In.
| | 04:47 |
And now because user one, is part of the
registered group.
| | 04:51 |
And we gave you users of the registered
group, access to the website when it's offline.
| | 04:56 |
I can now access the website.
In this lesson, we reviewed how you can
| | 05:00 |
customize offline access by either
customizing the message and, or adding
| | 05:04 |
your own image to display when the site
is offline.
| | 05:09 |
And then we reviewed how you can give a
registered user offline access to the
| | 05:14 |
system, which is a brand new feature of
Release 2.5.
| | 05:19 |
| | Collapse this transcript |
|
|
2. Copying an Entire Joomla! SiteUsing Akeeba Backup| 00:02 |
In this lesson, we'll discuss why you
would need create a (UNKNOWN) website,
| | 00:05 |
how to install Akeeba Backup, and then
how to create your Backup.
| | 00:11 |
Let's say your joom-aquarium.com is
working fine, but you want to create a
| | 00:15 |
test environment on the same host, but in
another folder, again, on the same server.
| | 00:24 |
In order to do that with Joomla, you
can't just move certain files over to
| | 00:27 |
another folder.
You need to actually create a Backup,
| | 00:31 |
including the Database, the PHP files,
and any image files or anything else you
| | 00:35 |
may be working with.
So the first step to begin is we need to
| | 00:39 |
install a tool called Akeeba Backup.
To find that, you can go to akeeba.backup.com.
| | 00:47 |
Akeeba Backup is free to use for as many
websites as you like.
| | 00:51 |
But you can also purchase through Akeeba
Backup, a subscription, which will enable
| | 00:55 |
you to get more advance features of their
tools.
| | 00:58 |
To download Akeeba Backup, once you're on
their website.
| | 01:02 |
On the top menu, you can click Download.
From here, if you scroll down, you can
| | 01:08 |
see Akeeba Backup.
And you can click View releases in this category.
| | 01:14 |
To find the most recent version, just
scroll down.
| | 01:16 |
Typically, the first version is only
available for professional users.
| | 01:21 |
But you'll be able to grab the next
stable version of it.
| | 01:24 |
So I'm going to grab it here.
With all the Akeeba Backup tools, they
| | 01:30 |
give you the files itself, which will be
a Akeeba Backup Core.
| | 01:34 |
And then they have a Quick Start Guide
and Documentation PDF.
| | 01:38 |
Make sure you review these documents in
case you have any questions.
| | 01:42 |
And I'm going to click Download now.
And I'll save the file to my Local Computer.
| | 01:47 |
Once you've downloaded the file, you can
go to the back end of your current website.
| | 01:52 |
From here, you can log into your system.
To install it, go to Extensions >
| | 02:03 |
Extension Manager, click on Browse.
And then you can find the file.
| | 02:13 |
And then you'll click Upload & Install.
Once it's been installed, you can go to
| | 02:19 |
Components in Akeeba Backup, and you can
create your first backup.
| | 02:23 |
To do that, I can just click on Backup
Now.
| | 02:29 |
This system goes through different steps
to backup the databases and the files of
| | 02:33 |
your system.
You don't want to move to any other pages
| | 02:36 |
while the backup is being run.
Once it's done, you can administer backup files.
| | 02:45 |
And then you could download the backup
that you just got.
| | 02:49 |
To download it, you can actually just
click on where it says part00.
| | 02:53 |
Sometimes, there may be multiple copies
of it.
| | 02:55 |
You want to download both copies.
It would be part01, part02, and so forth.
| | 03:01 |
But for this backup, it's only one file.
Typically, it will give you a warning if
| | 03:06 |
you're downloading it directly from the
browser, but it's really okay to do,
| | 03:09 |
especially for small files.
If it's larger, you should go to your
| | 03:13 |
File Manager and back it up through the
Backup directory.
| | 03:19 |
And then you can just save the file onto
your Local Computer.
| | 03:24 |
In this lesson, we just reviewed what you
would need the backup for, how to install
| | 03:27 |
Akeeba, and then how to create your
Backup.
| | 03:30 |
| | Collapse this transcript |
| Installing Kickstart and preparing the host| 00:02 |
When you go through the process of making
an entire clone or backup of your website.
| | 00:06 |
First you have to setup your host.
In this lesson first we are going to
| | 00:10 |
install a tool called Kick Start from
Aceba Backup which will help walk us
| | 00:14 |
through the process.
Then we are going to set up our host by
| | 00:17 |
creating a folder that we are going to
put our site in.
| | 00:21 |
And then we're going to create a blank
database that we're going to work with
| | 00:23 |
later on.
To begin, let's go to akeebabackup.com
| | 00:27 |
and click on Products so we can find the
tool called Kickstart.
| | 00:33 |
Kickstart is a tool that helps you walk
through the installation process from
| | 00:37 |
your backup into an actual website.
Currently in this web site, if I scroll
| | 00:44 |
down I can find Akeeba Kickstart.
And now I can click on Download.
| | 00:51 |
The next stop is if I scroll down, I want
to get the most current version.
| | 00:56 |
I can click on View files, scroll down
and click on the Kickstart package.
| | 01:05 |
And then click OK to save the file.
Once I've downloaded it, I do need to
| | 01:10 |
extract the zip file.
If I right-click here, on my kick start
| | 01:14 |
or if you open whatever folder you put
kick start in I'm going to click on Open
| | 01:18 |
Containing Folder so I can see the file
here.
| | 01:22 |
I'm going to right-click on it and
extract it.
| | 01:26 |
You can use whatever extracting tool you
have on your computer.
| | 01:31 |
I'm going to extract it to its own folder
and I can see all the files here that's
| | 01:35 |
part of the Kickstart zip.
It comes with many different language files.
| | 01:40 |
For today the file that I'm most
concerned about is Kickstart.PHP which
| | 01:44 |
we're going to use in a few minutes once
we've set up our host.
| | 01:49 |
I can now close up these pages and now I
want to go to my host.
| | 01:54 |
If I open up another tab my website has a
C panel...
| | 02:00 |
I can go to my Cpanel for my website.
Cpanel.
| | 02:04 |
Depending on your host, you may have a
different way of getting into this area.
| | 02:15 |
If your host is not not give you a
Cpanel, my suggestion is you contact the
| | 02:19 |
host to find out where you can go, so you
can create folders and databases for your Website.
| | 02:26 |
Every hosts sets it up differently.
With C panel what I want to do is go into
| | 02:30 |
the basic file manager first.
And I want to create a folder.
| | 02:36 |
I want to go first into Web root, click
on Go.
| | 02:43 |
Once I'm in the root folder I can now
create a new folder.
| | 02:46 |
And up top I can click on new folder.
I want this new folder to be called test site.
| | 02:52 |
This is where I'm going to build my gym
aquarium website that I want to work in.
| | 02:57 |
And then I click Create New Folder.
Once I've created the folder, I can
| | 03:01 |
scroll down and double-click on Test Site
to open up the folder.
| | 03:05 |
Right now this folder's empty.
There were 2 files I want to put in this folder.
| | 03:11 |
File 1 is kickstart.php and File 2 is my
JPA file were my backup of my website.
| | 03:19 |
First lets put in there my kickstart.php.
On the top I can click on Upload.
| | 03:28 |
Now I can click on Browse.
Now, I could scroll down on my left and I
| | 03:31 |
just need to find the folder that I put
my files in, which happens to be my
| | 03:34 |
downloads folder.
I can see in here, I have my Kickstart
| | 03:39 |
zip file, and then, I also have my
Kickstart folder.
| | 03:43 |
You cannot upload the zip file to your
directory, you need to upload Kickstart.php.
| | 03:49 |
So I'm going to open up my kickstart
folder and I'm going to find here
| | 03:53 |
kickstart dot php and click open and its
now installed.
| | 03:58 |
The next file that I need is my jpa file.
So I'm going to go back to my downloads
| | 04:03 |
and I can see here I have my jpa file.
This jpa file I created initially when I
| | 04:09 |
made a backup of my entire website Using
a key of backup.
| | 04:15 |
You can either use your JPA file or you
can go to the Project Folder and you can
| | 04:19 |
download the version of the JPA file that
we already provided for you.
| | 04:26 |
I'm going to click on it here and click
Open and it's now uploading.
| | 04:31 |
Once I go back to my file manager, I can
actually just refresh my page either
| | 04:34 |
using a shortcut key or depending on your
control manager.
| | 04:41 |
And from here, I can double-click on test
site and I can see in the test site
| | 04:45 |
folder there are 2 files - pick start up
PHP/g.
| | 04:49 |
And my site dot J P A file.
Again you can use your own J P A file if
| | 04:53 |
you want to make a clone of your current
site.
| | 04:57 |
Or if you want to follow along you can
use the J P A file that we provide for you.
| | 05:02 |
Now that I've created the folders, the
next step is I have to create a blank database.
| | 05:06 |
So if I go back to my C panel > My Home.
And then, from here, I need to go to my
| | 05:11 |
SQL databases.
And I can scroll down and click on my SQL Databases.
| | 05:20 |
We need to create a new database.
It's very important at this point to
| | 05:24 |
write down your database name, your
username, and your password because, when
| | 05:28 |
you actually install your website, it's
going to ask you for these parameters.
| | 05:35 |
I'm going to call this database test.
You may notice to the left of test, it
| | 05:39 |
says JoomAqua_.
This name is actually part of the data
| | 05:43 |
base name.
And then I click on Create Database.
| | 05:50 |
I can click Go Back.
The next step is I need to create a user
| | 05:54 |
to access this data base I'm going to call
this T-user.
| | 05:59 |
I'm going to give it a password.
Joomla928.
| | 06:01 |
And then I could hit tab, and I'm going
to put the password in again, Joomla928,
| | 06:08 |
then click on Create User.
I can close Remembering the Password, and
| | 06:18 |
then I can click on Go Back.
So, so far, I've created a database and
| | 06:22 |
I've created a user, but I need to assign
them to each other.
| | 06:27 |
So, at the bottom, it says Add User to
Database, I want the Joom Aqua T-user.
| | 06:32 |
I'm going to select Joom Aqua Test, the
new data base I created, and click Add.
| | 06:37 |
I'm going to give it all privileges, and
then click on Make Changes.
| | 06:41 |
And then I can click Go Back.
Now that we have the database, the next
| | 06:46 |
step will be to actually run the
kickstart.php file but in this lesson our
| | 06:50 |
goal was just to get everything ready.
First we installed Kickstart onto our
| | 06:56 |
local computer.
We then went to our C panel or our host
| | 07:00 |
and we created a folder that we put the
kickstart.php file in.
| | 07:06 |
We also put in there a JPA file, which is
our entire website backup.
| | 07:11 |
And then we created a blank database that
we're going to utilize when we build the
| | 07:14 |
new website.
| | 07:15 |
| | Collapse this transcript |
| Building a clone| 00:02 |
In order to make a complete backup of
your website, you need to go through a
| | 00:05 |
couple of steps.
First, you need to make a backup of your
| | 00:09 |
initial website that you want to use.
Then you need to get your host ready so
| | 00:13 |
you have a place to put the backup.
And then lastly, you need to actually
| | 00:17 |
walk through the installation process.
In this lesson, we're going to walk
| | 00:21 |
through the actual installation process,
using Kickstart.
| | 00:25 |
Kickstart is going to take us through all
of the steps that we need in order to
| | 00:28 |
install the clone of our website.
Once we've walked through all the steps,
| | 00:33 |
then we're going to actually preview the
site, and see our clone of the website.
| | 00:38 |
To begin, if you want to use your own
website and basically put a copy of the
| | 00:42 |
Joom Aquarium on your website, you will
have already had to set up your host.
| | 00:49 |
Once your host is set up and you've
created a folder to put the site in, you
| | 00:52 |
can begin.
On my website I'm putting in the domain Joom/aquarium.com/testsite.
| | 01:03 |
That is the folder that I created.
So if you were on your own website, you
| | 01:07 |
would put in there, your own
domain/testsite or the name of the folder
| | 01:10 |
that you created.
I've already put into this folder two
| | 01:16 |
files, Kickstart.php and a JPA file.
The JPA file is a backup of my original website.
| | 01:23 |
You can get a copy of this file in the
Project Files Directory.
| | 01:28 |
Or you can use your own JPA of a backup
of your own website.
| | 01:34 |
In order to begin the installation
process, just click on Kickstart.php.
| | 01:40 |
As noted in this message, Akeeba
Kickstart is not a Joomla installer.
| | 01:44 |
What it is, is an extraction tool.
What that means, is it takes the JPA
| | 01:48 |
file, opens it up, and lets us set
everything up that we need to do step-by-step.
| | 01:55 |
I'm going to click on the bottom here to
close this message.
| | 01:57 |
By default, it finds the archive tool as
the JPA file that I already have sitting
| | 02:02 |
in that folder.
Because I don't have a password, I can
| | 02:07 |
leave the next field blank, and then I
can scroll down right to files I'm going
| | 02:10 |
to set to directly.
I'm going to keep the fine tune as the
| | 02:15 |
defaults and then I'm just going to click
the green button to start.
| | 02:20 |
At this point, what Kickstart is doing,
is actually extracting the JPA file, all
| | 02:24 |
the images, all of the files, and all of
the components for Joomla into where it
| | 02:28 |
needs to go.
Now Akeeba Kickstart is going to walk us
| | 02:33 |
through the Joomla installer.
So I can click on the green button for
| | 02:37 |
the installer.
The Akeeba backup installer walks me
| | 02:41 |
through all the steps that I need to do
in order to restore our website.
| | 02:47 |
On the top-right, I can just click on
Next.
| | 02:50 |
For the database type, I can leave it as
my SQLI.
| | 02:53 |
Or, if that doesn't work for you, you can
put it back to my SQL.
| | 02:58 |
This really depends on the host that
you're working with.
| | 03:01 |
By default, for the database information,
it's using the orginal database that I
| | 03:05 |
worked with.
But I created a new database that I
| | 03:08 |
really want to use instead for this test
site.
| | 03:12 |
So for the username, I'm going to change it
to TUser.
| | 03:17 |
I'm going to put in the password of
Joomla928 that I already set up.
| | 03:23 |
And for the database name, it's
JoomAqua_Test, because that's my database name.
| | 03:31 |
And now I can scroll down.
Under the Advanced options, you have the
| | 03:35 |
option to drop existing tables.
This is a brand new database, so this
| | 03:38 |
doesn't matter here.
The database tables prefix is
| | 03:42 |
automatically generated.
This makes your site much more secure.
| | 03:47 |
I would just leave it at whatever is
generated for you here.
| | 03:50 |
But you may want to write it down just in
case you decide to access the tables from
| | 03:55 |
My SQL in the very back-end.
But if you're just a regular Joomla
| | 03:59 |
administrator, you do not need to know
this prefix.
| | 04:03 |
I'm going to keep the fine-tuning as the
defaults, and then scroll up to the top,
| | 04:07 |
and then click Next.
At this point, it's actually restoring my
| | 04:12 |
database area, and actually getting the
database set for the Joomla installation
| | 04:16 |
to finish up.
Once its been processed, I can click on OK.
| | 04:24 |
Now it's asking me information about my
Joom Aquarium website.
| | 04:27 |
It's taken the information from my
initial website.
| | 04:30 |
But what I want to do for the site name, is
I want to put up here, TEST, in capital letters.
| | 04:36 |
So that way, when I'm in the test site, I
can see it in my URL way up top.
| | 04:42 |
The title of the site is test.
So I don't get confused as to where I am
| | 04:45 |
in the site.
If I scroll down, the FTP options I'm
| | 04:48 |
going to leave as blank.
The super administrator settings, what
| | 04:52 |
that means, is it's going to keep the
current password of my current site.
| | 04:57 |
Or I could retype the password and put a
new one in there.
| | 05:00 |
And I'm going to leave the fine tuning as
is.
| | 05:04 |
I can then scroll up to the top and click
on Next.
| | 05:08 |
At this point, my site has been built,
although we can't see it yet.
| | 05:12 |
In order to see your Joomla website, you
always have to remove the installation directory.
| | 05:17 |
Akeeba backup installer gives us the
capability of removing it just by
| | 05:20 |
clicking on the link here, which says,
Remove the Installation Directory.
| | 05:26 |
Once it's been removed, I can click on
OK.
| | 05:30 |
And now I can see I'm on my test site.
Now, how do I know I'm on my test site?
| | 05:35 |
In the URL itself, I can see here
testsiteindex.php.
| | 05:40 |
So what we just did was we created a back
up of my original website.
| | 05:44 |
And we cloned it and put the entire site
in another folder, within JoomAquarium.com.
| | 05:50 |
In this lesson, we first went in to the
folder that we initially created, and we
| | 05:54 |
had Akeeba Kickstart run through its
steps to extract our actual website.
| | 06:01 |
We filled in all the parameters that it
requested and then in the end, we were
| | 06:04 |
able to view our cloned website.
| | 06:07 |
| | Collapse this transcript |
|
|
3. Quickly Adding Content to Your WebsiteUsing Mass Content to add content| 00:00 |
There are many different ways that you
can add content quickly into your Joomla website.
| | 00:06 |
One great tool is called Mass Content.
In this lesson, we're going to install
| | 00:11 |
the tool, we're going to then create
categories, all at the same time, and
| | 00:14 |
then we're going to quickly create
content articles, again all at the same time.
| | 00:20 |
To download the tool, I'm going to go to
the General Extensions Directory.
| | 00:24 |
And in the search, type mass content.
And hit Enter to refresh.
| | 00:32 |
I can scroll down, and I can see here the
tool, Mass Content.
| | 00:35 |
There are other mass content tools that
you can use, as well.
| | 00:38 |
This Mass Content tool was originally
created in 1.5 and pretty recently the
| | 00:43 |
end of 2011.
They created a version that would work
| | 00:46 |
with 1.6 and 1.7.
Eventually they're hoping to also add the
| | 00:50 |
automatic creation of menu items as well.
So I would always go directly to their
| | 00:54 |
website to see what the newest version of
it is.
| | 00:58 |
To go to their website I can click on the
bottom link of baticore.com.
| | 01:05 |
On the left I can click on Download.
To get the newest version, the way the
| | 01:08 |
site is right now, I click on where it
says Mass Content.
| | 01:13 |
And I can see the version which was
created most recently, and then click Download.
| | 01:21 |
Click Save.
Once I've downloaded, I can no go to my
| | 01:24 |
Administrator panel, go to Extensions >
Extension Manager, and then click Browse
| | 01:30 |
to install it.
I'm going to find com_masscontent, click
| | 01:36 |
Open, and then upload and install.
Once it's installed, I can now use the component.
| | 01:42 |
If I go to Components > Mass Content.
In Mass Content, there's a Control panel,
| | 01:48 |
Articles, and Categories.
First, we're going to add categories.
| | 01:54 |
Once you click on Categories, you can
see, the way this screen works out, is
| | 01:57 |
each category's its own box.
So, in Title here, I can create staff.
| | 02:03 |
Let's say, I want to create a category
for staff information, I have the option
| | 02:07 |
to select a parent here, if a want this
category to be nested within another category.
| | 02:13 |
But for now, I just want it as No
Parent.
| | 02:15 |
I can put a description for that
category.
| | 02:18 |
If I scroll down.
The next one gives me an opportunity to
| | 02:21 |
add another category.
This one, I want to call it Members.
| | 02:27 |
This category can create articles for
members of my aquarium.
| | 02:32 |
For the parent, I'm going to leave it as No
Parent.
| | 02:35 |
If you keep scrolling down, you can see,
you can add up to five categories at this point.
| | 02:41 |
When you're done you can click Save and
Close.
| | 02:44 |
And now once you're done you can go to
Content and Category Manager, and you can
| | 02:47 |
see the new categories that you created
down here.
| | 02:51 |
Staff and members.
The next step is I want to create mass
| | 02:55 |
content, or the actual articles.
If I go to Components and Mass Content,
| | 02:59 |
and then click either Add New Article, or
I can click Articles right here on the top.
| | 03:06 |
The way the Mass Content works for the
articles is very similar to the way it
| | 03:09 |
works for the categories.
Basically you have a separate Article
| | 03:12 |
page for each article that you want to
add.
| | 03:16 |
I can add up to five Articles at a time.
If I want to add more Articles, I can
| | 03:21 |
click on Options on the top right, and I
can change the number of articles to
| | 03:25 |
another number if I want.
For right now, I'm going to leave it as
| | 03:30 |
five and then just click Cancel.
Let's say I want to create articles that
| | 03:34 |
I want to put inside for the members
information, so basically these are
| | 03:38 |
articles that are only for members of the
aquarium.
| | 03:43 |
So one article I want to put in is
Special Hours.
| | 03:46 |
The category will be Members.
And here I will put that we have special
| | 03:55 |
hours for members only: Wednesdays from 8
a.m., to 10 a.m.
| | 04:02 |
The next article I want to put in is our
free day.
| | 04:08 |
This is a free day for members only.
I can change the Category to Members, and
| | 04:14 |
then here I'm going to put in Monday is
always free for all members and their families.
| | 04:26 |
Another article I want to put in here is
Special Dinner For Members Only.
| | 04:31 |
Dinner for members, make sure to select
the category of Members, and in here I'm
| | 04:38 |
going to mention that on Friday night at
7 p.m., we have a free dinner for members only.
| | 04:48 |
Once I've created my three articles I can
scroll up to the top and just click Save
| | 04:52 |
and Close.
To verify that I created those three
| | 04:57 |
articles, if I got to Content, and
Article Manager, and change the category
| | 05:02 |
to Members, I can see here these articles
were created, and all at the same time.
| | 05:09 |
If I had to go into the Article Manager
and create them one at a time, it would
| | 05:12 |
have taken much longer.
This is a really great way to create
| | 05:16 |
multiple articles on your website.
Another great reason to use this tool is
| | 05:21 |
if you're just starting your website and
you want to create basically a shell of
| | 05:24 |
the website.
So you know basic content that you want
| | 05:27 |
to put in there.
So, you can create your categories, the
| | 05:31 |
articles, get everything all set up.
And then, moving forward you can go into
| | 05:35 |
each article at a time, and make whatever
edits that you need.
| | 05:38 |
In this lesson, first we installed the
tool, called Mass Content, we then
| | 05:42 |
quickly created categories, all at the
same time.
| | 05:45 |
And then, we created articles, again, all
at the same time, instead of doing it one
| | 05:49 |
article at a time.
| | 05:51 |
| | Collapse this transcript |
| Migrating your Joomla! 1.5 content to Joomla! 2.5| 00:02 |
In this lesson, the first step will be to
get the components that you're going to
| | 00:06 |
download from J2XML.
You will need to get components for your
| | 00:10 |
1.5 release and for your Joomla 2.5
website.
| | 00:14 |
The next step will be to go to your
Joomla 1.5 site, install the tool, and
| | 00:17 |
then export your data.
Then lastly, we'll go into your Joomla
| | 00:22 |
2.5 website.
Install the needed tool and then import
| | 00:25 |
the data into it.
If you go to joomla.org, you can find the
| | 00:30 |
file for J2XML.
If you go to Extensions and the Extension
| | 00:35 |
Directory, and in the search type J2XML.
You can click on it here.
| | 00:43 |
And then you can go to the website.
To download the most recent version of
| | 00:53 |
J2XML for 1.5.
You can go to Joomla and then J2XML153,
| | 01:00 |
and if you scroll down it will give you a
link for the upload, and you can click on
| | 01:08 |
Okay to save the file.
The next file I want to download is the
| | 01:18 |
one that we're going to install on our
2.5 website, which is the J2XML Importer 1.6.0.72.
| | 01:25 |
And then I can click Save File.
My next step, is I'm going to go into a
| | 01:34 |
Joomla 1.5 website.
At this point, it's better for you to
| | 01:38 |
watch as I walk through this, because
obviously your 1.5 site is going to have
| | 01:41 |
different information.
Basically, I took a 1.5 website, and I
| | 01:46 |
have some articles in there, that I want
to take and I want to bring into my 2.5 website.
| | 01:52 |
So I'm going into my 1.5 website now.
I go to Extensions and Install.
| | 02:00 |
Click Browse, and I want to instal J2XML
1503.
| | 02:07 |
Click Upload File and instal.
My next step is, I need to activate the plug-in.
| | 02:14 |
So, if I go to Extensions and Plug-in
Manager I can see here System J2XML plug-in.
| | 02:21 |
I need to make sure to enable it.
Now, I can go to my content.
| | 02:26 |
If I go to Content and Article Manager,
again, I'm in my 1.5 website, I'm in a
| | 02:31 |
staff directory, or staff category.
This has three articles.
| | 02:37 |
That I'm going to grab.
I can select all three, and then click Export.
| | 02:42 |
The export is basically creating an XML
file that I'm going to store locally on my computer.
| | 02:50 |
Once I've exported my data, now I need to
go into my 2.5 website.
| | 02:59 |
First of all, I need to install the
version of J2XML for 2.5.
| | 03:04 |
So I go to Extension Manager > Browse,
and I'm going to install in the J2XML-Importer.
| | 03:13 |
Click Upload and install.
And now I've installed it.
| | 03:19 |
Next I can go to Components, and I can go
right into the Importer.
| | 03:24 |
From the Importer on the top right-hand
side, there's a Browse button.
| | 03:27 |
There's also options that I can set some
parameters up.
| | 03:31 |
Let's click on the Options first.
In here, it asks you some basic facts.
| | 03:36 |
First of all for categories.
If what I'm bringing in is a category
| | 03:40 |
that does not already exist.
It can create it for me.
| | 03:44 |
Or if it does exist I can override it.
But for right now, I'm just going to
| | 03:49 |
leave it at Yes Create it if it doesn't
exist.
| | 03:52 |
It also ask you questions about if you're
going to keep information from the prior site.
| | 03:57 |
The next option under Advanced is.
If you want to keep the IDs or not.
| | 04:03 |
My concern about keeping the IDs is that
in your 2.5 website IDs have already been
| | 04:08 |
naturally set.
If you force the IDs from your prior
| | 04:11 |
website you could run into problems
moving forward in your 2.5 site.
| | 04:16 |
So just be very careful here if you
choose to set a TS.
| | 04:19 |
I'm going to keep at No, and then click
Save and Close.
| | 04:24 |
My next step, is I click on Browse.
And I'm going to grab, my XML file,
| | 04:29 |
click Open.
Next, I will click on Import.
| | 04:36 |
So, it walks me through what it actually
did, it created an aquarium staff category.
| | 04:41 |
And then it created these three articles.
I can click on the Category-Staff and I
| | 04:45 |
can see here my three articles.
In this lesson we were able to get data
| | 04:51 |
from our Joomla 1.5 website and import it
into Joomla 2.5.
| | 04:56 |
Initially we had to get the files from
J2XML.
| | 05:00 |
The components that we would install on
both the 1.5 release and the 2.5 release.
| | 05:05 |
Once we got the files we worked on our
Joomla 1.5 site.
| | 05:08 |
We then exported the data from 1.5.
The next step, was we went to Joomla 2.5.
| | 05:13 |
Installed the component and then we
imported the data.
| | 05:16 |
| | Collapse this transcript |
|
|
4. Displaying Modules within Your ContentDisplaying a module inside an article| 00:02 |
In this lesson, first, we're going to
display a list of articles in a module
| | 00:05 |
position using Latest News.
Then we're going to modify the position
| | 00:09 |
of that module, so it can appear inside
of the article.
| | 00:13 |
Lastly, we will adjust the article, so
you can see that list of articles inside
| | 00:17 |
of an article.
To begin, let's look at our website.
| | 00:22 |
On our website currently, we have
different exhibits and we also have
| | 00:25 |
different events.
I can click on Events here.
| | 00:29 |
Let's say, when I'm on the Exhibits page,
I want to display the list of events on
| | 00:34 |
the left-hand side.
So, let's take care of that first.
| | 00:38 |
If I go to the back-end of the site,
gymaquariumtests/administrator and log
| | 00:43 |
in, I can go to Extensions and Module
Manager, and we're going to create a new module.
| | 00:50 |
The module we're going to work with for
right now, is going to be Latest News.
| | 00:56 |
And we're going to call this Events.
My goal is to display all of the events
| | 01:01 |
that are occurring at the aquarium.
I will select a position.
| | 01:06 |
I can change the template to Bees20, and
I could see the position I want is
| | 01:11 |
position seven, which also says here,
left-top.
| | 01:17 |
Now I go to the right-hand side to select
which category the article can be pulled
| | 01:20 |
from, and its events.
For right now, I'm going to show this
| | 01:24 |
module on all pages.
I'm going to show up to five, and then I
| | 01:29 |
click Save and Close.
Let's preview the site to see it displayed.
| | 01:35 |
I go to Exhibits and hit F5.
I can see my events listed here.
| | 01:41 |
Feed stingrays, pet stingrays, and
shark-feeding as additional articles.
| | 01:46 |
Let's say however, when I click on Shark
Adventure, I actually want to display the
| | 01:50 |
list of all of the events inside the
article of Shark Adventure.
| | 01:57 |
Keep in mind, you can do this with any
type of module.
| | 02:00 |
We're just using Latest News as an
example.
| | 02:02 |
The next step, is I go back to my
back-end, my administrator.
| | 02:07 |
I go to Module Manager and Modules, if
you're not already there, and then I
| | 02:11 |
click on the Events module.
The trick here, is I need to type in any
| | 02:18 |
position name that I want.
It does not have to be a position that's
| | 02:23 |
within the template, and it actually says
it here in the description.
| | 02:27 |
Enter your own module position by typing
in the name of the field and Save.
| | 02:32 |
So, I'm going to type in here list-events.
So, list-events is my module position name.
| | 02:43 |
Make sure to write this name down,
because we're going to use it in the
| | 02:47 |
article itself.
Then just click Save and Close.
| | 02:53 |
If I go back to the website and hit F5,
the module's no longer going to show up
| | 02:57 |
on the left-hand side.
But my next step is I want it to display
| | 03:02 |
inside of Shark Adventure.
Now I can go back to the administrator
| | 03:07 |
panel and go to Content and Article
Manager.
| | 03:11 |
A quick way for me to find sharks is, if
I type in shark in the filter, and I can
| | 03:18 |
find my Shark Adventure.
In the actual article, I need to do the
| | 03:27 |
following: I click my cursor to the last
sentence, hit enter, type a curly brace,
| | 03:33 |
loadposition, space, list-events, close
brace.
| | 03:41 |
Loadposition is a plugin that comes with
core Joomla.
| | 03:47 |
Again, it's loadposition in one word.
Space, then I put the position name, list-events.
| | 03:55 |
If I put the position, position-7,
everything that appears in position seven
| | 03:59 |
will also appear inside of my article.
In this example, it's only going to show the
| | 04:05 |
position list-events, or any modules that
happens to be in that position.
| | 04:12 |
Scroll up to the top, hit Save and Close.
Go to my Shark Adventure, hit F5.
| | 04:24 |
And now I can see the list here.
I may want to hit my enter key a couple
| | 04:29 |
of times to move it down, so it doesn't
get sucked up by the picture.
| | 04:33 |
Let's address that now.
I go back to my Shark Adventure page.
| | 04:39 |
Scroll down, I'm going to hit enter a couple
of times just to push the low position
| | 04:47 |
down a little bit.
Hit Save and Close.
| | 04:53 |
Go back to my front-end, hit F5.
And now it shows me my different events
| | 04:59 |
that are happening at the aquarium.
I may want to put a little title up here
| | 05:04 |
saying what events will be occurring at
the aquarium, or something like that.
| | 05:10 |
The function of low position existed in
prior versions of Joomla, as well.
| | 05:15 |
So if you were in Joomla 1.5, you could
also use the low position concept.
| | 05:21 |
Just to reiterate, in order for low
position to work, you need to put a
| | 05:24 |
module in a specific position, then go to
your article and type in loadposition for
| | 05:28 |
it to display.
In this lesson, our goal was to display a
| | 05:33 |
list of articles inside of an article.
In order to do this, our steps were, we
| | 05:38 |
displayed the list of articles in a
module position first.
| | 05:43 |
We then modified the module position to
list-events.
| | 05:46 |
And then to display the module within the
article, we used the plugin loadposition,
| | 05:50 |
space, then the position name, which was
list-events.
| | 05:55 |
And then we displayed our article.
| | 05:56 |
| | Collapse this transcript |
| Making content dynamic with the Related Articles module| 00:02 |
In this lesson we will modify the content
articles, so that they can be related to
| | 00:05 |
each other.
Then we're going to use the related news
| | 00:10 |
module, to display related news articles
in module positions.
| | 00:15 |
Then lastly, using Low Position, we're
going to actually display the related
| | 00:19 |
articles, inside of the content.
To start, let's look at the website.
| | 00:23 |
The Joom Aquariam website, if you click
on Exhibits and then from there scroll
| | 00:29 |
down and you can click on Stringray
Beach.
| | 00:34 |
Stingray Beach is information about the
stingrays.
| | 00:38 |
Now, click on Events.
Here you can see there some events that
| | 00:43 |
are relating to Stingrays, Feeding its
Stingrays, and Petting Stingrays.
| | 00:48 |
It would be really nice if we could
display the Feed Stingrays and the Pet
| | 00:52 |
Stingrays, on the left-hand side, when
we're on the actual Stingray page, which
| | 00:56 |
is right here.
So lets set everything up first.
| | 01:02 |
So let's go to the back end of the
website, so we can modify the information.
| | 01:06 |
Go to your Administrator panel of your
website, go to Content and Article Manager.
| | 01:10 |
In the Filter, type in Stingray, so we
can see the articles that we're thinking about.
| | 01:19 |
And you can see three articles in here.
What we have to do is we need to add to
| | 01:23 |
each article, in the Meta keywords, the
word Stingray.
| | 01:28 |
So that way, Joomla knows that these
articles relate to each other.
| | 01:32 |
So let's click on Feed, Stingrays.
On the right-hand side, click on Metadata Options.
| | 01:40 |
In Meta Keywords, put in the word
Stingray.
| | 01:43 |
Then click Save and Close.
We're going to do this for each of the articles.
| | 01:46 |
For Pet Stingrays, click Metadata
options, go to Keywords, type Stingray.
| | 01:47 |
Save and Close.
And then the last one, Stingray Beach.
| | 02:03 |
Click on Metadata Options, put in
Stingtray, Save and Close.
| | 02:11 |
Now that we made the articles capable of
being related to each other, let's go
| | 02:15 |
create the module.
So go to Extentions and Module Manager,
| | 02:20 |
from here we're going to create a new
module.
| | 02:24 |
Click on New, I'd like to use articles
related articles.
| | 02:29 |
Related articles is a core module that
comes with basic Joomla.
| | 02:33 |
So the title, we're going to type Stingray
Information.
| | 02:38 |
The position, we'll put it in position 7,
so it's on the left-hand side.
| | 02:44 |
And I can Filter by the word left, if I
don't remember what position it is, and
| | 02:48 |
then here, I can see it.
I can type in the number 7, click Search,
| | 02:53 |
and then, I could see here, position 7.
With the related articles, there's
| | 03:00 |
nothing else that you have to do, except
to put it in there, position 7, it will
| | 03:03 |
automatically find all articles that
relate to each other.
| | 03:09 |
I only want this to display though, are
my Stingray Pages.
| | 03:12 |
So I'm going to click on only the pages
selected.
| | 03:16 |
I'm going to toggle the selection, which
will take the check box off of all of the
| | 03:20 |
menu items, and now I'm just going to click
on Stingray Beach, and then scroll up and
| | 03:24 |
hit Save and Close.
Let's go back to the website and just
| | 03:31 |
click on Home.
And now we'll go to Exihits and Sting Ray Beach.
| | 03:39 |
And now on the left-hand side, it says
Stingray Information, Feed Stingrays and
| | 03:43 |
Pet Stingrays.
I think it would be very useful if we
| | 03:47 |
actually displayed this module, inside of
the Stingray Beach article.
| | 03:51 |
Maybe it would say, see here for Stingray
Events.
| | 03:55 |
And then it will list the feeding of the
Stingrays and Pet Stingrays right
| | 03:57 |
underneath it.
So to do that, we're going to use the
| | 04:01 |
Load Position.
First, I need to change the module.
| | 04:05 |
I need to change the position of the
module.
| | 04:07 |
Going to click on Stingray Information.
And I'm going to change the module to
| | 04:14 |
say, Stingray Events.
And I'm going to Copy it.
| | 04:21 |
And then hit Save and Close.
Next, I go to the Content and Article Manager.
| | 04:29 |
And I want to Modify the article Stingray
Beach.
| | 04:35 |
I'll hit my Enter key a couple of times.
And I will type see below for Stingray Events.
| | 04:42 |
Now I'll put in my Load Position, Curly
Braces, Load Position, and I can hit
| | 04:48 |
Control V to Paste Stingray dash Events.
Then I need to Close my Brace, click Save
| | 04:56 |
and Close.
I can go back to Stingray Beach, hit F5.
| | 05:04 |
Here is my dynamic content, see below for
Stingray Events, and it lists the two
| | 05:09 |
articles that actually link to Stingray
Beach.
| | 05:12 |
They link together, because of the
keywords that I put in to all three articles.
| | 05:18 |
To me, this is truly dynamic content.
As I add more articles into the website,
| | 05:22 |
as long as I put the word Stingray in the
keywords, it will automatically list them here.
| | 05:28 |
You no longer have to hard-code links to
put into articles.
| | 05:32 |
In this lesson, we reviewed how you can
make your content even more dynamic.
| | 05:37 |
To do this, we use the related news
module.
| | 05:40 |
First, we had to modify the contents, so
they can be related.
| | 05:44 |
Then we created the news module, which
was the related news module, and then we
| | 05:48 |
displayed it within the article content
by using low position.
| | 05:53 |
| | Collapse this transcript |
| Working with AiDaNews| 00:02 |
In this lesson we're going to install a
new version of the latest news module
| | 00:05 |
called AiDa News.
First we're going to install it onto our
| | 00:08 |
website and then we're going to utilize
it and display it on our website.
| | 00:13 |
To find the AiDa News module if you go
joomla.org and go to Extend and Extension
| | 00:17 |
Directory and in the search type AiDa
news.
| | 00:25 |
This news module puts together the power
of news flash and latest news all together.
| | 00:31 |
Once I see it here, I can click on it,
and then I can click on Download.
| | 00:40 |
To download the file, I go to the website
Aimini.it.
| | 00:44 |
And I want to find the newest version of
AiDa News that's available for release
| | 00:48 |
2.5, or for Joomla 2.5.
I can click on it here to download it.
| | 00:56 |
Then scroll down, click on the Download
tab.
| | 01:00 |
And then click Download.
Save it.
| | 01:06 |
Once I've downloaded it onto my computer,
I can go into my website and install it.
| | 01:11 |
So I'm going to go to my website.
Go to Extensions, Extension Manager,
| | 01:17 |
click Browse.
And then I'm going to install
| | 01:21 |
Mod_AiDaNews, and click Upload and
Install.
| | 01:23 |
To create AiDa News, first I need to look
at the website to actually see where I'm
| | 01:29 |
going to put this module.
In order to see what your template
| | 01:34 |
positions are, if you go up to the top in
your URL.
| | 01:38 |
And put in ?tp=1 and hit Enter.
You will see what your positions are, and
| | 01:46 |
I see that the one going across the top
is position 12.
| | 01:49 |
I want basically those buttons to go
across the top of the page.
| | 01:54 |
So, now I'm going to go back to my back end,
go to Extensions in Module Manager.
| | 02:00 |
From here, click on New, and select AiDa
News 2.
| | 02:04 |
For the title, we're going to type in Our
Exhibits.
| | 02:13 |
We're going to show the title and the
position.
| | 02:15 |
We want it to be 12.
If I don't remember exactly how to word
| | 02:18 |
that, I could type 12 in the filter.
Click Search and then click on position 12.
| | 02:24 |
Now, you can see the power of AiDa News
2.
| | 02:28 |
On the right-hand side, you can see all
of the different options that you can set
| | 02:32 |
up with AiDa News 2.
First of all, you have the select.
| | 02:37 |
This is where you determine how many
articles you want to display.
| | 02:40 |
We're going to leave it at the default.
You can also select which author or
| | 02:44 |
authors you want to select these from.
As far as showing unauthorized, what this
| | 02:50 |
means, is if the article is not available
to that specific user because of the
| | 02:54 |
access level It will still display it if
I say yes.
| | 03:00 |
But when they click on it, they will be
taken to an error page, saying, you need
| | 03:04 |
to log in to see this article.
So that's a decision you have to make.
| | 03:09 |
I'm going to leave it at yes right now.
Next, if you click on Select, I can
| | 03:13 |
activate the sticky.
Which basically means, to make some of
| | 03:17 |
the things float up to the top.
Next, click from.
| | 03:22 |
The from is where I decide what category
or categories I want to select from.
| | 03:28 |
If I want to select multiple categories,
I can hold my CTRL key down.
| | 03:31 |
But right now I just want to select from
exhibits.
| | 03:35 |
Do I want to include sub-categories?
Let's say you have categories within
| | 03:38 |
exhibits, you can either say yes or no
for this.
| | 03:41 |
Featured means is if you want to show the
articles that are also being included on
| | 03:45 |
your front page I'm going to leave it at
show.
| | 03:49 |
Trash means anything that is in trash.
I'm assuming you're going to want to hide
| | 03:53 |
that and then current category only will
basically only display the articles for
| | 03:56 |
the current category that you are looking
at.
| | 04:01 |
Next, let's go to Order-Buy.
You can select here basically, if you
| | 04:06 |
want them to be random, alphabetically.
I'm going to select random from here.
| | 04:11 |
The next option is Layout.
The Layout is basically determining what
| | 04:15 |
you want this to look like.
Now, what I would like it to look like is
| | 04:19 |
basically with an image thumbnail and the
title right underneath it.
| | 04:24 |
So, in the head I want that to be empty,
the top left I also want to be empty, top
| | 04:30 |
right I want empty, main left I want
empty, main center I just want Image 1
| | 04:35 |
and I'm going to delete text.
Bottom left, I want empty.
| | 04:48 |
Bottom right, empty.
And footer, I'm going to keep as empty.
| | 04:54 |
Now, if you decide you want to change
your mind, and let's say you want the
| | 04:59 |
title above the image one, what I can do,
is in the Head, just put title up here.
| | 05:07 |
Make sure for the main center when you
put image, that you put image with the
| | 05:11 |
number 1 on it.
That will show you which image it's going
| | 05:15 |
to display.
And we define the image in a little bit.
| | 05:19 |
Next, if you click on Layout.
I want a grid layout and I want 4 columns
| | 05:23 |
going across.
I'm going to leave everything else as the default.
| | 05:30 |
For the bottom link right now, I'm going
to set it to No.
| | 05:33 |
Now let's go into the Style.
Using CSS, you can actually define how
| | 05:39 |
you want your styles for every single
element that's going to be used.
| | 05:44 |
In AiDa news.
My suggestion is this is a great place to
| | 05:48 |
play and change styles as you wish, and
it's only changing the styles in the module.
| | 05:55 |
If you want to use the styles down here,
you do need to select style fields, which
| | 05:59 |
is the second option right here.
Let's keep scrolling down, I'm going to use
| | 06:03 |
everything as the defaults for now.
The next option is the Title.
| | 06:11 |
The text and the read more, for right now
for the title as far as linking it I want
| | 06:16 |
it to be Yes.
Do you I wanted to link in a new tab?
| | 06:19 |
No.
Age span I'll leave it as H1.
| | 06:23 |
Shorten title by 30, now by default its
going to set up by keys that's number of
| | 06:27 |
letters, not number of words.
I'm going to change that to words.
| | 06:34 |
For the texts we're not actually going to
display it in this specific module.
| | 06:37 |
But if you were to display it.
Something you want to keep in mind again
| | 06:41 |
is the shorten by.
Whether it's the keys or words.
| | 06:44 |
Keys is number of letters.
Words is actual number of words.
| | 06:50 |
You also have the option here if you want
to strip the HTML tags or not.
| | 06:54 |
Usually I would keep it as a Yes so that
way AiDa News is really controlling the
| | 06:57 |
way everything is displayed, but if you
don't want them stripped you can just
| | 07:01 |
click No and it will use any HTML text
that are in the article.
| | 07:08 |
The read more allows you to define how
you want the read more displayed.
| | 07:12 |
Let's go to the next part, settings for
date, category, and author.
| | 07:16 |
Here you can choose what date you want to
show, if you want to show the category or
| | 07:20 |
not and if you want it linked.
If you want a divider between the
| | 07:25 |
categories if there are multiple
categories being used and information
| | 07:28 |
about the author.
More settings here.
| | 07:34 |
For hits it's not set up yet, for the
rating you can specify how you want the
| | 07:37 |
rating to work.
For comments if you have a comments
| | 07:40 |
system shown up you can determine if you
want to show it or not and which system
| | 07:44 |
you are using.
Now let's look at tooltips.
| | 07:49 |
The tooltips allows us to define what we
want to happen when our Mouse hovers over
| | 07:53 |
an image.
For Image1, I can put Hard Bracket Title,
| | 07:58 |
and then the title will show up over the
image.
| | 08:03 |
Next, images for Image 1.
What this is going to do its going to
| | 08:07 |
take the first image tech out of the
article, and display it.
| | 08:11 |
For preference two, its going to
basically use, if it doesn't find the
| | 08:14 |
first image tag.
What default do you want it to use.
| | 08:18 |
I'm going to leave it as default image or
you could leave it as no image.
| | 08:21 |
I'm going to leave it as default.
The next option is the width and height
| | 08:25 |
of these images.
I'm going to make them pretty small.
| | 08:27 |
I'm going to make them 40x40.
And then you have the option here to link
| | 08:32 |
the image to either the article or the
category or different profiles.
| | 08:37 |
I'm going to link it to the article.
Next lets look at the Image settings.
| | 08:42 |
You have the option here to create
thumbnails, what that means is it will
| | 08:45 |
actually create and store a thumbnail to
use when the page is rendered.
| | 08:51 |
This will make your thumbs look a little
bit clearer than if you just use HTML,
| | 08:54 |
but because the images that were using
are already pretty small, I just leave
| | 08:57 |
the Create Thumbnails to no.
Next I have the behavior.
| | 09:04 |
Here is where I specify if I want to use
related articles, scroll up to the top
| | 09:11 |
and hit Save and Close.
After you save and close click on View Site.
| | 09:19 |
And now you will see going across, your
thumbnails.
| | 09:22 |
So I have Dolphin Magic, Sea Lion Circus
and so forth.
| | 09:25 |
If I click on the image for lets say,
stingray beach, it will take me to the
| | 09:29 |
stingray beach page.
In this lesson we installed the AiDa News
| | 09:33 |
module and then we displayed it on the
front page of our website.
| | 09:37 |
It showed us an easier way to display
content from your articles.
| | 09:41 |
| | Collapse this transcript |
| Display AiDaNews inside your content| 00:02 |
The Aidinus module can be displayed in a
specific module position as you can see
| | 00:07 |
here on my Joom Aquarium website.
Let's say I want to put this module
| | 00:12 |
inside of an article.
In this lesson, first we're going to
| | 00:17 |
adjust the layout slightly over the
current Aidinus module that we're working with.
| | 00:22 |
We're then going to display it inside of
an article and show it on the front page.
| | 00:26 |
And then we're going to change the home page
menu item.
| | 00:29 |
So, basically, it goes directly to our
EDA news article, we can call it.
| | 00:35 |
To begin, let's go to the back-end.
I can go to extensions and module manager.
| | 00:41 |
And then from here.
I want to find my Aida News Module.
| | 00:44 |
That I already created.
So if I go to the Filter bar and select
| | 00:48 |
the Select type, change it to Aidinus 2.
I can see here, my Aidinus 2, that's
| | 00:53 |
displayed in position 12.
This is the module that is currently
| | 00:57 |
being displayed on that front page.
I want to make a copy of it so that way I
| | 01:02 |
can modify it.
If I click on the check box on the left
| | 01:06 |
and then click on the button duplicate, I
now have a copy of it.
| | 01:12 |
I'm going to click on the copy right now.
For the title I'm going to change it to
| | 01:18 |
our exhibits.
In order to display a module inside of an
| | 01:25 |
article I'm going to use the plugin for
load position.
| | 01:30 |
But in order for that to work I need to
give this a position that I could then
| | 01:33 |
later put into my article.
So instead of using position 12, I'm
| | 01:39 |
going to change this position and call it
POS-Exhibits.
| | 01:46 |
Because this is a custom position and
we're just creating it right now
| | 01:49 |
dynamically, it's important to write this
down.
| | 01:52 |
If you spell it differently in the
article, it's not going to show up.
| | 01:55 |
So I'm going to right down POS-Exhibits.
You can call this position anything you want.
| | 02:04 |
If I scroll down, for now I'm going to
have this module appear on all pages.
| | 02:09 |
But it's actually only going to show up
on the pages that are using the position POS-Exhibits.
| | 02:17 |
Now let's modify this module slightly.
I'm going to go to the layout or the main setup.
| | 02:23 |
In the head, I'm going to leave the
title, but what I'd like to do is on the
| | 02:27 |
main left, put Image 1.
Then in the main center, I'm going to put text.
| | 02:34 |
This way it will display the intro text
from my article.
| | 02:40 |
The next thing I want to change is the
actual layout.
| | 02:44 |
So if I click Layout Options.
For the number of columns because I'm
| | 02:49 |
going to be displaying more information I
only want two columns going across.
| | 02:53 |
So, I'm going to change this to a 2.
The next piece is I want to make the
| | 02:57 |
image a little bit bigger.
So if I scroll down and go to Images,
| | 03:02 |
Image 1, then scroll up, for the width,
I'm going to change that to a 100, and for
| | 03:07 |
the height, I'll also change it to 100.
And then I'm going to click Save and Close.
| | 03:20 |
When I look at this list.
One thing that I notice here.
| | 03:23 |
Is the status is still unpublished.
Whenever you make a copy.
| | 03:27 |
Of a module.
By default, the status is going to be unpublished.
| | 03:31 |
I can publish it in two ways.
I can either click on our exibits.
| | 03:35 |
And modify the published status there or
on this listing screen I can just click
| | 03:39 |
on the red button which is what I'm going
to do now.
| | 03:43 |
This will make my module published.
The next step, in order to put this
| | 03:48 |
module inside of an article I'm going to
go to content and featured articles.
| | 03:54 |
I'm going to change my home article.
So I'm going to click on home.
| | 04:02 |
Underneath this intro text, I'm going to
hit enter, and then the curly brace.
| | 04:08 |
And I'm going to type load, position, space,
pos-exhibits.
| | 04:17 |
The POS-Exhibits, that's the name of the
position that I just created.
| | 04:22 |
And then I'm going to click Save and
Close.
| | 04:25 |
Let's go to the website and see what we
just did.
| | 04:28 |
If I click on Home and then click on
Refresh, I can see now my home article
| | 04:34 |
has my four items from my exhibits.
A nice feature, is that my images are
| | 04:41 |
actually clickable, but I still have some
adjustments that I want to make.
| | 04:46 |
First of all, I no longer need my module
in position 12, so I'm going to want to
| | 04:51 |
unpublish that.
Also, another change is if you scroll
| | 04:57 |
down I still have my featured articles
displayed here.
| | 05:01 |
Because my home menu items is displaying
featured articles.
| | 05:06 |
So let's go back to the site and make
those two changes.
| | 05:08 |
If I go back to the Administrator, first
let's go to the Module Managers and fix that.
| | 05:14 |
If I go to Module Manager, I can see
Aidinus in position 12.
| | 05:18 |
I'm going to unpublish it.
That way, the module will be displayed in
| | 05:23 |
2 places.
The next step is, I want to change the
| | 05:26 |
menu item itself.
If I go to menus and main menu, click on
| | 05:30 |
the Home menu item.
Currently, this is using a menu type of
| | 05:37 |
featured articles.
I'm going to change this to just display
| | 05:40 |
a single article.
So if I click Select, and change it to
| | 05:45 |
Single Article, then I need to select the
article.
| | 05:51 |
If I click on Select Change, I remember
the article's called Home.
| | 05:55 |
Hit Save and Close.
Let's preview the website to see what we did.
| | 06:03 |
I can click on it, refresh, and now my
home page has my Aidinus, and nothing
| | 06:08 |
else cause that's all I need at this
point.
| | 06:15 |
In this lesson first we adjusted the
Aidinus module that we were working with before.
| | 06:19 |
We made it so it was just 2 columns and
it would display better on the front page.
| | 06:25 |
We also put that module inside of a
position that we call POS dash exhibits.
| | 06:31 |
Our next step was we displayed it inside
of an article and then we made some
| | 06:34 |
alterations to the homepage and the menu
item so that way just that article would
| | 06:38 |
appear on the page.
| | 06:41 |
| | Collapse this transcript |
|
|
5. Managing EventsInstalling JEvents| 00:02 |
One of the most exciting things about
working with Joomla as a content
| | 00:05 |
management system is that you don't have
to rely on just content.
| | 00:10 |
In this lesson, we're going to find a tool
to manage events in our website.
| | 00:15 |
First, I'm going to walk you through a
real-life scenario using the JEvents
| | 00:18 |
Manager and you could see how complex it
is.
| | 00:22 |
Then we will find the tool JEvents and
install it on our website.
| | 00:28 |
The Springfield Free Public Library, in
Springfield, New Jersey has a website,
| | 00:31 |
where they are currently using JEvents.
If you go to calender, and click on >
| | 00:36 |
Full Calender, you can see an example of
a complete calendar on their website.
| | 00:43 |
You can notice here the different colors
of the different activities.
| | 00:46 |
Each color represents a different
category that the activities may be
| | 00:50 |
sitting in.
You can have many different view of your
| | 00:53 |
calendar, such as, I can click on, See by
Week, if I want to see just a weekly calendar.
| | 01:01 |
In addition, if you go to the home page
of the website, there are tools that I
| | 01:05 |
can use to display events in specific
categories.
| | 01:10 |
Like I have here on the right-hand side,
the latest events and exhibit events.
| | 01:15 |
And then to bring it a step further, if
you go to Kids and Mother Goose group,
| | 01:19 |
you can see a listing of events actually
inside of a specific article.
| | 01:26 |
Let's go to Joomla to download the tool
now.
| | 01:28 |
And go to the Extensions directory.
Once you're in the Extensions directory,
| | 01:35 |
type JEvents in the search.
You can see here the JEvents works in
| | 01:42 |
1.5, 1.6, 1.7 and in Joomla 2.5.
If you click on JEvents, you can click on
| | 01:52 |
Download to go to their website.
The JEvents website is JEvents.NET, .net.
| | 02:03 |
They give you a lot of information here
about what you can download.
| | 02:06 |
JEvents also has a club.
If you are in the club, you can download
| | 02:10 |
newer versions of JEvents, plus you'll
have additional templates and
| | 02:14 |
functionality that you can work with.
But JEvents does give you a free version
| | 02:20 |
of their component, which is 100% usable.
In addition, all of their modules are
| | 02:26 |
available to you as well, even just for
free.
| | 02:31 |
On this page, you can see there are a lot
of different things you need to download.
| | 02:34 |
The first thing is the main component,
and you can click on it right in the
| | 02:37 |
middle of the page.
Click on OK.
| | 02:49 |
Next, while you're on this screen, you
want to download the different modules
| | 02:51 |
that are available to you.
Let's download them all now.
| | 02:56 |
You just need to click on each one to
download them.
| | 02:58 |
So first the JEvents Mini Calendar
module, which will display a little
| | 03:02 |
calendar on your screen.
The Latest Events module.
| | 03:07 |
This will allow you to display different
events that are going on based on category.
| | 03:13 |
The Legend module, this will display
different colors for different categories
| | 03:16 |
that you have in the system.
The Search Plug-in works with the Joomla
| | 03:21 |
Core Search.
And then the Filter module, which will
| | 03:26 |
allow you to filter the events visible on
a page.
| | 03:30 |
Once you have downloaded all of the
tools, go to your Administrator panel of
| | 03:34 |
your Joom Aquarium site.
I'm going to go to it here,
| | 03:38 |
joomaquarium.com/test site administrator.
And I'm going to log in.
| | 03:43 |
Once you're logged in, go to Extensions
and Extension Manager to install all of
| | 03:50 |
the new tools.
Click on Browse.
| | 03:56 |
First one I want is the Com JEvents.
Says the database is now set up and I
| | 04:04 |
need to click on Continue.
This is the main configuration file for JEvents.
| | 04:10 |
We're going to get back to this in a
minute.
| | 04:12 |
First, I want to complete installing all
of the different modules.
| | 04:16 |
So for right here, I'm going to click
Save and Close.
| | 04:20 |
Now I'm going to go back to Extensions,
in Extension Manager.
| | 04:23 |
And I'm going to install all of the
modules that I downloaded from JEvents.net.
| | 04:30 |
If I scroll down, I can see them all
right here.
| | 04:32 |
And I just have to click on them one at
a time.
| | 04:40 |
Next, the Filter.
Next, the Latest Events.
| | 04:52 |
And lastly, the Legend.
There's a Plug-in that I would like to
| | 04:58 |
install as well.
And that's the Plug-in for the Search.
| | 05:01 |
And I can click Upload and Install.
In this lesson, we showed you an actual
| | 05:11 |
website where JEvents is being used.
Then we went to jevents.net to download
| | 05:16 |
the component.
And then, we actually installed it on
| | 05:20 |
your website.
| | 05:20 |
| | Collapse this transcript |
| Setting up JEvents| 00:02 |
Once you've installed an events manager,
such as JEvents, you need to set it up.
| | 00:06 |
In this lesson, we will configure J
events and all of the tabs associated
| | 00:10 |
with it.
First, you go to components.
| | 00:14 |
And J events.
In the JEvents control panel, I need to
| | 00:18 |
go to configuration, which is right here
on the right.
| | 00:23 |
The configuration area is set up into
multiple tabs.
| | 00:26 |
First you can select your layout view, by
default I'm going to keep it as alternative.
| | 00:31 |
My recommendation is to try the different
layouts to see which one you prefer.
| | 00:36 |
You can select if your template has a
dark background or not.
| | 00:39 |
The date format, I'm going to change this
here to be Unites States, using 12 hour format.
| | 00:45 |
I'm going to click Yes for this.
So I'm not on a 24 hour clock.
| | 00:50 |
I'm going to keep it No here for the
Ginley cache.
| | 00:53 |
For the show headline you can select from
either component, non or menu entry.
| | 00:58 |
If you select menu entry, when you click
on the menu entry the title of that entry
| | 01:01 |
is what's going to be displayed at the
top of the screen.
| | 01:06 |
I'm going to click menu entry here.
To use the new icon navigation bar you
| | 01:10 |
have a couple of choices here as well.
You can either say no, yes, hide
| | 01:15 |
altogether and use icons without
navigation.
| | 01:19 |
I am going to select yes for this one.
Here it says what navigation icons do you
| | 01:23 |
actually want to show so I can display on
my icon list by year, by month, bu week,
| | 01:27 |
by day also by category I am going to hold
my control key down and select by
| | 01:31 |
category as well.
I can select what color I want my
| | 01:37 |
navigation bar to be, what's the first
year I want to display in the counter.
| | 01:42 |
I'm going to change it to 2012, and then the
last year, I'll leave it as 2015.
| | 01:50 |
The first day, I'll leave it as Sunday
first.
| | 01:53 |
Show Print Icon allows you to print the
page view for the current calendar page.
| | 01:57 |
I'll leave this as Yes.
Show Email Icon will generate an email
| | 02:01 |
link for the calendar page so you can
easily send an email to someone for that
| | 02:05 |
specific page.
Enable installation of layouts.
| | 02:11 |
If you purchase the club support...
of J events.
| | 02:16 |
You will have the capability of
downloading additional templates.
| | 02:20 |
But in order to install, those
additional templates, this Enable
| | 02:23 |
Installation of Layouts, must be set to a
yes.
| | 02:28 |
And that way, you will be able to
install the additional templates.
| | 02:32 |
For show copyright footer, if you're
using the free version you really need to
| | 02:36 |
keep this as a yes.
If you're paying them for the support
| | 02:39 |
then you can easily change it to a no.
The J Event project news, I would keep
| | 02:44 |
that as a Yes.
This just shows you the information about
| | 02:48 |
J Events in your backend control panel
for J Events...
| | 02:52 |
Which is good to have on your control
panel so you can see new versions that
| | 02:55 |
have come out and changes they've made to
the program.
| | 02:59 |
Hiding migration from J events one four
is basically, you don't want to actually
| | 03:04 |
display the J events one four icon.
Which for right now we're going to click
| | 03:09 |
that on yes, The options down are
basically what time zone you're going to
| | 03:14 |
work with and thje event search type, and
also the event category seperator.
| | 03:21 |
I'm going to leave all these as the
default.
| | 03:23 |
I'm going to scroll back up to the top and
go to the next option.
| | 03:26 |
SEF and performance options.
Here you can use a new SCF url system.
| | 03:34 |
I'm going to click yes for here because
we're in two five, I want to use the new system.
| | 03:40 |
I can set the meta-tag to stop robots
from crawling, for default I'm going to keep
| | 03:43 |
this on yes.
The rest of the information is about
| | 03:48 |
robots and blocking the spider,
redirecting the spider.
| | 03:51 |
If you're not sure what these different
things mean, you want to talk to your
| | 03:54 |
developer to find out what's the best
settings for your website.
| | 03:58 |
The next tab is the permissions tab.
From here you can define exactly who is
| | 04:03 |
able to access this component and what
they're able to actually do with it.
| | 04:08 |
For right now.
I'm going to keep this as the basic settings.
| | 04:11 |
But if you can see here.
Enable User authorization.
| | 04:14 |
What that means, if it's set to Yes then
only the authorized users can create
| | 04:19 |
events, otherwise, any user.
Of the following levels, can undertake
| | 04:24 |
this test.
The next option you have on the Tab bar.
| | 04:28 |
Is the I cal import and export.
This allow you to import and export into
| | 04:32 |
the iCal formats.
And these are the different settings for them.
| | 04:36 |
It depends what iCal you're working with
as far as how you want these to be set.
| | 04:40 |
The next tab on top is event editing.
One nice piece about JEvents is that you
| | 04:46 |
can have users edit your JEvents from the
front end.
| | 04:50 |
Which means you can have people add
events to the calender.
| | 04:53 |
Modify different events.
Without having to go to the administrator panel.
| | 04:58 |
This tab right here, allows you to set,
all those different options.
| | 05:02 |
Everything from if you want the front end
edit, in the pop up.
| | 05:05 |
If you want to hide repeating event
options.
| | 05:08 |
And so forth.
There are a lot of different options
| | 05:11 |
here, that you can set to.
And I recommend that you go through each
| | 05:15 |
of these carefully and change them around
until you get the configuration that you
| | 05:19 |
want exactly.
The next tab is the event detail view.
| | 05:24 |
This is where you determine if you want
the author displayed, the mail displayed,
| | 05:28 |
if you want hits displayed, and if you
want to view the repeat and time.
| | 05:34 |
I'm going to click these To know, for
now.
| | 05:38 |
The next tab is the main monthly
calender.
| | 05:41 |
This is where you can define how your
monthly calendar is displayed.
| | 05:45 |
Next is the year and category view.
This defines how, if your looking at your
| | 05:49 |
calender through a year or category view.
How you want this displayed.
| | 05:54 |
Notice the basic default for the number
of events are shown.
| | 05:57 |
If you want more events to display you
need to change this item.
| | 06:02 |
The next option is the RSS feed.
The RSS feed allows you to create a feed
| | 06:06 |
for your events that people could
subscribe to so when new events are added
| | 06:09 |
to your system they'll automatically get
that update through their feed.
| | 06:15 |
In here you can set how you want the
feeds to work and you can also address
| | 06:19 |
the RSS title.
I am going to change this feed title to
| | 06:25 |
June Aquarium Events.
And I'll put a description in here as well.
| | 06:32 |
The events at the June Aquarium.
My next option is the calendar set up.
| | 06:40 |
In here, if you're displaying the
calendar module, which is a small version
| | 06:44 |
of the calendar on the page, you can
select here how you want it to show.
| | 06:49 |
Please note, these are the basic setup
options for the module.
| | 06:53 |
You can always overwrite them when you
actually work with the module itself.
| | 06:58 |
The last option here are latest events.
The latest events is the module, that you
| | 07:02 |
can use, that you can display in the page
a list of events from a specific category.
| | 07:07 |
You can set the basic setups here.
But when we actually create module.
| | 07:13 |
You can always override these set ups.
So, for right now, I'm going to leave this
| | 07:18 |
as the default.
When you're all done, click on Save and Close.
| | 07:23 |
Once you have JEvents set up, you can
start working with it.
| | 07:27 |
In this lesson, we went through the
JEvents configuration panel and made sure
| | 07:31 |
we had everything setup properly.
| | 07:33 |
| | Collapse this transcript |
| Creating categories and events| 00:02 |
When you work with an event manager such
as J Events, the first thing you have to
| | 00:05 |
figure out is how your going to store the
information.
| | 00:08 |
So our first step is to show you, how you
can create categories, an nest the
| | 00:12 |
categories in your system.
Next, now that you have the categories
| | 00:17 |
created, we're going to manually create
one event in the system.
| | 00:21 |
And make it a repeating event.
Lastly, were going to display this event.
| | 00:25 |
On the website.
The first step is to create our categories.
| | 00:29 |
So if you go to the back end of your
website.
| | 00:31 |
And go to the control panel.
Go to components.
| | 00:35 |
And then J events.
From here, click on Manage categories.
| | 00:40 |
The categories in J events can be nested.
So when you're building your category
| | 00:44 |
structure, you want to have everything
written down first.
| | 00:47 |
So it's really easy for you to create
them.
| | 00:49 |
Let's create a first category of feeding
times.
| | 00:52 |
If you click on new on the top right-hand
side and then give the title a feed and
| | 00:58 |
the Alias could just be Feeding Times.
On the right-hand side you can select a color.
| | 01:07 |
I'm just going to select green.
What this means by default, any events
| | 01:10 |
that happen to be in this category will
display as green.
| | 01:14 |
And now, let's click Save and Close.
Let's create a few more categories.
| | 01:20 |
Now, what I'd like to do is create a feed
category within feed.
| | 01:24 |
So, basically, I can have a category for
my sting rate feeding times, my shark
| | 01:27 |
feeding times.
And my dolphin feeding times.
| | 01:31 |
There's a quicker way to do this.
Let's click on New to create another category.
| | 01:37 |
So I want this one to be stingray dash
feed.
| | 01:43 |
And in the alias I can type the same
thing.
| | 01:45 |
In the parent I want to select feed.
This way my stingray feeding times will
| | 01:52 |
be within all of the feeding times.
And I can pick a color of yellow.
| | 01:58 |
The next way to add a new category is if
I click Save and New.
| | 02:03 |
Now I can type dolphin feed.
And the same in the alias, dolphin, feed
| | 02:11 |
and then the parent make to sure to
select feed.
| | 02:16 |
And I am going to pick a light blue, hit
Save and New.
| | 02:20 |
And let's do one more, we'll do a shark
feed.
| | 02:30 |
Make sure again that in the parent you
select Feed, we'll give it a color of
| | 02:34 |
purple and hit Save and Close.
Now you can see the layouts of the categories.
| | 02:41 |
By nesting the categories this way, when
we get to other areas of the system, we
| | 02:44 |
can display all of the feeding times by
just selecting the "feed" category or if
| | 02:48 |
we just want to select the feeding time
for sting-rays, we can make it a little
| | 02:52 |
bit smaller by selecting the sting-ray
feed category.
| | 02:59 |
Now that we have our categories.
Let's manually create an event.
| | 03:02 |
To do that, go back to the control panel.
And click on manage events.
| | 03:07 |
And click on new at the top.
The first event, that we'll create.
| | 03:16 |
Is a dolphin feeding time.
So we'll call it Dolphin Feeding Time.
| | 03:24 |
The category, I will select Dolphin Feed.
I'll put a description in here (audio playing)
| | 03:36 |
I mentioned to join us as we feed the
dolphins.
| | 03:39 |
And I'll also let them know they can
purchase their own tuna that they can
| | 03:42 |
feed the dolphins as well.
You can specify a location here.
| | 03:55 |
I'll put down dolphin tank.
You can put a contact information and any
| | 04:03 |
additional info.
The next step after creating the details
| | 04:07 |
of the event is specifying the date and
time.
| | 04:10 |
To do that click on the calendar tab.
I'm going to leave it at 12 hour.
| | 04:16 |
For the start date I'm going to set it at
April 2nd.
| | 04:21 |
The start time I'm going to specify 10
p.m.
| | 04:24 |
And then the end time, I'll put it at
12:30.
| | 04:30 |
And I'll also click that as a.m.
I'd like this to be a repeating event.
| | 04:36 |
So I'm going to click on weekly.
And now, I can select how many repeats I
| | 04:41 |
want to have, or my repeat until.
We'll assume that our schedule remains
| | 04:46 |
the same until the summertime.
So we'll move forward, and we'll set it
| | 04:51 |
to June 29th.
And then the days, we'll select Monday,
| | 04:56 |
Wednesday, and Friday.
And now you can click Save and Close.
| | 05:03 |
If by default your events are in display,
you can change the default category to
| | 05:06 |
All Categories and now you can see
Dolphin Feeding time.
| | 05:11 |
Let's see what this can look like on the
website.
| | 05:14 |
So I'm going to add a menu item to just
display a full JEvents calender on my website.
| | 05:19 |
I go to menus > Main menu and I'm going
to create a new menu item that's just
| | 05:25 |
called Calendar.
The type is going to be JEvents and its
| | 05:32 |
going to be a full calender, I can scroll
down Now I'm going to click View by month.
| | 05:43 |
On the right-hand side, I have different
navigation icons that I can display.
| | 05:47 |
I can also select what categories I want
to specify.
| | 05:53 |
Right now, I'm going to leave them all
selected.
| | 05:55 |
I'm going going to select any.
But if you would like to only display the
| | 05:59 |
feeding time for dolphins, you can
highlight that.
| | 06:03 |
Can scroll down as far as if you want to
show past events or not, and then
| | 06:06 |
overriding layout if you wanted to use a
different layout.
| | 06:10 |
For now, click Save and Close, let's view
the website.
| | 06:19 |
In this lesson first we organize your
information by creating categories and
| | 06:22 |
nesting them within each other.
Then we created one event manually and
| | 06:27 |
made it a repeating event.
Lastly we displayed this event on the website.
| | 06:33 |
So you can see a full calendar and then
the specific events detail.
| | 06:37 |
| | Collapse this transcript |
| Importing events| 00:02 |
When working with an event management
system.
| | 00:04 |
Typically, one of the first things you
have to think about is how are you going
| | 00:07 |
to get all of the events into the system?
J Events has provided an easy way to do this.
| | 00:13 |
In this lesson, we'll review how you can
work with the CSV file.
| | 00:18 |
So you can import it into the system.
Then we will actually run the import so
| | 00:23 |
we can take the data from the CSV file
and bring it automatically into the system.
| | 00:28 |
And lastly, we're going to go to the
website and review the results.
| | 00:32 |
In this lesson, we've included a CSV
project file that you can use so you can
| | 00:36 |
import data into the Joom Aquarium
website.
| | 00:40 |
If you haven't already, go to the project
files and download the
| | 00:44 |
joomaqua-events.csc file on to your
computer.
| | 00:49 |
I am going to open the folder that is
sitting in new.
| | 00:55 |
Once you've accessed the file on your
local computer, double-click on it to
| | 00:58 |
open up in a spreadsheet type
environment.
| | 01:02 |
The way this file is laid out is the top
row of the column headings that you need
| | 01:06 |
to keep in there in order for the import
to work properly.
| | 01:10 |
If you notice in the categories.
I specified Stingray/Feed.
| | 01:16 |
Shark/Feed.
These are categories that I already
| | 01:19 |
created in J events.
There's another category here called Special.
| | 01:24 |
I did not create that in JEvents yet.
You'll see by default it will just create
| | 01:28 |
the category for me.
You can in here put a summary, the
| | 01:33 |
location, description, contact, extra
info an snow you have the date start and
| | 01:38 |
the date end...
Its up to you how you want to specify
| | 01:43 |
this information.
In addition you have the time zone and
| | 01:48 |
then in the last column you have the R
rule.
| | 01:53 |
This basically is different settings if
you want things to go weekly or daily as
| | 01:57 |
far as repeatings go.
It's up to you how you want to fill this out.
| | 02:03 |
This list that I'll be importing only has
eight events in it.
| | 02:07 |
But just think, you can have hundreds and
hundreds events and import them all at
| | 02:10 |
the same time.
The next step is you need to FTP this
| | 02:13 |
spreadsheet over to your host server.
We need to put it into our Test Site
| | 02:18 |
folder directory or whatever directory
you're working with as you're running
| | 02:23 |
through this lesson.
I'm going to go to Filezilla right now,
| | 02:29 |
which is the FTP product I'm using to
transfer my files from my PC onto the server.
| | 02:37 |
Once I open it up, I need to connect my
Gym Aquarium website and then I need to
| | 02:40 |
go into the folder of Test Site because
that's the folder that I'm working with.
| | 02:47 |
You could see it here on the right-hand
side, this is your host.
| | 02:51 |
On the left-hand side is your local PC
configuration.
| | 02:54 |
So, I'm going to grab the file and just
drag it over to the root of the Test Site directory.
| | 02:59 |
And I can see it's installed there right
now.
| | 03:04 |
My next step is to go back to my Joomla
website.
| | 03:06 |
Let's go there now.
From the backend of my website, I can go
| | 03:11 |
to Components and JEvents, which takes me
to my JEvents control panel.
| | 03:18 |
In order to import events into the sytem,
you need to click on manage calendars.
| | 03:25 |
From here, you're going to click on new
to create a new calendar.
| | 03:29 |
You're going to give this new caldendar
unieque identifier.
| | 03:33 |
I'm going to call it J.
Aqua-Events.
| | 03:39 |
I'm going to select the default
categories, being default, in case no
| | 03:42 |
category is selected for an event.
And then, on the bottom, I'm going to
| | 03:48 |
click on From URL.
Down here, I need to enter my specific
| | 03:55 |
website, which is
HTTP://joom-aquarium.com/testsite.
| | 04:04 |
This is going to be whatever site you're
currently working in, and more
| | 04:08 |
importantly, whatever folder you put the
file in.
| | 04:11 |
After testsite I'm going to put a
/jaqua-events.csv.
| | 04:20 |
This here jaqua-events.csv is the file
that you've just put into that folder.
| | 04:27 |
Once you have that typed in, click on
Load ICal from URL.
| | 04:34 |
So it basically just told me eight ICal
events processed.
| | 04:38 |
Let's see the events that we just
imported.
| | 04:40 |
If I click on Manage Events, you can see
instantaneously you just imported all the
| | 04:45 |
events into the calendar.
Not only that but they went into the
| | 04:49 |
correct categories.
For example, if I click on shark feed, I
| | 04:54 |
will get the feed the sharks, these were
imported from my file I didn't have to do
| | 04:58 |
these manually.
Let's go to the actual website and see
| | 05:03 |
what our calendar looks like.
If I go to my Joom Aquarium and click on
| | 05:07 |
calendar, the first thing we have to do
when we go to the website is ,change the
| | 05:12 |
month to May.
Now I can see all the events as they were
| | 05:21 |
imported into the system.
You can also see the different colors
| | 05:25 |
that they are in because they were
imported into different categories.
| | 05:29 |
The event with the gray coloring was
actually put into a new category called
| | 05:32 |
Special which we did not have in the
system already...
| | 05:39 |
In this lesson, we worked with the csv
file and got it ready for the import.
| | 05:43 |
We then ran the import into the system
and brought the data in.
| | 05:46 |
And then lastly, we reviewed the results.
| | 05:49 |
| | Collapse this transcript |
| Displaying the latest events in a module| 00:02 |
Once you've added your events into your
Joomla Content Management System.
| | 00:06 |
Using the event manager, such as JEvents.
You can see there are multiple ways of
| | 00:09 |
displaying these events.
You can use a basic default Calender view.
| | 00:15 |
Or one of the things I like to use is
displaying the events, a latest events module.
| | 00:20 |
In this lesson, we're going to cover how
you can display events using the latest
| | 00:24 |
events module on specific sides of your
screen, or in module positions.
| | 00:31 |
To begin, let's go to the back end of
your website.
| | 00:34 |
I'm in my test site in
joomaquarium.com/testsite.
| | 00:39 |
First thing I need to do is just look at
the events that I currently have set up.
| | 00:42 |
So if I go to Components and JEvents, and
then I click on Manage Events.
| | 00:50 |
So in my website currently, I have events
in a lot of different categories.
| | 00:54 |
If I click on the All Categories dropdown
and click on, let's say, Shark Feed.
| | 00:59 |
I can see the events are associated with
Feed the Sharks.
| | 01:03 |
If I change the Shark Feed, to let's say,
Stingray Feed, I will see the events that
| | 01:07 |
are dedicated to stingrays.
Let's say in my latest events module, I
| | 01:13 |
would like to display the events for all
of the feeding times that may happen.
| | 01:18 |
So to do that, I go to Extensions in
Module Manager and then click on New to
| | 01:22 |
create a new module.
The module that I'm looking for is called
| | 01:29 |
latest JEvents.
In the title, I'm going to put in Feeding Times.
| | 01:37 |
For the position, I click on the Position
and I know that the left area of the
| | 01:42 |
website is position 7.
So if I just put a 7 in the filter and
| | 01:46 |
hit Enter, I can see here that position 7
is on the left side.
| | 01:51 |
So I'm going to select position 7.
By default, for right now, I'm going to
| | 01:57 |
select it to Appear on All Pages.
Now, on the top right-hand side, I have a
| | 02:02 |
couple of different options.
The Module Class S determines how the
| | 02:06 |
module is going to look, which is really
a template issue as far as which template
| | 02:09 |
classes you that you can work with.
The next option is to select what
| | 02:16 |
categories you want to select from.
I want all the feeding times so, I'm
| | 02:20 |
going to click on Feed, Stingray Feed,
Dolphin Feed and Shark Feed and I'm
| | 02:24 |
holding my Ctrl key down.
If you scroll down, you can see some
| | 02:28 |
other options.
As far as locking category filters, what
| | 02:33 |
that means it will only show the events
from the specific categories that are
| | 02:37 |
selected even if the page is filtered by
certain category selection.
| | 02:43 |
What that means is if someone on the
front end selects items from just a
| | 02:46 |
specific category, that this could
change.
| | 02:50 |
So I'm going to select yes here because I
only want feedings to display here no
| | 02:53 |
matter what anyone's doing in the middle
of the page.
| | 02:58 |
The Target menu item, what that means is
when you actually click on one of these links.
| | 03:02 |
What will the page layout end up looking
like?
| | 03:05 |
So, for example, if when you click on the
link, you want it to look a certain way,
| | 03:09 |
that's the menu item you want to select.
Right now, I'm going to keep this as blank.
| | 03:14 |
The Override Layout allows you to change
what settings you want to use for your layout.
| | 03:19 |
Now, keep scrolling down.
For the Used settings you have two
| | 03:25 |
options with this.
You can use the Component settings, which
| | 03:30 |
is basically the default setup of latest
events that you've set in JEvents configuration.
| | 03:36 |
Or you can select Used settings below,
which means it will override any settings
| | 03:40 |
that you've already selected...
For the Custom Format string, you can
| | 03:47 |
edit this any way you want.
If you go to JEvents on the latest events
| | 03:51 |
configuration, you can see other options
for this.
| | 03:55 |
We'll go back to this in a little bit so
you can see how this can change.
| | 03:58 |
But right now, what the default is, it's
going to show whatever the event date is.
| | 04:04 |
And then it's going to show an end date if
there is one.
| | 04:07 |
And then a new line, then the title of
that event.
| | 04:12 |
The maximum events to display right now
is set to 10.
| | 04:17 |
The Display Mode.
Here you have a couple of different options.
| | 04:21 |
You can select 0 for Current and
Following Weeks Events.
| | 04:25 |
If you select 1, it would be Current and
Following Week Events, including past events.
| | 04:32 |
Keep in mind, you probably don't want to
show past events, it's just a thought.
| | 04:35 |
2, nearest events would basically be
anything near.
| | 04:41 |
3, would be nearest events, including
your past events.
| | 04:45 |
4 is nearest events for a specific month.
5 is the most recently created events,
| | 04:50 |
and six would be the most popular events.
For right now, I'm going to select 2,
| | 04:56 |
nearest events.
Now, it asks me, display events of the
| | 05:02 |
next how many days do you want?
I'm going to put in here 80 days.
| | 05:07 |
Only because the events that I know I set
up are really for the month of May.
| | 05:11 |
So its a couple of months out, and I
wanted to make sure to display them.
| | 05:16 |
The Start Now measures the time from now,
instead of from midnight.
| | 05:21 |
So its up to you how you want to set this
up.
| | 05:24 |
For Past Events, this allows you if you
only want past events only or future
| | 05:28 |
vents only.
I'm going to click on Future Events Only.
| | 05:34 |
Display a repeating event once.
What this means is let's say you have
| | 05:38 |
shark feeding multiple times as a
repeating event.
| | 05:42 |
If I select for the shark feeding to only
display the repeating event once, it
| | 05:45 |
means it will only show the first time
that it's happening.
| | 05:49 |
So right now, I'm going to leave this as a
No.
| | 05:52 |
For multi-day event, this is how you want
to display events that go across multiple days.
| | 05:59 |
Do you want to display the events as
links, basically will the events be
| | 06:03 |
clickable or not.
Do you want to display the year in the
| | 06:06 |
Event Date.
Then what CSS Date style you want to use
| | 06:10 |
and Title Field style.
If I put this to Yes, it's going to use
| | 06:16 |
the default, that's set in MOD events
latest date, CSS class.
| | 06:22 |
If I say No, it's going to rely on the
template.
| | 06:25 |
I could then decide if I want to hide
links, sort and reverse order, display an
| | 06:30 |
RSS link field if you want.
And then I can specify what I want the
| | 06:35 |
Title and the Description to be.
Let's click on Save so we can see what
| | 06:41 |
this is going to look like.
Now, I'm going to go to my front page.
| | 06:47 |
And click on home.
As you can see here, I have my feeding
| | 06:53 |
times times displayed for April 2nd,
April 4th, April 6th.
| | 06:58 |
Let's say I want to change the format
around a little bit.
| | 07:00 |
Basically, what I'd like is I want the
title to be on top and maybe I want it
| | 07:04 |
displayed in three lines, instead of
going so far across.
| | 07:09 |
So let's go back to see where we can set
this.
| | 07:13 |
If you're not sure of the Page P settings
for dates, my recommendation is go to
| | 07:17 |
components and JEvents first.
From here, click on Configuration.
| | 07:25 |
In Configuration, the last half says
latest events.
| | 07:28 |
If you click on Latest Events.
This setting is used for the Latest
| | 07:32 |
Events Module if you select Use Component
Settings.
| | 07:37 |
So if you like, you can set the items
here.
| | 07:40 |
But more importantly, there's a question
mark up here.
| | 07:42 |
If you click on this question mark, it
will show you all of the different items
| | 07:46 |
that you can put in here.
And explains it to you.
| | 07:52 |
If I scroll down little bit, I also have
an option here of how I'm going to
| | 07:58 |
display the Format String.
I have the available Event Fields, if I
| | 08:04 |
click not he question mark, it gives me
the listing here of all the different fields.
| | 08:09 |
The Contact field, the Content, which
would be more of the description.
| | 08:14 |
The Start date, Event date, End date,
Title.
| | 08:17 |
You can even display the Category if you
want in here.
| | 08:21 |
So this is where you go to find out what
all the strengths are.
| | 08:24 |
It also gives you more information on how
to set it up.
| | 08:29 |
The next option is date format using the
Date Perimeter.
| | 08:33 |
If you want to just use the Date
Parameter, here it gives you all the
| | 08:36 |
different options you can put inside of
the format to display in different ways.
| | 08:41 |
For example, if you want a 12-hour format
of the hour without leading zeroes, you
| | 08:45 |
would use a lowercase j, just for
example.
| | 08:51 |
If you want to do a date format with the
STRF time, if you click on the question
| | 08:55 |
mark here.
This shows you all the different formats
| | 09:00 |
you can do using the STRF time function.
This has many different formats that you
| | 09:05 |
can use.
Everything, lets say for percent
| | 09:08 |
lowercase m.
Would be month as a decimal level.
| | 09:11 |
Ranging from 0, 1, to 12.
So click on the X.
| | 09:19 |
And let's go back over to the latest
events module.
| | 09:23 |
From here, go to Extensions and Module
Manager.
| | 09:27 |
And let's go to our Feeding Times.
An easy way to find feeding times is if
| | 09:30 |
in the Filter, I just type Feed.
And click on Feeding Times.
| | 09:37 |
And then if I scroll down I can change
the format string.
| | 09:42 |
I'd like to neaten up the way the format
is displayed.
| | 09:45 |
So I'm going to put here a title.
I'm going to remove the BR tag.
| | 09:49 |
And then for the Event Date, I'm going to
change that to Start date.
| | 09:56 |
And I'm going to use the date format with
a single parenthesis L comma capital M
| | 10:02 |
lower case d comma y close parenthesis,
and then closed curly braces.
| | 10:11 |
I do need to remember to remove the curly
braces to the right of the Start date.
| | 10:16 |
Basically, I'm using a date function and
I'm using the different format strings
| | 10:20 |
that they already explained to me inside
of the date function earlier.
| | 10:25 |
Next, I'm going to type in the word time,
colon, then I'm going to put a hard
| | 10:28 |
bracket, exclamation point a, basically
determining if there is.
| | 10:34 |
An end date and a start date.
This is what I want to display, assuming
| | 10:37 |
there is one.
And then I put in there, a colon, space,
| | 10:42 |
dollar sign, curly brace, start date,
parentheses, lower case g, colon i,
| | 10:49 |
space, capital A.
Close parentheses, close brackets, space
| | 10:57 |
dash, dollar sign after the end time.
Curly braces, end date, parentheses g
| | 11:06 |
colon I space capital A, for am or pm.
Close parentheses, close curly braces and
| | 11:15 |
the hard bracket.
And I'm going to delete the rest from before.
| | 11:19 |
And now, I can hit Save and Close.
And let's see what that comes out like.
| | 11:25 |
And then we'll break it down.
So I can show you how this is broken down.
| | 11:29 |
I'm going to open my Administration Page
in another window so we can look at it
| | 11:33 |
next to each other.
So if I right-click here and select, To
| | 11:40 |
Open in a New Tab, and then I click on
Feeding Times.
| | 11:50 |
And now I want to go down to the bottom
of the page, I'll make it a little bit
| | 11:54 |
smaller here, let's go through this piece
by piece.
| | 11:58 |
I have the title, and you can see here
Dolphin feeding time.
| | 12:02 |
I then have the Start date and it's
broken out as follows, the lower case l
| | 12:06 |
is the word Monday, the full day of the
week.
| | 12:10 |
The capital M is APR for the month, the D
represents the 02, and the capital Y
| | 12:13 |
represents the full year.
The next line I have the Time and you can
| | 12:19 |
see that I'm using the Start date, but
I'm only taking G which is the hour, 10
| | 12:24 |
colon, the colon's actually put there.
The lower case I is 00 for the time and
| | 12:31 |
then the capital A would be am or pm.
This is using using regular PHP formatting.
| | 12:40 |
So if you're unsure of the formatting,
you've two options, you can go onto the
| | 12:43 |
web, look for PHP assistance for date
formatting.
| | 12:47 |
Or, as we did before, you can go back
into the actual component and go to the
| | 12:51 |
configuration, and then just click on
save.
| | 12:59 |
The last step that I want to do is I want
to actually take the Feeding Times for
| | 13:02 |
just the shark feeding times and put that
directly into an article using low position.
| | 13:09 |
Since I like the format of the feeding
times I already did.
| | 13:11 |
I'm going to copy the Feeding Times.
And click on Duplicate.
| | 13:17 |
And then for the feeding times two.
I'm going to change the title to Shark
| | 13:23 |
feeding times.
I'm going to change the position to,
| | 13:28 |
Shark dash Feed.
And I'm going to change the categories to
| | 13:33 |
Only Select Shark Feed.
And them I'm going to click Save and Close.
| | 13:40 |
Now, I'm going to go into my article.
I'm going to type in Shark in the filter.
| | 13:46 |
Click on Shark Adventure.
Because this is my main shark page.
| | 13:55 |
Currently I'm already doing a low
position for list events.
| | 13:58 |
I'm going to change this to be my feeding
times.
| | 14:01 |
So I'm going to say shark dash feed and just
above it I'm going to put in the text see
| | 14:07 |
feeding times below.
And then, I'm going to hit Save and Close.
| | 14:16 |
And let's preview the site.
And click Shard Adventure.
| | 14:24 |
For some reason, the actual feeding times
aren't displayed, at least here in the middle.
| | 14:28 |
One thing you have to always remember, is
when you create a module, especially if
| | 14:31 |
you create a duplicate, by default, it's
not going to be published.
| | 14:36 |
So let's go back and publish it so we can
see it on the page.
| | 14:39 |
So I go back to administration, go to
extensions, module manager and then I see
| | 14:44 |
shark feeding time and I can see here
it's not published.
| | 14:49 |
I'm going to publish it right now.
Go back to Shark Adventure.
| | 14:54 |
And I'm going to hit F5 to refresh the
page.
| | 15:01 |
And now, I can see my shark feeding times
below.
| | 15:04 |
What's truly dynamic about this is that
as the days go on, it's always going to show
| | 15:08 |
me the next set of feeding times.
In reality, you may only want to display
| | 15:14 |
the feeding times, let's say for two
weeks out or three weeks out or even just
| | 15:16 |
for the current week, what the feeding
times are going to be.
| | 15:21 |
Another great advantage of using this
type of system is basically, you can have
| | 15:25 |
someone in charge of just editing the
events and then the pages are dynamically
| | 15:28 |
updated, without them having to do a
thing.
| | 15:34 |
In this lesson, we displayed your most
recent events on your website.
| | 15:38 |
We did this using the Latest Events
module.
| | 15:41 |
We then formatted the module to display
the events in the way you wanted them shown.
| | 15:46 |
| | Collapse this transcript |
| Displaying the latest events in an article| 00:02 |
Many event managers, give you the
capability of listing, a list of events,
| | 00:06 |
from a specific category.
In this lesson, we're going to create a
| | 00:11 |
module to list the latest events, and
then display that module within a content article.
| | 00:16 |
To begin, let's create a new module, you
can click on New, at the top.
| | 00:23 |
And go to latest JEvents.
I want this module to display the latest
| | 00:29 |
events from the category of Shark Feeding
Times.
| | 00:33 |
So I'm going to give the title of, Shark
Feeding Times.
| | 00:40 |
For the position, I'm going to call it
shark dash feed.
| | 00:44 |
I must make sure to have this published.
For now I am going to just display it on
| | 00:51 |
all pages and then on the right-hand
side, I'm going to click on the category
| | 00:54 |
shark feed.
And then I can click Save and Close.
| | 01:01 |
Once I've saved it I now need to go into
my content article.
| | 01:04 |
And put in there the Shark Feed position.
So if I go to content and article manager.
| | 01:11 |
And in the filter I'll just type in
shark.
| | 01:15 |
Now I have two articles here.
One article was my Shark Feeding Times,
| | 01:18 |
initially, I created an article for shark
feeding times.
| | 01:23 |
I'm no longer going to need that article
because I'm going to handle all of the
| | 01:26 |
feeding times using my Event Manager.
So I'm going to go into my Shark
| | 01:31 |
Adventure article, that's my main
article.
| | 01:35 |
I'm going to scroll down.
I will type in here, Hour Shark Feeding Times.
| | 01:43 |
Then I will put the load position
plug-in.
| | 01:47 |
Space, shark, dash, feed, close braces,
and then Save.
| | 01:52 |
Then I'll go to preview my website.
Click on Shark Adventure.
| | 01:59 |
And if I scroll down I can see my Shark
Feeding Times.
| | 02:06 |
In this lesson we worked with the latest
events module from JEvents.
| | 02:11 |
We were able to put the latest events
module on the left-hand side of the page,
| | 02:14 |
to display events from all the different
animals feeding times.
| | 02:19 |
An then we actually took that module and
we displayed it within a content article.
| | 02:24 |
By displaying this information inside of
a content article, we're making your
| | 02:28 |
article extremely dynamic.
You can have one person actually editing
| | 02:32 |
the information of just the events and it
will automatically appear on the specific
| | 02:36 |
articles within your website.
| | 02:38 |
| | Collapse this transcript |
| Working with JEvents from the front end| 00:02 |
An advantage of using a complete event
management system along with Joomla is
| | 00:06 |
the security.
In JEvents, you can actually set up
| | 00:10 |
specific users that are able to add or
edit specific events in specific categories.
| | 00:16 |
Which means if you have a complex
synagogue or school, you can basically
| | 00:20 |
set up certain staff members are only
able to edit different things in certain
| | 00:24 |
areas of the website.
In this lesson, our first step will be to
| | 00:30 |
create that user that we're going to work
with, and then set up the configuration
| | 00:34 |
in JEvents.
So we can set them to only be able to
| | 00:37 |
edit or add things into specific
categories.
| | 00:41 |
And then we're going to actually show it in
action and go to the website, log in, and
| | 00:44 |
see what we can actually edit.
To begin, let's create a new user.
| | 00:50 |
So if you go to you Back End
Administration panel, we go to Users >
| | 00:54 |
User Manager > Add New User.
I'm going to call this new user staff.
| | 01:03 |
I'm going to give it the login name of
Staff, and I will create a password for
| | 01:09 |
it, and an email address.
As a minimum, when I create this user I
| | 01:15 |
really need to at least put them into the
author, assign groups level in order to
| | 01:20 |
be able to get into.
JEvents properly.
| | 01:26 |
So I'm going to give this person registered
an author in the groups.
| | 01:31 |
And then I'm going to click Save and close.
Now that I've saved this user.
| | 01:36 |
Now I'll go to Components and JEvents to
configure it.
| | 01:40 |
In order to use the authorized user set
up in JEvents.
| | 01:45 |
I have to set something else up in
Configuration.
| | 01:48 |
So if you click on the Configuration
button, and then click on the Permissions
| | 01:53 |
tab, there's an option here to Enable
User Authorization.
| | 01:57 |
If we set this to yes, then we must use
the User Authorization Area, that's setup
| | 02:03 |
in JEvents.
That means that by setting it to Yes,
| | 02:07 |
every single user that's going to edit
the system including your superuser.
| | 02:11 |
If they're going to edit it from the
front end, they need to be in the User
| | 02:15 |
area, which we're going to go into next.
If you keep it as a No, what that means
| | 02:20 |
is by default the Admin user is going to
be whoever you select as user up above.
| | 02:27 |
In addition, if you select No.
Then the way the permission settings
| | 02:30 |
works will be how you set it up on this
page here.
| | 02:34 |
For right now, I'm going to change this
to a Yes.
| | 02:37 |
What this means, again is I'm not using
the Joomla default settings.
| | 02:40 |
I'm going to be using JEvents and using
their ACL Setup.
| | 02:45 |
Which allows me to limit at the category
level.
| | 02:47 |
Which is pretty important for me right
now.
| | 02:49 |
So now, I'm going to click Save and
Close.
| | 02:54 |
My next step is Authorized Users.
Because I hit Yes there.
| | 02:59 |
I need to add all of the users, that I
want to give the capability.
| | 03:03 |
Of editing on the front end.
In this page right here.
| | 03:07 |
So now, I'm going to click on New to add
users to the system.
| | 03:11 |
The first user I'm going to set up is the
Super User.
| | 03:14 |
So I'll scroll down and I see Super User
right tech.
| | 03:18 |
I want this user to be enabled.
I want them to be able to create events.
| | 03:23 |
As far as the event limit goes, I'm going
to leave that blank.
| | 03:26 |
I'm going to let me Publish Own.
Keep all of this to Yes, because
| | 03:29 |
basically, this is the super user on the
system.
| | 03:33 |
So, I'm going to give them all access.
If I scroll down, I'm going to let them look
| | 03:37 |
at all categories and all calendars.
And then, I'm going to click Save and Close.
| | 03:44 |
The next user that I want to add is my
staff member.
| | 03:49 |
So I click on the down arrow, click on
Staff.
| | 03:52 |
I want to enable this user.
I'm going to let them create events.
| | 03:56 |
I'm going to allow them to publish their
own and delete their own.
| | 04:02 |
I'm going to say, Yes, They can edit all
events.
| | 04:05 |
They can Publish all.
I'm not going to select Delete all.
| | 04:08 |
I'm going to let them Upload images.
Upload files.
| | 04:15 |
I'm going to leave the rest at No.
My next option is going to be what
| | 04:19 |
categories I'm going to let them work in.
I'm going to click Select from list.
| | 04:23 |
And I'm only going to let them work with
the events for Shark Feed.
| | 04:29 |
Which means I can only add events into
the Shark Feed category.
| | 04:32 |
I'm going to scroll up to the top, hit Save
and Close.
| | 04:37 |
So now, I can see my two users that are
allowed to edit events from the front end.
| | 04:43 |
Now, I'm going to go into the front end,
log in to the system, and see how the
| | 04:46 |
editing actually works.
On my front end by default, I already had
| | 04:52 |
a module on that allows me to log into
the system.
| | 04:56 |
That's the log in module.
So right now, I'm going to log in as staff.
| | 05:03 |
I click Log In.
So far nothing's really changed here.
| | 05:09 |
If I click on Calendar and I scroll down,
you'll see an option here for Add Event.
| | 05:16 |
That means I'm allowed to add an event to
the system.
| | 05:19 |
So, if I click Add an Event, I'm going to
add a new shark feeding time.
| | 05:24 |
Then I'm going to change the category.
I'm not able to change the category.
| | 05:30 |
Because I'm only allowed to add events to
this specific category.
| | 05:36 |
Great option.
If I click on Calendar from here, I can
| | 05:39 |
add it for a specific date.
And I'll make it for March 26 at 8 am and
| | 05:47 |
it ends at 8:30 am.
And then I'll click Save.
| | 05:52 |
You know even if this event says your
event has been saved and is under review,
| | 05:56 |
it is actually a published event because
I gave this person the publishing access
| | 05:59 |
for these events.
In fact, if I click on the C, I can
| | 06:05 |
scroll down and I could see my shark
feeding time.
| | 06:10 |
I can also see it if I go to Exhibits,
click on Shark Adventure and scroll down,
| | 06:15 |
I can see here Shark Feeding Time.
This shows you how dynamic your site can
| | 06:22 |
actually be.
You have a staff person that's assigned
| | 06:25 |
to just create events in a specific
category.
| | 06:29 |
They create that event, and
automatically, it is displayed on the
| | 06:32 |
actual article page.
So they don't need to know how to format articles.
| | 06:37 |
They don't need to know how to work on
images.
| | 06:39 |
All they have to focus on are the events
themselves and what dates they're
| | 06:42 |
happening on.
So in this lesson, first we added a user.
| | 06:47 |
Then we went through the configuration to
set that user up so they could actually
| | 06:50 |
edit the pieces inside of the website.
We also made specifications within
| | 06:56 |
JEvents so that user can only edit items
in a specific category.
| | 07:00 |
Lastly, I showed you an example of how
the staff member could actually log in.
| | 07:06 |
Edit and add the event to the system, and
then display the event on the page in the website.
| | 07:11 |
| | Collapse this transcript |
|
|
6. Social Networking with Joomla!Displaying social network links| 00:02 |
Once you've built your Joomla website
it's important to share it with social
| | 00:06 |
bookmarking sites.
One way to do that is by installing a
| | 00:09 |
social bookmarking plug-in within your
articles.
| | 00:13 |
In this lesson we're going to find a
social bookmarking plug-in to install, we
| | 00:16 |
will install it on the site.
Activate it, and then I'll show you how
| | 00:20 |
it actually works.
Once you've built your Joomla website,
| | 00:24 |
it's important to integrate your website
with social networking.
| | 00:30 |
In this lesson we're going to first install
a plug-in to share the content for each
| | 00:34 |
individual articles in specific
categories.
| | 00:38 |
Then we're going to do a similar thing with
a similar download, except we will
| | 00:41 |
install a module, and we'll display that
on certain pages on your website.
| | 00:47 |
To begin if we go to Extent on joomla.org
and the Extension Directory.
| | 00:52 |
.
In the search, type itpshare as one word.
| | 01:03 |
This is a free tool that we can work
with.
| | 01:06 |
It comes with a module and a plug-in, and
it will work in 1.5, 6, 7, and 2.5.
| | 01:14 |
So if you click on itpshare, and then
click on Download, we can see here some
| | 01:20 |
documentation about this tool.
And we can see some samples of how it works.
| | 01:31 |
And then, if you keep scrolling down, you
can see all of the different setup
| | 01:34 |
properties that it has.
If you keep going down, at the very
| | 01:37 |
bottom of the page, you can see the
different downloads.
| | 01:41 |
First, we want to download the plug-in.
Now, because we're in Joomla 2.5, I need
| | 01:48 |
to download the plug itpshare 2.0
J2.5.zip.
| | 01:53 |
You could click on it here, and save it
to your computer.
| | 01:56 |
At this point I'm also going to download
the module, but I'm not going to install
| | 02:00 |
it yet to the system.
So I'm going to click on the mod itpshare
| | 02:07 |
version 2.0 J2.5.zip.
And then save it.
| | 02:13 |
And now I go back to my website.
On the Administration panel I go to
| | 02:18 |
Extensions > Extension Manager.
Click on Browse.
| | 02:23 |
Go to my Downloads folder, that's where
my downloads get put, and I'm going to
| | 02:28 |
install plg itpshare version 2.0 J2.5.zip
so I'm installing the plug-in first.
| | 02:35 |
Click on Open, Upload and then Stop.
When you work with any plug-in in your
| | 02:40 |
website, the first thing you have to do
after installing it.
| | 02:43 |
Is go to Extensions and Plug-in Manager.
By default, when you install a plug-in,
| | 02:49 |
it comes in as being disabled.
To set up the properties for it, you can
| | 02:54 |
just click on it here, content dash
itpshare.
| | 02:57 |
First of all I would like to enable it.
Next, I can select the position.
| | 03:02 |
I'm going to have it on the top of my
articles.
| | 03:07 |
And then I can decide for each of the
social bookmarking pieces if I want to
| | 03:10 |
show it or not.
For right now, I'm going to show the
| | 03:12 |
Twitter button.
I'm going to leave it as small.
| | 03:16 |
I want the counter as horizontal, or I
can hide the counter if I would like.
| | 03:21 |
I'm going to keep it as horizontal.
I can select the language for Twitter.
| | 03:25 |
If I keep scrolling down, I have Tumblr
settings, Facebook like settings.
| | 03:30 |
I'm going to click this to show.
And scroll down, I have the Facebook
| | 03:35 |
button text, I'm going to use the word
like, or I can change it to be recommend,
| | 03:38 |
I'm going to keep it at like.
The Facebook like type.
| | 03:43 |
I can select the button count, standard
or box count.
| | 03:46 |
I'm going to change it to Standard.
If I want to show faces or not, I'm going
| | 03:51 |
to keep this as Hide.
I can determine the color, the font, and
| | 03:55 |
the width.
Next, I have the Digg settings.
| | 04:00 |
I'm going to keep this at hide.
StumbleUpon, I'm going to keep this as hide.
| | 04:04 |
Linkedin I'm going to change this to a
Show.
| | 04:07 |
I can also decide if I want to counter,
I'm going to say none here.
| | 04:10 |
Next, I have Retweet Me, we did it.
Google plus one, I'm going to click that
| | 04:19 |
to a Show.
Scroll down, pinterest, I'm going to
| | 04:23 |
click this as a show, and buffer I'm
going to leave as a hide.
| | 04:28 |
The next set, if you click on Advanced
Options, this is where you define where
| | 04:32 |
you want this plug-in to actually appear.
Typically, you only want it to appear in
| | 04:38 |
articles, so I'm going to click Yes here.
If I want it to show up in a category
| | 04:43 |
blog view, then I need to set this to be
Yes for showing in categories.
| | 04:48 |
But I'm going to keep that as No for now.
Show and featured, means when I have a
| | 04:53 |
feature page, or sometimes that may be my
homepage, I can click on yes as well.
| | 04:58 |
I'm going to turn this to a Yes.
Exclude articles, what that means is I
| | 05:02 |
can actually put article ID numbers,
divide them by comma, and then this
| | 05:06 |
plug-in will not appear on those specific
articles.
| | 05:12 |
I can do the same idea for excluding in
certain categories.
| | 05:15 |
Let's say I have a staff category, and I
don't really want to have the sharing
| | 05:19 |
buttons on that category or for any
articles in that category.
| | 05:25 |
I can put those ID numbers in there.
The next is I can display in these
| | 05:29 |
specific articles.
So basically if I only want it to be in
| | 05:34 |
specific articles I can put them in here.
I'm not using K2 or VirtueMart so I'm
| | 05:39 |
going to leave these as No, but I am using
JEvents so I'm going to put this as a Yes.
| | 05:51 |
I then have some advanced settings that I
could set here, for Facebook, Tumblr,
| | 05:56 |
Digg, Google Plus, Pinterest, and
itpshare settings that I can set up.
| | 06:01 |
If I scroll down I can also put in custom
codes that I want it to display.
| | 06:07 |
So, lets say, I have another sharing
button that I want to put in there that
| | 06:10 |
wasn't already defined.
I can actually put an additional button
| | 06:14 |
code that will be included.
All I need to do is specify the URL or
| | 06:19 |
the title for it.
Now I can click on Save and Close, and
| | 06:25 |
let's preview the website to see what
this does.
| | 06:30 |
Because I selected it to be on my feature
page, it's on my front page, here.
| | 06:35 |
I have my tweets, a LinkedIn, and a like
button.
| | 06:38 |
Let's say I click on Tweet.
If I log in to my Twitter account, and
| | 06:46 |
click on Sign In, what this allows me to
do, is, if I click on Tweet.
| | 06:52 |
It's going to share my website.
The exact link on my Twitter account.
| | 06:59 |
So, if I click on Tweet now, I can then
go to Twitter, and I've just tweeted this
| | 07:03 |
page, which means anyone that's following
me on Twitter will be able to see a link
| | 07:07 |
to this page.
If I click on Shark Adventure, I also
| | 07:12 |
have the buttons goign across the top,
and I could do the same thing here.
| | 07:19 |
If I go to one of my events, because I
turned it on for JEvents, I also have all
| | 07:22 |
my share buttons right here.
In this lesson we worked with a social
| | 07:28 |
bookmarking plug-in.
First we installed it, then we placed it
| | 07:31 |
on the site, then I showed you how it can
work within your actual website.
| | 07:36 |
| | Collapse this transcript |
| Displaying links to your social network pages using a module| 00:02 |
Let's say that your organization has a
webpage, created in Joomla, plus you may
| | 00:06 |
have created a Facebook page or a Twitter
page through Facebook and or Twitter.
| | 00:13 |
So one of your goals may be to have your
webpage give someone a link to go to your
| | 00:17 |
specific Facebook page, or to go to your
specific Twitter page.
| | 00:22 |
To do this, you can install a social
plugins module that can be displayed on
| | 00:26 |
different areas of your website.
In this lesson, we're going to find a tool
| | 00:32 |
through the extension directory to
display links to your other websites by
| | 00:36 |
installing a module.
We will then install that module,
| | 00:42 |
configure it, and then actually look at
the website and see how it works.
| | 00:49 |
And go to Extension Directory and type
nice social.
| | 00:58 |
Nice Social bookmark is a very simple
module.
| | 01:02 |
That allows you to display links to your
specific web pages.
| | 01:08 |
Meaning that they are going to show you
to your specific Facebook page that you
| | 01:11 |
may have created.
So if I click on Nice Social bookmark,
| | 01:16 |
and I download it, and I'll download the
most recent version.
| | 01:26 |
Click on OK to save, and then I'm going to
install it on my website.
| | 01:32 |
Now this is another example of a module.
I will click on Browse to install it,
| | 01:38 |
Upload and Install.
And now let's create this module.
| | 01:43 |
If I go to Extensions in Module Manager,
in the top, I'll type in here nice, and
| | 01:49 |
I'll click on Nice Social bookmark.
I'll select the position of seven.
| | 02:00 |
In the Nice Social bookmark, I can decide
if I want Facebook, Myspace, Twitter,
| | 02:04 |
Digg, and so forth.
For right now, I'm going to turn most of
| | 02:08 |
them off.
I'm just going to keep on Facebook and Twitter.
| | 02:13 |
I'm going to keep the icon size at 32.
I'm going to leave it as aquatic.
| | 02:17 |
You can go to their website, you can see
all the different symbols that they have,
| | 02:20 |
as well.
I'm going to keep the LinkedIn in and I'm
| | 02:24 |
going to click No on the others.
Mouse over effect means you can have a
| | 02:30 |
different effect happen when you put your
mouse over the button.
| | 02:33 |
I'm going to select Invert here.
As I scroll down, what I can do in the
| | 02:38 |
custom links, is I can actually put links
to my specific pages, so when I click on
| | 02:42 |
the icon that's where I'm taken to.
So if I put in here www.twitter.com/rytexsites.
| | 02:50 |
And you can put your mouse over the
information and it says here not to use http.
| | 02:59 |
If I scroll down, there are more options
that I could set here.
| | 03:03 |
And then I could decide if I want to add
additional icons, I can have a link to
| | 03:08 |
another icon, and a link to the actual
page I want it to go to.
| | 03:14 |
If you scroll up, you want to make sure
your status is set to Published, and your
| | 03:20 |
module assignment is on All Pages.
I hit Save and Close.
| | 03:27 |
Now I can go to my website.
Once I'm on my website, I can see how
| | 03:32 |
this new module works.
If I scroll down, on the left-hand side,
| | 03:36 |
I can see here Nice Social bookmark.
And I can see three links.
| | 03:42 |
The first one takes me to a Facebook
page.
| | 03:45 |
If I click on Facebook, this is allowing
me to post on my Facebook site the Joomla
| | 03:50 |
aquarium test web page, and once I click
Share Link, that will go to my specific
| | 03:55 |
Facebook account.
But if I go back to my site and click on Twitter.
| | 04:03 |
Because in Twitter, I actually put in an
actual Twitter account.
| | 04:07 |
Let's say you have your own Twitter
account, and you put that in there.
| | 04:10 |
If I click on Twitter here, it's going to
open up the rytexsite's Twitter account,
| | 04:14 |
because that's what I told it to do.
What this means is, I can now follow
| | 04:20 |
rytextsites on Twitter if I would want
to.
| | 04:24 |
Let's go back to the web site.
In this lesson, we reviewed how you can
| | 04:28 |
use a module to put links to your
different social tools.
| | 04:33 |
Then we installed the Nice Social
bookmark module.
| | 04:35 |
We configured it on the website, and then
we displayed it on the website to see how
| | 04:39 |
the different links would work.
| | 04:42 |
| | Collapse this transcript |
| Displaying Twitter feeds| 00:02 |
Another way you can make your site even
more dynamic, is by displaying feeds
| | 00:05 |
within your website.
In this lesson, we're going to find a
| | 00:10 |
Twitter Display Back tool, so you can
show your actual Twitter feeds on your website.
| | 00:15 |
Then we will take the tweets from a the
specific user, and display them on your site.
| | 00:21 |
And then, we're going to take Twitter feeds
from a specific search term, and display
| | 00:26 |
those on your website.
When we get to the Extensions directory,
| | 00:30 |
let's look through the categories on the
left-hand side.
| | 00:34 |
If you scroll down to Social Web, and
then from here click on Social Display,
| | 00:39 |
which is in the middle, then we want
Twitter display.
| | 00:45 |
The first option here is a Twitter
Module, called Twitter Show.
| | 00:51 |
That's the one we're going to download.
It is available for one five, and also
| | 00:56 |
for 2.5.
To download it we just click on Download.
| | 01:00 |
And I'm going to scroll down to get to
the 2.5 version.
| | 01:05 |
Click Download, and click Save.
Now I go to the back end of my website,
| | 01:10 |
and I will install it.
Go to Extensions, Extension Manager, Browse.
| | 01:17 |
And I will select Mode_twittershowedJ17.
And Upload and Install.
| | 01:24 |
To create this module, go to Extensions,
in Module Manager, click on New, and
| | 01:30 |
select Twitter Show.
For the title, I'm going to call it My Tweets.
| | 01:40 |
The position I want 7, I'll make sure 7
is in there.
| | 01:43 |
Click on Position dash 7.
I wanted it to show on all pages.
| | 01:49 |
On the right-hand side, I have a lot of
different options that I can set with this.
| | 01:54 |
I'm going to leave them as the defaults
for now.
| | 01:55 |
But the username I'm going to put
Righttechsites.
| | 02:01 |
That's my Twitter account.
And the Module type, I will leave it as
| | 02:07 |
Java script.
And then I click Save and Close.
| | 02:11 |
Now let's View it on the website.
I click on my Homepage, click on Home.
| | 02:18 |
And if I scroll down, on the left-hand
side, I can see all of the Tweets that
| | 02:22 |
were created by Rytex sites.
You can see here all of the Settings, how
| | 02:28 |
it's black and dark grey, all of these
pieces can be set specifically inside of
| | 02:31 |
the module.
Let's say instead of displaying the
| | 02:35 |
Tweets from a specfiic user ID, I want to
show all Tweets about aquariums, for example.
| | 02:42 |
So if I go back to the Module, and click
on My Tweets, for the Widget Type instead
| | 02:49 |
of Individual Profile, change it to
Search.
| | 02:58 |
As you scroll down, you can see the shell
background, the tweet background.
| | 03:02 |
I'm going to change the tweet background
to Blue, and I'm going to change the link
| | 03:08 |
color to yellow.
Just so you can see the differences.
| | 03:13 |
Let's also change the Shell Color, too.
We'll make that a Green.
| | 03:20 |
If you scroll down, I'm going to change
the Live Results to be Yes.
| | 03:24 |
And I'm going to leave the Scroll Bar to No,
going to leave the number of tweets to five.
| | 03:30 |
And if I scroll down to the bottom, these
are the settings for Search Widget Only.
| | 03:36 |
In the Search Query I type in Aquarium.
In the Search Title I put in Info About Aquariums.
| | 03:43 |
In the Subject, I'll put in here
Aquarius.
| | 03:51 |
Top Tweets, for now I'll leave this as
No.
| | 03:54 |
Click on Save and Close.
Let's go back to the Homepage.
| | 04:00 |
I'll scroll up to the top, click on Home
again, now I'll scroll down.
| | 04:06 |
Here at the tweets about aquariums.
You can see the colors that I change.
| | 04:10 |
It's a little bright for my taste, but
you can see how easy it is to change the colors.
| | 04:14 |
We made the links in yellow.
We have the green shell and the blue background.
| | 04:20 |
In this lesson, we installed a tool that
allows us to display Twitter feeds within
| | 04:23 |
our website.
We then displayed the tool, working from
| | 04:26 |
tweets from a specific user ID, then we
changed the module so we would show
| | 04:29 |
tweets from a specific search term which
we used the word aquarium.
| | 04:33 |
We then displayed the tool, working from
tweets from a specific user ID, then we
| | 04:36 |
changed the module so we would show
tweets from a specific search term which
| | 04:39 |
we used the word aquarium.
| | 04:42 |
| | Collapse this transcript |
| Displaying Facebook feeds| 00:02 |
Let's say you have a Facebook page, and
you want to display all of your feeds
| | 00:05 |
from Facebook directly on your website.
In this lesson, we're going to find a
| | 00:09 |
tool or a module to install.
We will install that module.
| | 00:13 |
Then we will set it up, and display it on
your website.
| | 00:17 |
So, that way, we can have our feeds from
Facebook display within our actual website.
| | 00:23 |
To start let's go to the Joomla.org
website, and go to Extend, Extension Directory.
| | 00:31 |
And I already have a tool in mind and
it's called Tk LikeBox.
| | 00:36 |
So I'm going to type it in up top.
This is a simple free tool that you can
| | 00:41 |
use and install.
So if I go to it now, and then click
| | 00:46 |
Download, I want the Tk LikeBox,
Facebook.
| | 00:53 |
And click on it here.
Now I need to scroll down, and I want the
| | 00:58 |
version for 1.6, 1.7 and 2.5.
From the download page, I click on
| | 01:05 |
Download, click OK to save.
Once its saved, I can go to my back end,
| | 01:11 |
go to extensions, extension manger and
click browse to install it.
| | 01:21 |
Its the mod Tk LikeBox, click open and
upload and install.
| | 01:30 |
To put it on my website I go to
Extensions > Module Manager, click on New.
| | 01:39 |
You want to find Tk LikeBox.
For the title, I'm going to put Facebook Feeds.
| | 01:49 |
For the position, I'm going to select
position 7, which is on the left-hand
| | 01:52 |
side of this template.
Click Search.
| | 01:59 |
Click on position seven.
For now I'm going to display it on all pages.
| | 02:04 |
The most important part here is I need to
put in the proper Facebook page link,
| | 02:08 |
including the http.
I'm going to go to my Facebook page that
| | 02:12 |
I already had displayed, and I'm going to
copy this URL, which happens to be Facebook.com/video2brain.english.
| | 02:21 |
You would put in whatever your Facebook
page happens to be.
| | 02:24 |
And I'm going to copy it using my
shortcut keys.
| | 02:29 |
I go to the administration page and then
I can paste it in the link.
| | 02:33 |
Make sure that if you paste it in or if
you type it that you put in the http.
| | 02:39 |
The width, I'm going to make it a little
bit more narrow.
| | 02:42 |
I'm going to make it 250.
I'll keep the height at 550.
| | 02:46 |
For now, I'm going to have the show fans on.
Keep in mind, though, if you have the
| | 02:50 |
show fans on, that means people's
pictures are going to be displayed on
| | 02:53 |
your actual website.
Some people may not be that happy if you
| | 02:57 |
choose to do that.
So in many businesses, you may want to
| | 03:01 |
keep that as the hide option.
But I'm going to keep it to show for now.
| | 03:06 |
I'm going to include the stream for the
color, I'm going to select light.
| | 03:10 |
The fan box header I'm going to click on
show and the border color I'm going to
| | 03:13 |
leave as the default which is black.
Then click Save and Close.
| | 03:19 |
And let's preview the website.
I have it in another tab here.
| | 03:22 |
I'm going to click on home.
And if I scroll down on the left-hand
| | 03:26 |
side, I can now see my Facebook feed on
the left-hand side.
| | 03:32 |
It's a really handy tool, especially if
your company is updating their Facebook
| | 03:36 |
feeds frequently, they can automatically
be updated on the website.
| | 03:41 |
In this lesson, we found a tool called Tk
LightBox, we installed it, we put it on
| | 03:46 |
the website as a module, and then we
previewed it to see how it actually works.
| | 03:52 |
| | Collapse this transcript |
|
|
7. Working with TemplatesUsing template styles| 00:00 |
In Joomla 2.5, they have given us the
capability to create and work with
| | 00:05 |
template styles.
In this lesson we'll discuss the
| | 00:10 |
differences between template styles and
actual templates.
| | 00:15 |
We're going to create a brand new style,
and then we'll display it on the website.
| | 00:20 |
In a content management system, such as
Joomla, the content or the information on
| | 00:23 |
your site, is held in a different place
from your actual design elements, or your template.
| | 00:30 |
Let's just look at the site real quick.
If I click on View Site, my template
| | 00:34 |
design controls different elements of the
webpage.
| | 00:40 |
For example, where my menu is displayed
on the top left-hand side here.
| | 00:44 |
How my logo may be displayed, and also
what positions are on the website.
| | 00:48 |
So, for example, on the left here, I have
position 12 where we put lots of modules.
| | 00:54 |
The templates can also change, what the
modular actually look like.
| | 00:58 |
One of the differences in 2.5 is in the
past, when you would work with templates,
| | 01:02 |
you would have to create a whole new
template, if you want your site to look different.
| | 01:08 |
For example, if I click on the Exhibits
Page, and I want this page to look very
| | 01:13 |
different, I would need to create a
separate template in order for that to happen.
| | 01:19 |
Each template comes with, multiple PHP
file, CSS files, Image files, and all of that.
| | 01:27 |
So it can be quite cumbersome to store,
multiple templates on your system,
| | 01:31 |
although it can be done.
In 2.5 they've given us the capability to
| | 01:36 |
use what's called the style, which means
you will use the same template but you
| | 01:40 |
will create a different style of it.
So basically when I click on Exhibits,
| | 01:46 |
the page can look different, but in
essence it's still using the same
| | 01:49 |
Template Files, as when I click on Home.
To work with the template styles, lets go
| | 01:56 |
to the back end of the website, go to
Extensions and Template Manager.
| | 02:01 |
In 2.5 as a default, when you go to the
Template Manager, you will see Styles and Templates.
| | 02:08 |
Think of styles as the way your website
actually looks with the template.
| | 02:13 |
If you click on Templates, these are the
actual template files that are actually
| | 02:19 |
being used.
Let's work with the styles first.
| | 02:22 |
If I click on Styles, I can see that the
style that I'm using for my template, is
| | 02:28 |
the Beez 20 template, or Beez to default.
Let's make a copy of this template style.
| | 02:35 |
I click on the Check Box, click on
Duplicate and now, there is a new copy of
| | 02:40 |
it, and you can see it here as Default 2.
Let's click on the brand new one of
| | 02:47 |
Default 2.
I'm going to change the style name and I'm
| | 02:52 |
going to put NEW in capital letters so I
know this is my new template.
| | 02:56 |
I'm going to use this for my Exhibit Pages,
so I'm going to call it Exhibits as well,
| | 03:01 |
just so I remember what I'm using it for.
This is not going to be the default template.
| | 03:09 |
What I will do, is on the left-hand side,
I'm going to check on all of the Exhibit Pages.
| | 03:14 |
So basically, when I go on the Exhibit
Pages, this is the template I want to use.
| | 03:20 |
With this template, there aren't that
many options that I can set here.
| | 03:24 |
This is the core template that comes with
Joomla.
| | 03:27 |
If you install your own commercial
template, or even other free templates,
| | 03:31 |
you will see the Advanced options for the
styles are going to be much more detailed.
| | 03:37 |
You'll be able to change things perhaps
like Color, and things of that nature.
| | 03:41 |
For here, I'm going to click on for Template
Color.
| | 03:46 |
Instead of Personal, I'm going to click on
Nature.
| | 03:49 |
And you'll see the website's going to
change significantly.
| | 03:53 |
For the Title, I'm going to change this to
Exhibits.
| | 03:58 |
And then I'm going to click Save and
Close.
| | 04:02 |
So again, all that I did was I made a
copy of the template style.
| | 04:07 |
I did not create a new template.
It is using the same Beez_20 template.
| | 04:13 |
So any coding in Beez_20, any module
positions, they're both going to be exactly
| | 04:18 |
the same.
But this allows me to create a different
| | 04:22 |
I guess you can say, version of the
template.
| | 04:25 |
Let's preview it on the website.
If I click on Home, and then click on
| | 04:30 |
Exhibits, your going to see now that my site
changes.
| | 04:35 |
Now that I'm on the Exhibits page, the
site is green, my menu is all the way up
| | 04:39 |
at the top and even the different colors
are different.
| | 04:44 |
If I click back on Home.
Now I'm back to using the other style.
| | 04:50 |
A reason you may use this in a real
website, is let's say, you have a
| | 04:54 |
Synagogue or a Church website.
And when you click on the Education page,
| | 05:00 |
you want to be taken to a school website.
But you don't necessarily want to be
| | 05:05 |
taken out of Joomla.
By doing something like this, by creating
| | 05:09 |
another template style, again, we're not
rebuilding the template, we're not
| | 05:13 |
creating more PHP files.
We're just saying we want it to look
| | 05:18 |
slightly different.
So by using this style, we're able to
| | 05:21 |
that very easily, anytime I go within the
Exhibit pages.
| | 05:27 |
I'm still in this style.
When I return back, let's say I click on
| | 05:31 |
Events, I'm back to the old website.
If you go to the actual back end, and you
| | 05:39 |
click on Templates, here you can see the
actual template files that are being used.
| | 05:46 |
If I click on the Beez 20 details.
I can see here, all the style sheets that
| | 05:52 |
are being used for Beez 20, the Main
page, the Error page, and the Print View template.
| | 05:59 |
All of these are defined one time, even
if I am using the Beez template twice in
| | 06:03 |
two different styles.
You can see here that for the Styles for
| | 06:08 |
Nature, has its own CSS files.
And in another lesson, we're going to
| | 06:14 |
review how you can actually change these
CSS files.
| | 06:18 |
In this lesson, we discussed Template
Styles.
| | 06:21 |
I showed you the difference between
Templates and the actual Styles of the template.
| | 06:26 |
We then created a new style.
Modified it slightly, and then we
| | 06:31 |
displayed it on the actual website in the
Exhibits page.
| | 06:36 |
Then lastly, we looked at how you
customize the template itself.
| | 06:40 |
And we can see here the different files
that are used, in the actual template.
| | 06:44 |
| | Collapse this transcript |
| Modifying template CSS styles| 00:00 |
There are many different ways that you
can change your template.
| | 00:04 |
In this lesson, first we will install a
tool so we can analyze the website and
| | 00:08 |
determine what the styles are.
Then we're going to actually make the
| | 00:13 |
changes, save them onto the website; then
we will preview the website to see your
| | 00:17 |
changes in action.
When I like to make changes to my
| | 00:23 |
templates, I prefer to use Firefox as my
web browser.
| | 00:26 |
I also like to install a tool called
Firebug.
| | 00:31 |
Assuming you have Firefox already
installed, to get Firebug, if you open a
| | 00:35 |
new browser and type getfirebug.com.
From here you can click on install Firebug.
| | 00:41 |
You want to make sure you're using the
right version of Firebug that works with
| | 00:46 |
whatever version of Firefox you currently
have.
| | 00:51 |
I'm going to install the newest one for
now.
| | 00:55 |
My next option is to add to Firefox.
And I'll click on Install Now.
| | 01:02 |
Once I restart my browser, Firebug will
of already been installed.
| | 01:07 |
If I look at my current website it
joon-aquarium.com/testsite.
| | 01:12 |
I can view my whole website.
Let's say where it says Site for Training
| | 01:17 |
Only and Feeding times.
These titles.
| | 01:20 |
I want to change them to another color.
First of all, I need to know what color I
| | 01:23 |
want to change them to.
So here's another helpful site that you
| | 01:28 |
can go to.
You can go to a site called htmlcolorcodes.info.
| | 01:34 |
It's html-color-codes.info.
If you scroll down on this page.
| | 01:41 |
And I click on a blue let's say.
It will give me the actual code, at the
| | 01:46 |
bottom right here.
So the color that I want.
| | 01:50 |
Is 2e2efe, with the pound sign.
I'm going to write that down on a piece
| | 01:58 |
of paper just so I have it, as a note.
If you want to see other color codes like
| | 02:04 |
let's say green, if I click on it here's
my lime green and again it gives me the
| | 02:09 |
number for the lime green is 9AF82E.
Let's go back to our website.
| | 02:16 |
So what I'd like to do is make site for
training only to be in the blue.
| | 02:21 |
The 2E2EFE color.
To use Firebug, put your mouse on the
| | 02:27 |
title and right-click.
From here, select Inspect Element with Firebug.
| | 02:33 |
This is only going to work if you already
have Firebug installed.
| | 02:37 |
I'm going to click on it now.
The bottom half of the screen shows me
| | 02:42 |
the actual code that's being generated.
The left side is my HTML, on the right
| | 02:47 |
side are the actual styles that are being
used.
| | 02:52 |
As I click on different items in my HTML,
you can see different things are
| | 02:55 |
highlighted on the actual page.
I'm going to go back to the back H 3 tag.
| | 03:03 |
Now on the right-hand side, I can
actually make changes here.
| | 03:07 |
The changes I make are only temporary.
So, basically, by making this change, I
| | 03:12 |
can see what it's going to end up looking
like on the website.
| | 03:17 |
Another trick that I have is on the right
hand side, it tells me the exact file
| | 03:22 |
that I would be modifying, which is in
the Bees_20 folder CSS.
| | 03:28 |
And the name of the files, layout.css on
line 289.
| | 03:33 |
If I right-click somewhere in here and
click on New Property I could type in
| | 03:39 |
color; now I can put in my color code of
2E2E FE, hit Enter, and now you can see
| | 03:45 |
it turned blue.
Not only did that turn blue, but the
| | 03:52 |
feeding times turned blue as well.
This change is only temporary, in order
| | 03:56 |
to make the change on the actual website,
I need to go to the layout.css file.
| | 04:01 |
There are two ways that I can do this.
First we can do this directly through
| | 04:11 |
theUNKNOWN website and I'll show you
how.
| | 04:15 |
You go to the backend of your website and
go to Extensions and Template Managers.
| | 04:20 |
From here click on Templates, we want the
actual template files.
| | 04:27 |
Scroll down, click on Bs_20 details...
On the right-hand side, I can see
| | 04:35 |
layout.CSS and I can click on it.
This is the actual CSS file.
| | 04:42 |
What I can do is try to find the line of
code, which is right down here.
| | 04:47 |
It's the #navh3span.backh3.
And I can put the same color change in here.
| | 04:55 |
Color: #2E2EFE; remember to add the
semicolon.
| | 05:14 |
When I'm done I can click Save and Close.
Something to think about.
| | 05:18 |
We are making a change to the actual file
on the live site.
| | 05:23 |
We did this without creating a backup.
We actually went into the file and made
| | 05:27 |
the changes directly here.
This may seem very simple and innocent to do.
| | 05:32 |
But keep in mind if you make a mistake,
you may render your website completely inaccessible.
| | 05:38 |
But lets click save and close and see
what happen.
| | 05:42 |
Now if I go to my website and refresh.
Now I see the blue, but this blue is
| | 05:49 |
permanent unlike when I made the change
on Firebug.
| | 05:53 |
In this lesson we made adjustments to the
template directly through the website.
| | 05:59 |
First we installed Firebug, which we used
with the Firefox web browser.
| | 06:03 |
We then determined what we wanted to
change then we want onto the website and
| | 06:07 |
actually made the changes.
And then we previewed the changes on the
| | 06:12 |
actual website.
| | 06:13 |
| | Collapse this transcript |
| Modifying a template using FTP| 00:00 |
There are many different ways that you
can make changes to your website template.
| | 00:06 |
In this lesson we're going to make the
changes using tool called file zilla.
| | 00:10 |
That way we can make the changes locally
in our computer and then move them up to
| | 00:13 |
the website.
After we make these changes we're then
| | 00:17 |
going to preview the changes on the
website.
| | 00:21 |
Current on my website, the title site for
training early is in a bright blue.
| | 00:26 |
Let's say I want to change that.
This way I can make backups of my files
| | 00:31 |
locally on my computer and then I can
make the change on the actual website.
| | 00:38 |
Let's say I want to change it to a
different color.
| | 00:41 |
I want to use more of a navy blue type
color.
| | 00:44 |
So I'm going to go back to my HTML color
codes.
| | 00:47 |
I'm going to select a deeper blue, and I see
that the code for that is 0B0B61 and I'm
| | 00:54 |
making note of that first.
And now I'm going to go into Filezilla.
| | 01:05 |
I already have my site set up, which you
can do in Site Manager, if you click File
| | 01:09 |
and Site Manager.
On this screen here I set up JoomAqua, I
| | 01:15 |
set up my host, I put in my user ID and
password.
| | 01:20 |
In Advanced I'd go to my certain local
directory on my local computer, and then
| | 01:25 |
in my website I go to Public HTML, which
is my route, and then I go into the
| | 01:29 |
folder test site, that's where my full
site is sitting, and then I click on Connect.
| | 01:38 |
I've already copied the template onto my
local computer...
| | 01:42 |
On the left-hand side, is the local site.
On the right-hand side, is what's on my
| | 01:48 |
actual host.
But since I just made a change to the
| | 01:52 |
CSS file, I'm going to want to bring that
CSS file back into my computer.
| | 01:57 |
So, in the Host, if I go to the Templates
folder, Then bees_20.
| | 02:02 |
Then from here Click on the CSS Folder.
I could see here that the layout was just changed.
| | 02:11 |
I'm going to go on to my local computer,
the CSS File.
| | 02:15 |
I'm going to bring this file onto my
local computer.
| | 02:19 |
I'm going to be asked if I want to
override it, I click on Okay.
| | 02:25 |
And now, I have the newest version.
One other thing that I need to do, is to
| | 02:30 |
set up my editor on Filezilla/g.
If you go to Edit and Settings And scroll
| | 02:36 |
down and click on File Type Associations.
I already installed Notepad 2 locally on
| | 02:45 |
my computer, and it was installed in the
Program Files directory.
| | 02:51 |
So what I do here is put in CSS, meaning
for the CSS extension always use notepad 2.
| | 02:58 |
Same for xml, php, and let's say if
there's an html file I also want to do the same.
| | 03:05 |
So I'll put html quotation marks,
C:/programfile/notepad2/notepad2.exc,
| | 03:15 |
close quotes, and then click Okay.
When I'm working in layout.css to find
| | 03:25 |
what I'm looking for, if I know what the
tag is, I know it's an H3 tag, I'm going to
| | 03:31 |
hit Control F, search for H3, hit Find
Next, keep hitting Find Next, Find Next,
| | 03:38 |
again, and one more time, I want the H3
that's along with the NAV.
| | 03:48 |
Here it is.
Pick close and minus line number 577 and
| | 03:53 |
you could see here pound now H3 span dot
back H3.
| | 03:59 |
If I scroll down I could see here the
color change that I put in there.
| | 04:04 |
The 2V 2EFE.
Another nice thing, about using Notepad
| | 04:10 |
Two, locally on my computer, is I can
always do, File > Save As, and I could
| | 04:15 |
save this as a backup, just in case.
I can also, then, save it as the original
| | 04:24 |
name, without the BK.
So now when I work on it I know I have a
| | 04:31 |
backup version.
So now let's change the color to 0B,
| | 04:36 |
0B61, and I"m going to save it and then
close it.
| | 04:45 |
Files still is going to give me a message
saying a file has been changed do I want
| | 04:49 |
to upload it to the server I'm going to
click no.
| | 04:52 |
Now I can take layout.css which I just
changed and drag it over to the host and
| | 04:59 |
let go.
And from here I'm going to select overwrite.
| | 05:06 |
Click on okay.
And now let's go to the website, and see
| | 05:08 |
if we can see the difference.
As you can see now, on the website.
| | 05:13 |
Instead of having the bright blue
headers, I have the navy blue headers.
| | 05:17 |
Which is the zero b, zero b, 6, 1 color
ID.
| | 05:22 |
In this lesson, we used a tool called
Filezilla to work with our CSS files.
| | 05:26 |
And make changes on our client, or on our
computer.
| | 05:30 |
And then we moved them up to the server,
and then we previewed those changes.
| | 05:35 |
| | Collapse this transcript |
| Adding a new position to a template| 00:02 |
When you are using a template for your
website, every template comes with
| | 00:05 |
specific positions.
But sometimes you want to add your own
| | 00:09 |
position that's in another area of the
website.
| | 00:13 |
In this lesson, first we're going to look
at the current positions that are given
| | 00:16 |
to you in the template that we are
working with today.
| | 00:20 |
Then we're going to modify your index.php
and your templatedetails.xml in order to
| | 00:25 |
add the position.
And then, we're actually going to utilize
| | 00:29 |
the position on the website.
To begin, let's go to our actual website
| | 00:34 |
and look at the template positions.
To do that, after the URL of testsite/,
| | 00:41 |
you put ?TP=1.
And you put this in your URL and click Enter.
| | 00:49 |
This will show me all of the current
positions that are in my website.
| | 00:53 |
If on your website you don't see these
positions, you need to setup the template
| | 00:57 |
settings first.
Let's go over there so I can show you
| | 01:00 |
where that's set.
If you go to your administration panel,
| | 01:04 |
an then go to extensions, an template
manager.
| | 01:10 |
From here, click on Options.
In release 2.5 of Jooma, they have put in
| | 01:15 |
an option to preview module positions.
By default, this is disabled.
| | 01:22 |
You must enable it order to see those
position numbers, like what I did before.
| | 01:28 |
Once you have it enabled, you can click
Save and Close.
| | 01:32 |
And return back to your website.
Looking at these positions, the one
| | 01:36 |
position that I would like to add is
something to display right underneath my
| | 01:40 |
content, which is just below my actual
main content.
| | 01:45 |
We're going to call this new position
content - bottom.
| | 01:50 |
What I'd like to put here is maybe a
banner or some information about the site.
| | 01:55 |
In order to make this position.
I would prefer to work with FileZilla or
| | 01:59 |
some FTP software in order to change my
actual files.
| | 02:05 |
So let's go into FileZilla now on my
local computer.
| | 02:08 |
Once in FileZilla, you want to connect to
your host server which I have already
| | 02:13 |
done so.
If I click on the down arrow, click
| | 02:18 |
jumeaqua/g, click OK, I'm now in my
server.
| | 02:23 |
I want to make sure that I'm in my test
site folder because that's where my
| | 02:26 |
website resides.
On my left-hand side, I've already copied
| | 02:31 |
my Beast 20 template on to my local
computer, but if you're not sure if you
| | 02:35 |
have done that already, what you can do
is go to your host site, go to the
| | 02:39 |
templates folder open it up, then you can
click on Beast 20 and actually drag it
| | 02:43 |
over to your local computer.
I'm going to open it up, and just click
| | 02:51 |
on the files to drag them over to my
local computer to make sure that I'm correct.
| | 03:01 |
By default I'm going to click on always
use this action and okay to overwrite.
| | 03:07 |
There were two files that you are going
to work with when you are editing.
| | 03:10 |
File 1 is index php.
And although some files are still moving
| | 03:16 |
over, I can see the index.php file listed
here.
| | 03:20 |
I'm going to right-click on it and select
edit.
| | 03:24 |
My index.php is opening using notepad 2,
which is a setting that I already set up
| | 03:29 |
inside of file zilla /g.
You can use any editor that you prefer to
| | 03:33 |
work with.
To find the area where I want to put my
| | 03:38 |
information, because I want to put it
below my main module or below the main content.
| | 03:44 |
That's wehre the text is actually put on
my website.
| | 03:47 |
I can do a Control Find for the word main
and click Find Next.
| | 03:53 |
If I scroll down a little bit more, I can
see here I see position 1, position 0,
| | 03:59 |
keep going down, I then have my left
navigation area, keep scrolling down.
| | 04:12 |
And then I have here my position 12,
which is the information that I remember
| | 04:15 |
from before, which is displayed just over
my main content.
| | 04:21 |
Then I have here include type message and
that include type equals component.
| | 04:28 |
Where you see include type equals
component that is where the main content
| | 04:31 |
is put on the page.
So we're going to put our new module just
| | 04:36 |
below this.
Now I will go just underneath my line for
| | 04:42 |
the component and enter in my text.
I'll hit my Tab key across And then type
| | 04:50 |
in
<jdoc:includetype=""modulesname=content-bottom/>
| | 04:58 |
The jdoc include is code from
Core-Joomla, the type modules means I'm
| | 05:07 |
putting a module position here.
The name is the actual name of my module position.
| | 05:19 |
I'm not going to use any div tags or
define this in any way at this point.
| | 05:24 |
Although you could later on put a div tag
around it to add additional classes for
| | 05:28 |
this module position.
Next we need to save this document, you
| | 05:34 |
can click on Save in the Save Icon on
top.
| | 05:39 |
And now I'm going to close this.
It's going to ask me if I want to upload
| | 05:44 |
it to the server, I'm going to click on
Yes finish editing and click on Yes.
| | 05:53 |
The next file I need to update, is
TemplateDetails.XML.
| | 05:58 |
This is the file that lists all the
modules that you could potentially use.
| | 06:02 |
I'm going to right-click on it, click Edit.
I need to find the position, so if I
| | 06:07 |
scroll down, you can see here the list of
positions.
| | 06:11 |
These are the positions of modules that
are used in this current template.
| | 06:16 |
To make my life easier, I can actually
highlight this line and copy it by using
| | 06:20 |
any copy shortcut.
Click on it again, hit enter, and then
| | 06:26 |
paste it using a paste shortcut on your
keyboard.
| | 06:31 |
I'm going to delete the extra line and
then instead of it saying Position 14 I'm
| | 06:36 |
going to type content dash bottom.
So let's review again.
| | 06:43 |
In order to add the new position we just
had to put the code in to include the
| | 06:47 |
type modules...
Of content-bottom in my index.php.
| | 06:53 |
The next step is I needed to go to my XML
file to basically put content-bottom as a
| | 06:58 |
valid module for this template.
Then I can save and close.
| | 07:06 |
Going to click on yes.
Now, to make sure that both of my files
| | 07:13 |
have moved over to the server, if I
highlight Index.PHP, and template
| | 07:17 |
details, I could drag them across.
Now, let's go to the website, and put an
| | 07:24 |
actual module in this new position.
I'm going to go to my Back end.
| | 07:32 |
Go to Extensions, Module Manager and
let's just create a custom module.
| | 07:38 |
I'm going to click New, and create a custom
HTML module.
| | 07:47 |
For the title, I'm just going to call it,
Content Bottom.
| | 07:51 |
For the position, click on select
position.
| | 07:55 |
I'm going to change the template to B 20
because that's the template I'm working with.
| | 08:00 |
Now I can see here content bottom.
The reason why this is listed is because
| | 08:05 |
I put it in my XML file.
And I can click on it here.
| | 08:09 |
You can scroll down and in the custom
output I'm going to just put in some
| | 08:14 |
dummy text.
This is the content bottom of my website.
| | 08:23 |
I'm only going to have it display on my
homepage, so I'm going to click on the down
| | 08:27 |
arrow here and select only the page is
selected.
| | 08:31 |
Click toggle selection, an just click on
home.
| | 08:37 |
Scroll up to the top, click save an
close.
| | 08:42 |
Let's go to the website and see what it
came out like.
| | 08:45 |
I'm going to click on view site.
I scroll down, I will see this.
| | 08:52 |
This is the content bottom of my website.
this was put here because of the position.
| | 08:58 |
If I click on Shark Adventure, it's not
going to show up, because I only selected
| | 09:03 |
for it to show up on my homepage.
In order to add a new module into your
| | 09:08 |
website, we had to do a couple of things.
First, we looked at the current positions
| | 09:13 |
of our template, We then modify two files
the index.php and the template details of xml.
| | 09:20 |
And then lastly we actually assigned a
module to that new position and displayed
| | 09:24 |
it on the website.
| | 09:27 |
| | Collapse this transcript |
|
|
8. Making Your Website Mobile-Friendly with Responsive TemplatesInstalling a responsive template| 00:02 |
A large percentage of your customers
viewing your website will be looking at
| | 00:05 |
your website through another device,
rather than a typical PC or large screen.
| | 00:12 |
In this lesson, we'll review how you can
download a Responsive Template, install
| | 00:16 |
it on your website, and see how it ends
up working.
| | 00:20 |
If you look at the current website that
we created, on a large screen, it looks okay.
| | 00:27 |
But if I were to change my browser size,
and perhaps, shrink it down to where it
| | 00:31 |
would be a similar size as a tablet or an
iPhone.
| | 00:35 |
You'll see the website itself doesn't
look very good.
| | 00:41 |
When working with tablets or iPhones,
there are two different directions you
| | 00:44 |
can take when deciding what to do with
your website.
| | 00:49 |
One direction is using what's called a
Responsive Template.
| | 00:53 |
A responsive template means that your
template automatically adjusts based on
| | 00:57 |
the size of the browser.
Your other option is actually to use some
| | 01:01 |
kind of detection device.
Basically, a detection device would say,
| | 01:06 |
if you are looking at the website using a
specific platform, such as a BlackBerry
| | 01:10 |
or an iPhone.
You will use a certain template based on
| | 01:15 |
what device you select.
The problem with using that approach
| | 01:19 |
though, is that there's so many different
devices out there that you'll end up
| | 01:23 |
having to create hundreds and hundreds of
different templates.
| | 01:27 |
The direction we're going to try, right now,
is using what' called a Responsive Template.
| | 01:32 |
One such template we can use is from a
company called JoomlArt.
| | 01:36 |
If you open your browser to joomlart.com,
you can see this is a great template
| | 01:42 |
company to work with.
They've actually put out a free template
| | 01:48 |
that you can use as much as you want that
is a responsive template.
| | 01:54 |
To find it, if you go to JoomlArt, and
from there, you click on JA Templates,
| | 01:59 |
and you can select the template that's JA
Elastica.
| | 02:04 |
And I'm going to click on it now.
The JA Elastica template is responsive,
| | 02:11 |
which means is it will adjust in size.
So if I change the size of my browser,
| | 02:18 |
you can see what actually happens is it
even changes the menu.
| | 02:23 |
So as I make it larger, you can see there
are three menu items.
| | 02:27 |
As I make it smaller, it actually changes
it to just the word menu, which I can
| | 02:31 |
then click on, and then it will get the
other menu items.
| | 02:36 |
This is completely responsive based on my
screen size.
| | 02:38 |
So if I'm using a smaller iTouch device
or a phone device, it may look like this,
| | 02:42 |
whereas, if I'm using a tablet or
something larger, it will look more
| | 02:46 |
similar to my current website and I can
scroll down and see all the different positions.
| | 02:55 |
And then, if I maximize it to the full
width of my screen, then you could see
| | 02:58 |
the changes again.
To download this template, I'm going to
| | 03:04 |
go back to joomlart.com so I can download
it.
| | 03:10 |
To download the template, if you go to
Joomla, and then go to download T3 impurity.
| | 03:16 |
And when you log in, it may say something
different here.
| | 03:18 |
But your goals to look for the downloads
or the free downloads from JoomlArt.
| | 03:26 |
From here, I can see the JA Elastica of
Responsive template from Joomla.
| | 03:30 |
And you can click on it here.
By default, when you go to the Download,
| | 03:37 |
it will download a couple of different
files.
| | 03:40 |
It will download the JA Elastica for
Joomla 2.5, the Quick Start, which is
| | 03:44 |
actually a full website.
You won't be needing this one, especially
| | 03:48 |
if you already have your site loaded.
The JA Elastica template for Joomla 2.5.
| | 03:53 |
This is the actual template.
The JA Extension Manager, this is a
| | 03:57 |
component that is for JoomlArts
templates.
| | 04:02 |
And then the last piece is the JAT3
System plugin for Joomla 2 5.
| | 04:06 |
This is actually required in order to use
your Elastica Template.
| | 04:10 |
So, for right now I'm going to uncheck
the other two items, and I'm just going to
| | 04:14 |
download the template and the plugin, and
click on download.
| | 04:19 |
From here, in order to download it, they
do ask you to pass on there message, so
| | 04:23 |
you can either tweet it or post it.
Once you've tweeted the message of
| | 04:27 |
sharing the product, you can then click
Download now.
| | 04:33 |
Once you've installed it, you will have
to extract these two files, they do come
| | 04:36 |
downloaded zipped up together.
So I'm going to go to my Computer and
| | 04:40 |
Extract them now.
I'm going to open up my Downloads folder
| | 04:45 |
or wherever you happen to have stored it,
and then you can right-click on the file,
| | 04:51 |
and I'm going to extract it.
Once I've extracted it, I can now install it.
| | 05:02 |
So if I go back to my website, I go to
Extensions > Extension Manager, and click
| | 05:08 |
on Browse, from here, I go to the folder
that I downloaded it to.
| | 05:16 |
I open up the folder JA Elastica that I
just extracted.
| | 05:21 |
First, I'll install the template, so if
you click on the Template folder, you'll
| | 05:24 |
see the template here.
Click on it and click Open & Install.
| | 05:30 |
The next step is you have to install the
plugin.
| | 05:33 |
If you go to Browse, move up a notch,
click on Plugin, and install the plugin.
| | 05:41 |
In order to activate the template you go
to Extensions > Template Manager, from
| | 05:46 |
here, I can see the JA Elastica default,
I can click on it, I can click on Make default.
| | 05:55 |
And now, let's view this site to see how
it comes out.
| | 05:58 |
So if I go to the website and refresh my
page either by clicking on the arrow or
| | 06:02 |
hitting your shortcut key to refresh, you
will now see the website redone in the JA
| | 06:06 |
Elastica Template.
I can tell it's responsive, because now,
| | 06:12 |
if I actually shrink it, as I shrink it
down, I can even see how the logo moves
| | 06:16 |
depending on the size of the browser.
I can also click on menu, which will give
| | 06:22 |
me my other menu items, and then, I can
make the site bigger or a full screen size.
| | 06:28 |
And then, all of the other modules will
be put up there and displayed.
| | 06:33 |
In this lesson we installed onto our site
a responsive template called JA Elastica.
| | 06:39 |
We went to JoomlArt to get the files.
We installed them locally, and then we
| | 06:43 |
installed them onto the website.
Then we made it as the default template
| | 06:47 |
for our website.
So now, our website is using a Responsive Template.
| | 06:51 |
| | Collapse this transcript |
| Modifying a responsive template| 00:02 |
Once you have installed a template, such
as the Elastica Responsive Template, you
| | 00:05 |
may want to make some basic changes to the
template.
| | 00:09 |
In this lesson, we're going to change the
logo and put our own logo inside of the template.
| | 00:15 |
And then, we're also going to modify some
of the modules, so they look a little bit
| | 00:18 |
better using this template.
Many templates actually use a logo
| | 00:23 |
position in the Module Manager.
When that's done, it makes it a lot
| | 00:28 |
easier to change the logo.
Because you can just create a new module
| | 00:32 |
and put it in that position.
In the Elastica Template, the logo's
| | 00:36 |
actually hard-coated, which means the
image itself is sitting inside of the
| | 00:40 |
Template Directory.
To find out where the logo is sitting, if
| | 00:45 |
you right-click on the logo, to get more
information about the image, and I'm
| | 00:49 |
going to click View Image Info.
I can see here that that image itself is
| | 00:58 |
sitting in my
joom-aquarium.com/testsite/template/jaelastica/images/logo-trans.png.
| | 01:10 |
What that means is if on my Computer, I
create my own logo and I name it
| | 01:15 |
logo-trans.png, and I actually replace
this file with my own logo, it will
| | 01:20 |
display my logo instead of the original.
To do this, I've already created a logo
| | 01:28 |
locally on my PC.
You can also get a copy of that logo
| | 01:32 |
through your download files.
The logo is called logo-trans.png.
| | 01:36 |
In order to upload it, I'm going to use
FileZilla to upload the PNG file, which
| | 01:42 |
I'll go to right now.
Currently, I'm logged into my
| | 01:51 |
Joom-Aquarium website, and on the
right-hand side, I can see I'm in the
| | 01:54 |
Test Site folder.
On the left side, which is my Local
| | 02:00 |
Computer, I have the file logo-trans.png.
I need to now move this file over into
| | 02:07 |
the Templates folder.
If I scroll down on the right, and click
| | 02:13 |
on Templates, and then go to JA Elastica.
From here, open the folder Images.
| | 02:20 |
I can see now in this folder, the file
logo-trans.png.
| | 02:29 |
What I can do right now is actually
rename this file so I keep a backup of it.
| | 02:34 |
I can right-click on it, click on Rename.
And I'm going to just add bk to the name of it.
| | 02:39 |
This way, I have a back up just in case
anything goes wrong.
| | 02:45 |
I can also put this back up on my Local
Computer, so I'm going to drag it over now.
| | 02:51 |
Now, I'm going to take my logo-trans.png,
which is the logo for my Joom-Aquarium,
| | 02:56 |
and put it inside of this folder.
Once I've done that, I can now preview my website.
| | 03:05 |
Now that I see my logo up there, I'm
looking at the colors, and I'm not really
| | 03:08 |
thrilled of the reddish color that they
have behind my logo.
| | 03:13 |
I would prefer to use a teal or a bluish
type background.
| | 03:17 |
I already found the color that I want and
it's 006699.
| | 03:21 |
But I have to figure out where I'm
supposed to change it.
| | 03:24 |
So if I go up to the logo, and
right-click, assuming I've already
| | 03:27 |
installed Firebug, with my Firebox
Browser, I can use this handy option that
| | 03:31 |
says Inspect Element with Firebug.
Once I get to Firebug, I can click on the
| | 03:39 |
h1 class=logo.
Right here, I can see exactly where I
| | 03:43 |
want to adjust the code.
To change it, I can actually double-click
| | 03:47 |
on it and actually change it right here,
006699.
| | 03:51 |
So I can preview what the background
color will look like.
| | 03:54 |
And that's what I want.
So now, what I can do, I can look at the
| | 03:59 |
file template.css, edit that file, and
put in my change.
| | 04:04 |
To determine where in the file, either I
can look for line 625, or if the line
| | 04:09 |
numbers aren't in sync, I can look for
the code h1.logo.
| | 04:15 |
To make this change quickly, I'm going to
edit this file directly in my Template Online.
| | 04:22 |
Once I go back to my Administrator panel,
I go to Extensions and Template Manger.
| | 04:28 |
And from here, I can actually click on JA
Elastica template in the third column.
| | 04:33 |
If this is not highlighted, I can also
click on Templates, and then from there,
| | 04:38 |
click on JA Elastica.
For now, I'm going to click on the link
| | 04:42 |
under the Template column.
And now, I want to edit the file template.css.
| | 04:49 |
I want to find in here my h1.logo.
So I can hit Ctrl+F or whatever my
| | 04:54 |
shortcut is for find and type h1.logo.
If I scroll down a bit, I'll be able to
| | 05:02 |
find it.
So right here, I can see the code, and
| | 05:09 |
I'm going to change it to 006699.
Make sure you keep the pound sign and
| | 05:14 |
that you keep the semicolon at the end.
And then, I'm going to click Save and Close.
| | 05:20 |
Once I'm done making that change, I can
go back to my website and refresh it, so
| | 05:24 |
I can see the change.
So I'm going to click on Home and I'm going
| | 05:28 |
to refresh my page.
And now, I can see that the background in
| | 05:32 |
the blue is permanent.
One other quick change I'd like to make
| | 05:37 |
is under Facebook list, this modules
display too wide.
| | 05:42 |
So I can go back to my Administration.
If I'm still in the Customized template,
| | 05:46 |
I can click on Close here.
And then I can go to Extensions and
| | 05:50 |
Module Manager.
In the Filter, I can type Facebook list,
| | 05:55 |
and that'll bring up the module that's
active.
| | 06:03 |
From here, there's an option of the
width.
| | 06:05 |
I'm going to make this width 150, and I'm
going to remove the show fans, because it
| | 06:09 |
just takes up too much room.
And then, I'm going to click Save and Close.
| | 06:18 |
And now, I can go back to my page and
refresh it, and I can see here, the
| | 06:22 |
Facebook lists displays a little bit
better now.
| | 06:30 |
In this lesson, we reviewed how you can
modify your Responsive Template that
| | 06:33 |
you've installed.
We've changed the logo.
| | 06:37 |
We changed the background color of the
logo.
| | 06:39 |
And then, we also modified a module.
And then we displayed it to see the results.
| | 06:44 |
| | Collapse this transcript |
|
|
9. Working with Access Control List (ACL) LevelsDefining ACL in joomla!| 00:02 |
In this lesson we're going to review the
base Joomla ACL or access control lists,
| | 00:07 |
that are built in with Joomla 2.5.
First we're going to cover the access
| | 00:12 |
control groups or what users can view in
the website.
| | 00:17 |
Then we will work with the Joomla user
groups which controls what people can do,
| | 00:21 |
edit and manage within the website.
We will look at the similarities and the
| | 00:26 |
differences of the Joomla user groups.
The definition of the access control
| | 00:31 |
list, includes two different groups.
It includes access control groups which
| | 00:37 |
defines what people can see on your
website.
| | 00:41 |
It also includes the Joomla USER Groups
which defines what people can do on your website.
| | 00:49 |
When working with the access control
groups we have three basic groups.
| | 00:54 |
The first one is public, this is anyone
that can visit the site and what they can
| | 00:58 |
see for the public access view.
Registered users need to be logged on to
| | 01:05 |
the system and this controls what the
registered users can see.
| | 01:10 |
Let's say you have a specific menu item
that you only want registered users to be
| | 01:14 |
able to see.
You would make sure this menu item is set
| | 01:18 |
to an access control of registered.
The last level of access control groups
| | 01:24 |
within Joomla is special.
This includes only viewers that can
| | 01:28 |
maintain the website and view these
different areas.
| | 01:32 |
It includes users that are from the
authors level all the way up to super users.
| | 01:37 |
In addition to the access control groups
that come with Joomla you can also create
| | 01:41 |
your own control groups that have
different requirements and different
| | 01:44 |
viewing areas.
The Joomla user groups determines what
| | 01:50 |
people can actually do on the website.
The first group of users would be public.
| | 02:00 |
They can just view public content.
They actually can't do anything on the website.
| | 02:04 |
The registered Joomla user group also
cannot edit any content but they can view
| | 02:09 |
public information and registered content
on the website.
| | 02:17 |
When we're discussing the users that can
edit the website there is some
| | 02:21 |
similarities between author, editor and
publisher.
| | 02:25 |
And those are that they can view all
public and registered content, these
| | 02:29 |
three types of users can also view all
special content, they also can create new content.
| | 02:36 |
However only the publisher can publish
this content.
| | 02:39 |
And they can all edit their own content.
So for author, editor, and publisher,
| | 02:44 |
they have some similarities for these
user groups.
| | 02:48 |
But yet there are differences between
these users as well.
| | 02:52 |
First of all, an author can edit only
their own content.
| | 02:56 |
And if they do create a new article in
the system, they cannot publish it.
| | 03:00 |
An editor can edit all of the content on
the website.
| | 03:06 |
But they have the same issue as an
author, where if they create new content,
| | 03:09 |
they cannot publish it.
The publisher can edit all of the content
| | 03:15 |
plus a publisher's capable of publishing
new content.
| | 03:20 |
Now what about the users that can access
the back end.
| | 03:24 |
The similarities between these users are
we have a manager, administrator and
| | 03:28 |
super user.
All of them can view all public and
| | 03:32 |
registered content, all of them can view
all special content, and all of these
| | 03:35 |
three users can perform all of the
editing levels that I just discussed before.
| | 03:42 |
In addition, they can all publish
content.
| | 03:46 |
An additional access that these three
users have that the other three don't is
| | 03:49 |
that they can access the back end of the
website, or go to the administrator page.
| | 03:55 |
Now let's discuss the differences between
them.
| | 03:58 |
The manager, when they go onto the
administrator page or the back end they
| | 04:02 |
could just do basic work on that area.
An administrator, can do all of the same
| | 04:09 |
things as a manager can do, plus, they
can create new users, and they can
| | 04:12 |
install extensions.
So if you want someone to have back end
| | 04:17 |
access, but not able to create users or
install extensions, make them a manager.
| | 04:23 |
The Super User can do all of the above.
And they can also modify other Super
| | 04:28 |
Users statuses.
In addition to the user groups, that I
| | 04:32 |
just mentioned in Joomla 2.5, you can
also create custom user groups that might
| | 04:36 |
have a different combination of access
levels.
| | 04:41 |
The ability to create the custom groups
is new in Joomla 2.5.
| | 04:47 |
In this lesson we defined the Joomla Core
ACL that comes with Joomla 2.5.
| | 04:53 |
We reviewed the difference between access
control groups and Joomla user groups.
| | 04:59 |
We went through the specific access
control levels that different users can
| | 05:02 |
have, and then we went over the different
user group levels that users can have and
| | 05:06 |
what the similarities and differences
are.
| | 05:10 |
| | Collapse this transcript |
| Creating a new user and defining an access level| 00:02 |
The default security, that Joomla has in
Joomla 2.5 is pretty complex.
| | 00:08 |
In this lesson, we are going to review
the default areas that we can set up for
| | 00:11 |
our users.
First we are going to create a registered user.
| | 00:16 |
We are going to see how we can limit them
to only view specific areas of the website.
| | 00:22 |
And then I will show you how you can
change the users property, so they can
| | 00:25 |
only edit different areas of the website.
If we look at the front page of our
| | 00:30 |
website, one thing that I would like to
change is the calendar menu item.
| | 00:36 |
I only want that to be available for
registered users.
| | 00:39 |
What that means is in order to see this
menu item on the top of the screen.
| | 00:43 |
I want my users to be logged in.
Meaning they will go onto the login form
| | 00:48 |
below down here.
And enter their user name and password.
| | 00:52 |
I have to do a couple things though, in
order for this to work.
| | 00:55 |
First, I have to create the user.
Let's do that now.
| | 00:58 |
If I go back to the administration page.
And go to Users > User Manager.
| | 01:04 |
And then I can click on Add New User.
The name of this user, I'm going to call
| | 01:11 |
Reg, REG, for registered.
My login name is going to be reg.
| | 01:16 |
I'm going to give it a password, confirm
it, and I'm going to give him an email
| | 01:21 |
address of reg@hotmail.com.
And then if I scroll down, I'm going to
| | 01:26 |
make sure this user has at least
registered access to the system.
| | 01:30 |
Then I can click on Save and Close.
Now if I log in to my website, I can log
| | 01:40 |
in as my reg user.
Scroll down, click on Login.
| | 01:51 |
But just because I'm a registered user,
the only difference I see on my page is
| | 01:54 |
in the login form.
It says hi Reg.
| | 01:57 |
I don't see any other changes to the
website.
| | 02:01 |
Let's log out again.
Now I want to change the Calender menu item.
| | 02:06 |
I only want that to display for
registered users.
| | 02:09 |
So if I go back to my Administration
page.
| | 02:12 |
Go to menus.
And click on > Main menu.
| | 02:17 |
I can go to the Calender menu item.
And from here what I want to do is change
| | 02:22 |
my access which is the access level group
that is allowed to view this item.
| | 02:29 |
Instead of public I am going to select
registered.
| | 02:32 |
And then Save and Close.
Let's go back to the website to see what
| | 02:36 |
that did.
By go back to my website and refresh my page.
| | 02:42 |
Now you can see on the top, I can't see
the calendar menu item because I'm not
| | 02:46 |
logged in.
So, if I scroll down to the login form,
| | 02:52 |
and login, put in my password and then
click login.
| | 02:59 |
Now that I'm logged in, I can now see the
calender menu item and I can click on it.
| | 03:04 |
So the access control level changes what
I can see on my website, such as the
| | 03:08 |
Calendar menu item.
Let's say I want my registered user to
| | 03:13 |
actually be able to edit content on the
website.
| | 03:17 |
So instead of being registered, I want to
make them a publisher on the website.
| | 03:21 |
Which means that they can add new content
and edit content on the website.
| | 03:26 |
So to do that, if I go back to the
administration page, if I go the user
| | 03:30 |
manager, which is in the Users menu, and
I go to my Reg user.
| | 03:36 |
And I'm going to change this user, if I
scroll down.
| | 03:42 |
For the assigned groups, I'm going to put
this user in Publisher, Editor, and Author.
| | 03:48 |
Basically, Author means I can edit only
my own content, Editor means I can edit
| | 03:52 |
anyone's content.
And Publisher means, not only can I edit
| | 03:56 |
content, but I can create new content.
And then I'm going to Save and Close, now
| | 04:02 |
let's see what that changed.
If I go back to Home, I'm going to log
| | 04:07 |
out and then log back in to make sure it
accepts my levels.
| | 04:13 |
So I'm going to login as a registered
user, put in my password, scroll down to
| | 04:18 |
click on Login.
Now I can see the little Edit icon on my page.
| | 04:27 |
Since this page is actually displaying a
load position or module, I probably
| | 04:30 |
wouldn't want to edit this exact page.
But let's say I need to edit the shark
| | 04:35 |
adventure page.
If I click on Shark Adventure, I can see
| | 04:39 |
the little edit icon here.
And if I click on it, I can now edit this
| | 04:45 |
page, an then save the changes.
I'm going to just click Cancel here.
| | 04:53 |
In this lesson, we looked at 2 different
types of users.
| | 04:56 |
First we created a registered user, which
was able to see specific things on the
| | 05:00 |
website, such as a Calendar menu item
that we made only available to registered users.
| | 05:07 |
The next step, is we worked with the user
groups.
| | 05:10 |
Or basically, I not only put my person in
Registered, but I put them in the user groups.
| | 05:15 |
A Publisher, Editor, and Author, which
meant that that person was now able to
| | 05:20 |
edit items on my website.
This was all using the default access
| | 05:25 |
control in Joomla.
| | 05:26 |
| | Collapse this transcript |
| Creating a new user group for editing| 00:01 |
Many websites, you may want to restrict
certain people and certain groups, to be
| | 00:06 |
able to Edit certain of your website, or
even certain categories of content.
| | 00:11 |
In this lesson we're going to create a
brand new user group, which we can use to
| | 00:15 |
Edit or work with different areas of the
website.
| | 00:19 |
We'll assign a user to the group.
We will then Modify a Category, so it can
| | 00:23 |
only be Edited by that specific group, an
then we're going to test it out.
| | 00:29 |
In older versions of Joomla, you only had
the access of using the default ACL, that
| | 00:33 |
Joomla already set up for you.
But in 2.5, we can actually Edit the user
| | 00:38 |
groups, and get quite detailed on the
different levels of what people can and
| | 00:42 |
can't do on the website.
To work with the user groups, we're going to
| | 00:48 |
go to the back end of the website, and go
to the Administration area.
| | 00:52 |
Let's say I want to create a group, for
the staff members that work at the
| | 00:56 |
aquarium, but I only want them to be able
to Edit, information that are in the
| | 00:59 |
Exhibits Category of the website.
So basically I don't want them Editing
| | 01:05 |
articles in any other area, just the
Exhibits area.
| | 01:09 |
The first step I have to go through to do
this is to create that user group.
| | 01:13 |
So if I go to Users and Groups and click
on Add New Group, from here I'll give it
| | 01:20 |
a group title of Staff Exhibits User
Group.
| | 01:26 |
I am putting the words User Group in
here, so you can start seeing the
| | 01:29 |
difference between Joomla user group and
Joomla access levels, which we'll talk
| | 01:32 |
about a little bit later.
The group parent means, the minimum
| | 01:37 |
access level that this group will have.
And I'm going to put them at registered
| | 01:42 |
user level.
So, basically they're going to have all the
| | 01:45 |
same access as all registered users.
And then I can click Save and Close.
| | 01:51 |
My next step is to create a new user.
So I click on Users.
| | 01:55 |
If I click on New.
For the name I am going to call it Staff.
| | 02:01 |
The log-in, Staff.
The password, confirm it.
| | 02:07 |
Email is staff@juneaquarium.com.
And then I need to select what assigned
| | 02:15 |
user group is going to be.
And I could see here Staff Exhibits User
| | 02:19 |
Group, and I'm going to click on it down
here.
| | 02:23 |
Then I scroll to the top to click Save
and Close.
| | 02:28 |
So far we've created the user group, and
then we created a user for that user group.
| | 02:33 |
But we have not given that user group any
specific functionality at this point.
| | 02:38 |
It's just like a regular user.
But what I want to do is if my staff
| | 02:42 |
member logs in, I want them to be able to
Edit any articles that are inside of the
| | 02:46 |
Exhibits Category.
So my next step is I need to go to the
| | 02:51 |
category level, and Modify what access
groups can work with it.
| | 02:57 |
So If I go to Content and Category
Manager, and from here, I can click on
| | 03:01 |
the Exhibits Category.
You can see here in the Edit articles
| | 03:08 |
category I have two options.
I have Access, which determines which
| | 03:12 |
groups can view these articles, and then
I have Permissions, which is where I
| | 03:17 |
define which groups can work with these
categories.
| | 03:23 |
For right now, I'm going to focus on the
Permissions area, so I can click on the
| | 03:27 |
Set Permissions button.
You can see here towards the bottom of
| | 03:32 |
the list, there's an option here for
Staff, Exhibits User Group, and I'm going
| | 03:35 |
to click on it now.
Basically, I want my staff members, that
| | 03:40 |
are in this group, to be able to Create,
Delete, Edit, Edit The State, Edit Own,
| | 03:45 |
for any articles in this group.
To do that, I need to change it, instead
| | 03:52 |
of being inherited, because it's
basically inheriting from my parent
| | 03:55 |
group, which was registered.
Registered users cannot Edit any
| | 04:00 |
documents, so I'm basically going to give
my Staff Exhibits User Group, some more
| | 04:04 |
or additional Access.
And I'm going to click on Allowed, and
| | 04:10 |
Allowed for each of these areas.
So this is going to allow my staff member
| | 04:16 |
to be able to work with articles, that
are in the Exhibits Category.
| | 04:21 |
And then I can click Save and Close.
Now let's test it.
| | 04:27 |
So I'm going to go onto my website, and
I'm going to log in as a staff member.
| | 04:37 |
Now that I'm logged in as a staff member,
I can notice here I'm really logged in as
| | 04:41 |
a regular registered user.
I can't Edit this article that's right
| | 04:45 |
here on the front page.
But if I click on Shark Adventure, and go
| | 04:49 |
to the Shark Adventure article, I can see
here now I have the Editing option.
| | 04:56 |
And the reason why I have the Editing
option, is because of my user level.
| | 05:00 |
And I can click on the Editing option,
right here.
| | 05:04 |
Because I'm in a staff usergroup, and we
gave the capability for the staff
| | 05:08 |
usergroup to Edit articles in Shark
Adventure, I can make any changes that I
| | 05:11 |
want here.
Another interesting option, if I scroll
| | 05:17 |
down, and I see the category down here,
and I click on the Down Arrow, the only
| | 05:20 |
category that I can Edit is Exhibits.
Which means, if I Create a new article, I
| | 05:26 |
can only Create a new article in the
Exhibits Category.
| | 05:31 |
In addition, if I'm Editing the article,
I can't accidentally put it into the
| | 05:34 |
wrong category, which is really important
when you have different users working on
| | 05:38 |
the website.
And then I can click Save when I'm done.
| | 05:45 |
In this lesson we worked with the JOOMLA
user groups.
| | 05:49 |
We created a user group, we then assigned
a user to that group.
| | 05:53 |
We then Modified the Permissions, for the
Exhibits Category.
| | 05:57 |
To make sure that members that are in
this group can Edit articles in this category.
| | 06:03 |
We then went onto the website, logged in,
and tested it out.
| | 06:07 |
| | Collapse this transcript |
| Creating a new access level for viewing| 00:00 |
The access control groups in Joomla.
Controls what users can actually see and
| | 00:06 |
view on your website.
In this lesson, were going to create a
| | 00:10 |
brand new access level group.
Next, were going to create a menu item.
| | 00:14 |
For that specefic access level.
And then we'll also create a module for
| | 00:18 |
that access level.
And then we'll test it out by logging
| | 00:22 |
into the system, and seeing how it all
works.
| | 00:24 |
When I initially look at my website, Joom
Aquarium, I'm not logged in.
| | 00:29 |
So I'm just considered a public user.
But let's say I am a staff member and I
| | 00:32 |
want to log in as a staff member onto the
website.
| | 00:37 |
Once logged in as the staff member.
I want to see an additional menu item on
| | 00:41 |
the top called Staff.
That Staff menu item is going to show me
| | 00:46 |
a list of articles that only I can see,
or my group can see.
| | 00:50 |
To do that, we're going to create a
custom level access group.
| | 00:53 |
If I go to the back end of my Control
panel, and go to Users and Access Levels.
| | 01:00 |
The default access levels in Joomla are
Public, Registered and Special.
| | 01:06 |
Public is basically the access level for
anyone looking at the website.
| | 01:11 |
Registered includes anyone looking at the
website that is considered a registered
| | 01:15 |
user or at least a minimum of a
registered user.
| | 01:19 |
And then Special would include all of the
editors, authors, publishers, super
| | 01:23 |
administrators and all those other users.
But lets say I want to create my own
| | 01:29 |
access level or special one just for
staff members.
| | 01:33 |
If I click on New, I'm going to the level
title, Staff.
| | 01:39 |
And I'm going to add to it Access Level.
This way, I can work on learning the
| | 01:46 |
differences between Access Level and
Joomla Control Groups, or User Groups.
| | 01:53 |
Again, the Access Levels determines what
I can view on the website.
| | 01:58 |
A Joomla user group determines what I can
do on the website.
| | 02:03 |
When you create a viewing access level,
you do have to select which group or
| | 02:07 |
groups fall into this level.
I'm going to just select the Staff
| | 02:13 |
Exhibits User Group.
It is important to note that anyone in
| | 02:18 |
this user group will also be granted this
viewing access level, of Staff Access Level.
| | 02:26 |
I will now click Save and Close.
The next step is I have to make sure my
| | 02:31 |
Staff user is in the correct group.
If I click on Users.
| | 02:37 |
And then I click on Staff.
This is the user that I've already
| | 02:40 |
created previously.
From here, if I scroll down, I can see
| | 02:45 |
that this user is already in the group,
Staff Exhibits User Group.
| | 02:50 |
If you don't already have a user in this
group, you can Create a New User Now, or
| | 02:54 |
you can Edit a User that's currently in
your system and just be sure to check off
| | 02:57 |
Staff Exhibits User Group.
And then click Save and Close.
| | 03:05 |
My next step is I'm going to create a
menu item that is only viewable by this
| | 03:08 |
access controlled group.
If I go to menus and Main menu, and then
| | 03:13 |
click New for new menu item.
The menu Item type is just going to be a
| | 03:21 |
Category List.
And the title will be Staff.
| | 03:27 |
If you scroll down, I have the Access
option.
| | 03:32 |
If I click on the drop down box, I have
Public, Staff, Registered or Special.
| | 03:39 |
I'm going to select Staff Access Level.
Again, what this means is only the people
| | 03:43 |
that are in the staff group will be able
to view this menu item.
| | 03:49 |
This menu item will be a category list of
all articles that are in my Staff Category.
| | 03:55 |
This can be any menu item that you want.
I am just using this specific category
| | 04:00 |
list as an example.
And now, you can hit Save and Close.
| | 04:06 |
Let's go to the website and see how it
works by clicking on Home.
| | 04:09 |
And log in as Staff.
Scroll down, click Log In.
| | 04:17 |
I can now see at the top, the Staff menu
item appears.
| | 04:23 |
And if I click on Staff, I can now see
the articles that are in this specific category.
| | 04:31 |
I can only see this menu item if I'm
logged on as a staff member.
| | 04:35 |
If I click on Home, I can now Log Out.
Let's say I want to add a new module on
| | 04:44 |
the homepage that is only viewable to my
staff members.
| | 04:49 |
If I go back to My Back End, go to
Extensions > Module manager, and I create
| | 04:54 |
a New Custom Module.
Click on Custom HTML.
| | 05:04 |
The title, I'm going to call it Staff
Info.
| | 05:09 |
I'm going to put it in position 7,
Position-7, which is where I've put most
| | 05:13 |
of my modules as I've been working on the
site.
| | 05:18 |
Now, I can scroll down and put in some
text.
| | 05:21 |
This module is going to be displayed for
my staff members only.
| | 05:25 |
So in this module, I can maybe put an
important message just for staff members,
| | 05:30 |
remember to attend our staff party
tonight at 7 p.m.
| | 05:35 |
Okay.
So this is only going to be displayed for
| | 05:38 |
someone that logs into my site that is
part of my staff members group.
| | 05:44 |
If I scroll down on the Module
Assignment, I only want it to appear on
| | 05:47 |
the homepage.
So I click on the down arrow and click on
| | 05:50 |
Only on the pages selected.
Click on Clear Selection, click on Home,
| | 05:56 |
Scroll up to the top, and click Save and
Close.
| | 06:01 |
My next step is to check it out on my
website.
| | 06:04 |
So if I click on my Home tab to preview
the site, and I click on Home, I don't
| | 06:08 |
see the module anywhere.
So now, let's log in as a staff member.
| | 06:14 |
And click Log In.
Now, I can see the module, where it says
| | 06:18 |
here, Staff Info.
Remember to attend our staff party
| | 06:23 |
tonight at 7 p.m.
Again, this information will only be
| | 06:27 |
displayed for people who are logged into
the Staff group.
| | 06:34 |
In this lesson, we reviewed access levels
which defined who can view certain things
| | 06:39 |
on your website.
In order to do this, first we created an
| | 06:43 |
Access Level.
We then created a menu item that was
| | 06:46 |
displayed for that specific access level.
We viewed that on the website.
| | 06:52 |
And then we create a module that was only
viewable for that access level.
| | 06:56 |
And we displayed that on the website.
| | 06:58 |
| | Collapse this transcript |
|
|
