Comment to 'How to set a different logo for guests and members?'
Comment to How to set a different logo for guests and members?

  • 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!