XF 2.2 How to edit "Page navigation"?

[Dkf]

Background gradient and other
Thank You

 

[TPerry]

The inspection tool that most browsers come with does wonders.

To get you started just a few of the CSS properties for the pagenav selectors.

.pageNav-page.pageNav-page--current {
background:green;
color:red;
}

.pageNav-page
{
background:purple;
color:cyan;
}

.pageNav-jump:hover, .pageNav-jump:active {
background: #171717;
}

.pageNav-page:last-child {
background:blue;
color:white;
}

.pageNav-page:not(:first-child) {
background: cyan;
color:red;
}

As for gradient... they are done using the background designator and simply using standard CSS for defining gradients.
similar to background: linear-gradient(0deg, #1f1f1f, #252525);


But since you are using a custom style... some of this can only really be determined by using the above mentioned inspection tool... not to mention, I'm sure much of that is actually defined in your Style Properties also.

 

[Dkf]

The inspection tool that most browsers come with does wonders.

To get you started just a few of the CSS properties for the pagenav selectors.

.pageNav-page.pageNav-page--current {
background:green;
color:red;
}

.pageNav-page
{
background:purple;
color:cyan;
}

.pageNav-jump:hover, .pageNav-jump:active {
background: #171717;
}

.pageNav-page:last-child {
background:blue;
color:white;
}

.pageNav-page:not(:first-child) {
background: cyan;
color:red;
}

As for gradient... they are done using the background designator and simply using standard CSS for defining gradients.
similar to background: linear-gradient(0deg, #1f1f1f, #252525);


But since you are using a custom style... some of this can only really be determined by using the above mentioned inspection tool... not to mention, I'm sure much of that is actually defined in your Style Properties also.

How to edit this code?
I didnt found this css code

 

[Nicolas FR]

Put those code in your extra.less template.

 

[TPerry]

As @nicodak stated... those are CSS entries to place in your EXTRA.less that is specific to the style you are working on.

To get to it, you go into your ACP -> Appearance -> Templates, select the style you need to edit



and then in the filter box type in EXTRA and it will pull it up.



Then you can insert that code into there