How to set a different logo for guests and members?

Hello,

My logo (image + business name) is wide and doesn't look great on UNA because of the default logo size in Artificer, the top navigation menu and the toolbar member icons (notifications , messenger etc) that occcupy too much space in the top navigation bar.

I would like to display one version (short version) of my logo to members and another one (long version) to guests as many items of the top navigation bar don't show to non-logged-in users. Please how to achieve that?

Facebook does the same. They got a short and long version of their logo as you can see on the images below.

One version for logged-in users:

image_transcoder.php?o=sys_images_editor&h=2498&dpx=2&t=1739156810

and another one for visitors:

image_transcoder.php?o=sys_images_editor&h=2497&dpx=2&t=1739156703

I know there is this tickect #4656 possibility to upload separate images for Light and Dark modes but that's not what I am talking about.

It would have been great to also be able to upload multiple logo versions/images and set the membership level visibility. 

Thanks

Artificer: Improve Logo image uploader · Issue #4656 · unacms/una · GitHub
  • View
    1100
  • Repost
    1
  • More
Replies (7)

    • Hi OneEagle, I remember Jerome has some kind of LogoSwitscher Module. But I really dont know if it is updated and/or fitting your needs.

      • Hi @Peter Thanks for your reply. I am trying as much as possible to stay away from third party mods. Yes I know about his module but It doesn't do what I am trying to achieve. Thanks

        • My goodness, Facebook and Mark is on our community forum... Just kidding. @OneEagle I think your respond is indeed the answer, @Peter must just do his homework to sort out the logistics.

          Second Option is to make use of Canva, Figma... basically predesign your logos accordingly

          • Hello @OneEagle !

            As body part of UNA has the special CSS class for the guests (.bx-user-unauthorized) you may replace src of the "usual" logo with the CSS trick like:

            .bx-user-unauthorized .bx-ti-left img {
src: a new one;
}

            • Hi @LeonidS

              Thanks. It works! I wish we had this feature in UNA: Ability to set a different logo for guests and members and set the membership level visibility

              So based on your help, the final css code looks like this:

              .bx-user-unauthorized .bx-ti-left img {
content: url("template/images/logo-here.png");
}

              Now, there is another problem. Even the new logo image doesn't fit well probably because of the the default logo size in Artificer which is small. I have tried to add the 'width' and 'height' properties to the css code above to get the image to its normal size but it didn't work.

              Any idea?

              Thanks

              • Hello.

                Artificer template automatically calculates Width and Height for the uploaded logo image depending on the height of the Header area and saving the proportions of the uploaded image.

                <img class="hidden dark:hidden lg:block" style="width:8.25rem; height:2.5rem;" src="https://us-east-1.linodeobjects.com/una/sys_images_custom/bsdvmrebtnbmdpjxctptqmpjbyumti2r.svg" id="bx-logo" alt="UNA Community Management System">

                So, you need to resize your custom logo image correctly. Also you should be able to use CSS width and height if it's needed. You should have something like this:

                .bx-user-unauthorized .bx-ti-left img {
width: 8rem !important;
height: 2.5rem !important;
content: url("template/images/logo-here.png");
}

                • Hi Anton,

                  Thanks a lot for your reply and for the explanation. I will give it a try and let you guys know. Once again thanks a lot!

                  Login or Join to comment.