[Resolved] Rearrange elements on paged pages

Home Forums Support [Resolved] Rearrange elements on paged pages

Home Forums Support Rearrange elements on paged pages

Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts
  • #2351156
    Fernando
    Customer Support

    The screenshot you shared here says Page – 1: https://generatepress.com/forums/topic/rearrange-elements-on-paged-pages/#post-2351142

    To clarify, is this screenshot paged or not?

    #2351157
    Fergal

    I see. The first one is the job-opening archive. Archives are not paged right?

    The second screenshot is .com/page/3

    I hope this helps and please let me know your thoughts.

    Thanks,
    Fergal

    #2351167
    Fernando
    Customer Support

    I see. Thank you for clarifying.

    Can you try adding this:

    body.archive main#main {
        display: flex;
        flex-direction: column;
    }
    
    body.archive main#main .gb-container.my_newsletter_container {
        order: -2
    }
    
    body.archive main#main header.page-header {
        order: -1
    }
    #2351176
    Fergal

    Almost there thanks Fernando! Job-opening archive and job-opening paged are perfect.

    Just need to rearrange the Featured Jobs section on .com/page/2.

    Can we do that with CSS or should I now do that with priority on the hook element?

    Thanks

    #2351177
    Fernando
    Customer Support

    We’ll need CSS.

    Can you share all the CSS you have now, and how you want it to look again on .com/page/2?

    #2351178
    Fergal

    Sounds good. Please see below:

    
    /* rearrange job number, featured jobs, and newsletter */
    body.blog[class^='paged'] main#main, body[class*=' paged'] main#main{
        display: flex;
        flex-direction: column;
    }
    body.blog[class*=' paged'] .my_jobsnumber_container,body.blog[class*=' paged'] .my_newsletter_container, body.blog[class*=' paged'] .site-main>article, body.blog[class*=' paged'] nav#nav-below{
        order: -1;
    }
    body.blog[class*=' paged'] .my_featuredjobs_container {
        order: 0;
    }
    
    body.archive main#main {
        display: flex;
        flex-direction: column;
    }
    
    body.archive main#main .gb-container.my_newsletter_container {
        order: -2
    }
    
    body.archive main#main header.page-header {
        order: -1
    }
    
    #2351183
    Fernando
    Customer Support

    Can you try removing this first?:

    body.blog[class^='paged'] main#main, body[class*=' paged'] main#main{
        display: flex;
        flex-direction: column;
    }
    body.blog[class*=' paged'] .my_jobsnumber_container,body.blog[class*=' paged'] .my_newsletter_container, body.blog[class*=' paged'] .site-main>article, body.blog[class*=' paged'] nav#nav-below{
        order: -1;
    }
    body.blog[class*=' paged'] .my_featuredjobs_container {
        order: 0;
    }
    #2351184
    Fergal

    Ok great I did that, thanks. Getting closer.

    View post on imgur.com

    Now just need to please shift featured jobs below All Jobs

    #2351186
    Fernando
    Customer Support

    Can you try replacing all the code we have for this with:

    body:is(.archive, [class*=' paged']) main#main {
        display: flex;
        flex-direction: column;
    }
    
    body:is(.archive, [class*=' paged']) .gb-container.my_newsletter_container {
        order: -2;
    }
    
    body.archive header.page-header {
        order: -1;
    }
    
    body[class*=' paged'] .my_jobsnumber_container {
        order: -1;
    }
    #2351187
    Fergal

    It worked! Beautiful! Thank you so much Fernando!

    #2351189
    Fernando
    Customer Support

    You’re welcome Fergal!

Viewing 11 posts - 16 through 26 (of 26 total)
  • You must be logged in to reply to this topic.