Hi

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

Thanks

Files: 
CommentFileSizeAuthor
#8 gauge-small.gif4.54 KBharriska2

Comments

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 ;).

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.

Status:Active» Postponed (maintainer needs more info)

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.

How do you make the thermometer horizontal?

Same question as #6.

StatusFileSize
new4.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;
(+)}

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 : ).