FREELessons: 35Length: 7.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.5 Menu Items and Components

Continuing with menu items, we need to make sure we have a good understanding of the options available. We also need to see the reflected changes on the front-end. Towards the end of this lesson we’ll look at the global settings for the menu manager component.

4.5 Menu Items and Components

Hi guys. Welcome back to a beginner's guide to using Joomla and in this lesson, we want to continue on learning about the options of the menu items. So in the last lesson we were on the Options tab and we were talking about how you can override the global settings for displaying let's say an article. But however, this may vary and the options and tabs may change depending upon the menu type you've selected. But however in general they could possibly have a link type tap. And this allows us to change the HTML and also a little bit of the content of the menu item. So first of all, we have the link title attribute. And what I can do right here is define the Title Attribute value as Article Test. Now the reason why the Title Attribute is very important is for accessibility. So users with visual impairment may not be able to see the link that clearly. Normally, we'll have a narrator program open to help them navigate the page. When they hover over the menu item, the narrator program will read out the value of the title attribute, so the user that may not be able to see the link will at least be able to hear what they're about to click on. On top of that, we also have the link CSS style. This allows us to define the class attribute, we can apply multiple classes to a menu item, such as article and art. So now we're applying two CSS classes to this menu item. Now on top of that we also can define a link image. So, I can go ahead and say select. It'll open up the Upload Manager and I can select an image that I can include into the menu item. I can hover over the I icon to get a quick preview and also I can clear it out if I don't want my link to have that little image. On top of that we can also say do we want to add the menu title? So currently, it's yes, so it's adding the menu title right here to the menu item. But, however I can say no, which means that it will not add the menu item title to the link. So, I'm just gonna reset everything back to its default, and then we can take a look at the page display tab. So, the first option we have is the browser page title. Now, by default, the page title will be set to the menu item title. So if I go ahead and click on the Test Article Link, the page title will be Test Article Link. But I can change it, so it can be different. So I'm gonna say A Different Title. Go ahead and save that, and hit Refresh and now you'll notice we have a different title for our page. On top of that, we can also show or hide the page heading. So I'm gonna go ahead and show the page heading and hit refresh. There is the page heading. Now you can also have the page heading different from the page title. By default the page heading is set to the page title, but I'm just gonna change that to Heading, save it. And now you'll notice we've changed the heading. On top of that we can also have a class associated with this page and the elements inside the page and you can also have multiple classes as well. So I'm just going to say -test-article, and you'll see why I've done that in just a second. Then I can have multiple classes so I'll put a space in here, anotherClass. So if I go ahead and save that, we are now able to see how the class is being applied to all the elements inside of the page. And also we have the anotherClass being associated with different elements in the page. So we can apply custom styling to the contents of this page. So right now what I'm going to do is simply set everything back to its default, and go ahead and save it. And now, we can move on to the Metadata tab. So, first of all, we have the Meta Description for the page. This helps search engines determine what this page is all about, and the users get to see it in search results, so it's very very very important that we do provide the meta description. So at least they have a good understanding of what this page is all about. On top of that, we can also have meta key words, again, this is very specific to this page, and you can have key words and also key phrases, and you separate them out with commas. On top of that, we can also define the robots. So again when Google sends out its robots and other search engines. They crawl through your entire site and you can tell them whether you want them to index the page and follow the links or don't index the page and don't follow the links and all the other variations, as well. And what's really great about that is we have control over what content is allowed in the search engine results. On top of that, we also have the secure setting. This is really great. First of all we have ignore or we could say specifically on or off. So this determines whether we go through SSL encryption. So if we say off, it will make sure that if it isn't HTTPS encrypted area, it will go back to HTTP. If it's set to on, it will make sure that when the user clicks that link, it will go through a secure HTTPS connection. And then of course ignore means it doesn't really matter. If it's on an HTTPS or an HTTP when they click the link it will stay the same, either http or https. It won't change the Type of connection that we have with the server. So if we save this now and have a quick preview you'll notice in the head tag, so the header of the page, we have the meta description. We also have the meta key words and key phrases. And we also have the robots meta, which says to the search engines whether to index the contents on the page and also whether it's allowed to follow links on the page, as well. Then also you'll notice the connection. So I set secure to on, which means that we have to go through a secure connection to view the page. This ensures that the data submitted on this page is encrypted between the user's browser and the server, this is good to protect your users. Now you don't need encryption on a page like this, I just did it as an example, but however when you have a login form or whenever you have a payment gateway or anything like that where the user is submitting data to your server. It's your job as an administrator to make sure that you minimize the risk to your users and so what you need to do is encrypt that data. So that no ease droppers can obtain that information that puts your users at risk. Then, finally, we have the Module Assignment tab. So remember with modules, they are snippets of code that are being injected into the page at a certain position. Now, again, the modules are being assigned through the menu item. This is very important that you remember this, because again the menu item represents the page and determines how the page will be rendered as we've just seen. So, when we assign modules we assign them through the menu items and so here I can see which modules have been assigned to this menu item, or not assigned. I can also hide unassigned modules if I want to. So any modules that are being excluded on this page will not show up. But I'm gonna leave that unchecked so we do see hidden modules. And for example we have Test_Menu2, that's public so that's the access level, the viewing access level. And then also it's in the footer position but however I can take the test menu two module and I can say right don't assign it to the test article link menu item. This will then say that you should not have the Test Menu 2 in the footer to be rendered and displayed on that specific page. So hopefully now you can understand menu items and you understand the significance of them particularly in Joomla. So now what we need to do is go ahead and take a look underneath the system and then global configuration and take a look at the components. So we're taking a look at the global configuration of the menu's manager component. So what we can do is we can take a look at the default settings that I can apply to a page display. So what I can do is, by default, I can set a page title. Now if I leave this blank, then the default will be based on the menu item title as you've seen. Also, I can say, show or hide the page heading, the header one. Again, I can overwrite this at a later date if I want to for specific menu items. Again, we're just setting the defaults, we're not setting the be all and end all. And also I can provide a Page Heading, again, it's optional, but however I can override it and the same with the Page Class as well. On top of that we have the Permissions for this component. So now what I'd like to do is target the Test Manager user group and in Google Chrome I'm logged in as the Test Manager right here in the administrator backend. And currently I don't have a menu option to access the menu manager component. So. Let's go back and we can see here that access to this component in the back end is not allowed. So what I'd like to do is say allowed. So now we can gain access to this component in the back end. So I've hit refresh, we now have the menu item menus and that allow us to gain access to the menu manager. And inside the menu manager what I can do is create a new menu and also I can create new menu item and so on and so forth. So now let's go back and take a look at those permissions. So you'll notice right here that we have configure. So again sometimes you will have menu items that go missing. So that has to do with configuration. But also, you are not allowed to configure currently this component if you are a Task Manager. So I'm gonna set that to Allowed and save it. Now, you'll notice that when I refresh, all of this stays the same and pretty much all of the content. But, there will be one thing missing, the options button right here. So, the options button is missing because we're not allowed to configure this but now, I set it to allowed. We are allowed to configure this component. So if I go ahead and refresh, we now have the options button and now we can start to configure the global settings for this component. So that's pretty nice, now also what we can do is take a look at a few more permissions, such as the create permission. So, is the test manager user group allowed to create content within the Menus Manager component. So, I can set that to deny and now they cannot create anything within that component. So that's, menus and menu items. They're not allowed to create menus and menu items in this component anymore. Also, I can say denied for deleting. So that means they cannot delete items out of the trash, so they can't delete menus or menu items out of the trash. I can also say they are not allowed to edit the content within this component and on top of that we also have the edit state. So they're not allowed to no longer change the state, they've set that to denied, so that means published, unpublished, archived, or even sticking it in the trash is again changing the state and that is no longer allowed. So very quickly I just wanna talk about the configure action because it has a grave importance. So we've allowed this user group to configure this component. Now even though all of these are set to Denied, when I go to save this these should surely go to Denied. However, when I save it, it's locked on allowed and then it says in brackets, super user. Because when you allow a user group to configure a component, they are a super user within the component. Why are they? Well currently, if I log back in and I refresh, we have the ability to edit the options of the component. So even though I can't create new Menus and new Menu Items, I can easily go to Options > Permission, and then, under Test Manager, allow myself so I can change it to inherited, since it's inheriting from the parent, and it is allowed. I can change that to inherited and I'm doing that all within the test manager account and then I can go back and then I have re-enabled everything so that's why I'm a superuser to this component. So, please do bear in mind if you allow configuration, a user can reconfigure the component to allow themselves to do everything that you said you supposedly don't want them to do. So that's why you must be very careful with the configure action. So thank you for watching me in this lesson, and please join me in the next lesson where we'll take a look at the articles component.

Back to the top