mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-06 12:30:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix code block (#3480)

Browse Source
This commit is contained in:
Freddy Boulton 2023-03-16 15:14:27 -04:00 committed by GitHub
parent eb101c428f
commit 19eaafb2ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
guides/03_building-with-blocks/04_custom-CSS-and-JS.md
View File

@ -15,7 +15,7 @@ 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:
with gr.Blocks(css=".gradio-container {background: url('file=clouds.jpg')}") as demo:
...
```
@ -26,9 +26,9 @@ You can also pass the filepath to a CSS file to the `css` argument.
You can `elem_id` to add an HTML element `id` to any component, and `elem_classes` to add a class or list of classes. This will allow you to select elements more easily with CSS.
```python
with gr.Blocks(css="#warning {color: red} .feedback {font-size: 24px}") as demo:
box1 = gr.Textbox(value="Good Job", elem_class="feedback")
box2 = gr.Textbox(value="Failure", elem_id="warning", elem_class="feedback")
with gr.Blocks(css="#warning {background-color: red} .feedback {font-size: 24px}") as demo:
box1 = gr.Textbox(value="Good Job", elem_classes="feedback")
box2 = gr.Textbox(value="Failure", elem_id="warning", elem_classes="feedback")
```
The CSS `#warning` ruleset will only target the second Textbox, while the `.feedback` ruleset will target both.