IntroductionWelcome| 00:04 | Hi! I'm Jen Kramer! Welcome to Migrating
Joomla! 1.5 to Joomla! 2.5.
| | 00:10 | Content management systems are growing
in popularity for creating both simple
| | 00:14 | and complex web sites. Joomla!
| | 00:16 | is one of the three best-known open-
source content management systems in the world.
| | 00:20 | In this course, I will show
you how to prep your Joomla!
| | 00:23 | 1.5 web site for migration to Joomla! 2.5.
| | 00:28 | After that, I'll show you
how to move your Joomla!
| | 00:30 | 1.5 web site to Joomla!
| | 00:31 | 2.5 using two third-party extensions;
| | 00:35 | jUpgrade and SP Upgrade.
| | 00:38 | After the move, I'll show you how to
reinstall and reconfigure third-party
| | 00:42 | extensions and templates.
| | 00:43 | I'll also show you how to migrate a
custom template between Joomla! versions.
| | 00:48 | Finally, we'll test the migrated sites to
make sure they're working well after the move.
| | 00:53 | So if you're ready, let's get started
with migrating Joomla! 1.5 to Joomla! 2.5.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Exercise files are available to
premium subscribers of lynda.com.
| | 00:05 | Simply download the exercise files
to your computer and place them on the
| | 00:09 | desktop for ease of access.
| | 00:11 | The exercise files are
organized by chapter number.
| | 00:15 | Whenever an exercise file is
available for a video, you'll see a yellow
| | 00:19 | overlay at the bottom of the screen
that indicates the location and the name
| | 00:23 | of the exercise file.
| | 00:25 | Working with exercise files can
add great value to the training.
| | 00:29 | However, if you don't have access to
the exercise files, you can still follow
| | 00:33 | along with the videos, often using
your own files and have a fulfilling
| | 00:37 | learning experience.
| | Collapse this transcript |
|
|
1. Understanding MigrationsUnderstanding the Joomla! release cycle| 00:01 | You may be wondering, what's
happening with Joomla! these days.
| | 00:04 | We waited three years for the release of Joomla!
| | 00:06 | 1.6, but just six months
later Joomla! 1.7 was released.
| | 00:11 | Six months after that here comes Joomla! 2.5.
| | 00:14 | You may have heard talk about a Joomla!
| | 00:15 | 1.8 and where did that go and even Joomla!
| | 00:18 | 3.0 is being discussed.
| | 00:21 | What's up with Joomla!'s release cycle
and all of these new Joomla! versions?
| | 00:25 | What does it mean for you,
your web sites, and your business?
| | 00:29 | Shortly before the release of Joomla!
| | 00:30 | 1.6, a new release cycle was announced by
Joomla!'s Production Leadership Team or PLT.
| | 00:36 | Previously Joomla!'s new releases
were driven by a list of features.
| | 00:40 | The PLT would establish that list
and when the list of features was done,
| | 00:44 | software would be released.
| | 00:46 | This meant that there was a
three-year gap between Joomla!
| | 00:48 | 1.5 and 1.6 which was not good in
the fast-moving world of technology.
| | 00:53 | So in late 2010, the PLT announced
that they would move to a release cycle,
| | 00:58 | releasing a new version of
Joomla! every six months.
| | 01:01 | What features were ready would
be included in the new release.
| | 01:04 | If the features weren't ready, they would be
incorporated into the next Joomla! release.
| | 01:09 | A six-month release cycle for a
web product is quite challenging.
| | 01:13 | The PLT did recognize this, because
most people don't want to make a major
| | 01:16 | change to their web site every six months.
| | 01:19 | As a result, they grouped three
of these six-month releases into a
| | 01:23 | larger release cycle.
| | 01:24 | The first two releases of the
cycle are short-term releases.
| | 01:28 | A short-term release is good only for
seven months before it reaches the end of life.
| | 01:32 | End of life is the point where software
is no longer supported, meaning no more
| | 01:37 | security fixes are available for it.
| | 01:39 | The third release of the cycle is the long-
term release which is supported for 18 months.
| | 01:45 | The start of their release
cycle begins with a .0 release.
| | 01:48 | This is where the new administrator
template might be released along with any
| | 01:53 | changes to functionality
that might break extensions.
| | 01:56 | This is a short-term or seven-month release.
| | 01:59 | The .1 release comes out six months later.
| | 02:02 | It's anticipated that there will be
mostly bug fixes in this release, but minor
| | 02:07 | changes to the functionality
are also typically included.
| | 02:10 | This is a short-term or seven-month release.
| | 02:13 | The final release in the cycle is a .5
release which is good for at least 18 months.
| | 02:19 | This should be a very stable release,
fixing more bugs from the first two
| | 02:23 | releases and again introducing
minor changes to functionality.
| | 02:27 | For example, the next release
cycle will be the Joomla! 3.x cycle.
| | 02:32 | Joomla!
| | 02:32 | 3.0 will start the cycle when
it's released in September 2012.
| | 02:37 | Originally, this release was scheduled
for July of 2012, but the PLT has decided
| | 02:41 | to push the release back. Joomla!
| | 02:43 | 3.1 will be released in March 2013 and Joomla!
| | 02:47 | 3.5 will be released in September 2013. Joomla!
| | 02:49 | 3.5 will reach its end-of-
life no earlier than March 2015.
| | 02:56 | Within a release cycle, the administrator
interface should remain mostly the same.
| | 03:00 | You may see minor additions to
functionality, but you won't see a new
| | 03:04 | administrator template, meaning a
completely new look and feel for the
| | 03:07 | configuration side of Joomla!
| | 03:09 | and most extensions should be
compatible between versions.
| | 03:13 | You may see a few extensions which
break, but these will be very few.
| | 03:17 | Upgrading between versions of Joomla!
| | 03:19 | within a release cycle should
be simple, one click updates.
| | 03:23 | So what's the status of
the current release cycle?
| | 03:26 | The current release cycle began in
January 2011 with the release of Joomla! 1.6.
| | 03:30 | Joomla!
| | 03:30 | 1.7 was released in July of 2011.
| | 03:35 | After some debate in the community, it
was decided that the third release in the
| | 03:39 | cycle would be called Joomla!
| | 03:41 | 2.5 and it was released in
January of 2012. Joomla!
| | 03:44 | 2.5 will be good for a minimum of 18 months.
| | 03:49 | The PLT has announced it will be
supported through December 2013.
| | 03:53 | This does mean that it looks like Joomla!
| | 03:55 | can't count, but the break happen to get Joomla!
| | 03:58 | under its new naming convention. Joomla!
| | 04:00 | 1.5 will be fully supported by the Joomla!
| | 04:04 | community through April 2012.
| | 04:06 | After that major security fixes will be
addressed until the release of Joomla!
| | 04:10 | 3.0 in September of 2012.
| | 04:13 | And after years of having one version of Joomla!
| | 04:15 | not compatible with the next, there
were many concerns in the community about
| | 04:20 | how this new release cycle would work.
| | 04:22 | Fortunately as promised, the
one click upgrades between Joomla!
| | 04:26 | 1.6 and 1.7 came to pass as did the
one-click upgrade between 1.7 and 2.5.
| | 04:33 | It looks like the leadership of Joomla!
| | 04:34 | is committed to easy upgrades going forward.
| | 04:37 | Many people wonder if Joomla!
| | 04:39 | is the right CMS for them, once
they hear about these migrations.
| | 04:43 | They threaten to go to
Drupal or WordPress instead.
| | 04:46 | While I encourage you to go with the
right tool for the job, be aware that
| | 04:50 | Drupal has migrations just like Joomla!
| | 04:53 | does between its major versions,
for example, Drupal 6 to 7.
| | 04:57 | WordPress has updates and upgrades,
but it tends not to have the depth of
| | 05:01 | functionality for large web sites.
| | Collapse this transcript |
| Approaching the migration from a technical perspective| 00:01 | Migrating a Joomla!
| | 00:02 | 1.5 site takes place in a few broad steps.
| | 00:05 | First of all, before doing
anything, back up your web site;
| | 00:09 | make sure the backup is a good one
and that you can get to it quickly and
| | 00:13 | easily as required.
| | 00:15 | Second, set up some kind of staging environment.
| | 00:19 | Work with the copy of your site somewhere
rather than working on the live web site.
| | 00:24 | When you've completed and tested your
work on the migration, you can then move
| | 00:27 | the staged site to the live server location.
| | 00:31 | You might make a subdirectory within
your web hosting environment and work there.
| | 00:35 | Unfortunately, I have found that WAMP
and MAMP are not compatible with running
| | 00:39 | these site migrations, not at least the
way that they are configured out of the box.
| | 00:44 | You need server space to
work on these migrations.
| | 00:48 | Once you are set with these
preliminaries, you were ready to move on to the
| | 00:51 | migration process itself.
| | 00:53 | First of all, make sure your site is
running the most recent version of Joomla!
| | 00:57 | 1.5 which is 1.5.25 as of this recording.
| | 01:02 | You may need to update your site
which I will cover in this course.
| | 01:06 | Next, you'll install a third-
party extension for migration.
| | 01:10 | I will demonstrate jUpgrade which is
free, as well as SP Upgrade which has a
| | 01:15 | small cost associated with it.
| | 01:17 | I strongly recommend you use SP
Upgrade despite its small price.
| | 01:22 | Follow the instructions for each
extension to move the site to Joomla! 2.5.
| | 01:27 | Now that the site is moved, you'll
need to do some work with templates.
| | 01:31 | Either you'll need to install an
updated version of a commercial template or
| | 01:34 | you'll need to update your
custom template for Joomla!
| | 01:37 | 2.5.You may need to adjust module
positions, depending on what's changed between
| | 01:43 | the two versions of the template.
| | 01:45 | You'll also need to evaluate any third-
party extensions in your site updating
| | 01:49 | for the most recent
versions of those extensions.
| | 01:52 | If the extension you used in Joomla!
| | 01:53 | 1.5 is not available for 2.5, you may
need to find a substitute extension that
| | 01:58 | performs a similar function.
| | 02:00 | Finally, test thoroughly before launch.
| | 02:03 | Make sure the site works correctly, all
extensions work correctly and the site
| | 02:07 | is debugged in the major browsers.
| | 02:09 | Then you're ready to move the site
up to your server and make it live.
| | Collapse this transcript |
|
|
2. Migrations Using jUpgradeInstalling the starting state exercise files | 00:01 | The first migration I'm going to show you is
to take a web site that is built in Joomla!
| | 00:08 | 1.5.15 and has a commercially available
template, and I'm going to migrate that to Joomla!
| | 00:13 | 2.5 using a third-party
extension called jUpgrade.
| | 00:16 | jUpgrade is a free extension that
you can download and it will move your
| | 00:22 | data for CoreJoomla!
| | 00:24 | for the most part from your existing Joomla!
| | 00:26 | 1.5 web site into Joomla!
| | 00:29 | 2.5.One of the things I've discovered
while putting together this title is that
| | 00:34 | I've not been able to get jUpgrade to
work consistently while working within a
| | 00:39 | local web server environment.
| | 00:41 | So I've tried XAMPP and I've tried WAMP
and I assume that MAMP is also a problem.
| | 00:47 | I certainly couldn't get it working on
the Windows platform to have your web
| | 00:50 | site running locally and still run jUpgrade.
| | 00:52 | So I will be doing all of
my work on a web server.
| | 00:56 | What I've done is I've set up some web
space on my company's web host, which is
| | 01:01 | rochen and I've established a hosting
account here and this particular hosting
| | 01:08 | account uses something called cPanel.
| | 01:10 | cPanel is an open source control panel
that is frequently used on many web hosts
| | 01:16 | and it organizes a bunch of icons that
are here and available for working with
| | 01:19 | file managers and databases and setting
up email and a number of other things.
| | 01:24 | You may sign up for web hosting with
another provider that does not have cPanel,
| | 01:28 | but the fundamental approach to putting
files up on your web server to work with
| | 01:32 | them remains the same.
| | 01:33 | Basically, what you're going to do is
you're going to the file part of Joomla!
| | 01:37 | up on your web server, which you
could do it through FTP or a file manager
| | 01:40 | as I'm going to do.
| | 01:42 | You make a blank database and you
import the data from the SQL file that I've
| | 01:46 | provided for you, into your blank
database and then you make sure that those two
| | 01:50 | things will talk to each other by
editing configuration.php which is located
| | 01:55 | inside of the root of Joomla!
| | 01:56 | and generally speaking, what that
involves is putting in your database username
| | 02:01 | and password, and changing a few
pass to your local and temp directories.
| | 02:06 | So that's what we need to do to get
started, working on with jUpgrade as to
| | 02:10 | establish the starting point for this
particular web site and I have provided
| | 02:13 | those files for you.
| | 02:15 | So inside of cPanel, the first thing we're
going to do is upload our files to the web server.
| | 02:20 | Simple way to do that is with the
File Manager which is right here.
| | 02:24 | If I click on this icon, it will open
a new window and tell me that there is
| | 02:28 | nothing available to me here.
| | 02:30 | I'm looking inside of my www directory.
| | 02:33 | The first thing I'm going
to do is upload my files.
| | 02:35 | So I'm going to click the Upload
button up here and I'm going to browse to my
| | 02:40 | Exercise Files > Chapter 2, folder #1
and you'll see that there's a zip file in
| | 02:45 | here called jupgrade and go ahead
and choose that and then it will start
| | 02:49 | uploading to the server.
| | 02:51 | While that's happening, flip back on
over to your control panel and find the
| | 02:55 | area that talks about databases and here
inside of Databases, we're to go to the
| | 02:59 | MySQL@ Database Wizard.
| | 03:01 | So I'm going to go ahead and click on
that and this is going to ask me for the
| | 03:05 | information that's required to create a
database and a database user, and make
| | 03:09 | those two things talk to each other.
| | 03:10 | So I'm going to start by making a new
database, it's going to be called migrate_db.
| | 03:15 | I'm going to make a database user and
I'm going to call that migrate_dbuser and
| | 03:21 | it's going to ask me for a password.
| | 03:22 | So I'll have this generate-a-password
for me, and notice that those are wild and
| | 03:27 | crazy passwords with lots of funny
characters and capital letters and things.
| | 03:31 | You'll only really ever need to use this
about once, which is to configure your Joomla!
| | 03:35 | site.
| | 03:35 | So I like to use a very
complicated password for that.
| | 03:39 | So I've highlighted that password and I
hit Ctrl+C or Command+C to copy it, and
| | 03:43 | I'll say Use Password, and
then I'm going to say Create User.
| | 03:47 | Then it's going to ask me about what
privileges I should assign to the database user.
| | 03:51 | Well, we want to assign all of them.
| | 03:53 | Go ahead and hit Next Step and it'll
tell you that the database user was added
| | 03:58 | to database of migrate_db.
| | 04:01 | I'll check in on the other tab here
and this tells me that the upload of my
| | 04:04 | files is now complete, so I can close this tab.
| | 04:07 | Here inside of my cPanel file manager,
if I hit the Reload button, I'll see that
| | 04:12 | my zip file has been uploaded.
| | 04:14 | So now I'm going to extract that right here.
| | 04:16 | Just going to hit the Extract button on
the top and say Extract the File(s) and
| | 04:21 | this will tell me that it's unpacked the zip
and they're all located here on the server.
| | 04:25 | So we have all of our files unzipped,
and we have a database created, but
| | 04:30 | there's no data in it.
| | 04:31 | Next thing to do is to
import our data into the database.
| | 04:34 | So to do that, I'm going to go on
back here to the Home page of my control
| | 04:38 | panel, scroll back on down
to the bottom to phpMyadmin.
| | 04:43 | That'll open up in another tab, and
then here inside of phpMyAdmin, I am going
| | 04:48 | to import the data from my
exercise files into my new database.
| | 04:52 | So my database is right here, migrate_db.
| | 04:55 | Then I click on that to select it, and
then I'm going to click on the Import tab.
| | 05:00 | I'm going to browse for jupgrade.sql
and I'm going to leave all the other
| | 05:05 | settings as same and say Go.
| | 05:07 | That has imported all of the
data here into my Joomla! database.
| | 05:11 | All right!
| | 05:11 | So now I've files, I have a database, now
I need to get them to talk to each other.
| | 05:15 | So I can close out of phpMyAdmin and
back here in the File Manager, I'm going to
| | 05:20 | find this file, configuration.php.
| | 05:23 | Go ahead and select it and click the
Edit button on the top of the screen, and
| | 05:27 | say Edit, and this is a long list of
the variables that are involved with
| | 05:32 | running your Joomla! web site.
| | 05:34 | This is a lot of things that come out
of the global configuration screens, are
| | 05:37 | saved into this file.
| | 05:38 | What we need to do is
alter a number of things here.
| | 05:41 | So, first of all, if we scroll on down,
close to the bottom, you'll see that we
| | 05:46 | have a host which is localhost, we
have a user, which is migrate_dbuser.
| | 05:54 | We have a database name which
is here which is migrate_db.
| | 06:01 | Notice, as I put these things in, I'm
leaving the single quotes in place and I'm
| | 06:05 | filling in what goes in between the
single quotes, very, very important.
| | 06:08 | Leave the syntax in place.
| | 06:09 | This is a PHP file, all the syntax is
important and then almost all the way at
| | 06:14 | the bottom here there is the
place to put in a password.
| | 06:17 | So I'm going to click in between the double
quotes and paste in my password from earlier.
| | 06:22 | So those are the things that we
absolutely critically have to change, the
| | 06:25 | database name, the database
username and the database password.
| | 06:30 | The other thing we're going to need to
change is our path to the log file and
| | 06:34 | the temp file, and these are completely wrong.
| | 06:38 | You can see here that I built this web
site on my local computer in WAMP, but of
| | 06:42 | course, those paths are no longer
correct now that we're on a web server.
| | 06:45 | How do you find the path to log or a temp?
| | 06:48 | Well, back in your File Manager, if you
take a look, your top level of the web
| | 06:53 | site will give you part of a
path here so /home/migrate.
| | 06:56 | Then you're going to go into probably
public_html in order to get the files and
| | 07:01 | folders for the public part of the web site.
| | 07:03 | So you can add that after migrate and
then you'll see that we have the logs
| | 07:07 | folder and the tmp folder right here.
| | 07:09 | So the full path to be /home/
migrate/public_html/logs or /tmp.
| | 07:17 | So I'm going to go ahead and put those in.
| | 07:19 | So /home/migrate/public_html/logs
and for my tmp path, this will be
| | 07:31 | /home/migrate/public_html/tmp.
| | 07:41 | Your path till the logs and the tmp
may be completely different, because this
| | 07:46 | will vary with web host you happen to be using.
| | 07:49 | I'm using rochen, this is the path to
get to these locations on my rochen server.
| | 07:54 | You may have something completely different.
| | 07:56 | Okay, go ahead and say Save Changes and
now, when I open up one final tab and I
| | 08:02 | go to www.4webinc.net/~migrate, which
is that temporary URL for this web site,
| | 08:12 | I should see my web site come up here and
this is the starting state of the web site.
| | 08:16 | We're working with Bliss No.
| | 08:18 | 5 Chocolate, which some of you
may remember from my title Joomla!
| | 08:21 | 1.5, creating and editing custom
templates, and I've built this particular site
| | 08:26 | using a commercially available
template called Afterburner which comes from
| | 08:30 | rocket theme and it is free to download.
| | 08:32 | Now that we've got the web site in
place, we're ready to start working on
| | 08:36 | our migration.
| | Collapse this transcript |
| Updating the site to the most recent version of Joomla! 1.5| 00:00 | Now that we have the starting state of
our site up on the web server, it's time
| | 00:05 | to take a look at this site and see what
needs to be prepped in order to get the
| | 00:09 | site right into Migrate.
| | 00:11 | It's very common when you take
on a client who's had a Joomla!
| | 00:14 | site for sometime, to take a look at
the backend of their web site and discover
| | 00:19 | that, in fact, nobody has been taking
care of that Joomla! site for sometime.
| | 00:23 | Ideally, when you log into
the back of somebody's Joomla!
| | 00:25 | web site, you will see that they are
writing the most recent version of Joomla!
| | 00:28 | which as of this recording is Joomla!
| | 00:30 | 1.5.25 and you will see that they are running
all the latest versions of their extensions.
| | 00:37 | But if somebody was keeping that Joomla!
| | 00:39 | site up-to-date, it would probably mean
that the client had a great relationship
| | 00:43 | with that developer and they
wouldn't be talking to you now, would they?
| | 00:47 | So it's very common when I take on a
new client that I log into their Joomla!
| | 00:51 | site and I discover that the site is
definitely somewhat out of date and they
| | 00:54 | definitely need to have
some updating that's done.
| | 00:58 | Before you can move your site to Joomla!
| | 00:59 | 2.5, you are going to need
to make sure your Joomla!
| | 01:01 | 1.5 site is up-to-date, so that the
Migration software would work correctly or
| | 01:07 | will have the best chance of working correctly.
| | 01:10 | So to figure out what version of Joomla!
| | 01:11 | you are running, what you will need to
do is from the web site address that you
| | 01:15 | have here, which in my case happens to
be 4webinc.net/~migrate, your web site
| | 01:22 | URL is going to be something
different while you're working with this.
| | 01:25 | Stick a /admin on the end of the URL and
you will wind up getting the login screen.
| | 01:30 | So this is 4webinc.net/~migrate/
administrator and when you first install the
| | 01:36 | site, the Username is admin and the
Password is admin and go ahead and log in.
| | 01:42 | Since this is out there on a server,
the very first thing we're going to do is
| | 01:45 | go change that Username and Password.
| | 01:48 | So go into your User Manager, go into your
User and change that Username and Password.
| | 01:56 | So I am going to change my Username
and I am going to change my Password and
| | 02:02 | all you need to do is just type in a new
Username and Password right there into the interface.
| | 02:06 | The next thing to do is to take a look at
what version of Joomla! we are running.
| | 02:09 | You can see that right up here in the
upper-right-hand corner of your Joomla!
| | 02:13 | installation, it will tell you exactly
what version you're running and in this
| | 02:17 | case, it's Version 1.5.15.
| | 02:20 | So we are ten versions behind on Joomla!.
| | 02:23 | Unfortunately, that's just all too typical.
| | 02:25 | So what we are going to do is make
sure that we are running the most
| | 02:28 | recent version of Joomla!
| | 02:29 | and what we will need to do is
download some files from the Joomla!
| | 02:32 | web site and install those on our server.
| | 02:35 | So to do that, I am going to flip over
to joomla.org right here and I am going
| | 02:40 | to go to he Download link right here on
the Home page and here at the Download
| | 02:44 | link, if you scroll on down the page,
you'll see that you can download Joomla!
| | 02:49 | 1.5.x, then we can download other Joomla!
| | 02:53 | 1.5.x packages by clicking on this
link and this will take us over to a site
| | 02:58 | called Joomla!Code and Joomla!Code
is where you can find the most recent
| | 03:02 | versions of all types of Joomla!
| | 03:04 | as well as older versions of Joomla!.
| | 03:07 | So if you look here, we actually have
several types of installations that we
| | 03:12 | can choose to download.
| | 03:13 | There are number here under Joomla!
| | 03:14 | 1.5.25 that's the full version of Joomla!
| | 03:17 | so we don't need to download any of those.
| | 03:19 | We need the updates which were
located here and we have six choices.
| | 03:23 | There are three different formats
that are used for zipping up these files;
| | 03:27 | .zip, tar.bz2, and tar.gz.
| | 03:31 | It may matter to your web host
which one of these you download.
| | 03:35 | In my experience, most web host don't
really care which one your download.
| | 03:38 | So let's consider the two zip
options because you are probably most
| | 03:42 | familiar with zips.
| | 03:43 | The other two tend to be a UNIX format
and if you take a look at these two zip
| | 03:47 | formats, you can either download a patch
package which will take you from 1.5.24
| | 03:52 | to 1.5.25 while we're running 1.5.15.
| | 03:56 | So that's not going to work.
| | 03:58 | Our last choice is to run
Joomla! 1.5.0 to 1.5.25.
| | 04:03 | The Joomla!
| | 04:04 | project used to put out these patches
that would go from one version to the next
| | 04:09 | until they realize that every time they
put out a new version of Joomla!, they
| | 04:11 | were literally like 25 of these files
that they had to generate and they just
| | 04:15 | got to be ridiculous.
| | 04:16 | So now what Joomla!
| | 04:17 | will do is they'll put out a 1.5.0 to
the most recent version and although
| | 04:22 | you're not running Joomla!
| | 04:23 | 1.5.0 or at least I should say, I truly
hope, you're not working on a web site
| | 04:28 | that is running Joomla!
| | 04:29 | 1.5.0, you can still use this patch to
move you to the latest version of Joomla!.
| | 04:34 | So this is what we are going to download.
| | 04:36 | Go ahead and click on it and go ahead
and save that to your computer and this
| | 04:40 | should save to your Downloads
directory in your web browser.
| | 04:44 | Okay, so now that we have got that, now
we can put that into our File Manager.
| | 04:50 | So in the File Manager from your
Control panel, which from cPanel, you can get
| | 04:55 | to from the Files section of cPanel
and clicking on File Manager, this should
| | 05:01 | open in another tab, take a
look in your web hosting directory.
| | 05:05 | Remember that a lot of hosts will have
a lot of folders, you can see here that
| | 05:08 | on the left side of the screen that I
have folders that pretend to mail and FTP.
| | 05:12 | The one I am really interested in is
the one that contains my web site and www
| | 05:18 | and public_html point to the same place and
that is the list of my Joomla! web site here.
| | 05:23 | What we need to do is we need to upload
that patch package we just downloaded to
| | 05:29 | this location, the root of our web site.
| | 05:31 | To upload the file, what we need to do
is click on the Upload button, and then I
| | 05:36 | am going to click on the Browse button.
| | 05:36 | I am going to go down to my Downloads
folder and choose that Patch Package
| | 05:41 | we just downloaded.
| | 05:42 | Go ahead and say Open and give that
just a second to upload and you will see
| | 05:47 | here that it says that is all uploaded
and complete, so we can close this tab.
| | 05:52 | Back in our File Manager if we hit
the Reload button, you will see that our
| | 05:56 | Patch Package is put into the root
of the directory, the root is the same
| | 06:00 | location as configuration.php, which is a
file that we altered just a little bit earlier.
| | 06:05 | Go ahead and click on that selected
and then hit the Extract button and this
| | 06:10 | will extract your web site directly out
on top of what's already there actually.
| | 06:15 | Go ahead and say Extract Files and you
will see that many changes got made here.
| | 06:19 | So what's happened is that whatever
was inside of that patch package has been
| | 06:23 | extracted and is overwritten all of
the files that might have already been in
| | 06:27 | place inside of your Joomla!
| | 06:28 | Core, now having just said
the words, Joomla! Core.
| | 06:31 | Provided that your web site was built
the correct way, this update should be
| | 06:35 | seamless and painless and you did make
a backup before you went ahead and patch
| | 06:40 | to your web site, I hope.
| | 06:42 | So if you are working with the exercise
files by patching your web site in the
| | 06:46 | way that I've just described,
everything is going to be just fine.
| | 06:49 | But if you are in a real world
working with a client, it's possible that
| | 06:53 | somebody built that Joomla!
| | 06:54 | web site who had no idea what they
were doing and they might have done some
| | 06:57 | hacking of Joomla!'s core files and if
you hack Joomla!'s core files and then
| | 07:02 | you try to upgrade the web site, you
can lose all of the changes that somebody
| | 07:06 | made while hacking those core files.
| | 07:08 | If you encounter that situation
where you upgrade the web site and like
| | 07:12 | absolutely everything breaks that's a
good indication that somebody has, in
| | 07:15 | fact, hacked the core and your poor
client is now in a really huge bind because
| | 07:20 | they're going to have to figure out
what they're going to do next, because they
| | 07:24 | don't really have a viable way of
moving that web site and that might be a
| | 07:27 | situation where you wind up having to
rebuild the web site from scratch because
| | 07:31 | when you upgrade the web site,
you destroy the web site.
| | 07:34 | However, if people have worked with Joomla!
| | 07:36 | in a correct way and they've done
their template overrides and various other
| | 07:41 | kinds of overrides the correct way
rather than hacking the core, then upgrading
| | 07:45 | your web site to the next version of Joomla!
| | 07:47 | should work seamlessly and very, very well.
| | 07:50 | Scrolling down you can delete the
zip that's here or the Patch Package.
| | 07:54 | You can also delete the original file
that we uploaded to start the process of
| | 07:58 | installing or exercise files, you can
get rid of that too and the very last
| | 08:02 | thing you want to do once you patched
your web site is to flip over to the front
| | 08:06 | end and hit Refresh.
| | 08:07 | In a perfect world, you see
absolutely nothing different.
| | 08:10 | You can still go ahead and serve through
your navigation, you can take a look at
| | 08:14 | pages, things come up, things work correctly.
| | 08:17 | You still see modules that are
appearing on left and right sides of the page,
| | 08:21 | the links are going to this correct
locations, third-party extensions are still
| | 08:25 | working and when you flip
over to the back end of Joomla!
| | 08:28 | and say go to the control panel, you
should see that the version will change
| | 08:32 | up here in the upper right corner and
report that, in fact, you are now running Joomla!
| | 08:35 | 1.5.25.
| | 08:37 | So we've updated our site to Joomla!
| | 08:39 | 1.5.25 and now we're ready to migrate.
| | Collapse this transcript |
| Downloading, installing, and configuring the jUpgrade migration component| 00:01 | Now that we have got the starting state
of our exercise files in place, the next
| | 00:05 | step is to download the jUpgrade component.
| | 00:07 | You can download jUpgrade by
going to redcomponent.com/jupgrade.
| | 00:12 | Before you can download jupgrade, you are
going to need to register for this web site.
| | 00:16 | To register for the web site,
scrolling down the page on the left-hand side
| | 00:20 | towards this redACCOUNT and you can
click on the Create an account link
| | 00:24 | down here on the bottom.
| | 00:25 | You will need to fill in the
information that's here including your name, email
| | 00:30 | address, Password and Country.
| | 00:33 | You can put in your Address
as well and enter the code.
| | 00:35 | I already have a login, so I am just
going to go ahead and enter it down here
| | 00:40 | and now what I am going to do
is, I am going to go back to
| | 00:43 | redcomponent.com/jupgrade and I'm going
to download the jUpgrade migration tool.
| | 00:49 | It's about two thirds of the way down the page;
| | 00:51 | you'll see an item here for
Download and a link to Download jUpgrade.
| | 00:54 | Other things that are on this page will
be documentation and helpful hints and
| | 00:58 | points you're welcome to go
and read all of that content.
| | 01:01 | Go ahead and Download jUpgrade, and the
very first item on the top is jUpgrade,
| | 01:05 | go ahead and click on that.
| | 01:06 | Then you will see that jUpgrade is
here, the current version is 2.5.0, go
| | 01:12 | ahead and click on the Download link
underneath, and we will save that on Down
| | 01:15 | to our Downloads folder.
| | 01:17 | So now that's there, we are going
to hop into the backend of Joomla!
| | 01:21 | and we are going to go to Extensions,
Install/Uninstall and we are going
| | 01:25 | to install jUpgrade.
| | 01:26 | I'm going to click on the Browse button,
go to my Downloads folder and choose
| | 01:30 | com_jupgrade whatever the most
recent version is, it should be fine.
| | 01:35 | Go ahead and say Upload file and install.
| | 01:38 | And you should get a message,
jUpgrade has been uploaded and
| | 01:41 | installed correctly.
| | 01:43 | The last step that we are going to need
to do once you have jupgrade installed,
| | 01:47 | let's go take a peak at what
it's going to take to run it.
| | 01:49 | So if we go to Components > jUpgrade,
you will notice that there is a note here
| | 01:54 | that says Mootools 1.2 is not loaded.
| | 01:57 | Please enable the system
Mootools Upgrade plug-in.
| | 01:59 | Mootools is a JavaScript framework that Joomla!
| | 02:01 | uses extensively for many of its
extensions and a while back Joomla!
| | 02:06 | 1.5 decided to include an upgrade to
the latest version of Mootools but they
| | 02:10 | didn't want to make it the only upgrade
that was available for fear of breaking
| | 02:14 | some older extensions that might rely
on the previous version of Mootools.
| | 02:18 | So they have made it an optional
thing that you can turn on by the plug-in.
| | 02:21 | So to turn that on, you can click on
the link that's provided here in jUpgrade,
| | 02:25 | that says enable "System-Mootools Upgrade
" plug-in, we are going to go ahead and
| | 02:28 | click on that and then here in the Plug-in
Manager, we are going to scroll on
| | 02:32 | down to the second page of results,
and you will see there is an item here
| | 02:37 | called System-Mootools Upgrade,
go ahead and turn that on.
| | 02:41 | Just click on the red x it becomes a
green check mark and now when you go back
| | 02:44 | to Components > jUpgrade, you'll see that we
are able to go ahead and start our upgrade.
| | 02:49 | So that's how you download, install and
configure jUpgrade and in the next video
| | 02:54 | we will go ahead and run it.
| | Collapse this transcript |
| Migrating a site to Joomla! 2.5| 00:01 | Now that we have got jUpgrade
installed and we have enabled Mootools plug-in,
| | 00:05 | we're ready to go ahead and
run jUpgrade as a migration.
| | 00:09 | So I'm here inside the backend of my
Joomla!1.5.25 web site and I am going to go
| | 00:14 | to Components > jUpgrade and there is a
big honking button right here, the only
| | 00:21 | thing we need to click Start Upgrade.
| | 00:23 | So I am going to go ahead and click
that and a whole bunch of texts and things
| | 00:28 | are going to run here.
| | 00:30 | Okay, so once jUpgrade has run its
bits and pieces than it needs to run.
| | 00:35 | It's copied over a lot of the
information from your Joomla!1.5.25 site into a
| | 00:40 | new Joomla!2.5 site and you'll
notice here at the bottom, it says you can
| | 00:44 | check your new site by going to
clicking on the site link to get to your front
| | 00:48 | end of the web site or clicking on
the administrator link to get to the
| | 00:52 | backend of the web site.
| | 00:53 | So I am going to go ahead and click on
the Site link and you will notice that
| | 00:57 | the site is now been migrated and if
you take a look at the URL at the top of
| | 01:02 | your screen, mines is
4webinc.net/~migrate/jupgrade.
| | 01:07 | Your URL should say something very
similar to where the Joomla!1.5.25 site
| | 01:11 | is located /jupgrade.
| | 01:12 | jUpgrade actually downloads a copy of
Joomla!2.5 to a folder called jUpgrade and
| | 01:20 | it creates a database for you and
configures all these things that pulls over
| | 01:23 | the data for you and it
establishes a new site for you right here.
| | 01:28 | Now that the migration is done, you'll
notice that it doesn't look exactly like
| | 01:32 | our previous web site.
| | 01:34 | So in the next video, we will take a
look and find out how successful we were
| | 01:39 | with this particular migration.
| | Collapse this transcript |
| Checking the site after migration for problems and issues| 00:01 | I'm taking a look at my Joomla!
| | 00:03 | 1.5.25 site, which is currently at
4webinc.net/~migrate and this is a way the
| | 00:09 | site is supposed to look.
| | 00:10 | We've gone ahead and migrated using
jUpgrade and this is the way the site looks now.
| | 00:15 | You might notice these look a
little bit different. That's fine!
| | 00:18 | Migration is a process;
| | 00:20 | it's not a one button click.
| | 00:22 | If it was, we probably wouldn't
have a title on it here at lynda.com.
| | 00:25 | So, there're some things that we're
going to have to fix as far as this site is
| | 00:29 | concerned and it's worth taking a look
at the two sites making a list of things
| | 00:33 | that we're going to need to fix.
| | 00:34 | Obviously, the template did
not come over from Joomla! 1.5.
| | 00:38 | We're going to need to go find the
Afterburner template from RocketTheme,
| | 00:42 | download it and get it
installed on this web site.
| | 00:44 | And so that's definitely one of
the things we're going to have to do.
| | 00:47 | But look a little bit closer besides
just the template, which of course, pops
| | 00:50 | right out at, it was being very
obvious to something that you need to fix.
| | 00:54 | If you scroll on down the page here,
you'll see that we have our list of
| | 00:57 | featured products, same word done twice.
| | 01:00 | Well, if you take a look here on this 1
.5 site, you'll see that our featured
| | 01:03 | products should be showing some pictures, and
obviously those pictures are not showing here.
| | 01:09 | Here's our Main Menu and then if you
scroll down a little further, we have
| | 01:12 | two Log In forms now.
| | 01:13 | So, we probably need to get rid of one of those.
| | 01:15 | I'm going to go to the Products page.
| | 01:18 | Here, on the Products page we have
our Main Menu is showing, our secondary
| | 01:22 | navigation as well as the secondary
navigation showing up on the right side of the screen.
| | 01:26 | You'll notice that we have this
double title problem going on here.
| | 01:29 | What's happened is, that the page
headers for every article are turned on in
| | 01:33 | addition to showing the article title,
so it looks kind of odd that way.
| | 01:37 | Now, we have one Login
form over here on the side.
| | 01:40 | There're some photos that are
associated with these pages.
| | 01:42 | It looks like some of them are
showing up but not necessarily all of them.
| | 01:46 | If I go on to the Health Benefits here,
we have some images displaying over here
| | 01:50 | on the right side of screen. There we go.
| | 01:52 | So that looks like at
least those images came over.
| | 01:55 | We have our Contact form.
| | 01:57 | Our Contact form is displayed
in Joomla!'s default contact form
| | 02:00 | configuration, where we have to click
on this thing in order to get the rest
| | 02:03 | of the Contact form.
| | 02:04 | That might be something
that you'll want to change.
| | 02:07 | We're missing the footer navigation
at the bottom of the page here and it's
| | 02:10 | definitely something that we're missing.
| | 02:11 | We have our breadcrumb up here at the top.
| | 02:14 | Search box is kind of in a funny spot
but some of that's tied to the template.
| | 02:17 | So, you could go through this site
looking at page-by-page say comparing the
| | 02:22 | About Us page to what you're
seeing over here on Contact or more
| | 02:26 | specifically the About Us page.
| | 02:28 | If you compare these side-by-side
you'll see that we have this long inform that
| | 02:31 | shows up on every page, which shouldn't
the Main Menu is, definitely not in the
| | 02:35 | right location as is the
Search box in the wrong location.
| | 02:38 | We're missing the quotes over
here on this side of our page.
| | 02:40 | So, there're plenty of things that
we're going to need to tweak and fix, now
| | 02:44 | that this site has migrated to Joomla! 2.5.
| | 02:47 | Where time has been saved is that we
don't have to go back and re-create all of
| | 02:50 | these articles again.
| | 02:52 | This chocolate bliss site has not a
lot of content, maybe 20 articles total.
| | 02:55 | So, copying and pasting over the content
and doing a rebuilding of this site in Joomla!
| | 03:00 | 2.5 rather than a migration,
would not be monumental tragedy.
| | 03:04 | However, if you have a site that has
500 articles or a 1000 articles that does
| | 03:09 | take a huge amount of time and so
migration becomes very useful when you're
| | 03:13 | migrating a site with lots and lots of pages.
| | 03:15 | Now that we've sort of made this
mental list of things that we need to fix,
| | 03:19 | in the next chapter I'll go through
and will address all of those issues and
| | 03:22 | concerns.
| | Collapse this transcript |
|
|
3. Tweaking Extensions and Commercial Templates for Joomla! 2.5Reinstalling the Afterburner template| 00:01 | One of the things that you'll notice
right off the bat when taking a look at our
| | 00:04 | freshly migrated web site is
that the template is all wrong.
| | 00:10 | This of course, is the default Beez 2.0
template that ships with Joomla!
| | 00:13 | 2.5, and well, it doesn't look
anything like the web site used to look.
| | 00:18 | So, the very first thing we're going to
do is fix this template issue because I
| | 00:22 | know that you all are just itching to do that.
| | 00:25 | So, in order to a get that done
we're going to go to where we got the
| | 00:28 | template originally, which is from
RocketTheme and you can get here by going
| | 00:32 | to RocketTheme.com.
| | 00:34 | I really like the work that
RocketTheme does with Joomla! templates.
| | 00:37 | It's got a great system, well done
templates, well worth the money, all of their
| | 00:42 | templates ship with a mobile version of
their web site as well as a fully tested
| | 00:47 | design that works on PCs and
Macs and in all kinds of browsers.
| | 00:50 | RocketTheme gives away a few
templates for free and we're working with the
| | 00:54 | Afterburner template, which is an
older template and it does not use their
| | 00:58 | gantry framework and the gantry
framework is something that is a templating
| | 01:02 | framework that RocketTheme makes use of to
reduce some really cool effects in their Joomla!
| | 01:06 | templates.
| | 01:07 | So, Afterburner is an older
template, a lot simpler to work with.
| | 01:10 | The code is simpler.
| | 01:11 | It also has fewer options
associated with it compared to most
| | 01:14 | RocketTheme templates.
| | 01:16 | So, what we're going to need to do is go
download the new version of the template.
| | 01:19 | So, to get there we're
going to go to the Joomla!
| | 01:22 | link here in the top navigation
then we're going to go to the Joomla!
| | 01:25 | Templates link and on the Joomla!
| | 01:27 | Templates page if you scroll all the
way down to the bottom of the page, you'll
| | 01:31 | see that there's a part here called Free Joomla!
| | 01:32 | Templates and the one we
want to download is Afterburner.
| | 01:36 | So, this one is right here.
| | 01:37 | I'm going to go ahead and click on
Afterburner and Afterburner it says here is
| | 01:41 | available for Joomla! 1.5 and Joomla!
| | 01:43 | 1.7.When you encounter a template or an
extension that says that it works in Joomla!
| | 01:49 | 1 .7 but it doesn't
specifically say that it works in Joomla!
| | 01:52 | 2.5, you can't be 100% sure that this
template is going to work with Joomla! 2.5.
| | 02:00 | There are a handful of very minor
differences between Joomla! 1 .7 and Joomla!
| | 02:06 | 2.5.And if this template was
working with the gantry framework, which
| | 02:09 | RocketTheme uses for all of their templates,
I would say this is not even worth trying.
| | 02:14 | We should not even bother
to even try to install this.
| | 02:18 | But because this is Joomla!
| | 02:19 | 1.7 in a simplified template with a
coding process behind it that's fairly
| | 02:24 | straightforward, we are going
to go ahead and give this a try.
| | 02:27 | Now, of course I tested this before,
I have recorded this video and the
| | 02:30 | Afterburner template
works just fine with Joomla!
| | 02:31 | 2.5 but this is something that you'll
certainly want to do before you start
| | 02:35 | migrating your web site is of course
making sure that recent versions of all of
| | 02:39 | the extensions and
templates are available for Joomla!
| | 02:42 | 2.5 so that you don't start migrating a
web site and then realize that you can't
| | 02:45 | get any further because nothing is available.
| | 02:48 | So, we're going to go ahead and
click on the Download button here for
| | 02:51 | Afterburner and on the screen that
comes up you'll notice that we have two
| | 02:55 | versions of Afterburner we can download.
| | 02:57 | We can either download 1.7
template or the 1.5 template.
| | 03:01 | Note also another great thing about
RocketTheme is they distribute their
| | 03:04 | Fireworks files along with their
templates, and so you could download their
| | 03:09 | source files here and you can edit
some of the images inside of Fireworks to
| | 03:14 | create graphics that will work with
this template that are not the default
| | 03:18 | Afterburner graphics.
| | 03:19 | I did that to create the chocolate
bliss logo on the top of the web site.
| | 03:22 | So, we're going to click on the
link here to download the Joomla!
| | 03:25 | 1.7 template and we're going to go
ahead and Save that down. There it is.
| | 03:31 | Now that we've got that done we're
going to go to the backend of Joomla! 2.5.
| | 03:35 | So, to get here you're going
to go to your web site's address
| | 03:39 | /jupgrade/administrator and in the
case of this particular screen, I'm at
| | 03:46 | 4webinc.net/~migrate/jupgrade/administrator.
| | 03:51 | Go ahead and enter your Username and Password.
| | 03:54 | Hopefully, you change those.
| | 03:55 | It should be the same username and
password that you had in Joomla! 1.5.
| | 03:59 | If you changed your
username and password in Joomla!
| | 04:01 | 1.5 when I told you to, it's
your new username and password.
| | 04:05 | If you did not change your username
and password and you're still working
| | 04:09 | with the default exercise files it'll be
admin and admin as your username and password.
| | 04:14 | Okay.
| | 04:14 | Go ahead and Log in and here you
are in the backend of the web site.
| | 04:18 | We're going to install the Afterburner template.
| | 04:21 | So, we're going to go to Extensions >
Extension Manager and we're going to
| | 04:24 | click on the Browse button and I'm
going to pick the rt_afterburner zip file
| | 04:29 | here and say Open, Upload & Install
and it will tell us that installing the
| | 04:34 | template was successful.
| | 04:35 | Now, I'm going to go to my Template
Manager to assign the RocketTheme template
| | 04:38 | to the rest of my web site.
| | 04:39 | So, I'm going to go Extensions >
Template Manager, click on the star next to the
| | 04:44 | Rt_afterburner template style here and
when I go back to my Home page and I hit
| | 04:49 | Refresh I should see the
RocketTheme template in place, which I do.
| | 04:53 | Obviously, we're still not quite here
yet and because we're missing navigation
| | 04:58 | among many other things.
| | 05:00 | Typically, when something like this
happens and you install a new template but
| | 05:03 | you don't see any modules.
| | 05:05 | That's because your modules have been
assigned positions that don't exist.
| | 05:08 | Now, here's the part that doesn't make sense.
| | 05:10 | We were using Afterburner template in our 1.5
site, we've just reinstalled it in the 1.7 site.
| | 05:15 | You will think that all
the modules would show up.
| | 05:17 | Well, unfortunately one of the things
that jUpgrade does is it renames many of
| | 05:21 | your modules and puts them in module
positions that correspond better with the
| | 05:25 | Beez template than it does
with the Afterburner template.
| | 05:28 | So, we're going to need to go back
through our modules and assign them to the
| | 05:31 | correct module positions, so that they
show up on this template, and of course,
| | 05:35 | we're going to need to replace the
logo that you see up there in the upper
| | 05:38 | left-hand corner from the default
Afterburner logo to a logo for Bliss No.
| | 05:42 | 5 to provide chocolate company and
so I'm going to be covering that in
| | 05:45 | the upcoming videos.
| | Collapse this transcript |
| Reassigning modules to their correct positions| 00:01 | Now that we've got our Afterburner
template reinstalled in our Joomla!
| | 00:04 | 2.5 site, the next thing we're going to
need to do is move some modules around.
| | 00:08 | And how do we know that that needs to be done?
| | 00:10 | Well, the navigation is missing, that's
a good indication that there's some work
| | 00:13 | we need to do here with some modules.
| | 00:15 | So, that's what we're
going to do in this next video.
| | 00:17 | If we hop over to the backend of Joomla!
| | 00:19 | and we go to Extensions > Module Manager,
you'll notice that we have all of the
| | 00:25 | modules listed here on the web site, but
you'll notice that the module positions
| | 00:29 | are not the same as what they were.
| | 00:31 | The module positions here many of
them correspond with the Beez template.
| | 00:35 | If you take a look at
the backend of your Joomla!
| | 00:39 | 1.5 web site, which you should be
able to get to by going to your web site
| | 00:43 | address/administrator and then
logging into the web site and then going to
| | 00:51 | Extensions > Module Manager, you can
compare the modules and their configuration
| | 00:56 | here from the 1.5 site to the 2.5 site.
| | 00:59 | And I'm going to click on this tab and
drag it on over here, so that I've got
| | 01:03 | my two administrator screens right
next to each other here in my Firefox web
| | 01:07 | browser and I can take a look and see exactly
how I had things configured here in the Joomla!
| | 01:12 | 1.5 and then configure them
accordingly in the 2.5 site.
| | 01:15 | I'm going to click on the
Module Name column header here.
| | 01:19 | This will sort all of my
modules in alphabetical order.
| | 01:21 | Actually, it looks like reverse
alphabetical order, so I'll click it again and
| | 01:25 | it will resort in alphabetical order.
| | 01:27 | And I'm going to do the same for
the backend over here in Joomla! 2.5.
| | 01:30 | I'm going to click on the Title column
header here, so that we have these in the
| | 01:36 | same order on both sides of the screen.
| | 01:38 | So, now when I take a look at the
backend here, I have a module called
| | 01:41 | Breadcrumbs and it's in
a position of breadcrumb.
| | 01:45 | Over here on my Joomla!
| | 01:46 | 2.5 site, I actually have two breadcrumbs.
| | 01:50 | That's probably because Joomla!
| | 01:51 | 2.5 comes with some modules by default.
| | 01:54 | It comes with Breadcrumbs and it comes
with a Login Form and it comes with a
| | 01:58 | Main Menu and all those
things are actually here.
| | 02:01 | So, the first thing I'm going to do is get
rid of these extraneous items on my list.
| | 02:05 | I'm going to click on, put the check
mark next to Breadcrumbs in position 2.
| | 02:10 | I'm going to put a check on the Login
Form that shows up On all pages of the site.
| | 02:15 | Notice that both of these login forms
are assigned to position 7, but over here
| | 02:19 | under Pages, I see that one of the
Login Forms is assigned to selected pages
| | 02:23 | only and if you'll recall from our Joomla!
| | 02:25 | 1.5 site, the Login Form showed up only on
the Home page, so it would be a selected page.
| | 02:30 | This one shows up On all pages, so I'm
going to get rid of that, and then for my
| | 02:33 | Main Menu, you'll see that we have a
Main Menu with a position of 7 and a Main
| | 02:38 | Menu with a position of nav.
| | 02:39 | I'm going to keep the one with the
position of nav, which happens to be
| | 02:42 | assigned to No Pages and I'm going to
get rid of the one that's assigned to
| | 02:46 | position 7 for all pages.
| | 02:48 | Those three modules I'll check off
and then I'm going to click on the Trash
| | 02:52 | button up here on the top.
| | 02:54 | These are all just duplicate default
modules that come with Joomla! All right!
| | 02:57 | Now, we've got something that's a
little bit more closely matched to what we
| | 03:00 | have on our 2.5 site.
| | 03:02 | Our breadcrumb should be showing up
correctly, and if I take a look at the front
| | 03:07 | end of the web site, it's
hard for me to tell if it is.
| | 03:10 | If I go to the Privacy Policy page,
you'll see that the breadcrumb in fact does
| | 03:15 | show up and it's working correctly.
| | 03:17 | The breadcrumb should be all set.
| | 03:18 | The copyright though is in the position 9,
which does not exist in this template.
| | 03:23 | In the previous site, we had that
assigned to the footer position.
| | 03:26 | So, let's click on copyright.
| | 03:29 | You can just type the position name
right here in the box or you can click on
| | 03:32 | the Select position button, and inside
of the Select position dialog box, you'll
| | 03:37 | need to select the template of rt_
afterburner and then this will show you all of
| | 03:42 | the RocketTheme Afterburner positions.
| | 03:45 | Positions 1, 2, 6, 7 and 9 are actually
not RocketTheme Afterburner positions.
| | 03:50 | They're showing up here in this list
because there are modules that are running
| | 03:53 | within the RocketTheme Afterburner
template that have these module positions and
| | 03:58 | should not be there.
| | 03:59 | Either way that you want one
in your module position is fine.
| | 04:02 | I'm going to wind up typing in this box
because it's just a little bit faster.
| | 04:05 | Go ahead and say Save & Close.
| | 04:07 | So, the next one is our footer menu,
which is assigned to a position of
| | 04:10 | bottom On all pages.
| | 04:12 | Let's compare what we've got here,
footer menu > bottom > All pages. Great!
| | 04:16 | Our Login Form is associated with
the right module position and it varies
| | 04:20 | what pages it's on.
| | 04:22 | You might recall that it
was only on the Home page.
| | 04:24 | So, our Login here is in position 7.
| | 04:27 | So, let's click on the Login here.
| | 04:29 | This one should be in the right position.
| | 04:32 | So, I'm going to type in the word right,
and if I scroll on down here, the only
| | 04:36 | page it should be assigned to is the Home page.
| | 04:39 | So, there it is, the homepage.
| | 04:41 | It looks like none of the
other pages are assigned.
| | 04:43 | So, we'll go ahead and say Save & Close.
| | 04:46 | Next is our Main Menu.
| | 04:48 | Main Menu is assigned to position of
nav but it shows up on No Pages here.
| | 04:52 | It should show up, of course,
On all pages of the web site.
| | 04:55 | Back here in Joomla!
| | 04:56 | 1.5, Main Menu is assigned a
position of nav and it is On all pages.
| | 05:00 | So, let's go ahead and fix that.
| | 05:02 | We'll click on Main Menu and down here
in the bottom, rather than saying assign
| | 05:07 | it to No Pages, we'll say, put it On all pages.
| | 05:10 | Go ahead and say Save & Close.
| | 05:12 | Next is Our Featured Products.
| | 05:14 | This is that little menu that shows
up on the right side of the Home page.
| | 05:19 | So, it is on a selected page but
it's in the wrong module position.
| | 05:22 | That should be on the right position,
and if I go here into the 1.5 site, you'll
| | 05:27 | see that it should be in the right
position on some subset of pages.
| | 05:31 | So, I'm going to go to my backend here,
click on Our Featured Products, and
| | 05:36 | I'm going to change the module position
to right, and if I scroll on down here
| | 05:41 | to the bottom, it is in fact on the
Home page only and I shouldn't see it on
| | 05:45 | any other pages here.
| | 05:46 | It looks like that's true.
| | 05:48 | Go ahead and say Save & Close.
| | 05:50 | The Our Visitors module, this is a
module that displays inside of an article, so
| | 05:55 | it has this oddball position called visitors.
| | 05:57 | It's assigned to all pages of the web site.
| | 05:59 | Over here in Joomla!
| | 06:00 | 1.5, you'll see that is in fact correct.
| | 06:03 | Random image is on the left side of the
page and it varies what it pages it's on.
| | 06:08 | We can open that up and take a look at
it for the page assignment and the random
| | 06:13 | image over here is indeed on selected
pages but the wrong module position.
| | 06:17 | So, I'm going to click on random image.
| | 06:19 | The position it should be in is left,
and if I scroll on down here to the
| | 06:23 | bottom, it's only on selected pages and
it looks like it's on every page except
| | 06:29 | for the Home and the Products pages.
| | 06:31 | So, we'll go ahead and say Save & Close on that.
| | 06:35 | Search is in position 1 but on
all pages here in the 2.5 site.
| | 06:40 | Search is in the top position
in on all pages on the 1.5 site.
| | 06:44 | So, let's fix that.
| | 06:46 | We'll click on Search here and we'll assign
it a position of top and say Save & Close.
| | 06:54 | And finally, the subnav, this is our
left side navigation, which shows up on
| | 06:58 | some pages but not on others.
| | 07:00 | This one is assigned to a
position 6, which is incorrect.
| | 07:04 | Over here in the Joomla!
| | 07:05 | side of things, there is a subnav link
here that shows on the left and it varies.
| | 07:10 | So, let's go ahead and click on
subnav and let's change that to left.
| | 07:16 | Go ahead and say Save & Close.
| | 07:18 | Now, as you compare these two pages,
you'll see that our module assignments
| | 07:22 | should be the same for the first 10
modules, but notice that in the Joomla!
| | 07:26 | 1.5 site, we have two additional
modules that are here and in place.
| | 07:31 | One is the Vip Quotes Random Module,
which is unpublished, so we don't of course
| | 07:35 | have to worry about migrating that over,
it's not even in news, and the second
| | 07:39 | one is this module that says What
You're Saying about Chocolate Bliss No.
| | 07:42 | 5.This happens to be the module that
displays quotes and testimonials on each
| | 07:47 | or on selected web pages, and it is not
present over here on the 2.5 side of things.
| | 07:54 | That's because that's a third-party
extension that was not migrated using
| | 07:58 | jUgrade, and so what we'll need to
do is replace that quote functionality
| | 08:03 | somewhere as we continue to work on this web
site, and I'll be covering that in a later video.
| | 08:08 | But for now, we have adjusted all of our
modules and now if I take a look at the
| | 08:13 | front end of the web site by going to
my Home page, hitting Refresh or clicking
| | 08:18 | on the link if you have one, you can
see that we at least have the modules are
| | 08:22 | roughed in here on the page.
| | 08:24 | We have footer menu.
| | 08:25 | We have our copyright statement.
| | 08:27 | We have our Login Form and only one;
| | 08:29 | it's on the right side of the page.
| | 08:31 | We have our Featured Products menu,
not showing the pictures yet but at
| | 08:34 | least the menu is there.
| | 08:35 | We have some products that are
available here in the left navigation.
| | 08:39 | We have some Health Benefits issues here.
| | 08:42 | So, things are looking closer,
they're not quite perfect yet.
| | Collapse this transcript |
| Installing the logo image and adjusting template parameters| 00:00 | The next thing I'd like to change about
this web site, now that we've migrated
| | 00:04 | it and we've got our modules at least
in the right positions, is I'd like to
| | 00:07 | swap the logo out for the default
Afterburner logo for the Bliss Number 5
| | 00:11 | Chocolate logo, and we know
that that logo already he exists.
| | 00:15 | It was on the Joomla! 1.5 web site.
| | 00:17 | So I'd like to just pull
that logo from the Joomla!
| | 00:20 | 1.5 web site and copy it
into the Joomla! 2.5 web site.
| | 00:23 | That'll be the simplest thing to do.
| | 00:26 | The other thing I need to do is
change some of the settings here most
| | 00:29 | notably for colors.
| | 00:31 | This is not exactly the way that the 1.
5 site looked and most notably, here on
| | 00:37 | some of the inside pages there's this blue
column and it was gray in the 1.5 web site.
| | 00:42 | So I need to tweak some of my template
parameters to make sure that the right
| | 00:46 | colors and so forth are displaying. All right!
| | 00:49 | So I'm going to hop into
the backend of my Joomla!
| | 00:51 | 1.5 web site and I'm going to get
Extensions > Template Manager and I'm going to
| | 00:56 | go into the Afterburner template, and
here in the Parameters, it'll show me
| | 01:01 | exactly how the parameters were set up
in the old template and I'm going to need
| | 01:05 | to duplicate those
parameters in the new template.
| | 01:07 | So here they are, we're generally
using Light Style 1 for our Default Color
| | 01:12 | Style and we're using Color Style
1 for the Left and Right Columns.
| | 01:16 | So let's take a look at
how the 2.5 site is set up.
| | 01:19 | So here I am in Joomla! 2.5.
| | 01:21 | I'm going to go to Extensions >
Template Manager and I'm going to click on the
| | 01:27 | rt_afterburner template style and we
have the parameters over here on this site.
| | 01:32 | So you see that, we have Light Style 1,
which is correct, but down here we
| | 01:37 | have Color Style 2.
| | 01:38 | So I'm going to change that to Color Style 1.
| | 01:41 | So now those parameters match.
| | 01:43 | And then here we have Mootools enabled,
Captions and the RocketTheme logo disabled.
| | 01:49 | So let's go-ahead and disable the
Captions and the RocketTheme logo over here as
| | 01:53 | well, and we'll go ahead and say Save & Close.
| | 01:56 | And now when I refresh the front end of
the web site, we have the gray column as
| | 02:00 | expected, and the layout of
this web site is looking just fine.
| | 02:05 | So that takes care of the
template colors and parameter issues.
| | 02:10 | Now I need to swap out that logo.
| | 02:12 | So to swap out that logo, I'm going to
go back into my Control Panel for my web
| | 02:16 | hosting, and here inside of the Control
Panel, however you get to it and however
| | 02:20 | you log into it, I'm going
to go to the File Manager.
| | 02:23 | And remember now when you go into your
File Manager and you look directly in the
| | 02:28 | public_html folder, you have in
front of you a full Joomla! web site.
| | 02:32 | This is the Joomla! 1.5 web site.
| | 02:35 | The Joomla!
| | 02:36 | 2.5 web site is located inside of the
jupgrade folder, which is right here.
| | 02:41 | Our logo for the web site is located
inside of the templates folder here and we
| | 02:47 | can go ahead and pull that out
and move it to the jupgrade folder.
| | 02:51 | So I'm going to take a peek inside of
the templates folder and I'm going to
| | 02:54 | look inside of the afterburner template folder
and I'm going to take a look inside of images.
| | 02:59 | And inside of images, what I can see
is that, there's a file here called
| | 03:03 | light.png which came from yesterday
at 04:30 in the morning, and there's an
| | 03:09 | old version of that file here, which is the
same time, date, stamp as the other files.
| | 03:14 | So that's a pretty good indication that
this one is the one that has been changed.
| | 03:18 | You could also right-click on the
image and look in some HTML and CSS to
| | 03:22 | find out the path to that logo to
figure out exactly which one of these
| | 03:25 | files you need to download.
| | 03:27 | But it's this one here, it's called light.png.
| | 03:30 | So what I'm going to do now is I'm going to
download that and go ahead and save that file.
| | 03:36 | So go ahead and Save for me.
| | 03:38 | Now what I'm going to do is go
back out to my public_html here by
| | 03:42 | double-clicking on public_html.
| | 03:44 | Then I'm going to go into jupgrade, then
I'm going to go in the templates folder.
| | 03:48 | So you might be surprised when go into
the template folder that you see a bunch
| | 03:51 | of templates listed here that you
wouldn't expect because they don't show up in
| | 03:56 | the template manager inside of Joomla!
| | 03:57 | 2.5.For example, we have the ja_
purity template here inside of Joomla!
| | 04:02 | 2.5, but it doesn't show up in the Joomla!
| | 04:06 | 2.5 Template Manager.
| | 04:08 | We also have rt_afterburner_
j15 and rt_afterburner_j16.
| | 04:13 | So there are two of these RocketTheme folders.
| | 04:16 | What's up with that?
| | 04:17 | Well, these are all of the
templates from your Joomla!
| | 04:19 | 1.5 site that I've been pulled over,
but they're not displaying in the Template
| | 04:23 | Manager because they're Joomla! 1.5 templates.
| | 04:26 | So the files are here, but they are
not showing in the Template Manager, and
| | 04:30 | that's a good thing because of course Joomla!
| | 04:32 | 1.5 templates are not compatible with Joomla!
| | 04:35 | 2.5.You'll have to make some changes to
them to make them compatible and I'm in
| | 04:40 | fact going to cover that in the later chapter.
| | 04:42 | So the one we want is rt_afterburner_
j16, and we want j16, because Joomla!
| | 04:48 | 1.6, 1.7 and 2.5 are the same release
cycle and they share characteristics as
| | 04:54 | far as templates are concerned.
| | 04:56 | So go ahead and double-click on rt_
afterburner_j16 and we're going to go into
| | 05:00 | the images folder again and you'll see that
we have the old version of light.png here.
| | 05:05 | We're going to upload the
one that we just downloaded.
| | 05:07 | So to upload that, we're going to click
the Upload button, we're going to Browse
| | 05:11 | for our Downloads folder, and I'm
going to take the light graphic.
| | 05:16 | Go ahead and say Open, and it'll ask
me if it should overwrite the one that's
| | 05:19 | there, I'm going to say, Yes, and it'll
think a second and it tells me that that
| | 05:23 | upload is complete, down here in the bottom.
| | 05:26 | So now I'm going to go to the front
end of my web site, I'm going to hit
| | 05:30 | Refresh, and now I have the Bliss
Number 5 logo showing up here on the top of
| | 05:35 | the page instead of the Afterburner logo.
| | 05:38 | So the site starting to look a little bit
more like the original Joomla! 1.5 site.
| | 05:42 | We have some more things that we need
to adjust though and we certainly need to
| | 05:45 | fix this page header problem, which I'm
going to take care of in the next video.
| | Collapse this transcript |
| Fixing page headers| 00:01 | The next thing I want to address on
this web site is that when I leave the
| | 00:03 | homepage and I go into some of the
other pages on the site like the Products
| | 00:07 | page for example or the Health
Benefits page, you'll notice that we have this
| | 00:10 | problem with double
titles at the top of the page.
| | 00:13 | The double titles are coming from the
article title which is Health Benefits and
| | 00:18 | it's also showing a page header.
| | 00:20 | Page headers are
configured in menu items in Joomla!
| | 00:23 | 2.5, and for some reason, jUpgrade will
leave the page headers enabled for all
| | 00:28 | of your pages rather than disabled by default.
| | 00:31 | So what we're going to need to do is go
into all of our menu items and turn off
| | 00:35 | the Page Headers option.
| | 00:36 | So I'm going to jump into
the backend of my Joomla!
| | 00:38 | 2.5 web site, and I'm going to go to
Menus > Main Menu, and starting with
| | 00:44 | Products I'm going to work
my way through all of these.
| | 00:46 | So, I'm going to click on the Products
link, and over here, under Page Display
| | 00:50 | Options, I'm going to open this up and
you'll see that Show Page Heading is set to Yes.
| | 00:54 | I'm going to change that
to No and say Save & Close.
| | 00:58 | Now, when I refresh the front-end of
the web site on the Products page, now
| | 01:03 | you'll see that I have only one page
title, Products, which is coming from the
| | 01:07 | article title as opposed to
coming from the page heading.
| | 01:09 | If you like the way the page heading
looks on your particular web site and you'd
| | 01:13 | rather leave the page
headings in place, you could do that.
| | 01:16 | You could disable the article title,
in your Article options, inside of
| | 01:20 | the Article Manager.
| | 01:21 | I go through how to do that in Joomla!
| | 01:23 | 2.5 Essential Training.
| | 01:25 | And if you've turned off all of your
page titles globally, your page headers
| | 01:28 | would serve as the top of the article
for all of these pages if you like the
| | 01:32 | formatting for that better.
| | 01:34 | I happen to think that the page headers
in this particular template are just a
| | 01:37 | little bit horsy, if I switch over
here to the Health Benefits page for
| | 01:41 | comparison, you'll see that the page
header title Health Benefits is quite a bit
| | 01:45 | bigger than the smaller one
underneath which is the article title.
| | 01:47 | So I'm going to turn off the page headers.
| | 01:49 | But, either approach is perfectly valid,
and you might do one way on one web
| | 01:53 | site and another way on another web site. Okay.
| | 01:56 | So back here in the backend of Joomla!
| | 01:58 | 2.5, I'm going to click on Product
Sampler, and I'm going to go to Page Display
| | 02:03 | Options and I'm going to say
Show Page Heading, No, Save & Close.
| | 02:07 | And I'm just going to repeat this
process through the entire web site.
| | 02:12 | So I'm going to go ahead, and do that
now, and I will see you as soon as I have
| | 02:16 | gotten through all these articles. Okay.
| | 02:19 | So I've just adjusted my last menu item.
| | 02:22 | Now, it's a good idea to go to the front
-end of the web site and click through
| | 02:25 | all the links to make sure that you've
actually clicked all of these in order.
| | 02:29 | I know that when I'm doing something
mindless like this, going into each one
| | 02:32 | of the menu items and switching off
the page header, that it's very easy to
| | 02:35 | skip over something.
| | 02:36 | So I'm just going to go through
and check my work really quick;
| | 02:39 | going to go to the Products page, and
Product Sampler page, Hot Chocolate page,
| | 02:44 | I'm just going to click through these
one at a time, and make sure that I don't
| | 02:47 | have anymore of these double-page titles,
and this should go very, very quickly.
| | 02:53 | It takes only a minute, it's a good
idea to just go through all of it, because
| | 02:57 | it's just so easy to miss one of these.
| | 02:59 | I did leave the page header
in place on the contact form.
| | 03:03 | If you've turned your page header off,
it'll just say Susan Jacobs at the top.
| | 03:07 | But, I went ahead and I
left my contact header on.
| | 03:10 | So the page title problem is now fixed.
| | 03:13 | The next thing I need to do is here
on the homepage, on that Our Featured
| | 03:16 | Products module inside, there should be
some images displaying there and those
| | 03:20 | images are not currently displaying.
| | 03:21 | So I'm going to fix that next.
| | Collapse this transcript |
| Fixing images in an image-based menu| 00:00 | The next thing I'd like to fix is
here on the Homepage we have a module
| | 00:05 | displaying on the right side of the
screen called Our Featured Products.
| | 00:08 | And the words are repeated, so it says
Hot ChocolateHot Chocolate, Chocolate
| | 00:12 | TrufflesChocolate Truffles, PastillesPastilles.
| | 00:15 | So what we need to do is we need to
fix that, so that it has image based
| | 00:20 | navigation which is what the
original Joomla! 1.5 web site had.
| | 00:24 | Let's see what's going on.
| | 00:25 | Usually, anytime you see something like
this occurring on screen where you have
| | 00:29 | words that sort of run together like
this and titles that are duplicated, it's
| | 00:33 | usually an indication that, that's an
Alt tag that happens to be showing there.
| | 00:37 | And anytime an Alt tag is showing on a
page, you can usually bet that one of
| | 00:41 | a few things is true.
| | 00:42 | Either the images are not in the
location that they are expected to be, like the
| | 00:46 | images in there, or the
path to the image is incorrect.
| | 00:50 | In other words, the file and folder
structure to get to the image is incorrect.
| | 00:55 | So it's likely that one of
those two things is true.
| | 00:58 | Either we have some images that we're
going to need to upload to our web server
| | 01:02 | so that they can be found or the images
are there, but the path to the images is
| | 01:07 | incorrect, and we need to fix that.
| | 01:08 | So let's see which one of these things is true.
| | 01:11 | We are going to go in to the back-end of Joomla!
| | 01:12 | and we are going to go take
a look at Menus, Home menu.
| | 01:16 | And that is the menu that's driving those
three items there on the right side of the page.
| | 01:21 | If I click on Hot Chocolate, over here
on the right side of the screen, we have
| | 01:25 | the option of configuring a Link Image.
| | 01:28 | And the Link Image is homechoc.jpg, and
I'm not sure if that's correct or not.
| | 01:33 | Let's go ahead, and click the Select
button, and if we take a look here in our
| | 01:38 | Media Manager, we can see how the
images are currently configured.
| | 01:42 | Now, because we migrated this from a Joomla!
| | 01:44 | 1.5 web site, jUpgrade has brought
over all of the images that were there.
| | 01:49 | Most of these images aren't even needed
anymore, so you see all of these icons
| | 01:53 | here directly in the images folder.
| | 01:56 | All of those icons can be deleted,
you're welcome to go into the Media Manager
| | 01:59 | and delete them if you like, or
you can just leave them alone.
| | 02:02 | There's nothing wrong with that.
| | 02:03 | But, clearly if we take a look here,
there are no homechoc.jpg images.
| | 02:09 | That's because this came from a Joomla!
| | 02:10 | 1.5 site, and where are all
images stored in Joomla! 1.5?
| | 02:15 | Well, they're always
stored in the stories folder.
| | 02:18 | So let's look in the stories folder,
and here that looks more like some Bliss
| | 02:22 | No.5 chocolate pictures.
| | 02:24 | Let's find that homechoc,
there it is right here.
| | 02:27 | I'll go ahead and select it and I'll say Insert.
| | 02:30 | So, you see in fact the path was
incorrect, it should be images/stories/ the
| | 02:35 | file name rather than just the file name.
| | 02:37 | So go ahead and say Save & Close, and
when I refresh the front-end of the web
| | 02:41 | site, I now have a
picture for the Hot Chocolate.
| | 02:45 | So I need to fix the
other two links accordingly.
| | 02:48 | So I am going to go to Chocolate
Truffles, and I am going to select the stories
| | 02:52 | folder and those were called
hometruffles, Insert, Save & Close, and Pastilles,
| | 03:03 | select the Link Image, stories, this
one right here, Insert and Save & Close.
| | 03:11 | And now when we go to the front-end of
the web site, and we hit Refresh, we now
| | 03:17 | see our three images;
| | 03:18 | they're all stacked on
top of each other like this.
| | 03:20 | Now, designers are probably going to
be unhappy with the way this looks.
| | 03:23 | This is the default look for this template.
| | 03:26 | You could certainly use some CSS to
modify the look of that particular list to
| | 03:31 | get rid of the bullets on the left side,
and to take the links and make them
| | 03:34 | line up nicely next to the images;
| | 03:36 | just add a little bit of
CSS to make that happen.
| | 03:39 | If that's beyond your ability, well,
then you might want to think about a
| | 03:43 | different template or you might ask a
friend to help you write a little bit of
| | 03:46 | CSS to fix the little alignment problem here.
| | 03:50 | But, it looks like that at least in
this version of the RocketTheme template,
| | 03:53 | that kind of styling isn't available for
that type of picture navigation. All right!
| | 03:58 | So that pretty much fixes most of the
issues here on the front-end of our web
| | 04:01 | site, dealing with Joomla!'s core.
| | 04:04 | The next thing we need to worry about
are third-party extensions that were
| | 04:07 | present in the Joomla!
| | 04:08 | 1.5 site that we need to make sure are
now going to be present in the Joomla!
| | 04:12 | 2.5 site and I'll cover
those over the next few videos.
| | Collapse this transcript |
| Reinstalling JCE| 00:01 | Taking a look back at our Joomla!
| | 00:03 | 1.5 web site, we had some third-party
extensions that were available to us that
| | 00:07 | are not present right now
in our Joomla! 2.5 web site.
| | 00:11 | So if you take a look under the Components
menu, you'll see that we have JCE available.
| | 00:17 | JCE stands for Joomla!
| | 00:19 | Content Editor and that is a
wonderful full-featured editor that improves
| | 00:23 | Joomla!'s usability
particularly for your clients.
| | 00:26 | I use it in Joomla!
| | 00:27 | 2.5 Essential Training.
| | 00:29 | jUpgrade is here, but we won't
need to install that on the 2.5 site.
| | 00:33 | That was the extension that moved or
migrated our site from Joomla! 1.5 to 2.5.
| | 00:39 | We also have an item here called Vip Quotes.
| | 00:42 | Vip Quotes is an extension that will
show those testimonials on the web page.
| | 00:46 | So we'll need to go investigate
that and see if we can move that over.
| | 00:50 | The last one is Xmap.
| | 00:51 | Xmap is a great extension.
| | 00:53 | It's a site mapping extension;
| | 00:55 | you can see that in action.
| | 00:56 | There's a link on the bottom of your Joomla!
| | 00:57 | 1.5 web site to show you the full site
map for the web site, and Xmap generates
| | 01:02 | that for you automatically.
| | 01:03 | It also updates the site map as you add
new pages to the web site or take pages away.
| | 01:08 | So that's a really great extension as well.
| | 01:10 | Let's see if we can find JCE, Vip
Quotes, and Xmap on our 2.5 site.
| | 01:16 | If I switch over to the back-end of my
2.5 site and look under the Components
| | 01:19 | menu, all I see here are
Joomla!'s default components.
| | 01:23 | So what I am going to need to do for
each one of these third-party extensions is
| | 01:27 | to go to their web site, download the
most recent version of that extension, and
| | 01:31 | install them here on our Joomla! web site.
| | 01:32 | So, I am going to start with JCE.
| | 01:35 | I am going to open up a new
tab, and I am going to go to
| | 01:37 | joomlacontenteditor.net, and this is
the JCE web site, might look familiar
| | 01:43 |
| | 01:44 | to you from Joomla!
| | 01:45 | 2.5 Essential Training.
| | 01:47 | If we go to Downloads > Editor,
we have some choices; Joomla!
| | 01:50 | 1.5, 1.7 or 2.5.
| | 01:53 | Well, we want Joomla! 2.5.
| | 01:54 | So I am going to select that from the
list and this will give me a couple of
| | 01:59 | options to download.
| | 02:00 | The only difference between
these two options for Joomla!
| | 02:02 | 2.5 files is the jce2021.tgz which
is a more of a Linux based compression
| | 02:09 | algorithm or the Zip version which is
what is more familiar to most people.
| | 02:14 | So, I am going to go ahead and hit the
Download button here on the Zip file, and
| | 02:17 | I am going to save down that file. There it is!
| | 02:21 | Now, I am going to go
into the back-end of Joomla!
| | 02:23 | 2.5, go to Extensions > Extension
Manager, and I am going to browse for jce
| | 02:29 | extension, say Open, Upload & Install.
| | 02:33 | You should get a screen stating that
installing JCE was indeed successful. There it is!
| | 02:38 | And however JCE is not in effect for
the web site until we set it in the Global
| | 02:43 | Configuration, so we're going to go to
Site > Global Configuration, and I am
| | 02:49 | going to go to my Site tab, and here
under the Default Editor, it's likely to be
| | 02:53 | set to TinyMCE at the moment.
| | 02:54 | Switch that over to JCE as your Default
Editor, and go ahead, and say Save & Close.
| | 03:00 | You can go into individual user
accounts via your User Manager, just click on
| | 03:05 | the name of the user you want to change,
and you can override JCE as the default
| | 03:10 | for any user you wish.
| | 03:12 | In general, I don't recommend doing that.
| | 03:14 | JCE is a great editor.
| | 03:15 | But, you may want to run into the
occasional user who really loves TinyMCE or
| | 03:20 | some other editor in Joomla!
| | 03:21 | and you may need to install an
editor just for them and then give them an
| | 03:25 | exception to your rule that JCE is
the interface that you use on your
| | 03:29 | particular web site.
| | 03:30 | So let's make sure that, that took effect.
| | 03:32 | If we go to the Article Manager, and we
just click on the About Us article here,
| | 03:37 | and I scroll on down, you'll see
that this interface here is indeed JCE.
| | 03:42 | If you see a Toggle Editor button or
something that says Show/Hide in older
| | 03:45 | versions of JCE up here on the top,
that is the giveaway that this is a JCE
| | 03:50 | extension, you should see
the buttons here on the top.
| | 03:53 | It is possible to configure JCE to get
rid of some of these buttons, or come up
| | 03:57 | with a different profile for
some of the different user groups.
| | 04:00 | I do cover how to do that in Joomla!
| | 04:01 | 2.5 Essential Training.
| | 04:03 | Okay, I am not really going to make
any changes to this article, so I am
| | 04:06 | just going to hit Close.
| | 04:07 | So now that we have JCE in place, the
next extension that I want to get in place
| | 04:12 | is Xmap which I'll cover in the next video.
| | Collapse this transcript |
| Reinstalling Xmap| 00:00 | The next thing I'd like to add to
this web site is the Xmap extension.
| | 00:05 | Xmap is a sitemap and if I scroll on
down here to the bottom of the page, I
| | 00:09 | still have a link to the Site Map here which
was ported over from my Joomla! 1.5 web site.
| | 00:13 | But if I click on it, I get an error message.
| | 00:17 | And that's because this link to the
sitemap goes to something that no longer
| | 00:21 | exists on my Joomla! 2.5 web site.
| | 00:23 | So I need to download Xmap,
get it installed on my Joomla!
| | 00:27 | site, and fix the link to the Site Map in
order for this sitemap to show up again.
| | 00:31 | All right!
| | 00:32 | So to do that, I'm going to start by
going to Xmap's web site and that is here.
| | 00:38 | This is at joomla.vargas.co.cr, and we're
looking at the English version of the web site.
| | 00:45 | And as you know from the Joomla!
| | 00:47 | 2.5 Essential Training, you can put your Joomla!
| | 00:49 | site in more than one language.
| | 00:51 | Up here at the top of the screen,
notice that Spanish is also available as a
| | 00:54 | language for this web site.
| | 00:54 | I'm going to go to the Downloads
button here at the top of the screen and I'm
| | 01:00 | going to scroll on down.
| | 01:00 | I'm going to go to Components and I'm
going to go to Xmap and scroll on down
| | 01:05 | again, and notice that he's got
several versions of Xmap for different
| | 01:10 | versions of Joomla!
| | 01:11 | The one that we're interested in is
Xmap 2.2.1 and there may be a later
| | 01:15 | version if you're watching this
video later in time, which everyone is
| | 01:18 | approved for Joomla! 2.5 will be fine.
| | 01:21 | Go ahead and click on that link and we
will download that file, go ahead and say
| | 01:25 | OK, and now we can go ahead and
install this on our Joomla! web site.
| | 01:30 | So in the backend of Joomla!
| | 01:31 | 2.5, go to Extensions > Extension
Manager, and we're going to browse for Xmap.
| | 01:38 | So we can find it in our downloads list
here, right here, and say Upload & Install.
| | 01:45 | And you should get a message that
extension is installed successfully.
| | 01:49 | Now if we go to our Components menu,
you'll see Xmap there on the list, and
| | 01:53 | you'll see that we don't have an
Xmap item configured by default.
| | 01:56 | So to make a new sitemap, we're going
to click on the New button up here on
| | 01:59 | the top of the page and we'll give
this a title like Site Map, we'll set the
| | 02:05 | Status to Published.
| | 02:06 | The sitemap does have the option of putting
in some introductory text at the top of page.
| | 02:10 | If you'd like to do that, you can go
ahead and enter some text here into
| | 02:13 | the editing window.
| | 02:15 | Then we can choose which of our menus
we'd like to show up on the top of the page.
| | 02:19 | So I'd like to show the Main Menu
and I'd like to show the Footer menu.
| | 02:23 | The home menu is those three links
on the Home page that have images
| | 02:26 | associated with them and they're actually
duplicate content, so I don't want to show that menu.
| | 02:31 | I would like my Main Menu to show
on top of the footer menu however.
| | 02:35 | I can do that simply by clicking on Main Menu
here and dragging on up to the top of the page.
| | 02:40 | So when I take a look at the sitemap, I'll
see that Main Menu comes before the footer menu.
| | 02:45 | Under Options, I have some options here
that I can configure, one of which is to
| | 02:49 | show the Intro text or not.
| | 02:51 | I'm going to set that to No,
because I don't have any intro text.
| | 02:55 | And the other one is
should I show the Menu titles.
| | 02:57 | In other words, when I take a look at
the sitemap, it would say Main Menu of the
| | 03:01 | top followed by a list of links and
then footer menu and a list of links.
| | 03:05 | I actually don't want those
titles to show, so I'll set this to No.
| | 03:08 | Notice you can change a couple of
other things here like you can set up more
| | 03:11 | than one column in your sitemap.
| | 03:13 | If you have a very long site map,
that might be a useful thing to do.
| | 03:16 | You can also change an image that will
identify links that go off-site with a specific image.
| | 03:22 | So you could change that as well if you wish.
| | 03:24 | So that's all I really need to do.
| | 03:26 | I'm going to say Save & Close now
that I've configured my sitemap.
| | 03:30 | Now I'm going to go to Menus >
footer menu which is where my Site Map
| | 03:34 | link currently exists.
| | 03:36 | And you'll see that the Site Map link is here.
| | 03:38 | Note that under Menu Item Type, it
notes that the component com_xmap does not
| | 03:43 | exist, which is true.
| | 03:44 | It didn't exist until we just installed it.
| | 03:46 | So we need to fix this link, we're
going to click on Site Map, and for the
| | 03:50 | Menu Item Type, I'm going to click on Select
and I'm going to scroll on down here to Xmap.
| | 03:55 | Remember, components display on your
web page always through a menu item.
| | 04:00 | So any time you install a new
component, you can bet that when you go to
| | 04:04 | choose a Menu Item Type, you will find
some options for linking that component
| | 04:08 | up to your web site.
| | 04:09 | I'm going to leave all of the
information over here on the left side of the
| | 04:12 | screen the same, but over here on the right
side of the screen, I need to choose a sitemap.
| | 04:16 | So I'm going to click on the Change
button and I'll pick Site Map from a list.
| | 04:20 | Obviously, I haven't said it but you can
have more than one sitemap for your web
| | 04:24 | site, you can link many
sitemaps to your web site.
| | 04:28 | Xmap also has the ability to make XML-
based sitemaps, which some people like for
| | 04:31 | search engine optimization.
| | 04:33 | So go ahead and say Save & Close and that
should update our existing Site Map link.
| | 04:38 | So let's take a look at the
front end of the web site.
| | 04:40 | We'll go ahead and hit Refresh and now
when I scroll to the bottom of the screen
| | 04:45 | and click on Site Map, I will in
fact get a sitemap for my web site.
| | 04:49 | There's all the links on the site.
| | 04:51 | Notice that the footer menu, which
are the three links, appear down at the
| | 04:55 | bottom because I said I wanted the Main
Menu to display on the top and I don't
| | 04:59 | have any titles here.
| | 05:00 | One thing I might like to do is to put
a page header in place so that this page
| | 05:04 | is labeled as a sitemap.
| | 05:06 | So I can do that, just go
back into the backend of Joomla!
| | 05:09 | here, go to Site Map, go to my Page
Display Options, and say Show Page Heading
| | 05:14 | is Yes and the Page Heading text
that I want to display is Site Map.
| | 05:19 | Go ahead and say Save & Close.
| | 05:20 | And when I refresh the front end of
the web site, I now have a page header on
| | 05:25 | the top that indicates that
this is in fact the sitemap.
| | 05:28 | The next thing to replace is that quote
module that we had from the old Joomla!
| | 05:32 | 1.5 web site.
| | Collapse this transcript |
| Changing the quote extension from Vip Quotes to Rquotes| 00:00 | So I'm taking a look at
my Joomla! 1.5 web site.
| | 00:03 | This is the site we
started with before we migrated.
| | 00:07 | If I switch over to the Products page,
on the right side of the screen, you will
| | 00:11 | see Testimonial that is for this
particular web site, and if I hit the Refresh
| | 00:16 | button on the top of the page, every
time I hit Refresh, this randomly picks one
| | 00:20 | of the quotes from the 5
or so that I have in place.
| | 00:23 | This is just loading in a
different testimonial every time.
| | 00:27 | This is a fairly standard thing that
people include on web sites and you can get
| | 00:31 | several of these quote rotators in the Joomla!
| | 00:34 | Extensions Directory.
| | 00:35 | So the one that was in use in this
particular web site was called VIP Quotes,
| | 00:39 | and if I take a look at its page in the Joomla!
| | 00:41 | Extensions Directory, and I just do
a search for VIP Quotes and the page
| | 00:45 | will come right on up.
| | 00:45 | You will notice that unfortunately
VIP Quotes is only for Joomla! 1.5.
| | 00:51 | How do I know that?
| | 00:52 | Right here under Compatibility,
it says Joomla! 1.5 native only.
| | 00:56 | In other words, this particular Extensions
Developer has not ported VIP Quotes to Joomla!
| | 01:02 | 2.5. So what does that mean?
| | 01:05 | What are we going to do?
| | 01:06 | Well, we obviously can't
use VIP Quotes on our Joomla!
| | 01:08 | 2.5 web site, we're going
to have to find a substitute.
| | 01:12 | So if I go to Quotes, right here
in the breadcrumb on the JED, you'll
| | 01:15 | discover that these are all quotes extensions
that exist here, and there are several choices.
| | 01:21 | So you can take a look and evaluate
those, simple random quotes here is
| | 01:24 | available for 2.5, Rquotes is
available for Joomla! 1.7 and so forth.
| | 01:30 | In general, the ones that say Joomla!
| | 01:33 | 2.5, those are going to be the best
choices potentially because they have in
| | 01:37 | fact been tested for Joomla! 2.5.
| | 01:40 | And those extensions
that say they're for Joomla!
| | 01:42 | 1.7 in all likelihood are
going to work in Joomla!
| | 01:45 | 2.5, but you're not going to
know for sure until you test them.
| | 01:49 | I've worked with Rquotes many times before.
| | 01:52 | This is actually a fairly common
extension that we use in our web sites at 4Web.
| | 01:56 | And rather than going and downloading
another extension that I don't know, I'd
| | 02:00 | rather work with extensions that
are tested and that I'm familiar with.
| | 02:03 | So, I'm going to download and use the
Rquotes extension, even though it says
| | 02:07 | it's not 2.5, ready.
| | 02:08 | Of course, I've already tested this
ahead of time and I know that this works out.
| | 02:13 | If you feel a little bit hesitant,
you're certainly welcome to stick to those
| | 02:17 | particular extensions that
say specifically Joomla! 2.5.
| | 02:20 | All right!
| | 02:21 | So I'm going to go into Rquotes,
just going to click on the name here.
| | 02:24 | You actually see that it was last
updated on January 11th, 2012. Joomla!
| | 02:27 | 2.5 came out on the 24th.
| | 02:30 | So, I am going to go ahead and click
the Download button here, and this will
| | 02:34 | take me out to the web site
where I can download this.
| | 02:37 | I'm going to look under Joomla! 1.7 Extensions.
| | 02:41 | You'll see here that we have two extensions
actually that we're going to need to download.
| | 02:46 | There's a component, the component is
where you're going to configure the quote,
| | 02:50 | and there's a module available for it as well.
| | 02:52 | The module is what will
display the quote on the web page.
| | 02:54 | So I'm going to download both of these.
| | 02:56 | I'm going to download com_rquote and I'm
also going to download mod_rquote. Okay.
| | 03:05 | So now that I've got those, I'm going to
go ahead and upload those into my Joomla!
| | 03:09 | web site.
| | 03:10 | Close a couple of windows here, close
out of the Rquotes web site, close out of
| | 03:13 | the Rquotes on the Joomla!
| | 03:14 | Extensions Directory, and this is our Joomla!
| | 03:17 | 1.5 web site front-end.
| | 03:20 | I'm going to close out of that.
| | 03:22 | Now, I'm going to go over
here to the backend of Joomla!
| | 03:24 | 2.5 web site, and I'm going to go to
Extensions > Extension Manager, and I'm
| | 03:30 | going to browse for the two
items that I just downloaded.
| | 03:33 | So, one is com_rquote, the component;
| | 03:36 | we'll say Open and Upload, and you
should see a successful message here.
| | 03:42 | And then, down here once again, we're
going to upload a package file, hit the
| | 03:45 | Browse button, and we're going to
upload the module; mod_rquotes.
| | 03:48 | Let's say open, Upload & Install.
| | 03:51 | So you should see Rquotes is
now available here on the menu.
| | 03:55 | You'll also have it available
to you in your Module Manager.
| | 03:58 | And in the next video, I'll
show you how to configure Rquotes.
| | Collapse this transcript |
| Configuring the Rquotes module| 00:01 | Now that we have the Rquotes
component and module installed, it's time to
| | 00:05 | configure those so that we can
display our testimonials on the web site.
| | 00:10 | As I mentioned Rquotes comes
with both a component and a module.
| | 00:14 | The component is where you can put the
quotes into the system and the module
| | 00:19 | controls where those quotes
will display on your web page.
| | 00:21 | What I'm going to do now is I'm going
to configure the component and as a first
| | 00:25 | step, inside your exercise files
you'll find a text file which has all of the
| | 00:31 | quotes on it, and we're going to head
to Components > Rquote, and you'll notice
| | 00:36 | that there is the ability to make
Categories here as well as quotes.
| | 00:39 | So I'm going to start with making a
category by clicking on Categories and
| | 00:43 | we'll click on the New button to make a new
category, and we'll give this a title of Bliss No.
| | 00:49 | 5 Chocolate, and say Save & Close.
| | 00:54 | And then we can switch over to
RQuotes which is right here in the secondary
| | 00:58 | navigation click on the link and
you'll see we have currently no quotes.
| | 01:02 | Go ahead and click on the
New button to make a new quote.
| | 01:05 | The first blank here has to
do with a number Daily quote;
| | 01:09 | you could set this up to show a
different quote for a different day of the week.
| | 01:12 | We're not going to use that
functionality we're just going to use this here.
| | 01:15 | Category is Bliss No.
| | 01:16 | 5, the Status is Published.
| | 01:18 | And then you can just go into your
text file and highlight the text Ctrl+C or
| | 01:23 | Command+C to copy, Ctrl+V or
Command+V to paste, and say Save & New.
| | 01:28 | We'll setup the next one and well
you're going to just going to repeat this
| | 01:32 | process, Ctrl+C or Command+C to copy
Ctrl+V or Command+V to paste, Save & New
| | 01:39 | for all of the quotes and I'm going to
go ahead and do that now and see in just
| | 01:44 | a second when I'm done.
| | 01:46 | Okay, so here is my last quote I've put
into the system, I can now click Save & Close.
| | 01:51 | You'll see that we have all of our
quotes here on the screen, so we've got
| | 01:55 | five different quotes.
| | 01:56 | So these are now in the system and now
we can go ahead and configure the module
| | 02:00 | to display these on the web site.
| | 02:02 | So to do that we're going to go to
Extensions > Module Manager, and you'll see
| | 02:07 | that by default an Rquotes module
has already been created for us.
| | 02:11 | So I'm going to go ahead and click on
that and I'm going to change the title
| | 02:14 | from Rquotes to What You're
Saying about Bliss No. 5 Chocolate.
| | 02:26 | I'll show that title and I'm going to
display this in the right Position, I'll
| | 02:32 | make it Published and I'm going to
have it show on the selected pages.
| | 02:38 | We can select all by clicking the
Select All button and then I can turn off the
| | 02:41 | pages I don't want, which are the Home
and the Products part of the web site.
| | 02:45 | So I'm going to go ahead
and uncheck all those things.
| | 02:49 | So what's left is the rest of the
Main menu plus what's in the Footer Menu.
| | 02:54 | And then now over on the right of
the screen we can configure this.
| | 02:57 | So our quote source will be the
Database, so we can skip the next part since
| | 03:01 | we're not using a text file for the source.
| | 03:03 | We're going to select the Bliss No.
| | 03:05 | 5 Chocolate category, we're going to
Rotate quotes using the Single_random item
| | 03:11 | here and the Number of quotes
to display will be just one.
| | 03:14 | There are some style options down here,
you can pick the display the quotes in
| | 03:17 | Bolds or Italics and I'm going to
turn off the Display quotation marks.
| | 03:22 | So go ahead and say Save & Close.
| | 03:24 | And now when I flip to the front
end of a web site and I hit refresh, I
| | 03:28 | shouldn't see the quotes on the Home page
because I didn't assign them to the homepage.
| | 03:32 | But I did assign them to the Health Benefits
page, so there's my quote over here on the side.
| | 03:37 | And I can flip through
the other pages on the site;
| | 03:40 | I can refresh the same page over and
over again and see that my quote is
| | 03:44 | rotating over here correctly.
| | 03:47 | We have now at this point replaced the Vip
Quotes module which was used on the Joomla!
| | 03:52 | 1.5 say, with the Rquotes component in module
which are being used here on our new Joomla!
| | 03:59 | 2.5 web site.
| | 04:00 | The last thing we need to talk about
is testing and I'll cover that in the
| | 04:03 | next video.
| | Collapse this transcript |
| Testing| 00:01 | The very last thing that we need to do
with this web site is to test and make
| | 00:04 | sure that we've matched up all of the
changes between the original Joomla!
| | 00:09 | 1.5 web site and our Joomla! 2.5 web site.
| | 00:12 | This client wants us to get the site
looking as close to the same as we possibly can.
| | 00:16 | We are going to compare these screens
back and forth and make sure we are in
| | 00:19 | fact, as close as we possibly can be.
| | 00:21 | We are here on the Home page
of the Joomla! 1.5 web site.
| | 00:26 | Notice that the HTML
title tag here says, Bliss No.
| | 00:29 | 5 All Natural Chocolate.
| | 00:31 | When I hop over to the Home page, you
will notice that at the top says Home.
| | 00:35 | So that is probably a difference that
we are going to want to take care of.
| | 00:38 | Something else that we might want to
alter is here in the Search Box in the 1.5
| | 00:43 | site, it says search... and then
a Search button. In the Joomla!
| | 00:48 | 2.5 site it says, Search...,
Search..., and oh by the way Search.
| | 00:54 | That's an awful lot of searching going
on there in the upper right-hand corner.
| | 00:57 | Wouldn't it be great if we could
customize those language strings a little bit
| | 01:00 | to make this not quite so searchy.
| | 01:03 | So those are two little things
we are going to need to change.
| | 01:05 | You can certainly run through the rest of the
site, you should test all of links on the site.
| | 01:09 | Look, we forgot to change some
titles here on Terms and Conditions and
| | 01:14 | the Privacy Policy.
| | 01:15 | I must have skipped right over that
while I was turning off those Page Headers,
| | 01:18 | but the Site Map is looking good.
| | 01:20 | So really what you ought to be
doing at this point is going through and
| | 01:23 | clicking on all of these links and trying out
all of the pieces of information that are here.
| | 01:28 | Send an email, Jen Kramer.
| | 01:31 | Here's my Email address, Testing the
form, testing testing, Send an Email.
| | 01:39 | And sure enough that email got sent.
| | 01:41 | Here is a message up here
saying, Thank you for your email.
| | 01:44 | This is what the testing process is all
about, is to take one final look at this
| | 01:47 | web site and make sure that things are
as close to possible from the previous
| | 01:53 | site as we can make them.
| | 01:54 | So we are going to take a look through
the old site, take a look at the content,
| | 01:58 | make sure that these
things match as well as we can.
| | 02:01 | The reason the image is different
between these pages that this is the random
| | 02:04 | image module and if we hit Refresh again,
we will get a different image loading here.
| | 02:09 | It's okay that the images are
different, they are supposed to be
| | 02:11 | loading differently.
| | 02:13 | What we need to fix are, we need to
turn off the page headings for the footer,
| | 02:16 | for the Terms and
Conditions and the Privacy Policy.
| | 02:19 | We are going to need to change the
Search, Search, Search in the upper
| | 02:22 | right-hand corner, and I want to be
sure to turn on by site name to be included
| | 02:27 | in the HTML title tag.
| | 02:29 | So I am going to want to do those three things.
| | 02:31 | Let's go ahead and get those three things done.
| | 02:33 | So I am going to start with making
sure that the site name shows up in all
| | 02:37 | of our page titles.
| | 02:38 | That's in the global configuration,
so I am going to click on the Global
| | 02:41 | Configuration item here, and on the
right of the screen under the Site tab,
| | 02:45 | there is Include Site Name in Page Titles.
| | 02:47 | I am going to Before.
| | 02:50 | So it will put Bliss No.
| | 02:51 | 5 Chocolate before the name
of the web page that we are on.
| | 02:55 | So I am going to go ahead and say Save &
Close, and if I refresh my page, you'll
| | 03:00 | notice the tab up here in the
upper right will change to Bliss No.
| | 03:03 | 5 Chocolate - Ordering.
| | 03:05 | The Home page is still
somewhat lacking, Bliss No.
| | 03:08 | 5 - Home, we probably want to say a
little bit more about things than that.
| | 03:14 | So I'm going to go into my Menus, I am
going to go to Main menu and I am going
| | 03:19 | to go to my Home page and I am going
to go over here to the Page Display
| | 03:23 | Options to the Browser Page Title and I'm
going to put in some additional information here.
| | 03:28 | Bliss No.
| | 03:29 | 5 Chocolate Bars, Hot Chocolate,
Chocolate Truffles, Pastilles.
| | 03:41 | I am going to go ahead and say Save &
Close, and now when I Refresh the Home
| | 03:46 | page, you'll see that my HTML
title tag is in fact much better, more
| | 03:50 | descriptive, and probably
better for search engines.
| | 03:53 | So that was the first change
I wanted to make to the site.
| | 03:55 | The second change I want to make is
down here in the bottom where it says,
| | 03:58 | Privacy Policy and Terms and Conditions,
I still have my double page headers.
| | 04:02 | So I am going to switch to Menus >
footer menu and I am going to click on the
| | 04:06 | Privacy Policy, and I am going to
Page Display Options and say, Show Page
| | 04:10 | Heading of No, and I am going to repeat
that process for Terms and Conditions.
| | 04:15 | Click on the name of the title, Page
Display Options, Show Page Heading as No.
| | 04:19 | So now when I refresh the Privacy
Policy page, we have just one title for the
| | 04:24 | Privacy Policy and same for the
Terms and Conditions, which is great.
| | 04:29 | Now the third thing I want to fix
is this Search item up here in the
| | 04:31 | upper right-hand corner. In Joomla!
| | 04:32 | 2.5 Essential Training, I showed you
about language overrides in Joomla! 2.5.
| | 04:38 | This is a new feature, the ability to
do a language override, and it's so cool
| | 04:43 | to be able to quickly and easily change the
text that was in these Search areas. In Joomla!
| | 04:47 | 1 .5, changing what went in the Search
box and Search button involved going into
| | 04:52 | some files behind the scenes, and if an
upgrade came and that had new language
| | 04:57 | files, it's possible that your old
language file would be overwritten.
| | 05:00 | So it's kind of a pain in
the neck. But in Joomla!
| | 05:02 | 2.5, we have gone to this override
system with languages that works so well
| | 05:07 | with the templates.
| | 05:08 | It works great with the
languages and it's so easy to use.
| | 05:10 | We are going to customize
this Search thing up here.
| | 05:13 | Inside of the backend of Joomla!
| | 05:14 | I am going to go to
Extensions > Language Manager.
| | 05:17 | Even though, this is a single language
web site, we only have English installed,
| | 05:21 | we can still use the language overrides.
| | 05:24 | So I am going to click on the Language
Overrides link right here and you'll see
| | 05:27 | that we currently don't
have any language overrides.
| | 05:30 | So I am going to click on the New button
and search for the text you want to change.
| | 05:34 | So the text I want to change is search
..., so I am going to go ahead and put
| | 05:38 | that in, and I am going to ask this to
find all places that Search... appears.
| | 05:44 | Well, there's a few of them.
| | 05:45 | Down here there is SEARCH_LABEL,
there's a SEARCHBOX and a FINDER_SEARCH.
| | 05:51 | So it's likely that these are the
three searches that show up here;
| | 05:56 | Search, Search and Search.
| | 05:57 | Let's go ahead and change some of these.
| | 05:59 | I want to change the label next to the
Search box, I would actually like it to non-exist.
| | 06:02 | So I am going to click on this
Language override and it will give me the Text
| | 06:06 | of Search..., I am just going to erase
that altogether so that there's no text,
| | 06:11 | and say Save & Close.
| | 06:14 | And when I refresh the site, notice that
Search... before the Search box is gone.
| | 06:19 | So that's one search down and two to go.
| | 06:21 | So the next thing I want to do is get rid
of the word Search... inside of this box.
| | 06:25 | The button says Search, I think
it's pretty obvious it's search without
| | 06:29 | having to label it twice.
| | 06:30 | I am going to make another Language
override by clicking the New button here,
| | 06:34 | and once again, I am going to search
for Search... and it will come up with the
| | 06:39 | results here just the second.
| | 06:42 | And I am going to guess it's this
one here the SEARCHBOX because the word
| | 06:45 | search is in the box.
| | 06:47 | I am going to click on that and I
don't want any text there either.
| | 06:49 | So I am just going to erase the text
and say Save & Close, and now when I
| | 06:54 | refresh the site, the word Search
doesn't show up in the box and it looks like a
| | 06:58 | regular old search box. So this is great.
| | 07:01 | That's exactly what I want for the web site.
| | 07:04 | The final step of putting this site
together that I would strongly recommend you
| | 07:07 | do, that I am not going to show you how
to do, is to take your site and run it
| | 07:10 | through a whole series of web browsers.
| | 07:12 | Look at it on Firefox, Chrome, and
various versions of Internet Explorer on your
| | 07:17 | PC, look it out on Safari and Chrome
and Firefox on your Mac as well, and make
| | 07:23 | sure that the site looks more or
less the same across all those browsers.
| | 07:26 | You are working with a high-quality
template from RocketTheme, and it's very
| | 07:30 | likely that they've already tested
all of this, but you may find that
| | 07:33 | particularly with the content that you
enter into this web site, that you may
| | 07:38 | have minor variations
between some of these browsers.
| | 07:41 | Remember this web site has been up
since 2008, it's likely the client has gone
| | 07:45 | and made some changes.
| | 07:46 | There could be stray HTML tags that
will impact the layout of the Content
| | 07:50 | Region in particular, even if the template
itself displays perfectly across all browsers.
| | 07:55 | So it's always worth doing a browser
check every time you take care of a
| | 07:58 | web site like this.
| | 08:00 | Once again, just make sure you go
through your site with a fine toothcomb.
| | 08:03 | You have found all of the issues and
problems and when it's into a final state
| | 08:07 | like this, you're actually
ready to go ahead and launch this.
| | Collapse this transcript |
|
|
4. Migrations Using SP UpgradeInstalling the starting state exercise files| 00:01 | For the next three chapters, we're
going to work with the same web site that we
| | 00:04 | just worked with our
previous two. It's the Bliss No.
| | 00:08 | 5 Chocolate web site.
| | 00:09 | And in the previous two chapters, we
worked with jUpgrade as a third-party
| | 00:13 | extension and we worked with a
commercially available template.
| | 00:17 | What I'm going to do now is go
to the similar starting state.
| | 00:20 | This time the Joomla!
| | 00:21 | 1.5.15 web site has a custom
template associated with it.
| | 00:26 | And those of you who completed my Joomla! 1.5:
| | 00:29 | Creating and Editing Custom
Templates and Joomla! 1.5:
| | 00:32 | Styling with CSS course, this
will look very familiar to you.
| | 00:36 | We're going to take that web site and
we're going to migrate it to Joomla!
| | 00:40 | 2.5, this time using a tool called SP
Upgrade, which is similar to jUpgrade but
| | 00:47 | different in a number of
ways as you're going to see.
| | 00:49 | So just like we did before when we
restored our starting state exercise files,
| | 00:53 | we're going to do the same thing now.
| | 00:55 | This process goes in a few broad steps.
| | 00:57 | First of all, there is a zipped series of files.
| | 01:01 | We're going to upload
those here to our web server.
| | 01:04 | And we have a copy of the database,
which we're going to restore, and then we're
| | 01:08 | going to edit configuration.php to make
sure that our database and our files are
| | 01:13 | talking to each other.
| | 01:14 | Now I am working here on a web server.
| | 01:17 | This is my web server at Rochen, R-O-C-H
-E-N, which does all the hosting for my
| | 01:22 | company, 4Web Inc., and I am working
here because SP Upgrade also does not work
| | 01:29 | out of the box on XAMPP or on
WAMP and I've tested both of those.
| | 01:33 | I did not test MAMP but I assume that
it has problems also and for a lynda.com
| | 01:38 | course, I can't have it work
on one platform and not another.
| | 01:40 | So I am working on an actual real web
server and it does not work on a locally
| | 01:47 | running web server such as one
that you would get with WAMP or XAMPP.
| | 01:50 | First of all, I'll start by uploading
my files up to my web server and you can
| | 01:54 | do that by FTP, or if you have
cPanel, which you see displayed here.
| | 01:59 | This is a open source control panel
software that you'd frequently in web
| | 02:03 | hosting environments.
| | 02:05 | It's not the only control
panel software out there;
| | 02:07 | you may encounter something else, and
you can certainly use whatever your web
| | 02:11 | hosting provider gives you.
| | 02:13 | But you're looking for a way to
transfer files from the computer that's in
| | 02:15 | front of you up to the web server and then
extract them when they're on the web server.
| | 02:20 | That's the broad strokes
of what we're trying to do.
| | 02:22 | The way you do that in the cPanel
environment is through the File Manager which
| | 02:25 | is right here, and what we're going to
do is upload this file to the server.
| | 02:29 | So I'm going to click on Upload
and I'm going to browse for my files.
| | 02:34 | So we're on the Desktop, we're looking
at our exercise files, we're in Chapter
| | 02:38 | 4, video number 1, and you'll see that
I have a ZIP file here called spupgrade.
| | 02:43 | Go ahead and say Open and
that's going to upload to the server.
| | 02:47 | Meanwhile, I'm going to go back to my
control panel and I'm going to create a
| | 02:50 | database and a database user.
| | 02:52 | So the way I'm going to do that is
scroll down to the Databases part of my
| | 02:55 | control panel and I'm going to
click on the MySQL Database Wizard.
| | 03:00 | So I'm going to create a database
and this database I'm going to call
| | 03:04 | migrate_spupgrade and we'll go to the next step.
| | 03:10 | I'm going to create a database user and
we'll call this migrate_spuser and we'll
| | 03:15 | give this a password and our
password will be generated for us here.
| | 03:20 | Make sure you make note of what that
password is and copy it to a safe place by
| | 03:25 | highlighting, Ctrl+C or Command+C
to copy, Ctrl+V or Command+V to paste
| | 03:28 | somewhere safe, say Use
Password and say Create User.
| | 03:33 | And now what we'll do is assign all privileges
here to that database user and say Next Step.
| | 03:40 | And so now we have a database called
migrate_spupgrade and we have a database
| | 03:45 | user called migrate_spuser.
| | 03:48 | Remember that, very important.
| | 03:50 | Let's take a look back here and see
if our file is uploaded, which it has.
| | 03:53 | Okay, so we can close this tab, and if
we hit Reload here in our File Manager,
| | 03:58 | you'll see that our files are uploaded here.
| | 04:00 | There they are, spupgrade.
| | 04:01 | I'm going to highlight that and I'm
going to click the Extract button.
| | 04:05 | All of those files are going
to extract right here into this
| | 04:08 | particular location.
| | 04:10 | So there they all are. Great!
| | 04:12 | Now I'm going to restore my database,
so I'm going to go back to my control
| | 04:16 | panel and I'm going to go here back to
my control panel homepage and I'm going
| | 04:22 | to open up phpMyAdmin.
| | 04:25 | And phpMyAdmin is going to give me
access to my database so that I can upload
| | 04:31 | the copy of my SQL file into my database.
| | 04:34 | Make sure you pick your new database, spupgrade.
| | 04:37 | You might have seen the other one there _db;
| | 04:40 | that was from my first example here.
| | 04:42 | You can leave the database there, it's
just fine where it is, and create other
| | 04:45 | databases provided that your web host lets you.
| | 04:47 | So we're going to go ahead and import
our data from the SQL file here into
| | 04:52 | our spupgrade database.
| | 04:54 | So to do that, I'm going to click on
Import and I'm going to browse for my
| | 04:59 | spupgrade.sql file here and say Open.
| | 05:02 | Leave everything exactly as they are
for the default settings and say Go and
| | 05:07 | this has gone ahead and uploaded that
information for the web site here into our database.
| | 05:12 | You can see all the tables generated over here
on the left side of the screen. So that's great.
| | 05:16 | The last thing we need to do now is
back here in our File Manager, we're going
| | 05:20 | to edit configuration.php.
| | 05:23 | This is the file that connects
the file structure of Joomla!
| | 05:27 | to the database by specifying the database
name, username, password, that kind of thing.
| | 05:32 | So I'm going to edit this file by
clicking on Edit and Edit again.
| | 05:37 | This will open up in a new
window where I can make my changes.
| | 05:41 | And so what I'm going to do is scroll on
down here until I find the database fields.
| | 05:47 | So the host is still localhost, the
user is now migrate_spuser, the name of the
| | 05:56 | database is migrate_spupgrade, and the
password for the database I will paste in right here.
| | 06:07 | The last thing we need to change is
the path to that temp and the log files.
| | 06:14 | That's a little bit further here up the screen.
| | 06:16 | You can see that I assembled the site
on my local computer using WAMP as you
| | 06:19 | can tell from the path.
| | 06:20 | What we're going to do is change that to
point to our new location on the server.
| | 06:24 | And as I told you last time, if you
take a look inside your File Manager, it'll
| | 06:28 | tell you the first part of your
path right here, /home/migrate.
| | 06:32 | Then we're inside of the public_html
folder and the tmp file is located here
| | 06:39 | as well as the logs.
| | 06:40 | So we'll go ahead and edit that,
so the log_path will wind up being
| | 06:45 | /home/migrate/public_html/logs.
| | 06:53 | And over here on the tmp_path our path
will be /home/migrate/public_html/tmp.
| | 07:03 | You may have something very, very
different for your log_path and the
| | 07:07 | tmp_path on your web site.
| | 07:09 | It all depends on how
your web host is configured.
| | 07:11 | Your web host should be able to give
you this information as to the path to
| | 07:15 | these folders and it may be very
different than what I've typed in here.
| | 07:18 | So make sure that you talk to
your host to get the correct path.
| | 07:22 | What I'm showing you here in the video is
specific to my site and my Joomla! installation.
| | 07:26 | So this is all set, we'll go
ahead and say Save Changes. Hurray!
| | 07:30 | And now I'm going to open up a new tab
and I'm going to 4webinc.net/~migrate.
| | 07:39 | That's where I'm doing my work.
| | 07:41 | Your address of course is
going to be something different.
| | 07:44 | So if you take a look here at the site,
those of you who have been following me
| | 07:46 | on lynda.com for a while and remember
the good old days when I did Joomla! 1.5:
| | 07:50 | Creating and Editing Custom
Templates and Joomla! 1.5:
| | 07:54 | Styling with CSS, this site
should look very familiar to you.
| | 07:57 | This is our Bliss No.
| | 07:58 | 5 Chocolate web site.
| | 08:00 | You can see as we click through the
tabs here that it's a custom template, it's
| | 08:04 | really kind of pretty when you look at it,
and you can see that there're lots of
| | 08:09 | interesting extensions that
are included in this web site.
| | 08:12 | You'll see that the quotes that we saw
in the previous web site are still here.
| | 08:15 | We still have several pictures of the
chocolate bars and the hot chocolate
| | 08:19 | and all the rest of it.
| | 08:20 | Down at the bottom of the screen we do
have links to the Site Map and so forth.
| | 08:24 | This is still run by Xmap
exactly as it was before.
| | 08:28 | And on the backend of the web site,
we do have JCE running as well.
| | 08:31 | So we've got the starting state of our
web site and we're ready to start with
| | 08:34 | our migration using SP Upgrade.
| | Collapse this transcript |
| Updating the site to the most recent version of Joomla! 1.5| 00:01 | When you start working on a new web
site, one of the first things that you
| | 00:04 | should do and a client comes to you and says,
oh, I really need you to take over my Joomla!
| | 00:09 | web site, ask for super administrator
login and log into the web site and figure
| | 00:13 | out what's going on in terms of the
file structure and the version of Joomla!
| | 00:16 | that's running and the version of
the extensions that are running.
| | 00:19 | What you need to do is you need
to log in the backend of Joomla!
| | 00:22 | and start to take a look at these Joomla!
| | 00:23 | web sites when you take them on from
somebody else who's built them and figure
| | 00:27 | out what needs to be done in
order to start the migration process.
| | 00:31 | What we are going to do is
log in to the backend of Joomla!
| | 00:33 | and find out what
version of Joomla! is running.
| | 00:36 | This web site address is 4webinc.net/~migrate.
| | 00:39 | If you add a slash administrator
onto the end of this URL or to your URL,
| | 00:44 | you'll come up with the administrator
page which is right here and you're going
| | 00:48 | to log in, their Username is admin
and the Password is admin, and you'll be
| | 00:52 | logged in to the backend of the web site.
| | 00:55 | The version of Joomla!
| | 00:56 | is always displayed up here in the upper
right-hand corner, there it is, 1.5.15.
| | 01:01 | If you happen to be using a different Joomla!
| | 01:03 | template and the version number isn't
displayed, if you go to Help, and you go
| | 01:08 | to System Info, this will
tell you exactly what Joomla!
| | 01:11 | version you're using, so here we are 1.5.
15 Stable, so you can take a look at it.
| | 01:17 | Now that we are logged
into the backend of Joomla!
| | 01:19 | and we know that we are running in old
version of Joomla!, did you notice what
| | 01:23 | we just typed in for the Username and
Password, admin for username and admin
| | 01:26 | for a password, and we're running on a real web
server in the great wide world of the Internet.
| | 01:31 | This is a very bad thing.
| | 01:32 | So the very first thing I want you to do
is to change your Username and Password.
| | 01:36 | To do that, go to the User Manager, go
to the Administrator login, and change
| | 01:42 | the Username from admin to pretty much
anything else and type in a Password and
| | 01:48 | go ahead and hit save.
| | 01:49 | That will help lock the site down,
now that it's out here in the wild.
| | 01:53 | Now what we need to do is update this
web site from 1.5.15 to the latest version
| | 01:58 | of Joomla!, which as of
this recording is 1.5.25.
| | 02:00 | So to do that, we are going to go to joomla.org.
| | 02:06 | Here we are, we are going to click on
the download link right here, and here on
| | 02:10 | the web site, what we are going to do
is scroll on down to Download Joomla!
| | 02:13 | 1.5.x, and we are going to
download another Joomla! 1.5.x package.
| | 02:19 | Click on the link.
| | 02:20 | This will take us to a
page inside of joomlacode.org.
| | 02:22 | Joomla!Code is where much of the
project software resides, including all the
| | 02:28 | versions of Joomla!, all the upgrade patches.
| | 02:30 | It's all located here and you
can download it whatever you like.
| | 02:33 | What we are going to do is we are going
to need to download a Patch, and we're
| | 02:38 | running 1.5.15 and we need to go to 1.5.25.
| | 02:42 | But if you take a look at what's
here under Joomla!1.5.25updates, you'll
| | 02:47 | see that our only choices are things
that go from 1.5.24 to 25 or things
| | 02:52 | that go from 0 to 25.
| | 02:53 | We are going to want to download the
ones that go from 0 to 25, because this
| | 02:58 | is an accumulated package of updates that
have occurred over the many years the Joomla!
| | 03:03 | 1.5 has been out.
| | 03:05 | It's okay if you run these updates and
you're running a later version of Joomla! than 0.
| | 03:09 | I really hope you're not running Joomla! 1.5.0.
| | 03:12 | This will just go ahead and
update files that need to be updated.
| | 03:15 | What we are going to do is download the
patch right here which goes from 0 to 25.
| | 03:20 | There are three versions of this
particular patch that you'll see here, one is a
| | 03:24 | zip, one is a tar.bz2 and one is a tar.gz.
| | 03:27 | It really makes very little
difference which one you download, they're just
| | 03:30 | different protocols for zipping files.
| | 03:32 | I am going to download the zip, because
you're familiar with it and so am I. So
| | 03:36 | go ahead and click on that and we're
going to save down our Patch_Package.
| | 03:39 | So now that that's downloaded, I am
going to go back to my File Manager here
| | 03:43 | inside of my Control Panel.
| | 03:45 | You can get to your File Manager by
clicking on File Manager here from your main
| | 03:48 | Control Panel in cPanel and it
should open in a new window like this.
| | 03:51 | And I am going to go to the root of my web site.
| | 03:54 | What I mean by the root is the public_
html folder right at that particular point
| | 03:59 | in time, same location as
configuration.php, and I'm going to upload my
| | 04:04 | Patch_Package to this location.
| | 04:06 | So to do that, I am going to click the
Upload button right here, browse to my
| | 04:11 | Downloads folder, find my Patch_Package,
and we're going to go ahead and upload
| | 04:15 | that right now and that uploaded really quickly.
| | 04:18 | And I am going to come back here to my
File Manager and hit the Reload button
| | 04:22 | and you'll see that our
Patch_Package is right here.
| | 04:25 | All I need to do now is unzip this patch
right here from the root and all of the
| | 04:30 | files will go to the correct places
within the Joomla! file structure.
| | 04:34 | So I am going to click on this to
highlight it, then I am going to click on the
| | 04:37 | Extract button up here on the top.
| | 04:38 | It's going to ask me am I sure
that this is what I want to do.
| | 04:41 | I am going to say Extract Files, and
it has gone ahead and extracted a whole
| | 04:45 | bunch of files for me right here.
| | 04:47 | Go ahead and say Close.
| | 04:48 | I can now go ahead and
delete that Patch_Package.
| | 04:51 | So I am just going to click on
it to highlight and say Delete.
| | 04:55 | And I am going to click on spupgrade.zip.
| | 04:57 | This was the original package that
we uploaded in the previous video that
| | 05:00 | contained the Joomla!
| | 05:01 | web site, we don't need this
either so I am going to go delete that.
| | 05:04 | So now, when I flip back
to the front end of Joomla!
| | 05:08 | and I refresh I should see
absolutely no difference whatsoever.
| | 05:11 | Sure enough, I see
absolutely no difference whatsoever.
| | 05:15 | In the backend of Joomla!
| | 05:16 | though, if I go to say to the site Control
Panel, I'll see that my version of Joomla!
| | 05:21 | has changed and I'm now running
version 1.5.25 exactly as I should. Hurray!
| | 05:26 | We've upgraded our web site
to latest version of Joomla!.
| | 05:30 | In the next video, we're ready to
start tackling SP Upgrade and how that
| | 05:34 | will work.
| | Collapse this transcript |
| Installing Joomla! 2.5| 00:01 | If you take a look at the documentation
for SP Upgrade, you'll discover that it
| | 00:04 | works very differently than jUpgrade.
| | 00:08 | So with jUpgrade, what we did was
once we had installed our Joomla!
| | 00:12 | 1.5.15 site and upgraded it to 1.5.25,
the next thing we did was we installed
| | 00:17 | jUpgrade directly into the Joomla!
| | 00:19 | 1.5 web site, and from
there, it generated a Joomla!
| | 00:22 | 2.5 web site for us.
| | 00:24 | We didn't have to install
another copy of Joomla! or anything.
| | 00:28 | SP Upgrade works slightly differently.
| | 00:30 | What we do is we've got our 1.5 site
in place, we're going to install Joomla!
| | 00:36 | 2.5 ourselves, and then we're going to
install SP Upgrade inside of the Joomla!
| | 00:41 | 2.5 web site, not into 1.5 web site,
and what will happen is that SP Upgrade
| | 00:48 | will pull over the data from the Joomla!
| | 00:50 | 1.5 site into the Joomla! 2.5 web site.
| | 00:53 | So it's a different approach, but it
works which is all we can ever ask for.
| | 00:58 | What I am going to do now is I need
to download and install Joomla! 2.5.
| | 01:02 | I am going to start by going into my
File Manager from my Control Panel here,
| | 01:08 | and I am going to create a new folder.
| | 01:09 | So I am going to make a new folder
and I am going to call it spupgrade.
| | 01:14 | And inside of the spupgrade folder is where
I'm going to locate my Joomla! 2.5 web site.
| | 01:21 | So now I am going to need to
download and install Joomla! 2.5.
| | 01:23 | So to do that, I am going to go to joomla
.org, click on the Download button, and
| | 01:29 | then I am going to download the
most recent version of Joomla!
| | 01:31 | 2.5, and right now, that's Joomla! 2.5.1.
| | 01:34 | Go ahead and click on the link to save
this down to your computer and you'll see
| | 01:39 | that our download is now complete.
| | 01:40 | So now what I am going to do
is I am going to upload Joomla!
| | 01:42 | 2.5.1 to my spupgrade folder.
| | 01:47 | So I am going to click on
Upload and then browse for Joomla!
| | 01:51 | 2.5.1, and it will go ahead and upload for me.
| | 01:55 | While that's happening, I am going to
go back to my main Control Panel and I am
| | 02:00 | going to make another database.
| | 02:01 | Down here under Databases, what I am
going to do is I am going to go to a
| | 02:05 | different link this time.
| | 02:06 | I am going to go to the MySQL Databases.
| | 02:09 | The Database wizard is going to walk me
through the process of creating both a
| | 02:12 | database and a database user.
| | 02:14 | I can use the same database user for
both of the databases that are going to
| | 02:19 | pertain to this SP Upgrade project.
| | 02:21 | First of all, we're going to create a
new database and I am going to call this
| | 02:25 | database migrate_spupgrade25 and
I am going to say Create Database.
| | 02:33 | So you'll see that it's created here
under the Databases, but note that there's
| | 02:37 | no database user associated with it.
| | 02:40 | Now what we're going to do is scroll on
down the screen to where it says Add a
| | 02:43 | User To the Database and we're going
to say take migrate_spuser and add it to
| | 02:48 | migrate_spupgrade25, say Add, All
Privileges, and when we go back here to the
| | 02:55 | screen, you'll see that migrate_
spupgrade25 is now associated with
| | 03:00 | migrate_spuser, and we didn't
have to create a new user this time.
| | 03:04 | This is just another way to go about
the process of making databases and
| | 03:08 | hooking up database users, which you
can do this or you can follow the Database
| | 03:12 | wizard if you like.
| | 03:14 | If that's simpler for you, there's
really no issue with having multiple
| | 03:17 | database users on the site.
| | 03:19 | So we have a database, we have files that we've
uploaded here, let's take a look at our files;
| | 03:24 | those are all uploaded to the server.
| | 03:26 | If I go into my File Manager and hit
the Reload button, you will see that
| | 03:29 | my package is here.
| | 03:31 | Click on it to highlight and say
Extract and we've extracted all of our files
| | 03:35 | right here into our File Manager.
| | 03:37 | We will hit Reload, we
will see all those in place.
| | 03:39 | There they all are.
| | 03:40 | We can actually get rid of the
package down that we're done with it.
| | 03:44 | And so now if I open up a tab here and
I go to 4webinc.net/~migrate/spupgrade,
| | 03:56 | then I should get my
installation screens here for Joomla!
| | 03:58 | I want to install English.
| | 04:01 | This is going to tell me all of the
settings for PHP are in fact correct, say Next.
| | 04:07 | It's going to warn me about the
General Public License, say Next.
| | 04:11 | Then it's going to ask me for the
information here about my web site's
| | 04:15 | database information.
| | 04:16 | First of all, when you work with SP
Upgrade, make very, very sure that the
| | 04:21 | database type chosen up here
on the top is MySQLi, not MySQL.
| | 04:27 | SP Upgrade is designed to work with
MySQLi, many web hosts are now offering it.
| | 04:32 | So make sure that that is
the chosen database type.
| | 04:36 | Host name is still localhost, the
username will be migrate_spuser and enter your
| | 04:43 | password from before and enter your
database name which is migrate_spupgrade25.
| | 04:47 | It will give you a Table Prefix.
| | 04:52 | This is 5 randomly generated characters.
| | 04:55 | Your Table Prefix is likely
to be different than mine.
| | 04:58 | That's a good thing.
| | 04:59 | It's supposed to be different because
this is in place for security reasons.
| | 05:03 | Okay, once you've got that in place,
go ahead and hit the Next button.
| | 05:06 | In the FTP Configuration screen, it's
unlikely you're going to need to set this
| | 05:10 | up provided that you have a very good
web host, and it's configured correctly,
| | 05:14 | you should not ever have to touch the screen,
Rochen happens to be both of those things.
| | 05:18 | So I'm going to go ahead
and hit the Next button.
| | 05:20 | Then we can give this site name
which is Bliss No. 5 Chocolate.
| | 05:26 | I can type-in my email address.
| | 05:28 | You can give your Admin Username and Password.
| | 05:31 | Because we're working on an actual
web host, and this web site is out in
| | 05:35 | the real world, do not use admin,
admin, type-in something else, and
| | 05:41 | reenter the password.
| | 05:42 | You do not need to install the Sample
Data, you can skip that step, go ahead and
| | 05:45 | say Next and this will tell you that Joomla!
| | 05:48 | is now installed, the last step is to
remove the Installation folder, which we
| | 05:52 | can do by clicking this button,
and now I'm going to flip over to the
| | 05:55 | Administrator side of Joomla!
| | 05:57 | and I can log in with the username
and password that I just created.
| | 06:01 | There's the backend of Joomla!, a fresh
clean installation, and when I click the
| | 06:05 | View Site link up here in the upper
right-hand corner, we will have a fresh
| | 06:09 | clean install of Joomla! as well.
| | 06:11 | So now that we have Joomla!
| | 06:12 | 2.5 installed, we're ready to
go ahead and install SP Upgrade.
| | Collapse this transcript |
| Downloading and installing the SP Upgrade migration component| 00:01 | Now that we have our starting
state in place that's our Joomla!
| | 00:05 | 1.5.25 site for the Bliss Chocolate
company, and then we also have a blank
| | 00:10 | installation of Joomla!
| | 00:12 | 2.5 in place that's in a
subdirectory of our Joomla!
| | 00:14 | 1.5 site, we're ready to go
ahead and download SP Upgrade.
| | 00:19 | So you can get here by going to cyend.com
/extensions, and from here, we're going
| | 00:29 | to go over to the Extensions link,
we're going to go to Components, and then
| | 00:35 | scroll on down here to where it says SP Upgrade.
| | 00:37 | Go ahead and click that link, and this is the
information about SP Upgrade and how it works.
| | 00:43 | You can see it's Joomla! 2.5 ready.
| | 00:46 | If you scroll on down the page here,
you'll get to where we can download it.
| | 00:51 | But, there is a purchase price
associated with this extension.
| | 00:55 | So the price is as of this writing
?24.95, and how much a Euro is in US
| | 01:03 | dollars, you can type it into Google and it
will tell you the most recent currency exchange.
| | 01:08 | So you're going to need to go through the
purchase process to purchase this extension.
| | 01:11 | Keep in mind that it sounds like well,
you could download jUpgrade for free, or
| | 01:16 | you can download this extension
for ?24.95. Which is better?
| | 01:20 | Well, free must be better.
| | 01:22 | Well, keep in mind that SP Upgrade
comes with support and since you have
| | 01:27 | somebody you can ask questions to, it may
actually wind up being a timesaver in the long run.
| | 01:32 | We have tested both jUpgrade and
SP Upgrade at my company 4Web Inc.
| | 01:36 | and we have decided that
SP Upgrade is the way to go.
| | 01:39 | And in fact, if you ask a number of Joomla!
| | 01:41 | experts who have been following out on
Twitter, pretty much the consensus is SP
| | 01:45 | Upgrade is a better extension than
jUpgrade, and it works more consistently.
| | 01:49 | You can buy once and you can use it on
many sites, so you don't have to pay this
| | 01:53 | price for every site that you are working on.
| | 01:56 | So I encourage you to go ahead
and pay the price and download this
| | 01:59 | particular extension.
| | 02:01 | Once you've done that, you can go ahead,
and set that on your desktop, here it
| | 02:05 | is right here com_spupgrade, okay.
| | 02:08 | So the next step is to get
this installed into Joomla!
| | 02:10 | So to do that, we're going to
flip to the backend of Joomla!
| | 02:14 | We're going to go to Extensions >
Extension Manager, and I'm going to upload SP
| | 02:18 | Upgrade into Joomla!
| | 02:21 | So I'm going to go to my desktop to get
to the file, and I'm going to choose it
| | 02:24 | here and say Open, and then Upload & Install.
| | 02:28 | And once it's installed, it will
actually give you the screen for installing the
| | 02:34 | particular component, it's also
available here under the Components menu.
| | 02:38 | And in the next video, I'll show
you how to actually use SP Upgrade to
| | 02:42 | migrate your web site.
| | Collapse this transcript |
| Migrating the site to Joomla! 2.5 and checking the site for problems and issues| 00:01 | Now that we've SP Upgrade installed, let's go
ahead and run the migration for our web site.
| | 00:06 | If you don't still have the
installation screen open where it ask for
| | 00:09 | information to run SP Upgrade, you can
get to it by going to Components > SP
| | 00:14 | Upgrade, and you need to fill in the
information here about your Joomla! 1.5 web site.
| | 00:21 | This is not the information about
your 2.5 web site, but your 1.5 web site.
| | 00:26 | You need to go ahead and fill in these blanks.
| | 00:28 | And what if you've forgotten this
information or what if you never had it to
| | 00:31 | start with, because you've gotten this site
from a client who had somebody else build it.
| | 00:36 | Well, you can actually get all of
the information that you need here from
| | 00:39 | your Control Panel.
| | 00:40 | You can go and take a look at the
configuration.php file, and this will have all
| | 00:46 | of the information that
you require inside of it.
| | 00:48 | So if you go to cPanel here and you go
to your File Manager and you scroll on
| | 00:54 | down to configuration.php, and say Edit,
you can view this file right here on
| | 00:59 | your server and this will give you the
information about your database name and
| | 01:03 | your database username.
| | 01:05 | So you can start to fill this out.
| | 01:06 | It's going to be localhost for your Host Name.
| | 01:08 | The User Name will be migrate_
spuser, the Password is down here.
| | 01:15 | Go ahead and Ctrl+C or Command+C to
copy and Ctrl+V or Command+V to paste.
| | 01:22 | The Database Name is migrate_spupgrade.
| | 01:26 | The Table Prefix is jos_, this should be
the correct table prefix for your web site.
| | 01:32 | If you don't know what the prefix is, what're
they talking about, what is this prefix thing?
| | 01:36 | Well that has to do with, inside of
phpMyAdmin, if you scroll in down to the
| | 01:40 | Databases part of your Control Panel
and click on phpMyAdmin, then take a look
| | 01:45 | at your spupgrade Database.
| | 01:47 | You'll see the first four
characters of each database Table is jos_.
| | 01:52 | That is what they're asking
for in terms of the prefix.
| | 01:55 | Remember in Joomla!
| | 01:56 | 2.5, when we installed it, it
actually had a five character prefix that
| | 02:00 | was randomly generated.
| | 02:01 | But in these earlier versions
of Joomla!, it was called jos_.
| | 02:04 | That was the prefix, set by default.
| | 02:08 | Okay, that is all set.
| | 02:09 | Then we need to specify our
Installation Path and it tells us that
| | 02:13 | the destination Joomla!
| | 02:14 | Installation Path right now,
where we are in our Joomla!
| | 02:18 | 2.5 site, is /home/migrate/
public_html/spupgrade. Our Joomla!
| | 02:19 | 1.5 web site is installed
in the root of our web site.
| | 02:27 | So it's actually just /home/migrate
/public_html. No trailing slash.
| | 02:34 | Go ahead.
| | 02:34 | I'm going to highlight those letters,
Ctrl+C or Command+C to copy, Ctrl+V
| | 02:37 | or Command+V to paste.
| | 02:39 | Make sure you don't have an
extra slash on the end.
| | 02:41 | It should be public_html with no slashes.
| | 02:44 | Then scroll on down a little more and it's
going to ask us what we would like to upgrade.
| | 02:48 | Well we want to upgrade absolutely everything.
| | 02:50 | We're going to set everything to Yes
including the Template, we're going to set
| | 02:53 | to Yes, All menus to Yes and All modules to Yes.
| | 02:57 | It's going to ask us for our template name.
| | 02:59 | Well, to get that if you
take a look in your Joomla!
| | 03:00 | 1.5 web site, and you go to Extensions
> Template Manager, look for the name of
| | 03:07 | your custom template, which is right here.
| | 03:09 | You know that because it's labeled
as the Default template and you'll see
| | 03:12 | that the name is inside.
| | 03:13 | So enter the word inside
right here in the blank.
| | 03:16 | Now we're going to hit the Migrate button and
my page here is telling me that I have an error.
| | 03:24 | Although if you take a look at the
screen behind this, there we go, okay.
| | 03:28 | So what just happened here is I just
had tried to do this before and I had
| | 03:32 | entered some information
incorrectly into the screen.
| | 03:35 | I think what just happened here in this pop-
up window was that a cached page just showed.
| | 03:39 | That had information that the migration
was not successful and then once it had
| | 03:44 | actually migrated and generated the
new log file, it just displayed that in
| | 03:47 | this pop-up window.
| | 03:48 | So hopefully if you've entered all
your information correctly, you'll get the
| | 03:52 | same pop-up windows saying SP Upgrade
Results are all good and you won't see any errors.
| | 03:57 | So I'm going to go ahead and close that, and
you'll see here that the upgrade is completed.
| | 04:02 | If we now go to Site > Control Panel
and go to the Article Manager, we should
| | 04:07 | see some articles, which we do right here.
| | 04:10 | We should also see some menu items.
| | 04:11 | If I go to the Main Menu here,
you'll see that we have Menu Items.
| | 04:14 | So let's take a look at the
front end of the web site.
| | 04:16 | If I click on View Site, you'll see
that we do have some content filled in for
| | 04:20 | this web site as well.
| | 04:21 | However, as you take a look at this site,
you'll see that it leaves a lot to be
| | 04:25 | desired relative to our custom template at site.
| | 04:28 | We have some menus here.
| | 04:30 | We're missing content of the Home page.
| | 04:31 | If we take a look at some of the inside
pages like the Products page, our menus
| | 04:35 | aren't configured correctly.
| | 04:37 | What happened to my pictures?
| | 04:39 | There are a lot of issues
that are happening here.
| | 04:40 | I'm going to start to address those
issues in the next few videos, and the
| | 04:45 | very first thing we're going to have
to do is install our custom template,
| | 04:48 | which means that we're going to have to tweak
it a little bit to get it to work with Joomla!
| | 04:51 | 2.5, and I'll cover that in the next chapter.
| | Collapse this transcript |
|
|
5. Preparing Your Custom Template for Joomla! 2.5Downloading the Joomla! 1.5 template to prepare it for Joomla! 2.5| 00:00 | Now that we've installed our Joomla!
| | 00:03 | 2.5 web site and we've migrated over
our data, the next thing that we're going
| | 00:06 | to need to do is to get our custom
template from Joomla! 1.5 into Joomla!
| | 00:11 | 2.5. Sometimes SP migrate brings
this over, and sometimes it doesn't, I
| | 00:16 | haven't really been able to figure
out why it does sometimes and why it
| | 00:19 | doesn't other times.
| | 00:20 | But, you can always move it manually.
| | 00:21 | It's very straightforward, and I am going
to show you the process for doing that now.
| | 00:24 | What you're going to need to do is take
a look at that template and figure out
| | 00:29 | what needs to be adjusted for 2012 and beyond.
| | 00:32 | I built the Chocolate Bliss web site
template back in 2008 when I recorded Joomla!
| | 00:37 | 1.5 Creating and Editing Custom Templates.
| | 00:40 | If you think back to 2008, the
world was a very different place.
| | 00:44 | Chrome was not a popular browser, we
did not have Internet Explorer 9, or even
| | 00:48 | Internet Explorer 8 in those days.
| | 00:49 | The cross-browser testing has
changed a lot over the last four years.
| | 00:54 | We've had different browsers become
more popular and less popular, and
| | 00:59 | what's more, in Joomla!
| | 01:00 | 1.5, the markup was of a significantly
lower quality than what we have in 2.5. Joomla!
| | 01:07 | 1.5 was full of all kinds of nested
tables and it had markup that pertained to
| | 01:13 | the display of the web site.
| | 01:14 | My favorite example of that is the
Random Image module which contained an
| | 01:18 | attribute in it and a div
tag that said align=center.
| | 01:22 | Rather than doing that with CSS, it was
hard-coded into the HTML and it was very
| | 01:27 | difficult to get rid of.
| | 01:29 | At this point in time, a very devoted
team of volunteers has come through all of
| | 01:33 | the HTML output inside of Joomla!
| | 01:35 | 1.6, 1.7, and 2.5, gotten rid of all
those table-based layouts, gotten rid of
| | 01:41 | all of that display code that happened
to be in the HTML, should have been in
| | 01:45 | the CSS, and really
cleaned things up tremendously.
| | 01:48 | So that's the good news.
| | 01:50 | The bad news for you as having a custom
template is that what happens is, your
| | 01:55 | CSS is likely to break when you put
it into the web site this time around,
| | 01:58 | because the markup is changed, and
when the markup changes, the order of your
| | 02:02 | classes and HTML tags that are
located inside of your CSS will also change.
| | 02:08 | So what we're going to do in this
chapter is we're going to take the Joomla!
| | 02:12 | 1.5 template, make some quick
updates to make it compatible with Joomla!
| | 02:17 | 2.5, and reinstall it.
| | 02:19 | The following chapter, we're going to
get all of our modules on the web page,
| | 02:22 | and make sure that we're displaying
all the information we need to display.
| | 02:25 | The site will probably look pretty ugly
in the meantime, but I'm doing that on
| | 02:29 | purpose, because if you
can't see it, ya can't style it.
| | 02:32 | And so once we have all of the data
on the web site, everything we need to
| | 02:36 | see, then in the final chapter, I'll
go through and then style everything so
| | 02:40 | that it looks good again.
| | 02:42 | So that's the approach that we're going to
take to this for the rest of this course.
| | 02:45 | So we're going to start
with grabbing our Joomla!
| | 02:48 | 1.5 template from the old web site and
downloading it to our computer, so that
| | 02:53 | we can start editing it.
| | 02:55 | So to do that, I'm here in my Control Panel
and I am going to go into my File Manager.
| | 03:00 | And from the File Manager,
remember that right directly inside of the
| | 03:04 | public_html folder, and that we have
configured this, this is our Joomla! 1.5 web site.
| | 03:09 | The Joomla!
| | 03:09 | 2.5 web site is located
inside of the spupgrade folder.
| | 03:13 | So here in my Joomla!
| | 03:13 | 1.5 site, I am going to go into my
templates folder and I'm going to go to my
| | 03:20 | inside folder here which is my
template, double-click on that.
| | 03:22 | Then, I am going to select all of the
files here and I'm going to compress them
| | 03:28 | or zip them up, and so that
went ahead and compressed that.
| | 03:32 | And if I hit Reload, you will
see that I have a zip file here.
| | 03:35 | I'm going to highlight that now and I'm
going to download that to my computer. Okay.
| | 03:42 | So I am going to drag that css.zip that
I just downloaded to my desktop and I am
| | 03:48 | going to work with it from there.
| | 03:49 | My zipped file is called css.zip.
| | 03:52 | I think that's because CSS is the first
folder in the listing of all the files
| | 03:57 | and folders here inside of this directory.
| | 04:00 | Your zip file may be called
something entirely different.
| | 04:02 | Truthfully, it does not matter what
the name of the zip file is, just that it
| | 04:06 | contains the folder css, the folder
images, the favicon, the index.php, your
| | 04:12 | template_thumbnail, and templateDetails.xml.
| | 04:14 | Provided all of those things are in
place, you are in good shape, and you've
| | 04:18 | downloaded it here to your Downloads
folder, transfer it to your desktop, and in
| | 04:22 | the next video, we will start
editing the files that are found in there.
| | Collapse this transcript |
| Correcting the index.php file| 00:00 | In the last video, we downloaded the
Template folder from our Joomla! 1.5 web site.
| | 00:06 | We zipped up the contents in that
folder, and downloaded it here, and that is
| | 00:09 | that file you see here
on the desktop called CSS.
| | 00:12 | I am going to double-click on this and
you'll see that I have a bunch of folders
| | 00:16 | and files inside of that zip.
| | 00:18 | What I'm going do now is I am going to
make a new folder on my desktop, and I
| | 00:23 | am going to call it inside, which is my inside
template, that was the name of this template.
| | 00:27 | I'm going to highlight all of the items
inside of my zipped CSS file, and I am
| | 00:33 | going to drag them into the inside file.
| | 00:35 | And at that point, I'm done with css.zip.
| | 00:38 | Now, when I double-click on the
inside folder here, I should see all of the
| | 00:43 | files that were inside of that css.zip file.
| | 00:45 | And what you need to do now is I'm going
to edit this index.php as a first step.
| | 00:52 | I happen to be running Dreamweaver
on this computer, so I'm going to use
| | 00:55 | Dreamweaver to edit this file.
| | 00:57 | If you don't have Dreamweaver, you
don't have to use Dreamweaver, you can use
| | 01:01 | anything that will edit a text file.
| | 01:03 | So I'm going to double-click on index and
it's going to tell me it's a read-only file.
| | 01:08 | I am going to say make it writable and
you'll see that we don't have something
| | 01:12 | particularly fabulous to look at.
| | 01:13 | But, if we switch over to the Code view,
you can take a look at what makes up
| | 01:18 | this particular document.
| | 01:20 | Now, one thing we need to be sure to
change in this particular document is to
| | 01:23 | make sure that the preamble up here on
the top of the page complies with Joomla!
| | 01:27 | 1.6, 1.7, and 2.5's latest requirements.
| | 01:32 | So, to do that, I'm going to get rid
of this comment that's located here, and
| | 01:38 | I'm going to get rid of this
or die( 'Restricted access' ).
| | 01:44 | So PHP defined all on one line
is exactly what it needs to say.
| | 01:49 | That will match with the
new standard for Joomla!
| | 01:52 | 2.5.So, once you have done that, go
ahead, and say File > Save and we are done
| | 01:59 | with our index.php file and we're
ready to go in and edit our XML file.
| | Collapse this transcript |
| Correcting the XML file| 00:00 | Now that we've modified our index.php
file, the next thing we need to do is take
| | 00:05 | a look at the XML file templateDetails
and make adjustments for it so that this
| | 00:10 | is updated for Joomla!
| | 00:12 | 2.5.So I have opened up templateDetails.
xml from my inside folder on my Desktop,
| | 00:18 | and from my Exercise Files folder,
I've opened up templateDetails_2.5.xml.
| | 00:25 | This is an XML file for template
details that comes from The Beez 2.0 template
| | 00:30 | that ships with Joomla!
| | 00:32 | And what we need to do now is take the 2.
5 features out of this XML file and put
| | 00:38 | them into our Joomla!
| | 00:39 | 1.5 XML file to bring it up
-to-date for Joomla! 2.5.
| | 00:44 | So we're going to start with these
three lines on the top of the screen.
| | 00:49 | So these three lines basically
state that this is an XML document.
| | 00:53 | The second line states that this is the
document type, what kind of XML document is it.
| | 00:58 | Well, it's a Joomla! 1.5 template.
| | 01:00 | And the third line indicates that this
install tag is a XML tag that was used by Joomla!
| | 01:06 | to indicate we're
installing a Joomla! 1.5 template.
| | 01:09 | Obviously, none of those lines are
going to be relevant to us in Joomla!
| | 01:11 | 2.5 so you can highlight these three
lines at the top of the screen and erase
| | 01:17 | them by clicking the Delete key.
| | 01:19 | Over here in the templateDetails_2.5
file, we're going to take the first three
| | 01:23 | lines from this particular XML file,
highlight them and copy, and paste them
| | 01:28 | into the templateDetails.xml file.
| | 01:32 | These three lines say exactly
the same thing as the Joomla!
| | 01:34 | 1.5 first three lines said, only in this case
it states that this is an XML file in line 1;
| | 01:40 | in line 2, it states that
this is a Joomla! 2.5 template;
| | 01:44 | and in line 3, it starts with a new tag.
| | 01:47 | Note it's not the install tag anymore,
it's now the extension tag. Okay.
| | 01:52 | So what that means is, since we've
opened a tag called extension, we need to
| | 01:57 | close a tag called extension.
| | 01:59 | And if we scroll all the way down to
the bottom of the page, you will notice
| | 02:02 | that we have a /install tag down here.
| | 02:05 | Make sure you get rid of that, and
then from the XML file, scroll all the way
| | 02:10 | down to the bottom, you will see our
very last tag here is the /extension tag.
| | 02:14 | You can work your way back from some
of these other closing tags, but you'll
| | 02:17 | discover that from /config here, when
you scroll back on up through this XML
| | 02:22 | file, there's a config
tag that starts at line 58.
| | 02:26 | The config tag has to do with
all of the template parameters.
| | 02:29 | And our custom template doesn't have
any parameters, so we don't even need the
| | 02:32 | config section of this XML file.
| | 02:35 | So back here in templateDetails.xml,
I'm going to Ctrl or Command+V to put in
| | 02:40 | that closing /extension tag.
| | 02:42 | The last thing we need to do before we
close out of these XML files is make sure
| | 02:46 | that there are no new files
that are inside of Joomla!
| | 02:49 | 2.5 that were not included in Joomla! 1.5.
| | 02:52 | And the answer to that is there's only
one file that's like this, and that is
| | 02:57 | the template_preview.png file.
| | 03:00 | The template_preview.png file is
a large version of your template.
| | 03:05 | It's used in the Template Master screens,
and there's a thumbnail that's there
| | 03:10 | next to the name of the template, and
when you click the thumbnail, it opens
| | 03:12 | up as a large version in a shadow box, so that
you can see the details behind that template.
| | 03:18 | So what we're going to do is
make sure that we make a call for a
| | 03:22 | template_preview.png file here inside
of our XML file and then we're going to
| | 03:28 | create that image in the next video.
| | 03:30 | So inside of templateDetails_2.5, what
I am going to do is scroll on down and
| | 03:36 | find that line template_preview.png, go
ahead and highlight it, and click Ctrl
| | 03:41 | or Command+C to copy.
| | 03:43 | Then, go on over to our other
templateDetails file and we're going to scroll
| | 03:47 | down inside of the files tag,
probably just above where template thumbnail
| | 03:52 | is called, go ahead and press Ctrl
or Command+V. This will now be calling
| | 03:57 | for a template_preview.png file, and we're
going to create this file in our next video.
| | 04:04 | Go ahead and File > Save.
| | 04:07 | And you can close out of templateDetails_2.5.
| | 04:10 | You don't need to do anything with this.
| | 04:11 | I only included this file, so that you
had something to copy and paste from.
| | 04:15 | And once you've saved out
templateDetails.xml to your inside folder, which is
| | 04:20 | exactly where it came from to start
with, you are all set with your XML, and
| | 04:23 | we're ready to move on to creating
the template_preview.png graphic in the
| | 04:28 | next video.
| | Collapse this transcript |
| Creating files new to Joomla! 2.5| 00:00 | In Joomla! 2.5, there is a new file that's
present that was not present in Joomla!
| | 00:05 | 1.5 templating, and that file
is called template_preview.png.
| | 00:11 | This is a large version of the template_
thumbnail.png which has always been in Joomla!
| | 00:16 | And the thumbnail is a small,
obviously thumbnail sized version of your
| | 00:22 | template, just a little picture, so you
get a sense of what's there. In Joomla!
| | 00:25 | 2.5, if you go into your Template Master,
so if you go to Extensions > Template
| | 00:30 | Manager, and then click on the
Templates tab that's up on the top of the page,
| | 00:35 | you'll switch over to the Template
Master screen, and you'll see the thumbnails
| | 00:39 | all lined up in a row there.
| | 00:40 | If you click on one of those, you'll
get a large version of that template, so
| | 00:44 | that you have a really good look at
what exactly that template involves.
| | 00:48 | So, in order to create that template
preview image, what I'm going to do is
| | 00:53 | I've got my Joomla!
| | 00:53 | 1.5 site set up here, and I'm just
going to take a screenshot of this.
| | 00:57 | Then, what we'll do is we'll save
that into our inside folder that's on the
| | 01:01 | desktop where we've been
assembling files for this template.
| | 01:04 | So, what I'm going to start by doing is
taking a screenshot of this particular screen.
| | 01:08 | For PC people, it's very simple;
| | 01:11 | hold down your Alt key, Print Screen
button which is in the upper-right corner
| | 01:16 | generally of your keyboard,
and that's all you need to do.
| | 01:20 | It will take a screenshot of the screen
and it will save it on to your clipboard.
| | 01:23 | Then, we're going to go ahead and open
up Photoshop and we'll paste it into a
| | 01:26 | new document in Photoshop.
| | 01:27 | Mac people, you need to hold down
Command+Shift+4 followed by the Spacebar, and
| | 01:36 | then click on the window where
you want to take the screenshot.
| | 01:38 | This will save an image down to your desktop.
| | 01:42 | Once that image is on your desktop,
you'll need to open that image inside of
| | 01:45 | your software whether that's Photoshop,
GIMP, Fireworks whatever it happens to
| | 01:49 | be, and from there, you can work with the file.
| | 01:53 | But, for the PC people who have
pressed Alt, Print Screen, and you've taken a
| | 01:57 | screenshot of the screen, we'll now go
into Photoshop and we'll say File > New,
| | 02:01 | Photoshop itself is smart enough to know exactly
what size that screenshot is on your clipboard.
| | 02:07 | So it will suggest a size that is in
fact exactly the correct dimensions.
| | 02:11 | We'll go ahead and say OK, and then I'm
going to hit Ctrl+V.Mac people, if you
| | 02:16 | go to File > Open, browse to your
desktop, choose the file that was created
| | 02:20 | for you as a screenshot on your
desktop, you should be at the same place at
| | 02:24 | this point in time.
| | 02:25 | Now, I don't want to have this
browser Chrome show up on my screenshot.
| | 02:30 | Chrome is all of the stuff that goes
around the browser, make the little title
| | 02:34 | bar and the navigation bar and so forth.
| | 02:37 | So I'm going to do a quick crop of this.
| | 02:39 | Photoshop has a Crop tool over here on
the left side of the screen, and I'm just
| | 02:43 | going to click and drag to sort of
trim up this image a little bit, make it a
| | 02:47 | little bit more attractive, kind of like that.
| | 02:50 | We don't have to include everything down
here on the bottom, maybe I will go like that.
| | 02:55 | And just hit my Enter key in order
to make that image exactly as it is.
| | 03:00 | So, now all I need to do is
just save this for the web.
| | 03:03 | So I'm just going to go to File > Save
for Web & Devices, and this is going to
| | 03:07 | show me the screenshot PNG-8, and
that looks pretty good, just like that.
| | 03:16 | It does need to be a PNG file,
it should not be a JPEG or a GIF.
| | 03:21 | It has to be a PNG.
| | 03:23 | With the resolution that I'm using
here on my computer, I can't see the OK
| | 03:26 | button down on the bottom.
| | 03:27 | So I'm going to click down here, and try
to tab down to my OK button. Here we go!
| | 03:35 | And we can save the optimized image now
down to our desktop inside of our Inside
| | 03:40 | file, and we're going to call this
template_preview.png, go ahead and say Save.
| | 03:49 | So now you have your Template Preview
and your Template Thumbnail, we called out
| | 03:54 | the template preview as an image
earlier in the XML file and we're done with
| | 03:58 | Photoshop at this point.
| | 03:59 | We've made our screenshot, we've
saved it on down to our Inside folder.
| | 04:03 | The next thing we need to do is get this all
prepped and install it inside of Joomla! 2.5.
| | Collapse this transcript |
| Installing the revised template in Joomla! 2.5| 00:00 | So in this chapter we downloaded
the Inside template from our Joomla!
| | 00:06 | 1.5 web site, we adjusted the
index.php file, we adjusted the
| | 00:09 | template_details.xml file and we
created a template_preview.png file.
| | 00:16 | And they're all located now inside of this
Inside folder that's located on our Desktop.
| | 00:21 | We're now at the point where we're
ready to zip together all those files and
| | 00:24 | install this into Joomla!.
| | 00:25 | So if you double-click on the Inside
folder, what you should be able to do is
| | 00:29 | just highlight to collect
all of your files and folders.
| | 00:33 | And then on the PC I'm just going to right-
click and say Send to > Compressed or Zipped folder.
| | 00:38 | For you Mac people, you'll highlight
all your files and send them to a zipped
| | 00:42 | folder as well, and we're going
to go ahead and give this a name of
| | 00:45 | inside.zip, which is great and I'm
going to drag that out here to my Desktop
| | 00:52 | so I can find it later.
| | 00:55 | Now I'm going to hop
into the back-end of Joomla!
| | 00:57 | and I just need to install my template.
| | 00:59 | So I'm going to go to Extensions >
Extension Manager, and I'm going to browse
| | 01:04 | for my inside.zip file, make
sure you don't grab the folder.
| | 01:10 | Go ahead and say Open, and then
we're going to Upload & Install, and you
| | 01:14 | should get a successful message
saying that installing the template was
| | 01:18 | successful, hurray!
| | 01:19 | Okay, so now that it's installed
we need to assign it as the default
| | 01:22 | template for the web site.
| | 01:23 | So to do that we're going to go to
Extensions > Template Manager, and I'm going
| | 01:28 | to assign inside as the default template.
| | 01:32 | Now when I look at the front-end of
the web site, which I can do by clicking
| | 01:34 | this View Site link up here in the
upper right-hand corner, we should see the
| | 01:39 | Chocolate Bliss web site.
| | 01:40 | And this looks surprisingly good considering
that we've just ported this over from Joomla!
| | 01:45 | 1.5.
| | 01:45 | You can go ahead and click through the
links on the web site and you'll see that
| | 01:50 | well it's maybe leaves a little bit
to be desired in terms of its layout.
| | 01:53 | So you'll click on through all of this
stuff here and you'll see that we have
| | 01:58 | quite a bit of little things here
that we're going to need to clean up.
| | 02:00 | So some of this has to do with the fact that
this is a brand-new fresh Joomla! install.
| | 02:06 | So you see here that I'm on Ordering page.
| | 02:08 | We have some details that are showing
here like the category of Ordering, the
| | 02:12 | Published date that was written by
administrator and the number of Hits.
| | 02:15 | These are all controlled through the
article options inside of the Article
| | 02:19 | Manager in Joomla!, so we'll
need to turn all of that off.
| | 02:21 | We'll turn off the put an email icon as well.
| | 02:24 | We also have this double header
problem which we saw with jUpgrade.
| | 02:28 | This is where we have the page headers
that are turned on as well as the article
| | 02:32 | titles, and so we'll need to
make sure that those are turned off.
| | 02:36 | The word Ordering here is currently
a link, I think that's because that's
| | 02:39 | configured that way in the article
options inside of Joomla!, so we can turn off
| | 02:42 | that link which will get rid of that underline.
| | 02:45 | And as we scroll on through the site
here, we have some navigation down here at
| | 02:49 | the bottom, we'll get rid off we'll
turn that off in the article options.
| | 02:52 | And then we have our Contact Form page,
this is setup by default with those
| | 02:56 | sliding panels inside of Joomla!.
| | 02:59 | And the formatting for the form isn't so
pretty, so we're going to need to clean that up.
| | 03:03 | The formatting for the random image
over here on the side is now smashed into
| | 03:07 | the side here, so we're
going to need to clean that up.
| | 03:10 | We also have the Search, Search,
SEARCH thing going on here at the top of the
| | 03:13 | screen that we had previously as well.
| | 03:16 | And of course we have no content on the
Home page, so we're going to have to get
| | 03:19 | some content for the homepage.
| | 03:20 | So we have a number of issues that
we're going to need to clean up as far as
| | 03:23 | the site is concerned.
| | 03:25 | So in the next chapter what I'm going
to do is I'm going to make sure that all
| | 03:29 | of the modules are in place and
in the right module positions.
| | 03:33 | And we're going to change some of
Joomla!'s parameter settings and options
| | 03:37 | settings to make sure that we're
displaying the right information on the web site.
| | 03:40 | I'm going to ignore all of these
formatting issues for the moment.
| | 03:44 | In the final chapter of this video, I will
address the CSS and we'll clean all that up.
| | 03:50 | But remember, that we can't address how it
looks until we have the content on the page.
| | 03:56 | So, if we can't see the
content, we can't style it.
| | 03:59 | That's why we're going to work on making
sure we have everything on the site, in
| | 04:02 | place and ready to style before we
start messing around with the CSS.
| | 04:06 | So that's what's coming up in the
next chapter, I'll see you there.
| | Collapse this transcript |
|
|
6. Tweaking Extensions and Options for Joomla! 2.5Adjusting article options| 00:00 | Now that we've got our template
installed on the web site, it's time to start
| | 00:04 | making some adjustments to the content here.
| | 00:06 | And we want to do that because we want
to be sure that we wouldn't have content
| | 00:12 | in place that we're ready to style when
we're ready to start tackling the CSS.
| | 00:16 | I'm looking at the Products page of the
web site at the moment and you can see
| | 00:19 | that this is quite a mess,
there's just stuff everywhere.
| | 00:23 | This is actually a lot of defaults from Joomla!
| | 00:26 | that are being written out here
including this Detailed section on top, the
| | 00:30 | Category, the Published date, the
Written by and the Hits, printer friendly and
| | 00:34 | email icons, the navigation on the bottom.
| | 00:37 | These are all things that are
control under article options.
| | 00:40 | So I'd like to go through those article
options and turn those off and see what
| | 00:44 | we can adjust using
article options in this video.
| | 00:47 | So I'm going to jump
into the back-end of Joomla!
| | 00:48 | and I'm going to go to the Article
Manager and inside of the Article Manager in
| | 00:54 | the upper right-hand corner there's a
button for Options go ahead and click that
| | 00:58 | button and this should open up in the
Articles tab right here, so we're going to
| | 01:03 | make some adjustments to this.
| | 01:05 | If you'd like to know more about the
screen and how options work inside of Joomla!
| | 01:09 | and so forth I've covered this
in a lot of detail in Joomla!
| | 01:11 | 2.5 Essential Training.
| | 01:13 | So what I'm going to do is I definitely
want the title to show on every page my
| | 01:17 | article title, but I don't
necessarily wanted to be a link.
| | 01:20 | If I have Intro Text I would like that
to show, but I don't need to show the
| | 01:23 | category or make it a link.
| | 01:26 | Scrolling on down here I don't need to
show an Author, because it doesn't matter
| | 01:30 | who the author is or a Publication Date.
| | 01:32 | Navigation is the links that occur down
here in the bottom of the article where
| | 01:36 | it says Previous and Next.
| | 01:38 | Obviously we'd either need to style those
or we need to hide them one or the other.
| | 01:42 | I'm going to just hide them.
| | 01:43 | I am going to Show Read More
link and a title with that.
| | 01:47 | Then we get down here to the Icons and the Hits.
| | 01:50 | I'm going to Hide the icons, Hide the Printer
Icon, Hide the Email Icon and hide the Hits.
| | 01:54 | Go ahead and say Save & Close and
let's refresh the front-end of the web site
| | 01:58 | and see how far we've
gotten. Oh so much better.
| | 02:01 | We still have this problem with
the double titles in the head here.
| | 02:04 | That is coming from the page headers
having been turned on for some reason in
| | 02:09 | addition to an article title showing on
the top of the page, but we'll address those.
| | 02:14 | If I take a look through some of the
other pages here this is a page with
| | 02:17 | multiple pages of content.
| | 02:18 | We'll need to tweak that and do some
styling with it probably in a later video.
| | 02:23 | But, the other pages here as I'm flipping
through them, they're looking pretty good.
| | 02:28 | So it looks like changing our
article options has really adjusted quite a
| | 02:33 | bit right here and certainly made these pages
look less complicated right off the bat that.
| | 02:38 | It's not to say that we're not
completely done here with these pages but we're
| | 02:42 | definitely on the road to
getting them under control.
| | Collapse this transcript |
| Displaying content on the homepage| 00:00 | I'm looking at our Joomla!
| | 00:02 | 1.5 site and if you take a look at the
Home page you see that there are three
| | 00:05 | elements that are present here;
| | 00:07 | there is the article on the side here Bliss No.
| | 00:09 | 5 All Natural Chocolate and then on
the right side of the screen we have a
| | 00:13 | module for Our Featured Projects
and we have a module for Login.
| | 00:17 | So, what we would like to do
of course is get our Joomla!
| | 00:20 | 2.5 site to look very similar to this.
| | 00:23 | If I flip over to my Joomla!
| | 00:24 | 2.5 site I see absolutely
nothing on the Home page.
| | 00:28 | We have some adjustments we need to make.
| | 00:30 | I'm going to start by displaying the
article that is supposed to be on this homepage.
| | 00:36 | So to do that I'm going to
jump into the backend of Joomla!
| | 00:39 | 2.5 and I'm going to go to my Article
Manager and I'm going to find the article
| | 00:45 | that was on my Home page and
it's this one right here Bliss No.
| | 00:49 | 5 All Natural Chocolate in
the Uncategorized category.
| | 00:53 | So, if I make it appear on the Home
page all I need to do is click on the
| | 00:55 | Featured icon and in theory it should
just show right up on the Home page.
| | 01:00 | If I hit Refresh we'll see that in fact it does.
| | 01:03 | Now we have a double title problem here
which is similar to what we see on other
| | 01:07 | pages on this site where we
have the products twice here.
| | 01:11 | This is the same problem with the homepage we
have Home as a page heading and we have Bliss No.
| | 01:18 | 5 All Natural Chocolate as the article title.
| | 01:20 | So we're going to have to
go back and turn those off.
| | 01:23 | We're also missing the modules that
are on the right side of the page, but if
| | 01:27 | you take a look through the rest of the
site you'll see that we have some other
| | 01:30 | issues with modules.
| | 01:31 | Here on the Products page we should be
seeing secondary navigation here only,
| | 01:35 | not the full navigation.
| | 01:36 | Right now we have one set of
navigation going across the top and that exact
| | 01:40 | duplicate navigation going down to
the left side of the screen, which is a
| | 01:43 | little confusing, definitely redundant.
| | 01:45 | That's a little bit more obvious on
the Health Benefits page where that
| | 01:48 | really becomes obvious.
| | 01:50 | So we need to get rid of that.
| | 01:51 | We need to adjust our breadcrumb, so
that it doesn't say, You are here, because
| | 01:55 | if you take a look at the Health
Benefits page here on the old site, you'll see
| | 02:00 | that it doesn't have You
are here in front of it.
| | 02:02 | We are of course, we are going to
have to put in a Quote module again is
| | 02:07 | something else that we're going to
have to do, and we're going to have to
| | 02:11 | eventually change this little orange triangle here
that goes in between the breadcrumbs. On the Joomla!
| | 02:17 | 1.5 site it is a nice hot pink
that matches the rest of the site.
| | 02:22 | Also on the top here we have this
Search Module that's the Search, Search,
| | 02:27 | Search thing going on.
| | 02:28 | Again, this is the same thing that
we saw in the jUpgrade portion of this
| | 02:32 | course, so we're going to
want to fix all of those things.
| | 02:34 | I'm going to cover how we're going to
take care of the site modules in the
| | 02:38 | next video.
| | Collapse this transcript |
| Reviewing site modules| 00:00 | So we know that we are missing a couple of
modules here on the homepage. On our Joomla!
| | 00:05 | 1.5 web site, if I take a look at the
homepage, you'll see that there are two
| | 00:09 | modules that are on the
right side of the screen;
| | 00:12 | Our Featured Products and Login.
| | 00:14 | And those modules are not present
here at all on our migrated web site.
| | 00:20 | So that's something that I
am going to want to turn on.
| | 00:22 | So let's start by going into the
Module Manager, Extensions > Module
| | 00:25 | Manager, and we are going to take a quick look
at all the modules that we have present here.
| | 00:30 | We saw with jUpgrade that some of our modules
had changed positions as part of the upgrade.
| | 00:36 | We had additional modules that were
here that suddenly appeared, we are not
| | 00:40 | really sure where they came from or why,
and so I wanted to take a quick look at
| | 00:46 | all the modules that we have here in the list.
| | 00:48 | What you'll see is we have three
extra modules that show up here;
| | 00:51 | Breadcrumbs, Main Menu, and Login Form.
| | 00:54 | These are default modules that come with
Joomla!, so when we did our default Joomla!
| | 00:59 | 2.5 installation, even though we
didn't put any sample data, we still got
| | 01:03 | these three modules.
| | 01:05 | And they are assigned to positions that
correspond with the Beez 2.0 template.
| | 01:08 | We don't need these modules at all, so I
am just going to delete them by putting
| | 01:12 | those three check marks there
and hitting the Trash button.
| | 01:15 | The next thing I want to take
care of is this module right here.
| | 01:19 | What You're Saying about Chocolate Bliss No.5.
| | 01:22 | It's unpublished, and if you take a
look at the Type column, you'll see that
| | 01:26 | there's nothing specified.
| | 01:27 | That's because this was our quote
module in the old web site and the quote
| | 01:32 | module did not get ported over.
| | 01:34 | So, we have a module that's
available but no type assigned to it.
| | 01:39 | It's nice to remind us that we need to
put quotes in and we will in a future video.
| | 01:43 | But for right now, we aren't going to need
this and it's probably just going to be confusing.
| | 01:47 | So let's put a check mark next to that
and we'll hit the Trash button. Okay.
| | 01:50 | So now, we need to make sure that Our
Featured Products and Login are assigned
| | 01:56 | to the Home page of a web site.
| | 01:57 | So let's go into Our Featured Products
by clicking on it and you'll see that it
| | 02:04 | should only be assigned to the Home
page of the web site, and if I flip through
| | 02:07 | my menus here, it looks like it's not
assigned to any page of the web site.
| | 02:12 | So I'm going to check off the
Home page here and say Save & Close.
| | 02:16 | I am going to repeat that process for
the Login form, click on Login to edit
| | 02:21 | it, scroll on down, and here on the
Main Menu just check off the Home page link
| | 02:27 | and say Save & Close.
| | 02:29 | Now when I refresh the homepage of the
web site, we have content on the left
| | 02:35 | side of the screen and we have
our two modules on the right.
| | 02:37 | One thing you might notice is that the
display here for Our Featured Products
| | 02:42 | isn't exactly the same as it
was for the Joomla! 1.5 site.
| | 02:47 | See how we are missing those colors
behind Hot Chocolate, Chocolate Truffles,
| | 02:51 | see we don't have them over here.
| | 02:52 | That's likely because the HTML that
drives that module has changed and that's
| | 02:57 | a CSS problem that we're going to have to fix,
and we'll do that in a couple of chapters.
| | 03:01 | So the next problem I want to deal
with it, let's look at the Products page.
| | 03:06 | On this page, we should have sub navigation.
| | 03:08 | In other words, the items there from
Product Sampler down through Pastilles,
| | 03:13 | those should be showing up in the left column.
| | 03:16 | But on a page like Health Benefits,
which does not have any sub navigation, you
| | 03:22 | should not have a menu over
on the left side of the screen.
| | 03:26 | Okay, what we need to do is edit our
sub navigation module to find out what's
| | 03:31 | going on with that and see if
we can adjust the issues there.
| | 03:35 | So in the backend on Joomla!, in our
Module Manager, we are going to go to
| | 03:39 | subnav by clicking on it.
| | 03:42 | And it looks like what the problem is,
is when this was ported over, it was
| | 03:46 | set to a Start Level of 1, in other words,
the top-level navigation like Home and About.
| | 03:51 | It should be set to a Start Level of 2 instead.
| | 03:54 | So I am going to change
this to a Start Level of 2.
| | 03:58 | Let's also take a look at the page assignment.
| | 04:00 | So right now, this is assigned to every
page of the web site except for the Home
| | 04:07 | page and the Site Map.
| | 04:09 | So where we'd really like the
navigation to show up is actually just on the
| | 04:13 | Products portion of the web site.
| | 04:15 | So what I am going to do is I am
going to hit this Toggle Selection button,
| | 04:18 | that'll pretty much unselect everything.
| | 04:20 | I don't want it on the Home page, but I do want it
on all of these Product pages here. There we go.
| | 04:30 | And I don't want it on any of these other pages.
| | 04:33 | I don't want it on the Site Map. Okay.
| | 04:36 | So now, if I hit Save &
Close and I refresh that Joomla!
| | 04:41 | 2.5 web site, I now have no navigation
on the left on the Health Benefits page,
| | 04:46 | which is exactly what we want, and
on the Products page, I have just my
| | 04:51 | secondary navigation.
| | 04:52 | So that cleaned up really, really nicely.
| | 04:55 | That takes care of that problem.
| | 04:56 | The last thing we need to deal with is
the Breadcrumb and the words You are here
| | 04:59 | that show up here in front of the Breadcrumb.
| | 05:02 | The words You are here is a
feature that was added in Joomla!
| | 05:05 | 1.6, 1.7 and 2.5, it wasn't present in 1.5.
| | 05:10 | So we are going to go ahead and turn that off.
| | 05:12 | So in the backend of Joomla!
| | 05:13 | we are going to go into our
Breadcrumbs Module and we're going to change Show
| | 05:18 | "You are here" to No and then say Save & Close.
| | 05:22 | And now when we refresh the front
end of our web site again, we have the
| | 05:25 | Breadcrumb that looks more closely to
what we had on our Joomla! 1.5 web site.
| | 05:31 | We do still need to change that
triangle image which I'm going to do in the
| | 05:35 | next video.
| | Collapse this transcript |
| Adjusting the breadcrumb arrow| 00:00 | One of the other differences we need
to address with the Breadcrumb is that
| | 00:04 | here on our new Joomla!
| | 00:06 | 2.5 site we have an orange separator
between the word Home and Products, I am on
| | 00:10 | the Products page here.
| | 00:12 | And when I take a look at the Joomla!
| | 00:13 | 1.5 web site, it was a pink arrow.
| | 00:16 | So what's the difference
and how do we resolve that?
| | 00:18 | One of the things I love about
Firefox is the ability to right-click or
| | 00:23 | Ctrl+Click on any image and in the menu
that comes up here, I can view can this
| | 00:29 | image and it'll put it in its
own Browser window just like this.
| | 00:34 | So this tells me that there's a pink
arrow here and it tells me the path to that
| | 00:37 | arrow across the top in
the bar here for the URL.
| | 00:41 | Let's do the same thing over
on our Joomla! 2.5 web site.
| | 00:45 | When I right-click on this image and I
say View Image, it shows me that the path
| | 00:52 | to the arrow for the Breadcrumb is
now in a totally different location.
| | 00:56 | See how it's here inside of migrate/
spupgrade/media/system/images/arrow.png,
| | 01:05 | whereas before we had it in images/M_images.
| | 01:09 | And that was actually some place that
you could upload to the media manager.
| | 01:13 | This location the new
location that is no longer true.
| | 01:17 | So what we're going to need to do is,
we are going to grab that pink arrow and
| | 01:21 | save it down to our Desktop.
| | 01:22 | And then we're going to go in
through our Control Panel, through our File
| | 01:25 | Manager and upload that pink arrow
into the new location where arrows are
| | 01:30 | supposed to go to display in the
Breadcrumb, and then we will have a pink
| | 01:34 | breadcrumb on our new Joomla! 2.5 site as well.
| | 01:37 | So we'll start by, let's
download our pink arrow here.
| | 01:40 | If I just right-click or command click
on the pink arrow and I say Save Image
| | 01:45 | As, I will save this down
to my Desktop. There we go.
| | 01:52 | Now what I'm going to do is I am going to go
to this location inside of my Control Panel.
| | 01:59 | And you should have in your
path that what will be common is
| | 02:03 | media/system/images.
| | 02:05 | The first part of it may be somewhat
different because you're going to be
| | 02:09 | working on your own web
host in a different location.
| | 02:11 | So I'm going to open up the File Manager,
go ahead and click that and I'm going
| | 02:17 | to go into spupgrade don't forget, and
then I'm going to go into Media, then I'm
| | 02:23 | going to go into the System folder
and then I'm going to go into images.
| | 02:27 | And from here there are lots
and lots and lots of images.
| | 02:30 | What I'm going to do with the arrow image
that's already here is I'm going to rename it.
| | 02:34 | You could just delete it but if you
ever want to go back to that orange arrow
| | 02:37 | again or remember what the original was,
it might be helpful to save a copy,
| | 02:42 | and considering it's only 118 bytes, it's just
not going to kill you to keep it on your server.
| | 02:47 | So I'm going to click on this and hit
the Rename button up here on the top and
| | 02:51 | I'm going to rename this to oldarrow.png.
| | 02:54 | And now I'm going to upload my new
arrow, the pink one into this location.
| | 02:59 | So I'm going to click on my Upload
button here, browse to my Desktop where I can
| | 03:05 | find my arrow icon and it's going
to upload pretty much immediately.
| | 03:12 | When I refresh my page over here where
the old orange arrow used to be and I hit
| | 03:17 | Refresh you'll now see that it's a
pink arrow, and when I hit the Back button
| | 03:21 | and go back to my web site it's likely
that you're gong to still see an orange
| | 03:26 | arrow because the whole page has been
cached by the browser, so hit your Refresh
| | 03:29 | button and you should now see
a pink arrow on your web site.
| | 03:33 | If you saw a pink arrow when you are
in this display, in other words you were
| | 03:39 | just looking at the arrow image and it was pink.
| | 03:42 | But you don't see it when
you come back to Joomla!
| | 03:44 | here, even after you've hit the
Refresh button, it's likely that your
| | 03:47 | browser has cached some images and
what you're going to need to do is clear
| | 03:51 | your browser's cache.
| | 03:52 | The way you do that varies
with what browser you're using.
| | 03:55 | But clear the browser's cache and then
hit the Refresh button one more time and
| | 03:59 | you should see the pink arrow.
| | 04:00 | So that's how we've changed our
breadcrumb arrow inside of Joomla! 2.5.
| | Collapse this transcript |
| Adjusting page headers| 00:00 | The next problem I'd like to fix on this
web site is the double page title problem.
| | 00:05 | So, on the homepage, we have
something that says Home, plus Bliss No.
| | 00:08 | 5 All Natural Chocolate.
| | 00:09 | On the Products page we
have the word Products twice.
| | 00:11 | Where is that coming from and why?
| | 00:13 | Well, what's happening is SP Upgrade
has turned on all of the page headers for
| | 00:22 | all of the menu items for this web site.
| | 00:24 | So the page headers are showing up and
we're also displaying the article title
| | 00:29 | here, and that's why we now have two titles.
| | 00:32 | What I'm going to do is I'm going to go
through all of the menu items and turn
| | 00:36 | off the page header for all of those menu items.
| | 00:40 | Now the alternative to doing this
would be to turn off the article title.
| | 00:43 | If you turn off the article title, but
leave the page header would that work?
| | 00:46 | Well, it would work as long as you're
not using a blog functionality, which I
| | 00:51 | don't believe this site is.
| | 00:52 | If you turn off your article titles, if
you have blog functionality, you'll have
| | 00:56 | a series of blog articles but they
will be missing their titles on the top.
| | 00:59 | You'll have one title which would be
the title across the top of the page only.
| | 01:03 | But the second problem that's
potentially even more problematic is that if you
| | 01:09 | decide to go with just page headers
to save yourself a few minutes here
| | 01:12 | reconfiguring your web site, you've
created a new maintenance problem for your
| | 01:17 | client in the long run.
| | 01:19 | Because your client will have to
remember, every time they add content to this
| | 01:23 | web site, to include a
page header in the menu item.
| | 01:28 | So it's an extra step you're asking
them to do, and that's kind of sad.
| | 01:32 | So it's just something else to go wrong
and another reason for a client to give
| | 01:36 | you a technical support phone call
and, because they forgot that they're
| | 01:40 | supposed to be doing it.
| | 01:41 | Make things easier for your clients.
| | 01:42 | There's no reason to give them an
additional step just to save yourself a few
| | 01:46 | minutes for migrating a site. Don't be lazy.
| | 01:49 | So we're going to go through and turn
off all these page headers here and I'm
| | 01:52 | going to show you how to do that.
| | 01:54 | So I'm going to go into the backend of Joomla!
| | 01:56 | here and I'm going to go to Menus >
Main Menu, and we're eventually going at
| | 02:01 | wined up having to do this process
for both Main Menu and footer menu.
| | 02:04 | Home menu, we do not
have to do this process for.
| | 02:07 | Those are all shortcut links that will go
to pages that already exists on the web site.
| | 02:12 | Home menu corresponds to those
featured products that are on homepage.
| | 02:16 | So, we'll have to do this whole
process for both Main menu and footer menu.
| | 02:20 | So I'm going to start with the link here
for my homepage, and I'm going to click
| | 02:24 | on that, and the first thing that I
noticed when I go into my homepage is
| | 02:28 | actually this alias.
| | 02:30 | One of the things that jUpgrade does is
it changes the alias for your homepage
| | 02:34 | from whatever it was, probably
just Home to the name of that _v16.
| | 02:41 | I don't really want it to say v16.
| | 02:43 | I'm just going to erase this
whole alias, and let Joomla!
| | 02:46 | generate a new alias for me.
| | 02:48 | Okay, so then over here on the left
side of the screen under Page Display
| | 02:51 | Options, you see where
it says Show Page Heading.
| | 02:54 | We're going to set that to No, and
then go ahead and say Save & Close.
| | 02:59 | And when I refresh my homepage here or
navigate to it, we have a single page
| | 03:04 | title which is great.
| | 03:06 | Okay, so now I'm going to go to Products
and, just to show you in the front end,
| | 03:12 | Products does have in fact two page titles here.
| | 03:15 | When I go to the Page Display Options,
you'll see a Show Page Heading is set to No.
| | 03:19 | There's a problem, it's a minor bug
with SP Upgrade, and what's happened is,
| | 03:25 | even though the radio buttons says that
we are not showing the page heading, the
| | 03:29 | database says we are.
| | 03:31 | So to fix this problem, we gave to
synchronize the radio buttons with the
| | 03:34 | value in the database.
| | 03:35 | The way to do that most easily is to
first of all set Show Page Heading to Yes
| | 03:40 | and hit your Save button, and when you
refresh the front end of the web site,
| | 03:44 | you'll see that actually nothing changes.
| | 03:47 | It's exactly as the way as it was before.
| | 03:50 | But now when you go back to Page
Display Options and you say Show Page Heading
| | 03:53 | to No and say Save & Close and refresh
your products page, you'll see a single
| | 03:59 | page heading, and that is
actually the article title.
| | 04:03 | So if we repeat this process,
say, for Health Benefits.
| | 04:06 | One more time I'll go in down to the
Health Benefits page and I'll go to Page
| | 04:12 | Display Options and I'll set Show Page
Heading to Yes, one Save, go back into
| | 04:17 | Page Display Options and set Show
Page Heading to No > Save & Close.
| | 04:22 | And now when I go to the Health Benefits and I
refresh, you'll see that I have a single title.
| | 04:28 | So what am I going to do you now
offline is I'm going to go through all the
| | 04:32 | pages on the web site and I'm
going to turn off those page headings.
| | 04:36 | The exception is going to be my Contact
page and I'll show you this really quickly.
| | 04:40 | Here on the Contact page, this is actually a
page heading that's displaying the word Contact.
| | 04:45 | If I turn this off, then the page
will just be listed as Susan Jacobs.
| | 04:49 | There won't be a word Contact on the
top the page, and I do want the word
| | 04:53 | Contact on the top of this page.
| | 04:55 | So I'm going to go to my Contact link,
which is near the bottom here, and the
| | 05:01 | one thing I am going to do with the
Contact link is here under Page Display
| | 05:06 | Options, I am going to set it to Yes.
| | 05:08 | So at least the radio button and the
Database are synchronized with the same
| | 05:12 | value and just say Save & Close.
| | 05:14 | This won't change the look of the page
at all, but if later I decide I want to
| | 05:17 | turn off the page heading and I've
forgotten about this bug, at least the radio
| | 05:21 | button will be configured in
the correct way. All right!
| | 05:24 | So you go ahead and do this offline.
| | 05:26 | I'm going to do this offline as well.
| | 05:28 | Go through all the pages of the web
site in both Main menu and in the footer
| | 05:31 | menu, and turn off the page heading,
and the way to do that is to take the
| | 05:35 | button and set it to Yes, hit the Save button,
pick the No button and then hit Save & Close.
| | 05:40 | It's kind of mindless clicking.
| | 05:41 | Put on some good music,
that's what I'm going to do.
| | Collapse this transcript |
| Reinstalling JCE| 00:00 | Web site starting to look pretty good.
| | 00:02 | We have managed to display a lot of
content on the front end of the web site,
| | 00:06 | now it's time to take a look at some
of our third-party extensions, and there
| | 00:10 | were three third-party extensions
that were installed on this web site.
| | 00:13 | We head JCE, which is the Joomla!
| | 00:16 | Content Editor and JCE takes the
place of TinyMCE and it adds a lot of
| | 00:21 | functionality and usability to
putting articles into the system and it's an
| | 00:27 | extension that I install on all of my Joomla!
| | 00:29 | web sites, so I think it's just
a fabulous addition to Joomla!
| | 00:31 | We're also going to take a look at Xmap.
| | 00:35 | Xmap is a site map extension.
| | 00:37 | What it does is it takes a look at
all of your menus, as you put your menus
| | 00:40 | together and it displays them on the web site.
| | 00:43 | And if you add a new page to your web
site the site map updates automatically
| | 00:47 | which is just a great thing, and of
course, site maps are a great way for search
| | 00:51 | engines to spider through
all of your content as well.
| | 00:54 | So, Xmap is a great Site Mapping tool,
a great addition to your web site, so we
| | 00:59 | need to take a look at that as well.
| | 01:01 | And finally, we had Rotating
Testimonials on the left side of many of the
| | 01:05 | pages in our Joomla! 1.5 web site.
| | 01:08 | So we're going to need to reinstall
that and get that in place as well.
| | 01:12 | I'm going to start this video with
reinstalling JCE, and so to do that we're
| | 01:18 | going to go to a new tab and we're going
to joomlacontenteditor.net, and this is
| | 01:26 | the JCE web site and you can download
the most recent version of JCE for free.
| | 01:32 | So, you're going to go to
Downloads > Editor and then Joomla!
| | 01:35 | 2.5, and there's usually two versions of
the current version of JCE available to you.
| | 01:44 | The only difference is how the files
within these packages are put together.
| | 01:49 | So, there's a TGZ format and there is
ZIP format and it really doesn't matter
| | 01:54 | which one you download, it might
matter your web host, my web host doesn't
| | 01:58 | particularly care one way or the other.
| | 02:00 | I typically download the zip because
that tends to be a more familiar file
| | 02:03 | formats to all of you, but you can
certainly download the other one.
| | 02:06 | Go ahead and click the Download button
and this will download to your Downloads
| | 02:10 | folder on your computer, I'll go
ahead and say OK and this will take just a
| | 02:15 | second to download JCE. Okay.
| | 02:17 | So now we're going to go ahead and
install that in the backend of Joomla!
| | 02:20 | We'll go to Extensions > Extension
Manager and I'm going to browse for my
| | 02:26 | downloads folder for JCE and say Open,
Upload & Install and JCE will go ahead
| | 02:34 | and install on my computer.
| | 02:36 | In order for JCE to be available to all
of the users here what I need to do is
| | 02:40 | set it as the default editor, which I
can do under Site > Global Configuration
| | 02:45 | and the default editor I can change
from TinyMCE to JCE which is great.
| | 02:50 | Go ahead and say Save & Close.
| | 02:52 | And now if you go into your Article
Manager and you click on any of your
| | 02:56 | articles like the About article, you
should see the JCE Editor in place here.
| | 03:02 | It might say Toggle Editor or it
might say Show/Hide depending on your
| | 03:05 | version of JCE up here on the top,
and you're all set, if you get a screen
| | 03:10 | that looks kind of like that.
| | 03:13 | JCE has a number of wonderful features
to it in terms of customizing exactly
| | 03:17 | what buttons will show up for which
user groups, which is a wonderful feature
| | 03:22 | and I cover some of how
to configure JCE in Joomla!
| | 03:25 | 2.5 Essential Training.
| | 03:27 | So, if you think JCE looks good I
would encourage you to go check out those
| | 03:30 | videos over at Joomla!
| | 03:31 | 2.5 Essential Training.
| | Collapse this transcript |
| Reinstalling Xmap| 00:00 | The next extension I'd like to get in
place on this web site is our site mapping
| | 00:04 | extension, which is called
Xmap, and Xmap is a component.
| | 00:11 | As we know about components in Joomla!,
when we install it, we then have to make
| | 00:15 | a menu item in order to see that
component on the front end of the web site.
| | 00:19 | So we'll need to go
download Xmap from the Internet.
| | 00:23 | We'll need to upload it
and install it the Joomla!.
| | 00:26 | We'll need to make a menu link to it,
and then we'll take look at it on the
| | 00:29 | front end of the web site.
| | 00:31 | So Xmap can be found here on this web
site, the Vargas web site which is at
| | 00:36 | joomla.vargas.co.cr, and we're going to
go ahead and click on the Downloads link
| | 00:45 | here at the top of the page, and we're
going to scroll on down to Components, as
| | 00:50 | I told you Xmap is a component.
| | 00:53 | Inside of Xmap, the folder here, and then
scroll on down to the bottom of the page.
| | 00:58 | There are three versions of Xmap
available to you, but it's actually very easy
| | 01:01 | to pick the one you need.
| | 01:03 | You'll see that he has a 1.0 version
of Xmap, a 1.5 version of Xmap, and a
| | 01:08 | 2.5 version of Xmap.
| | 01:09 | So the 2.5 what is the one we want.
| | 01:12 | I'm going to go ahead and click on this link.
| | 01:14 | It will go ahead and save down the package to my
computer in the Downloads folder. There we go.
| | 01:20 | So now in the backend of Joomla!,
I'm ready to go ahead and upload Xmap.
| | 01:25 | I can go to Extensions > Extension Manager.
| | 01:28 | I'm going to Browse for my Xmap
extension, right here, and say Open > Upload &
| | 01:34 | Install and you should get a
message saying that that was successful.
| | 01:38 | Now we can go to Components > Xmap and this is
where you can figure Xmap here on your computer.
| | 01:45 | So we need to set up a sitemap to
display on the front end of the web site.
| | 01:49 | So to do that, we're going to go
ahead and click the New button and we can
| | 01:52 | give this a title of something like
Site Map, and if you want, you can put
| | 01:57 | some introductory text on the top of
your sitemap, down here in this box at
| | 02:00 | the bottom of page.
| | 02:01 | You can go ahead and type in some information.
| | 02:04 | I don't typically like to do that.
| | 02:05 | I think a sitemap is pretty self-
explanatory, but some people want to put in
| | 02:08 | that introductory text, which you can do here.
| | 02:11 | Under the Menus option here, you can
choose which menus you want to display on
| | 02:15 | the sitemap, and the ones I want to
display are the footer menu and the Main
| | 02:19 | menu, but I'd like Main menu
to be above the footer menu.
| | 02:22 | So if I just click on Main menu and
drag it, I can rearrange these in a click
| | 02:27 | and drag kind of way.
| | 02:29 | I'm not going to show the Home menu.
| | 02:30 | That is that Featured Products
module that shows up on the homepage.
| | 02:34 | So I'm not going to show that.
| | 02:35 | Under Options, I have some other options here.
| | 02:37 | I can choose to show or not show the
Intro text, show or not show a Menu title.
| | 02:42 | In other words, it would say Main menu and
footer menu on top of the links on the sitemap.
| | 02:47 | I don't think that people really care that
one is the main menu and one is the footer menu.
| | 02:50 | So I'm actually going to hide those.
| | 02:53 | You can also choose how many
columns that you have in your sitemap.
| | 02:55 | If you have a very big site, it might make
sense to have several columns of your sitemap.
| | 03:02 | Okay, so I'm going to go ahead and say
Save & Close now that I have my sitemap.
| | 03:06 | I'm going to click on the little red
circle here to make it a green check to
| | 03:10 | make sure it's published, and then
I'm going to go to Menus > footer menu.
| | 03:14 | This is where my sitemap existed previously.
| | 03:17 | So here's my sitemap right now.
| | 03:19 | I'm going to go ahead and click on the link.
| | 03:22 | At the moment, it doesn't know what
kind menu item type it is because the
| | 03:25 | sitemap software did not ported
over from the old version of Joomla!.
| | 03:28 | So we have a menu link with no
functionality behind it, and in fact, if you ever
| | 03:33 | clicked the Site Map link on the front
end of the web site upto this point, you
| | 03:37 | probably have got a 404 error
page, page not found. All right!
| | 03:40 | So I'm going to click Select and down
here we have our Xmap > HTML Site Map
| | 03:47 | option, which is exactly what we want.
| | 03:49 | Then I can choose my sitemap
from the right side of the screen.
| | 03:52 | That's going to be the sitemap we just
created, and go ahead and say Save & Close.
| | 03:57 | Now when I go to the front end of the
web site and I hit refresh and I scroll
| | 04:01 | on down to the bottom of the page and click
on the Site Map link, I should see my sitemap.
| | 04:06 | So there it is, all three levels of my
sitemap are present accounted for, the
| | 04:10 | footers at the bottom,
the main menus at the top.
| | 04:12 | One thing I want might like to add are
the word Site Map at the top of this page.
| | 04:16 | Since this is not an article, there is
no article title that is showing there,
| | 04:21 | but I could put in a page header.
| | 04:22 | So I'm going to click on the Site Map
link again and under my Page Display
| | 04:27 | Options, I'll set Show Page Heading to
Yes and the page heading I'd like to show
| | 04:31 | the words Site Map and if you say Save
& Close and refresh this page one more
| | 04:36 | time, we now have the words Site
Map showing up at the top of the page.
| | 04:40 | So that looks pretty good.
| | 04:42 | We can certainly work on some styling
with that, a little bit more, if you're
| | 04:45 | not happy with the appearance.
| | 04:48 | Otherwise, we are moving on to
putting in our Testimonial module in the
| | 04:53 | next video.
| | Collapse this transcript |
| Changing the quote extension from Vip Quotes to Rquotes| 00:00 | The next piece of functionality I'd
like to add to this web site is the
| | 00:03 | rotating testimonials that we saw on
some of the pages of the site located on
| | 00:08 | the left side of the screen.
| | 00:09 | So that particular piece of
functionality was run by something called VIP
| | 00:13 | quotes, which you can find here in the Joomla!
| | 00:15 | Extensions directory, and if you just
type in the search box VIP quotes, it
| | 00:19 | will come right up.
| | 00:20 | But unfortunately, at least at the time
of this recording, if you take a look,
| | 00:25 | it's available only for Joomla! 1.5.
| | 00:27 | There is no Joomla!
| | 00:28 | 2.5 version of this extension
available, which is a real bummer;
| | 00:33 | so we're going to have to find
something else that will rotate our quotes as
| | 00:38 | part of our testimonial.
| | 00:40 | Fortunately, I'm already here on the Joomla!
| | 00:41 | Extensions directory and it's very
straightforward to go find an alternative.
| | 00:45 | If I just in the breadcrumb here click
on the word Quotes, this will take me
| | 00:50 | back to a category here of quotes, and
I can scroll on down through the list;
| | 00:56 | PullQuotes, Simple Random Quotes, and
so forth, and choose one of these that I
| | 01:01 | can install in my web site.
| | 01:02 | Well, what I'm going to choose is
actually not labeled for Joomla! 2.5.
| | 01:06 | I'm going to work with Rquotes.
| | 01:09 | Click on that here.
| | 01:10 | Rquotes is labeled only for Joomla! 1.7.
| | 01:15 | However, for the most part, the vast
majority of extensions that are Joomla!
| | 01:20 | 1.7 compatible, are also
Joomla! 2.5 compatible.
| | 01:24 | It's not 100%, but it's really, really
close to that, and I have worked with
| | 01:28 | Rquotes several times in the past,
and I'm pretty happy with it, and I'm
| | 01:31 | familiar with it as an extension.
| | 01:33 | So I'm going to choose to go with this.
| | 01:35 | You could certainly take a look at
all of the other choices that are in the
| | 01:38 | JED, and you can choose exactly which one you
would like to incorporate into your web site.
| | 01:43 | So, I am going to go ahead and download
our quotes and I'm going to click on my
| | 01:49 | Download link right here.
| | 01:51 | This will take me over to the Rquotes web site.
| | 01:54 | It's going to be under Joomla!
| | 01:54 | 1.7 Extensions, and if we scroll on
down, we need to download both of these;
| | 02:00 | there's one called com_
rquote and one called mod_rquote.
| | 02:04 | So com_rquote is the component, it's
where we're going to enter the quotes for
| | 02:08 | the web site, and mod_rquote is a
module that will display those quotes on the
| | 02:13 | web site and we need both of
these in order for this to work.
| | 02:15 | So go ahead and click on the
Download button, and we'll save down the
| | 02:19 | com_rquote, and then we can click
on the mod_rquote Download button and
| | 02:28 | save that down as well.
| | 02:29 | So, once those are saved down, you can
close that window and the window from the
| | 02:33 | JED, and then we're in the backend of Joomla!
| | 02:35 | and now we can go ahead
and install both of those;
| | 02:38 | the component and the module.
| | 02:40 | We'll go to Extensions > Extension
Manager and we'll browse for com_rquote and
| | 02:46 | say Open, Upload & Install and once
again we'll click the Browse button and
| | 02:52 | we'll go to mod_rquotes,
Open and Upload & Install.
| | 02:56 | If you take a look under the Components
menu, you should see an rquote item here
| | 03:00 | and if you look in Extensions > Module
Manager, you'll see that we have a blank
| | 03:04 | module that's already configured for us.
| | 03:07 | In the next video, I'll go through how
you can configure the component and the
| | 03:10 | module to work on your web site.
| | Collapse this transcript |
| Configuring the Rquotes module| 00:00 | Now that I have the Rquotes component
and module installed, I'm going to go
| | 00:04 | ahead and configure these so that
we can see them on the web site.
| | 00:08 | Inside of your exercise files, you
will find a Notepad document here that has
| | 00:14 | all of the quotes that we
need to include on the web site.
| | 00:18 | So I'm going to go to Components > Rquote!
| | 00:21 | > Categories, that's where we're going
to start, and I'm going to make a new
| | 00:25 | category, which I will call Bliss No.
| | 00:29 | 5 Chocolate and hit Save & Close.
| | 00:32 | That's all we need to do is give it a title.
| | 00:35 | Then I'm going to flip over to the
RQuotes side of things here in the secondary
| | 00:38 | navigation and I can go
ahead and create a new quote.
| | 00:41 | Go ahead and click on the New button.
| | 00:45 | You can have a different quote
displaying by the day if you want, but I'm going
| | 00:48 | to go ahead and set this to the Bliss No.
| | 00:50 | 5 Chocolate category and I'm just
going to copy my first quote here, paste,
| | 00:56 | and say Save & New.
| | 00:57 | We'll repeat the process again here for
the next quote, highlight, paste, Save
| | 01:05 | & New, and I'm just going to keep repeating
this process here for all five of these quotes.
| | 01:16 | So now you should have
five quotes that show up here.
| | 01:19 | It's always good to check these things in
the Manager as soon as you enter them all.
| | 01:23 | I see here that I forgot to assign a
category to this one, so I'm going to click
| | 01:27 | on it and select the correct category
and say Save & Close again. There we go!
| | 01:33 | So now I've got all five quotes assigned to the same
category and they're all published. So that's great.
| | 01:37 | Now that we have the quotes in the
Quote Manager, now we're going to go and
| | 01:40 | display them with the module.
| | 01:42 | So we're going to go to Extensions >
Module Manager and you'll see that we
| | 01:46 | have an Rquotes module.
| | 01:48 | It's not assigned a position on the
page yet and it's not assigned any pages,
| | 01:52 | but we can go ahead and configure it now.
| | 01:54 | Go ahead and click on Rquotes and
I'm not going to show the title.
| | 01:59 | The position I'd like this in is the
left side of the page, so I'm going to
| | 02:04 | type in the word left which is the module
position there and we'll publish it as well.
| | 02:09 | Then over on the right side of the screen,
we can configure some of the basic options.
| | 02:13 | The quote source will be the Database.
| | 02:15 | If you've used the component, it's the database.
| | 02:17 | If you haven't used the database, you
can make a plain old text file and it will
| | 02:21 | display quotes from that, but I don't
see any reason not to use the database.
| | 02:25 | It's just as easy if not easier.
| | 02:27 | Then we're going to say display quotes
from this category, Bliss No. 5 Chocolate.
| | 02:31 | We'd like a Single_random quote although you
can see we have other options here if we wish.
| | 02:36 | We want a single quote to display on the page.
| | 02:40 | You can pick a style for
these quotes if you wish.
| | 02:42 | I am including a Bold style or an Italic style.
| | 02:44 | I'm not going to worry about that, I'm
going to leave it set to the default.
| | 02:48 | So we'll go ahead and say No
for the Display quotation marks.
| | 02:51 | Then I'm going to scroll back up the
page and over here on the left side, we
| | 02:56 | need to take a look at page assignment for this.
| | 02:58 | So right now it's not
assigned any pages on the web site.
| | 03:01 | What I'd like to do is
display this on selected pages.
| | 03:05 | I don't want to display this on the
Home or the Products pages, but I want to
| | 03:09 | display it on the other pages in the web site.
| | 03:10 | So I'm going to check off the Health
Benefits, Ordering, About, Contact,
| | 03:14 | and Member Specials.
| | 03:16 | And on the footer menu, I'm going to
check off Privacy Policy, Terms and
| | 03:20 | Conditions, and Site Map.
| | 03:22 | That's where I'd like the
quotes to display. Okay.
| | 03:25 | Go ahead and say Save & Close and now
when I refresh the homepage of the web
| | 03:29 | site, we do not see the testimonials.
| | 03:32 | That's a good thing.
| | 03:32 | If I go into the Products
page, I don't see them here.
| | 03:35 | That's a good thing.
| | 03:37 | When I go to Health Benefits though, I see my quote
here up on the top of the screen. And in the Joomla!
| | 03:43 | 1.5 web site, the quote
was underneath the image.
| | 03:46 | So we have an ordering issue here.
| | 03:49 | Back here in our Module Manager, right
now our modules are sorted by position,
| | 03:53 | which is indicated by this
little gray triangle right here.
| | 03:56 | If I click on the ordering column,
we'll sort these in order so that we
| | 04:00 | can rearrange them.
| | 04:02 | And so here we have subnav and
Rquotes and the random image.
| | 04:08 | What I'd like to have happened is have
the subnav in position number 1, the very
| | 04:12 | top, the random image in position
number 2, and Rquotes in position number 3.
| | 04:17 | So I can use my little Netflix
arrows to nudge these up and down or I can
| | 04:21 | just enter some numbers.
| | 04:22 | So subnav is number 1 and random image
is number 2, Rquotes should be number 3,
| | 04:28 | which I'll type in and then click the
floppy disk icon up here in the top.
| | 04:34 | And you'll see that we now have our
subnav, our random image, and our Rquotes in
| | 04:38 | the order that I want.
| | 04:39 | So when I refresh my Health Benefits
page, there is my image on top with the
| | 04:44 | quote underneath, and yes,
you were absolutely right.
| | 04:47 | The formatting is not pretty at all, it
was much prettier on the other web site,
| | 04:51 | but these are CSS problems which
we'll address at a later point.
| | 04:54 | If I keep flipping through the site,
it looks like it's on the Ordering, the
| | 04:58 | About, and the Contact pages.
| | 05:00 | It's down here in the bottom under
the Privacy Policy, the Terms and
| | 05:03 | Conditions, and the Site Map.
| | 05:07 | So overall, that was pretty
straightforward and simple to do using Rquotes,
| | 05:12 | which worked just great for our purposes.
| | 05:13 | And I would encourage you to
give it a try on your own web site.
| | Collapse this transcript |
| Adjusting language strings in the search module| 00:00 | The last thing I'd like to do before
moving on to working on some styling on
| | 00:04 | this web page is to fix the Search,
Search, Search at the top of the page.
| | 00:09 | We have some words that says Search...
outside of the box in the brown area,
| | 00:13 | then we have the word Search in the
Search box and then we have a Search button.
| | 00:18 | So, I think we can tone down all of
that search in, probably getting rid of the
| | 00:21 | first two searches just
leaving the Search on the button.
| | 00:25 | So, to do that in Joomla!
| | 00:26 | 2.5 there are these things called
language strings and they have always been
| | 00:31 | present in Joomla!, but in Joomla!
| | 00:33 | 2.5 you have the ability to do a
language override and those overrides are
| | 00:38 | incredibly powerful and very easy to
change text on your web site that's
| | 00:44 | associated with some of
this core Joomla! extensions.
| | 00:48 | So, I'm going to jump
into the backend of Joomla!
| | 00:50 | and I'm going to go to the Extensions >
Language Manager and up here in the sub
| | 00:56 | navigation I'm going to go to the
Overrides tab and you'll see that right now we
| | 01:01 | have no overrides for this web site.
| | 01:02 | So, we're going to go ahead and make a
new one by clicking the New button and
| | 01:06 | the first thing we're going to do is
we're going to search for that string, the
| | 01:11 | word Search... and this is going to
search through all of the language files
| | 01:17 | that are present and find one that
matches that particular set of characters.
| | 01:23 | And so you see that we have three
choices here, we have a SEARCH_VALUE and a
| | 01:27 | SEARCHBOX and a SEARCH_LABEL.
| | 01:28 | Well, usually things that are outside
of the box are labels, so I'm going to
| | 01:33 | assume that this one here has to do
with the search that's in the brown area
| | 01:38 | of that search box.
| | 01:39 | I actually don't want any text there,
so I'm just going to get rid of that
| | 01:42 | altogether and say Save & Close.
| | 01:45 | When I refresh the page
that brown text area is gone.
| | 01:51 | The next thing I would like to get rid
of is the word Search inside the Search
| | 01:53 | box, so I can do that as well.
| | 01:56 | I'm going to say New again and I'm
going to search again for Search... and
| | 02:03 | this time I want the search that's
inside of the box, so it's probably this
| | 02:07 | one here search box text.
| | 02:09 | So I'll go ahead and select that and
erase the word Search and say Save & Close
| | 02:15 | and when I refresh my web page the word
search is gone from inside of the search box.
| | 02:20 | So that's great, we now just have a
box followed by a button that says Search
| | 02:24 | and that's probably all we really need to do.
| | 02:27 | Now I know that that search box is a
little bit bigger than it previously was
| | 02:30 | and it probably needs to be brought
down in size in terms of formatting and we
| | 02:34 | will get to that in a later
video that has to do with styling.
| | 02:38 | So, now that we've gone through this
whole web site, we've evaluated all of the
| | 02:43 | pages, we've made sure the modules
are at least in the right spots, the
| | 02:47 | formatting may not be perfect yet, but
we at least have all of the content on
| | 02:51 | the web page, which is what's most important.
| | 02:53 | We can't see the content,
we can't style the content.
| | 02:57 | So, now that we have all of the
content in place we're ready to go on and get
| | 03:02 | started with some CSS and
cleaning up this web site.
| | Collapse this transcript |
|
|
7. Fixing Styling in Your Custom TemplateInstalling the Web Developer toolbar and Firebug| 00:01 | We are going to get started on
doing our styling of our Joomla!
| | 00:04 | web site at this point.
| | 00:06 | In order to make that process a little
bit simpler and easier, I am going to
| | 00:10 | install two of my favorite Firefox
extensions of all time, and that would be the
| | 00:15 | Web Developer toolbar and Firebug.
| | 00:17 | That definitely makes our job a
little bit easier we were going to try the
| | 00:20 | diagnose CSS problems.
| | 00:22 | So I'm going to type in web developer
toolbar right here and the very first
| | 00:29 | match that comes up here is the Web
Developer toolbar and the second matches the
| | 00:33 | actual Developers' web site.
| | 00:34 | I am going to go ahead and click on
the link and I am going to click on the
| | 00:37 | Download button here.
| | 00:40 | Apparently the Download button should
skip me down here to DOWNLOAD FOR FIREFOX.
| | 00:44 | We'll go ahead and click on the DOWNLOAD FOR
FIREFOX button and we'll say Add to Firefox.
| | 00:49 | We are going to allow that.
| | 00:51 | So it'll take just a second to
download this and tell it to install here on
| | 00:55 | Firefox and it will me tell me that it's
going to be installed after I restart Firefox.
| | 00:59 | I am just going to wait on that because
I'm going to install Firebug as well and
| | 01:03 | we'll have to reboot after that also.
| | 01:05 | Okay, so back to Google and now I'm
going to search for Firebug which is at
| | 01:11 | getfirebug.com and I'm
going to say Install Firebug.
| | 01:15 | I'm running Firefox 10.
| | 01:18 | I'm not sure if this Firebug is going
to work or not, but we'll give it a try.
| | 01:21 | We will go ahead and click on the
Download button, Add to Firefox and install.
| | 01:27 | Okay and now, we can go ahead and restart.
| | 01:30 | It should take just a minute and I'm
going to close these extra tabs up here.
| | 01:35 | You'll see that I now have this
wonderful toolbar going across the top of the
| | 01:38 | page that will allow us to edit our
stylesheet right here within Joomla!.
| | 01:43 | We can edit a copy of it that's on
our local machine and copy and paste our
| | 01:46 | changes right into a Joomla!
| | 01:47 | template which is a beautiful thing.
| | 01:49 | They also have a Firebug, this is the
button up here in the upper-right corner
| | 01:53 | of Firefox once you've installed it.
| | 01:55 | When you click on it, you'll get a little
panel down here in the bottom of the screen.
| | 01:58 | It will help you to show which
elements of your web page have which
| | 02:01 | styles applied to it.
| | 02:03 | So that's the very handy
and useful thing as well.
| | 02:05 | Now that you have the Web Developer
toolbar and Firebug installed, we're ready
| | 02:09 | to start tackling some of the CSS
formatting issues on our web site.
| | Collapse this transcript |
| Adjusting the styling for the Our Featured Products listing| 00:00 | The first piece of formatting that I'd
like to tackle on this web site has to do
| | 00:04 | with Our Featured Products,
right here on the homepage.
| | 00:07 | And you can see right now that Our
Featured Products has three pictures and
| | 00:12 | three sets of words.
| | 00:13 | And when you mouse over it, nothing
much happens here, and it's pretty clear
| | 00:17 | that there's no color behind any of these words.
| | 00:20 | If you compare that with the Joomla!
| | 00:21 | 1.5 site, you'll see that we have three
different colors here, and when we mouse
| | 00:25 | over them we have a hover state as well.
| | 00:27 | Somewhere along the way,
this formatting has gotten lost.
| | 00:30 | The question is, where do that
happen and how can we fix it.
| | 00:34 | So what I am going to do is I'm going
to start by editing with CSS right here,
| | 00:39 | and when you first install the Web
Developer toolbar, your stylesheet editing
| | 00:43 | screen will be down at the bottom.
| | 00:45 | If you click this little green grid
right here, it should move up to the left
| | 00:49 | side of the screen, and then you can
pull over the window a bit, which I am
| | 00:53 | going to pull over as far as I can,
so you can see what's going on.
| | 00:57 | And if you switch to default.css,
these are the custom styles that were
| | 01:01 | originally written for this template.
| | 01:03 | You might be noticing that the pink
tabs across the top have gone away.
| | 01:07 | That's because the path to those tabs
does not work correctly when the CSS
| | 01:12 | editing window is open.
| | 01:14 | When we close the window by clicking
the red X up here in the top, you'll see
| | 01:17 | that the pictures are all still
there and everything is still okay.
| | 01:20 | So don't panic if you see some elements
of your web design suddenly disappear.
| | 01:24 | It generally happens with background
images and it's really just because when
| | 01:29 | you have this editing window open, the
relative path to those background images changes.
| | 01:34 | So now we are going to edit the CSS and
we are switched to the default.css tab
| | 01:39 | and you'll notice that this is a
fairly well commented stylesheet.
| | 01:42 | So we have general styles, main
outside container, head container.
| | 01:47 | So I am going to scroll on down here past top,
past content, past left into the right area.
| | 01:53 | So right module styles are
what we're concerned with.
| | 01:57 | And so then the next question is which of
these styles apply to Our Featured Products.
| | 02:03 | Well, you can find that out by
looking at view source right here in the Web
| | 02:07 | Developer toolbar and going to View Source.
| | 02:09 | And I am going to scroll on down the
page until I find my Featured Products,
| | 02:14 | which is right here.
| | 02:15 | So you'll see we have a div with an id of
right, we have a div with a class of modulehome;
| | 02:20 | we have a div, div, div.
| | 02:21 | Those four divs are there because this was
a way that we did rounded corners in 2008.
| | 02:27 | This was before CSS3.
| | 02:29 | Now you can do rounded corners quite
simply and easily using a CSS3 command,
| | 02:33 | but this was done with some older
code where you had to generate a rounded
| | 02:37 | corner image for each corner and then you needed
four divs to display the four background images.
| | 02:43 | So we have Our Featured Products and
then we have ul with a class of menu and an
| | 02:47 | li with a class of item-19
and there's a few others here.
| | 02:51 | I am going to turn on the word wrapping
by going to View > Wrap Long Lines and
| | 02:56 | here's the code we're looking at right here.
| | 02:58 | You can see that we have a series of
links, they have classes associated with
| | 03:01 | them, so we are a little bit familiar
with the kind of code that we're looking
| | 03:04 | at in the right side of the page,
the div with the id of right.
| | 03:07 | So I am going to flip back to the
front end of my web site now and you see
| | 03:11 | that we have formatting here for right
that's the div on the right side of the
| | 03:15 | page, right div.modulehome that is the
modules that are located right here on the page.
| | 03:21 | We have an h3 and a ul and an li, all
those things were still there, but where
| | 03:26 | the difference comes in
is right here in the code.
| | 03:29 | So you see here that we've styled each
link individually with item19, item20,
| | 03:35 | item21, and when you do this, Joomla!
| | 03:38 | gives you these handles so that you can
in fact style three links individually
| | 03:43 | and that's a great thing.
| | 03:44 | But the downside is, if those item
IDs ever change and consequently the
| | 03:50 | class changes from item19 to, say I
don't know, item27, your styling goes
| | 03:55 | away for that link as well.
| | 03:57 | Let's take a look at the HTML that we
have and you'll see here up here, where
| | 04:02 | it says li class equals item-19 and over
here item-20, and then again over here, item-21.
| | 04:13 | But if we take a look at our
code it's for item19 all one word.
| | 04:18 | So we are missing some hyphens.
| | 04:20 | Let's go ahead and put all of those in;
| | 04:21 | -19, -20, -21 and one more
down here on the hover state.
| | 04:29 | So those are the changes that need to be made.
| | 04:31 | And now we have, our colors are back
and you can roll your mouse over them.
| | 04:36 | Fundamentally, the CSS isn't broken
it's just that the class name has changed
| | 04:41 | between versions of Joomla!
| | 04:42 | and what that meant was that our styling
for this particular module no longer worked.
| | 04:47 | So the trick is to find out what the
difference is between the old code in the
| | 04:51 | old HTML and the new HTML and then
adjust your styles accordingly, so that those
| | 04:56 | styles can support the new HTML.
| | 04:59 | Our big changes are just these three
styles right here and I'm going to go ahead
| | 05:03 | and highlight these, these
four styles I should say.
| | 05:07 | It's a link in a visited state for each
of the three individual links and then a
| | 05:11 | combined state for the hover.
| | 05:12 | And I am going to Ctrl+C or Command
+C to copy those particular links.
| | 05:16 | And then I am going to flip over to the
backend of Joomla!, I am going to go to
| | 05:19 | Extension > Template Manager, and I am
going to go into the Templates tab and I
| | 05:24 | am going to scroll down to the Inside Template.
| | 05:27 | Go ahead and click on that and I am going
to Edit css/default.css by clicking on it.
| | 05:33 | Then I am just going to scroll on down
here to find the right styles, here we are.
| | 05:39 | And scroll on down a little bit
further to find the ones that talked about
| | 05:42 | item19, there we go.
| | 05:44 | So these four styles right here.
| | 05:47 | I'm just going to highlight all of
them and then Ctrl+V or Command+V, paste
| | 05:51 | right over top of them.
| | 05:52 | So now you see that our
updated code is in place.
| | 05:55 | If I click the Save button at the top of
the page, I go back to the front end of
| | 05:59 | the web site and I click the Refresh,
you'll see that our colors are back in
| | 06:04 | place here for Our Featured
Products, which is a wonderful thing.
| | 06:07 | So we fixed Our Featured Products.
| | 06:09 | That's the first item on our list;
| | 06:10 | we have a few more things to fix after this.
| | Collapse this transcript |
| Adjusting the login box| 00:00 | I'm looking at the Joomla!
| | 00:02 | 1.5 web site and down here towards the
bottom is the Login form, and you could
| | 00:06 | see the way the Login form is displaying.
| | 00:08 | We have the words Username and
Password above the blanks where you enter that
| | 00:12 | information, and then down on the
bottom we have some links to Forgot your
| | 00:15 | password and Forgot your username.
| | 00:17 | So we want to try to make our
Login box look exactly the same.
| | 00:20 | So if I take a look over here at our new Joomla!
| | 00:23 | 2.5 web site, you'll see that
this looks somewhat different.
| | 00:27 | What's happened here is that HTML
behind the Login box has changed and now the
| | 00:31 | words Username and Password are next to the
boxes rather than being on their own line.
| | 00:36 | And we also have an extra link down
in the bottom of the Login box that
| | 00:39 | says Create an account.
| | 00:40 | So we can get rid of that
Create an account link inside of
| | 00:43 | Joomla!'s configuration.
| | 00:45 | There's an option to turn on the
ability to create new accounts from the front
| | 00:48 | end of the web site.
| | 00:49 | So we're going to turn that off.
| | 00:51 | We'll start with that, we'll
go into the backend of Joomla!
| | 00:54 | here and we'll go into the User Manager
and we'll go into Options and we'll set
| | 00:58 | Allow User Registration
to No and say Save & Close.
| | 01:02 | When I refresh the front end of my 2.5 web site,
you'll see that that link now has gone away.
| | 01:06 | Some of you might be thinking well,
couldn't we have just hidden that with CSS.
| | 01:10 | Well, sure, you could have, but the
link would actually still exist, and the
| | 01:13 | problem with that is you'll be
visited by robots and things who want to
| | 01:17 | register for your web site and they
can still do that, they just wouldn't see
| | 01:21 | the link on the page.
| | 01:22 | With the method I just showed you,
that link is actually turned off.
| | 01:26 | You can't register from the front end of the web site,
which, in this case, is a good thing. We don't need it.
| | 01:30 | So now I want to deal with the
formatting of this Login box.
| | 01:33 | If I take a look at the HTML by going
to View Source up here on the top of
| | 01:38 | the screen and then scrolling down for our
little ways, we'll find our Login form here.
| | 01:44 | You'll see that we have a Login h3,
we have a form tag, and then we have a
| | 01:48 | fieldset here, we have
our username and password.
| | 01:51 | The usernames and passwords are inside
their own paragraphs with their own IDs.
| | 01:55 | The username is inside of a label tag
and then we have the input with which that
| | 02:00 | label is associated.
| | 02:01 | The label tag is an accessibility tag
that associates the words username with
| | 02:07 | the field that follows.
| | 02:08 | You'll see that the input has an ID of
modlgn-username for the username and then
| | 02:14 | the label has an
attribute of 4 which is that ID.
| | 02:17 | That's how these things become associated.
| | 02:19 | It helps greatly with accessibility
because then screen readers know exactly
| | 02:24 | what labels go with which fields on the form.
| | 02:27 | So that's why they're all there.
| | 02:28 | Label happens to be an inline
element as does the input tag.
| | 02:32 | So what I'm going to do is I'm going
to say if I display my label tags as a
| | 02:38 | block-level element instead, in other
words a block-level element that takes up
| | 02:41 | a full line as opposed to an inline
element which is only as wide as its
| | 02:45 | content, then I'll be able to put
these labels on their own line, and that
| | 02:50 | should take care of the
problem that I have here.
| | 02:52 | So to do that, I'm going
to go to CSS > Edit CSS.
| | 02:56 | I'm going to switch to my default.css
style sheet, and I'm going to scroll on
| | 03:00 | down to the part of the stylesheet
where I talk about right, here we go, and
| | 03:04 | down a little bit further when I
start to talk about div.module.
| | 03:08 | That corresponds with the Login box.
| | 03:10 | And you'll see, as I scroll on down
here, we eventually talk about the form a
| | 03:15 | little bit with the fieldset and
the form tag and the input.button.
| | 03:19 | That's the way the Login button became brown.
| | 03:21 | So I'm going to add another style
right here, #right div.module label and I'm
| | 03:27 | going to say to display block.
| | 03:32 | And just by doing that, we now have our
username and password on their own lines
| | 03:36 | with the fields underneath
and everything lines up nicely.
| | 03:39 | The only problem though is the Remember Me item.
| | 03:42 | And you see that the box for Remember Me is
now wrapped underneath the words Remember Me.
| | 03:46 | I'd like that box to be next to Remember Me.
| | 03:50 | So Remember Me is wrapped by a label as
well, that's why it's on its own line.
| | 03:53 | So what we need to do now is make an
exception for just the Remember Me label
| | 03:58 | and have it display as inline.
| | 04:00 | If we take a look at our HTML again, we
can find the code that will make that happen.
| | 04:05 | So you'll see that we have a paragraph
with an ID of form-login-remember and I'm
| | 04:10 | going to make use of that.
| | 04:11 | So if I just highlight that ID and say
Ctrl+C or Command+C to copy it, then if I
| | 04:17 | come on over here and I add #right div.
module and the ID of form-login-remember
| | 04:25 | label, this one, because this
declaration has a higher specificity than the
| | 04:30 | previous declaration, also comes
later in stylesheet, we'll say display:
| | 04:35 | inline, and that'll put the box on the same line as
the words Remember Me. So awesome! We're all set.
| | 04:41 | This is the way the Login box should look.
| | 04:43 | Now what I'm going to do is Ctrl+A
or Command+A to highlight all of my
| | 04:46 | styles, Ctrl+C or Command+C to copy them, then
I'm going to jump into the backend of Joomla!
| | 04:50 | and go to Extensions > Template Manager,
I'm going to go to the Templates tab,
| | 04:55 | scroll all the way to the bottom to the
Inside template, click on the link for
| | 04:59 | Edit CSS, Ctrl+A or Command+A to
highlight all of my styles and delete them,
| | 05:03 | Ctrl+V or Command+V to paste them in.
| | 05:06 | And now when I hit the Save button here
on the top of the screen and I refresh
| | 05:10 | my homepage, my Login box looks so
much neater now that it's all lined up and
| | 05:15 | we're ready to move on to the next challenge.
| | Collapse this transcript |
| Adjusting the right content margin| 00:00 | The next thing I'd like to
adjust is the right side of this page.
| | 00:05 | Right now we have text that essentially
runs right into the right side of the page.
| | 00:09 | And I'd like to put a little bit more
space between the edge of that page and
| | 00:14 | the text, just sort of
move things over a little bit.
| | 00:17 | So as always we start by taking a
look at our HTML by viewing the source.
| | 00:22 | We're going to scroll on down to right here.
| | 00:23 | You'll see that we start with a div
with an id of content and then we have our
| | 00:28 | breadcrumbs followed by Health
Benefits page title, there we go.
| | 00:32 | And then here we have some text here that
is what's running into the edge of the page.
| | 00:38 | So, what I need to do and all likelihood
is adjust my div with an id of content,
| | 00:44 | see if that will fix my problem.
| | 00:46 | So I'm going to go into the CSS, Edit CSS.
| | 00:50 | And if you're not sure if the content
div is exactly what you want to do, you
| | 00:54 | can always stick a little text code
in there, say for example we put in
| | 00:58 | border 1px solid red.
| | 01:01 | That will put just a nice border
around it, so we can see what we're doing.
| | 01:05 | So I think the issue is
right here with the padding.
| | 01:07 | And I am going to change this padding a
little bit to make this display a little
| | 01:11 | bit better on the page.
| | 01:12 | So I am going to say my padding is 15px
on the top, 25px on the right, 15px on
| | 01:19 | the bottom and 10px on the left.
| | 01:23 | Remember, you could use the shorthand
with the four numbers like this, its top,
| | 01:27 | right, bottom and left.
| | 01:29 | And if you remember, you
can keep out of trouble;
| | 01:32 | trouble is the acronym to remember it, to
remember what order those numbers go in.
| | 01:36 | So that looks much better and now I can
take out my border which I really don't need.
| | 01:42 | And now my text isn't
jammed quite so far into edge.
| | 01:45 | If you don't like the way that look, of
course you can continue to tweak it on your own.
| | 01:48 | But that's pretty much
where I'd like to leave it.
| | 01:50 | I am going to Ctrl+A or Command+A
to highlight all of my CSS, Ctrl+C or
| | 01:54 | Command+C to copy it.
| | 01:55 | Then I am going to hop in
to the back end of Joomla!.
| | 01:58 | Buff my Template Manager open, if you
don't know how to get to the Template
| | 02:02 | Manager, if you the see the couple of
past videos it will show you how to get to
| | 02:05 | the Template Manager.
| | 02:06 | Ctrl+A or Command+A to delete
everything that's here, Ctrl+V or Command+V paste
| | 02:10 | it in and I am going click the Save button.
| | 02:12 | So I leave this open for further editing.
| | 02:14 | And when I refresh the Health
Benefits page I have just shifted everything
| | 02:18 | over just a smudge and I think it
looks a lot better, little more breathing
| | 02:22 | room for content.
| | Collapse this transcript |
| Adjusting article options for the multipage Product Sampler article| 00:01 | I'm looking at the
Product Sampler page in Joomla!
| | 00:04 | 1.5, which is located under the
Products proportion of the web site, and you'll
| | 00:08 | see here that the way this is laid out is
this is a multipage article. In Joomla!
| | 00:12 | 1.5, there is only one
way to display these things.
| | 00:15 | It would give us an Article Index and
we could click on each one of these items
| | 00:19 | and it would show us a page with
that sort of information on it.
| | 00:23 | You can navigate through it by clicking
on the links at the bottom or you could
| | 00:27 | click on the links on the side or you
can show All Pages at once in which case
| | 00:30 | you had a full article like this. In Joomla!
| | 00:32 | 1.7, we were introduced to the concept
of laying out an article like this using
| | 00:37 | sliders or tabs, and I
covered that in both Joomla!
| | 00:40 | 1.6 and 1.7 Essential Training
and I also covered it in Joomla!
| | 00:44 | 2.5 Essential Training.
| | 00:46 | Having those accordion panels can be
really nice, it adds a little polish to the
| | 00:49 | web page and it will sparkle.
| | 00:51 | So I think what we're going to do is
drop the formatting here for this Joomla!
| | 00:54 | 1.5 site, which is kind of old and
creaky, and I would like it to display with
| | 00:59 | some sliders, so I can page through the
Blissful Gift Creator and the Chocolate
| | 01:03 | Ganache and the Bliss No.
| | 01:04 | 5 Caramel Sticks and on and on and on.
| | 01:06 | So I am going to do a little
configuration here in Joomla! to get my Joomla!
| | 01:11 | 2.5 page, the elements in
place, so that I can style them.
| | 01:15 | So this is the Product
Sampler page in Joomla! 2.5.
| | 01:18 | The information that's at the top here,
which says the Product Sampler followed
| | 01:22 | by the bullets, that is the Article
Index that you saw on the Joomla! 1.5 site.
| | 01:27 | And then after that we have a little
bit of text and our Previous and Next
| | 01:31 | buttons are showing up as bullets,
and if we click on the Next button, for
| | 01:34 | example, we will have the
Chocolate Ganache article.
| | 01:38 | So it's really missing a lot of
formatting, which is why it looks kind of bad,
| | 01:42 | time to clean it up, simple enough to do.
| | 01:44 | Here in the backend of Joomla!, I am
going to get out of my Template Manager by
| | 01:47 | saying Save & Close and Close again, and
I am going to go to my Plug-in Manager,
| | 01:53 | under Extensions > Plug-in Manager,
and I am going to look for the plug-in
| | 01:58 | that's called Content - Pagebreak right here.
| | 02:01 | And here in the Pagebreak plug-in,
what I am going to do is I am not going to
| | 02:05 | Show the Site Title, I'm not going to
show the Article Index Heading, I'm not
| | 02:08 | going to show the Table of
Contents and I am not going to Show All.
| | 02:11 | And my Presentation Style, I am
going to set to sliders which is great.
| | 02:16 | With these settings, I should now have a
very different looking page here for my article.
| | 02:21 | So I am going to go ahead and say Save
& Close, and when I go back and take a
| | 02:25 | look at the Product Sampler page again,
so we now have the words Bliss No.
| | 02:28 | 5 Chocolate Product Sampler twice and
then we have the Blissful Gift Creator and
| | 02:33 | then we have Chocolate Ganache as a slider.
| | 02:36 | Our Caramel Sticks are a nice little
slider, Hot Chocolates a little slider.
| | 02:40 | So we have some double page title
things going on here, and obviously these
| | 02:44 | sliders don't really look like sliders,
they leave a lot to be desired as far as
| | 02:48 | the formatting goes.
| | 02:49 | Let's fix the double title problem first,
and then in the next video I will show
| | 02:53 | you how to style this to make
these look more like well, sliders.
| | 02:57 | So now what I am going to do is I'm
going to flip over to the backend of Joomla!
| | 03:02 | and I am going to go to Content >
Article Manager and I am going to go to my
| | 03:06 | Products page, Bliss No.
| | 03:08 | 5 Chocolates Product Sampler.
| | 03:10 | And here, inside of the editing box, the
first thing I am going to do is get rid
| | 03:15 | of this title Bliss No.
| | 03:16 | 5 Chocolates Product Sampler.
| | 03:18 | That's why we have a double page title.
| | 03:19 | This is also the article title.
| | 03:21 | So the Article Title is displaying on
the page as well as this heading one
| | 03:25 | that's inside of our text.
| | 03:26 | So I am just going to get rid of that.
| | 03:28 | So if I do this much and say Save and
refresh my Product Sampler page, you'll
| | 03:34 | see that we have got rid
of the double page title.
| | 03:37 | Now what I would like to have happen is,
I would like the words Blissful Gift
| | 03:40 | Creator to be its own accordion panel.
| | 03:43 | What's happening right now is
Blissful Gift Creator stays open even while I
| | 03:47 | click through some of the other
accordion panels underneath, and I can't click
| | 03:51 | on Blissful Gift Creator and Open and Close it.
| | 03:53 | So I need to find a way to make
that a panel that can open and close.
| | 03:57 | And the way that you do that
here in the backend of Joomla!
| | 03:59 | is simply to click before the words
Blissful Gift Creator and hit the Page Break
| | 04:04 | button, and it will ask us
for Page Title and an Alias.
| | 04:08 | So it's Blissful Gift Creator and
say Insert Page Break. There we go.
| | 04:15 | And now if I hit Save, so I flipped over to the front
end of the web site and I click Refresh. And oh boy!
| | 04:22 | Something really funky is just happened
here because my formatting just got all
| | 04:26 | blown away and I am not sure what's going on.
| | 04:28 | I am going to flip back
to the backend of Joomla!
| | 04:30 | Here and I am going to take a look at my HTML.
| | 04:33 | So I am going to click on the Toggle
Editor button, and what I see here is an h2
| | 04:38 | tag, followed by hr, Blissful Gift
Creator, class of system Pagebreak, followed
| | 04:43 | by the words Blissful Gift
Creator, followed by an h2.
| | 04:46 | I think the problem is these
tags aren't nested correctly.
| | 04:48 | So I am going to take this h2 and I am
going to move it over so that now says,
| | 04:53 | hr title, Blissful Gift Creator class
of system-pagebreak, and then we have h2
| | 04:57 | Blissful Gift Creator/h2.
| | 04:58 | Let me apply that clicking the Save
button and when I refresh the front end of
| | 05:04 | the web site, our formatting is now fixed.
| | 05:06 | So if that happens to you, make sure that
your h2s are nested correctly on the page.
| | 05:13 | So now we have a series of accordion
panels that work correctly, but we still
| | 05:17 | have this double title problem.
| | 05:19 | And where these double titles are
coming from is the panel itself has the title
| | 05:24 | and we have an h2 located for each
one of these sections within the text.
| | 05:28 | So what I am going to do is now
go through and take out those h2s.
| | 05:31 | So I can go back to my front end here
and I am going to get rid of Blissful
| | 05:35 | Gift Creator, the h2 for that, and right on
down the line here, Caramel Sticks, bye-bye.
| | 05:43 | Hot Chocolate, bye-bye.
| | 05:45 | So one by one here we just get rid of
all these h2s in this article, and that's
| | 05:52 | last one there with Baking Chocolate. Okay.
| | 05:54 | So I am going to go ahead and hit
Save again, and now when I look at the
| | 05:57 | front end of the web site and I
click Refresh, I have the title of the
| | 06:01 | article which is the Bliss No.
| | 06:03 | 5 Chocolates Product Sampler.
| | 06:05 | By default, the panel of Blissful Gift
Creator is open and I can click on the
| | 06:09 | other panels as I continue
on down through my article.
| | 06:13 | So we at least now have
the content set up correctly.
| | 06:16 | The next thing we are going to need to
do is take care of the formatting of this
| | 06:19 | page, which I am going to
cover in the next video.
| | 06:22 | Before we go there, let's go ahead
and hit Save & Close here in the Article
| | 06:25 | Manager and I am going to go back to
the Control Panel and I will see you in
| | 06:28 | the next video.
| | Collapse this transcript |
| Formatting the multipage Product Sampler article with CSS| 00:01 | So we just took care of styling this
page a little bit, so that we would have
| | 00:04 | some sliders in place for flipping
through the multiple pages that are located
| | 00:09 | inside of our Bliss No.5 Chocolate
Product Sampler, and we can click on these
| | 00:14 | words and they open up into
bits and pieces of this article.
| | 00:18 | It's kind of a cool effect but the
formatting leaves an awful lot to be desired.
| | 00:22 | So, let's take a look at how
we can format a page like this.
| | 00:25 | So, I'm going to go ahead and start by
viewing the source of the web page as we always do.
| | 00:29 | I'm going to scroll on down to the
actual part of the content here itself.
| | 00:34 | So, we have our title Bliss No.5
Chocolate Product Sampler and then after that
| | 00:38 | we have a series as h3 tags here that
are clickable and will allow you to open
| | 00:43 | and close information on the web page.
| | 00:45 | So, what we need to do is
work on some styling for those.
| | 00:49 | We can use this div with an id of
sliders, which encompasses all of the content
| | 00:53 | to specify exactly which h3s we're styling.
| | 00:56 | Then we can style the h3 in its
regular state as well as h3 and the links
| | 01:01 | that it contains, because remember
we click on the links in order to move
| | 01:04 | those panels up and down.
| | 01:06 | So, to get started here, I'm going to
open up my styling window, say, Edit CSS
| | 01:11 | in my Web Developer toolbar and switch
over to the default.css, and I want to
| | 01:16 | scroll on down to sort of around the
bottom of our content declarations here in
| | 01:20 | the stylesheet and I'm going to put in
a comment that this is the multi-page
| | 01:26 | article with sliders.
| | 01:31 | And so now, we're going to write some styles.
| | 01:33 | So, I'm going to start with #content, so
I know what part of the stylesheet I'm in.
| | 01:38 | #sliders, which is the ID that surrounds
all of that content, followed by an h3,
| | 01:44 | and now I'm going to put in some styles here.
| | 01:46 | The background color will be this pink,
b1174e and that should be the same pink
| | 01:54 | as the tabs and so forth that
are already there on the page.
| | 01:57 | Now, of course, the words smash right
into the edge of their colors, so we need
| | 01:59 | a little bit of padding, maybe 3 pixels worth.
| | 02:03 | And to make this match the other titles
that are here on the page, which are in
| | 02:07 | Georgia maybe we'd like
these to the be Georgia as well.
| | 02:09 | So, maybe we'll send a font
-family of Georgia, serif.
| | 02:14 | And finally, if you take a look,
now we have a bunch of pink bars here.
| | 02:19 | I'd like to tighten up the
spacing here in between these bars here.
| | 02:22 | So, I'm going to add a
little bit of margin here.
| | 02:24 | If I say margin-bottom and set that to 0.
1ems, that should tighten up my spacing
| | 02:32 | a little bit better.
| | 02:33 | So that looks pretty good.
| | 02:35 | Now, what I'd like to do is style
the links inside of each of those.
| | 02:38 | Right now the links are underlined as
links generally are by default and I'd
| | 02:43 | like to turn them off among other things.
| | 02:45 | So, I'm going to say #content #sliders
h3 a:link, #content #sliders h3 a:visited.
| | 02:59 | Some people just do this with single
declaration with just letter A. I like to
| | 03:02 | call out the link state and the
visited state and style them the same
| | 03:06 | specifically, because sometimes this
works a little bit better with some older
| | 03:09 | browsers you might still be supporting.
| | 03:10 | So, if I say text-decoration of none,
that should get rid of those underlines.
| | 03:15 | So, that's a good thing.
| | 03:17 | Now, I'd always like to
set up a hover state as well.
| | 03:19 | So #content #sliders h3 a:hover and
I'm going to set this to that mint green
| | 03:29 | color that we have on the page.
| | 03:30 | So, I'm going to go to color:#8dadaf.
| | 03:37 | So, now when I roll my mouse over
these words, they're going to turn on light
| | 03:41 | green and that's really all that
I need to add here to this page.
| | 03:46 | So, I'm going to go ahead and Copy out
my multi-page article with sliders, these
| | 03:50 | styles that I just put in here.
| | 03:52 | I'm going to jump over to the backend of Joomla!
| | 03:54 | to Extensions > Template Manager and
I'm going to go to the Templates tab,
| | 03:58 | scroll all the way to the bottom to
the Inside page, going to go into the
| | 04:02 | Stylesheet, and scroll on down to the
end of the content area on the stylesheet.
| | 04:08 | There we go, and right there is where
I'm going to paste in my new styles.
| | 04:13 | So, you'll see that they are there.
| | 04:14 | Go ahead and hit the Save button, and
when I refresh the web page, you'll see
| | 04:20 | that we have our nice hot pink sliders.
| | 04:22 | When I click on them, they open
to show me additional content.
| | 04:26 | This is a much better looking page
actually than the original web site where we
| | 04:30 | had this box over here on the side and
we had limited the content on each page.
| | 04:34 | I think that the look here is a lot
more dynamic, a lot more interesting.
| | 04:37 | You might not agree with my choice
of pink for these bars but there are
| | 04:40 | certainly other colors that you could
have chosen here from the layout, which
| | 04:44 | would also work well.
| | Collapse this transcript |
| Formatting the random image| 00:01 | I'm looking at my Joomla!
| | 00:03 | 1.5 web site and I'm looking at the
Health Benefits page and I'm looking at the
| | 00:06 | left column of this page where you see
there's a random image on the top and
| | 00:10 | underneath there's a quotation, and
I'm really specifically looking at the
| | 00:13 | random image in this video.
| | 00:15 | You can see that that random image is
nicely centered in a nice wide space over
| | 00:19 | there on the left side of the page.
| | 00:21 | And if we take a look at the Joomla!
| | 00:22 | 2.5 web site, you'll see that our
random image doesn't really centered at all,
| | 00:27 | and neither is the quote;
| | 00:28 | they both need a lot to be
desired in terms of formatting.
| | 00:31 | So, what I would like to do is to get
that image sort of centered in that column
| | 00:35 | and I would like to get that quote
centered and formatted as well, which I'm
| | 00:38 | going to take care of in the next video.
| | 00:40 | To get started here working with the
centering of this random image we always
| | 00:43 | have to start by viewing the source, so
we'll go ahead and View Source and I'm
| | 00:48 | going to scroll on down the page until
I find my left div which is right here.
| | 00:53 | So we have a left div, we have a div
with a class of moduletable and then we
| | 00:57 | have a div with a class of random-image.
| | 01:00 | Inside of that we have our random
image and the div closes and then we have a
| | 01:04 | second div which contains our quote.
| | 01:06 | So what I'm going to need to do is I'm
going to need to find a way to format my
| | 01:09 | random image specifically and
then format my quote as well.
| | 01:13 | Now I'm going to go ahead and write some
CSS, so I'm going to go to CSS > Edit CSS.
| | 01:19 | Switch to the Default tab and
scroll on down to the left portion of the
| | 01:22 | Stylesheet and in the left portion
of the stylesheet, you'll find that we
| | 01:26 | actually have a chunk of
code here that's for banners.
| | 01:28 | We're not using banner ads on this site,
I'm going to repurpose this, change it
| | 01:32 | from banners to random image, because
the way this code is currently written
| | 01:39 | it's already applying to the random image.
| | 01:41 | And if I put in a border here, so I can
see what's happening, 1 pixel solid red;
| | 01:47 | you will see that this style for the
moduletable is actually applying to both
| | 01:52 | the top and the bottom module.
| | 01:54 | So, I'm going to make a few changes here.
| | 01:56 | I wanted this to just apply to the
random image, so I'm going to add
| | 01:59 | div.random-image and I'm going to change
the width from 162 pixels to 300 pixels.
| | 02:09 | So that gets me
established with where I want to be.
| | 02:12 | Now we need to center that image inside
of the div, so to do that I'm going to
| | 02:15 | add another style, #left div.moduletable
div.random-image, and then specifically
| | 02:25 | the image inside of that.
| | 02:26 | And here what I'd like to do is
add a margin of 0 pixels 69 pixels.
| | 02:34 | And how did I come up with those numbers?
| | 02:35 | Well, I know the width of the column
overall is 300 pixels and I know the width
| | 02:39 | of my image is a 162.
| | 02:39 | If you do 300-162, you're left with the
number that you then divide in half and
| | 02:46 | that becomes the value for the margin on
either side of the image. So, we're all set.
| | 02:50 | I can take out that a little bit of
code here for the red border, really just
| | 02:53 | there for debug purposes, and now I can
take this little chunk of code about the
| | 02:58 | random image, highlight it,
Ctrl+C or Command+C to copy it.
| | 03:02 | Go to the backend of Joomla!
| | 03:04 | and I'm going to scroll on down to
where I find my banners, there we go.
| | 03:09 | I am going to erase the part of the code
about banners and I'm going to paste in
| | 03:13 | the part about the random image.
| | 03:14 | Go ahead and say Save and now when we
flip to the front end of the web site we
| | 03:18 | should see a random image centered
nicely, and of course, since it's a random
| | 03:22 | image, the image continually
changes every time I hit Refresh.
| | 03:26 | So that's looking good.
| | 03:27 | The next thing we need to do is
format our quote which I'll do in the
| | 03:29 | next video.
| | Collapse this transcript |
| Formatting Rquotes| 00:01 | I am taking a look at the
Health Benefits page on my Joomla!
| | 00:05 | 1.5 web site and now I'm going to
concentrate on the quote end of this.
| | 00:09 | So, if you take a look at the Quote
Module we have here, there is a nice little
| | 00:13 | box that's available and
some text is typed into it.
| | 00:16 | If we look at our Joomla!
| | 00:17 | 2.5 site you'll see that the
formatting leaves a lot to be desired.
| | 00:21 | So we would like to get it to look kind
of like what we had on the 1.5 web site.
| | 00:26 | Let's just take a look at the code really
quickly for how we put together this box.
| | 00:30 | In the 1.5 site if we view the source
and I scroll on down to the part of the
| | 00:35 | page that's on the left side,
you'll see that our div surrounding this
| | 00:40 | particular quote module was a div with a
class of moduletable and also a class of quote.
| | 00:45 | Right now as we know from the previous
video and we can check again right now,
| | 00:50 | we can view the source of this web
page and if I go on down and I view this
| | 00:56 | particular quote module we have a div
with a class of moduletable, but there
| | 01:00 | is no class of quote.
| | 01:01 | If we put the class of quote in place
that should actually take care of most
| | 01:05 | of our formatting issues for us, we
just need to figure out how to get that
| | 01:09 | class of quote in place.
| | 01:11 | The other thing that happens to be
missing between these two is we have some
| | 01:15 | words on the top here that says, What
You're Saying about Chocolate Bliss No.
| | 01:18 | 5, and those words are not
displaying over here on the 2.5 site.
| | 01:22 | Fortunately, most of this can be
configured right from the module itself.
| | 01:25 | So if we hop into the back end of Joomla!
| | 01:28 | and we go to Extensions > Module
Manager and I go down to my Rquotes here.
| | 01:34 | This is our Rquotes module.
| | 01:35 | First of all, let's Show the Title of
this module and let's change the name to
| | 01:40 | exactly what we had in the 1.5 web site,
so I'm just going to highlight that
| | 01:43 | little bit of text, What You're
Saying about Chocolate Bliss No.
| | 01:46 | 5, copy it and paste it on into
the title here for this module.
| | 01:50 | The other thing I would like to do
is to assign a Module class suffix.
| | 01:54 | I talked about module
class suffixes in Joomla! 1.6:
| | 01:59 | Creating and Editing Custom
Templates which also works with Joomla!
| | 02:01 | 1.7 and 2.5, and what you can do is
with module class suffix is we're going to
| | 02:07 | put in the following, a
space followed by the word quote.
| | 02:11 | This will generate a class for us that
we can work with inside of our div with a
| | 02:16 | class of moduletable and will also have
a class of quote, and it should pick up
| | 02:20 | most of the formatting from the classes
that we already have in place without us
| | 02:24 | even touching the CSS for this particular item.
| | 02:27 | So, if I go ahead and say Save & Close
and I refresh the front end of the web
| | 02:31 | site, you'll see that boom, right away
exactly as expected, because we did turn
| | 02:36 | on the title within our module, we had
it set to Hide before, now we have it set
| | 02:40 | to Show with the text that we want and
we set up our Module suffix to have a
| | 02:45 | class of quote which our CSS is already
using for styling this particular page.
| | 02:51 | We now have the HTML in place to pick up
the styling that was already present in
| | 02:55 | our style sheet, we don't even need to
go into the stylesheet to go and modify
| | 02:58 | anything and we're ready to
move on to our next problem.
| | Collapse this transcript |
| Formatting the Our Visitors module on the About page| 00:00 | I am on my Joomla! 1.5 web site and I am looking at the
Our Visitors module which is embedded
| | 00:07 | inside of the About article and you
can see here that the Our Visitors
| | 00:11 | module tells us that we've won guest
online and nicely formatted over to the
| | 00:15 | side of the page here.
| | 00:16 | If I take a look at my Joomla!
| | 00:17 | 2.5 web site that module still displays;
| | 00:20 | it's actually this line of text
here at the start of the About article.
| | 00:24 | So clearly it's lost all of its formatting.
| | 00:26 | Now the way that this was set up
originally was we have a module, they Our
| | 00:30 | Visitors module that lives
inside of the Module Manager.
| | 00:33 | In our About Us article, we added
some special code to allow us to embed a
| | 00:38 | module within an article.
| | 00:40 | That code has changed somewhat since Joomla!
| | 00:42 | 1.5.So let's take a look at that
code and make sure that it's formatted
| | 00:48 | correctly before we decide to
go and mess around with CSS.
| | 00:52 | If it is, in fact, formatted correctly,
we shouldn't have to change the CSS at all.
| | 00:56 | We can just change the code that calls
the module and then the module should be
| | 01:00 | called and displayed correctly.
| | 01:01 | So let's take a look at that really quickly.
| | 01:04 | In the backend of Joomla!, if you go
to Content > Article Manager, and we're
| | 01:10 | going to go into the About article.
| | 01:11 | Here at the top of the page, you'll
see that we have a call to loadposition
| | 01:15 | visitors and what this code means is
we're going to load a module position of
| | 01:21 | the named visitors and that will pull our
module into the article here. In Joomla!
| | 01:27 | 1.7, a new feature was added where you
can specify what kind of divs are wrapped
| | 01:33 | around your particular module and
whether a headline is going to display or not.
| | 01:39 | I think that that's the bit
of code that's missing here.
| | 01:41 | The way we can make this work is
just simply by putting a comma after the
| | 01:44 | word visitors and XHTML.
| | 01:47 | This will wrap a div around Our Visitors
module and make it display on the web page.
| | 01:52 | So, if I just do that and say Save and
I refresh the front end of my web site
| | 01:58 | that's, in fact, all I need to do and
now this is displaying the visitors module
| | 02:04 | with the headline and the text here
that says that we have one guest and no
| | 02:08 | members online rather than just the text
that we had before without the headline
| | 02:12 | and without the formatting.
| | 02:13 | The trick again was where we called
our module position here loadposition
| | 02:18 | visitors, visitors is the
module position name, XHTML.
| | 02:23 | XHTML calls for a div to be
wrapped around that module.
| | 02:27 | It brings in the title if the title is
enabled in the module itself and it will
| | 02:31 | also pull in the formatting from
the stylesheet that's already present.
| | 02:35 | So we're done with this article, you can
go ahead and say Save & Close and we're
| | 02:38 | ready to move onto the next problem.
| | Collapse this transcript |
| Formatting the contact form| 00:00 | I'm on my Joomla! 1.5 web site and I'm taking a
look at our contact form that's here.
| | 00:06 | It was never a stunningly beautiful
contact form to start with, but if you take
| | 00:09 | a look at it, it's even
less stunningly beautiful now.
| | 00:12 | I don't think it had this bug
originally when we built this site with the
| | 00:15 | Enter your Message box being so large that it
stretches outside of the window, but it does now.
| | 00:20 | Browsers march on and bugs can
certainly be introduced into your
| | 00:24 | custom templating design.
| | 00:26 | So it's not an
attractive layout, but it's there.
| | 00:29 | If we take a look at our Joomla!
| | 00:29 | 2.5 site, we see that what we have
here is the contact form is now driven by
| | 00:36 | these accordion panels.
| | 00:38 | They look the way one of the
products pages looked before we formatted
| | 00:41 | those accordion sliders.
| | 00:43 | You actually have to click on the link
for the contact form in order to bring it
| | 00:46 | up and the contact form is not
attractive, so there're all kinds of issues here
| | 00:50 | that we really need to fix.
| | 00:52 | The first one I'd like to fix though
is the fact that these accordion panels
| | 00:55 | exist on the contact form.
| | 00:57 | I think it's just a better user
experience for all of the information to be
| | 01:00 | on the page at once.
| | 01:01 | That way somebody looking at the
contact form knows at a glance that they
| | 01:06 | can call you or they can send you an email
using the form right there in the web site.
| | 01:11 | What we need to do first is we need to turn
off these accordion panels in Joomla! 2.5.
| | 01:14 | So to do that, I'm going to
go in the backend of Joomla!
| | 01:18 | and I'm going to go to Menus > Main Menu and
I'm going to scroll on down to the Contact form.
| | 01:24 | And here in the Contact form, under
Contact Display Options, I'm going to set
| | 01:28 | the Display format to
Plain and say Save & Close.
| | 01:32 | And now when I refresh the contact form,
we have our contact information and
| | 01:38 | the form underneath.
| | 01:39 | And the formatting for the form is even
worse than it was before, but we'll fix that.
| | 01:43 | Now that I have that information
displaying on the page, it's at least there, it
| | 01:48 | has to be there in order for me to
style it, I'm going to go ahead and style it
| | 01:51 | by going to my stylesheet here.
| | 01:53 | In my Web Developer Toolbar, I go to
Edit CSS, switch to the default.css
| | 01:57 | tab, and I'm going to scroll on down to the
end of my content section of my style sheet.
| | 02:03 | And then I'm going to put in space here, I'll
put in a comment that this is the contact form.
| | 02:13 | We can take a look at the HTML that
drives this contact form by looking at the
| | 02:18 | source, and if I scroll on down to the
start of my contact form, you'll see that
| | 02:24 | this is all surrounded by a
div with a class of contact.
| | 02:27 | We have our contact information followed
by some additional information and then
| | 02:31 | we have the form down here in the bottom.
| | 02:33 | The form is surrounded by a
div with a class of contact-form.
| | 02:37 | Knowing this information, we can
go ahead and work on some styling.
| | 02:40 | Words like contact and
contact-form are both h3s as well.
| | 02:45 | If you take a look at the words, they're
black and they really ought to be white
| | 02:49 | to match the other headings on the page I think.
| | 02:51 | I'm going to go ahead and start
putting in some styles here, let's deal with
| | 02:54 | those two h3s first.
| | 02:57 | So this will be content div.contact h3.
| | 03:02 | Let's deal with them.
| | 03:03 | And what I'd like them to be is
white, so the color will become fff.
| | 03:09 | I'd like to tighten up the space at
the bottom of those words with the text
| | 03:13 | that's underneath, because otherwise
they look kind of disjointed, they're not
| | 03:16 | really attached to the
information that goes with them.
| | 03:18 | So I'm going to add that a margin-bottom
of 0.3ems. There we go!
| | 03:25 | That tightens them up nicely.
| | 03:26 | So now that that's in place,
let's work on the form itself.
| | 03:30 | Anytime you see a big border around a form like
that, that always comes from the fieldset tag.
| | 03:34 | So I'm going to go ahead and add a style
here for #content div.contact fieldset,
| | 03:43 | and I'm going to set the
fieldset to have a border of none.
| | 03:48 | And then if you take a look at the
alignment of that form, you see it doesn't
| | 03:51 | quite align exactly.
| | 03:53 | That's because the fieldset may have a
bit of padding or margin on it, so I'm
| | 03:56 | going to add a 0 to those as
well, so padding of 0 and margin.
| | 04:02 | So that pulls out the words there for
Name, Email, and Subject out to be even
| | 04:06 | with everything else.
| | 04:07 | But you see the words there that say Send
an email, they're indented just slightly.
| | 04:11 | That's because that particular little
bit of text is surrounded by a legend
| | 04:16 | tag, which is also part of a form, and
legend tags also have a little bit of
| | 04:20 | padding and margin on them.
| | 04:22 | So I'm going to just add a second
declaration here by putting a Comma after
| | 04:26 | the word fieldset and then
saying #content div.contact legend.
| | 04:33 | And now what that'll do is zero out the
padding and the margin on the legend as
| | 04:37 | well as on the form elements that
are contained within the fieldset.
| | 04:41 | Now everything lines up nicely. All right!
| | 04:42 | So next problem is with this Name,
Email, Subject, and Message, you see how
| | 04:48 | everything is all indented and so forth?
| | 04:50 | Usually when I look at that, that's
kind of a dead giveaway that we're using a
| | 04:53 | definition list, and if we take a
look at our HTML and we look at the form
| | 04:58 | itself, there is our
fieldset, there's our legend tag.
| | 05:01 | You see here we have a dl and we have a
dt and we have some dds, this has to do
| | 05:06 | with definition lists.
| | 05:07 | dl is the tag standing for definition list;
| | 05:10 | it's the tag that surrounds
the whole definition list.
| | 05:13 | dt stands for definition term, and
dd stands for definition definition.
| | 05:18 | The dd is tend to be indented a bit whereas
the dt is tend to line right up with things.
| | 05:24 | So, and you see here that the dt,
the values are things like Name, Email,
| | 05:29 | Subject, various things like that.
| | 05:31 | So we'll write a class for the dds,
#content div.contact dd, we'll set the
| | 05:39 | padding to 0, and we'll
set the margin to 0 as well.
| | 05:44 | So that's pretty good, but I'd like to
have a little bit more space in between
| | 05:48 | each one of these units.
| | 05:49 | I'm going to spell out the margin a
little bit more clearly so we'll have 0 on
| | 05:53 | the top, 0 on the right, may be
1em on the bottom, and 0 on the left.
| | 05:59 | Now we've got a little bit of
space separating up this form.
| | 06:02 | And the very last thing I'd like to do
is I'd like to deal with this big box
| | 06:06 | here with the messages.
| | 06:07 | See how that shoves all the
way over to the edge of the page?
| | 06:10 | It would look so much nicer it may be
that message box ended even with the end
| | 06:14 | of the subject line here.
| | 06:15 | That would give a little bit more
breathing room on the end of the page, plus it
| | 06:19 | would line up under Subject, it
would also just be prettier all around.
| | 06:22 | So how can I select just that
message field to reduce the width on it?
| | 06:27 | Well, if we take a look once again in
our HTML and we find our message box,
| | 06:32 | that's right here under the
textarea, you'll see that it has an ID of
| | 06:37 | jform_contact_message.
| | 06:40 | I'm going to highlight that and copy
that bit of an ID because I'm going to
| | 06:43 | use that in my style.
| | 06:45 | So over here in my stylesheet, I'm
going to add #content div.contact and
| | 06:51 | then that ID of jform_contact_message and
I'm going to set it to a width of 383 pixels.
| | 06:59 | I've already messed around with it a
little bit and 383 got pretty close.
| | 07:04 | It looks like it's not quite aligned,
so maybe more like 380, pull it in a
| | 07:08 | little bit, or maybe even 378.
| | 07:12 | You can keep on messing with it
just a little bit until it gets aligned
| | 07:17 | exactly the way you like.
| | 07:18 | That value is now 375 pixels and it
looks like it's lined up pretty well with
| | 07:23 | the Subject on top of it.
| | 07:25 | But you see how you can change it,
you can go ahead and type in different
| | 07:28 | numbers if you don't think it
looks quite right to you. All right!
| | 07:31 | Now that we've got all of that code
written, let's go ahead and highlight that
| | 07:34 | little chunk for the contact form,
click and drag to highlight it, Ctrl+C or
| | 07:38 | Command+C to copy it.
| | 07:39 | Then I'm going to go into my backend of Joomla!
| | 07:41 | to the Extensions > Template Manager,
to the Templates tab, scroll to the
| | 07:46 | bottom to the Inside template, and
we're going to go to CSS and I'm going to
| | 07:50 | scroll on down to content portion of
my stylesheet just before where we start
| | 07:55 | talking about left and I'm going to
going to paste in the code that I just
| | 07:58 | wrote, and there it is.
| | 08:01 | Go ahead and hit the Save tab on the top.
| | 08:03 | When I refresh my contact form on
the web site, this looks so much better
| | 08:08 | than it did before. So there we go!
| | 08:10 | That's how you format your
contact form inside of Joomla!
| | 08:13 | 2.5.
| | Collapse this transcript |
| Formatting the site map| 00:00 | I am looking at the sitemap on my Joomla!
| | 00:01 | 1.5 site, you can get to the sitemap
using the link at the bottom of the web page.
| | 00:08 | And you see that I have a sitemap
that's showing me all of the various links
| | 00:11 | that are located here on this particular site.
| | 00:13 | They are kind of smooched together and
the formatting isn't totally awesome, but
| | 00:17 | it's pretty easy to read.
| | 00:18 | If I take a look at my
current web site, the Joomla!
| | 00:22 | 1.5 site, these are spaced out a
little bit more and I think I like that look
| | 00:25 | better, but there's a
couple of things that bother me.
| | 00:27 | One is that this is shoved
all the way over this way.
| | 00:31 | I'd like the Site Map, the
words to be aligned with the text;
| | 00:35 | it can all sort of push
back to the left a little bit.
| | 00:38 | The other thing is, there's plenty
of space in between all of these links
| | 00:41 | except in a couple of spots, say
between Products and Product Sampler, between
| | 00:45 | Hot Chocolate and Caramel Truffle,
so I'd like to clean up some of these
| | 00:48 | spacing issues as well.
| | 00:49 | Let's start by taking a look at the
HTML for this page under View Source, and
| | 00:54 | if we scroll on down to where the Site
Map starts, we have a div with an id of
| | 00:58 | Xmap, then we have a ul with a class of level_0,
that's the very top level of the site map.
| | 01:05 | A ul with a class of level_1, that's
the second level of the sitemap for things
| | 01:09 | like the Product Sampler and the hot chocolate.
| | 01:12 | And we also have a ul with the class of
level_2 and that is where you have the
| | 01:16 | flavors of the hot chocolate.
| | 01:17 | I think with those particular handles,
we can go ahead and write some styles
| | 01:21 | that would work great for the site.
| | 01:22 | What I am going to do is edit the CSS
under my Web Developer Toolbar, Edit CSS,
| | 01:28 | switch to the default tab and I am going
to put this in down at the bottom on my
| | 01:33 | content area here just past where I put
the contact form in the previous video.
| | 01:38 | I'll put in a comment that this is the sitemap.
| | 01:41 | Comments are great if you ever
have to go back and edit things later,
| | 01:44 | especially, you know this
site was built four years ago.
| | 01:46 | So I am going to start by saying this
is the content part of the web site and
| | 01:51 | inside of Xmap, we had a div with an ID
of Xmap, and then we are going to refer
| | 01:55 | to ul at level_0, in other words
the very top level bulleted list.
| | 02:02 | And what I'd like to have happen there is
I'd like to not have those bullets at all.
| | 02:06 | So I'll say list-style-type is none;
| | 02:12 | that gets rid of the bullets, and then
I need to pull it all over to the left.
| | 02:16 | Padding in some browsers and margin
in others, so we'll say margin of 0 and
| | 02:21 | we'll also say padding of 0, and that
should pull it over to the left very
| | 02:26 | nicely, so that looks good.
| | 02:27 | Now I just need to fix that little bit
of space in between some of these items.
| | 02:32 | So I'm going to add another style here.
| | 02:35 | This will be #content #xmap ul.level_1.
| | 02:42 | That's the first level.
| | 02:44 | And what I am going to do here
is say, a margin on top of 1em.
| | 02:51 | And so you see the distance between
Products and Product Sampler has opened
| | 02:54 | up nicely, but we still have that
smoochiness between the Hot Chocolate and
| | 02:58 | the Caramel Truffle.
| | 02:59 | Well that's just level 2 for that ul,
so why don't I just add a second
| | 03:04 | declaration here with a Comma after
level_1 and then #content #xmap ul.level_2.
| | 03:12 | So now it will open up the
spacing as well, and that's great.
| | 03:17 | So now the spacing looks like it
matches mostly, and the sitemap is nicely
| | 03:21 | spread out, it's very easy to scan.
| | 03:23 | I think it looks better
than the Joomla! 1.5 site.
| | 03:26 | You could certainly go through and
tighten up the spacing a little bit more if
| | 03:29 | you like, but I like it just the way it is.
| | 03:32 | So I am going to go ahead and copy
this little bit of CSS that I just wrote,
| | 03:35 | Ctrl+C or Command+C to copy it.
| | 03:37 | Then I am going to hop back
into the backend of Joomla!.
| | 03:41 | I already have my Template Manager open.
| | 03:44 | If you don't know how to open this,
you can go back and refer to one of the
| | 03:46 | earlier videos where I show how to get here.
| | 03:48 | And I am going to scroll on down to
the content part of my stylesheet.
| | 03:52 | Just before where the left portion of
the stylesheet starts, I'm going to Ctrl+V
| | 03:57 | or Command+V to paste in my
sitemap CSS and I'll hit the Save button.
| | 04:02 | Now when I refresh my Site Map, you can
see that all of the changes that I just
| | 04:07 | put in place have all been addressed. Great!
| | 04:09 | So, there is just one styling problem
left that I'd like to fix and that's this
| | 04:13 | little issue of the Search box on the
top, which I'll cover in the next video.
| | Collapse this transcript |
| Formatting the search box| 00:01 | I'm back on the About page of our web
site and I'm looking at the search box in
| | 00:05 | the upper right-hand corner here.
| | 00:07 | In the original video that I use these
templates, I had changed the size of the
| | 00:12 | text in the search box to match the
size of the button and that is where the
| | 00:16 | search box is kind of small. In our Joomla!
| | 00:18 | 2.5 site that search box is still kind of big.
| | 00:20 | So we need to adjust the size of the
text that you type into the search box
| | 00:24 | that will make the search box reduce its size
and match up correctly with the Search button.
| | 00:29 | If we take a look at the HTML that
drives the search box here in the Joomla!
| | 00:33 | 1.5 site, just view the source real quick,
you'll see that the search box has an
| | 00:38 | ID right here with the input name
the ID of mod_search_searchword.
| | 00:45 | Now if you take a look at
the front end of the Joomla!
| | 00:48 | 2.5 web site and view the source,
you'll see that the search box has a
| | 00:53 | mod-search-searchword ID here.
| | 00:58 | So, we've gone from underscores and the
ID name to hyphens which is why the
| | 01:02 | formatting is not applying to our new page.
| | 01:05 | So what we need to do is we need
to modify our style which calls for
| | 01:10 | mod_search_searchword and just change
those underscores to hyphens and we
| | 01:15 | should fix the search box.
| | 01:17 | I'm going to open up my style sheet
going to CSS > Edit CSS, switch to the
| | 01:22 | default tab and I'm going to scroll on down
to our search box right here and here we go.
| | 01:30 | We have search div.moduletable input#
mod_search_searchword and I'm going to
| | 01:37 | change those underscores to hyphens and
you'll see that that search box shrinks
| | 01:42 | right up that's literally all we need to do.
| | 01:44 | So, I'm just going to copy that mod-
search-searchword, Ctrl+C or Command+C and
| | 01:52 | then I'm going to jump
into the backend of Joomla!
| | 01:54 | and I already have my Template Manager open.
| | 01:56 | If you don't know how I got here, see
one of the earlier videos and if you
| | 02:00 | scroll on down, we'll find our style
here and we'll change the underscore
| | 02:06 | version of the style to the hyphen
version of the style, there we go.
| | 02:10 | Go ahead and hit the Save button and now
when we refresh the page here on our Joomla!
| | 02:16 | 2.5 web site, you'll see that the
search box is the correct dimensions.
| | 02:21 | So now I have gone through and I've put
in all the modifications that I want to
| | 02:24 | put in for the moment and it's time to
go back and do some testing and see how
| | 02:28 | our designs and our modifications had
held up across browsers and make any
| | 02:33 | tweaks that might be required and I'll
take care of that in the next chapter.
| | Collapse this transcript |
|
|
8. Final Testing and Launching of Your SiteTesting the template in multiple browsers and configuring the Global Configuration| 00:01 | As a very last step in the process of
converting your custom template, it's
| | 00:05 | always wise to take your template
and run it through a bunch of browsers.
| | 00:09 | You should do this on both a PC and a Mac.
| | 00:12 | You should use as many browsers as people
are going to use to come to your web site.
| | 00:15 | A good way to find out what
browsers you should use is to look at your
| | 00:18 | web site's analytics;
| | 00:19 | maybe you have Google Analytics
installed or maybe your web hosting company has
| | 00:24 | some statistics on what browsers
people are using to come visit your site.
| | 00:28 | Those will tell you exactly what you
should be testing in, but as of this
| | 00:31 | recording, generally speaking 4web is
looking at Internet Explorer 7, 8, 9,
| | 00:34 | we're looking at Chrome, the most recent
version in PC and on Mac, we're looking
| | 00:40 | at Firefox, the most recent version on
PC and Mac, and we're looking at Safari,
| | 00:45 | the most recent version on the Mac.
| | 00:47 | So I don't have a Mac available to me,
so I won't be switching over to the Mac,
| | 00:50 | but I will take a look at this on my PC here.
| | 00:53 | And the thing that jumps out at me
immediately is that I've broken my homepage.
| | 00:58 | You see Our Featured Products here
has dumped down the page here along with
| | 01:02 | the Login box, Oh dear!
| | 01:04 | And that's showing up of
course in Chrome and IE as well.
| | 01:07 | Probably when I adjusted the right
content on this page, I managed to shove
| | 01:12 | my content down here.
| | 01:13 | We need to debug this.
| | 01:16 | So to debug this, what I am going to
do is first of all start by viewing my
| | 01:20 | source, and I am going to take a look
at the big divs that hold together that
| | 01:25 | content on the left and the right
side of the page and their names.
| | 01:28 | So we have an ID of contentright,
that's holding the text on the left side of
| | 01:33 | the page oddly, and then we have a div
with an ID of right, that's holding the
| | 01:36 | other things on the right side of the page.
| | 01:38 | So I am going to open up my
stylesheet default.css, and right here the very
| | 01:43 | top, I am going to put-in #contentright,
which was the name of that ID, and I
| | 01:49 | am going to have it display a border of
1 pixel solid, red, and then I'm going
| | 01:55 | to go to just plain old right, and I am going to
have it display a border of 1 pixel solid, blue.
| | 02:04 | This is always a great debugging
technique, because it shows you very quickly
| | 02:08 | where your problem is.
| | 02:09 | So you see here that my contentright
div pushes over just slightly too far and
| | 02:14 | is holding down my right div from
bouncing all the way up the page.
| | 02:18 | So what we need to do is make
contentright just a little bit narrower.
| | 02:22 | So if I scroll on down the page here and
I find my div content and contentright,
| | 02:28 | we probably need to split
these out until their own styles.
| | 02:30 | We have a style right underneath
called contentright with a float of left.
| | 02:34 | What I will do is I will just copy out
this line of code on the padding, copy,
| | 02:39 | and put it right here, and
then I can adjust these things.
| | 02:42 | So it's the right side that's having
trouble, so that's the 25 pixels here.
| | 02:46 | Maybe if I make that 20 pixels, not
quite enough, maybe 18 pixels, well, almost,
| | 02:53 | 17 pixels, well, maybe 15. There we go!
| | 02:58 | So at 15 pixels, now my right side of
the page will jump out back on up to the
| | 03:02 | top and the homepage looks the way it should.
| | 03:05 | So I am going to copy out this style
here of contentright, Ctrl+C to copy it,
| | 03:10 | and I am going to erase these two styles
at the top of the page that I added for
| | 03:14 | debugging about the borders. There we go!
| | 03:16 | So, now things look good here on
the homepage, and I am going to go to
| | 03:21 | the backend of Joomla!
| | 03:22 | and inside of my Template Manager, if
you don't know how to do this, take a look
| | 03:25 | at the previous chapter, it will walk
you through how to get to the screen.
| | 03:28 | I am going to go ahead and add, down
here under Content, my contentright
| | 03:33 | style, I am going to add my new content
right here, and go ahead and hit the Save button.
| | 03:38 | Now, when I refresh the homepage, it
looks like my content has gone ahead and
| | 03:42 | jumped on up the page and things
look like they're formatted correctly.
| | 03:46 | Let me double-check with the Health
Benefits page and the text is not smudged
| | 03:49 | into the side of the page here either.
| | 03:51 | So it looks like we've
squashed that particular bug.
| | 03:53 | The other thing I'd like to do before I
launch is to make sure that we have all
| | 03:57 | of the settings correct on this web site.
| | 03:59 | Right now, we have the words Health
Benefits up here in the HTML page title.
| | 04:04 | I'd like to include the web
site name with that as well.
| | 04:07 | Here in the backend of Joomla!, I am
going to get out of my Template Manager by
| | 04:10 | saying Save & Close and then close
again, and I am going to go over to Site >
| | 04:14 | Global Configuration, and I'm going to
make sure that Include Site Name in Page
| | 04:18 | Titles is set to Before, it's my
personal preference, you can certainly use
| | 04:23 | After if you wish, and I am going to go
ahead and say Save, and then that way,
| | 04:27 | we can be sure that we have Bliss No.
| | 04:28 | 5 Chocolate-Health Benefits,
a much better HTML page title.
| | 04:33 | The other thing we ought to do while
we're in here in the Global Configuration,
| | 04:36 | if you've got out of it like I did, go
ahead and go back into it, is down here
| | 04:40 | at the bottom of the screen, check your
Meta Description and your Meta Keywords
| | 04:44 | for this web site, and see
if you have any in place.
| | 04:47 | If you have some in place, then great,
and if you don't have any at all, you
| | 04:51 | might want to type some in.
| | 04:52 | We can just go ahead and steal some text
right here from the homepage of the web site.
| | 04:56 | And I'm just going to go ahead and
copy this first sentence about Bliss No.
| | 05:00 | 5 is the first name in
handmade quality chocolate.
| | 05:03 | A wonderful way to treat someone special.
| | 05:05 | I am going to make that my site description,
and my keywords, I'll go ahead and type-in.
| | 05:09 | It will be chocolate, all natural, hot
chocolate, Bliss bars, pastilles, and
| | 05:18 | that's probably pretty good.
| | 05:20 | Always good to have that information in
there, even though search engines don't
| | 05:23 | necessarily put that much information
on the Meta Description and the Meta
| | 05:26 | Keywords, it's still particularly
important to have them in place for those
| | 05:30 | search engines that do.
| | 05:31 | And of course the Meta Description
ones that are being used by Google as a
| | 05:34 | description for your site in its search results.
| | 05:37 | So go ahead and say Save & Close.
| | 05:39 | And if you refresh your page, you won't
see any difference here on the front end
| | 05:42 | of the web site, but if you take a look
at the code, you will see in fact that
| | 05:46 | the metadata is now included.
| | 05:48 | So we've tested this web site now in
multiple browsers, just click through all
| | 05:52 | the pages, make sure that they look
the same in all of the browsers whether
| | 05:55 | that's Firefox, Chrome, IE, make sure
you take a look at it on the Mac as well
| | 06:00 | and it's a good opportunity to fix any
minor bugs that you might find in the way
| | 06:04 | things look or how they function.
| | 06:06 | Always good to do before you launch
your web site and then discover after the
| | 06:09 | fact when the site is live
that you might have a few issues.
| | 06:12 | So do take a little bit of
time to do this carefully.
| | Collapse this transcript |
| Launching the Joomla! 2.5 site| 00:01 | Now that we've migrated our web site
and we have thoroughly tested it both
| | 00:04 | the functionality and the layout,
we're ready to go ahead and launch this and
| | 00:08 | take down our Joomla!
| | 00:10 | 1.5 web site and replace it
with our Joomla! 2.5 web site.
| | 00:13 | The process I'm going to show you
doesn't matter whether you use jUpgrade for
| | 00:17 | moving your site or SP Upgrade.
| | 00:18 | Either way, the process for launching
your site will be exactly the same, and
| | 00:22 | either way, the very first thing you
should do before you do anything at all is
| | 00:27 | do a complete backup of your Joomla!
| | 00:29 | 1.5 web site and make sure you have
that backup handy and available to you just
| | 00:35 | in case anything goes
wrong with the launch process.
| | 00:38 | I'd also recommend making
a backup of your Joomla!
| | 00:40 | 2.5 web site and having that available
to you just in case anything goes wrong.
| | 00:46 | It's a good thing to archive, so that
you know this was the state of the web
| | 00:49 | site when I launched it on this particular day.
| | 00:52 | Once you have those backups in place,
and don't do anything until you do, then
| | 00:57 | you're ready to go forward
and launch your web site.
| | 01:00 | So, I'm here in my Control Panel for
my web hosting account and I'm going to
| | 01:04 | go to my File Manager.
| | 01:05 | So, I'm going to go ahead
and click on File Manage here.
| | 01:09 | And remember, this is my web hosting
space that is now containing both my 1.5
| | 01:14 | and my 2.5 web site.
| | 01:16 | The first thing I'm going to do is delete
all the files associated with Joomla! 1.5.
| | 01:20 | I'm going to go ahead and highlight
everything here, holding down my Shift key
| | 01:24 | and clicking all of the files that are
here are now highlighted and I'm going
| | 01:29 | to hold down my Ctrl or Command key and click
on spupgrade, so that that one is not selected.
| | 01:35 | That is the only thing we
need to keep is spupgrade.
| | 01:39 | Go ahead and hit the Delete button on
the top of the screen and make sure you
| | 01:43 | made those backups first.
| | 01:45 | You did make those backups, right? Bye-bye!
| | 01:48 | So, what's left is the spupgrade folder.
| | 01:52 | All we need to do here is with all of
these files and folders, we need to take
| | 01:56 | them, and I'm highlighting all of
those, and in the case of this particular
| | 02:01 | interface, I can click and drag these
directly into public_html over here on
| | 02:05 | this side and let it go and this should
move all of my files and folders out of
| | 02:11 | the spupgrade directory and
into the main public_html folder.
| | 02:16 | So, if I go, now click on public_html,
I see that I have a site in place here
| | 02:21 | and the spupgrade folder itself is empty.
| | 02:25 | So, I can highlight the
spupgrade folder and click on Delete.
| | 02:29 | There we go and if I take a look at
that front end of the web site, I'll see
| | 02:32 | that my web site is here and in place.
| | 02:34 | Now, one of the things that you saw
here is when I first launched this web
| | 02:38 | site, I had lost some of the formatting that I
had put in place for the SP Upgrade web site.
| | 02:44 | That's because when I went to my top-
level URL 4webinc.net/~migrate, I'm going
| | 02:51 | to a page that is cached the
old Joomla! 1.5 stylesheet.
| | 02:56 | So, it's applying the old Joomla!
| | 02:57 | 1.5 stylesheet to my freshly
redone Joomla! 2.5 web site.
| | 03:02 | Make sure you clear your cache if you
see that happening, if you feel like
| | 03:05 | you've lost your stylesheet changes
or hit the Refresh button here on your
| | 03:09 | computer and things should hopefully
load the new stylesheet, so that you'll
| | 03:13 | see that we have the correct pictures
and correct quotes in place that they're
| | 03:18 | aligned the way that we remember that we align
them on the SP Upgrade portion of the web site.
| | 03:24 | And if they're not set up that way,
you may have to actually go through and
| | 03:28 | manually clear the cache on your
browser or you may need to close your
| | 03:31 | browser and reopen it depending on how tough your
browser is to let go of its old information. Okay.
| | 03:37 | So back here in your Control Panel,
the last thing we need to do is edit the
| | 03:43 | configuration.php file, and I'm going
to click on that and I'm going to click
| | 03:47 | on the Edit button.
| | 03:49 | Now, the fact that the web site came up
it all indicates that the database was
| | 03:52 | accessible whether we were in the
root of the web site or in the spupgrade
| | 03:56 | folder, so that's not
anything we need to change.
| | 03:59 | What we do need to change is down
here the path to our log path and our tmp
| | 04:05 | paths are no longer correct.
| | 04:07 | It's just going to be public_
html/logs and public_html/tmp.
| | 04:12 | Make sure you take a look at that and
adjust that log and the tmp path to the
| | 04:16 | correct path for the new
location of the web site.
| | 04:19 | You'll just have to do that here in
configuration.php, and go ahead and save your changes.
| | 04:24 | That shouldn't affect the functioning
of your web site, the paths to the log
| | 04:27 | site and the tmp site, but it may
affect things later if you decide to install
| | 04:32 | new extensions or install new
templates for your web site.
| | 04:35 | So, congratulations!
| | 04:36 | You have now migrated a web site Joomla!
| | 04:38 | 1.5 to 2.5 and you've launched it on
your web server and it's live and out there
| | 04:44 | for the whole world to see.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Hi! This is Jen Kramer.
| | 00:02 | Thanks so much for watching Joomla!
| | 00:04 | 1.5 to 2.5 Migrating your web site.
| | 00:08 | I really appreciate everybody who
watches my videos here at lynda.com and if
| | 00:12 | you're looking for more things to
watch by me and you haven't watched 2.5
| | 00:16 | Essential Training, I strongly
recommend you go take a look at that one.
| | 00:20 | If you want to learn more about creating
custom templates in Joomla! My Joomla!
| | 00:23 | 1.6 Creating and Editing Custom
Templates works great with Joomla!
| | 00:28 | 1.7 and with Joomla! 2.5.
| | 00:32 | And if you have a big new project
that you're working on and you need some
| | 00:35 | way of organizing all of your content, be
sure to check out Web Site Strategy and Planning.
| | 00:41 | So thanks again so much for watching!
| | 00:43 | If I see you at a Joomla!
| | 00:44 | Day Or a Trade Show, be sure to
come on up and introduce yourself.
| | 00:48 | I love to meet the Lydna.com subscribers
and love to hear about your experiences
| | 00:52 | working with my videos.
| | 00:54 | So I hope to see you around in person,
otherwise I'll see you in another title.
| | Collapse this transcript |
|
|
