Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Hi
How to make a horizontal donation thermometer using donation thermometer module?
Thanks
Comment | File | Size | Author |
---|---|---|---|
#8 | gauge-small.gif | 4.54 KB | harriska2 |
Comments
Comment #1
dboulet CreditAttribution: dboulet commentedIf you apply my patch from #688608: Move gauge code into theme function, you can theme the thermometer any way you want in your theme ;).
Comment #2
sejtraav CreditAttribution: sejtraav commentedOnce 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.
Comment #3
sejtraav CreditAttribution: sejtraav commentedComment #4
sejtraav CreditAttribution: sejtraav commented#688608: Move gauge code into theme function's patch is now committed. Use the theme function to make customisations.
Comment #6
thinguy CreditAttribution: thinguy commentedHow do you make the thermometer horizontal?
Comment #7
harriska2 CreditAttribution: harriska2 commentedSame question as #6.
Comment #8
harriska2 CreditAttribution: harriska2 commentedOK, 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:
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;
(+)}
Comment #9
dboulet CreditAttribution: dboulet commentedHi 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 toYOURTHEME_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 : ).