12 Replies Latest reply: Aug 1, 2012 8:47 PM by patfmnd RSS

    Custom Logo/Banner sizing

    patfmnd
      Hi,
      In Apex 4.0 have successfully added a custom logo/banner image to page 0 with display point 'After Header' and using 'No Template' which then shows up on each of my application pages, however there are a couple tweeks I would like to make:

      1.) What would I have to do to make the Logo 'stretch' to the full width of the page? I was given the following guidelines but not sure how to add this html for Apex 4 in the region definition where I placed the image. I get the main 'custom_logo.png' to show, but not sure how to 'fill' the rest of the width with the 'blank-banner.png'
      INSTRUCTIONS GIVEN to me--
      A. Add this to the <body> tag to eliminate margins and display a filler image across the top:
      style="margin:0px 0px 0px 0px; background-image:url('blank-banner.png'); background-repeat:repeat-x"
      If the tag had no parameters to begin with, it will now look like this:
      <body style="margin:0px 0px 0px 0px; background-image:url('blank-banner.png'); background-repeat:repeat-x">

      B. Add this right after the <body> tag to display a fixed-width banner:
      <div style="margin:auto; width:900px">
      <img src="custom_logo.png" width="900" height="150" alt="XXXXXXXXXX" />
      </div>

      2.) The above Banner would cover over the 'logout' area. How do I prevent that?

      Any help would be appreciated.

      Pat
        • 1. Re: Custom Logo/Banner sizing
          Joe Upshaw
          Pat,

          We have a custom log and still have the logout URL visible as well.

          To do this, we change the BODY setion of the Page Template. If you simply set the width of the original logo, it will automatically contract and shrink as needed. If you want it to maintain at least a certain size, set the min-width as well.

          In the example below, I simply added an additional DIV section within the (built-in) HGROUP tag to contain my header images. (In my case, I use two images but, the principle is the same)
          <header id="uHeader">
            #REGION_POSITION_07#
            <hgroup>
               <div id="jive-global-header"> 
                    <div id="jive-global-header-texture" class="minwidth">  
                         <div style="background: none repeat scroll 0% 0% rgb(20, 39, 69); width: 100%; height: 90px; float: left; min-width: 970px;">   
                              <img style="float:left;" src="/i/ice/images/header_left.jpg" alt="" class="ie6png" display="inline-block" height="90px">   
                              <img style="float:right;" src="/i/ice/images/header_right.jpg" alt="" class="ie6png ice-fr" display="inline-block" height="90px">   
                         </div> 
                    </div>
               </div>
               <div class="uAPEXNavBar">
                    <ul>
                       #NAVIGATION_BAR#
                    </ul>
                 </div>
          </hgroup>
          ...
          -Joe
          • 2. Re: Custom Logo/Banner sizing
            patfmnd
            Joe,
            Thanks for the quick reply. Pardon my ignorance, but should I NOT define a region on page 0, but instead just make the change to the Page Template as you describe? And which Page Template do I use? When I look at the templates, I am not exactly sure which I should be using--the one checked as default? Do I just replace the body of that default template with something similar to your example?

            Thanks,
            Pat
            • 3. Re: Custom Logo/Banner sizing
              Joe Upshaw
              Assuming this is a custom logo (like for your company), then, yes, the best practice will be to update the template rather than putting the code in Page 0.
              • 4. Re: Custom Logo/Banner sizing
                Joe Upshaw
                Look to see what template you are using for your pages. For example, assume you are using No Tabs Right Side Bar. Then, in the templates, you will edit the same one(s).

                -Joe
                • 5. Re: Custom Logo/Banner sizing
                  patfmnd
                  Thanks, again,
                  I am making some progress, but logo has not sized correctly for some reason. I will play around with it. Looks like it does not show on the login page, so I think I have to apply the change to the login template as well.

                  Pat
                  • 6. Re: Custom Logo/Banner sizing
                    Joe Upshaw
                    Oh, yes. The Login Page for sure is using a different template than your normal page (Most probably the "Login" template).

                    -Joe
                    • 7. Re: Custom Logo/Banner sizing
                      patfmnd
                      Joe,
                      Hate to monopolize your attention on this, but wonder if you could help me figure out where I should place the html for my logo/banner. I need the logo/banner to go across entire page and allow 'login link' to be above or below so it is not hidden by logo/banner.

                      On the page template being used I have in body:
                      <div id="header">
                        <div id="logo"><a href="#HOME_LINK#">#LOGO##REGION_POSITION_06#</a></div>
                        #REGION_POSITION_07#
                        <div id="navbar">
                          #NAVIGATION_BAR#
                          <div class="app-user">#WELCOME_USER#</div>
                          #REGION_POSITION_08#
                        </div>
                      </div>
                      <div id="tabs">
                        <div class="frame">
                          <div class="bg">
                            <div class="tab-holder">
                              #TAB_CELLS#
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
                      <div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
                      <div id="body">
                        <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
                          <tbody>
                            <tr>
                              <td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td>
                              <td class="tbl-sidebar">#REGION_POSITION_03#</td>     
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      Thanks,
                      Pat

                      Edited by: patfmnd on Aug 1, 2012 6:43 PM

                      Edited by: patfmnd on Aug 1, 2012 6:43 PM
                      • 8. Re: Custom Logo/Banner sizing
                        Joe Upshaw
                        Pat,

                        Are you sure you want it above or below (wastes a lot of screen real estate). In our case, the logo appears behind the Logout link. I think that's what you'd really want. If you try it in the manner of the sample I provided, do you not see the logout link? Is it possible that it is actually present but, the text is the same color as the logo background? Darn, I wish we could upload screen shots to this forum.

                        -Joe
                        • 9. Re: Custom Logo/Banner sizing
                          Joe Upshaw
                          You know the login page doesn't have any Logout link too, right?
                          • 10. Re: Custom Logo/Banner sizing
                            patfmnd
                            Joe,
                            I ended up going back to using Page 0 with an added region 'after header' and defined the Region Source with divs and adjusted the div style top margin to be below the 'welcome, logout' area.

                            Now the same banner/logo appears on all pages including the logout and login pages and seems to satisfy the department. I actually decided not to change the template since this application and logo/banner is specific to that department.

                            Thanks for your help!!

                            Pat
                            • 11. Re: Custom Logo/Banner sizing
                              Joe Upshaw
                              Great! Glad we got it working although I'm sorry it's not exactly like you wanted.

                              If you're satisfied, would you mind marking this as thread as "Correct"?

                              Thanks,

                              -Joe
                              • 12. Re: Custom Logo/Banner sizing
                                patfmnd
                                Hi, Joe,
                                I marked your response as Correct.

                                Pat