How to Change Class of Paging in Orchard CMS

How to Change the Class of Paging in Orchard CMS

Orchard is a Content Management System (CMS) for managing dynamic content. It is very useful for making dynamic orchard sites, dynamic forms, etc. We had implemented the Orchard cms site with theme customization. Theme design was easily implemented using a custom theme. However, we were not able to implement the design of paging. It was using a class of orchard paging. So it was displaying the default design of Orchard paging.

Here is the solution to change the default pagination class in the Orchard cms system, kindly follow the below instructions.

1. Open Orchard.WebCoreShapesCoreShapes.cs file.
2. Find method “Pager_Links”.
3. Find Shape.Classes.Add(“pager”) in method.
4. Set your class name instead of “pager”.

Example:

For Example, If you want to set a “custom class” class in paging. Then add the following syntax in Orchard.WebCoreShapesCoreShapes.cs file

[csharp] Shape.Classes.Add(“customclass”) . [/csharp]

Then, You need to set an active class to highlight current paging by following javascript.

[javascript] $(“.customclass”).wrap(“</p><div class=”’container’”> </div><p>”); $(“.customclass>li>span[class=active]”).parent(“li”).addClass(“active”); [/javascript]

Now, Run your project. You will see your “custom class” will be implemented in the paging section.

I guess, this tiny article will help you a lot for setting up paging in your orchard cms system. you may also like the Orchard cms integration solution.