This discussion is archived
3 Replies Latest reply: Feb 20, 2013 1:21 AM by Martijnke RSS

decreasing height of bar on top of page

Martijnke Explorer
Currently Being Moderated
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 Guru
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Explorer
    Currently Being Moderated
    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

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points