Hey there, Joomla fans! Tim Davis here. I'm a Joomla fan too. Today I'm not coming
from MacGregor, Manitoba, though I was in MacGregor, Manitoba in April this year
and that's when I shot this video on my phone and if you want to see the full
video of this train going by I'll put a link in the description below.
Recently in the Joomla group on Facebook there's been some discussions about the trials
and travails of developing a template or a new template on a live site and
oftentimes what people do is they will develop, they'll make a copy of the site
that the new template is for, and they will work on that template and get
everything together on a separate development site, and then once
everything is perfect they'll move the template back over to the live site. But
that can create some complications, especially if the template is for a live
site that people are adding content to, because if you have a copy of the site
and you put the new template on it and you just want to move that copy over and
make that the live site people who have added content or if there's been changes
by other users, then you're kind of stuck, you have to merge all these
things together. But there is a way to develop a template for a new site, a live
site right on the live site without people even knowing that you're doing it
and that's what this tutorial is about. We're going to take a look at two
examples. One's a very basic example of how to do this, but then there's another.
The second example is a more complex one but it's a more common
solution or a more common situation that developers run into when they're trying
to hot-swap a new template onto a live Joomla site. So let's head on over to the
computer and check it out.
Now before we go and look at how to develop a new template on a live Joomla
site so that nobody else can see what is taking place or that it's being developed,
I just want to thank you for your support of this channel and appreciate
you tuning in. If you haven't already subscribed and you think that it's
a worthwhile endeavor that would be great please click the subscribe button which
I think is down there, either that or it's in the other corner, and ring that
bell so you get notifications not only of new tutorials but of new live streams
when they come out, and give the video a like. That would be great. Okay, let's head
on over to the computer here, change our attention to the screen. We're here at
the basicjoomla.com site. This site is live and even though maybe from
previous tutorials you have seen that I don't mind having an ugly site to do a
tutorial on, I'm trying to keep this one looking good for when people swing by. So
I'm going to change a template, add a template, to this live site as an example
and as I said in the introduction we're going to look at a simple example of how
to do this and then a more complex one. First a simple example. Let's go into the
back end of the site and I'm already at extensions and templates. And what I've
done ahead of this tutorial is I've installed from Rocket Theme, Hydrogen,
the Gantry 5 template, but we're going to look at that as the more complex example
later on, and that second example is going to help you whether or not you use
Rocket Theme templates, it's just basically having a second template of some type.
But first of all, what we're going to do is go down to protostar and I'm going to
click the box next to it and I'm going to duplicate it, I'm going to make a second
instance of protostar. There it is. Now let's click on the title, protostar
default (2). Why don't I just make this, we'll just name it
"Copy" and I'm going to make some changes to this template. Basically I'm going to change
the color of the template. Let's go with something that's a nice
orange, and the background color, let's go with something that is, let's see, it's already
blue, let's go with the pink. It's not going to look very good, but that's alright.
Basically you could make whatever changes that you want to, but that will
be enough for our purposes. So I'm going to save and close that. So now we have a
second version of protostar template that we can play around with.
Next, what we're going to do is we're going to create a new article. So go
content, articles, add new article, and we're going to give it a title, "New
Template Test" (of course, you could name it whatever you want), and I'm going to
put some text in here. Now I'm going to use from Regular Labs Dummy Content, and
basically I can insert all kinds of Lorem Ipsum and all kinds of stuff just
to play around with the layout of something. So we're just going to
go insert content, and now to put in some nice random stuff for us here to use.
That's great. The next thing that we're going to do over here - I don't know why it
shows trash. Ah probably cuz I'm in trash in the
articles manager - I'm going to make this published, but I want to make sure that
search engines, at least the ones that pay attention to robots.txt, don't pick
this up when they're by the site, because remember, this is a live site. So go to
Publishing, and I'm going to go to Robots and I'm going to go "No index, no follow".
So that will hide this page from the better search engines. Some search
engines don't pay attention to those things. Basically so we have this new
template here, sorry this new article, and we're going to Save &
Close that. The next thing that we want to do is to create a new menu.
(mumbling) Let's create a new menu. So I'm
going to click on Menus and I'm going to go Manage
and Add New Menu. Let's just call this "New Template". We're not even going to use
this menu, but we want it to be existing there. I call it "New Template" and the
description is "New Template" (you can see as these things are popping up that I've
done some experimenting here before) and we're going to save & close this new menu.
Now the last thing that we need to do is create a menu item, and so we will click
on Menu Items, we will click New and that menu item we're going to call "New
Template Test" in this case. All right. Now at this point you could make this any
kind of menu item type that you want. Especially you can change this
later on for different types to see how your new template looks in those
sections for those different menu types. But what I'm going to do is just link
this to an article, and we're going to link to the single article that we just
created which is New Template Test. Now again, we're going to go to Metadata for
this menu item and we're going to go over to Robots and again we're going to
select "No index, no follow". Now let's go back to Details because there's one more
thing we need to do. Over here we're going to select the menu that this item is
appearing on, this menu item appears on, and we're going to select the new
template menu. Now, what's significant about putting it on the new template
menu is, is this menu appears nowhere - it's not appearing on the live site
anywhere, it's actually not even going to appear on the experimental template. So
what we've done is we've created a menu item assigned it to a menu that is not
going to show up anywhere but it is going to help us to find a URL that we
can assign. But before we do that, let's go Template Style, let's assign this
menu item to protostar copy. Now we could go, there's
a number of ways that we can do that. You could go into the template area and you
could assign that to be the template for this menu link. But we have the
convenience of doing it right here. So we've got the template style in, we've
assigned it to this new template that we've made. That's everything that we
need to do. I'm just going to save this. I'm not going to save & close because
I want you to see now we're going to view this link. I'm going to go up
here to the top right. Now you'll notice I have the option to go right to that
single article. That's because I'm using Regular Labs Better Preview which is
available from the Regular Labs site, and I will put drop down cards
and or links to all of these different extensions and things I refer to in the
video description below. So let's preview this new single article that we've made
and you'll notice there's the article and here it is in the template that's
copied with that pink that we made. So not too much orange, there's orange in
the links there, but as you can see this is ...
article appears nowhere on the live site where people can see it because right
now there's only on my basic Joomla site Home, Giveaways, and Joomla tutorials.
So basically what we have have here is a template that we can
now play around with simply by viewing this URL. Now you might not always want
to go back into the menu items and then do the template preview
so basically just right click and copy that URL and paste it somewhere so that
you can always refer back to it. But if you do want to find it again, simply go
into the menu item for it and go up to the preview. If you're not using Better
Preview, and you just click Home you're not going to find it. So the object of this
again is to hide this page from everybody and the search engines so that
you can experiment. So now to experiment - if we close this here, this tab - let's go
to Extensions and Templates and we will go to protostar-copy and
let's say we didn't really like that pink very much. We want something that's
more of a green. Let's go with that there. We save this. Now you notice
that I have another extension from Regular Labs Cache Cleaner. Every time I
save something it empties the cache. That's really great because when you're
developing a template you can actually end up going back to a preview,
refreshing and seeing something served up from the cache of your Joomla site if
you're using caching. So just for the ease of developing, I use cache cleaner
and it cleans the cache from your safe but also puts a handy button there and
there's also a handy clean cache button down here. Let's go over to this tab here.
Now we can refresh and you get the idea. We're working on this template,
we're making changes to this but as we go to the rest of the site it is the
same old template that we had before. Now, one of the challenges of working
with a copy of this basic template like that we've done with protostar is that
if I want to change some of the formatting to this module, it makes it
complicated because I will in fact be making changes to a live module that
appears on the live site. So you if you don't want to mess around with the look
of it your kind of stuck in that sense with this particular template, although
I'm sure someone out there can find a more complex or a more elegant solution
even with protostar. So let's move on to the the more complex
example of how you can edit and modify the modules on your live site
within the new template without wrecking the look of the old template,
because remember this is our goal; we don't want our users and we
don't want our clients that we're working on sites for to see that we've
messed up the site trying to fix things. So what I'm going to do here is we will go
back to templates. I'm going to close this protostar-copy and I'm going to
go into the new template.
Now, let's click on, we'll just go Hydrogen-Default. I'm going to go up
here and I'm going to assign Hydrogen Default through to the menu item down
here that we made called, here we go, "New Template > New Template Test".
So by doing this I'm actually un-assigning protostar-copy from this menu thing
and I'm assigning this template to it. Now don't get too lost
in the sense of me using Rocket Theme here. You would do this
however you would assign the new template that you're adding to your site
that you want to work on, however it is used, however it is assigned to menu
items, that's what you're going to do. But this step here is important because I
need to assign this template to the new page that I've made. Now when I refresh...
... it looks like... am I going to get the old green site? Yes, because saving here does
not clean the cache with cache cleaner. That's why we have this handy dandy
button down here at the bottom. We'll clean the cache there, then I'm going to go
back up here and I'm going to refresh. And now here's the Gantry 5 template
that I've just assigned to the test page and now we're seeing it in here. Next
what I can do is I can start to add modules and other
elements to this new template layout. But ... again, if we
change existing modules that's going to break the live site. So what we want to
do here, for the purposes of development, is go to Extensions, and Modules, and I'm
going to go "Open in a new tab". Here are the modules that I have on the site...
Sorry to interrupt myself, but I forgot to mention that I use Advanced Module
Manager from Regular Labs as well, so my module management area will look
different than yours if you are using the stock module manager in Joomla.
Let's go to the search tools and select the status for those that are published and
let's go down to, let's see, here's the YouTube channel subscribe button.
Subscribe button, YouTube subscribe basic Joomla. I'm going to click this module
and I'm going to duplicate it. And I don't see it, but I realized why I don't
see it because I'm only showing what is published here. So let's switch, let's
clear the filter here and then we will sort by the ID in this column here.
Here's the module here that we just made a copy of, subscribe to. So what I'm going
to do is first of all because this is unpublished which is great because
otherwise it would be showing up on the live site, I'm going to go in, I'm going
to delete the position so it's not assigned anywhere. Alright? And I'm going
to, we'll just leave this ... subscribe 2, but down here in the description I'm
going to change this to, let's even just for something to grab attention,
New Template.
YouTube subscribe - Basic Joomla. Alright. We'll just leave in the title as
Subscribe 2 and we will go Save & Close. Now at this point what you would
do is you would add this module to your new template, which ever it is, in
whatever way your template system does. You may very well, if we just go back
into Subscribe 2 here, you may very well put in the position that exists on your
template. Now you want to make sure that the new template does not have the same
template names or template positions as your old template otherwise you're going
to mess up your live site and again this is where it gets more complex. You need
to be keeping track of everything: know your module positions, understand how
your old template works, and what your new template looks like, and how it's
constructed, and what its module areas or positions are like so there's not, just
to make sure there is not overlap. In this case for me, I don't even need to put a
position in because what I'm going to do is, we'll just close this here, I will now
go to the layout for this hydrogen template and I'm going to assign it to a
spot on this template. Now it just so happens with Rocket Theme, you can have a
base layout and all your other layouts will draw from it unless you turn that
off, so I'm actually going to go to the base outline and very quickly just go
here is our page content module. I'm going to take a module instance and I'm
going to put it into there, the way it works in the system, I give that 25
percent and then I'm going to click the gear and what module do I want to put in
here? I want to put in subscribe 2. There I remember the name. I go select. I apply
and save. I go down here and clean the cache. I go to the new template test page,
I refresh and I see that it doesn't appear. So I've
missed something. Let me go back to the module manager and look. Oh yes. It is not
published so I will publish that. That's an important step.
Clean the cache, go back to the page and
refresh, and now we see that it does appear. So now I can
continue to modify this new template the exact way that I want. I'm creating
menus to go wherever I want them to. Now this menu here is showing up from
the live site also so I'll have to be careful to make my own menu for the top here and
add other modules and change the CSS and change the colors and everything that I
can do with this template and you will do the same with your new template but
all of this is happening without there being any disruption to
the live site. It's all happening in the background and the advantage of that is
if this site were a site that a lot of people were adding content to or you're
working on a site for a client and they are adding content and you have
duplicated this site and taken it somewhere to work on the new template
and then bring it back to make it live, you've got to somehow incorporate the
new content that was added, you have to somehow move ... it can become very
complicated. Sometimes that's your only option for the kind of updating that you
want to do, but in this case and in a lot of cases, you can get away with having a
template, a new template on a Joomla site that is live, work on the new
template until it's exactly how you want and then of course what you're going to
do is you're going to take that new template and make it the default
template for the site switching everything over just like that and
saving you a lot of effort, if you can, through those other steps.
So I hope that that was helpful for you, and I hope that that turns out to be a
handy tutorial, some handy steps to save you a lot of the pain and grief
of modifying a new template on a live Joomla site. So if this tutorial was
helpful and if I've earned it, please subscribe, ring that bell so you get
notification of new tutorials and live streams, and hey do you have any other
suggestions for what could be incorporated or some different ways
or methods that could be built into this process here? Maybe I've missed
something, maybe there's another way to handle it or to approach it? Leave a
comment in the comment section below. So thank you again for your support of this
channel. Thanks for tuning in. As always, enjoy your Joomla sites. God bless.
For more infomation >> Pause Café Episode 15 : Porte à porte - Duration: 9:24. 
For more infomation >> COMO ORAR CORRETAMENTE A DEUS E TER A ORAÇÃO ATENDIDA - #71 Momento com Deus - Duration: 3:23. 
For more infomation >> КОФЕ И КОФЕИН. Польза или вред? Наркотик или нет? Обезвоживание, раковые опухоли и гастрит! - Duration: 2:25. 
For more infomation >> Matthew - Lee Mack's fidget spinner? Rev. Richard's atheist? Clive Myrie's cameraman? [CC][HD] - Duration: 9:37. 
For more infomation >> Christ Church Cathedral Reinstatement Bill- Committee Stage- Taken as one debate - Video 4 - Duration: 5:11. 
For more infomation >> 【漫画動画】 ポケモン漫画: ポケモンORAS小ネタ漫画まとめ Part 2【Twitter 話題】 - Duration: 7:38. 
For more infomation >> LP World of Tanks #1 - Duration: 5:37. 
For more infomation >> YouTube 香港2017年十一月排行榜 | 本視頻排名僅供參考！ - Duration: 5:47. 
For more infomation >> This Guy Makes How Much?
For more infomation >> Voici ce que cette ligne sur la paume de la main révèle sur votre vie et votre personnalité - Duration: 3:57. 
For more infomation >> Volvo Trucks – Témoignage : la conduite en Sybérie - Duration: 3:52. 
For more infomation >> Nicolaï Rimski Rorsakov - La fille de neige ( acte III ) - Duration: 3:52. 
For more infomation >> Les pronostics de KJAMES PRONO : Faut-il les SUIVRE ? - Duration: 8:29. 
For more infomation >> Didier Roustan n'a pas été emballé par Marseille - Duration: 2:11. 
For more infomation >> Hommage à Johnny Hallyday : pourquoi Marine Le Pen n'était pas présente - Duration: 2:50. 
For more infomation >> Ce masque a le pouvoir de lisser le visage et d'estomper les rides naturellement et rapidement - Duration: 5:28. 
For more infomation >> Nouvelle Mercedes CLS : tarifs - Duration: 3:24. 
For more infomation >> La saga des Rolls-Royce Phantom - Duration: 6:43. 
For more infomation >> Fynsk Forfatterstafet Claus M Lohman - Duration: 2:21. 
For more infomation >> NEW YEAR IN EGYPT! Rhythmic gymnastics in Hurghada. New Year's fair in El Gouna - Duration: 8:07. 
For more infomation >> Manchester Premier Inn North Review | Holiday Extras - Duration: 1:30. 
For more infomation >> Hong Kong Bus KMB ATR217 JN9038 九巴 Dennis Trident Duple Mastic Body 12m @ 298E 坑口站-將軍澳工業邨 - Duration: 10:10. 
For more infomation >> 松本人志に宣戦布告か！？ウーマン村本がM-1審査員に「大苦言」の波紋 - Duration: 3:33. 
For more infomation >> Как оформить куплю-продажу земельного участка? / МОИ ПРАВА - Duration: 1:46. 
For more infomation >> WHATSAPP STATUS VIDEO | WHATSAPP STATUS VIDEO 2017 - Duration: 0:30. 
Không có nhận xét nào:
Đăng nhận xét