Quick Overview of Blocks and CSS in the wiki

Making <div>s Happen Using the [block] Construct

You can segment off any section of content into a <div> container block as shown in the following example.



Maecenas in leo vel orci vehicula pharetra. Nullam 
consequat lorem eu risus. Nulla hendrerit neque non 
eros. Aenean malesuada pretium arcu. 

[block:someID | classlist]

Suspendisse pede. Curabitur eu sapien sit amet 
nunc pretium euismod. Nulla rutrum. Nullam suscipit. 
Etiam id est. Donec tempus. 

In vehicula, leo vel interdum scelerisque, 
justo dui commodo nulla, nec interdum lectus 
nibh sit amet ante. Aliquam non mi. Donec quam. 

[/block]

In hendrerit nonummy lorem. Sed commodo.
 


<p>Maecenas in leo vel orci vehicula pharetra. Nullam 
consequat lorem eu risus. Nulla hendrerit neque non 
eros. Aenean malesuada pretium arcu. </p>

<div id="someID" class="classlist">

<p>Suspendisse pede. Curabitur eu sapien sit amet 
nunc pretium euismod. Nulla rutrum. Nullam suscipit. 
Etiam id est. Donec tempus. </p>

<p>In vehicula, leo vel interdum scelerisque, 
justo dui commodo nulla, nec interdum lectus 
nibh sit amet ante. Aliquam non mi. Donec quam. </p>

</div>

<p>In hendrerit nonummy lorem. Sed commodo.</p>

Notes on [block]

  1. Any of the arguments of [block] can be left out.

    • [block|someclass] translates to
      <div class="someclass">

    • [block:someID] translates to
      <div id="someID">

  2. You can provide a list of classes.

    • [block | class1 class2] translates to
      <div class="class1 class2">

  3. Though it is generally better to use id and class to accomplish CSS goals, it is also possible to use inline CSS as a third argument in the [block] construct.

    • [block:myID | | color:green; width:50%] gives <div id="myID" style="color:green; width:50%">

  4. It is permissible (as seen in the examples above) to use spaces around the | pipe characters that separate arguments.

  5. You can use the ~ character as a placeholder, e.g., [block|~|color:green].

Using [css] at the Beginning of an Item

You can add class, id, and inline style to any atomic block (e.g., a paragraph, a list item, a table cell, etc.) with the use of the [css:id|class|inline style] notation.


=[css:kahuna]Example

[css:p1]Maecenas in leo vel orci vehicula pharetra. Nullam 
consequat lorem eu risus. Nulla hendrerit neque non eros. 

*aenean
*[css|foo]malesuada
*pretium
*[css||color:blue]arcu

He said:

""[css|famous]Cras lectus arcu, lobortis vitae, 
fringilla eu, mattis vel, tortor. Vestibulum 
viverra erat in est. Mauris sit amet ante nec 
justo ullamcorper venenatis. 



<h1 id="kahuna">Example</h1>

<p id="p1">Maecenas in leo vel orci vehicula pharetra. Nullam 
consequat lorem eu risus. Nulla hendrerit neque non eros. </p>

<ul>
<li>aenean</li>
<li class="foo">malesuada</li>
<li>pretium</li>
<li style="color:blue">arcu</li> 
</ul>

<p>He said:</p>

<blockquote class="famous">Cras lectus arcu, lobortis vitae, 
fringilla eu, mattis vel, tortor. Vestibulum 
viverra erat in est. Mauris sit amet ante nec 
justo ullamcorper venenatis. </blockquote>

More CSS usage

Other kinds of wiki blocking mechanisms utilize a similar syntax.

For instance, long form tables and long form lists (see the basic overview docs) both allow the specification of id, class, and inline style.

Generically, they look like:

  • [list:id | class | inline-style]
  • [table:id | class | inline-style]

Even atomic elements like images, file attachments, and page links allow for the specification of id/class/style.

  • [link/to/page | text to be shown | tooltip | id | class | style]
  • [attach:somefile.doc | text to be shown | tooltip | id | class | style]
  • [show:someimage.jpg | alt text | url | id | class | style]

In practice, most of these are left out. Usually, for instance, a link will simply be entered as [someurl | some text I'd like to click].