Landing page, Baskerville theme

rachelhewitt17 · Member · Dec 12, 2015 at 4:20 pm
Copy link

Add topic to favorites
Hi all!

We’re trying to make our static home page a ‘landing page’. But we only want a picture and the website title (centred) and not the black strip and picture that comes with the theme. However, we only want to do this for the first page only.

Anyone know how to do this?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 14, 2015 at 5:39 pm
Copy link
Hi, currently you have your main page set to show your blog posts. We can target the home page (static front page) with CSS styling by using one of the unique CSS classes defined in the opening HTML body tag.

When you say, “black strip” are you referring to the navigation menu below the header image?
rachelhewitt17 · Member · Dec 14, 2015 at 6:52 pm
Copy link
I was referring to the whole header and image. To be replaced with a title that was centrered, with a landing page image and a ‘enter here’ button.

Thanks for the reply!
thesacredpath · Member · Dec 14, 2015 at 7:21 pm
Copy link
Thanks for the clarification. We should be able to accomplish that with CSS. Do you by chance have your static front page created yet? If not, can you create one and you can leave it as a draft. I can see draft pages.

On the image you want on that page, are you wanting it to cover the entire screen/window or just the content area?

Just to get things rolling, here would be the code to hide the navigation and the header image/site title on a static home page in Baskerville.
```
.home .header, .home .navigation {
    display: none;
}
```
rachelhewitt17 · Member · Dec 14, 2015 at 7:47 pm
Copy link
Hiya! Yeah, I do, it’s the one that says “beyond epilepsy” and has a single image from the wellcome collection

We were hoping just to cover the content area

Thanks
thesacredpath · Member · Dec 14, 2015 at 9:16 pm
Copy link
I’m seeing a slideshow on one of the beyond epilepsy pages and two images on the other one, one being the featured image and the other being the the image inserted into the page content area.

Add the following CSS. I’ve used the page id CSS class instead of “home” as it was easier for me to work with given the page is not yet set as your static page.
```
.page-id-117 .featured-media {
    display: none;
}
.page-id-117 .post-content {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
.page-id-117 .post-content img {
    max-width: 1400px;
    width: 100%;
}
.page-id-117 .post-content .wp-caption {
    max-width: 1400px;
    width: 100% !important;
}
.page-id-117 .post .post-title {
    text-align: center;
}
.page-id-117 .post .post-header {
    padding: 8% 10%;
}
```
The fifth rule above will allow you to adjust the top and bottom padding on the page title (the white area). The top/bottom padding is the 8% number. I’ve also centered that title.

Once you have your button text link inserted into the page content area on that page, let me know and I’ll work out making it into a button and moving it up and over the image for you. Also let me know where you want that button (centered on the image, bottom of image, etc.).

No items found.