News detail on different template

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
newvision
Forum Members
Forum Members
Posts: 77
Joined: Wed Jun 10, 2009 11:57 am
Location: usa

News detail on different template

Post by newvision »

When the 'more' link is is clicked on in the news summary, it goes to another page that is set up with left and right content items. It only shows up in the left content area. Then all the news detail content is not shown. I've looked in the css trying to find where I can adjust the height but I can't seem to find it. Can someone tell me where i can adjust the setting? Here is the page that is showing the detail news item. I have another template that I use on other pages that has only one column for the main content. That is how I want to show my detail news.

http://www.youngevityvirginia.com/inde ... eturnid=15

The css file I am using is as follows:
@charset "utf-8";
/* CSS Document */

/* --------------------------------------------------
Global
-------------------------------------------------- */

body
{
text-align: left;
min-width: 960px;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #494949;
font-size: 62.5%;
margin: 0 auto;
border: 0;
padding: 0;
background-color: #fff;
background-image: url(uploads/Ocean/bg_page.png);
background-repeat: repeat-x;
background-position: top;
}

/* --------------------------------------------------
cufon - do not delete!
-------------------------------------------------- */

.cufon
{
/* nothing needed here, move along... */
}

/* --------------------------------------------------
Utils
-------------------------------------------------- */

dfn
{
display: none;
overflow: hidden;
}
.accessibility, hr
{
position: absolute;
top: -999em;
left: -999em;
}
.clear
{
clear: both;
}
.clear:after
{
content: ".";
height: 0px;
visibility: hidden;
display: block;
clear: both;
}

/* --------------------------------------------------
Typography
-------------------------------------------------- */

p
{
font-size: 1.2em;
line-height: 1.5em;
}
h1
{
font-size: 1.8em;
color: #006e8d;
}
h2
{
font-size: 1.6em;
color: #0073aa;
padding-bottom: 0.2em;
border-bottom: 1px dotted #cccccc;
}
h3
{
color: #006e8d;
font-size: 1.4em;
}
h4
{
font-size: 1.2em;
color: #006e8d;
}
h5
{
color: #006e8d;
}
a
{
color: #5A7720;
}
a:hover
{
color: #5a7720;

}
/* Custom */
#contentHeading h1
{
margin: 0;
padding: 0;
color: #006e8d;
}
/* Homepage headings */
.boxFeaturedContentMain h2
{
margin-top: 0;
}
.boxSubContentLeft h3, .boxSubContentRight h3
{
margin-top: 0;
}
#footerContent a
{
color: #5a7720;
text-decoration: none;
}
li
{
font-size: 1.3em;
}

/* --------------------------------------------------
Layout
-------------------------------------------------- */

#masthead
{
margin: 0 auto;
padding: 0;
width: 96em;
height: 114px;
color: #fff;
}
/* I know this is horrible, but Safari/Chrome are 1px out */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#masthead
{
height: 115px;
}
}
#masthead x:-moz-any-link, x:default
{
height: 115px;
}
#mastheadLeft
{
float: left;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
#mastheadLeft img
{
border: 0;
}
#mastheadRight
{
float: right;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 25px;
}
#navMain
{
margin: 0 auto;
width: 960px;
}
#navSub
{
margin: 0 auto;
width: 960px;
height: 48px;
}
#contentHeading
{
text-align: left;
width: 920px;
height: auto;
margin: 0 auto;
padding: 20px;
padding-bottom: 0;
}
#contentWrapper
{
text-align: left;
width: 960px;
margin: 0 auto;
padding: 0;
border: 0;
background-color: #fff;
}
#contentMain
{
width: 960px;
margin: 0 auto;
padding: 0;
border: 0;
text-align: left;
float: left;
margin-top: 10px;
margin-bottom: 20px;
background-color: #fff;
}
/* HACK: IE6 doubles the right margin. */
* html #contentMain
{
margin-right: 10px;
}
/* Full-width content page, no child pages */
#contentMainFullWidth
{
width: 920px;
margin: 0 auto;
text-align: left;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
margin-right: 20px;
}
/* Two column content page, no children */
#contentLeftNoChildren
{
float: left;
width: 630px;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 20px;
margin-right: 20px;
}
/* HACK: IE6 doubles the left margin. */
* html #contentLeftNoChildren
{
margin-left: 10px;
}
#contentRightNoChildren
{
float: left;
width: 250px;
margin-top: 10px;
margin-bottom: 20px;
margin-right: 20px;
}
/* HACK: IE6 doubles the right margin. */
* html #contentRightNoChildren
{
margin-right: 10px;
}
/* Two column content page, with children */
#contentLeftWithChildren
{
float: left;
width: 480px;
margin-top: 10px;
margin-bottom: 20px;
margin-right: 20px;
}
/* HACK: IE6 doubles the margins. */
* html #contentLeftWithChildren
{
margin-left: 0;
margin-right: 10px;
}
#contentRightWithChildren
{
float: left;
width: 200px;
margin-top: 10px;
margin-bottom: 20px;
margin-right: 20px;
}
/* HACK: IE6 doubles margins. */
* html #contentRightWithChildren
{
margin-left: 10px;
margin-right: 10px;
}

/* --------------------------------------------------
Homepage content boxes
-------------------------------------------------- */

.boxFeaturedContentLeft
{
float: left;
width: 610px;
margin: 0;
border: 0;
padding: 0;
margin-left: 20px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 20px;
}
/* HACK: IE6 doubles the left margin. */
* html .boxFeaturedContentLeft
{
margin-left: 10px;
}
.boxFeaturedContentMain
{
width: 610px;
}
.boxSubContentLeft
{
float: left;
width: 275px;
padding: 10px;
min-height: 15px;
margin-right: 10px;
margin-top: 20px;
background-color: #e3e3e3;
background-image: url(uploads/Ocean/bg_feature_box.gif);
background-repeat: repeat-x;
background-position: top;
}
.boxSubContentRight
{
float: left;
width: 275px;
padding: 10px;
min-height: 15px;
margin-left: 10px;
margin-top: 20px;
background-color: #e3e3e3;
background-image: url(uploads/Ocean/bg_feature_box.gif);
background-repeat: repeat-x;
background-position: top;
}
.boxNewsRight
{
float: right;
width: 290px;
margin: 0;
border: 0;
padding: 0;
margin-left: 10px;
margin-right: 20px;
margin-bottom: 20px;
}
/* HACK: IE6 doubles the right margin. */
* html .boxNewsRight
{
margin-right: 10px;
}
#footerWrapper
{
text-align: left;
width: 960px;
min-height: 60px;
margin: 0 auto;
border-top: 2px solid #ccc;
background-color: #e3e3e3;
}
#footerContent
{
width: 940px;
margin: 0 auto;
padding: 10px;
font-size: 1.1em;
}

/* --------------------------------------------------
Main Navigation
-------------------------------------------------- */

#navMain ul
{
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#navMain li
{
float: left;
padding: 0;
font-size: 1.3em;
font-weight: bold;
margin-right: 2px;
background-color: #006e8d;
background-image: url(uploads/Ocean/nav_main_bg_off.gif);
background-repeat: repeat-x;
background-position: bottom;
}
#navMain li h3
{
display: block;
float: left;
font-size: 1em;
margin: 0;
padding: 0 15px;
line-height: 2.3em;
color: #494949;
border: 0;
}
#navMain li a
{
display: block;
float: left;
text-decoration: none;
padding: 0 15px;
line-height: 2.3em;
color: #fff;
}
#navMain li a:hover
{
background-image: url(uploads/Ocean/nav_main_bg_on.gif);
background-repeat: repeat-x;
background-position: bottom;
}
#navMain li.currentpage
{
color: #494949;
background-color: #fff;
background-image: url(uploads/Ocean/nav_main_bg_active.gif);
background-repeat: repeat-x;
}
#navMain li.activeparent
{
color: #494949;
background-color: #fff;
background-image: url(uploads/Ocean/nav_main_bg_active.gif);
background-repeat: repeat-x;
}
#navMain li.activeparent a
{
color: #494949;
background-color: #fff;
background-image: url(uploads/Ocean/nav_main_bg_active.gif);
background-repeat: repeat-x;
}
#navMain li.activeparent a:hover
{
color: #494949;
background-color: #fff;
background-image: url(uploads/Ocean/nav_main_bg_active.gif);
background-repeat: repeat-x;
}

/* --------------------------------------------------
Sub Navigation
-------------------------------------------------- */

#navSub ul
{
list-style: none;
margin: 0;
padding: 0;
margin-top: 5px;
float: left;
}
#navSub li
{
float: left;
padding: 0;
font-size: 1.05em;
margin-right: 10px;
font-weight: normal;
}
#navSub li a
{
text-decoration: none;
color: #494949;
}
#navSub li a:hover
{
text-decoration: underline;
color: #006e8d;
}
#navSub li h3
{
display: block;
float: left;
font-size: 1em;
margin: 0;
padding: 0;
color: #494949;
border: 0;
text-decoration: underline;
}

/* --------------------------------------------------
Tables
-------------------------------------------------- */

table
{
border: 1px solid #c2d2e9;
background-color: #ffffff;
font-size: 1.1em;
border-collapse: collapse;
}
.cellHeading
{
text-align: left;
border: 0;
color: #000;
background-color: #dfe8f6;
font-weight: bold;
}
td
{
text-align: left;
border: 1px solid #c2d2e9;
}
.cellBold
{
color: #1f437c;
font-weight: bold;
background-color: #dfe8f6;
}
.cellAlt
{
background-color: #f6f9fe;
}
.cellAlignCentre
{
text-align: center !important;
}

/* --------------------------------------------------
Forms
-------------------------------------------------- */

input
{
border: 1px solid #e3e3e3;
padding-left: 5px;
margin-bottom: 6px;
background-color: #f5f5f5;
background-image: url(images/bg_form.gif);
background-repeat: repeat-x;
background-position: left top;
}

/* --------------------------------------------------
Search
-------------------------------------------------- */

.search-input
{
margin-right: 2px;
}
.search-button
{

}

/* --------------------------------------------------
News
-------------------------------------------------- */

/* Summary */
.NewsSummary
{
margin-bottom: 5px;
border-bottom: 1px dotted #cccccc;
}
/* Homepage */
.boxNewsRight .NewsSummary
{
padding: 10px;
}
.NewsSummaryPostdate
{
color: #666;
}
.NewsSummaryLink
{
font-size: 1.2em;
}
.NewsSummaryCategory
{
color: #666;
}
.NewsSummaryAuthor
{
color: #666;
}
.NewsSummarySummary
{
font-size: 1em;
line-height: 0;
margin-top: 5px;
margin-bottom: 5px;
}
.NewsSummaryContent
{
font-size: 1.2em;
margin-top: 5px;
margin-bottom: 5px;
}
.NewsSummaryExtra
{

}
.NewsSummaryField
{

}
/* Detail */
.NewsPostDetailDate
{

}
h3.NewsPostDetailTitle
{

}
hr.NewsPostDetailHorizRule
{

}
div.NewsPostDetailCategory
{

}
div.NewsPostDetailAuthor
{

}
div.NewsPostDetailContent
{

}
div.NewsPostDetailExtra
{

}
div.NewsPostDetailPrintLink
{

}
div.NewsPostDetailReturnLink
{

}
div.NewsDetailField
{

}

/* --------------------------------------------------
Slideview homepage widget
-------------------------------------------------- */

/* Preloader stuff, do not modify! */
.svwp
{
width: 50px;
height: 20px;
background: #fff;
}
.svwp ul
{
position: relative;
left: -999em;
}
.slideViewer
{
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
background: #fff;
}
/* Your list of images */
.slideViewer ul
{
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
margin: 0;
padding: 0;
}
.slideViewer ul li
{
float:left;
}
/* For the text pop-up */
.slideViewer span.typo
{
padding: 6px; /* do not modify padding */
background: #fff;
color: #494949;
font: bold 12px Arial;
}
.thumbSlider
{
overflow: hidden;
width: 1%;
background: #fff;
}
.thumbSlider ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
.thumbSlider ul li
{
float:left;
margin: 0;
}
.thumbSlider a
{
color: #fff;
text-decoration: none;
}
.thumbSlider a img
{
border: 0;
display: block;
padding: 0;
}
.thumbSlider p.tmbrdr {
/* the border above -not around- each thumb */
/* width, height and top values are dynamically added by the script. Do not modify. */
position:relative;
left: 0;
font-size: 0.01em;
left: 0;
margin: 0;
padding: 0;
}
a.left, a.right
{
/*the left and right buttons (links)*/
background: transparent; /* could be any color */
color: #ff0000;
font: bold 16px Arial;
overflow: hidden;
}
a.left span, a.right span
{
}
a.left img, a.right img
{
border: 0;
}
a.l_dis, a.r_dis
{
background: transparent; /* ALWAYS leave transparent. this is the 'disabled' state of the link ! */
cursor: default;
}
a.l_dis span, a.r_dis span
{
display: none;
}
a:focus
{
outline:none;
}
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm
Location: Raalte, the Netherlands

Re: News detail on different template

Post by RonnyK »

If the more-link is clicked, then the {content} block will be replaced of EITHER the current page OR from the targetted page, based on the detailpage= parameter. So if detailpage= parameter is used, then that specific page will be opened, with the replacement of thats page {content}-block

Ronny
osxfil
Forum Members
Forum Members
Posts: 186
Joined: Wed Apr 01, 2009 6:03 pm

Re: News detail on different template

Post by osxfil »

Maybe will be better styling page elements only via CSS and not as in your page:

Code: Select all

<div id="svwp0" class="boxFeaturedContentMain slideViewer" style="width: 283px; height: 390px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(255, 0, 0); border-right-color: rgb(255, 0, 0); border-bottom-color: rgb(255, 0, 0); border-left-color: rgb(255, 0, 0); ">
			  
	<div id="NewsPostDetailDate">
		Jan 27, 2011
	</div>
<h3 id="NewsPostDetailTitle">Long Beach Freedom Health Expo</h3>

<hr id="NewsPostDetailHorizRule">

	<div id="NewsPostDetailSummary">
		<strong>
			Health Freedom Expo - Long Beach, CA - March 25,-27.&nbsp; <br>
		</strong>
	</div>

	<div id="NewsPostDetailCategory">
		Category: News
	</div>
	<div id="NewsPostDetailAuthor">
		Posted by: AmyLA
	</div>

<div id="NewsPostDetailContent">
	<p>Health Freedom Expo - Long Beach, CA - March 25,-27.</p>
<p>Dr. Garry Collin s  will be a speaker at this event. His topic tile for the event will be,  "Malabsorption: America's Hidden Life - Threatening Disease<img src="uploads/images/garryanddog.JPG" alt="" width="283" height="390"><span class="typo" style="position: absolute; width: 271px; margin-right: 0px; margin-bottom: 0px; margin-left: -283px; margin-top: 378px; opacity: 0.9; "></span></p>
<p>Dr. Collins will be discussing America’s obsession and overconsumption of&nbsp; wheat and wheat products have resulted in rampant sub-clinical&nbsp; and undiagnosed celiac disease, this in turn creates malabsorption syndromes creating mineral deficiencies and an endless list of &nbsp;diseases.</p>
<p>BIOGRAPHY</p>
<p class="boxFeaturedContentMain">A 1997 Magna Cum Laude graduate of Life University College of Chiropractic,&nbsp;&nbsp; A fellow of the International Academy of Medical Acupuncture.&nbsp; Private practice in Floyd, Virginia</p>
</div>


<div id="NewsPostDetailPrintLink">
	<a href="http://www.youngevityvirginia.com/index.php?mact=News,cntnt01,print,0&cntnt01articleid=13&cntnt01showtemplate=false&cntnt01returnid=15">Print</a>
</div>
<div id="NewsPostDetailReturnLink"><a href="http://www.youngevityvirginia.com/">Return</a></div>

       <div class="NewsDetailField">
        	            <img src="http://www.youngevityvirginia.com/uploads/news/id13/logo-half.png"><span class="typo" style="position: absolute; width: 271px; margin-right: 0px; margin-bottom: 0px; margin-left: -283px; margin-top: 378px; opacity: 0.9; "></span>
             </div>
  
			</div>
Where is mixed styling via CSS with direct styling. This is a perfect chaos ;)
newvision
Forum Members
Forum Members
Posts: 77
Joined: Wed Jun 10, 2009 11:57 am
Location: usa

Re: News detail on different template

Post by newvision »

Thanks for you help. But to be a complete idiot, I have to ask, 'Where do I put this?"
Thanks.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: News detail on different template

Post by Dr.CSS »

Where do you put what?...
newvision
Forum Members
Forum Members
Posts: 77
Joined: Wed Jun 10, 2009 11:57 am
Location: usa

Re: News detail on different template

Post by newvision »

Where do I put the code that obxfil wrote in the above response. Thanks :)
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: News detail on different template

Post by Dr.CSS »

What they are saying is that you have your News showing up in a container/div with a set height that is why you don't see all the news detail...

<div style="width: 283px; height: 390px; border: 0px solid rgb(255, 0, 0);" id="svwp0" class="boxFeaturedContentMain slideViewer">

<div id="NewsPostDetailDate">
Jan 27, 2011
</div>

So either that div is in the news template or in the page template, I would very rarely ever use inline style like that...
Post Reply

Return to “Modules/Add-Ons”