Sidebars
We recently covered the use here of two very handy features of reStructured Text (reST): namely the sidebar and figure directives. Sidebars and figures are very useful features for adding additional content styles to documents using reST, for example web diaries created using the EasyBlog product…
A sidebar is a useful way of either highlighting some content from your article, or more commonly exploring a related topic in further depth, where it wouldn’t be appropriate in the body of your article. The sidebar will always float to the right of your feature, and may often—but it is not all compulsory—be deployed at the very beginning of the article body. Like all floated elements, it will align to the top of the header or paragraph that it immediately precedes. It is also possible to have an image in your sidebar:
As demonstrated in this very article, a sidebar is an area for highlighted content which floats to the right of the actual article. The code for a sidebar in reST is as follows:
.. sidebar:: Sidebar Title :subtitle: Optional Sidebar Subtitle The sidebar content text would go here. .. image:: image.jpg (an optional image)
Those who would like their sidebars to float to the left or middle are out of luck—it’s to the right only for reasons of taste and aesthetics.
And for those interested in such things, the sidebar directive makes use of the following CSS:
.documentContent .sidebar {
float: right;
margin: 0 0 10px 20px;
padding: 15px;
width: 250px;
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
overflow: hidden;
}
.documentContent p.sidebar-title {
font: normal 150%/150% <dtml-var headingFontFamily> !important;;
background-color: &dtml-globalBackgroundColor;;
padding: 4px 15px 2px 15px;
margin: -15px -15px 10px -15px;
border-bottom: <dtml-var globalBorderColor> solid 1px;
}
p.sidebar-subtitle {
font: normal 110%/110% <dtml-var fontFamily> !important;;
padding: 0;
margin: 0 0 4px 0;
}
.documentContent .sidebar img {
border: none !important;;
}
#vs-scheme1 .documentContent p.sidebar-title, #vs-scheme1 .documentContent p.sidebar-subtitle {
color: &dtml-vsScheme1;;
}
#vs-scheme2 .documentContent p.sidebar-title, #vs-scheme2 .documentContent p.sidebar-subtitle {
color: &dtml-vsScheme2;;
}
#vs-scheme3 .documentContent p.sidebar-title, #vs-scheme3 .documentContent p.sidebar-subtitle {
color: &dtml-vsScheme3;;
}
#vs-scheme4 .documentContent p.sidebar-title, #vs-scheme4 .documentContent p.sidebar-subtitle {
color: &dtml-vsScheme4;;
}
#vs-scheme5 .documentContent p.sidebar-title, #vs-scheme5 .documentContent p.sidebar-subtitle {
color: &dtml-vsScheme5;;
}
#vs-scheme6 .documentContent p.sidebar-title, #vs-scheme6 .documentContent p.sidebar-subtitle {
color: &dtml-vsScheme6;;
}
#vs-scheme7 .documentContent p.sidebar-title, #vs-scheme7 .documentContent p.sidebar-subtitle {
color: &dtml-vsScheme7;;
}
Close observers of the above will note there are several optional dtml calls in this CSS. The dtml in this particular example is designed to work in conjunction with the vsCore product default stylesheet, alongside ploneDefault base_properties.doc, both of which we have modified to create customisable portal_tab colours. The dtml above acquires the colour values of the portal_tab active in a particular location, changing the sidebar title and subtitle colour to match. The sidebar would of course work equally well with a single "hard-wired" title and subtitle colour value for an entire site.
Figure floats
Floated to the left.
CSS styles have also been created to combine image float styles with the figure directive. There are now three CSS classes which can be applied to the figure directive: float-right, float-left, and float-centre, and what they do should be fairly self-evident—floating an image to the right, left and centre respectively. Keen observers of CSS will point out that there is no such thing as a float-centre command, which is quite correct, but in this case it seemed more consistent to name the class "float-centre" for the sake of users.
Floated to the right.
While the reST figure directive has always allowed a caption to be added along with an image, with a little additional CSS trickery the captions here have not only been styled with a little font-sizing and colour, but have also been positioned in a more aesthetically pleasing way at the bottom left corner of the images, without using the depracated align="left" html tag, which is the default method in reST.
Floated to the centre.
The reST code for these styles is as follows:
.. figure:: image.jpg :alt: float-left :figclass: float-left An image floated to the left. .. figure:: image.jpg :alt: float-right :figclass: float-right An image floated to the right .. figure:: image.jpg :alt: float-centre :figclass: float-centre An image floated to the centre
And the CSS employed is as follows:
.float-right {
position: relative;
float: right;
text-align: left;
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
margin: 0 0 23px 20px;
padding: 0;
clear: right;
}
.float-left {
position: relative;
float: left;
text-align: left;
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
margin: 0 20px 23px 0;
padding: 0;
clear: left;
}
.float-centre {
position: relative;
text-align: center;
border: none;
margin: 0 0 23px 0;
padding: 0;
clear: both;
}
.documentContent .float-right p.caption, .documentContent .float-left p.caption {
margin: 0 0 -18px 0;
padding: 3px 0 0 0;
bottom: 0;
left: 0;
font: normal 11px/13px Arial, Helvetica, sans-serif !important;;
color: #000;
}
.documentContent .float-centre p.caption {
margin: 3px 0 0 0;
padding: 0;
font: normal 11px/13px Arial, Helvetica, sans-serif !important;;
color: #000;
}
Note that a small amount of dtml is again used to style the images with the border colour, width and style, as defined in the site base_properties doc—thereby matching the border around your floated images with the style of your portlets etc. Of course it may be more appropriate in some cases to hardwire this value.
Also of note is the fact that the floated-centre image doesn’t have a border, for the reason that without a fixed width defined the image container is via the block properties of CSS defaulting to 100% width, giving you a border that expands to the full width of your content column no matter the size of the image. Should there be a way to get the border to match the size of the image (the CSS attributes display, width and margin: auto were of no avail) the class will be updated to have a border.