change code for article listing to pure css?

cyrano · Post by **cyrano** » Sat 19. Aug 2006, 08:59

Hi all,

guess i'am right that i read that this will come in future?

struggle at the moment with such template, made definitions in tmpl file in css but still get a rendered teaser table.

using this for template:

Code: Select all

<div>
<dl>
<dt>[TITLE]<a href="{ARTICLELINK}">{TITLE}</a>[/TITLE]</dt>
<dd>[SUMMARY]{SUMMARY}[/SUMMARY]<br /></dd>
[IMAGE]<a href="{ARTICLELINK}">{IMAGE}</a>[/IMAGE]<br>
<dd class="last">[MORE]<a href="{ARTICLELINK}">{MORE}</a>[/MORE]</dd>
</dl>
</div>

and get this before defined template settings in rendered page:

Code: Select all

<!-- START TEASER TABLE VERTICAL -->

                             <table id="teaserTable">

                              <tr>
                               <td id="teaserTableLeftCell" valign="top" width="100%">

where i can change this? means in which php file?
thank you for a hint.

Post by **Oliver Georgi** » Sat 19. Aug 2006, 09:52

Hm, don't know - have you set article listing template for each article.

Oliver

cyrano · Post by **cyrano** » Sat 19. Aug 2006, 10:07

hi Oliver,

thank you for your reply.

yes set article listing for each article.

May be it depends on using TeaserEX RT?

Then i have to dig there.
EDIT: yes seems to be there, so i have to patch in this code.

Otherwise i would be happy to get this solved in Core release.

jsw_nz · Post by **jsw_nz** » Sat 19. Aug 2006, 12:27

Hi Cyrano,

Yes, seems teaser_ex uses table to create wrapper/layout for output, so even if you use .tmpl -- still gets wrapped in table - guessing css version of this is a wee bit more difficult, since any css would/could inherit container settings (even those outside of teaser css - so maybe table way of doing things is the best strategy.

In the meantime, looking at your posted code:

Code: Select all

<dt>[TITLE]<a href="{ARTICLELINK}">{TITLE}</a>[/TITLE]</dt>

Whats that? <dt></dt> I assume it is the equivalent of:

Code: Select all

<div class="dt">[TITLE]<a href="{ARTICLELINK}">{TITLE}</a>[/TITLE]</div>

Looks like XML, so you are using new:

Code: Select all

$phpwcms['header_XML'] = 1;

Just interested - could you fill me in......

Rahner · Post by **Rahner** » Sun 20. Aug 2006, 16:34

@jsw_nz
<dl>
<dt>text</dt>
<dd>explanation</dd>
</dl>
This is a Defintion list, maybe like <ul> or <ol>

jsw_nz · Post by **jsw_nz** » Sun 20. Aug 2006, 17:45

Sure enough - part of the Html 4.0 specification - feel like I have been hiding my head under a rock - cheers -

dr.swank · Post by **dr.swank** » Wed 6. Sep 2006, 21:27

hi all,

I was looking at this rt and, with a little hack, found a way to do a all css layout. The last arg that can be passed to the rt id horizontal or vertical table layout. Well, if we ad an option for div and adjust the code in the rt file, then we get pure div based layout.

here is what I changed:

at line 489 change to this:

Code: Select all

if ($c_tableorientation == 'horz')
                {
                  $listing .= "\n<!-- START TEASER TABLE HORIZONTAL -->\n
                             <table id=\"teaserTable\">";
                }
                else if ($c_tableorientation == 'div')
                {
                  $listing .="\n<!-- START TEASER DIVS -->\n";
                }
                else
                {
                  $listing .= "\n<!-- START TEASER TABLE VERTICAL -->\n
                             <table id=\"teaserTable\">
                              <tr>
                               <td id=\"teaserTableLeftCell\" valign=\"top\" width=\"$colwidth%\">";
                }

and then do your tmpl file with div layouts and do your css in your default css file.

If you want to wrap the whole tag in a seperate div for absolute positioning then just put <div>{RT}</div> in the content part...

here is an example of a template file I wrote (really simple):

Code: Select all

<div class="expose">
    <div class="exposeTitle">{TITLE}</div>
    <div class="exposeImage"><a href="{ARTICLELINK}">{IMAGE}</a></div>
    <div class="exposeSummary">{SUMMARY}</div>
    <br/>
    <div class="exposeLink"><a href="{ARTICLELINK}">mehr</a></div>
</div>

and the css that goes with it:

Code: Select all

.expose
{
    float: left;
    width: 170px;
    height: 250px;
    background-color: #efefef;
    margin: 2px;
    padding: 10px;

}
.expose .exposeTitle
{
    color:#333333;
    font-weight: bold;
    font-size: 16px;
}
.expose img
{
    border: 2px solid grey;
    margin-bottom: 3px;
    margin-top: 5px;
}
.exposeLink a
{
    
    color: grey;
}

this ends up giving me a 3 column list of articles with image. great for catalogs, etc...

cheers, doc

Post by **Oliver Georgi** » Thu 7. Sep 2006, 12:05

stop discussing unsupported RTs in normal support section!!!

And how about having a look at content part "article menu"?

Oliver

dr.swank · Post by **dr.swank** » Thu 7. Sep 2006, 12:16

Hi Oliver,

whats with the harsh tone? Is there a law against discussing this? Or what is the issue here? Maybe it was the support section post that pissed you off, if so then I appologize!!

I looked into the Article Menu content part, and had the problem that I only got a link list rendered. Being as I did not want to hack the core files, I looked for a viable alternative and the teaser_ex seemed to do the job for me. I did, btw, try to use a different rendering template without any success.

I hope posting this responce here is not against another unwritten rule.

cheers, doc