Optimizing Logo Display in eDirectory

Introduction

eDirectory 13.1 introduced enhanced flexibility in logo display by updating the recommended logo dimensions. This article details the new logo sizing guidelines and how they affect various header widgets.

Updated Logo Dimensions

Previous eDirectory versions adhered to a 200px x 80px logo format. In version 13.1+, the width has been increased to 250px, and two height options are now supported: 100px and 80px.

Logo Height Behavior:

80px or Less:
- If a logo is uploaded with a height of 80px or less, eDirectory maintains the established standard.
- A 12px margin, indicated in purple, will be applied to ensure consistent spacing.
- Logos with a height less than 80px will align to the left within the available space.
Greater Than 80px:
- If a logo exceeds 80px in height, the logo format will automatically adjust to 250px x 100px.
- A 12px margin will still be applied.

Affected Header Widgets:

Header Widget

Navigation Left Widget

These widgets will adhere to the 250px width and height-dependent behavior described above.

Header with Contact Phone and Navigation with Centered Logo Widgets:

These widgets follow similar rules but with a larger application area.

Maximum Width: The logo width can extend up to 750px due to the increased space.
Margin: A 16px margin is recommended to balance the logo within the larger area.

Height Behavior (Contact Phone and Centered Logo):

80px or Less: The same rules from the first two widgets apply.
Greater than 80px: If the logo is more than 80px in height, the logo format will be changed to 350px x 100px, respecting the 16px margin.

Key Recommendations:

For "Header" and "Navigation Left" widgets, prepare logos with a maximum width of 250px.
For "Header with Contact Phone" and "Navigation with Centered Logo" widgets, prepare logos with a maximum width of 750px.
Maintain the recommended 12px or 16px margins to ensure optimal visual balance.

Conclusion

eDirectory's updated logo dimensions offer greater flexibility and improved visual consistency across various header widgets. By adhering to the recommended dimensions and margins, site managers can ensure their logos are displayed optimally, enhancing their website's professional appearance.