Expandable content boxes V2

[kobos]

Hi

This is a dead easy hack on how to implement expandable content boxes in phpwcms using article listing templates.

http://okobo.com/cms/index.php

http://www.okobo.com/ecb-v2.zip

INSTRUCTIONS
1) Upload *.tmpl files into "//phpwcms_template/inc_cntpart/articlesummary/list/"
2) Upload images folder into root of PHPWCMS installation
4) Upload the article-display.css file to "//phpwcms_template/inc_css/"
3) Select the relevent list template in your chosen article.

Done

if you create your own do the following:

3 x Images top middle and bottom

For top and bottom make sure you leave at least 10px top n bottom so the boxes dont look too bunched up.
The middle image should be 1px or more depending on if you use a pattern for the backround.

Troubleshooting:

- If you use your own images with different dimensions to mine make sure you change that in the *.tmpl files
- When you change those dimensions upload new images :p (i forgot
countless times)

Code: Select all

<LINK REL=StyleSheet HREF="phpwcms_template/inc_css/article-display.css">
<div>
<table width="531" border="0" cellspacing="0" cellpadding="0">

 <tr align="left">

   <td width="531" height="61" valign="top" background="images/content-box_01.png" >
     [TITLE]<p class="Title">{TITLE}</p>[/TITLE]
   </td>
 </tr>

 <tr valign="top">

   <td align="left" background="images/content-box_03.png" width="531px"><div align="left" style="margin: 0px 0px 0px 20px;">
<table width="511">
  <tr>
    <td colspan="2" align="left" valign="top">[SUB]<p class="Sub">{SUB}</p>[/SUB]</td>
  </tr>
  <tr>

    <td align="center" valign="top">[IMAGE]<div align="center"><a href="{ARTICLELINK}">{IMAGE}</a></div>[/IMAGE]</td>
    <td width="401" rowspan="2" valign="top"><div style="max-width: 390px"><p class="Summary"  STYLE="word-wrap:break-word;width:390px;">{SUMMARY}</p></div></td>
  </tr>
  <tr>
    <td colspan="2" align="left" valign="top">[CAPTION]<div align="left"><p class="Caption">{CAPTION}</p></div>[/CAPTION]</td>
  </tr>
</table>
     </div></td>
 </tr>

 <tr>

   <td background="images/content-box_05.png" width="531" height="44"><div style="margin: 0px 0px 10px 20px">[MORE]<a href="{ARTICLELINK}">{MORE}</a>[/MORE]<div><p class="Date"><strong>{DATE:Y-m-d:EN}</strong></p></div></div></td>

 </tr>
</table>
</div>

[Fulvio Romanin]

nice idea, but don't you have a rolling demo? i can't see it on that site...

[Kosse]

Nice one kobos.
Did the same with css but didn't push the thing as far by integrating it as a CP. (maybe I will now following you example
Cool.
Cheers

[kobos]

http://stds.okobo.com

thats my rolling demo
As you can see its fairly in the rough especially when you click 'more' to see the article.
I can't seem to find the option to automaticaly give a margin to the main content text. it's not an option in the artical display template 'sample.tmpl'

how could i build it in? would i have to replace some tags?

[kobos]

V2 is now out

updates...

Title is displayed on the top image
Date and More link is no dislpayed in the bottom image
All fonts have been changed

Unfortunately due to the errors in how div tags are displayed in IE i had to work with tables

the reason for the two .tmpl files is because ie assumes that if one content box has an image all the others do too, so it leaves a space.

[culda_a]

Ok can somebody tell me how to use this RT?

Thanks

[pico]

same

READING !!! first Posting

please don't waste our time with always the same Questions

[culda_a]

same

READING !!! first Posting

please don't waste our time with always the same Questions

ok sorry I give up I try to copy the code in a html content part and inded I got the box but I have receive a lot things out of place. I have find another solution for want I want with {SHOW_CONTENT:xx}
was much easy for stupid me

[DeXXus]

I try to copy the code in a html content part and inded I got the box but I have receive a lot things out of place.

Yes, BUT where in the instructions (above) did it say "copy the code in a html part?
pico was just a wee bit edgy because he works so hard and has been very ~VERY~ busy. ( Like a chicken with his head cut off! )

The code was not meant to be pasted into a content part. They are templates to be chosen in dropdown for articles. When you want an article to have content parts that will appear in expandable boxes (and have a little graphic background) like on his site linked above.

kobos only pasted that "sample" into this thread to show what the code looked like. The files inside the download are the same code
(well, one for with image and one for without) but already created for you, named correctly, with images and ready for use.
Some hacks here are cut&paste and others are ready in the archive. Don't worry! It will all start making sense as you go along.

[culda_a]

DeXXus, Yes I you are right I was looking in the wrong part.. I was looking in the category template when I was creating a new category
NOW I FELL REALLY SILY