title: How can I customize the PagedList.Core.MVC to the way I need to shape it?
body: <p>I currently have a pager in an MVC view, it's dynamic and does everything for me in the background:</p>
  
  <pre><code> &lt;pager class="pager" list="@Model" options="@PagedListRenderOptions.TwitterBootstrapPager" asp-action="NieuwsOverzicht" asp-controller="Nieuws" /&gt;
  </code></pre>
  
  <p>I was able to customize its colour:</p>
  
  <p>CSS</p>
  
  <pre><code>.pager &gt; li &gt; a {
      color: black !Important;
      border-color: white !Important;
      padding: 5px !Important;
  }
  </code></pre>
  
  <p>But I don't know how I can customize the buttons individually. This is what it currently looks like. I'm using the PagedList.Core.MVC package v1.0.1 </p>
  
  <p><a href="https://i.stack.imgur.com/UO5Ht.png" rel="nofollow noreferrer">https://i.stack.imgur.com/UO5Ht.png</a></p>
  
  <p>ViewImports cshtml</p>
  
  <pre><code>@using Groep1D
  @using PagedList.Core.Mvc
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  @addTagHelper *, PagedList.Core.Mvc
  </code></pre>
  
  <p>Services in startup.cs</p>
  
  <pre><code>services.AddSingleton&lt;IActionContextAccessor, ActionContextAccessor&gt;();
  </code></pre>
  
  <p>This is the CSS I want to implement for the pager. I need two arrows and the page numbers separately styled.</p>
  
  <pre><code>  .pager &gt; li &gt; a.right-arrow {
          margin-left: 340px;
          width: 30px;
          border-radius: 50%;
          box-shadow: 0px 0px 5px #9ecaed;
          font-size: 15px;
          padding: 7px;
          line-height: 1;
      }
  
      .pager &gt; li &gt; a.left-arrow {
          margin-right: 340px;
          width: 30px;
          border-radius: 50%;
          box-shadow: 0px 0px 5px #9ecaed;
          font-size: 15px;
          transform: rotate(180deg);
          padding: 7px;
          line-height: 1;
      }
  
  
  .number {
      color: black !Important;
      border-color: white !Important;
      padding: 5px !Important;
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pager"&gt;
  &lt;ul class="pager"&gt;
  &lt;li class="PagedList-skipToPrevious"&gt;&lt;a href="/Nieuws/NieuwsOverzicht?page=1" rel="prev"&gt;Previous&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="/Nieuws/NieuwsOverzicht?page=1"&gt;1&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="active"&gt;&lt;a&gt;2&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="disabled PagedList-skipToNext"&gt;&lt;a rel="next"&gt;Next&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>