Creating a linked list of articles

cris10shercc · 2009-05-14 19:44:34

I am new to Textpattern. I am creating a page that has several different categories. On each category page I want to have a list of projects that you can click on which will take you to another page so you can view the details of the project. I want the list to look like:

Project 1 | Project 2 | Project 3 | etc.

So my questions are, how do I create this type of a list and how do I form these links to the articles I’ve already set up?

els · 2009-05-19 21:01:33

What are projects in your site structure? Categories?

cris10shercc · 2009-05-20 18:17:15

Okay, I did a little more research and have a new question now. I want to use the first list shown on the following website: http://www.murraytestsite.com/collapsiblelist.htm. To create the first list shown, where in Textpattern (Presentation- Styles or Pages? Or other?) do I put:

<style type="text/css">
.list a{
	text-decoration:none;
	color:green;
}
.list a:hover, #list a:focus {
	text-decoration:overline;
	border-bottom:1px solid purple;
	color:purple;
}
#suba1, #suba2, #suba3,#subb1, #subb2, #subb3  {
	display: none;
}
</style>

And where do I put (Content- Article?):

<div class="list">
<ul>
  <li>
	<a href="#" onclick="FP_changeProp(/*id*/'suba1',1,'style.display','block');FP_changeProp(/*id*/'suba2',1,'style.display','none');FP_changeProp(/*id*/'suba3',1,'style.display','none')">List Item 1</a>
    <ul id="suba1">
      <li>Suba1-1</li>
      <li>Suba1-2</li>
    </ul>
  </li>
  <li><a href="#" onclick="FP_changeProp(/*id*/'suba1',1,'style.display','none');FP_changeProp(/*id*/'suba2',1,'style.display','block');FP_changeProp(/*id*/'suba3',1,'style.display','none')">List Item 2</a>
    <ul id="suba2">
      <li>Suba2-1</li>
      <li>Suba2-2</li>
      <li>Suba2-3</li>
    </ul>
  </li>
  <li><a href="#" onclick="FP_changeProp(/*id*/'suba1',1,'style.display','none');FP_changeProp(/*id*/'suba2',1,'style.display','none');FP_changeProp(/*id*/'suba3',1,'style.display','block')">List Item 3</a>
    <ul id="suba3">
      <li>Suba3-1</li>
      <li>Suba3-2</li>
    </ul>
  </li>
</ul>
</div>

I’ve gotten the list to show up on my website but when I click on “List Item 1” it doesn’t drop down like it does in the example website. Thanks for your help!

(edited for better code display. -Els)

Last edited by els (2009-05-20 20:05:10)

els · 2009-05-20 20:08:22

Put the first part (without the opening and closing <style> tags) in the CSS, in Presentation > Styles.

The second part can go on your page, but to make it dynamic you’ll need to modify it and add the necessary Txp tags.

jsoo · 2009-05-20 20:26:34

The example page from the link you posted is a bit deceptive. The collapsing/expanding lists are based on JavaScript. The page says so, but then shows the CSS and HTML but not the script.

As to where to put things:

The <style> element belongs somewhere in the head, either as is or as a linked file. In a default Txp install, note the <txp:css /> tag near the top of the “default” page in Presentation -> Pages. This creates a <link> element to load the stylesheet in Presentaion -> Style.

The list markup: in a CMS such as Txp ordinarily you would not want to do such things manually. You could, in which case it could go in Presentation -> Pages or in a Form called from the Page. But the joy of a CMS is automating the presentation and organization of content elements. This joy comes at the price of a certain amount of pain, aka the learning curve. It looks as though you may want to focus on understanding more about HTML, CSS, and (optionally) JavaScript before taking apart CMS templates. It’s all doable, but trying to learn both at the same time is a tall order.

cris10shercc · 2009-05-21 16:47:06

Els-

What do you mean by, “to make it dynamic you’ll need to modify it and add the necessary Txp tags”? By modifying it you probably mean put my own information into the list, but what do you mean by adding the Txp tags?

Also, in the tag:

what is “#” referring to? Is that where it references the sub-list?

Thanks again for your help!

Last edited by cris10shercc (2009-05-21 16:48:09)

jsoo · 2009-05-21 17:18:12

cris10shercc wrote:

what is “#” referring to? Is that where it references the sub-list?

It’s essentially a dummy value for href — it’s a link that goes nowhere. The only point of the <a> elements in the example you show is to trigger JavaScript (and as a visual cue) — rather an abuse of HTML semantics, some would say.

els · 2009-05-21 17:44:01

I suggest you try to create the menu first (without script) so that it contains the right items in the right places. Once you’ve got that working, it will be relatively easy to add visual effects.

cris10shercc · 2009-05-22 16:10:08

Okay, I have my menu in order and on my website. Now, how do I get the sub-titles to show up when each title is clicked on?

Thanks for your help!

els · 2009-05-22 16:59:09

Can you post the code you use for your menu?

cris10shercc · 2009-05-22 17:08:36

Is this what you mean? Remember I’m new at all of this. :)

<div class="list">
<ul class="sectionlist">
  <li>
	<a href="#" onclick="FP_changeProp(/*id*/'architecture',1,'style.display','block');
FP_changeProp(/*id*/'water-resources',1,'style.display','none');
FP_changeProp(/*id*/'land-development',1,'style.display','none')">Architecture</a>
    <ul id="architecture">
    <txp:article_custom section="architecture" form="sectionlist"/>
    </ul>
  </li>
  <li><a href="#" onclick="FP_changeProp(/*id*/'architecture',1,'style.display','none');
FP_changeProp(/*id*/'water-resources',1,'style.display','block');
FP_changeProp(/*id*/'land-development',1,'style.display','none')">Water Resources</a>
    <ul id="water-resources">
      <li><txp:article_custom section="water-resources" form="sectionlist"/></li>
            </ul>
  </li>
  <li><a href="#" onclick="FP_changeProp(/*id*/'architecture',1,'style.display','none');
FP_changeProp(/*id*/'water-resources',1,'style.display','none');
FP_changeProp(/*id*/'land-development',1,'style.display','block')">Land Development</a>
    <ul id="land-development">
        <li><txp:article_custom section="land-development" form="sectionlist"/></li>
    </ul>
  </li>
</ul>
</div>

(added bc. -Els)

Last edited by els (2009-05-23 13:51:26)

els · 2009-05-23 14:04:07

Now you need to place the javascript and css code on your page. Copy it from the example page source, you need everything from <script language="JavaScript"> to </style>. Paste it just above the </head> tag.
As far as I can see you only need to change suba1, suba2 and suba3 to your section names. And of course you can change fonts, colours etcetera in the css code.

Edit: I think you forgot the <li> tags around your first article_custom tag.

Last edited by els (2009-05-23 14:05:46)

Textpattern CMS

Textpattern CMS support forum

#1 2009-05-14 19:44:34

Creating a linked list of articles

#2 2009-05-19 21:01:33

Re: Creating a linked list of articles

#3 2009-05-20 18:17:15

Re: Creating a linked list of articles

#4 2009-05-20 20:08:22

Re: Creating a linked list of articles

#5 2009-05-20 20:26:34

Re: Creating a linked list of articles

#6 2009-05-21 16:47:06

Re: Creating a linked list of articles

#7 2009-05-21 17:18:12

Re: Creating a linked list of articles

#8 2009-05-21 17:44:01

Re: Creating a linked list of articles

#9 2009-05-22 16:10:08

Re: Creating a linked list of articles

#10 2009-05-22 16:59:09

Re: Creating a linked list of articles

#11 2009-05-22 17:08:36

Re: Creating a linked list of articles

#12 2009-05-23 14:04:07

Re: Creating a linked list of articles

Board footer