[Resolved] Customize Toolset HTML and CSS

[Author]

Posts

[scarletW]

I am trying to: use my theme's CSS style for pagination

Link to a page where the issue can be seen: hidden link

I expected to see:

Instead, I got:
I have searched the support forums for about an hour now because I thought I saw this somewhere before, but I cannot find it. I would like to use the CSS style my theme uses for pagination, or at the very list, have a way to make the box around the page numbers on the link above smaller and match the red on my website rather than being blue.

[Beda]

Toolset outputs Bootstrap HTML and uses Bootstrap CSS natively.
When you insert the pagination you can choose wether to use the legacy output (raw HTML) or Bootstrap Output.

To address CSS to your HTML (wether if it's pure HTML or Bootstrap HTML), you can:
- add CSS rules to classes or ID's of your existing HTML
- add class identifiers to your HTML, which are used already in the Theme.

The first is the easiest approach, as sometimes it's tricky to add CSS classes to ShortCodes unless they support the argument.

For your goal I suggest to apply Custom CSS to the class of the pagination links/buttons, directly in the View, or by adding it to your Custom CSS theme's style sheet.

You can either overwrite the Bootstrap CSS or output the pagination with Raw style and then address those classes.

I added a Screenshot for reference what class to overwrite right now, since you use Bootstrap.

I have also changed the status of this ticket from "Bug" to "How to", as this is not a Bug in Toolset.
We can also help only limitedly with CSS and HTML, as those are required skillsets to use Toolset.

But I can assist how to approach this generally, as above outlined.