mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-15 02:11:15 +08:00
625ccae34c
* replace underscores with dashes and redirect old urls * tldrs, listicles, and in-site cross-linking * add canonical tags to all pages * changelog * shorten into Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
41 lines
1.6 KiB
Markdown
41 lines
1.6 KiB
Markdown
# Custom JS and CSS
|
|
|
|
This guide covers how to style Blocks with more flexibility, as well as adding Javascript code to event listeners.
|
|
|
|
## Custom CSS
|
|
|
|
For additional styling ability, you can pass any CSS to your app using the `css=` kwarg.
|
|
|
|
The base class for the Gradio app is `gradio-container`, so here's an example that changes the background color of the Gradio app:
|
|
```python
|
|
with gr.Blocks(css=".gradio-container {background-color: red}") as demo:
|
|
...
|
|
```
|
|
|
|
If you'd like to reference external files in your css, preface the file path (which can be a relative or absolute path) with `"file="`, for example:
|
|
|
|
```python
|
|
with gr.Blocks(css=".gradio-container {background-image: url('file=clouds.jpg')}") as demo:
|
|
...
|
|
```
|
|
|
|
You can also pass the filepath to a CSS file to the `css` argument.
|
|
|
|
## The `elem_id` Argument
|
|
|
|
You can `elem_id` to add an HTML element `id` to any component. This will allow you to select elements more easily with CSS.
|
|
|
|
```python
|
|
with gr.Blocks(css="#warning {color: red}") as demo:
|
|
box1 = gr.Textbox(value="Good Job")
|
|
box2 = gr.Textbox(value="Failure", elem_id="warning")
|
|
```
|
|
|
|
The CSS ruleset will only target the second Textbox here.
|
|
|
|
## Custom JS
|
|
|
|
Event listeners have a `_js` argument that can take a Javascript function as a string and treat it just like a Python event listener function. You can pass both a Javascript function and a Python function (in which case the Javascript function is run first) or only Javascript (and set the Python `fn` to `None`). Take a look at the code below:
|
|
|
|
$code_blocks_js_methods
|
|
$demo_blocks_js_methods |