Get the logged in status of the current user
The first thing you'll have to do is get the logged in status of the current user, to do that we'll use a core Joomla function (no hacking around here).
In your template's index.php file (we'll use the default template here as an example and you'll find the index.php file at /templates/protostar/index.php) add the following code on the line right after $user = JFactory::getUser(); (around ln 15):
$loggedinClass = (!$user->guest) ? ' logged-in' : ' logged-out'
If your template doesn't already use the code $user = JFactory::getUser(); then add the code right after defined('_JEXEC') or die;, like this:
$user = JFactory::getUser();
$loggedinClass = (!$user->guest) ? ' logged-in' : ' logged-out'
Output the logged-in / logged-out class on your page
Next, you need to output the logged-in / logged-out class on your page, that's as easy as updating the <body> tag (around ln 135) from:
<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
. ($params->get('fluidContainer') ? ' fluid' : '')
. ($this->direction === 'rtl' ? ' rtl' : '');
?>">
To:
<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
. ($params->get('fluidContainer') ? ' fluid' : '')
. ($this->direction === 'rtl' ? ' rtl' : '')
. $loggedinClass;
?>">
Alternatively you can update the wrapper div (around ln 144) from:
<div class="body" id="top">
To:
<div class="body<?php echo $loggedinClass; ?>" id="top">
Add CSS style rules to show or hide content based on the user's logged in status
Next, you'll have to add a few lines of CSS code to show or hide content based on the user's logged in status. In your template's CSS file, in the case of the default template we'll create a css file named user.css (the default template already checks to see if you have this file, it saves your custom CSS rules from being overwritten when the template is updated), add these rules:
.logged-in .logged-in {
display:static;
}
.logged-in .logged-out {
display:none;
}
.logged-out .logged-in {
display:none;
}
.logged-out .logged-out {
display:static;
}
Show content only to logged-in or logged-out users
Finally, when you're writing your content simply switch to your editor's source view and add the logged-in or logged-out class to the paragraph you want to show or hide:
Show to logged-in users only:
<p class="logged-in">This content will only be shown to logged in users</p>
Show to logged-out users only:
<p class="logged-out">This content will only be shown to logged out users</p>
Shark Alert! You can also use the logged-in / logged-out classes anywhere Joomla allows you to add a custom class (such as the module manager or menu manager)
That’s it! You’ve taken an important step towards customising your website's content for logged-in or logged-out users!