Home Forums Weaver Xtreme Theme A parallax header for a single (home) page?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #64526
    ldekay
    Participant

    I set up a parallax header using multiple random images which looks great on our entry page (http://newcgaca.gorgeculture.org/) but we need a much smaller header for the rest of the pages on the site.

    How can I set up a multiple random image parallax header for a single page?

    #64529
    scrambler
    Moderator

    That may become complicated.

    Changing the height of the parallax area for the Home page is easy, right now you have the minimum height set to 450px globally, set it to the smaller size globally there to match what you want on all non home pages (like 150px), then you can increase the height for the home page with the rule below

    .home #header {min-height:450px;}

    If you want multiple random images on the home page, but a different image on the other pages, just add the image you want as a featured image in these other pages, and then set the Page option > Layout > Featured Image to “header Image replacement”

    Now the caveat is that Automatic pages like Archive pages will still be using the same images as the home page, but in the reduced height.

    The other way to set images would be to set a single header image for all pages in the header image setting. Then use the featured image method to replace it on the home page, but that wont give you multiple random images on the home page

    #64534
    ldekay
    Participant

    Hmm, I reset the default headers to 200 px height and changed the header images to smaller banners. I had to take off the expand header to full width setting because those banners are narrower (for now)

    Then for the homepage I set Layout>Featured Image: Header Image Replacement, added one of the previous header images as teh FI, and added #header {min-height:450px;} to Xtreme Plus>Per Page Style.

    The style change expanded the header area on the homepage, but the FI isn’t replacing the header image. It still shows the banner header but expanded to 450 high (greatly distorting it). I’ve updated the page again and cleared cache, but no change.

    Is there a setting somewhere else I might have triggered that is overriding the FI replacement?

    #64536
    scrambler
    Moderator

    The header image replacement works fine for me and I cant think of what could interfere.

    Try creating a new test page based on the default template.

    Add a featured image in the featured image section at the bottom of the right sidebar in the page editing page, and see if the image shows up in there. Update and preview the page see if the featured image shows in the page content.

    Then in the page editing page Xtreme options for this page > Layout tab > Featured image drop down list, select header iomage replacement. Update and see if the image now replace the header image

    #64537
    scrambler
    Moderator

    One thing is I did not try with random headers, there is a possibility the replacement does not fully work with random header.

    Try removing all the header images and keeping only one and see if the replacement works then

    #64538
    ldekay
    Participant

    I found the problem. I had Content Area>Featured Image-Pages set to Hide on All Devices because I didn’t want it inserted with the title or content. With the Layout>Featured Image: Header Image Replacement set it only shows up as the replacement header, not with the Content.

    I think I can live with not assigning a FI except when I want to replace the header.

    #64539
    ldekay
    Participant

    So now I don’t need the default header to be parallax. Is there a way to make just the replacement header on the homepage (or any other specific page) be parallax? It looks like something can be done on the Xtreme Plus tab but I (obviously) don’t know what coding to use there.

    #64540
    scrambler
    Moderator

    Now you have me confused.

    “So now I don’t need the default header to be parallax.”

    You don’t need or your don’t want??

    Because to do what you wanted with the Header, you actually need to…

    The “Header Image rendering” option that lets you choose between a regular header image and a parallax background image is not a per page option.

    So you cannot have a different option on different pages.

    If you only want a parallax at the top of the home page, then you original solution with the CSS I gave you is the way to get the effect you want on the home page.
    If you do use the header image on the other pages, you will have to use the “Hide standard header image” on the home page so it only includes your parallax image at the top of the content with a collapsed header (using the CSS)

    #64551
    Weaver
    Keymaster

    There is an alternate way to do this for any page other than archive-like pages (blog, search, categories, etc.):

    If you can create a page (or post) that functions like you want (titles, links, images, parallax or not) using standard HTML or the Block Editor, then you can totally replace the header (with or without the menu) with the contents of that page. This also works very well if you used a page designer to build that one-time header (or even footer). There is an option to replace the standard theme header with any page or post by ID.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.