Please help...How do I add a right column?

twoutrally · Post by **twoutrally** » Wed May 11, 2011 1:08 pm

I am trying to change my website from a two column template to three column.
Is this possible to add a right third column?

GandalfGrey · Post by **GandalfGrey** » Fri May 13, 2011 2:18 pm

Yes it is. You have to do some changes in your index.php file and probably add some code in the css file for the template.
What template are you using?

MCNX · Post by **MCNX** » Sun Jul 24, 2011 6:14 am

Hi there,
I'm looking for something similar. I need to add a right column to a one column template.
This is my code:

Code: Select all

<body class="Body">
<div id="container"> 

<!-- PAGE TOP -->
   <div id="pagetop">   
   <jdoc:include type="modules" name="pagetop" />
   </div>
<!--- END --->


<!-- HEADER -->
  <div id="mainContent">
  <div id="header">
<!-- ad site name here -->
</div>
<!--- END --->


<!-- TOP MENU -->
   <div id="topmenu">   
   <jdoc:include type="modules" name="topmenu" />
   </div>
<!--- END --->


<!-- MAIN -->
<jdoc:include type="component" />
</div>
<!--- END --->


<!-- FOOTER -->
<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
<!--- END --->

And the CSS

Code: Select all

/* HEADER */

#header {
	width: 100%;
        height: 120px;
	padding: 10px 0px 10px 0px;
	margin: 7px 0 0 0;
	border-bottom: none;
	color: #333333;
	font-size: 50px;
	font-weight: bold;
	text-align: left;
	font-family: Georgia;
	background: url(../images/Header-1.jpg) no-repeat center;
}

/* PAGE TOP */

#pagetop {
	 width: 610px;
	 height: 20px;
	 margin-left: 20px;
         padding-top: 4px;
       	 color: #777;
	 font-size: 12px;
	 text-align: left;
}

#pagetop a {
	 font-weight: bold;
	 padding-left: 10px;
	 color: #333;
}
#pagetop a:hover {
	 color: #2664B5;
}


/* TOP MENU */

#topmenu  {
	  width: 100%;
	  height: 30px;
	  position: relative;
	  float: none;
	  margin-top: 2px;
          padding-top: 7px;
	  color: #EEE;
          background: #333;
	  text-align: right;
	  text-transform: uppercase;
}

#topmenu  a {
	  font-weight: bold;
	  padding-right: 10px;
          padding-left: 10px;
	  color: #EEE;
}
#topmenu   a:hover {
           background:#EEE;
	   color: #2664B5;
           padding-top: 9px;
           padding-bottom: 8px;
}


/* FOOTER */

#footer {
        font-family: Arial,Helvetica,sans-serif;
        color: #666666;
        background: #FFF;
	font-size: 10px;
        text-align: center;
        width: 650px;
        padding-top: 4px;
        padding-bottom: 4px;
        border-top: solid 2px #333;
        margin: 25px auto;    
}

Any advice?
Cheers,
Alex

donna03281 · Post by **donna03281** » Wed Jul 27, 2011 2:36 am

Having the same problem trying to figure this out . . . I have actually download two templates (both using three columns -- black_lernvid.com and siteground-j16-11). Neither one comes up as it's supposed to. I'm assuming that's because the blue stork's style is always dominant??? New to Joomla and finding it very difficult to navigate . . . but will keep trying.

donna03281 · Post by **donna03281** » Wed Jul 27, 2011 2:37 am

Just a little worried because it seems that you haven't even answered May 13, 2011's post . . . hmmmm?

MCNX · Post by **MCNX** » Wed Jul 27, 2011 9:23 am

Maybe they are on holidays? :-)

GandalfGrey · Post by **GandalfGrey** » Fri Jul 29, 2011 12:41 pm

Hi MCNX.
You are right, i have been on holiday.

Here is a start to add a new column, it would be easier if i could see the whole page.

Code: Select all

<body class="Body">
<div id="container">

<!-- PAGE TOP -->
   <div id="pagetop">   
   <jdoc:include type="modules" name="pagetop" />
   </div>
<!--- END --->


<!-- HEADER -->
  <div id="mainContent">
  <div id="header">
<!-- ad site name here -->
</div>
<!--- END --->


<!-- TOP MENU -->
   <div id="topmenu">   
   <jdoc:include type="modules" name="topmenu" />
   </div>
<!--- END --->

<!-- COL_1 -->
   <div id="col_1">   
   <jdoc:include type="modules" name="col_1" />
   </div>
<!--- END --->

<!-- MAIN -->
<jdoc:include type="component" />
</div>
<!--- END --->


<!-- FOOTER -->
<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
<!--- END --->

and for the css part, add this rows.

Code: Select all

#mainContent {overflow:hidden}

#col_1  {
  float:right;
  margin-bottom:-2000px;
  padding-bottom:2000px;
  width:250px;
}

Then open the file <your Joomla! home>/templates/YOUR TEMPLATE/templateDetails.xml and add this line <position>col_1</position> in the position section.

You probably need to add some more css and html, but it's hard to tell when i can't see all the css code.

Perhaps there is a link to the page?

MCNX · Post by **MCNX** » Sat Jul 30, 2011 3:19 pm

Cheers mate! I hope you've had a nice holiday.
I've just been experimenting with a minimalist template. It is not online, but when I finish I'll send you the link.
Thanks again!
Alex

The Joomla! Forum™

Please help...How do I add a right column?

Please help...How do I add a right column?

Re: Please help...How do I add a right column?

Re: Please help...How do I add a right column?

Re: Please help...How do I add a right column?

Re: Please help...How do I add a right column?

Re: Please help...How do I add a right column?

Re: Please help...How do I add a right column?

Re: Please help...How do I add a right column?