Archived topic
Rearrange elements on paged pages
25 replies · Started by Fergal on September 21, 2022
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?
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
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
}
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
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?
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
}
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;
}
Ok great I did that, thanks. Getting closer.
Now just need to please shift featured jobs below All Jobs
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;
}
It worked! Beautiful! Thank you so much Fernando!
You're welcome Fergal!