3 Replies Latest reply: Feb 20, 2013 3:21 AM by Martijnke RSS

    decreasing height of bar on top of page

    Martijnke
      Hi all,


      I am having trouble getting some things done by changing the html/css
      we use apex 4.1 and sapphire theme 17

      all I want to do is to decrease the size of the bar on top of the page and get rid of the ugly border at the bottom of it
      this is code you find on page 0 , region  
      <STYLE type="text/css">
      #topbar {
          border-bottom: 0px;
      }
      
      #header {
          height: 15px;
      }
      </STYLE>
      getting rid of the bottom border ok
      however as soon as I make #header smaller than 50px, the whiole layout gets messed up
      also when I make the DIV "tabs" hidden the whole page content disappears, why ?

      I really like to know why as I am planning on creating custom templates but only after learning some more about div/css stuff


      please have a look here :
      application Error flows, page 1 (and 0)

      workspace : xonixrs
      user : demo
      password : demo



      Kr
      Martin



      PS : yes I know I should copy a template and change that instead of using an 'invisible' region on page 0, but that's not the issue
        • 1. Re: decreasing height of bar on top of page
          fac586
          Martijnke wrote:
          Hi all,

          I am having trouble getting some things done by changing the html/css
          we use apex 4.1 and sapphire theme 17

          all I want to do is to decrease the size of the bar on top of the page and get rid of the ugly border at the bottom of it
          this is code you find on page 0 , region  
          <STYLE type="text/css">
          #topbar {
          border-bottom: 0px;
          }
          
          #header {
          height: 15px;
          }
          </STYLE>
          getting rid of the bottom border ok
          however as soon as I make #header smaller than 50px, the whiole layout gets messed up
          also when I make the DIV "tabs" hidden the whole page content disappears, why ?
          How do you make it hidden?
          • 2. Re: decreasing height of bar on top of page
            fac586
            Martijnke wrote:
            Hi all,

            I am having trouble getting some things done by changing the html/css
            we use apex 4.1 and sapphire theme 17

            all I want to do is to decrease the size of the bar on top of the page and get rid of the ugly border at the bottom of it
            this is code you find on page 0 , region  
            <STYLE type="text/css">
            #topbar {
            border-bottom: 0px;
            }
            
            #header {
            height: 15px;
            }
            </STYLE>
            getting rid of the bottom border ok
            however as soon as I make #header smaller than 50px, the whiole layout gets messed up
            The layout is behaving exactly as requested. What you're seeing is not the "layout getting messed up", it's the background image with a fixed-size "header" applied to the page <tt>body</tt>, visible through transparent elements that are now in positions not anticipated by the designer of the theme.

            You need to shift the page background up with respect to the viewport to allow for the 35px difference in <tt>header</tt> height between the theme's 50px and your 15px:
            body {
              background-position: 50% -35px;
            }
            Note that this introduces a subtle change in the header as the gradient fill now appears to start with a darker shade.
            • 3. Re: decreasing height of bar on top of page
              Martijnke
              Hi fac586,

              thx a lot for clarifying this, now I understand

              PS : I made the region   on page 0 hidden by putting style="display:none;" in region attributes



              Kr
              Martin