I want to learn how to develop Joomla 3 templates. Looking at the code in protostar template, there is a problem for me. I don't know what is the usage of active variables:


/ Detecting Active Variables
$option   = $app->input->getCmd('option', '');
$view     = $app->input->getCmd('view', '');
$layout   = $app->input->getCmd('layout', '');
$task     = $app->input->getCmd('task', '');
$itemid   = $app->input->getCmd('Itemid', '');
$sitename = $app->get('sitename');

These variables were added to the top of the index.php allowing developers to assign the variables to HTML elements, primarily the <body> tag, and thus applying styling for each individual element in any view.

Here is an example:


  $option   = $app->input->getCmd('option', '');
  $view     = $app->input->getCmd('view', '');
  $layout   = $app->input->getCmd('layout', '');
  $task     = $app->input->getCmd('task', '');
  $itemid   = $app->input->getCmd('Itemid', '');

Body Tag:

<body class="site <?php echo $option
    . ' view-' . $view
    . ($layout ? ' layout-' . $layout : ' no-layout')
    . ($task ? ' task-' . $task : ' no-task')
    . ($itemid ? ' itemid-' . $itemid : '');

Now if you view the homepage of my newly installed Joomla site, you will see something like the following markup in your browser inspector:

<body class="site com_content view-category layout-blog no-task itemid-101">

If you go to the Joomla login page, you will see something like this instead:

<body class="site com_users view-login no-layout no-task itemid-115">

Now lets say for a very basic example, you wanted a white background on the homepage but a black background on the login page, you can simply add the following to your CSS file:

body.com_content {
    background: #FFF;
body.com_users {
    background: #000;
  • I know it's just an example but you would rather use body.itemid-101 and body.itemid-115 in this case. body.com_content would apply to all article and blog pages. Maybe you could explain the different variables too, like: option = name of the component currently displayed (e.g. com_content), view = current view of the component (e.g. category), layout = specific layout of the view (e.g. blog), task = function call to a method in the component controller (e.g. edit), itemid = current menu item ID, sitename = the sites name you set up in the global config – fruppel Jul 30 '15 at 20:47
  • 1
    Another usage of these variables could be that you only want to display module positions on specific pages, e.g. at the login, logout and user settings page (you would use com_users for that) – fruppel Jul 30 '15 at 20:49
  • @fruppel good point ;) Assume that this would be specific to pages that aren't menu items though, as modules can be assigned to specific menu items via in their settings – Lodder Jul 30 '15 at 20:53

I have just the thing for you to look over. You can download these which might help you understand templating in Joomla!

This first is your vary basic bare bones Joomla! Template, you can get it here

Next is one that I have been actively up keeping as developer stack. It has things like the ability to edit module layout, you may want to check this out at a later time. Click here

Both of these project can be found on my github

https://github.com/NicholasEli/flux/archive/master.zip https://github.com/NicholasEli/Blank_Joomla_Template/archive/master.zip

  • This doesn't really seem to answer the question asked by the OP. All you've done is provide links to your templates – Lodder Jul 30 '15 at 19:22
  • I disagree, the user can compare what they are trying to do to something else. JTemplates can be ambiguous to learn depending on your skill level, given the amounts of php used to run them. Where as the blank one I listed is a bit more html driven using the minimal template rendering tags. – NicholasByDesign Jul 30 '15 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.