Seperate styles for teaser articles and articles

[valentin]

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.


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.


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?


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

[vinchenzison]

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

[valentin]

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.

[vinchenzison]

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?

[grapio]

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

[valentin]

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!

[Medianomaly]

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...

[valentin]

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

[Medianomaly]

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:

$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.

[ramjet]

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

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

and the class with

$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.