How to add an icon/text inline with the sidebar menu?

I am looking at some other examples of Glide apps and I’ve noticed that it is possible to have an icon/text displayed inline with the sidebar menu. For example:

Screen Shot 2021-05-01 at 7.31.47 PM

Where can I set this? I haven’t been able to find any docs/templates to learn.

Thanks,
Patrick

Hola @Pat

You need to use CSS in a rich text component.

<span/>
<style>
#app-root div[opacity='1'] {
  color: transparent; 
}
.nav-bar-root {
  content: "";
  display: block;
  background-image:url(URL);
  background-size: 200px 40px;
  background-repeat: no-repeat; 
background-position: center, center;
;}
</style>

Replace URL for your picture url

Also, you can find tons of CSS codes on this thread

10 Likes

Thanks a bunch! That thread is actually where I found the example I used :sweat_smile:

Much appreciated.

1 Like

Only with that replacement it has to work? Because I did it but nothing happend. Or maybe the picture it has to be in google drive or cloudinary?

You can try uploading that image to something like Imgur.

Try uploading the picture on Glide. I always do that.

It works well.

1 Like

I think you need to wrap the URL in quotes within the background-image(), no?

Also, your span shouldn’t have a backslash at the beginning of your code.

Weird!

I have it with the / and it’s working. I have it in about 5 apps the same way.

image

1 Like

Hm :thinking:

@Robert_Petitto @SantiagoPerez Works because the backslash at the END of the word it’s becuase then you don’t need to add a , it means that ALL the text that goes after that is inside span

I am assuming underneath the hood that a Rich Text is interpreted as a single block of HTML, so the <style></style> tags will apply to any HTML within the Rich Text.

</span> is a closing tag without an opening tag, which is not valid HTML, but <span /> is a self closing tag, which is valid. You can do this with some other elements such as <img />, <hr />, etc. (see more here).

So @adriasoce , you’re logic is close but the <style></style> elements don’t actually go inside the span, it’s just that an HTML style tag is being applied to all elements. E.g. if you had the following:

<div>
  <span class="text">Hello</span>
  <span class="text">World</span>
<div>
<style>
.text {
  color: green;
}
</style>

It would be applied to both span elements.


@Robert_Petitto @SantiagoPerez I am curious to hear your thoughts on using HTML in Rich Text elements though. The docs warn against it but at least for styling, it seems very common place.

2 Likes

Hey, I know this app :stuck_out_tongue_winking_eye:

1 Like

Thank you for explaining that. My eye develops a twitch every time I see CSS examples or other HTML with open tags that aren’t properly closed. Browsers are notoriously forgiving of bad code and if not done properly, it could bite you later.

As for use of it…I see it as “use at your own risk” since it’s not officially supported and glide could easily make a change that would cause a lot of it to not work in the future. If people are OK with that risk, then I personally have no problem with it. Just have a back-up plan if it no longer works in the future. For the most part, I only use it sparingly for some minor UI tweaks. At most, I build dynamic HTML Tables, because Markdown just isn’t capable of what I need and Glide doesn’t have a robust table feature.

4 Likes

Could you guys please tell me, how can I replace the heading of the tab with another text, not an image, using this method? Im just trying to make dynamic header, which will say smth like “Hello, {username}”. It would be nice if some of you share a necessary piece of code for different app themes (like Bold, Light and Pure), cuz it seems that i need different codes for different themes. Thank you!

From my understanding, you can’t directly replace the tab name with a dynamic field. You can use a service like Cloudinary to generate a dynamic image based on a template URL, with the username as the input.

For app themes, I don’t think that’s possible. You can’t set visibility conditions based on app themes (for different pieces of code), and conditional CSS is something I haven’t seen people done on Glide.

you can see it in action here:

1 Like

you can use template column to change CSS… it will become conditional

1 Like

Can you explain more on the use cases for conditional CSS you have used? Or is it just dynamic input?

Personally I meant more about the things like show the image space in a card if there’s an image, and don’t use that space at all if there’s none; or theme-related like what @11183 mentioned.

you can use CSS for so many purposes, CSS parameters you can adjust dynamically using a template column