Two directives: sidebar and figure pt.2


Warning: Use of undefined constant vs - assumed 'vs' (this will throw an Error in a future version of PHP) in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 38

Warning: Use of undefined constant simplicity - assumed 'simplicity' (this will throw an Error in a future version of PHP) in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 38

Warning: A non-numeric value encountered in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 38

Warning: A non-numeric value encountered in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 38

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…

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

float-left

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.

float-right

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.

float-centre

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.


Warning: Use of undefined constant vs - assumed 'vs' (this will throw an Error in a future version of PHP) in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 41

Warning: Use of undefined constant simplicity - assumed 'simplicity' (this will throw an Error in a future version of PHP) in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 41

Warning: A non-numeric value encountered in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 41

Warning: A non-numeric value encountered in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 41

Warning: count(): Parameter must be an array or an object that implements Countable in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/comments.php on line 33

Warning: count(): Parameter must be an array or an object that implements Countable in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/comments.php on line 34

Comments are closed.