Fitting the news module to a custome template

[TJINAK]

Hello,

Thanks for reading.

I'm working on using the news module for a portion of my homepage which is based on a customized template that was laid out with a graphics program.

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

My problem is that when the vistor clicks the "more" link you will see the page break as the article is to large to fit into the designated space within the template.  I thought originally that clicking more link would take the visitor to a page that would reside outside the custome template, ie; its own page.

I'm hoping some can advise me on a better approach to my issue.  This is the first time I've tried to take a custome template and fix it so the web master can edited the homepage.

I really appreciate your time and efforts.

TJ

[RonnyK]

If you want the news to open in another page, you can give the "detailpage" parameter. That will make the news open the results in the content-area, with the given page-name of that page.

Ronny

[TJINAK]

Thank you Ronny. 

Now I've created a page called news and used the correct syntax:

{news detailpage="News"}

This is exactly what I wanted but I don't want the "News" page to be displayed within the menus, ie: hidden except when accessed by the summary page.

Thanks again,

Tim

[TJINAK]

I spoke to soon and see I need the "options" under the news page.

Now I just need to customize the css to have the news module fit the color scheme of the page.

Anything else I should be aware of?

Thanks this is a great step forward.

TJ

[TJINAK]

After reviewing the stylesheet for the Module:news I can't seem to find out how to change the body color and the text of the summary page to fit my template.  Black background with white text:

Here again is my test page:

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

I thought it would be a matter of adding a background color and font color to this:

.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: #000;
    font-color: #fff;

But no joy.  No change to the background or text color.

Please advise if possible.

Thank you very much,

TJ

[RonnyK]

TJ,

background color is set in CSS with:

Code: Select all

background-color:

Text color with:

Code: Select all

color:

Ronny

[TJINAK]

I appreciate you correcting my css syntax!

Still no joy.  I must not be placing the css in the correct area of the style sheet.  I'm under the impression that with this code in my content area:

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

This is using the News summary in the content area of my template.  So that is why I have placed my css for background color and text color under this class:

.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-color: #000;
    color: #fff;
}

Yet it is not affecting my layout on either the summary area or the news page...

Here is the complete News module stylesheet:

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

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

.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-color: #000;
    color: #fff;
}

.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 {}
*/

[Dr.CSS]

Your template has no CSS attached to it so it won't make any changes...

If you want the same changes to the detail page you will need to target...

     
       
09/12/07

[TJINAK]

I appreciate your input.  I have not had time to revist the issue yet so its not resolved; although, I'm not sure I understand why there is a style sheet for the Module:News..?

Would I be correct in thinking that I could apply my css inline with my template?  I'm not worried about formating the details page as it looks fine.  Just my template.

Thanks for your input !!!

TJ

[calguy1000]

The stylesheet for the news module is just so that the 'default' stuff will look semi pretty.  You're not stuck to it.

Here's what I suggest you do:

Code: Select all

{news detailpage='news' detailtemplate='my_detail_template'}

explanation:
the 'detailpage' parameter tells the News module to redirect to a different page to display detailed articles
  - the 'news' page can use a different template, and a completely different set of stylesheets if you want.
the 'detailtempalte' parameter tells the News module to display the detailed article using that named (smarty) template.

Then in the News admin (1.1 or later) in the 'detail template' tab, click on 'add template' (scroll down to the bottom of the page), give it the name 'my_detail_template' and adjust the divs, etc, as you see fit.  Experiment (with baby steps) one step at a time, until you begin to see how things work.  Viewing the source repeatedly helps.

By doing this you can adjust the News to display in whatever style you want, using existing styles, or new ones in your template.  If you want to remove some items, just cut them out of the template.  If you want to re-order them or put them inside different divs, go for it.  Then just 'submit' the template, and refresh your news summary page, and click on the 'more' link.

If you get the grasp of this message it tells you that:
a) You can arrange the news detail view pretty much any way you want.
    (keep experimenting)
b) Similar paramters exist for the sumamry view, so you can style that any way you want too.
    (experiment with your own summary template, and the 'summarytemplate' parameter).
c) You can style output from (pretty much) any CMS module any way you want
    (many of them are similar in functionality to News)
d) You can use different templates for different purposes
e) if you explore the other parameters to the News module, you'll understand that by seperating your news articles into different categories and using the parameters above, and the ones in the help, you can style different categories independently.
f) if you get here, you'll understand that you could re-purpose some of the news module categories to possibly display classified ads, job ads (whatever you can think of) without any code modifications.  And at the same time, keep regular News functionality.  And.... style them each independently.
g) You may not know this, but you can tie modules together..... the detail view from the News module may be able to provide information to a google maps module (for example).... or to the comments module (I know this works).  The possibilities are limitless.

And "that" is the power of CMS Made Simple.  That's why it's better than the others.  There are additional reasons, but the 'flexibility once you've awakened to it' is IMHO, the best reason.

[TJINAK]

Thank you for this great explanation!  I will experiment and see what I can do.

A big step forward for my work w/ cmsms.

Anybody ever throw the idea around of writing a book for cmsms that goes into these type of topics?

Thanks again!!

TJ