How to Change Class of Paging in Orchard CMS

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

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

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

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

Shape.Classes.Add("customclass") .

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


$(".customclass").wrap("<div class='container' style='text-align: center;'></div>");
 
$(".customclass>li>span[class=active]").parent("li").addClass("active");

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

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

By | 2017-01-06T18:58:47+00:00 October 11th, 2014|Asp.Net MVC, CMS System, How To, Orchard CMS|