XF 2.2 How to change pagenavmain

[Abraham54]

I like to change pagenavemain via setting in extra.less.




Somewhere in the past, I found the extraless setting on this forum.
But I cannot find it anymore.

 

[Old Nick]

You can play with .pageNav-main .pageNav-page .pageNave-page--current .pageNave-page--later .pageNave-page--skip .pageNave-page--skipEnd

What do you want to change exactly ? Colors ?

 

[Abraham54]

I want to change everything.
As I wrote, in the past I could do this in extraless.
I want to change the background colors and the colors of the font.

 

[Old Nick]

You can try this code

.pageNav-page, .pageNav-page.pageNav-page--skip.pageNav-page--skipEnd {
    background: black;
    color: white;
    &:hover {
        background: grey;
        color: black;
    }
}

.pageNav-page.pageNav-page--current {
    background: red;
    color: white;
    &:hover {
        background: grey;
        color: black;
    }
}

.pageNav-jump {
    background: blue;
    color: white;
    &:hover {
        background: grey;
        color: black;
    } 
}

Play as you like with colors, my code give this result

 

[Abraham54]

@nicodak - you are great!
Many thanks, this is it what I was looking for!

 

[Abraham54]

Is possible to give begin and end of page-nav a rounding?




The style has roudings but page-nave not yet!

 

[Old Nick]

Did you upgrade to 2.3 or still running 2.2?

 

[BassMan]

Add this:

.pageNav-page:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.pageNav-page:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

 

[Abraham54]

Did you upgrade to 2.3 or still running 2.2?

Still on XF 2.2, when 3.3.4 comes. I will go for it.

@BassMan I will try this. I let jou know.

 

[Abraham54]

@BassMan Thank You. It looks fantastic now.

 

[Abraham54]

Too bad, something does not work as expected:

.pageNav-page, .pageNav-page.pageNav-page--skip.pageNav-page--skipEnd {
    background: rgb(52, 66, 86);
    color: white;
    &:hover {
        background: rgb(148, 195, 253);
        color: black;
    }
}

.pageNav-page.pageNav-page--current {
    background: rgb(148, 195, 253);
    color: white;
        border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    &:hover {
        background: rgb(52, 66, 86);
        color: white;
    }
}

.pageNav-jump {
    background: rgb(52, 66, 86);
    color: white;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    &:hover {
        background: rgb(148, 195, 253);
        color: white;
    }
}

 

[BassMan]

Add this:

.pageNav-page, .pageNav-page.pageNav-page--skip.pageNav-page--skipEnd {
    background: rgb(52, 66, 86);
    color: white;
    &:hover {
        background: rgb(148, 195, 253);
        color: black;
    }
}

.pageNav-page.pageNav-page--current {
    background: rgb(148, 195, 253);
    color: white;
    &:hover {
        background: rgb(52, 66, 86);
        color: white;
    }
}

.pageNav-page:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.pageNav-page:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.pageNav-jump {
    background: rgb(52, 66, 86);
    color: white;
    &:hover {
        background: rgb(148, 195, 253);
        color: white;
    }
    &.pageNav-jump--next, &.pageNav-jump--prev {
        border-radius: 12px;
        border-radius: 12px;
    }
}

This code will add border-radius to Next and Prev buttons on both sides. Page numbers will have border-radius only on the first and last item.

 

[Abraham54]

@BassMan Thank you.

This is the result: