Skip to main content

Sidebar logo resize

Comments

6 comments

  • Official comment
    Tobias Ransäter

    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;
    }
  • Expert Consultant Support

    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,
    Lisa

    0
  • Alexander Abraham

    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
  • Expert Consultant Support

    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,
    Lisa

    0
  • Expert Consultant Support

    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
  • Alexander Abraham

    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.

Powered by Zendesk