diff --git a/py/examples/meta_stylesheet.py b/py/examples/meta_stylesheet.py index 8223518c8a..fd126feeb0 100644 --- a/py/examples/meta_stylesheet.py +++ b/py/examples/meta_stylesheet.py @@ -15,7 +15,7 @@ page['meta'] = ui.meta_card( box='', - # Load external stylesheet. + # Load external stylesheet. The `path` can also be the one returned from `q.site.upload` if you want to use your own CSS files. stylesheets=[ui.stylesheet(path='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css')] ) diff --git a/website/docs/custom-css.md b/website/docs/custom-css.md index 9239dd59ef..a317b0b690 100644 --- a/website/docs/custom-css.md +++ b/website/docs/custom-css.md @@ -24,6 +24,35 @@ q.page['meta'] = ui.meta_card( ) ``` +### Using local CSS stylesheet + +Prior to using your own CSS files, they need to be uploaded to Wave server. There are 2 ways of doing this: + +* Uploading the CSS files from your Wave app via [q.site.upload](/docs/files/#provide-file-downloads). +* Serving the CSS files directly from Wave server via [public/private dir](/docs/files/#serving-files-directly-from-the-wave-server). + +```py +from h2o_wave import Q, main, app, ui +import os + +current_dir = os.path.dirname(os.path.realpath(__file__)) + +@app('/') +async def serve(q: Q): + # Upload the `styles.css` file to the Wave server + # and save its path into the `stylesheet_path` variable. + stylesheet_path, = await q.site.upload([os.path.join(current_dir, 'styles.css')]) + # Use the uploaded file path in the `ui.stylesheet`. + q.page['meta'] = ui.meta_card( + box='', + stylesheets=[ + ui.stylesheet(stylesheet_path) + ] + ) + + await q.page.save() +``` + ## Inline stylesheets On the other hand, if all you want to do is tweak a few things here and there, the simpler solution would be to use the `stylesheet` attribute that accepts a CSS string.