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:
Erfan 2022-09-15 23:22:49 +04:30 committed by GitHub
parent 72c52ebc9f
commit bff2bb35a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 5 deletions

View File

@ -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:
...
```

View File

@ -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:
...
```