CSS Stylesheet for NEWS

[Sofia1]

Hey guys, where do I find the stylesheet for the news template? I thought it was my default stylesheet, but it does not seem to pick it up.

Would I be better off creating my own template using the news template and then assign that to my style sheet?

Any help is much appreciated.

[RonnyK]

With the default comes "Module: News" which can be attached to your template, when using:

"Layout -> Templates", press CSS-button and attach the stylesheet.

Ronny

[Sofia1]

I'm confused now.
On the news module I have created a Summary Templated.  I have also created a template in the Layout - Templates section to which I have attaced a CSS file.  But those to files are not related.
Would you mind clarifying that for me?
On the templates under the news section is no CSS button.

[RonnyK]

Sofia1,

if I'm correct, is there a stylesheet under "Layout -> Stylesheets" called "Module: News".

The attached stylesheets to your page-template (NOT news-template), are visible under "Layout -> Templates ", button CSS.

When a page is opened, all attached stylesheets are read, so if "Module: News" is attached, this one is read as well. When the page that opens, holds NEWS, the styling in the stylesheet, will work, as the news-page calls DIV#NEWS f.e.

So you're right that there is no direct relation between the news-template and the stylesheet, however, the elements styled in the stylesheet, will be the ones named in the news-template.

I hope this clarifies some, if not, don't hesitate to ask.....

Ronny

[TJINAK]

I'm working on this very topic now.  I have:

1. created my own template.
2. attached the module:news stylesheet to my template.
3. Added the colors I want to appear in the summary view of the news module:

module:news stylesheet:

.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 #000000;
    background: black;
    font-color: white;
}

4. inserted this code into my template where I want the news module to display:

{news detailpage="News" number="2"}

The news module summary template appears correctly within my template but I see no change in the styling of background color or font color.  I'm just trying to change the background color to black and the font to white.

Please advise, I'm frustrated on what I'm doing wrong here...

using CMS Made Simple 1.0.8 "Kona"


Thank you very much!
TJ

PS:  I love this project!

[alby]

.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 #000000;
    background: black;
    font-color: white;
}

4. inserted this code into my template where I want the news module to display:

{news detailpage="News" number="2"}

Check in your html source if exist NewsSummary class and what around

Alby

[TJINAK]

This is where my confusion lies....

I'm not sure how it works when you are trying to style a module that is essentially a smarty tag.

I was under the impression that when using the news module the style sheet - module:news is automatically attached to the template.  Therefore; when you insert the news module tag:
{news detailpage="News" number="2"}
the sytlesheet module:news is used.

Then from reading other posts I was under the impression that I had to attach the module:news stylesheet to my custome template in order for those styles to affect the {news detailpage="News" number="2"} code.

Unfortunetly nothing is working for me.

I have a template that is displaying the news correctly with the code above but I'm stuck on how to change the background color and text color of the news summary displayed from this call {news detailpage="News" number="2"}.

Please help if you can.  I really want to understand how to use this news module and get the styling under control.

Thank you for your time and consideration,

TJ

[Dr.CSS]

You have to attach the style sheets manually to any template that is going to show the News articles...

The module tag just calls the module to do it's thing and spit out its info, like the {menu} tag goes thru your page structure and spits out an ul li of page links, the News tag goes thru the news articles and spits out the parts of the news called out in the news summary/detail templates, for example, they won't show the date if you take it out of the template, etc....

If you are using the default summary and detail news templates they have diff. calls for summary and detail, as in...



{if $entry->formatpostdate}

{$entry->formatpostdate}

{/if}


{$entry->titlelink}



{$category_label} {$entry->category}



Detail template...

{if $entry->formatpostdate}

{$entry->formatpostdate}

{/if}
{$entry->title}



{if $entry->summary}


{eval var=$entry->summary}


{/if}

If you look at the "view source" of the rendered page you will see some of these calls depending on whether you are at the summary or detail view, if you look at the Module: News CSS you will see them called out for styling, here is a sample that includes summary and detail...

.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%;
  }

[TJINAK]

Thank you for replying.  I understand exactly what you are saying and have done things correctly.  The only problem is that the styles are not being applied.

Here is the news area of my template when viewing the source in firefox:





09/12/07



Article #3 Finding the right Teacher





Now that school is here many parents are wondering how to find the right instructor for their child.



[More]







09/12/07



Article #2 by Tim





New Fender Tube amps have arrived at The Music Box!



[More]







Here is the stylesheet module:News that is attached to my template:


div#news {
  margin: 21em 0 1em 1em;  /* margin for the entire div surrounding the news list */
  border: 4px solid #000;
  background: #000;
  color: red;
}

div#news h2 {
  line-height: 2em;
  background: #000;
  color: red;
}

.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 #000000;
    background: black;
    font-color: red;
}

.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%;
  background: black;
  font-color: red;
}
.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 {}
*/


Note:  The styles for are not being applied.  My background is always white with black text.  That is not how my css is reading....

So w/firefox web developers toolbar installed I chose to view css for the page in question:

http://www.pcs-alaska.com/kenaimusiccon ... ?page=test

and I find that there is no stylesheet called Module:news being applied.  So I take it this is my problem - but - I'm confused on why the module:news stylesheet is not being applied when cmsms is showing that this stylesheet is attached to my template.

Thanks you very much for your time and consideration,

TJ

[Dr.CSS]

Good chance the {stylesheet} tag is not in your template...

[TJINAK]

Oopps!

Thank you very much!
I'll get to work.

TJ

[xenoverse]

Hello, could someone kindly provide me with a step-by-step on how to do what was described above?

I'm trying to make my news module section have the same background as the rest of my website. I don't know what to attach the 'Module:News' stylesheet to. And I don't know where to put the {stylesheet}

Right now the news displays with a white background and black text, all I want to do is change the background to a light gray (same as my main site template) and adjust the text to Tahoma font and possibly change text color.

Thanks

[Peciura]

Links you might be interested in.
http://wiki.cmsmadesimple.org/index.php ... /Templates
http://wiki.cmsmadesimple.org/index.php ... _Tutorials [3]
http://www.icms.info/
http://www.youtube.com/watch?v=T0g9WkCwO7s
http://wiki.cmsmadesimple.org/index.php ... ade_Simple

[xenoverse]

Thanks for your reply but I already know how to do the things in those tutorials. I already have a static template set up with smarty place holders and a stylesheet attached to my main default template.

All I'm trying to know how to do is to style the news portion only. Am I trying to do it wrong? I have the smarty tag for news module set up under the main column of my site and I need to know how to make that news module look like the rest of my site?

Here's what I have so far

Code: Select all

{cms_module module="news" category="Source Community"}

is inside the content of a Page called News

The 'News Summary Template' and 'News Detail Template' I'm using are almost exact copies of the Samples for those templates.

edit: I think I understand it now, I have to attach the 'Module:News' stylesheet to my _main_ page template, right? Then style the news module by editing that stylesheet?

[xenoverse]

To clarify, I understand everything in this thread through to reply #9 and my problem/question is identical to that of TJINAK above.

Only thing being that I _do_ have a {stylesheet} tag in my template (with the 'Module:News' stylesheet attached to that template) but still no styles are in effect for my news portion. The edits don't seem to be doing anything when I try and edit the 'Module:News' stylesheet.

Ideas?