Qwwwik tips


Drop cap

FOR SOME STRANGE REASON, ipsum dolor sit amet, consectetur adipiscing 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.

<span class="dc">F</span>OR SOME STRANGE REASON ...

Top and bottom 'more pages' link bars

Example top bar:

Link 1 | Link 2

<p class="more-pages-top"><a href="./link1">Link 2</a> <span>|</span> <a href="./link2">Link 2</a></p>

Example bottom bar:

Link 1 | Link 2

<p class="more-pages-bottom"><a href="./link1">Link 2</a> <span>|</span> <a href="./link2">Link 2</a></p>

Screen width 'crossbands'

Add class "crossband-lightgrey" / "crossband-midgrey" / "crossband-darkgrey" / "crossband-black" when the element (such as an image) is 720 pixels wide (full column width). Note: visible on wider screens only (720 pixels and above), only for full column-width content. Content is usually full column-width on mobiles anyway.

<div class="fw1"><img src="img/example-image.jpg" width="720" class="crossband-lightgrey" alt=""></div>
<div class="fw1"><img src="img/example-image.jpg" width="720" class="crossband-midgrey" alt=""></div>
<div class="fw1"><img src="img/example-image.jpg" width="720" class="crossband-darkgrey" alt=""></div>
<div class="fw1"><img src="img/example-image.jpg" width="720" class="crossband-black" alt=""></div>
Cream tinted background
<div class="fw2">

Content ...

</div>
Horizontal lines

<hr>

<hr class="section">
Image with rounded corners

Add class="rc"

<img src="img/example-image.jpg" class="rc" alt="">
Coloured text
<span>Green text</span>
<span class="grey">Grey text</span>
<span class="red">Red text</span>
<span class="orange">Orange text</span>
<span class="blue">Blue text</span>
Light outer page background

See '/admin/setup' Light background (YES/NO). Default is "NO" – switch to "YES" as desired.

See information

Page last modified: 14 May, 2024
Search | Legal | Qwwwik

Info