My First atempt to buld a template

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
hamm3lvm
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Thu Jul 02, 2020 11:31 pm

My First atempt to buld a template

Post by hamm3lvm » Thu Jul 02, 2020 11:37 pm

I need help with a php problem due to a lack of knowledge with php, and learning.
I need to hide a grid with multiple module positions if they are all empty, but the grid to show if any one of them is active. I will need the whole grid to show to keep the span positions correct.
<div class="row-fluid show-grid">
<div class="span4"><jdoc:include type="modules" name="content-top-1" style="none" /></div>
<div class="span4"><jdoc:include type="modules" name="content-top-2" style="none" /></div>
<div class="span4"><jdoc:include type="modules" name="content-top-3" style="none" /></div>
</div>

 
User avatar
AlexVega
Joomla! Hero
Joomla! Hero
Posts: 2492
Joined: Fri Aug 28, 2015 6:13 am
Location: México

Re: My First atempt to buld a template

Post by AlexVega » Fri Jul 03, 2020 2:33 am

Hi there,

Welcome to the Forum, you need add a simple php code, we called this behaviour "Collapsing columns".

Here you can find some examples and the code to use:
https://docs.joomla.org/Collapsing_columns

And here more info about template development:
https://docs.joomla.org/Portal:Template_Development

hamm3lvm
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Thu Jul 02, 2020 11:31 pm

Re: My First atempt to buld a template

Post by hamm3lvm » Fri Jul 03, 2020 9:05 am

Thankyou
I had a look at the very page last night.
From what I could work out if content-top-3 was the only position active is would show up on the left of the page, because of no offset. Would it be better to use similar parameters to the Prostars sidebar and content area? so that each position stays in the defined position?

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 38792
Joined: Sat Apr 05, 2008 9:58 pm

Re: My First atempt to buld a template

Post by Webdongle » Fri Jul 03, 2020 9:37 am

Suggest you use a tool to create a html page. Then create the appropriate files and move the css. Then replace the code in the main file and rename it index.php. By creating it in html with a tool ... you can line things up easier. Later you can tweak it to have IF ELSE for positions. You can even create other html pages to create the necessary css for the IF ELSE for positions.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein.

User avatar
AlexVega
Joomla! Hero
Joomla! Hero
Posts: 2492
Joined: Fri Aug 28, 2015 6:13 am
Location: México

Re: My First atempt to buld a template

Post by AlexVega » Fri Jul 03, 2020 5:47 pm

hamm3lvm wrote:
Fri Jul 03, 2020 9:05 am
Would it be better to use similar parameters to the Prostars sidebar and content area? so that each position stays in the defined position?
Yes, you can use this approach too. In the Protostar case, the content area is expanded to fill the rest of the container, take a look to this code:

Right anf Left positions are saved in variables to make the comparison, they are then compared and the rest of the available space is allocated to a span variable, which will be assigned to the content area:

Code: Select all

// Adjusting content width
$position7ModuleCount = $this->countModules('position-7');
$position8ModuleCount = $this->countModules('position-8');

if ($position7ModuleCount && $position8ModuleCount)
{
	$span = 'span6';
}
elseif ($position7ModuleCount && !$position8ModuleCount)
{
	$span = 'span9';
}
elseif (!$position7ModuleCount && $position8ModuleCount)
{
	$span = 'span9';
}
else
{
	$span = 'span12';
}

Now, this is the code for the row wich contains left, Content, and Right:

Code: Select all

			
<div class="row-fluid">
	<?php if ($position8ModuleCount) : ?> <!-- This code check if this position exist -->
		<!-- Begin Sidebar -->
		<div id="sidebar" class="span3">
			<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; ?>"> <!--  Here you can see the span variable -->
		<!-- Begin Content -->
		<jdoc:include type="modules" name="position-3" style="xhtml" />
		<jdoc:include type="message" />
		<jdoc:include type="component" />
		<div class="clearfix"></div>
		<jdoc:include type="modules" name="position-2" style="none" />
		<!-- End Content -->
	</main>
	<?php if ($position7ModuleCount) : ?> <!-- This code check if this position exist -->
		<div id="aside" class="span3">
			<!-- Begin Right Sidebar -->
			<jdoc:include type="modules" name="position-7" style="well" />
			<!-- End Right Sidebar -->
		</div>
	<?php endif; ?>
</div>		
In your case you are not using content area, just change the content area with your position but keeping the span variable.

hamm3lvm
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Thu Jul 02, 2020 11:31 pm

Re: My First atempt to buld a template

Post by hamm3lvm » Sat Jul 04, 2020 12:24 pm

This is what I have done.
Created a php page calledtemplate positions, and added this code:
// Adjusting top panels width
$topleftModuleCount = $this->countModules('top-left');
$topcentreModuleCount = $this->countModules('top-centre');
$toprightModuleCount = $this->countModules('top-right');

if ($topleftModuleCount && $topcentreModuleCount && $toprightModuleCount)
{
$TLspan = 'span4'; $TCspan = 'span4'; $TRspan = 'span4';
}
elseif ($topleftModuleCount && !$topcentreModuleCount && !$toprightModuleCount)
{
$TLspan = 'span4';
}

elseif (!$topleftModuleCount && $topcentreModuleCount && !$toprightModuleCount)
{
$TCspan = 'span4'. ' offset4';
}
elseif (!$topleftModuleCount && !$topcentreModuleCount && $toprightModuleCount)
{
$TRspan = 'span4'. ' pull-right';
}

elseif ($topleftModuleCount && !$topcentreModuleCount && $toprightModuleCount)
{
$TLspan = 'span4'; $TRspan = 'span4'. ' pull-right';
}


I have then inclded this page into my index.php, and on the grid section this code relates to I pulled the results:

<div class="container">

<div class="row-fluid show-top">
<?php if ($topleftModuleCount) : ?>
<div class="<?php echo $TLspan; ?>"><jdoc:include type="modules" name="top-left" style="none" /></div>
<?php endif; ?>
<?php if ($topcentreModuleCount) : ?>
<div class="<?php echo $TCspan; ?>"><jdoc:include type="modules" name="top-centre" style="none" /></div>
<?php endif; ?>
<?php if ($toprightModuleCount ) : ?>
<div class="<?php echo $TRspan; ?>"><jdoc:include type="modules" name="top-right" style="none" /></div>
<?php endif; ?>
</div>

</div>
Just need to finish all the position combinations the user could pick then that block is done, and the to repeat another 8 to 9 times for the template grid. This should give me a decent base template to work with. Just need to workout why fontawsome is not working properly,

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 38792
Joined: Sat Apr 05, 2008 9:58 pm

Re: My First atempt to buld a template

Post by Webdongle » Sat Jul 04, 2020 1:46 pm

hamm3lvm wrote:
Sat Jul 04, 2020 12:24 pm
... Just need to workout why fontawsome is not working properly,
Wrong path called?
No path called?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein.

hamm3lvm
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Thu Jul 02, 2020 11:31 pm

Re: My First atempt to buld a template

Post by hamm3lvm » Sat Jul 04, 2020 1:53 pm

Fontawsome css is loading but just showing a outlined box, but will look into that once template main structure is done.

hamm3lvm
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Thu Jul 02, 2020 11:31 pm

Re: My First atempt to buld a template

Post by hamm3lvm » Sun Jul 05, 2020 12:07 pm

Ok all thank you for your help and after some seaching aswell as the input here this is the final code used to complete the desired effect. I am more of a html and css coder not php So it's a learning curve.

The first block of code looks for active module positions and stores them in their relative active string ($module-position-xModuleCount ) the second part of the code reads each $module position to see if data is there.{ if ($topleftModuleCount && $topcentreModuleCount && $toprightModuleCount) if any of the position are written like thins { !$toprightModuleCount } indicate that this position is empty. the final portion of the code gives the <div> it's class and the module positions or positions' their span and offset if required.

Complete code for a 3 module positions in one row - grid.

Code: Select all

// Adjusting top panels width grid and positions
$topleftModuleCount = $this->countModules('top-left');
$topcentreModuleCount = $this->countModules('top-centre');
$toprightModuleCount = $this->countModules('top-right');

if ($topleftModuleCount && $topcentreModuleCount && $toprightModuleCount)
{
	$showtop = ' class="row-fluid show-top" ';
	$TLspan = 'span4'; $TCspan = 'span4'; $TRspan = 'span4';
}
elseif ($topleftModuleCount && !$topcentreModuleCount && !$toprightModuleCount)
{
	$showtop = 'class="row-fluid show-top" ';
	$TLspan = 'span4';
}

elseif (!$topleftModuleCount && $topcentreModuleCount && !$toprightModuleCount)
{
	$showtop = 'class="row-fluid show-top" ';
	$TCspan = 'span4'. ' offset4';
}
elseif (!$topleftModuleCount && !$topcentreModuleCount && $toprightModuleCount)
{
	$showtop = 'class="row-fluid show-top" ';
	$TRspan = 'span4'. ' pull-right';
}

elseif ($topleftModuleCount && !$topcentreModuleCount && $toprightModuleCount)
{
	$showtop = 'class="row-fluid show-top" ';
	$TLspan = 'span4'; $TRspan = 'span4'. ' pull-right';
}
elseif ($topleftModuleCount && $topcentreModuleCount && !$toprightModuleCount)
{
	$showtop = 'class="row-fluid show-top" ';
	$TLspan = 'span4'; $TCspan = 'span4';
}
elseif (!$topleftModuleCount && $topcentreModuleCount && $toprightModuleCount)
{
	$showtop = 'class="row-fluid show-top" ';
	$TCspan = 'span4'. ' offset4';  $TRspan = 'span4';
}
else
{
	$showtop = '';
	$span = '';
}

The final slice of code adds the relevant span and offset to each position if active via the echo command. By adding the echo command to the div block that contains the module positions adds the row and grid class to the div if a module position is active.

Code: Select all

	    	 <div class="container">
		    	
         <div <?php echo $showtop; ?>>
	         <?php if ($topleftModuleCount) : ?>
	          <div class="<?php echo $TLspan; ?>"><jdoc:include type="modules" name="top-left" style="none" /></div>
	          <?php endif; ?>
	          <?php if ($topcentreModuleCount) : ?>
            <div class="<?php echo $TCspan; ?>"><jdoc:include type="modules" name="top-centre" style="none" /></div>
            <?php endif; ?>
            <?php if ($toprightModuleCount ) : ?>
            <div class="<?php echo $TRspan; ?>"><jdoc:include type="modules" name="top-right" style="none" /></div>
            <?php endif; ?>
         </div>
         
	    	 </div>
I hope this gives anyone who is learning how to code a template some help..

 

Post Reply

Return to “Templates for Joomla! 3.x”