2SexyContent Learn [Token]
DotNetNuke tools to create, design and animate great content

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value
Title System.String Paris
Content System.String The capital city of france.
Link System.String http://en.wikipedia.org/wiki/Paris


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<ul>
<repeat>
	<div class="sc-element">
		[Content:Toolbar]
		<li><span>[Content:Title]</span></li>
	</div>
</repeat>
</ul>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value
Title System.String Jakarta
Content System.String Capital city of Indonesia.
Link System.String http://en.wikipedia.org/wiki/Jakarta


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<ul>
<repeat>
	<div class="sc-element">
		[Content:Toolbar]
		<li>
			<a href="#FancyDetail-[Content:EntityId]" class="fancybox">[Content:Title]</a>
		</li>
	</div>
	<div id="FancyDetail-[Content:EntityId]" style="max-width:1024px; min-width:620px; display:none">
		[Content:Content]
		<span><a href="[Content:Link]">more...</a></span>
	</div>
</repeat>
</ul>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value
Title System.String Paris
Content System.String The capital city of france.
Link System.String http://en.wikipedia.org/wiki/Paris


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<div>
<h2>[ListContent:Title]</h2>
[ListContent:Content][ListContent:Toolbar]
<table>
	<tr>
		<th>City</th>
		<th>[ListContent:LightboxTitle]</th>
		<th>[ListContent:LinkTitle]</th>
	</tr>
<repeat>
	<tr>
		<td><strong>[Content:Title]</strong></td>
		<td>
			<a href="#FancyDetail-[Content:EntityId]" class="fancybox">[ListContent:LightboxButton]</a>
			<div id="FancyDetail-[Content:EntityId]" style="max-width:1024px; min-width:620px; display:none">
				[Content:Content]
				<span><a href="[Content:Link]">more...</a></span>
			</div>
		</td>
		<td><a href="[Content:Link]" target="_blank">[ListContent:LinkButton]</a></td>
		<td>[Content:Toolbar]</td>
	</tr>
</repeat>
</table>
<style scoped="scoped">
	td, th { padding: 5px 5px 5px 5px; }
	.alt1 { background: #eeeeee; }
</style>
</div>

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value
Title System.String Paris
Content System.String The capital city of france.
Link System.String http://en.wikipedia.org/wiki/Paris


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<div>
<h2>[ListContent:Title]</h2>
[ListContent:Content][ListContent:Toolbar]
<table>
	<tr>
		<th>#</th>
		<th>City</th>
		<th>[ListContent:LightboxTitle]</th>
		<th>[ListContent:LinkTitle]</th>
	</tr>
<repeat>
	<tr class="alt[List:Alternator2] [List:IsFirst] [List:IsLast]">
		<td>[List:Index1]</td>
		<td><strong>[Content:Title]</strong></td>
		<td>
			<a href="#FancyDetail-[Content:EntityId]" class="fancybox">[ListContent:LightboxButton]</a>
			<div id="FancyDetail-[Content:EntityId]" style="max-width:1024px; min-width:620px; display:none">
				[Content:Content]
				<span><a href="[Content:Link]">more...</a></span>
			</div>
		</td>
		<td><a href="[Content:Link]" target="_blank">[ListContent:LinkButton]</a></td>
		<td>[Content:Toolbar]</td>
	</tr>
</repeat>
</table>
<style scoped="scoped">
	td, th { padding: 5px 5px 5px 5px; }
	.alt1 { background: #eeeeee; }
</style>
</div>
You are here: Home  >  Learn Token-Lists

Creating Lists with [Tokens]

To understand lists, please watch the videos here and look at the implementations below...

Very simple UL (Unordered List)

For the most basic lesson, we'll just create a trivial list.
  • Paris
  • Token Templates
  • Berlin
  • Token Templates

A interactive list with a lightbox - working with unique IDs

Whenever you add interactive things like sliding areas, lightboxes or similar things, you need to learn the EntityId attribute. [Content:EntityId].

Working with [ListContent] - header info

Often you need to add something as a header/footer content or as an Info that stays the same across the entire list. This demo shows

  1. Using the ListContent for introduction
  2. Using it to dynamically change some "static" texts like column-headers or even buttons inside the table

Cities we love

this is great.
City Details Link
Paris Popup external site
Berlin Popup external site
Paris Popup external site
Paris Popup external site

Output-Numbering, alternate and special styles

This demo adds

  1. Adding a number beside every row
  2. Alternating colors
  3. Detecting first/last item for special CSS-Styling.

Cities we love to count and alternate

These cities we still love, but now we number and alternate them.
# City More Details Look away
1 Paris info go2Wiki
2 Jakarta info go2Wiki
3 Berlin info go2Wiki
4 Ouagadougou info go2Wiki
2serve . 2invent . 2create is 2be.