Friday, 12 September 2014

CSS arrows

div.accordion-heading div.arrow {
    width: 0px;
    height: 0px;
    border: 10px solid transparent;
} div.arrow {
    border-top: 15px solid #28f;
    border-left: 10px solid transparent;
    margin-left: 20px;
    margin-top: 43px;

div.accordion-heading div.arrow {
    border-left: 15px solid #28f;
    border-top: 10px solid transparent;
    margin-left: 24px;
    margin-top: 40px;

<div class="accordion-heading">
    <div class="arrow"></div>
Radio-buttons cannot be deselected once you've selected one.

A project I worked on recently required that a non-mandatory radio-button be deselectable. In order to implement this behaviour I used check-boxes styled to look like radio-buttons. I then added JavaScript to ensure mutual exclusive selection.

In older browsers the styling degrades (so they look like normal check-boxes) due to the lack of support for CSS pseudo-selectors.

<div class="radioboxes">
<input type="checkbox" id="radiobox1" name="group1" value="AUTHORISE" /><label for="radiobox1">Authorise</label>
<input type="checkbox" id="radiobox2" name="group1" value="DECLINE" /><label for="radiobox2">Decline</label>
<input type="checkbox" id="radiobox3" name="group1" value="OTHER" /><label for="radiobox3">Other</label>

<style type="text/css">
div.radioboxes input[type="checkbox"]:checked, div.radioboxes input[type="checkbox"]:not(:checked) {
display: none;

div.radioboxes input[type="checkbox"]:checked + label, div.radioboxes input[type="checkbox"]:not(:checked) + label {
position: relative;
padding-left: 21px;

div.radioboxes input[type="checkbox"]:not(:checked) + label::before, div.radioboxes input[type="checkbox"]:checked + label::before {
position: absolute;
left: 5px;
top: 2px;
content: " ";
display: inline-block;
background: linear-gradient(#eee, #ddd);
width: 10px;
height: 10px;
border-radius: 10px;
border: 1px solid #aaa;
box-shadow: 0px 1px 0px #eee;

div.radioboxes input[type="checkbox"]:checked + label::after {
position: absolute;
left: 8px;
top: 5px;
content: " ";
display: inline-block;
background: #666;
width: 6px;
height: 6px;
border-radius: 6px;
border: none;

<script src="//"></script>  

<script type="text/javascript">
$(function() {
var siblings = $('.radioboxes').children('input[type="checkbox"]'); {
var e_id = $(this).attr('id');

siblings.each(function() {
if (e_id != $(this).attr('id')) {
$(this).prop('checked', false);


Wednesday, 26 February 2014

Useful HTML Tidy configuration (formats output as XML without any HTML parsing):
doctype: omit
indent: auto
indent-spaces: 8
wrap: 100
markup: yes
output-xml: yes
input-xml: yes
tidy-mark: no
Then add the following to vimrc:
:nnoremap ,, :%!tidy -qi <Enter>
Now just press ",," to format the whole file as XML.

Thursday, 8 December 2011

Oracle Indexing

See below for a good article on the various types of indexes available in Oracle.

Oracle Indexing

Thursday, 31 March 2011

Extending Django CMS Page Model

A very useful article suggesting a method by which custom properties can be applied to a page:

Extending Django CMS Page Model

It just goes to show how easy it is to extend Django CMS :)

Please note, as advised in the follow-up article, the custom properties are not automatically available in the menu, since menu items are instances of NavigationNode not Page. The follow-up article suggests a solution for this, but there is a proviso - it is quite inefficient from an SQL perspective, although this could be mitigated somewhat through diligent caching.

Sunday, 20 March 2011

Creating a custom 404 page in Django CMS

The default 404 (page not found) response outputs the 404.html file in your application templates directory. But what if you want something a bit more user-friendly? You can override the default 404 handler in
handler404 = 'application.views.handler404'
Now simply create a module in your application and define a handler404 method:
from cms.views import details

def handler404(request):
return details(request, 'page-not-found')
Finally, via the Django CMS interface create a page with the slug 'page-not-found'. The contents of this page now be displayed in place of the default. I use this page to display a message and the site map to the user.

Make sure you publish the page, otherwise you will get a server error instead!

I would recommend removing all but the necessary permissions on this CMS page, to stop pesky non-super-users from removing it...

Starting a new DJango CMS application, using South

This is actually very simple. Firstly, make sure that 'south' is listed in your INSTALLED_APPS. Next, simply give the following commands:
python syncdb --all
This will create all the tables required by the installed applications, as per the old method.
python migrate --fake
This will populate the south_migrationhistory table with migration info for all applications where South is setup. Finally, you can confirm the status of your application:
python syncdb
No fixtures found.

+ django.contrib.admin
+ django.contrib.contenttypes
+ django.contrib.sessions
+ django.contrib.sitemaps
+ django.contrib.sites
+ mptt
+ publisher
+ sorl.thumbnail
+ sekizai

Not synced (use migrations):
- django.contrib.auth
- cms
- cms.plugins.text
- cms.plugins.picture
- cms.plugins.file
- cms.plugins.snippet
- menus
- south
(use ./ migrate to migrate these)
You can also check what South migrations have been installed via the following:
python migrate --list
Thanks to Martin for his assistance with this.