asked on

Collapsable module in joomla question

I have recently built a Joomla template from scratch but need a little assistance with one last problem. I am still new to joomla development and have little php knowledge.

My website has a left side main content side along with a right side sidebar. I created div's so that the main content is app. 750 wide and the right sidebar is the balance of the 960 width. How do I code this as a collapsible module. If I don't want to use the sidebar, I would like my content to fill the page. Do I also have to create separate div's with new formatting that runs across the page? I have looked at joomla documentation but need more basic to the point step by step advise.

The website is not live.

Amanda Watson

I would disable the right side bar and make the main content 100% rather than 750px.

If you can access the CSS find the left and/or right column references and add display:none; to them and that will get rid of them and then make the main_content 100%

Should work

wingcat

ASKER

Ok but how do I have them enabled when I add a module to the right side? I think I need to add php code to the index page

Amanda Watson

The code should already be in the index.php if its part of the template.
So on some pages you want to have the right module showing and on others you want it disabled.

I really need to see the template to say for sure, but usually if you publish a module for some menu items and not for others, the space automatically fills the remaining space.

If yours isn't I need to see the code to see why not.

Alternatively you can have two versions of the template installed (just changed the template.xml title to reflect the new template folder name to differentiate between two templates) and use the main content 100% for the menu items that have no right module, and use the other one for the menu items that you want to have the right module for.

This is a long way around, but as I said without seeing the code of the template I can't see

wingcat

ASKER

Below is the index.php file. you will see the component and the right module. Those are the ones in question. The module on the right is the div called right. here is the layouts.css.

Sorry about the lack of order here, I haven't arranged it yet.

<body>
<div id="header" class="container_12">

<div id="header" class="grid_12 ">
  <div id="top_left">
    <jdoc:include type="modules" name="user1" style="none" />
  </div>
  <div id="top_right">
  
    <jdoc:include type="modules" name="user2" style="none" />
  </div>
<div id="menu">
  
<jdoc:include type="modules" name="user3" style="none" />
</div>
  
</div>

</div>

<div style="clear:both"></div>
                

<div id="content" class="container_12">

<div id="logo">
  
<jdoc:include type="modules" name="user4" style="none" />
</div>
  <div id="phototop">
<jdoc:include type="modules" name="user5" style="none" />
  </div>
<div id="main_body" class="grid_9">

  <jdoc:include type="component" />
</div>

<div id="right" class="grid_3 ">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>

</div>

<div style="clear:both"></div>            

<div id="footer" class="container_12">

<div id="bottommenu">


<jdoc:include type="modules" name="bottom" style="none" />
</div>

<div id="footer_left" class="grid_6 ">
  <jdoc:include type="modules" name="legals" style="none" />
</div>

<div id="footer_right" class="grid_6 ">
  <jdoc:include type="modules" name="footer" style="none" />
</div>

</div>
</body>







@charset "utf-8";

#header {

margin-top: 0px;}

#main_body h1{
font-family: Arial, Helvetica, sans-serif;
color: #060;
font-size: 20px;
margin-top: 10px;
margin-right: 15px;
margin-left: 0px;
margin-bottom: 10px;
background-image: url(../images/h1.png);
background-repeat: no-repeat;
height: 40px;
width: 700px;
padding-left: 10px;
padding-top: 7px;
}

#main_body ul {
color: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.85em;
list-style-image: url(../images/check.png);
line-height: 20px;
margin-left: 20px;
margin-right: 40px;
}


.phototop {

margin-top:-7px;
}

p {
font-family: Arial, Helvetica, sans-serif;
color: #CCC;
font-size: 0.85em;
margin-left: 10px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
#main_body p {
color: #CCC;
margin-right: 40px;
}


ul {
color: #CCC;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.85em;
list-style-image: url(../images/check.png);
line-height: 20px;
margin-left: 20px;
margin-right: 20px;
}
ol {
color: #CCC;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .9em;
margin-left: 20px;
}





#wrapper {
width: 1200px;
margin-right: auto;
margin-left: auto;
background-color: #000;
}


#top_left {
width:400px;
height:25px;
float: left;
}
#top_left p {
color: #CCC;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
margin-left: 10px;
margin-top: 0px;
}

#top_right {
left:400px;
width:400px;
height:25px;
float: right;
}
#top_right p {
color: #CCC;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
margin-right: 10px;
margin-top: 0px;
}

#logo {
width:450px;
height:150px;
float: left;
margin: 0px;
padding: 10px;

}
#phototop {
width:460px;
height:150px;
float: right;
margin: 0px;

}
#maincontent {
left:0px;
top:235px;
width:670px;
background-color: #000;
background-image: url(../images/site_06.jpg);
float: left;
background-repeat: no-repeat;
}

#bottom {
left:0px;
top:979px;
width:1200px;
height:78px;
background-image: url(../images/site_08.jpg);
clear: both;
margin:0;
padding:0;
float: left;
}
#logo img {
margin-left: 10px;
}
#right h1 {
margin-left: 0px;
margin-right: 0px;
font-size: 20px;
}
#right h2 {
margin-left: 0px;
margin-right: 0px;
font-size: 18px;
}
#right p {
margin-right: 10px;
text-align: justify;
margin-left: 0px;
}

#right ul {
color: #0d4220;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.85em;
list-style-image: url(../images/check.png);
line-height: 20px;
margin-left: 0px;

}

#footer {
}




#footer_left {
width:400px;
height:86px;
float: left;
}
#footer_right {
left:0px;
width:400px;
height:86px;
float: right;
}
#footer_left p {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
color: #CCC;
margin-top: 0px;
margin-left: 40px;
}
#footer_right p {
margin-right: 30px;
text-align: right;
margin-left: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
color: #CCC;
margin-top: 0px;
}


#menu {
width:940px;
float: left;
height: 53px;
}
#menu ul {
margin-top: -2px;
padding-left: 0px;
}
#footer {
background-image: url(../images/site_footer.jpg);
background-repeat: no-repeat;
background-position: center bottom;
height: 204px;
width: 1026px;

}


#menu ul li {
display: inline;
margin-right: 25px;
margin-left: 25px;
}


#menu a {
color: #FFF;
text-decoration: none;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 90%;
font-weight: bold;
}

#menu a:hover {
color: #01702C;
text-decoration: none;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 90%;
font-weight: bold;
}

#bottommenu {
left:0px;
top:1057px;
width:1025px;
height:57px;
clear: both;
float: left;
padding: 0;
margin-top: 60px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#bottommenu ul {
margin-top: 14px;
padding-left: 30px;
}
#bottommenu ul li {
display: inline;
margin-right: 25px;
margin-left: 25px;
}
#bottommenu a {
color: #FFF;
text-decoration: none;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 90%;
font-weight: bold;
}
#bottommenu a:hover {
color: #01702C;
text-decoration: none;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 90%;
font-weight: bold;
}
#right h1 {
font-family: Arial, Helvetica, sans-serif;
color: #008400;
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
text-align: left;
}



/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;

background-repeat: no-repeat;
background-position: center bottom;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12{
display:inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;

}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
margin-left: 0;
}

.omega {
margin-right: 0;
}

/* Grid >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 {
width:60px;
}
.container_12 .grid_2 {
width:140px;
}
.container_12 .grid_3 {
width:220px;
}
.container_12 .grid_4 {
width:300px;
}
.container_12 .grid_5 {
width:380px;
}
.container_12 .grid_6 {
width:460px;
height: 20px;
}
.container_12 .grid_7 {
width:540px;
}
.container_12 .grid_8 {
width:620px;
}
.container_12 .grid_9 {
width:700px;
}
.container_12 .grid_10 {
width:780px;
}
.container_12 .grid_11 {
width:860px;
}
.container_12 .grid_12 {
width:940px;
}




/* Prefix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left:80px;
}
.container_12 .prefix_2 {
padding-left:160px;
}
.container_12 .prefix_3 {
padding-left:240px;
}
.container_12 .prefix_4 {
padding-left:320px;
}
.container_12 .prefix_5 {
padding-left:400px;
}
.container_12 .prefix_6 {
padding-left:480px;
}
.container_12 .prefix_7 {
padding-left:560px;
}
.container_12 .prefix_8 {
padding-left:640px;
}
.container_12 .prefix_9 {
padding-left:720px;
}
.container_12 .prefix_10 {
padding-left:800px;
}
.container_12 .prefix_11 {
padding-left:880px;
}


/* Suffix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right:80px;
}
.container_12 .suffix_2 {
padding-right:160px;
}
.container_12 .suffix_3 {
padding-right:240px;
}
.container_12 .suffix_4 {
padding-right:320px;
}
.container_12 .suffix_5 {
padding-right:400px;
}
.container_12 .suffix_6 {
padding-right:480px;
}
.container_12 .suffix_7 {
padding-right:560px;
}
.container_12 .suffix_8 {
padding-right:640px;
}
.container_12 .suffix_9 {
padding-right:720px;
}
.container_12 .suffix_10 {
padding-right:800px;
}
.container_12 .suffix_11 {
padding-right:880px;
}


/* Push Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {
left:80px;
}
.container_12 .push_2 {
left:160px;
}
.container_12 .push_3 {
left:240px;
}
.container_12 .push_4 {
left:320px;
}
.container_12 .push_5 {
left:400px;
}
.container_12 .push_6 {
left:480px;
}
.container_12 .push_7 {
left:560px;
}
.container_12 .push_8 {
left:640px;
}
.container_12 .push_9 {
left:720px;
}
.container_12 .push_10 {
left:800px;
}
.container_12 .push_11 {
left:880px;
}




/* Pull Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {
right:80px;
}
.container_12 .pull_2 {
right:160px;
}
.container_12 .pull_3 {
right:240px;
}
.container_12 .pull_4 {
right:320px;
}
.container_12 .pull_5 {
right:400px;
}
.container_12 .pull_6 {
right:480px;
}
.container_12 .pull_7 {
right:560px;
}
.container_12 .pull_8 {
right:640px;
}
.container_12 .pull_9 {
right:720px;
}
.container_12 .pull_10 {
right:800px;
}
.container_12 .pull_11 {
right:880px;
}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/


.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;

}


.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}
#right h3 {
font-family: Arial, Helvetica, sans-serif;
color: #008400;
font-size: 18px;
margin-top: 15px;
margin-bottom: 10px;
text-align: left;
background-image: url(../images/h3.png);
background-repeat: no-repeat;
padding-top: 7px;
padding-bottom: 10px;
margin-right: 5px;
padding-left: 10px;
margin-left: -2px;
}

Open in new window

Amanda Watson

no chance of seeing a test link at all anywhere?

Can I download the whole template at all so I can install it and test it myself?

wingcat

ASKER

I put a test site at: design point (DOT) ca

It's just for testing purposes. What I'd like is to include a collapsible right column.

Amanda Watson

Ok, so if you disable your right modules change this line in layout.css
.container_12 .grid_9 {
width:700px;
}

to
.container_12 .grid_9 {
width:100%;
}

Your content will fill the whole space.

If you want other pages to have the right module, duplicate your template (make a copy as explained earlier and reinstall it with a different name so change the folder name and change the template name in your xml. )so you have one with the above code as
.container_12 .grid_9 {
width:700px;
}

For all pages you want the right module to show

and one as
.container_12 .grid_9 {
width:100%;
}

For all pages you want the right module gone

Amanda Watson

Just to be clear, can you please disable your right modules currently so I can look at how the page loads if there are not right modules there.

Amanda Watson

If that is not what you are after try adding this to layout.css
#mainwrap {
width:100%;
}

and replace your index file with this one.

Make sure you do a backup

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="header" class="container_12">

<div id="header" class="grid_12 ">
  <div id="top_left">
    <jdoc:include type="modules" name="user1" style="none" />
  </div>
  <div id="top_right">
  
    <jdoc:include type="modules" name="user2" style="none" />
  </div>
<div id="menu">
  
<jdoc:include type="modules" name="user3" style="none" />
</div>
  
</div>

</div>

<div style="clear:both"></div>
                

<div id="content" class="container_12">

<div id="logo">
  
<jdoc:include type="modules" name="user4" style="none" />
</div>
  <div id="phototop">
<jdoc:include type="modules" name="user5" style="none" />
  </div>
  <div id="mainwrap">
<div id="main_body" class="grid_9">

  <jdoc:include type="component" />
</div>

<div id="right" class="grid_3 ">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div><!--endmainwrap-->
</div>

<div style="clear:both"></div>            

<div id="footer" class="container_12">

<div id="bottommenu">


<jdoc:include type="modules" name="bottom" style="none" />
</div>

<div id="footer_left" class="grid_6 ">
  <jdoc:include type="modules" name="legals" style="none" />
</div>

<div id="footer_right" class="grid_6 ">
  <jdoc:include type="modules" name="footer" style="none" />
</div>

</div>
</body>
</html>

Open in new window

Amanda Watson

Sorry this is just the body code

<body>
<div id="header" class="container_12">

<div id="header" class="grid_12 ">
  <div id="top_left">
    <jdoc:include type="modules" name="user1" style="none" />
  </div>
  <div id="top_right">
  
    <jdoc:include type="modules" name="user2" style="none" />
  </div>
<div id="menu">
  
<jdoc:include type="modules" name="user3" style="none" />
</div>
  
</div>

</div>

<div style="clear:both"></div>
                

<div id="content" class="container_12">

<div id="logo">
  
<jdoc:include type="modules" name="user4" style="none" />
</div>
  <div id="phototop">
<jdoc:include type="modules" name="user5" style="none" />
  </div>
  <div id="mainwrap">
<div id="main_body" class="grid_9">

  <jdoc:include type="component" />
</div>

<div id="right" class="grid_3 ">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div><!--endmainwrap-->
</div>

<div style="clear:both"></div>            

<div id="footer" class="container_12">

<div id="bottommenu">


<jdoc:include type="modules" name="bottom" style="none" />
</div>

<div id="footer_left" class="grid_6 ">
  <jdoc:include type="modules" name="legals" style="none" />
</div>

<div id="footer_right" class="grid_6 ">
  <jdoc:include type="modules" name="footer" style="none" />
</div>

</div>
</body>

Open in new window

wingcat

ASKER

Hi. Thanks for the tip. How do you specify a different template for certain pages? There is a methos using php code using count. Just not sure how to add it in.
Also. How do you add to the xml or what do you add to use different templates for different pages?

Amanda Watson

Ok, to assign different templates to different websites, you need to select the template and hit edit, then on the left hand side there is a section called Menu Assignment, just select which menu items you want to have that template showing.

Each template folder will have a file called templateDetails.xml. If you open this using notepad, or dreamweaver.

At the tope of the template you will see
<?xml version="1.0" encoding="iso-8859-1"?>
<install version="1.5" type="template">
<name>rt_refraction_j15</name>
<version>1.5.1</version>
<creationDate>05/31/09</creationDate>
<author>RocketTheme</author>
<authorEmail>support@rockettheme.com</authorEmail>
<authorUrl>http://www.rockettheme.com</authorUrl>
<copyright>Copyright 2005-2009 - RocketTheme.com</copyright>
<license>Proprietary - RocketTheme Joomla Club Members Only</license>
<description>
<![CDATA[
<h1>RocketTheme Refraction</h1>

Change

<name>rt_refraction_j15</name>

to

<name>rt_refraction_j15_newtemplate</name>

And make sure you change the folder of the template to match the new name

wingcat

ASKER

This will only make a new template. What I would like to have is collapsible modules or a conditional code that will check to see of the right module has been activated. If it has, the template should render like it is. If not, the template should be 100% width also covering the right position with the component.

There is a conditional php code using count feature that will count the activated modules and render the template accordingly. That is my preferred method.

Amanda Watson

That was part of my second solution here that I wanted you to try

Try adding this to layout.css
#mainwrap {
width:100%;
}

and replace your index file with this one.

Make sure you do a backup Let me know how that goes

<body>
<div id="header" class="container_12">

<div id="header" class="grid_12 ">
  <div id="top_left">
    <jdoc:include type="modules" name="user1" style="none" />
  </div>
  <div id="top_right">
  
    <jdoc:include type="modules" name="user2" style="none" />
  </div>
<div id="menu">
  
<jdoc:include type="modules" name="user3" style="none" />
</div>
  
</div>

</div>

<div style="clear:both"></div>
                

<div id="content" class="container_12">

<div id="logo">
  
<jdoc:include type="modules" name="user4" style="none" />
</div>
  <div id="phototop">
<jdoc:include type="modules" name="user5" style="none" />
  </div>
  <div id="mainwrap">
<div id="main_body" class="grid_9">

  <jdoc:include type="component" />
</div>

<div id="right" class="grid_3 ">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div><!--endmainwrap-->
</div>

<div style="clear:both"></div>            

<div id="footer" class="container_12">

<div id="bottommenu">


<jdoc:include type="modules" name="bottom" style="none" />
</div>

<div id="footer_left" class="grid_6 ">
  <jdoc:include type="modules" name="legals" style="none" />
</div>

<div id="footer_right" class="grid_6 ">
  <jdoc:include type="modules" name="footer" style="none" />
</div>

</div>
</body>

Open in new window

wingcat

ASKER

Hi,

I did try this, but it didn't work. Seemed to mess up the page.

What I would like to implement into the code is this:

<?php if ($this->countModules( 'user1' )) : ?>
<div class="user1">
<jdoc:include type="modules" name="user1" style="rounded" />
</div>
<?php endif; ?>

But how is this done when I have specified a width for the main component? Collapsible columns?

Joomstrup

You are on the right track

using the countModules is the way to go

you need to have all the css and code for the module you wish to collapse inside you php code
what this code does is simply if there are no modules assign to that specific module position no code inside this statement will be rendered.

you can also use the same code structure to check "are there any modules assigned in xxxx"

if there are none then show your main content at 100% width
if there is then show in say 80% or whatever your design calls for

ASKER CERTIFIED SOLUTION

Amanda Watson

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial