Clarity

  • 1.  V13 UI Themes - Main Menu Bar location

    Posted May 14, 2012 12:45 PM
    Hi all.
    I'm playing around with UI Themes in V13. The main page header logo in the OOTB themes is 22 pixels high. Our logo doesn't look good (IMHO) under 50 pixels high. When I put the 50 pixel high logo into the CSS as a base64 image, the main menu bar doesn't automagically shift down to allow for the taller logo (not relative - appears absolute) - it just sits on top of it clipping off the bottom of the 50 pixel high logo. Has anyone observed this? If so, what have you done? Stick with any logo you like as long as it's 22 pixels high? Any hidden/underdocumented main menu bar position CSS tags that you've found that work?

    Thanks!


  • 2.  RE: V13 UI Themes - Main Menu Bar location
    Best Answer

    Posted May 14, 2012 01:08 PM
    Muhahahahahahahaaaa.
    /* overrides the height on the app header */
    .ppm_header {
    height: 60px
    }


  • 3.  RE: V13 UI Themes - Main Menu Bar location

     
    Posted May 14, 2012 01:53 PM
    Thanks for letting everyone know the resolution Rob!


  • 4.  RE: V13 UI Themes - Main Menu Bar location

    Posted May 14, 2012 05:20 PM
    A little more information when working with Base64 encoded images in themes...
    IE 8 limits data URIs to a maximum length of 32KBs, resulting in images that will show in both Firefox and Chrome but mysteriously disappear in IE8. Make sure you have your source files tight and efficient (a best practice anyways, eh?). I used PNGs and JPGs at first, then switched to GIFs when I bumped my head against this limitation.
    Here's a cool little Firefox encoder plugin to help you along your way. It shows the output size so you can easily judge what should be 'IE 8 safe'.