https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/970/top-headeren-USTelligent Community 12https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/970/top-headerTue, 17 Sep 2024 14:21:21 GMT5c521d64-519d-47a6-9065-134618b211bf:c5de74bc-13fc-4192-bcbf-790d15833f65Rafael Fernandeshttps://sugarclub.sugarai.com/dev-club/w/dev-tutorials/970/top-header#commentsCurrent Revision posted to Dev Tutorials by Rafael Fernandes on 9/17/2024 2:21:21 PM<br /> <p><span class="SCXW205252710 BCX0"><span class="WACImageContainer NoPadding DragDrop BlobObject SCXW205252710 BCX0"><img style="max-height:31px;max-width:596px;" height="31" src="/resized-image/__size/1192x62/__key/communityserver-wikis-components-files/00-00-00-00-14/pastedimage1726582725387v1.png" width="596" alt=" " /><span class="WACImageBorder SCXW205252710 BCX0"></span></span></span><span class="TextRun EmptyTextRun SCXW205252710 BCX0" lang="EN-US" data-contrast="auto"></span></p> <ul> <li>The height of the top header has been increased from <strong>40px</strong> to <span style="text-decoration:underline;"><strong>56px</strong></span></li> <li>The background of the main top header is now transparent, allowing the main Sugar background gradient to show through</li> <li>Improvements have been made to the alignments of core header elements (company logo, global search, notifications, and profile dropdown buttons) to center them vertically within the header and space them apart properly</li> <li>The sizing of the company logo field has been adjusted slightly to respect the <strong>200px x 28px</strong> maximum. <ul> <li>If either of those dimensions are exceeded, the image will scale proportionately to fit both dimensions.</li> <li>In addition, due to the new blue background gradient, the logo shown in the header <span style="text-decoration:underline;">will always make use of the dark mode version</span> of the company logo (as provided in Admin &gt; System Settings &gt; Select Dark Mode Logo), to improve visibility</li> </ul> </li> <li>&ldquo;How does this affect my customizations?&rdquo; <ul> <li>We recommend checking the following for any custom elements you have added to the top header:</li> <li>Check that the custom elements still align well with the larger size of the top header and its core elements. If not, you may need to adjust the margins, paddings, etc. of your custom elements</li> <li>Check that the colors of your custom elements still provide good visibility against the main background gradient and adjust them as needed</li> <li>Double-check your company logos (if you have provided custom ones) to ensure that their sizing and color still look correct in the top header</li> <li>Check your company logo and make sure you use dark mode version</li> </ul> </li> </ul><div style="clear:both;"></div> https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/970/top-header/revision/1Mon, 16 Sep 2024 18:00:08 GMT5c521d64-519d-47a6-9065-134618b211bf:c5de74bc-13fc-4192-bcbf-790d15833f65Rafael Fernandeshttps://sugarclub.sugarai.com/dev-club/w/dev-tutorials/970/top-header#commentsRevision 1 posted to Dev Tutorials by Rafael Fernandes on 9/16/2024 6:00:08 PM<br /> <p>Top Header</p><div style="clear:both;"></div>