Comment to 'How to upload two separate Logos for large and small screens?'
Comment to How to upload two separate Logos for large and small screens?

  • Thank you guys for your reply but I am sorry I think you completly missed my question. I already know how to upload a logo. I meant how to use two logo versions at the same time as it's done here on unacms.com: one for a large screen and another one for a small screen. I didn't mean the Apple and Android devices icon found in Designer > icons which are something else.

    @LeonidS Please could you jump in and help? Thanks in advance.

    • Your question was how to upload these two logo versions:"How to upload two separate Logos for large and small screens?"

      1. In the Designer app, you can upload both a logo and an icon using the following pages: studio/designer.php?page=icon and studio/designer.php?page=logo.
      2. In Artificer, you can upload different logo versions on this page: studio/design.php?name=bx_artificer&page=logo. These images will override the default UNA logo set in the Designer app. Each template may work differently.
      3. In theory, you can place these images directly in the template files without uploading them through the application. You can manually add them via FTP or SSH by replacing the original template images with new ones of the same size and name. The problem is that the original file is in .svg format, so you’ll need to create another .svg file of the same size to overwrite the designer’s original. "template/images/icons/una.svg"

      You don’t set two logos directly in UNA Studio. The browser decides which logo to display based on CSS rules and screen size.

      This is done using something called CSS media queries.

      Basically, you add both logo images in your template or page layout, and then use CSS to show or hide them depending on the screen width.

      Example:

      "logo-desktop.png" class="logo-desktop">
"logo-mobile.png" class="logo-mobile">

      And in your CSS:

      /* By default, hide the mobile logo */
.logo-mobile {
  display: none;
}

/* When the screen width is 768px or less, show the mobile logo and hide the desktop logo */
@media (max-width: 768px) {
  .logo-desktop {
    display: none;
  }
  .logo-mobile {
    display: block;
  }
}

      The browser will then automatically display the right logo based on the screen size.

      There’s no setting in UNA Studio for this it’s done in CSS.

      /* Default style for desktop */
.logo-desktop {
 display: block;
}
.logo-mobile {
 display: none;
}

/* Medium devices (tablets) */
@media (max-width: 1024px) {
 .logo-desktop {
  width: 150px;
 }
}

/* Small devices (phones) */
@media (max-width: 768px) {
 .logo-desktop {
  display: none;
 }
 .logo-mobile {
  display: block;
 }
}

      You can create as many rules as you want, but usually a few breakpoints are predefined in the template. If you want, you can customize a template however you like. You can also clone an existing template as a base and then modify it according to your needs.

      These media query rules are already defined in each template by the designer. If you want, you can change or customize them however you like, but to do that you need more advanced skills.. You will also need to update this template with each core version update to ensure it continues to work properly.

      If you plan to clone a template you should rename it so that when the original template updates your changes will not be deleted. you have to start from here:

      Can you rephrase your question so it’s clearer what your goal is?