Make header appear on homepage only – Booklite

touchstone91 · Member · May 20, 2014 at 1:38 pm
Copy link

Add topic to favorites
I’m completely new to CSS and I’d really appreciate your help. The browser I’m using is Firefox and so far all I understand is this:

1. I right click on the feature I want to change and click ‘inspect element’.
2. A box appears at the base of the page with code (is this the ‘style CSS file’?)
3. I copy the relevant code into the Custom CSS box and then alter it to make the changes appear.

Is that right? And will the changes appear as a preview automatically? If I have to click ‘save’ to see the changes, will I be able to undo them again afterwards?

Basically I just want the large header design to be on the front page only. This is the most important thing and isn’t something I can alter in the header settings.

If I get the hang of CSS I’d also like to change the way the main body of text scrolls over the header image. I’d rather everything stayed fixed and scrolled up like a normal webpage.

Any help would be brilliant :)

Thanks,

Ruth

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 20, 2014 at 5:13 pm
Copy link
Hi Ruth, yes, you have 1 & 2 correct, and you will be able to see the changes you make in the preview in realtime, no need to save until you are happy with it. Anything you put into the CSS, can be taken back out and then a save will take that change away from your live site.

You can exclude the header image from selected pages and page types (archive, category, tags) by including some of the body classes (in the opening body selector in the HTML). It the case of the following CSS, I have excluded the header image from static pages (.page #masthead), single post pages (.single #masthead) and archive type pages such as archive, category and tags pages (.archive #masthead).
```
.page #masthead, .single #masthead, .archive #masthead {
    background: none;
    height: 0;
}
```
thesacredpath · Member · May 20, 2014 at 5:23 pm
Copy link
Making the image scroll when you scroll the page is quite simple. They have use a “fixed” background attachment attribute in the #masthead background declaration. To reverse that it is just a matter of creating a CSS rule to override the fixed attachment. The following targets your home page since that is the only page you said you wanted the image on.
```
.home #masthead {
background-attachment: scroll;
}
```
touchstone91 · Member · May 21, 2014 at 9:15 am
Copy link
Thank you so much :) I really appreciate your help!
I’m at work at the moment but I’ll let you know how I get on when I’ve a moment to play around with it.

Ruth
thesacredpath · Member · May 21, 2014 at 6:23 pm
Copy link
Ruth, you are welcome, and do let us know if you have any problems with it.
touchstone91 · Member · May 23, 2014 at 7:03 am
Copy link
Thank you thesacredpath :) The header has disappeared from all but my home page. Unfortunately the header still wont scroll. I just inspected the header element and pasted it into the CSS box after the first code – was that right?

Ruth
thesacredpath · Member · May 23, 2014 at 8:52 pm
Copy link
Ruth, add the following. I see we have to use “blog” instead of home on the selector.
```
.blog #masthead {
    background-attachment: scroll !important;
}
```
touchstone91 · Member · May 24, 2014 at 7:32 am
Copy link
Thanks :) That worked. It has cut a little bit off the bottom of my header image but I can sort that by adjusting the image itself.

Ruth
touchstone91 · Member · May 24, 2014 at 7:42 am
Copy link
Hi, I’ve just realised that actually it hasn’t cut the bottom of the image but moved the whole header image down about a centimeter. So you can see a white gap at the top of the menu bar as well. This doesn’t appear in my customisation screen, only when I view the blog.

I don’t think I can fix this by altering the image, because booklite still crops header images to 1440×500 even if I add a bit to the top.

Ruth
touchstone91 · Member · May 26, 2014 at 6:09 am
Copy link
Sorry, I’ve just realised this only happens when I’m signed in. Very strange! Thank you again for your help thesacredpath :) The blog is now exactly as I wanted it.

Ruth

No items found.