PatternSkinElements < TWiki

<!--
<div class="twikiBroadcastMessage"> <strong>NOTE:</strong> Edit and Attach will be disabled today between 05:00 PM and 06:00 PM PDT (00:00 to 01:00 GMT) for a scheduled TWiki maintenance.</div>
-->




---+!! h1 header [[%TOPIC%][with link]]

*Intro text.* Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

%TOC{title="On this page:"}%

---++ h2 header [[%TOPIC%][with link]]
*Intro text.* Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

---++ h2 header [[%TOPIC%][with link]] - no newline
*Intro text.* Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

---+++ h3 header [[%TOPIC%][with link]] and a very long header text a very long header text a very long header text a very long header text a very long header text a very long header text a very long header text

*Intro text.* Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

---++++ h4 header [[%TOPIC%][with link]]

*Intro text.* Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

---+++++ h5 header [[%TOPIC%][with link]]

*Intro text.* Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

---++++++ h6 header [[%TOPIC%][with link]]

*Intro text.* Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

---++ Text sizes

Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal 
<span class="twikiSmallish">Smallish text. Smallish text. Smallish text. Smallish text. Smallish text. Smallish text. Smallish text. Smallish text. Smallish text. </span>
<span class="twikiSmall">Small text. Small text. Small text. Small text. Small text. Small text. Small text. Small text. Small text. </span>

---++ Text colors

<span class="twikiGrayText">Grayed out text.</span>

<span class="twikiAlert">Alert text.</span>

---++ Rule
---

---++ Images
Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
Text with :-) smilies and %ICON{info}% icons.
Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.

---++ Blockquote

<blockquote>
Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
</blockquote>

---++ Table

| *Numbers* | *Texts* |
| 456  | uvw |
| 123  | xyz |
| 789  | rst |

---++ Verbatim

<verbatim>
verbatim text
A lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text lot more of verbatim text 
</verbatim>

---++ Lists

Bullet list:
   * Item A
   * Item B a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text
      * Item B.1
      * Item B.2
   * Item C

Numbered list:
   1 Item 1
   1 Item 2 a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text a very long list text
      1 Item 2.1
      1 Item 2.2
   1 Item 3

---++ Attachment table

<div class="twikiAttachments">
<table summary="Topic attachments" style="border-width:1px;" cellspacing="0" id="twikiAttachmentsTable" cellpadding="0" class="twikiTable" rules="rows" border="1"><caption>Topic attachments</caption><tr class="twikiTableEven"><th bgcolor="#ffffff" align="center" valign="middle" style="text-align:center;vertical-align:middle;" class="twikiFirstCol"> <a rel="nofollow" href="%TOPIC%?sortcol=0;table=1;up=0#sorted_table" style="color:#0066cc" title="Sort by this column">I</a> </th><th bgcolor="#ffffff" align="center" valign="middle" style="text-align:center;vertical-align:middle;"> <a rel="nofollow" href="%TOPIC%?sortcol=1;table=1;up=0#sorted_table" style="color:#0066cc" title="Sort by this column">Attachment</a> </th><th bgcolor="#ffffff" align="center" valign="middle" style="text-align:center;vertical-align:middle;"> <a rel="nofollow" href="%TOPIC%?sortcol=2;table=1;up=0#sorted_table" style="color:#0066cc" title="Sort by this column">Action</a> </th><th bgcolor="#ffffff" align="center" valign="middle" style="text-align:center;vertical-align:middle;"> <a rel="nofollow" href="%TOPIC%?sortcol=3;table=1;up=0#sorted_table" style="color:#0066cc" title="Sort by this column">Size</a> </th><th bgcolor="#ffffff" align="center" valign="middle" style="text-align:center;vertical-align:middle;"> <a rel="nofollow" href="%TOPIC%?sortcol=4;table=1;up=0#sorted_table" style="color:#0066cc" title="Sort by this column">Date</a> </th><th bgcolor="#ffffff" align="center" valign="middle" style="text-align:center;vertical-align:middle;"> <a rel="nofollow" href="%TOPIC%?sortcol=5;table=1;up=0#sorted_table" style="color:#0066cc" title="Sort by this column">Who</a> </th><th bgcolor="#ffffff" align="center" valign="middle" style="text-align:center;vertical-align:middle;"> <a rel="nofollow" href="%TOPIC%?sortcol=6;table=1;up=0#sorted_table" style="color:#0066cc" title="Sort by this column">Comment</a> </th></tr>
<tr class="twikiTableOdd"><td bgcolor="#ffffff" align="center" valign="top" style="text-align:center;vertical-align:top;" class="twikiFirstCol"> <img width="16" alt="txt" align="top" src="%PUBURL%/%SYSTEMWEB%/TWikiDocGraphics/txt.gif" height="16" border="0" /><span class="twikiHidden">txt</span> </td><td bgcolor="#ffffff" align="left" valign="top" style="text-align:left;vertical-align:top;"> <a href="/twiki4/MAIN/bin/viewfile/TWiki/FileAttachment?rev=;filename=Sample.txt">Sample.txt</a> </td><td bgcolor="#ffffff" align="left" valign="top" style="text-align:left;vertical-align:top;"> <a href="/twiki4/MAIN/bin/attach/TWiki/FileAttachment?filename=Sample.txt&amp;revInfo=1" title='change, update, previous revisions, move, delete...'rel='nofollow'>manage</a> </td><td bgcolor="#ffffff" align="right" valign="top" style="text-align:right;vertical-align:top;"> 0.1&nbsp;K </td><td bgcolor="#ffffff" align="left" valign="top" style="text-align:left;vertical-align:top;"> 22 Jul 2000 - 19:37 </td><td bgcolor="#ffffff" align="left" valign="top" style="text-align:left;vertical-align:top;"> <a href="TWikiContributor" class="twikiLink">TWikiContributor</a> </td><td bgcolor="#ffffff" align="left" valign="top" style="text-align:left;vertical-align:top;"> Just a sample </td></tr>
<tr class="twikiTableEven"><td bgcolor="#ffffff" align="center" valign="top" style="text-align:center;vertical-align:top;" class="twikiFirstCol twikiLast"> <img width="16" alt="gif" align="top" src="%PUBURL%/%SYSTEMWEB%/TWikiDocGraphics/gif.gif" height="16" border="0" /><span class="twikiHidden">gif</span> </td><td bgcolor="#ffffff" align="left" valign="top" style="text-align:left;vertical-align:top;" class="twikiLast"> <a href="/twiki4/MAIN/bin/viewfile/TWiki/FileAttachment?rev=;filename=Smile.gif">Smile.gif</a> </td><td bgcolor="#ffffff" align="left" valign="top" style="text-align:left;vertical-align:top;" class="twikiLast"> <a href="/twiki4/MAIN/bin/attach/TWiki/FileAttachment?filename=Smile.gif&amp;revInfo=1" title='change, update, previous revisions, move, delete...'rel='nofollow'>manage</a> </td><td bgcolor="#ffffff" align="right" valign="top" style="text-align:right;vertical-align:top;" class="twikiLast"> 0.1&nbsp;K </td><td bgcolor="#ffffff" align="left" valign="top" style="text-align:left;vertical-align:top;" class="twikiLast"> 22 Jul 2000 - 19:38 </td><td bgcolor="#ffffff" align="left" valign="top" style="text-align:left;vertical-align:top;" class="twikiLast"> <a href="TWikiContributor" class="twikiLink">TWikiContributor</a> </td><td bgcolor="#ffffff" align="left" valign="top" style="text-align:left;vertical-align:top;" class="twikiLast"> Smiley face </td></tr>
</table></div><!--//twikiAttachments-->

---++ TWiki form

<noautolink>
<div class="twikiForm">
<table class='twikiFormTable' border='1'><tr><th class='twikiFormTableHRow twikiFirstCol' colspan='2'>
<a href="/twiki4/MAIN/bin/view/Main/UserForm" class="twikiLink">Main.UserForm</a>
</th></tr><tr valign='top'><td class='twikiFormTableRow twikiFirstCol' align='right'> Title </td><td>  </td></tr><tr valign='top'><td class='twikiFormTableRow twikiFirstCol' align='right'> First Name </td><td> Arthur </td></tr><tr valign='top'><td class='twikiFormTableRow twikiFirstCol' align='right'> Last Name </td><td> Clemens </td></tr><tr valign='top'><td class='twikiFormTableRow twikiFirstCol' align='right'> Organization </td><td>  </td></tr><tr valign='top'><td class='twikiFormTableRow twikiFirstCol' align='right'> URL </td><td>  </td></tr><tr valign='top'><td class='twikiFormTableRow twikiFirstCol' align='right'> Titles </td><td>  </td></tr><tr valign='top'><td class='twikiFormTableRow twikiFirstCol' align='right'> Country </td><td> Netherlands </td></tr><tr valign='top'><td class='twikiFormTableRow twikiFirstCol' align='right'> Location </td><td>  </td></tr><tr valign='top'><td class='twikiFormTableRow twikiFirstCol' align='right'> Telephone </td><td>  </td></tr></table>
</div><!-- /twikiForm -->
</noautolink>

---++ Search results and search form

<noautolink>
<h1><a name="Web_Search"></a> Web Search </h1>
<p />
<span class="patternSearched">Searched: <b>caching</b></span><span id="twikiNumberOfResultsContainer"></span><span id="twikiModifySearchContainer"></span>
<h4 class="patternSearchResultsHeader" style="background-color:#FFD8AA"><span class="twikiLeft"><b>Results from TWiki web</b> retrieved at 00:46 (GMT)</span><span class="twikiRight"></span><br class="twikiClear" /></h4>
<div class="patternSearchResult"><div class="twikiTopRow"><div class="twikiLeft"><a href="/twiki4/MAIN/bin/view/TWiki/HeadlinesPlugin"><b>HeadlinesPlugin</b></a></div><div class="twikiRight twikiSRAuthor"> <a href="/twiki4/MAIN/bin/view/Main/TWikiContributor" class="twikiLink">TWikiContributor</a></div><div class="twikiRight twikiSRRev"><span class="twikiNew">NEW</span> - <a href="/twiki4/MAIN/bin/rdiff/TWiki/HeadlinesPlugin" rel='nofollow'>27 May 2006 - 07:56</a>&nbsp;</div><br class="twikiClear" /></div><!--/twikiTopRow--><div class="twikiBottomRow"><div class="twikiSummary twikiGrayText">Headlines Plugin Description This plugin displays RSS and ATOM feeds from news sites. Use it to build news portals that show headline news. Note: Syndic8.com ...</div><!--/twikiSummary-->
</div><!--/twikiBottomRow--></div><!--/patternSearchResult--><div class="patternSearchResult"><div class="twikiTopRow"><div class="twikiLeft"><a href="/twiki4/MAIN/bin/view/TWiki/TWikiAjaxContrib"><b>TWikiAjaxContrib</b></a></div><div class="twikiRight twikiSRAuthor"> <a href="/twiki4/MAIN/bin/view/Main/TWikiContributor" class="twikiLink">TWikiContributor</a></div><div class="twikiRight twikiSRRev">r2 - <a href="/twiki4/MAIN/bin/rdiff/TWiki/TWikiAjaxContrib" rel='nofollow'>02 Nov 2006 - 22:04</a>&nbsp;</div><br class="twikiClear" /></div><!--/twikiTopRow--><div class="twikiBottomRow"><div class="twikiSummary twikiGrayText">TWikiAjaxContrib TWikiAjaxContrib provides a convenience wrapper class around Yahoo's Connection Manager (AJAX). Goals are: To make it possible for plugins ...</div><!--/twikiSummary-->
</div><!--/twikiBottomRow--></div><!--/patternSearchResult--><div class="patternSearchResult"><div class="twikiTopRow"><div class="twikiLeft"><a href="/twiki4/MAIN/bin/view/TWiki/TWikiAjaxContribExamples"><b>TWikiAjaxContribExamples</b></a></div><div class="twikiRight twikiSRAuthor"> <a href="/twiki4/MAIN/bin/view/Main/TWikiContributor" class="twikiLink">TWikiContributor</a></div><div class="twikiRight twikiSRRev">r2 - <a href="/twiki4/MAIN/bin/rdiff/TWiki/TWikiAjaxContribExamples" rel='nofollow'>02 Nov 2006 - 22:04</a>&nbsp;</div><br class="twikiClear" /></div><!--/twikiTopRow--><div class="twikiBottomRow"><div class="twikiSummary twikiGrayText">!TWikiAjaxContrib Examples Code examples and demos for TWikiAjaxContrib. Default loading indicator Because TWiki files are served along dynamic urls we cannot use ...</div><!--/twikiSummary-->
</div><!--/twikiBottomRow--></div><!--/patternSearchResult--><div class="patternSearchResultCount" id="twikiBottomResultCount">Number of topics: <b>3</b></div><!--/patternSearchResultCount-->
<p />
<a name="twikiSearchForm"></a>
<div class="twikiPageForm">
<form action="/twiki4/MAIN/bin/view/TWiki/WebSearch">
<table id="twikiSearchTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="first">
  <input type="text" class="twikiInputField" name="search" value="caching" size="40" /> 
  <input type="submit" class="twikiSubmit" value='Search' /><span class="twikiSmall">&nbsp;&nbsp;<a href="/twiki4/MAIN/bin/view/TWiki/WebSearchAdvanced" class="twikiLink">Advanced search</a> | <a href="/twiki4/MAIN/bin/view/TWiki/SearchHelp" class="twikiLink">Help</a></span>
<div class="twikiSmall" style="padding:1em 0 0 0;">TIP: to search for all topics that contain <code>"SOAP"</code>, <code>"WSDL"</code>, a literal <code>"web service"</code>, but not <code>"shampoo"</code>, write: <code>soap wsdl "web service" -shampoo</code></div>
</td>
</tr>
<tr>
<th class="last">Search where:</th>
<td class="last">
<input type="radio" class="twikiRadioButton" id="textbody" name="scope" value="text" checked="checked" /><label for="textbody"> Text body</label>&nbsp;&nbsp;&nbsp;<input type="radio" class="twikiRadioButton" id="topictitle" name="scope" value="topic"  /><label for="topictitle"> Topic title</label>&nbsp;&nbsp;&nbsp;<input type="radio" class="twikiRadioButton" id="both" name="scope" value="all"  /><label for="both"> Both body and title</label>
<hr />
<input type="checkbox" class="twikiCheckbox" id="web" name="web"  /><label for="web"> All public webs</label> <span class="twikiSmall">(otherwise search TWiki Web only)</span>
</td>
</tr>
</table>
</form>
</div>
</noautolink>

---++ Upload Form

<div class="twikiFormSteps">
<div class="twikiFormStep">
<h3><a name="Attach_new_file"></a> Attach new file </h3>
<p />
Select a new local file to update attachment <code>Sample.txt</code> <span class="twikiGrayText">(<a href="#" class="twikiLink">UploadingUser</a>)</span><br />Upload up to 10000 KB.
<p />
<input class="twikiInputField" type="file" name="filepath" value="Sample.txt" size="30" /><input type="hidden" name="filename" value="Sample.txt" />
</div><!-- /twikiFormStep-->
<div class="twikiFormStep">
<h3><a name="Comment"></a> Comment </h3>
<p />
Describe the file so other people know what it is.
<p />
<input class="twikiInputField" type="text" name="filecomment" value="Just a sample" maxlength="256" size="50" />
</div><!-- /twikiFormStep-->
<div class="twikiFormStep">
<h3><a name="Properties"></a> Properties </h3>
<p />
<input type="checkbox" class="twikiCheckbox" id="createlink" name="createlink"  /><label for="createlink">Create a link to the attached file</label> <span class="twikiGrayText">Images will be displayed, for other attachments a link will be created.</span>
<p />
<input type="checkbox" class="twikiCheckbox" id="hidefile" name="hidefile"  /><label for="hidefile">Do not show attachment in table</label> <span class="twikiGrayText">Attachments will not be shown in topic view page.</span>
</div><!-- /twikiFormStep--><div class="twikiFormStep twikiLast"><input type="submit" class="twikiButton" name="changeproperties" value='Change comment and properties only' /></div><!-- /twikiFormStep-->
</div><!-- /twikiFormSteps-->
<a name="topic-actions"> </a><div class="patternTopicActions"><div class="patternTopicAction" style="margin-top:-1px;"><span class="patternActionButtons"> <input type="submit" class="twikiSubmit" value='Upload file' /> or <a href="#" title='Back to topic' accesskey='c' rel='nofollow'><span class='twikiAccessKey'>C</span>ancel</a></span></div></div><!--/patternTopicActions-->

---++ Login form

<div class="twikiFormSteps">
<div class="twikiFormStep">
%TMPL:P{"pagetitle"}%%TMPL:P{"pagenote"}%
</div><!-- /twikiFormStep-->
<div class="twikiFormStep">
---+++ %MAKETEXT{"Username"}%

%ICON{"person"}% <input class="twikiInputField" type="text" size="30" name="username" value="%URLPARAM{"username"}%" tabindex="1" />
%TMPL:P{"authenticationnote"}%
</div><!-- /twikiFormStep-->
<div class="twikiFormStep">
---+++ %MAKETEXT{"Password"}%

%ICON{"key"}% <input class="patternFormFieldVerticalForm" type="password" size="30" class="twikiInputField" name="password" value="" tabindex="2" />%TMPL:P{"forgotpasswordnote"}%
</div><!-- /twikiFormStep-->
<div class="twikiFormStep twikiLast">
<input class="twikiSubmit" type="submit" value='%MAKETEXT{"Logon"}%' tabindex="3" />
</div><!-- /twikiFormStep-->
</div><!-- /twikiFormSteps-->
<literal>
%QUERYPARAMS{format="<input type='hidden' name='$name' value='$percntENCODE{$quot()$value$quot type=$quot()html$quot}$percnt' />"}%
</literal>
</form>

---++ Comment form/table

(rendered html)

<table style="border-width:0px;" cellspacing="0" cellpadding="0" class="twikiTable" border="0"><tr class="twikiTableEven"><td bgcolor="#ffffff" align="right" valign="top" style="vertical-align:top;border-width:0px;" class="twikiFirstCol"> <label for="comment_url">Url</label> </td><td bgcolor="#ffffff" valign="top" style="vertical-align:top;border-width:0px;"> <input class="twikiInputField"  type="text" size="40" name="comment_url" id="comment_url" value="http://" /> </td></tr>
<tr class="twikiTableOdd"><td bgcolor="#ffffff" valign="top" style="vertical-align:top;border-width:0px;" class="twikiFirstCol"> <label for="comment_link">Link label</label> </td><td bgcolor="#ffffff" valign="top" style="vertical-align:top;border-width:0px;"> <input class="twikiInputField"  type="text" size="40" name="comment_link" id="comment_link" /> </td></tr>
<tr class="twikiTableEven"><td bgcolor="#ffffff" align="right" valign="top" style="vertical-align:top;border-width:0px;" class="twikiFirstCol"> <label for="bookmark_comment_text">Comment</label> </td><td bgcolor="#ffffff" valign="top" style="vertical-align:top;border-width:0px;"> <input class="twikiInputField"  type="text" size="40" name="bookmark_comment_text" id="bookmark_comment_text" value="" /> </td></tr>
<tr class="twikiTableOdd"><td bgcolor="#ffffff" valign="top" style="vertical-align:top;border-width:0px;" class="twikiFirstCol twikiLast">  </td><td bgcolor="#ffffff" valign="top" style="vertical-align:top;border-width:0px;" class="twikiLast"> <input  type="submit" value="Add bookmark" class="twikiButton" /> </td></tr>
</table>
<input type="hidden" name="comment_action" value="save" /><input type="hidden" name="comment_type" value="bookmark" /><input type="hidden" name="comment_index" value="14" /><div></div>

---++ Comment

%COMMENT{}%

---++ Links

[[WebHome]], DoesNotExist

---++ Form elements

<input type=submit" class="twikiButton" value="twikiButton" />

<input type=submit" class="twikiSubmit" value="twikiSubmit" />

<input size="30" class="twikiInputField" />

<textarea class="twikiInputField" size="30" rows="4"></textarea>

---++ Help text

<div class="twikiHelp"><ul>
<li> <strong>Help:</strong> Please see <a class="twikiPopUp" target='FileAttachment' href="%SCRIPTURL{view}%/%SYSTEMWEB%/FileAttachment" rel='nofollow'>FileAttachment</a> for more information about attaching files.
</li> <li> <strong>Bug:</strong> Internet Explorer 4.0 or earlier: If you get an "Internal Server Error" message when you upload a file, you need to try again. It should work the second time.
</li></ul> 
</div>
This topic: TWiki > PatternSkin > PatternSkinElements
Topic revision: r4 - 05 Jun 2011 - TWikiContributor
Copyright © 1999-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.PatternSkinElements.