We help IT Professionals succeed at work.

Joomla Module positions

d10u4v
d10u4v asked
on
Hi,

I have created a joomla template and im now trying to add two new module positions to the top of the site above the header section of my site (see the image attached).  I have added the two new positions on my templateDetails.xml but cant seem to get them to show correctly after editing my index.php file.  Can anyone show me where i need to include my new modules in the index.php file to get them to show correctly on my site?  Thank you.

top of my site 
<?php
defined('_JEXEC') or die('Restricted access'); // no direct access
require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php';
$document = null;
if (isset($this))
  $document = & $this;
$baseUrl = $this->baseurl;
$templateUrl = $this->baseurl . '/templates/' . $this->template;
artxComponentWrapper($document);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
 <jdoc:include type="head" />

 <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />
 <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />
 <link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" media="screen" />
 <!--[if IE 6]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie6.css" type="text/css" media="screen" /><![endif]-->
 <!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->
 <script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>

</head>
<body>

<div id="art-page-background-simple-gradient">
    <div id="art-page-background-gradient"></div>

</div>
<div id="art-page-background-glare">
    <div id="art-page-background-glare-image"></div>
</div>

<div id="art-main">
<div class="art-sheet">
    <div class="art-sheet-tl"></div>
    <div class="art-sheet-tr"></div>
    <div class="art-sheet-bl"></div>
    <div class="art-sheet-br"></div>
    <div class="art-sheet-tc"></div>
    <div class="art-sheet-bc"></div>
    <div class="art-sheet-cl"></div>
    <div class="art-sheet-cr"></div>
    <div class="art-sheet-cc"></div>
    <div class="art-sheet-body">
<div class="art-header">

    <div class="art-header-png"></div>
    <div class="art-header-jpeg"></div>
<div class="art-logo">
 <h1 id="name-text" class="art-logo-name"><a href="<?php echo $baseUrl; ?>/">0800 075 26 25</a></h1>
 <div id="slogan-text" class="art-logo-text">a leader in records management</div>
</div>
</div>
<jdoc:include type="modules" name="user3" />
<jdoc:include type="modules" name="flash" style="artstyle"/>
<jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />
<?php echo artxPositions($document, array('top1', 'top2', 'top3'), 'block1'); ?>
<div class="art-content-layout">
    <div class="art-content-layout-row">
<?php if (artxCountModules($document, 'left')) : ?>
<div class="art-layout-cell art-sidebar1"><?php echo artxModules($document, 'left', 'art-block'); ?>
</div>
<?php endif; ?>
<div class="art-layout-cell art-<?php echo artxGetContentCellStyle($document); ?>">

<?php
  echo artxModules($document, 'banner2', 'art-nostyle');
  if (artxCountModules($document, 'breadcrumb'))
    echo artxPost(null, artxModules($document, 'breadcrumb'));
  echo artxPositions($document, array('user1', 'user2'), 'art-article');
  echo artxModules($document, 'banner3', 'art-nostyle');
?>
<?php if (artxHasMessages()) : ?><div class="art-post">
    <div class="art-post-body">
<div class="art-post-inner">
<div class="art-postcontent">
    <!-- article-content -->

<jdoc:include type="message" />

    <!-- /article-content -->
</div>
<div class="cleared"></div>

</div>

		<div class="cleared"></div>
    </div>
</div>
<?php endif; ?>
<jdoc:include type="component" />
<?php echo artxModules($document, 'banner4', 'art-nostyle'); ?>
<?php echo artxPositions($document, array('user4', 'user5'), 'art-article'); ?>
<?php echo artxModules($document, 'banner5', 'art-nostyle'); ?>
</div>
<?php if (artxCountModules($document, 'right')) : ?>
<div class="art-layout-cell art-sidebar2"><?php echo artxModules($document, 'right', 'art-block'); ?>
</div>
<?php endif; ?>

    </div>
</div>
<div class="cleared"></div>

<?php echo artxPositions($document, array('bottom1', 'bottom2', 'bottom3'), 'art-block'); ?>
<jdoc:include type="modules" name="banner6" style="artstyle" artstyle="art-nostyle" />
<div class="art-footer">
 <div class="art-footer-inner">
  <?php echo artxModules($document, 'syndicate'); ?>
  <div class="art-footer-text">
  <?php if (artxCountModules($document, 'copyright') == 0): ?>
<p>Copyright &copy; 2009 ---.<br />
All Rights Reserved.</p>

  <?php else: ?>
  <?php echo artxModules($document, 'copyright', 'art-nostyle'); ?>
  <?php endif; ?>
  </div>
 </div>
 <div class="art-footer-background"></div>
</div>

		<div class="cleared"></div>
    </div>
</div>
<div class="cleared"></div>
</div>

</body> 
</html>

Open in new window

Comment
Watch Question

View Solution Only

Delightend

Commented:
use this statement in your index page where you want the modules to show up
<jdoc:include type="modules" name="yourmodulename" />
d10u4v

Author

Commented:
Hi,

Thats where i'm having issues.  I cant seem to get the location correct in the index.php file.  From my attached index.php file, can you see where it would go?  I have tried it at the top (before the header section) but it does not stay in line with the rest of the content below.  It fits from left to right with no indent.

Tom
Delightend

Commented:
What is the name of the module you are trying to use, what line is it in your code?
d10u4v

Author

Commented:
<jdoc:include type="modules" name="search" />
and
<jdoc:include type="modules" name="menutop" />

I have taken them out of the code i attached as they were showing up incorrectly
Delightend

Commented:
I am not sure what your stylesheets look like but I would put them just after this <div id="art-main">
If the module appears on the white background at the top put them just before it...
Delightend

Commented:
Also you may need to create or edit the styles associated with your modules for them to align and display correctly at the top outside of your main container div
d10u4v

Author

Commented:
Hi its going toi be the editing of the style sheet that i'm going to have to do (i think) and its here where i'm goin gto need a little help.

This is where i have put the module in the index.php file:

<div id="art-main">
<jdoc:include type="modules" name="search" />
<div class="art-sheet">




frontpage-header.jpg
d10u4v

Author

Commented:
My CSS document is.  This is where I need help, i'm not too familiar with working with CSS especially with joomla.  I really do appreicate your help - thank you.

Tom
template.css
Commented:
add this to your css
.art-sheet-top
{
  position: relative;
  z-index: 0;
  margin: 0 auto;
  width: 939px;
  min-width: 21px;
  min-height: 21px;
}

add this to your index.php
<div id="art-main">
<div class="art-sheet-top">
<jdoc:include type="modules" name="search" />
</div>
<div class="art-sheet">

That should address your alignment issue(I think :) )... from there you are going to have to do the rest of the styling
d10u4v

Author

Commented:
Hi,

i think i'm on the right track.  Thanks.  One question.  Why is the text box of the search so long?

Also, is everything in CSS from the left?

I changed the css to the below, so that the search box apears on the right hand side not the left.  Is the right thing to do?

{
  position: absolute;
  left: 800px
  z-index: 0;
  margin: 0 auto;
  width: 939px;
  min-width: 21px;
  min-height: 21px;
}
Delightend

Commented:
Find this in your css

div.search input
{
  width: 95%;
  border: 1px solid #ccc;
  margin: 15px 0 10px 0;
}

Change the 95% to your preferred pixel width example: 34px
Delightend

Commented:
Don't be afraid to play with CSS... and there is a very good and not too tedious tutorial on CSS at http://www.htmldog.com/guides/cssbeginner/ that I am having some of the people I am mentoring use... be sure to go all the way through to the advanced...
d10u4v

Author

Commented:
Thank you very much for all your help!  You have defiantly put me on the right track and I am gradually understanding how things are working with regards to CSS and Joomla templates.  I will look at the website you mentioned.

One final question - (sorry)

where is the padding for both the text box and the button controlled?  I have been messing with all types of padding and margins in the CSS and still cant get the button to not sit so close to the text box.

THis is my final question - I promise :)

Thank you once again for all your help!

Tom

button.jpg
Delightend

Commented:
Okay change this in your div.search-input

margin: 15px 0 10px 0;

to

margin: 15px 10px 10px 10px;

the values are: top, left, bottom, right

It will give it a margin...

You can also use

padding:  top left bottom right;
d10u4v

Author

Commented:
Thank you very much for all your help - I wish I could add more points!