Ability to upload and display Logo in fixed top bar instead of the tab name

Feature Requests
21

Where does all of this go? lol

22

Updated - Logo in Nav bar

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

What field are you putting this markup into? And where is the CSS var “URL” coming from?

Nm, I guess it is a rich text field and that is just a placeholder for any URL. Pretty nice. I just used this trick to finally get rid of the default “Home” tab title text on one of my apps on a branded landing screen.

1 Like
24

didnt work for me. replaced the URL with URL from my GDrive and the logo didn’t show.

2 Likes
25

OK Got it to work and its beatifull. thanks brother
image

3 Likes
26

Well done :+1: looks great

1 Like
27

One thing i did notice is that it moved the edit pencil down on the search and if you don’t have search the edit is not apearing.
@Lucas_Pires is there a way to fix this?

image
image555×896 63.4 KB

BUG244
BUG2441899×1073 1.75 MB

In android device the edit is completely gone

Screenshot_2020-11-21-22-28-56-039_com.android.chrome
Screenshot_2020-11-21-22-28-56-039_com.android.chrome1080×2340 170 KB

4 Likes
28

@yinon_raviv - may I ask what you had to do to get your gdrive link to work?

Thanks!

29

I uploaded to glide server and used the link I got which is working.
I think Google is blocking those things 9n their side

31

Hi all, I am really new at all this, but I would also very much like to add the logo on the bar on the top. I would love to se your trick Lucas but… where I am supposed to enter it?

32

You enter it in a rich text component.

3 Likes
34

Bonjour,

Je trouve super cette astuce pour insérer le logo dans la barre supérieure. Désolé de ma faible expérience par avance :pensif:. Quelle est la démarche, dois-je faire la modification dans le code source ou d’abord ajouter un composant de texte enrichi dans glide ? Je ne vois pas dans le code source ou est situé “nav–bar-root”.:face_with_raised_eyebrow:

1 Like
35

You just have to add the code (if you have already had it) to a rich text component. It will insert the CSS to the page you’re working on automatically. Nav-bar-root is a class in any pages.

3 Likes
36

@Lucas_Pires Thank you so much for sharing the RT. Do you use similar RT on the my profile screen in your Jungle app? The app is beautiful by the way! Job well done, you are very talented! Thanks!

1 Like
37

I used it Casch! Thank you so much :relaxed:

1 Like
38

@Lucas_Pires You’re very welcome. Would you be able to share the rich text format you used for your Jungle my profile screen? I love the idea of having a profile picture and a background photo. Cheers my friend! Thank you :slight_smile:

1 Like
39

I didn’t even know there was a CSS library for this kind of stuff, just stumbled across it. You do amazing work. Just wanted to say thank you!

40

Hope you can find some useful things in there, and potentially contribute to that any time :wink:

1 Like
42

Of course! Your work is fantastic as well! Thank you for sharing what you know. It really gives me a chance to learn that type of stuff. It has really opened my eyes on what is possible, I already have some ideas :slight_smile: any tips for rich text and css starters?

43

My first tip is to use inspect element and dive into the code there to understand which stable classes you can work with.

You can take the code snippets @Lucas_Pires, me and other contributors uploaded to the library and try to play with the components to know how you can further improve those.

If you have an idea, please feel free to start a new thread and discuss it with us.

2 Likes