How To Remove A Column?

ImmortalSon · Post by **ImmortalSon** » Fri Feb 16, 2007 9:35 am

Hi...

I'm trying to learn all this CSS stuff and currently customizing the Andreas01 template which has three columns, but was just wondering; Is it possible to remove the right-most column completely, to extend the width of the main content column?

I have attached a *.gif file to try and show you what I mean. Any ideas on what I need to change?

Many Thanks,

R.

[gelöscht durch Administrator]

RonnyK · Post by **RonnyK** » Fri Feb 16, 2007 9:57 am

R.,

if you just delete the calling to the right column in the template, it is gone. You might have to edit the css as well if the width of the remaining "main" column is fixed (a.k.a. if some space is reserved for the right column). That should be visible in the area of the #wrapper, #main, #right or something similar.

Ronny

ImmortalSon · Post by **ImmortalSon** » Fri Feb 16, 2007 11:55 am

Ronny...

I've been playing around with the template and stylesheets for a while now. Would it even be possibl to move the news section from it's current location, over to the rightmost column?? I'm whipped with this because everytime I try to move...it just messes up. I have copied the code below and I'm new to all this, so I'm open to any suggestions?

Thanks again,

R.

The coding for the template itself ::

Code: Select all

<!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="en" lang="en">
<head>

<!-- Type the title of your site here -->
<title>AmberLeaf Media :: {title}</title>

{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

</head>

</__body>

<div id="wrap">

    <!-- start accessibility skip links -->
    <ul class="accessibility">
      <li><a href="#menu_vert" accesskey="s" title="Skip to navigation">Skip to navigation</a></li>
      <li><a href="#main">Skip to content</a></li>
    </ul>
    <!-- end accessibility skip links -->

<img id="frontphoto" src="uploads/AmberLeaf01/front.jpg" width="760" height="175" alt="" />

      <!-- Start Horizontal Navigation -->
      <div id="avmenu">
         <h2 class="accessibility">Menu:</h2>
         {cms_module module='menumanager' template='AmberLeaf01 :: Menu'   collapse="1"}    

 <!-- Start News -->
      <div id="news">
         <h3>News</h3>
          {news limit=3 detailpage='news'}
      </div>
<!-- End News -->

      </div>
      <!-- End Horizontal Navigation -->

   <!-- Start Content (Navigation and Content columns) -->
   <div id="content" class="clearfix">

      <!-- Start Content Area -->
         <h2>{title}</h2>
         {content} <br />

	  <!-- End Content Area -->


   </div>
   <!-- End Content -->

   <!-- Start Footer -->
   <div id="footer" class="clearfix">Copyright <a href="http://wesiteaddress.com">websitename</a>.
   </div>
   <!-- End Footer -->


</div><!-- end wrap -->


<__body>
</__html>

The coding for the main CSS ::

Code: Select all

Screen Layout: */

/*
This layout depends on modified news summary template

<!-- Start News Display Template -->
{foreach from=$items item=entry}

<h3>
	{$entry->titlelink}
</h3>

<p>
{$entry->category}
{if $entry->author}
	by {$entry->author}
{/if}

{if $entry->formatpostdate}
<strong>
		{$entry->formatpostdate}
</strong><br />
{/if}


{if $entry->summary}
 {eval var=$entry->summary}
</p>
  <p class="textright">[{$entry->morelink}]</p>

{else if $entry->content}
		{eval var=$entry->content}
</p>
{/if}

{/foreach}
<!-- End News Display Template -->

Copy paste this template to your news summary template and delete from here
*/

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(uploads/AmberLeaf01/bg.gif) top center repeat-y;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}

#header {
clear: both;
margin: 20px 0 0 0;
padding: 0;
height: 45px;
}

#header h1 {
width: 250px;
margin: 0 0 10px 0;
float: left;
}

#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0 0 10px 0;
font-size: 0.8em;
line-height: 1.2em;
}

#frontphoto {
margin: 0 0 10px 0;
border: 0;
}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}	

#avmenu li {
margin-bottom: 4px;
}


/* first level */
#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #ffa904;
display: block;
padding: 6px 0 0 10px;
background: #d8d8d8;
border-left: 4px solid #959595;
}	
	
#avmenu li a:hover {
background: #b0b0b0;
color: #900a0b;
border-left: 4px solid #900a0b;
}

#avmenu li a.menuactive {
background: #b0b0b0;
color: #900a0b;
border-left: 4px solid #900a0b;
}


/* second level */
#avmenu li li a {
font-weight: normal;
height: 20px;
text-decoration: none;
color: #ffa904;
display: block;
padding: 6px 0 0 24px;
background: #e5e5e5;
border:0;
}	

#avmenu li li a:hover {
background: #b0b0b0;
color: #900a0b;
border:0;
}

#avmenu li li a.menuactive {
background: #b0b0b0;
color: #900a0b;
border:0;
}

/* third level */
#avmenu li li li a {
font-weight: normal;
height: 20px;
text-decoration: none;
color: #ffa904;
display: block;
padding: 6px 0 0 34px;
background: #f4f4f4;
border:0;
}	

#avmenu li li li a:hover {
background: #b0b0b0;
color: #900a0b;
border:0;
}

#avmenu li li li a.menuactive {
background: #b0b0b0;
color: #900a0b;
border:0;
}


.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #ffa904;
background-color: #f4f4f4;
line-height: 1.3em;
}





















#content {
margin: 0 110px 20px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}


#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#content img {
padding: 1px;
display:inline;
background: #959595;
border: 4px solid #f0f0f0;
}



h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #900a0b;
}

a:hover {
text-decoration: underline;
color: #900a0b;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}

The News Section CSS ::

Code: Select all

div#news {
  margin: 2em 0 1em 1em;  /* margin for the entire div surrounding the news list */
  border: 1px solid #000; 
  background: #fff; 
}

div#news h2 {
   line-height: 2em;
   background: #fff;
}

.NewsSummary {
    padding: 0.5em 0.5em 1em; /* padding for the news article summary */
    margin: 0 0.5em 1em 0.5em; /* margin to the bottom of the news article summary */
    border-bottom: 1px solid #ccc; 
}

.NewsSummaryPostdate {
  font-size: 90%;
  font-weight: bold;
 }

.NewsSummaryLink {
    font-weight: bold;
    padding-top: 0.2em;
}

.NewsSummaryCategory {
  font-style: italic;
  margin: 5px 0;
 }

.NewsSummaryAuthor {
  font-style: italic;
  padding-bottom: 0.5em;
}

.NewsSummarySummary, .NewsSummaryContent {
  line-height: 140%;
 }

.NewsSummaryMorelink {
  padding-top: 0.5em;
}

#NewsPostDetailDate {
  font-size: 90%;
  margin-bottom: 5px;
  font-weight: bold;
  }

#NewsPostDetailSummary {
   line-height: 150%;
   }

#NewsPostDetailCategory {
  font-style: italic;
  border-top: 1px solid #ccc;
  margin-top: 0.5em;
  padding: 0.2em 0;
}

#NewsPostDetailContent {
  margin-bottom: 15px;
  line-height: 150%;
  }

#NewsPostDetailAuthor {

  padding-bottom: 1.5em;
  font-style: italic;
}


/* to add specific style to the below divs, uncomment them. */

/* 
#NewsPostDetailTitle {}
#NewsPostDetailHorizRule {}
#NewsPostDetailPrintLink {}
#NewsPostDetailReturnLink {}
*/

The Tools CSS ::

Code: Select all

/* Clearing */
	.stretch,
	.clear {
		clear:both; 
		height:1px; 
		margin:0; 
		padding:0; 
		font-size: 15px;
		line-height: 1px;
	}
	.clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	* html>body .clearfix {
		display: inline-block; 
		width: 100%;
	}
	
	* html .clearfix {
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
	}

/* End Clearing */


/* Replace */
	.replace {
		display:block;
		
		background-repeat: no-repeat;
		background-position: left top;
		background-color:transparent;
	}
	/* tidy these up */
	.replace * {
		text-indent: -10000px;
		display:block;
		
		background-repeat: no-repeat;
		background-position: left top;
		background-color:transparent;
	}
	.replace a {
		text-indent:0;
	}
	.replace a span {
		text-indent:-10000px;
	}
/* End Replace */


/* Accessibility */
     span.accesskey {
     	text-decoration:none;
     }
     .accessibility {
     	position: absolute;
     	top: -999em;
     	left: -999em;
     }
dfn {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}
/* End Accessibility */

RonnyK · Post by **RonnyK** » Fri Feb 16, 2007 1:30 pm

R.

do you have a link to your site, just to see how it shows. A quick look at your code tells me that you have embedded the news-call inside the hor-navigation div instead of outside it. Further it looks like your having some news-logic written in your main css.

Ronny

CMS Made Simple Forums

How To Remove A Column?

How To Remove A Column?

Re: How To Remove A Column?

Re: How To Remove A Column?

Re: How To Remove A Column?