Page options
Standard features in Qwwwik
See also 'get HTML markup' (admin/pages) and extra CSS style tips »
Column width images:
<div class="fw1"><img src="img/example-image.jpg"></div>
Standard column images:
Caption (image with shadow)
<img src="img/filename.jpg" width="640" class="shadow1" height="auto">
<p class="caption">Image caption</p>
Expandable 'modal' images:
Click picture to enlarge
Sofia
Click to enlarge. More here »
See also video »
<h6>H6 heading</h6>
Bold text
Emphasised text (usually italic)
Coloured text
<blockquote>
Blockquote is for "quoting" someone. Like: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is the accepted use of HTML blockquote.
<ul>
- Item
- Item
- Item
<ol>
- Item
- Item
- Item
<div class="fw2">
Coloured background section. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="bg">
Grey box. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="bgdark">
Grey box. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="bgred">
Colour box. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="bgpurple">
Colour box. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="bggreen">
Colour box. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="bgwhite">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
Example markup (grey box):
<div class="bg"> <h6>Heading</h6> Grey box. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
Toggle 'see more' / 'see less'
Start a paragraph – something like about how the actress said all manner of things to the bishop
The markup:
Start a paragraph and <input type="button" value="see more" id="bt" onclick="toggle(this)"> <div style="display:none;" id="hidden"> ... ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
The "hidden" <div> can contain anything, including images, but remember to close it with </div>
<div class="max">
This is <div class="max"> which extends to the edge of the screen regardless of its width. The default paragraph style has no margin or padding and is white by default. The <div> has no background by default. It can be used for anything but is intended for full-width images or images to be shown wider than the default column width of 640 pixels (or 720 pixels if <div class="fw1"> is used). <div class="max"> has a dark background here only for illustration.
To give the div a background colour: <div class="max" style="background-color: #555;">
</div>
See information