Conservation of space can be of paramount importance to preserving the integrity of a design while implementing a Drupal site! However some components of a Drupal site are truly space hogs! Polls are an excellent example.
One of my personal "beefs" with polls is that the space of the poll is used wastefully as well as inconsistently. This is particularly true of the results layout. As you may remember, if you have used Drupal polls, each choice in the voting form uses one line of space (typically), whereas the results layout that you see after voting use three lines for each choice. Yuk!
So, I decided to remedy this and condense the results into one liners as well. To do this I needed to move the choice text down into the poll bar as well as move the statistical info up beside the poll bar.
To see this effect in action, see the polls at http://backyardsports.com.
This modification required a few changes to a the poll-bar.tpl.php as provided by the poll module.
This is the standard poll-bar.tpl.php file
<div class="text"><?php print $title; ?></div>
<div class="bar">
<div style="width: <?php print $percentage; ?>%;" class="foreground"></div>
</div>
<div class="percent">
<?php print $percentage; ?>% (<:?php print format_plural($votes, '1 vote', '@count votes'); ?>)
</div>
To get the desired poll behavior I used
<div class="clear-block">
<div class="bar">
<div class="text"><?php print $title; ?></div>
<div style="width: <?php print $percentage; ?>%;" class="foreground">
<div class="text"><?php print $title; ?></div>
</div>
</div>
<div class="percent">
<?php print $percentage; ?>%
</div>
</div>
As you may have noticed, the $title is actually output into both the poll bar and poll foreground in my version. There is a very special reason for this: It needs to be output twice so that the text remains visible at all times.
Here is the css
.poll { color: #167585; }
.poll .bar {
background: #f2f2f6;
margin: 8px 40px 6px 0;
position: relative;
height: 18px;
}
.poll .percent {
height: 18px;
font-size: 12px;
margin-top: -22px;
line-height: 18px;
}
.poll .total {
float: right;
margin-top: 15px;
font-weight: bold;
}
.poll form { margin-top: 10px; }
.poll label.option {
color: #666666;
font-weight: bold;
}
.poll .text {
margin: 0;
color: #666666;
font-weight: bold;
font-size: 12px;
top: 0;
left: 0;
padding: 0 3px;
line-height: 18px;
position: relative;
}
.poll .bar .foreground {
height: 18px;
background: #885c2b;
overflow: hidden;
margin-top: -18px;
}
.poll .bar .foreground .text { color: #fff; }
.poll .form-radio { margin-right: 7px; }
You may change the colors and backgrounds to your liking however the margin, positioning, and other css properties should probably remain as above. You may also desire to change other components of the polls. If so there are quite a few poll templates to work with including:
- poll-bar-block.tpl.php
- poll-bar.tpl.php
- poll-results-block.tpl.php
- poll-results.tpl.php
- poll-vote.tpl.php
With any luck, after using the above to guide your poll themeing, you will have nice clean poll displays. This method ensures the results and the form itself take up almost the same amount of space, it makes for a more uniform appearance no matter whether the user has voted or not. Hope this helps you.
Thanks, Derek
