[PoC] Show styling examples #75
Conversation
| div[data-testid="stModal"] > div > div { | ||
| background-color: red; // If the modals should have a different background color, set it here |
There was a problem hiding this comment.
Note: Here you can set dialog background color
There was a problem hiding this comment.
@shu echoing what Kim said. I just copied in and set to white :)
src/components.py
Outdated
| if col1.button(I18N_SHARE_BUTTON, key='share-button'): | ||
| show_share_dialog(app_url) | ||
| with sal.image('centered-image'): | ||
| st.image(APP_LOGO) # Set path of the company image to show centered |
There was a problem hiding this comment.
Note: Here you can set the image path
| @@ -3,6 +3,7 @@ gatherUsageStats = false | |||
|
|
|||
| [theme] | |||
| base="dark" | |||
| textColor="#ffffff" # Set general text color (which appears outside of chat messages in dialogs etc) | |||
There was a problem hiding this comment.
Set the text color for the whole app (titles, texts outside chat)
| @@ -1,5 +1,6 @@ | |||
| $chat-message-background-color: var(--st-secondary-background-color); | |||
| $chat-message-footer-border: 1px solid rgba(250, 250, 250, 0.2); | |||
| $chat-message-text-color: #00ff00; // Set the text color for the chat messages here! | |||
There was a problem hiding this comment.
Note: Set the text color for the chat messages here!
| @@ -152,6 +156,21 @@ | |||
| } | |||
| } | |||
|
|
|||
| %centered-image { | |||
There was a problem hiding this comment.
@shu this part is needed to let you adds an image to the center of a div. I use it in components
| @@ -213,6 +242,7 @@ $custom-classes: ( | |||
| sal-columns: (chat-message-footer, no-flex-grow), | |||
| sal-button: (share-button, citation-button, feedback-button, feedback-up-icon, feedback-down-icon, feedback-up-icon-active, feedback-down-icon-active), | |||
| sal-button-container: (dialog-button), | |||
| sal-image-container: (centered-image), | |||
There was a problem hiding this comment.
@shu this part is needed so that sal-image-container is callable via with sal.image("centered-image"):
| if col1.button(I18N_SHARE_BUTTON, key='share-button'): | ||
| show_share_dialog(app_url) | ||
| with sal.image('centered-image'): | ||
| st.image(APP_LOGO) # Set path of the company image to show centered above the chat messages |
There was a problem hiding this comment.
@shu this renders the app logo in the center of a div or streamlit part. I just copied this into the part where the diaglogue modal appears
This repository is public. Do not put any private DataRobot or customer data: code, datasets, model artifacts, .etc.
Rationale
What is this pull request for?
Summary of Changes
In general, what was changed? Screenshots are welcome too!