Hi

How to make a horizontal donation thermometer using donation thermometer module?

Thanks

CommentFileSizeAuthor
#8 gauge-small.gif4.54 KBharriska2
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

dboulet’s picture

If you apply my patch from #688608: Move gauge code into theme function, you can theme the thermometer any way you want in your theme ;).

sejtraav’s picture

Once I get that patch in, hopefully it will help you out.
I can't add too many different versions of the thermometer, as each one requires separate image files. Hopefully dboulet's patch will help you out.

sejtraav’s picture

Status: Active » Postponed (maintainer needs more info)
sejtraav’s picture

Status: Postponed (maintainer needs more info) » Fixed

#688608: Move gauge code into theme function's patch is now committed. Use the theme function to make customisations.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

thinguy’s picture

How do you make the thermometer horizontal?

harriska2’s picture

Same question as #6.

harriska2’s picture

FileSize
4.54 KB

OK, I'm going to post here because I don't know where else. I reduced the size and turned the thermometer on its side. Here is what I did:

1. I turned the small gif sideways and made it even smaller 152x53. I've attached it.

2. I edited donations_thermometer.module:

(-)<div class="current-value" id="campaign-progress-current" style="height:'. $percent .'%;">
(+)<div class="current-value" id="campaign-progress-current" style="width:'. $percent .'%;">

3. I edited donations_thermometer.css
(-).donations_thermometer .gauge-Small{
(-) width: 37px;
(-) height: 211px;
(-) position:relative;
(-) background: #333 url(gauge-small.gif) top left no-repeat;
(-)}

(-).donations_thermometer .gauge-Small .current-value {
(-) position:absolute;
(-) left: 0px;
(-) bottom: 0px;
(-) text-align: center;
(-) width: 100%;
(-) background: red url(gauge-small.gif) bottom right no-repeat;
(-)}

(+).donations_thermometer .gauge-Small{
(+) width: 152px;
(+) height: 26px;
(+) position:relative;
(+) background: #333 url(gauge-small.gif) top left no-repeat;
(+)}

(+).donations_thermometer .gauge-Small .current-value {
(+) position:absolute;
(+) left: 0px;
(+) bottom: 0px;
(+) text-align: center;
(+) height: 100%;
(+) background: red url(gauge-small.gif) bottom left no-repeat;
(+)}

dboulet’s picture

Hi harriska2,

Instead of modifying the module code directly, you can instead make the changes in your theme:

1. Copy donations_thermometer.css to your theme folder and add a line in your theme's .info file, like this: stylesheets[all][] = donations_thermometer.css.

2. Copy the entire function theme_donations_thermometer() from donations_thermometer.module and paste it into your theme's template.php file. Rename the function to YOURTHEME_donations_thermometer(), replacing "theme" with the name of your theme.

3. Clear your cache.

You can now modify the CSS and theme function in your theme, without hacking the module : ).