Site banner image and icons sizes

Site banner image and icons size nothing explains the sizes needed for banners and the icons. There is cropping but we want the proper sizes so the arts made for these areas will not be resized and the image gets wrecked thank you.

  • View
    778
  • More
Replies (9)

    • I think I saw those sizes in the css file which is associated with the particular theme one is using. Which theme are you using?

      I also have a related question on this subject, thank you. Is UNA a high resolution site other than the svg icons? Retina ready? If not, how could it made to be, if possible and practical? 

      • E

        I am using protean theme at the moment, Just swapping out the page picture banners and the default icons as well.  

        • That is a neat looking theme. 

          Someone more knowlegeable than I should explain how your adjustment can reliably be made. I might tell you wrong as things must fit on the desktop, tablet, and all kinds of phones - apple and android. I have no way of testing such a range of devices.

          Good luck!

          • I would strongly recommend using SVGs for icons. While UNA will handle @2 resolutions, using bitmaps for icons complicates everything. For example, one icon source file may be used in certain menus display modes at size of, say, 1rem (or about 16px), while in others it may be stretched to 3rem or more (about 50px). SVGs keep you covered and would be much more future-proof than bitmaps. Note, UNA.io is using SVGs for the menus.    

            • E

              And what would be the image size limits for the images in this banner area?

              • We call this area - page covers, I would recommend to use images which are at least 200px in width and 500px in height for this area.

                For menu icons it's better to use SVG icons, if it isn't possible then use square images which are at least 128-256px in width/height.

                • Hi Alex, I am trying to understand how an image of 200x500px will look on the cover. Every image I use, it gets distorted. I thought it should be the other way around 500x200 instead.. Using an image with 200x500px will look distorted unless we use a PLAIN image with only a PATTERN similar to UNA cover bg.  Please see attached sample Banner I'd like to use, it would be impossible to use images like that unless I use a bg with just a pattern.. If anyone is using a cover bg with actual images, I'd like to know how they did that.. Thanks.

                  Morocco-Cover2.png 587.9 KB

                  • We call this area - page covers, I would recommend to use images which are at least 200px in width and 500px in height for this area.

                    For menu icons it's better to use SVG icons, if it isn't possible then use square images which are at least 128-256px in width/height.

                    One issue I found is when you have the site width adjusted in styles that 200 x 500 figure goes out the window. I have a site that utilizes 100% width. I

                    • AJ Fariss to make cover always visible in full you can add the following CSS in Studio > Designer > Injection > HEAD:

                      <style>
  html .bx-cover-wrapper { background-size: contain; }
</style>

                      Login or Join to comment.