Hi,
Is there an easy way to change the size (width) of a progress bar?
Thanks,
Jos.
Hi,
Is there an easy way to change the size (width) of a progress bar?
Thanks,
Jos.
Some themes have a dedicated spot in the settings that you can add a few bits of custom CSS for the element you want or you could use CSS Injector
I'm not sure which progress bar you mean but by right-clicking on it and selecting "Inspect element" or something similar you can find out the ID, element, and/or class that you need to target.
If you are talking about the progress bar shown by batch processes (for example, the one shown when you update your site), that seems to be themed by theme_progress_bar()
and the css is defined in system.css
and changed by pretty much every theme, like Basis (skin.css
) and Seven (style.css
).
I would experiment with setting the css property width
for css class .progress .bar {}
. I believe CSS injector can help you do that (I would avoid changing the file system.css
since you'll lose all changes next time you update your site). Alternatively you can create a subtheme of Basis or Seven, set your site to use that subtheme, and then modify those css files I listed above.
I'm currently porting +50K of lines (many custom modules) written for Drupal v7.x to Backdrop 1.x.
In the code I made use of the progress bar as documented here .
I finally found the css that I needed to add to increase the width of the progress bar. For those that are also searching for it, this is what you need to add (preferable in a separate css that you load in your own module):
.ajax-progress-bar {
width: 75%;
}
Thanks to all that replied, really appreciate the help.
I'm currently porting +50K of lines (many custom modules) written for Drupal v7.x to Backdrop 1.x.
In the code I made use of the progress bar as documented here .
I finally found the css that I needed to add to increase the width of the progress bar. For those that are also searching for it, this is what you need to add (preferable in a separate css that you load in your own module):
.ajax-progress-bar {
width: 75%;
}
Thanks to all that replied, really appreciate the help.