hi,
I put the following code in the css file
.pager-container div.page {
background: #FFCCCC !important;
color: #1010FF !important; }
.pager-container div.page.active {
background: #000000 !important;
color: #FFFFFF !important; }
But something went wrong. This applies to all styles. I want to decorate as an exception, not this style.
is there a way?
What are you trying to do ? I don't understand what this means:
PS: Use the preformatted text tool when you post code on the forum, or surround it with triple backticks:
```
code
```
Edited as you said. thank you!
hm..
for example, When the pager is active, the background color #000000 is applied.
But I want to apply #FFFFFF to another pager but i don't know how to apply it.
Well you'll need to either select every class where you want that style applied, or make a new class, apply the style to it, then add this class to every component where you want the style applied.
sorry, I do not understand.
can you give me an example?
In the code you showed, you're selecting ia built-in classes.
But you can also make your own style classes and add them to components.
Actually, you'll even be able to set the properties you want there directly.
It's limited compared to the css style sheet, but it's also a solid built-in functionality.
How familiar are you with css ?
I'm newbie. It is a level of skill that brings and writes the necessary code through the forum.
In the case of the pager, it is a non-configurable element in the style class creation.
Are you talking about the table's pager ?
If so, it does have a style property:
I think you're taking this backwards.
You don't select the components you want to target in the style classes, you only configure the properties you want to modify.
Then you add the style class to the components you want to select.
As shown in the picture above, the pager background cannot be specified with the style class.
What I want is a style for the page numbers.
Giving it a class, just to make targeting more specific:
Then targeting the numbers in the stylesheet:
.psc-table_pager .ia_pager__page {
background-color: red;
}
results:
you can have as much fun as you want with this:
.psc-table_pager .ia_pager__page {
background-color: red;
width: 32px;
height: 32px;
border: solid;
border-radius: 0;
transform: rotate(135deg);
}
It's amazing. I need to study more about css.
thank you!
I suggest you start by understanding selectors:
This is the backbone of everything css can do.
Where should I find these commands?
Get familiar with the developer tools in your browser of choice.
now that's a pager I like (...)
I'm trying to change the pager's arrow size, but I don't quite understand the hierarchy for altering the CSS.
I tried this, but it didn't work
.psc-table_32px_pager_arrow .ia_pager__prevNext {
width: 32px;
height: 32px;
}
I think you have to apply the width and height directly to the SVG.
.psc-table_32px_pager_arrow .ia_pager__prevNext svg {
width: 32px;
height: 32px;
}