"We just updated this page...." Font Color - Branding Consistency

Idea
1

“We just updated this page. Please refresh the page to get the latest version. You will not be able to use the app until you refresh.”

It doesn’t look like this has been asked before. Is there a current best practice for modifying the font color of this text? It would be great if the Bubble team could allow us to change this color inside the language settings (I’d rather not inject inline CSS on every page). This minor CSS tweak would give our apps a very nice touch in terms of branding consistency.

5 Likes
2

Yes! I’d like to handle custom behaviors/tweaks to the “latest version” notice.

3

Thanks for being the first to ask! I was getting ready to post the same exact question/idea but figured I’d bump this thread instead. Now that the dynamic color feature exists, I’d love to have the ability to style this area dynamically based on theme colors users in my app have already set. I’m thinking this should be an editable field group on the page-thing itself (eg: index) so that the colors can be set dynamically like any other variable.

Edit: I noticed on mobile this update bar has Bubble-blue branded text by default, and on desktop this text is white but blue on hover. Ideally we’d be able to set a custom appearance for all versions and all states (default text style, hover text style, and focus text style).

As a temporary solution I’ve added CSS in Settings → SEO & Metatags → Script in body that overrides the blue and sets some other variables like font family. I am sure this could be added to the page in a HTML element to make use of dynamic colors but this’ll do for now. Note: I do not know if there are class names I’m missing, only found one: .bad-revision

.bad-revision {
    color: white!important;
}
.bad-revision:hover {
    color: white!important;
}

.bad-revision {
    padding: 20px 10px;
    font-family: Raleway, Arial, sans-serif;
    font-size: 14px;
    background-color: rgba(48, 48, 48, 0.9);
    font-weight: 600;
    color: white;
    position: fixed;
    text-align: center;
    top: 0px;
    width: 100%;
    z-index: 20000;
    line-height: 1.4;
    cursor: pointer;
}