Joomla Module positions
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.
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.
<?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 © 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>
ASKER
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
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
What is the name of the module you are trying to use, what line is it in your code?
ASKER
<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
and
<jdoc:include type="modules" name="menutop" />
I have taken them out of the code i attached as they were showing up incorrectly
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...
If the module appears on the white background at the top put them just before it...
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
ASKER
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
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
ASKER
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
Tom
template.css
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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;
}
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;
}
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
div.search input
{
width: 95%;
border: 1px solid #ccc;
margin: 15px 0 10px 0;
}
Change the 95% to your preferred pixel width example: 34px
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...
ASKER
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
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
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;
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;
ASKER
Thank you very much for all your help - I wish I could add more points!
<jdoc:include type="modules" name="yourmodulename" />