Solved

How do I extend my Joomla article content into the right-sidebar area?

Posted on 2015-02-15
8
54 Views
Last Modified: 2016-05-09
Hello,

I'm attempting to solve a similar issue to the one discussed on this previous post. I'm trying to extend the length of the content into the right-sidebar area for one article only. In other words, I'd like to have my left sidebar displayed while the remaining width of the page gets used for the article content. At the moment, whenever I remove the right-hand modules, the content drops down below the left-hand module, instead of simply extending over into the now empty space on the right.

I've tried various combinations of the php code and css mentioned in the other post, including the recommended "AddCSS" extension, with no luck so far. When I added the suggested code to my index.php file, all modules/positions/etc. disappeared and the article content took over the whole page.

As an example, I tried removing the "Featured Materials" and "Newsletter" modules from this page. However, when I did so, the title "Testimonials" and all content underneath it dropped down below the "Music Studio" link at the bottom of the left-hand menu.

I just signed up for a one-month trial on Experts Exchange and am wondering if I might be able to get some advice around this issue. If so, I can certainly provide more detail about my configuration. Any advice would be much appreciated!

Thank you,
Jason Press
0
Comment
Question by:jtp123
  • 3
  • 3
8 Comments
 
LVL 50

Expert Comment

by:Steve Bink
ID: 40614292
Hi again.  You will need to post your template code and the CSS relevant to these positions.  The result you are seeking is a very common strategy in Joomla templates, and it should be simple to implement in this case.

Start with the basic implementation of my previous suggestions.
0
 

Author Comment

by:jtp123
ID: 40614326
Ok that sounds hopeful. I'll include a copy of my modified index.php file at the bottom of this post. It should be pretty obvious where I added the recommended code (in 2 places, part before the HTML and part after). I've attached a snapshot of what the front page of the site looks like after uploading this modified file. FYI, my site name is livingmiraclescenter.org.

I'm using the "Protostar" template. We've added a few bits and pieces of customization over the past year, so I had a thought that there might be some conflict somewhere, but am not sure. The only mention of "sidebar" in our template.css file is a piece we added ourselves:

#sidebar .nav .nav-child {
   border-left: 2px solid #ddd;
   padding-left: 5px;
}

Open in new window


Here's the modified index.php file:
<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.protostar
 *
 * @copyright   Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Getting params from template
$params = JFactory::getApplication()->getTemplate(true)->params;

$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;

// 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->getCfg('sitename');

if($task == "edit" || $layout == "form" )
{
	$fullWidth = 1;
}
else
{
	$fullWidth = 0;
}

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
$doc->addScript('templates/' .$this->template. '/js/template.js');

// Add Stylesheets
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);

// Add current user information
$user = JFactory::getUser();

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span8";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
	$span = "span11";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span11";
}
else
{
	$span = "span12";
}

// Logo file or site title param
if ($this->params->get('logoFile'))
{
	$logo = '<img src="'. JUri::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
}
elseif ($this->params->get('sitetitle'))
{
	$logo = '<span class="site-title" title="'. $sitename .'">'. htmlspecialchars($this->params->get('sitetitle')) .'</span>';
}
else
{
	$logo = '<span class="site-title" title="'. $sitename .'">'. $sitename .'</span>';
}
?>

<?php
$has_sidebar=$this->countModules('sidebar');
$content_class = $has_sidebar ? 'with-' : 'no-';
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"><head>
    <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=EDGE" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<jdoc:include type="head" />

<?php    
if ($has_sidebar) {
?>
<div id="sidebar"><jdoc:include type="modules" name="sidebar" /></div>
<?php } ?>
<?php
?>
<div id="content" class="<?php echo $content_class; ?>sidebar">
<jdoc:include type="component" />
</div>
    
	<?php
	// Use of Google Font
	if ($this->params->get('googleFont'))
	{
	?>
		<link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName');?>' rel='stylesheet' type='text/css' />
		<style type="text/css">
			h1,h2,h3,h4,h5,h6,.site-title{
				font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName'));?>', sans-serif;
			}
		</style>
	<?php
	}
	?>
	<?php
	// Template color
	if ($this->params->get('templateColor'))
	{
	?>
	<style type="text/css">
		body.site
		{
			border-top: 3px solid <?php echo $this->params->get('templateColor');?>;
			background-color: <?php echo $this->params->get('templateBackgroundColor');?>
		}
		a
		{
			color: <?php echo $this->params->get('templateColor');?>;
		}
		.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
		.btn-primary
		{
			background: <?php echo $this->params->get('templateColor');?>;
		}
		.navbar-inner
		{
			-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
			-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
			box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
		}
	</style>
	<?php
	}
	?>
	<!--[if lt IE 9]>
		<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
	<![endif]-->
</head>

<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' : '');
?>">

	<!-- Body -->
	<div class="body">
		<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
			<!-- Header -->
<!--[if lt IE 7]>
<div style="text-align: center; clear: both; height: 49px; padding-bottom: 1px; position: relative;">
  <div style="width: 450px; border: 1px solid #f0f0f0; background: #f0f0f0; margin: 0 auto; text-align: left; padding: 0 10px 0 10px; overflow: hidden; color: black;">
    <div style="width: 60px; float: left;">
      <img src="images/browserwarning/warning.png" alt="Warning!">
    </div>
    <div style="width: 230px; float: left; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;">
      <div style="font-size: 11px; font-weight: bold; margin-top: 4px; color: #c00;">
        You are using an outdated browser
      </div>
      <div style="font-size: 10px; margin-top: 0px; line-height: 13px; color: #666;">
        It may render this site incorrectly. Please upgrade to a modern web browser.
      </div>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.google.com/chrome" target="_blank"><img style="border: none;" src="images/browserwarning/chrome.png" alt="Get Google Chrome"></a>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.firefox.com" target="_blank"><img style="border: none;" src="images/browserwarning/firefox.png" alt="Get Firefox"></a>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.apple.com/safari/download/" target="_blank"><img style="border: none;" src="images/browserwarning/safari.png" alt="Get Safari"></a>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.opera.com/download" target="_blank"><img style="border: none;" src="images/browserwarning/opera.png" alt="Get Opera"></a>
    </div>
  </div>
</div>
<![endif]-->
			<header class="header" role="banner">
				<div class="header-inner clearfix">
                                        <a  class="brand" href="<?php echo $this->baseurl; ?>">
                                                <?php echo $logo;?> <?php if ($this->params->get('sitedescription')) { echo '<div class="site-description">'. htmlspecialchars($this->params->get('sitedescription')) .'</div>'; } ?>
                                        </a>
					<div class="header-search pull-right">
<!-- Start Living Miracles Flags -->
    <div id="header" align='right' valign='top'>
	<div id="flags">
	<a href="http://livingmiracles.ca" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-ca.gif" alt="Canada Flag" title="Living Miracles Canada"></a>
	<a href="http://livingmiracles.org.au" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-au.gif" alt="Australia Flag" title="Living Miracles Australia"></a><br>
	<a href="http://livingmiracles.eu" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-eu.gif" alt="Europe Flag" title="Living Miracles Europe"></a>
	<a href="http://un-curso-en-milagros.org" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-me.gif" alt="Mexico Flag" title="Living Miracles Mexico"></a>
	</div>
<!-- End Living Miracles Flags -->
						<jdoc:include type="modules" name="position-0" style="none" />
					</div>
				</div>
            </header>
			<?php if ($this->countModules('position-1')) : ?>
			<nav class="navigation" role="navigation">
				<jdoc:include type="modules" name="position-1" style="none" />
			</nav>
			<?php endif; ?>
			<jdoc:include type="modules" name="banner" style="xhtml" />
			<div class="row-fluid">
				<?php if ($this->countModules('position-8')) : ?>
				<!-- Begin Sidebar -->
				<div id="sidebar" class="span2">
					<div class="sidebar-nav">
						<jdoc:include type="modules" name="position-8" style="xhtml" />
					</div>
				</div>
				<!-- End Sidebar -->
				<?php endif; ?>
				<main id="content" role="main" class="<?php echo $span;?>">
					<!-- Begin Content -->
					<jdoc:include type="modules" name="position-3" style="xhtml" />
					<jdoc:include type="message" />
					<jdoc:include type="component" />
					<jdoc:include type="modules" name="position-2" style="none" />
					<!-- End Content -->
				</main>
				<?php if ($this->countModules('position-7')) : ?>
				<div id="aside" class="span2">
					<!-- Begin Right Sidebar -->
					<jdoc:include type="modules" name="position-7" style="well" />
					<!-- End Right Sidebar -->
				</div>
				<?php endif; ?>
			</div>
		</div>
	</div>
	<!-- Footer -->
	<footer class="footer" role="contentinfo">
		<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
			<hr />
			<jdoc:include type="modules" name="footer" style="none" />
			<p class="pull-right"><a href="#top" id="back-top"><?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?></a></p>
			<p>&copy; <?php echo $sitename; ?> <?php echo date('Y');?></p>
		</div>
	</footer>
	<jdoc:include type="modules" name="debug" style="none" />
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-47476570-1', 'livingmiraclescenter.org');
  ga('send', 'pageview');

</script>
</body>
</html>

Open in new window


And the screenshot of what happens when I upload the file:
Screenshot of Site with Modified Code
Thank you for your help,
Jason Press
<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.protostar
 *
 * @copyright   Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Getting params from template
$params = JFactory::getApplication()->getTemplate(true)->params;

$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;

// 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->getCfg('sitename');

if($task == "edit" || $layout == "form" )
{
	$fullWidth = 1;
}
else
{
	$fullWidth = 0;
}

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
$doc->addScript('templates/' .$this->template. '/js/template.js');

// Add Stylesheets
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);

// Add current user information
$user = JFactory::getUser();

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span8";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
	$span = "span11";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span11";
}
else
{
	$span = "span12";
}

// Logo file or site title param
if ($this->params->get('logoFile'))
{
	$logo = '<img src="'. JUri::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
}
elseif ($this->params->get('sitetitle'))
{
	$logo = '<span class="site-title" title="'. $sitename .'">'. htmlspecialchars($this->params->get('sitetitle')) .'</span>';
}
else
{
	$logo = '<span class="site-title" title="'. $sitename .'">'. $sitename .'</span>';
}
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"><head>
    <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=EDGE" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<jdoc:include type="head" />
	<?php
	// Use of Google Font
	if ($this->params->get('googleFont'))
	{
	?>
		<link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName');?>' rel='stylesheet' type='text/css' />
		<style type="text/css">
			h1,h2,h3,h4,h5,h6,.site-title{
				font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName'));?>', sans-serif;
			}
		</style>
	<?php
	}
	?>
	<?php
	// Template color
	if ($this->params->get('templateColor'))
	{
	?>
	<style type="text/css">
		body.site
		{
			border-top: 3px solid <?php echo $this->params->get('templateColor');?>;
			background-color: <?php echo $this->params->get('templateBackgroundColor');?>
		}
		a
		{
			color: <?php echo $this->params->get('templateColor');?>;
		}
		.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
		.btn-primary
		{
			background: <?php echo $this->params->get('templateColor');?>;
		}
		.navbar-inner
		{
			-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
			-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
			box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
		}
	</style>
	<?php
	}
	?>
	<!--[if lt IE 9]>
		<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
	<![endif]-->
</head>

<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' : '');
?>">

	<!-- Body -->
	<div class="body">
		<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
			<!-- Header -->
<!--[if lt IE 7]>
<div style="text-align: center; clear: both; height: 49px; padding-bottom: 1px; position: relative;">
  <div style="width: 450px; border: 1px solid #f0f0f0; background: #f0f0f0; margin: 0 auto; text-align: left; padding: 0 10px 0 10px; overflow: hidden; color: black;">
    <div style="width: 60px; float: left;">
      <img src="images/browserwarning/warning.png" alt="Warning!">
    </div>
    <div style="width: 230px; float: left; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;">
      <div style="font-size: 11px; font-weight: bold; margin-top: 4px; color: #c00;">
        You are using an outdated browser
      </div>
      <div style="font-size: 10px; margin-top: 0px; line-height: 13px; color: #666;">
        It may render this site incorrectly. Please upgrade to a modern web browser.
      </div>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.google.com/chrome" target="_blank"><img style="border: none;" src="images/browserwarning/chrome.png" alt="Get Google Chrome"></a>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.firefox.com" target="_blank"><img style="border: none;" src="images/browserwarning/firefox.png" alt="Get Firefox"></a>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.apple.com/safari/download/" target="_blank"><img style="border: none;" src="images/browserwarning/safari.png" alt="Get Safari"></a>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.opera.com/download" target="_blank"><img style="border: none;" src="images/browserwarning/opera.png" alt="Get Opera"></a>
    </div>
  </div>
</div>
<![endif]-->
			<header class="header" role="banner">
				<div class="header-inner clearfix">
                                        <a  class="brand" href="<?php echo $this->baseurl; ?>">
                                                <?php echo $logo;?> <?php if ($this->params->get('sitedescription')) { echo '<div class="site-description">'. htmlspecialchars($this->params->get('sitedescription')) .'</div>'; } ?>
                                        </a>
					<div class="header-search pull-right">
<!-- Start Living Miracles Flags -->
    <div id="header" align='right' valign='top'>
	<div id="flags">
	<a href="http://livingmiracles.ca" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-ca.gif" alt="Canada Flag" title="Living Miracles Canada"></a>
	<a href="http://livingmiracles.org.au" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-au.gif" alt="Australia Flag" title="Living Miracles Australia"></a><br>
	<a href="http://livingmiracles.eu" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-eu.gif" alt="Europe Flag" title="Living Miracles Europe"></a>
	<a href="http://un-curso-en-milagros.org" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-me.gif" alt="Mexico Flag" title="Living Miracles Mexico"></a>
	</div>
<!-- End Living Miracles Flags -->
						<jdoc:include type="modules" name="position-0" style="none" />
					</div>
				</div>
            </header>
			<?php if ($this->countModules('position-1')) : ?>
			<nav class="navigation" role="navigation">
				<jdoc:include type="modules" name="position-1" style="none" />
			</nav>
			<?php endif; ?>
			<jdoc:include type="modules" name="banner" style="xhtml" />
			<div class="row-fluid">
				<?php if ($this->countModules('position-8')) : ?>
				<!-- Begin Sidebar -->
				<div id="sidebar" class="span2">
					<div class="sidebar-nav">
						<jdoc:include type="modules" name="position-8" style="xhtml" />
					</div>
				</div>
				<!-- End Sidebar -->
				<?php endif; ?>
				<main id="content" role="main" class="<?php echo $span;?>">
					<!-- Begin Content -->
					<jdoc:include type="modules" name="position-3" style="xhtml" />
					<jdoc:include type="message" />
					<jdoc:include type="component" />
					<jdoc:include type="modules" name="position-2" style="none" />
					<!-- End Content -->
				</main>
				<?php if ($this->countModules('position-7')) : ?>
				<div id="aside" class="span2">
					<!-- Begin Right Sidebar -->
					<jdoc:include type="modules" name="position-7" style="well" />
					<!-- End Right Sidebar -->
				</div>
				<?php endif; ?>
			</div>
		</div>
	</div>
	<!-- Footer -->
	<footer class="footer" role="contentinfo">
		<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
			<hr />
			<jdoc:include type="modules" name="footer" style="none" />
			<p class="pull-right"><a href="#top" id="back-top"><?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?></a></p>
			<p>&copy; <?php echo $sitename; ?> <?php echo date('Y');?></p>
		</div>
	</footer>
	<jdoc:include type="modules" name="debug" style="none" />
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-47476570-1', 'livingmiraclescenter.org');
  ga('send', 'pageview');

</script>
</body>
</html>

Open in new window

0
 
LVL 50

Accepted Solution

by:
Steve Bink earned 500 total points
ID: 40615758
Lines 83-86 set the flag.  That is correct.  However, lines 94-103 are rendering HTML structure inside the <head> element.  Your body element does not start until line 154.  So, we need to do a few things:

1) Remove the HTML in lines 94-103.

2) Add the class reference to your body element.  As you can see at line 154, the Protostar template is already doing something very similar with other flags.  We can simply add this one to the end:
<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' : '')
        . $content_class . 'sidebar'; /* <-- this is the new line */
?>">

Open in new window


3) Then, we need to add the conditional rendering of the sidebar.  This is a little complicated because you're using a template which already has other sidebar positions defined - "position-8" at line 221, and "position-7" at line 238.  Luckily, they are already rendered based on their own conditionals, so will *probably* not interfere with what we're doing.  So, now you just have to find where your sidebar should be rendered.  Once you find that location, just drop in part of the HTML we removed in step 1:
<?php    
if ($has_sidebar) {
?>
<div id="sidebar"><jdoc:include type="modules" name="sidebar" /></div>
<?php } ?>

Open in new window

4) Finally, you'll likely need to adjust your stylesheet to account for the new CSS flag we have created.  For example:
/* if the sidebar is present, decrease the width of your content area */
/* be sure to change this to the ID for your actual content div */
body.with-sidebar #main-content-div { 
  width:600px;
}
/* if there is no sidebar, the content area can be the full width */
body.no-sidebar #main-content-div {
  width:800px;
}
#sidebar {
  width:200px;
}

Open in new window

0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:jtp123
ID: 40615853
Ok, I've added in the code (will include the updated index.php below), but the added class reference (line 148) seemed to cause the following error:

Parse error: syntax error, unexpected '.' in /home/miracle6/public_html/templates/protostar/index.php on line 148

I wasn't exactly certain where to place the "conditional rendering" code but I went ahead and added to at lines 227-231.

Lastly, I wasn't sure what the ID for my content div was so I haven't added the CSS to my stylesheet yet. I found this link which states the following:

If there are one or more modules in position-8 but not in position-7, the content area is defined as <main id="content" class="span9">.

That does seem to be the scenario I'm trying to work with (position-8 is the right-hand sidebar and position-7 is the left). Does this tell me what the "main-content-div" would be?

I'm obviously not particularly fluent in PHP or CSS, so if this seems too complex then I will let it go, but I very much appreciate the detailed support already provided.

Thank you,
Jason Press

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.protostar
 *
 * @copyright   Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Getting params from template
$params = JFactory::getApplication()->getTemplate(true)->params;

$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;

// 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->getCfg('sitename');

if($task == "edit" || $layout == "form" )
{
	$fullWidth = 1;
}
else
{
	$fullWidth = 0;
}

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
$doc->addScript('templates/' .$this->template. '/js/template.js');

// Add Stylesheets
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);

// Add current user information
$user = JFactory::getUser();

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span8";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
	$span = "span11";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span11";
}
else
{
	$span = "span12";
}

// Logo file or site title param
if ($this->params->get('logoFile'))
{
	$logo = '<img src="'. JUri::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
}
elseif ($this->params->get('sitetitle'))
{
	$logo = '<span class="site-title" title="'. $sitename .'">'. htmlspecialchars($this->params->get('sitetitle')) .'</span>';
}
else
{
	$logo = '<span class="site-title" title="'. $sitename .'">'. $sitename .'</span>';
}
?>

<?php
$has_sidebar=$this->countModules('sidebar');
$content_class = $has_sidebar ? 'with-' : 'no-';
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"><head>
    <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=EDGE" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<jdoc:include type="head" />
	<?php
	// Use of Google Font
	if ($this->params->get('googleFont'))
	{
	?>
		<link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName');?>' rel='stylesheet' type='text/css' />
		<style type="text/css">
			h1,h2,h3,h4,h5,h6,.site-title{
				font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName'));?>', sans-serif;
			}
		</style>
	<?php
	}
	?>
	<?php
	// Template color
	if ($this->params->get('templateColor'))
	{
	?>
	<style type="text/css">
		body.site
		{
			border-top: 3px solid <?php echo $this->params->get('templateColor');?>;
			background-color: <?php echo $this->params->get('templateBackgroundColor');?>
		}
		a
		{
			color: <?php echo $this->params->get('templateColor');?>;
		}
		.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
		.btn-primary
		{
			background: <?php echo $this->params->get('templateColor');?>;
		}
		.navbar-inner
		{
			-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
			-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
			box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
		}
	</style>
	<?php
	}
	?>
	<!--[if lt IE 9]>
		<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
	<![endif]-->
</head>

<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' : '');
	. $content_class . 'sidebar';
?>">

	<!-- Body -->
	<div class="body">
		<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
			<!-- Header -->
<!--[if lt IE 7]>
<div style="text-align: center; clear: both; height: 49px; padding-bottom: 1px; position: relative;">
  <div style="width: 450px; border: 1px solid #f0f0f0; background: #f0f0f0; margin: 0 auto; text-align: left; padding: 0 10px 0 10px; overflow: hidden; color: black;">
    <div style="width: 60px; float: left;">
      <img src="images/browserwarning/warning.png" alt="Warning!">
    </div>
    <div style="width: 230px; float: left; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;">
      <div style="font-size: 11px; font-weight: bold; margin-top: 4px; color: #c00;">
        You are using an outdated browser
      </div>
      <div style="font-size: 10px; margin-top: 0px; line-height: 13px; color: #666;">
        It may render this site incorrectly. Please upgrade to a modern web browser.
      </div>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.google.com/chrome" target="_blank"><img style="border: none;" src="images/browserwarning/chrome.png" alt="Get Google Chrome"></a>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.firefox.com" target="_blank"><img style="border: none;" src="images/browserwarning/firefox.png" alt="Get Firefox"></a>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.apple.com/safari/download/" target="_blank"><img style="border: none;" src="images/browserwarning/safari.png" alt="Get Safari"></a>
    </div>
    <div style="width: 40px; float: left;">
      <a href="http://www.opera.com/download" target="_blank"><img style="border: none;" src="images/browserwarning/opera.png" alt="Get Opera"></a>
    </div>
  </div>
</div>
<![endif]-->
			<header class="header" role="banner">
				<div class="header-inner clearfix">
                                        <a  class="brand" href="<?php echo $this->baseurl; ?>">
                                                <?php echo $logo;?> <?php if ($this->params->get('sitedescription')) { echo '<div class="site-description">'. htmlspecialchars($this->params->get('sitedescription')) .'</div>'; } ?>
                                        </a>
					<div class="header-search pull-right">
<!-- Start Living Miracles Flags -->
    <div id="header" align='right' valign='top'>
	<div id="flags">
	<a href="http://livingmiracles.ca" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-ca.gif" alt="Canada Flag" title="Living Miracles Canada"></a>
	<a href="http://livingmiracles.org.au" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-au.gif" alt="Australia Flag" title="Living Miracles Australia"></a><br>
	<a href="http://livingmiracles.eu" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-eu.gif" alt="Europe Flag" title="Living Miracles Europe"></a>
	<a href="http://un-curso-en-milagros.org" target="_blank"><img src="templates/<?php echo $this->template ?>/images/flag-icon-me.gif" alt="Mexico Flag" title="Living Miracles Mexico"></a>
	</div>
<!-- End Living Miracles Flags -->
						<jdoc:include type="modules" name="position-0" style="none" />
					</div>
				</div>
            </header>
			<?php if ($this->countModules('position-1')) : ?>
			<nav class="navigation" role="navigation">
				<jdoc:include type="modules" name="position-1" style="none" />
			</nav>
			<?php endif; ?>
			<jdoc:include type="modules" name="banner" style="xhtml" />
			<div class="row-fluid">
				<?php if ($this->countModules('position-8')) : ?>
				<!-- Begin Sidebar -->
				<div id="sidebar" class="span2">
					<div class="sidebar-nav">
						<jdoc:include type="modules" name="position-8" style="xhtml" />
					</div>
				</div>
				<!-- End Sidebar -->
				<?php endif; ?>
				<main id="content" role="main" class="<?php echo $span;?>">
					<!-- Begin Content -->
					<jdoc:include type="modules" name="position-3" style="xhtml" />
					<jdoc:include type="message" />
					<jdoc:include type="component" />
					<jdoc:include type="modules" name="position-2" style="none" />
					<!-- End Content -->
				</main>
                <?php    
if ($has_sidebar) {
?>
<div id="sidebar"><jdoc:include type="modules" name="sidebar" /></div>
<?php } ?>
				<?php if ($this->countModules('position-7')) : ?>
				<div id="aside" class="span2">
					<!-- Begin Right Sidebar -->
					<jdoc:include type="modules" name="position-7" style="well" />
					<!-- End Right Sidebar -->
				</div>
				<?php endif; ?>
			</div>
		</div>
	</div>
	<!-- Footer -->
	<footer class="footer" role="contentinfo">
		<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
			<hr />
			<jdoc:include type="modules" name="footer" style="none" />
			<p class="pull-right"><a href="#top" id="back-top"><?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?></a></p>
			<p>&copy; <?php echo $sitename; ?> <?php echo date('Y');?></p>
		</div>
	</footer>
	<jdoc:include type="modules" name="debug" style="none" />
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-47476570-1', 'livingmiraclescenter.org');
  ga('send', 'pageview');

</script>
</body>
</html>

Open in new window

0
 
LVL 50

Assisted Solution

by:Steve Bink
Steve Bink earned 500 total points
ID: 40615910
For the parse error, you forgot to remove the semi-colon at the end of line 147.  

As I said before, part of the problem here is the fact that you are using a pre-made template.  You'll need to understand a fair bit about the template, and how you want to change it, in order to make any progress here.  As an example, I would say your new sidebar div should be placed somewhere around line 219... either before or after the <main id="content"> element.  Where you need to put the new div is going to depend heavily on existing and intended style for the main div, the new div, and any other elements which may interact or interfere with your changes.  

Without at least a minimal understanding of PHP, HTML, and CSS, you are much more likely to harm rather than help.  My recommendation is to find yourself a designer or web developer capable to making these changes for you.  That said, you can make these change, if you're determined to move forward and learn a few new skills.
0
 

Author Comment

by:jtp123
ID: 40617065
Ok, thanks so much Steve for the help and for the advice :)
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmakerā€¦
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now