Seperate styles for teaser articles and articles

Hi there,

I came across a Problem with layouting pages that include article teasers.

As you can see in the image below, I have two teasers on my page and the .mod_article.block has a width of 600px.
http://idisk.me.com/ruhry/Public/Pic...830-122149.png

Now I want to change the layout. I prefer the article teasers to be shown next to each other. I give the mod_article.block a float: left and a with: 300.
http://idisk.me.com/ruhry/Public/Pic...830-122217.png

The article teasers are now perfect but the changes affect the actual article. When I click on "read more" the article has now a width of 300px. How can I make this one 600px broad?
http://idisk.me.com/ruhry/Public/Pic...830-122242.png

Is there a way to modify a template or something to be able to make a rule for articles that are displayed as teasers and articles that are displayed full? I couldn´t find anything.
Thank´s for your help!
Valentin

Hi,

I've not used article teasers before but could set a page class and reference it in your css?
Would something like this work?

.mod_article.block {
width:600px;
}
body.teaserpage .mod_article.block {
width:300px;
}

Or, maybe viewtopic.php?f=7&t=1930

hi,

thanks for your reply. the problem is, that when I set a page class for the page where the article is displayed, this class is also used on the page that displays my teaser articles...
that´s why I wish to find a way of seperating them.

When you create an Article, in version 2.9 you can specify an ID or a class
[attachment=1:3bxwxf7o]classid.JPG[/attachment:3bxwxf7o]

Then this class is only given to the teaser block.
[attachment=0:3bxwxf7o]firebug.JPG[/attachment:3bxwxf7o]

When clicking read more it the class (test) wasn't there.
Maybe thats the trick?

But you have to set a class for every teaser which is written... And usually the writers are not conerned about the css settings.

Hi vinchenzison,

thanks for this. I really can´t believe I didn´t realize that this option is there already. Thank you very much. Just made my day!
And Grapio, you´re probably right. It would be easier to have this somehow automated. But since my "editor" copy-pastes complete pages, everytime he adds a new one, the settings will be duplicated. Not very beautiful solution but I can live with it.
Have a good day!

Correct me if I'm wrong, but I think you could customize the DCA to give the teaser's class field a default value (then you could even hide that field in user group permissions to prevent the client from changing it).

That may be one way of automating it...

Hi Medianomaly,

in my Case, where exactly do I have to go to achieve that? Where or what is the DCA? I have never played around with this.
Best,
Valentin

Well, probably too big a subject to get into here. :)

But pretty much everything I know about the Data Container Array is here:
http://www.contao.org/dca.html
http://blog.qzminski.com/2010/04/create ... -part-two/

The idea is you would open /system/config/dcaconfig.php and insert something like this:

Code:

---

$GLOBALS['TL_DCA']['tl_article']['fields']['teaserCSSClass'']['default'] = 'myClass';

---

Unfortunately, I PROMISE the above isn't going to work as-is, I've just presented it as a concept. I actually don't know exactly the syntax to do it -- if I wasn't pushing towards a deadline today I'd investigate it for you.

Hopefully someone could pick this up and give you the correct syntax, or if you have a little PHP knowledge you can check it out -- it's all just one big array.

Untested as well, but i think the id can be set with

Code:

---

$GLOBALS['TL_DCA']['tl_article']['fields']['teaserCssID'][0]['default'] = 'myId';

---

and the class with

Code:

---

$GLOBALS['TL_DCA']['tl_article']['fields']['teaserCssID'][1]['default'] = 'myClass';

---

Not sure where the [0] and [1] should go, but the field 'teaserCssID' is actually a multiple text field.