Qwwwik tips
Drop cap 1
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.
<em class="dc">F</em>OR SOME STRANGE REASON ...
Drop cap 2
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:
<p class="more-pages-top"><a href="./link1">Link 1</a> <span>|</span> <a href="./link2">Link 2</a></p>
Example bottom bar:
<p class="more-pages-bottom"><a href="./link1">Link 1</a> <span>|</span> <a href="./link2">Link 2</a></p>
Deleted and highlighted text
This text is deleted and this text is highlighted.
<del>This text is deleted</del> and <mark>this text is highlighted.</mark>
Screen width 'crossbands'
Add class="crossband-lightgrey" or "crossband-midgrey" or "crossband-darkgrey" or "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>
<div class="fw1"><img src="img/example-image.jpg" width="720" class="crossband-red" alt=""></div>
Cream tinted background
<div class="fw2">
Content ...
</div>
Horizontal lines
<hr>
<hr class="section">
Image with rounded corners and shadow
Add class="rc shadow1"
<img src="img/example-image.jpg" class="rc shadow1" alt="">
Flip image
Add class="flip"
<img src="img/example-image.jpg" class="flip" alt="">
Irregular-shaped image
Add class="shape02" (or shape01)
<img src="img/example-image.jpg" class="shape02" alt="">
Dialog box
Just me
You read this, obviously. The rest of the screen goes slightly grey and nothing else can happen until the dialog box is closed by the user. Click the button to proceed.
A dialog box is a small window that communicates information to the user and prompts for a response. Typically, it displays a message acknowledged by clicking a "Close" button. You can write whatever text you like in the little green box, eg: to open the message.
The markup:
<dialog id="myDialog"> <div class="modal-dialog"> The text in the dialog box ... </div> <div><button onclick="document.getElementById('myDialog').close()">Close</button></div> </dialog> Some text, then the text to be clicked to open the dialog box <input type="button" id="bt" value="is this" onclick="document.getElementById('myDialog').showModal()"> »
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.
Folded corner motif
Qwwwik has an image named fold70.png in the /img/ folder. By default the image is not displayed but it can be, as a folded corner motif at the top right of the content column. To activate it, paste the following into 'Optional extra styles' in /admin/styles and update extra.css.
@media screen and (min-width: 940px) {
#wrapper {
background-image: url("../img/fold70.png");
background-repeat: no-repeat;
background-position: top 0 right 0;
}
}
The feature is only for wider screens. The motif must disappear when the screen narrows and the red button approaches it, hence (above) min-width: 940px. If the red button is wider with more text in, the motif can be made to disappear sooner to prevent an overlap between the motif and the button. Do this by increasing 'min-width' with more pixels than 940. A little trial and error may be involved depending on how many letters are in the red button and how wide it is.
See information