Welcome to Squishdot Websites Squishdot How-To Newbies
 about
 search
 post article
 Documentation
 Mailing Lists
 Bug Tracking
 Development
 Installation
 Upgrading
 Download
 admin
 rdf

 main


Displaying Current Topic Categories
How-To Posted by Pennywise on Saturday June 28, 07:11AM, 2003
from the slashdot-wannabe dept.
One of the cooler features of Slashdot, especially for newbies to the site, is their Current Topic Categories page (http://slashdot.org/topics.shtml). I've managed to duplicate that page using plain ole DTML and some style sheets. Read on to see how.

I'm not much of a web person (give me an RTOS any day), but I managed to hack up a page that looks similar to Slashdot's Current Topics Page. (http://slashdot.org/topics.shtml)

The only flaw, as far as I can tell, is that the spacing of the icons is different, but since this is my first style sheet I'm hoping someone else can tackle that problem.

Most of the code below is simply a copy of the main page, the important parts are the style sheet:
<style type="text/css">
div.float { float: left;
width: 100;
height: 100;
text-align: center; }
div.float p { text-align: center; }
</style>


and the part that actually displays the topics:
<dtml-in subjects_list>
<div class="float">
<a href="http://cognews.ato.ms/search?subject=<dtml-var sequence-item>&op=articles">
<IMG SRC=<dtml-var site_url >/<dtml-var "subject_image(_['sequence-item'])"> border=0 alt="<dtml-var sequence-item>">
<br><dtml-var sequence-item>
</a>
</div>
</dtml-in subjects_list>


To see this in action, check out my Squishdot page: CogNews (News for the Cognitive Sciences) http://cognews.ato.ms/topics

============== begin topics page ==============

<dtml-var site_header>

<style type="text/css">
div.float { float: left;
width: 100;
height: 100;
text-align: center; }
div.float p { text-align: center; }
</style>

<!-- main table begin-->
<TABLE width="99%" align=center cellpadding=5 cellspacing=0 border=0 bgcolor="<dtml-var color2>">
<TR><!-- 1st row of main table -->

<TD width=71 valign=top rowspan=5><!-- 1st column of 1st row of main table-->
<FONT size=2><B>
<dtml-if leftbox_items>
<dtml-in leftbox_items>
&nbsp;<A href="<dtml-if relurl><dtml-var site_url ></dtml-if><dtml-var urlname>"><dtml-var name></A><BR>
</dtml-in>
<dtml-else>
&nbsp;<A href="<dtml-var site_url >/../index_html">up a level</A><BR>
&nbsp;<A href="<dtml-var site_url >/addPostingForm">post article</A><BR>
&nbsp;<A href="<dtml-var site_url >/searchForm">search</A><BR>
&nbsp;<A href="<dtml-var site_url >/manage">admin</A><BR>
</dtml-if>
</B></FONT>
<P><BR>
</TD>
<TD valign=top align=left><!-- 2nd column of 1st row of main table--><FONT
color="<dtml-var color1>"><!-- begin contents --><TABLE width="99%" cellpadding=0 cellspacing=0 border=0>
<TR><!-- colored header with title -->
<TD valign=top bgcolor="<dtml-var color3>"><dtml-if round_edge><IMG src="Images/roundedge_img"
width=13 height=16 alt="" align=top><dtml-else>&nbsp;&nbsp;</dtml-if><FONT size=4
color="<dtml-var color2>" face="arial,helvetica"><B><A NAME="<dtml-var id>">Current Topic Categories</A></B></FONT></TD>
<dtml-if drop_shadow><!-- drop_shadow at right -->
<TD valign=bottom width=4><IMG align=bottom src="Images/rtshadow_img" width=4 height=18 alt=""></TD>
</TR>
<TR><!-- drop_shadow at bottom -->
<TD background="Images/botshadow_img"><IMG src="Images/botshadow_img" width="1" height=4 alt=""></TD>
<TD width=4><IMG src="Images/rtbotshadow_img" width=4 alt="" height=4></TD>
</dtml-if>
</TR>


</TABLE></FONT>
<!--end contents-->
<dtml-in subjects_list>
<div class="float">
<a href="http://cognews.ato.ms/search?subject=<dtml-var sequence-item>&op=articles">
<IMG SRC=<dtml-var site_url >/<dtml-var "subject_image(_['sequence-item'])"> border=0 alt="<dtml-var sequence-item>">
<br><dtml-var sequence-item>
</a>
</div>
</dtml-in subjects_list>
</TD>
<TD width=210 align=center valign=top><!-- 3rd column on 1st row of main table -->
<dtml-if rightbox_items>
<dtml-in rightbox_items>
<TABLE cellpadding=0 cellspacing=0 border=0 width="200" align=center>
<TR bgcolor="<dtml-var color3>"><!-- colored title for box -->
<TD valign=top bgcolor="<dtml-var color3>"><dtml-if round_edge><IMG src="Images/roundedge_img"
width=13 height=16 alt="" align=top><dtml-else>&nbsp;&nbsp;</dtml-if><FONT size=4
color="<dtml-var color2>" face="arial,helvetica"><B><dtml-if box_url><A
href="<dtml-if relurl><dtml-var site_url ></dtml-if><dtml-var box_url >"><FONT
color="<dtml-var color2>"></dtml-if><dtml-var box_title><dtml-if box_url></FONT></A></dtml-if></B></FONT></TD>
<dtml-if drop_shadow><!-- drop shadow for box title --><TD bgcolor="<dtml-var color2>" background="Images/rtshadow_img"><IMG src="Images/rtshadow_img" width=5 height=10 alt=""></TD>
</dtml-if drop_shadow>
</TR>
<TR> <!-- contents for box -->
<TD bgcolor="<dtml-var color4>" align=center><TABLE width=188 border=0 cellpadding=2 cellspacing=0>
<TR>
<dtml-with rightbox_methods>
<TD><FONT color="<dtml-var color1>" size=2><dtml-var "_[box_contents]"></FONT></TD>
</dtml-with>
</TR>
</TABLE></TD>
<dtml-if drop_shadow><!-- drop shadow at right for box contents -->
<TD background="Images/rtshadow_img" width=4><IMG src="Images/rtshadow_img" width=5 height=4></TD>
</TR>
<TR><!-- drop shadow at bottom for box contents -->
<TD><IMG src="Images/botshadow_img" width=196 height=4 alt=""></TD>
<TD><IMG src="Images/rtbotshadow_img" alt="" width=4 height=4></TD>
</dtml-if drop_shadow>
</TR>
</TABLE>
<P>
</dtml-in rightbox_items>
<dtml-else>
<dtml-with rightbox_methods>
<dtml-in "objectValues(['DTML Method'])">


<TABLE cellpadding=0 cellspacing=0 border=0 width="200" align=center>
<TR bgcolor="<dtml-var color3>"><!-- colored title for box -->
<dtml-if "_['id'] == 'features'">
<TD valign=top bgcolor="<dtml-var color3>"><dtml-if round_edge><IMG src="Images/roundedge_img"
width=13 height=16 alt="" align=top><dtml-else>&nbsp;&nbsp;</dtml-if><FONT size=4
color="<dtml-var color2>" face="arial,helvetica"><B><A
href="./search?title=Feature&op=articles"><FONT
color="<dtml-var color2>"><dtml-var title></FONT></A></B></FONT></TD>
<dtml-elif "_['id'] == 'reviews'">
<TD valign=top bgcolor="<dtml-var color3>"><dtml-if round_edge><IMG src="Images/roundedge_img"
width=13 height=16 alt="" align=top><dtml-else>&nbsp;&nbsp;</dtml-if><FONT size=4
color="<dtml-var color2>" face="arial,helvetica"><B><A
href="./search?title=Review&op=articles"><FONT
color="<dtml-var color2>"><dtml-var title></FONT></A></B></FONT></TD>
<dtml-elif "_['id'] == 'request_comments'">
<TD valign=top bgcolor="<dtml-var color3>"><dtml-if round_edge><IMG src="Images/roundedge_img"
width=13 height=16 alt="" align=top><dtml-else>&nbsp;&nbsp;</dtml-if><FONT size=4
color="<dtml-var color2>" face="arial,helvetica"><B><A
href="./search?title=RFC&op=articles"><FONT
color="<dtml-var color2>"><dtml-var title></FONT></A></B></FONT></TD>
<dtml-else>
<TD valign=top bgcolor="<dtml-var color3>"><dtml-if round_edge><IMG src="Images/roundedge_img"
width=13 height=16 alt="" align=top><dtml-else>&nbsp;&nbsp;</dtml-if><FONT size=4
color="<dtml-var color2>" face="arial,helvetica"><B><FONT
color="<dtml-var color2>"><dtml-var title></FONT></B></FONT></TD>
</dtml-if>
<dtml-if drop_shadow><!-- drop shadow for box title --><TD bgcolor="<dtml-var color2>" background="Images/rtshadow_img"><IMG
src="Images/rtshadow_img" width=5 height=10 alt=""></TD>
</dtml-if drop_shadow>
</TR>
<TR> <!-- contents for box -->
<TD bgcolor="<dtml-var color4>" align=center><TABLE width=188 border=0 cellpadding=2 cellspacing=0>
<TR>
<TD><FONT color="<dtml-var color1>" size=2><dtml-var sequence-item></FONT></TD>
</TR>
</TABLE></TD>
<dtml-if drop_shadow><!-- drop shadow at right for box contents -->
<TD background="Images/rtshadow_img" width=4><IMG src="Images/rtshadow_img" width=5 height=4></TD>
</TR>
<TR><!-- drop shadow at bottom for box contents -->
<TD><IMG src="Images/botshadow_img" width=196 height=4 alt=""></TD>
<TD><IMG src="Images/rtbotshadow_img" alt="" width=4 height=4></TD>
</dtml-if drop_shadow>
</TR>
</TABLE>
<P>
</dtml-in>
</dtml-with>
</dtml-if>
</TD>
</TR>
</TABLE>
<dtml-var site_footer>

================ end topics page ===============

<  |  >

 

Related Links
  • Articles on How-To
  • Also by Pennywise
  • Contact author
  • The Fine Print: The following comments are owned by whoever posted them.
    ( Reply )

    Powered by Zope  Squishdot Powered
      "Any system that depends on reliability is unreliable." -- Nogg's Postulate
    All trademarks and copyrights on this page are owned by their respective companies. Comments are owned by the Poster. The Rest ©1999 Butch Landingin, ©2000-2002 Chris Withers.