How to add space above website?

  • Resolved icedub

    (@icedub)


    13 years, 9 months ago

    Site: https://cloud-coach.net
    Theme: Alltuts
    Alltuts Documentation: https://wordpress.site5.net/alltuts/doc/

    Hi All, I am attempting to add some space to the top of my website, and I’m a bit of a CSS noob, so what should be seemingly simple has been difficult for me. Let me back up. I’ve installed The Hello Bar on my site, which is this cool little bar that slides in from the top with a message and link of your choosing. There are two options for how it’s displayed: It can “slide” your page content down, or it can slide on top of your page content.

    Unfortunately, when I have it set to “slide” my page content down, it pushes down the content but not the background! This discussion on hellobar’s getsatisfaction page describes the solution:

    If you wrap your entire website’s content in a <DIV> element and apply the background to the <DIV> element instead of the <BODY>, you should be able to achieve the result you are asking for.

    That is what I need some assistance doing! I’m not sure where I make these changes.. stylesheet.css? my page template?

    Ideally, I’d like to have the “slide” effect work. However, if it messes things up, I have also played with having the bar “overlap” on the site. If you head over to the site now, that’s how I have it set up. Unfortunately, it covers up the site navigation! So, my second option for a fix would be to add some space at the top of the site. Is there an easy way to nudge the whole page down?

Viewing 11 replies - 1 through 11 (of 11 total)

  • In your stylesheet (line 93?) should be a line that says something to the affect of:

    #wrapper {
width: 960px;
margin: 0 auto;
}

    What you’ll want to do is move the background declaration in the body style to wrapper so it should look as follows:

    #wrapper {
width: 960px;
margin: 0 auto;
background: #F0F0F0 url(images/bk_body.png) repeat-x;
}
    Thread Starter icedub

    (@icedub)

    Removing the background declaration from the body style to the wrapper left some unfortunate white-space on either side of the body: image

    I tried adding the background declaration to both the body style and the wrapper, which seemed OK at first. However, the Hello bar still only seems to slide center of the page down, leaving the margins in tact: image

    Maybe we could try for option 2- how would i add 25px of black space above the whole website?

    Thread Starter icedub

    (@icedub)

    Also- FYI the “slide” feature works properly with the background declaration removed from the body and added to the wrapper. It’s just messing up the look of the site with all that white space on either side of the body.

    Ah. Sorry about that, didn’t notice the background was full width.

    Create a new div and set the background there. The <div> should go immediately before the wrapper div and close immediately after the wrapper div closes.

    #newdiv {
     width:100%;
     background: #F0F0F0 url(images/bk_body.png) repeat-x;
}

    You can then add space above everything else by creating a div in between the start of the newdiv and start of the wrapper. You’ll have to specify the height of the div and you should be good. Alternatively, you could use margins if the background color is what you want.

    Thread Starter icedub

    (@icedub)

    I followed part one and added the code you showed me before the wrapper div. My layout structure section of style.css looks like this:

    #newdiv {
     width:100%;
     background: #F0F0F0 url(images/bk_body.png) repeat-x;

}

#wrapper {
	width:960px;
	margin:0 auto;

}

    However, I’m not seeing where I add the new <div> to make the background show up. Would that be somewhere in index.php? (Sorry for my ignorance here, you’ve been really helpful and I’m almost there ?? )

    My guess would be header.php unfortunately every theme is different and I can’t view your PHP code.

    Thread Starter icedub

    (@icedub)

    Well, I found it in header.php and added 

    <!-- Begin #wrapper -->
<div id="newdiv">
<div id="wrapper">
	<!-- Begin #header -->
	<div id="header">

    The odd part is, I don’t see where to close it. There’s no <!--End #wrapper --> in the header.php file. The bottom of the header.php is:

    <!-- End #header -->

	<!-- Begin #content -->
	<div id="content" class="clearfix">

    Fortunately, just adding the above made the site behave like I wanted- making it so the whole page slides down when the hello bar comes in. However, I don’t want to leave any loose ends. Where would I close this off?

    <!-- End #wrapper --> is most likely located in the footer.

    Checking out the Anatomy of a Theme section of the codex will help you gain an understanding of how all these files come together.

    Thread Starter icedub

    (@icedub)

    Oh wait.. also just noticed that the sides of the page are cut off. Definitely need to close that #newDiv somehow..

    Thread Starter icedub

    (@icedub)

    Again, thank you so much for your help. If you’d like a beta invite to hellobar, I’d be happy to share one. Also, the theme anatomy is helpful, and I also think I need to brush up on CSS so it doesn’t all feel so confusing!

    I haven’t been successful at getting the page to slide down properly, and if it would be easier would just like to try adding the space at the top. You mentioned using margins if the background color was what I want, and it is (black). I’d just like some additional black at the top of the screen. Where do I add the margins?

    Thread Starter icedub

    (@icedub)

    I had a friend help me out.. He did what I was unable to do.. In his own words:

    Ok… so I placed: <div id=”bodybg”> in the header.php file just below <body>
    And: </div> in the footer.php just above <div id=”footer”>
    And: Added the new div to the CSS file… then pulled the background color and image code from the body CSS code and placed it in the new div CSS.

    Basically… the background was displayed using the body tag and is now displayed using a new DIV element tag just below the body. This allows the HelloBar to properly slide-down everything BELOW the body of the page.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to add space above website?’ is closed to new replies.

Tags