Sidebar logo resize
Hi!
I am using the sidebar with my application and have a custom logo. The original FF logo gets changed to an icon when the sidebar is not expanded and show the full logo when sidebar is expanded. If im not mistaken this is done using some script that changes the inline source of the image. I want the same thing but since the image is set inline I am unable to change the image dynamically using the pre made logo classes. Is there a function to create this effect or can I upload two versions of the logo? Maybe I can write custom scripts and insert if this is not an option?
Thank you in advance,
Alexander
-
Official comment
Gabriels solution worked fine for me!
A side note to this is that the logo you want to replace should be somewhere in the size of 40px * 40px. I also added no-repeat and center to the css rule.
Like this:
.logo-small {
height: 0;
padding: 20px;
background: url('../../../../../../api/image/d2a15958-9a2a-4c23-bf6c-2ee6852bc383/Large') no-repeat center;
} -
Hi Alexander!
We have sent this question to our platform team. In the default code these images are hard coded. And as soon as you change the logo these default images are removed. And we have no functions to replace the two different ones in the Studio.
If someone has managed to do this by using custom scripts hopefully her/she can comment on this post.
All the best,
Lisa0 -
Hi!
Thank you for the information. I will try to add a custom control with the necessary code for now.
All the best,
Alexander
0 -
HI!
I don't think you can use a custom control since you can't access the sidebar in that way. However, you can try to manipulate the logos in the CSS. You have two different classes for the small and larger logo in the sidebar. You can try to pinpoint these, perhaps set img to display none and add a background image or something like that..?
All the best,
Lisa0 -
Hi Alexander!
I managed to solve the issue by uploading the images to studio and using the CSS background property to set the image.
Here is the example for the small logo(when the sidebar is closed). You can do the same for .logo-medium(when the sidebar is open)
.logo-small{
height: 0;
padding: 20px;
background: url('../../../../../../api/image/e5f0245a-1165-441c-9b92-2c16ce80d89b/Large')
}To get the correct urls you need to make the browser download the image. The easiest way is to add a Image Control (preferably to the start view, you can remove the image after getting the correct urls) and set the Static Image option in FF Studio. After running a new test session, open dev tools and locate the downloaded image(See image below).
Right-click the image and select copy link address. It should look something like this: https://e60a4682-8452-48b9-9ead-47a5dfb6326d.test.dev.app.flowfactory.com/api/image/e5f0245a-1165-441c-9b92-2c16ce80d89b/Large
You should only paste the bold text as seen in the CSS code block above. Do not remove any '../'.
// Gabriel
0 -
Thank you for the input but this does not solve the issue. Even if there are classes to handle the logo size those classes never handle the image. Instead of replacing the current image it will just add an image on top what is already there. In my specific use case I have a full logo that needs to become just the icon. Something like the image below.
Since all my full logos and icons are transparent the covering of logos does not work here and I need to replace the source of the image in the DOM. For now I will opt for some custom javascript to manipulate the DOM but maybe this can be a feature for the future to be able to add different logo and icon versions :)
Happy coding,Alexander
0
Please sign in to leave a comment.
Comments
6 comments