OK - I've been puting up with the hideous green of the default css style on my news pages for quite long enough. With the old version of tt_news it was easy to reformat the news. It just grabbed all the details from your template.

Since they updated things to benefit from css, it's been much more difficult to reformat things. Actually, it's not difficult to change the formatting, but it's next to impossible to access the CSS file in order to do it, especially, if like me, you don't have root access (or even SFTP or WebDev access) to the sever.

One solution is to change the CSS file in the extension, save it, uninstall the extension, replace the default CSS file and then reinstall from the local extension. Much too messy for me.

A better way is to grab firebug for firefox, and find the CSS file. Copy it to your favourite editor and make the changes you want.

Now for the tricky part. Get rid of all the CR (where you press Enter) and Tab's and replace them all with spaces (yes it takes ages).

Once you've done this, save it as a text file.

Log into typo3 and go to your template by pressing the template button in the left margin. Pick the page where you want to change the formatting. For me, it's the root page of my website.

In the drop down box at the top right (where you select the constant editor etc) pick TypoScript Object Browser.

Follow the tree down to [plugin] -> [tt_news] -> [_CSS_DEFAULT_STYLE]. It's the longest line in the entire template, most likely).

Next click on the [_CSS_DEFAULT_STYLE] heading.

Select everything in the Edit Object Text Box (the top one), making sure to get the entire string. Delete it (or cut and paste it to a document if you want to back it up).

Copy the modified CSS from your text file using Ctrl-V and paste it into the textbox labelled

"plugin.tt_news._CSS_DEFAULT_STYLE ="

Press the Update Button.

Check your website to make sure it works.

Just a hint when editing the CSS. Do your text formatting etc in each section below the comments (they look like /*-------------------- Some words --------------*/) The changes you make here will cascade down to the rest of the items in the section.

Make sure you do all the parts of the news (ie List, Single Item, Cat etc) otherwise the changes will only take for a single News page.

My page (http://godlike.com.au) now looks a lot better.

My CSS string is here, if anyone wants to use it as a basis.

/*----------------------------------- clearer -----------------------------------*/,/* prevent floated images from overlapping the div-containers they are wrapped in */ .news-list-container hr.clearer, .news-single-item,hr.clearer, .news-latest-container hr.clearer {border:1px solid #333333; clear:right; height:1px; } .news-latest-container HR.clearer {clear:left; } /*----------------------------------- tt_news LATEST view -----------------------------------*/ .news-latest-container {background-color:#000000; border:1px solid #333333; color:#CCCCCC; font-family:arial; } .news-latest-container H2,.news-latest-gotoarchive {color:#cccccc; padding:3px; margin:3px; border:1px solid #666; /*background-color:#D8FA70;*/ background-color:#000000; font-size:14pt; } .news-latest-gotoarchive {font-weight:bold; margin-top:5px; font-size:10pt; } .news-latest-gotoarchive A:LINK .news-latest-gotoarchive A:VISITED, .news-latest-gotoarchive A:HOVER {color:#cccccc; } .news-latest-gotoarchive A {color:#cccccc; } .news-latest-item { /* IE hack */ height: 1%; line-height: 1.3; /* IE hack end */ padding:3px; margin:3px; border:1px solid #666; background-color:#000000; } .news-latest-item IMG {margin-bottom:5px; margin-right:5px; border:1px solid #666; float:left; } .news-latest-category IMG {float: none; border:none; margin:0px; } .news-latest-date,.news-latest-morelink,.news-latest-category {font-size:9pt; } .news-latest-morelink {height:12px; } .news-latest-morelink A {float:right; } /*--------------------------------- tt_news LIST view -----------------------------------*/ .news-list-container {border:1px solid #000; background-color:#000000; color:cccccc; font-family:arial; } .news-list-item { /* IE hack */ height: 1%; line-height: 1.3; /* IE hack end */ padding:3px; margin:3px; border:1px solid #666; background-color:#000000; } .news-search-form {padding:3px; margin-bottom:5px; border:1px solid #666; background-color:#000000; } .news-search-emptyMsg{ margin:0px; } .news-search-form FORM {margin:0px; } .news-list-container H3 {margin-bottom: 5px; padding: 2px; border-bottom: 1px solid #333333; background-color: #000000; color:cccccc; } .news-list-container H3 A:LINK,.news-list-container H3 A:VISITED,.news-list-container H3 A:HOVER {color:#cccccc; padding-left:2px; } .news-list-container H3 A {color:#cccccc; } .news-list-container P {padding-left:3px; } .news-list-date {float: right; color: #cccccc; width: 180px; text-align: right; height: 20px; margin-top: -2px; margin-right: -2px; font-size: 9pt; font-weight: normal; background-color: #000000; } .news-list-imgcaption {float: right; padding-top:3px; padding-right:3px; font-size: 9px; } .news-list-container IMG {float: right; font-family:arial; border:1px solid #666; margin-bottom:5px; margin-right:2px; margin-left:5px; } .news-list-category IMG {float: none; border:none; margin:0px; } .news-list-morelink,.news-list-category {font-size:9pt; margin-left:3px; } .news-list-morelink {margin-bottom:3px; } .news-list-browse {text-align: center; } /*--------------------------------- tt_news Page-Browser ---------------------------------*/ .tx-ttnews-browsebox, .browseBoxWrap {margin:3px; border:1px solid #666; padding:3px; background-color:#000000; color:cccccc; font-family:arial; } .tx-ttnews-browsebox TD {font-size: 10px; } .tx-ttnews-browsebox-strong, .tx-ttnews-browsebox-SCell {font-weight: bold; } .tx-ttnews-browsebox-SCell P,.tx-ttnews-browsebox TD P{margin:0px; } .tx-ttnews-browsebox-SCell {background-color: #000000; border:1px solid #666; } .news-search-emptyMsg {font-size: 11px; margin-left: 10px; } /*--------------------------------- tt_news SINGLE view ---------------------------------*/ .news-single-item {font-family:arial; color:cccccc; padding:5px; margin-bottom:5px; border:1px solid #666; background-color:#000000; } .news-single-item H2 {font-size: 16px; font-weight:bold;
color: #cccccc; margin-bottom: 0px; } .news-single-item H3 {margin-bottom: 15px; } .news-single-img { float: right; margin-left:5px; } .news-single-imgcaption {padding:3px; clear:both; } .news-single-category {float: right; } .news-single-backlink, .news-single-backlink a {font-weight: bold; font-size: 10px; margin-bottom: 15px; margin-top: 10px; } .news-single-timedata {float: right; } .news-single-timedata, .news-single-author,.news-single-imgcaption {font-size: 9pt; } .news-single-author {padding-bottom: 3px; } .news-single-additional-info {background-color: #000000; /* clear: both;*/ margin-top: 15px; border: 1px solid #666; padding:3px; padding-bottom:0px;} .news-single-related,.news-single-files,.news-single-links {border: 1px solid #666; margin:0px; margin-bottom: 3px; padding:3px; background-color:#000000; } .news-single-related DD, .news-single-links DD, .news-single-files DD {margin-left:20px; } .news-single-related DT, .news-single-links DT, .news-single-files DT {font-weight: bold; font-size: 11px; margin-left:5px; width:90%; } /*--------------------------------- tt_news Archivemenu (AMENU) --------------------------------- */ .news-amenu-container {margin-top:10px; padding:3px; border:1px solid #333; background-color:#000000; color:cccccc; font-family:arial; } .news-amenu-container LI {padding-bottom:1px; } .news-amenu-container UL {padding:3px; margin-top:5px; margin-left:0px; margin-bottom:0px; border:1px solid #666; background-color:#000000; list-style-type: none; } .news-amenu-container H2 { color:#ccc; padding:3px; border:1px solid #666; background-color:#000000; } .news-amenu-item-year {font-weight: bold; border: 1px solid #666; padding: 2px; background-color:#000000; color:#fff; } /*--------------------------------- tt_news Categorymenu (CATMENU) --------------------------------- */ .news-catmenu {padding:5px; margin:10px 0px 10px 10px; border:1px solid #666; background-color:#000000; color:cccccc; font-family:arial; } .news-catmenu-header {font-size:11pt; font-weight:bold; } .news-catmenu DIV {font-size:10pt; white-space: nowrap; } .news-catmenu DIV img, .news-catmenu img, .news-catmenu-header img {margin:0px; padding: 0px; vertical-align: middle; } .news-catmenu-ACT {font-weight:bold; } /* Styles for catmenu mode "nestedWraps" */ .level1 {padding:1px; padding-left:10px; background-color:#000000; border-left:1px solid #666; border-top:1px solid #666; } .level2 {padding:1px; padding-left:10px; background-color:#000000; border-left:1px solid #666; } .level3 {padding:1px; padding-left:10px; background-color:#000000; border-left:1px solid #666; border-top:1px solid #666; } .level4 {padding:1px; padding-left:10px; background-color:#000000; border-left:1px solid #666; }

Please post a comment if you have any questions or you come across a problem, and I'll do my best to help.

BTW - Typo3 doesn't work properly with Mozilla Firefox 3. I think it's because of this

Changes to character set inheritance

Firefox 3 closes a security bug in frames and iframes that allowed them to inherit the parent's character set. This could cause problems in certain cases. Now, frames are only allowed to inherit the parent's character set if both frame and parent were loaded from the same server. If you have pages that assume that frames loaded from other servers will inherit the same character set, you should update the frames' HTML to indicate their character set specifically.

From here...

http://developer.mozilla.org/en/docs/Updating_web_applications_for_Firefox_3

Hope this helps all you typo3 people out there.