mirror of
https://github.com/gradio-app/gradio.git
synced 2024-11-21 01:01:05 +08:00
changed the documentation for background styling (#2275)
* changed the body to .gradio-container #2270 * changed body to .gradio-container #2270 * added a description #2270 Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com>
This commit is contained in:
parent
72c52ebc9f
commit
bff2bb35a2
@ -114,10 +114,11 @@ img = gr.Image("lion.jpg").style(height='24', rounded=False)
|
||||
|
||||
Take a look at the [Docs](https://gradio.app/docs) to see all the styling options for each Component.
|
||||
|
||||
For additional styling ability, you can pass any CSS to your app using the `css=` kwarg:
|
||||
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.Interface(css="body {background-color: red}") as demo:
|
||||
with gr.Interface(css=".gradio-container {background-color: red}") as demo:
|
||||
...
|
||||
```
|
||||
|
||||
|
@ -2,17 +2,18 @@
|
||||
|
||||
## Custom CSS
|
||||
|
||||
For additional styling ability, you can pass any CSS to your app using the `css=` kwarg:
|
||||
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="body {background-color: red}") as demo:
|
||||
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="body {background-image: url('file=clouds.jpg')}") as demo:
|
||||
with gr.Blocks(css=".gradio-container {background-image: url('file=clouds.jpg')}") as demo:
|
||||
...
|
||||
```
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user