Change Color of Pagination??

[miroku]

- Brooklyn Theme
- Custom CSS

1 2 3 →

I want to change the text decoration of the active page of the pagination slider for collections.

How may I edit assets - theme.scss.liquid to accomplish this?

[francetajohnson]

I'm like 3 years late but... If you paste this at the end of your pagination.liquid file, should solve your issue.

<style> .pagination a:link, a:visited, a:hover, a:active { color:#000000; } </style>

[hfound]

For debut theme change your code in pagination.liquid to the below code (delete anything that is there and add) - this code will also change the current page number color to white (just change the #ffffff to whatever # you need - #ffffff is the code for white).  

<!-- Pagination -->
{%- if paginate.pages > 1 -%}
<nav role="navigation">
<ol class="pagination">
{%- if paginate.previous-%}
<li>
<a href="{{ paginate.previous.url }}">
<span aria-hidden="true">&laquo;</span>
Previous <span class="visuallyhidden">page</span>
</a>
</li>
{%- else -%}
<li class="disabled">
<span aria-hidden="true">&laquo;</span>
Previous <span class="visuallyhidden">page</span>
</li>
{%- endif -%}

{%- for part in paginate.parts -%}
{%- if part.is_link -%}
<li>
<a href="{{ part.url }}">
<span class="visuallyhidden">page</span> {{ part.title }}
</a>
</li>
{%- else -%}
{%- if part.title == paginate.current_page -%}
<li class="active" aria-current="page">
<span class="visuallyhidden">page</span> {{ part.title }}
</li>
{%- else -%}
<li>
<span class="visuallyhidden">page</span> {{ part.title }}
</li>
{%- endif -%}
{%- endif -%}
{%- endfor -%}

{%- if paginate.next -%}
<li>
<a href="{{ paginate.next.url }}">
Next <span class="visuallyhidden">page</span>
<span aria-hidden="true">&raquo;</span>
</a>
</li>
{%- else -%}
<li class="disabled">
Next <span class="visuallyhidden">page</span>
<span aria-hidden="true">&raquo;</span>
</li>
{%- endif -%}
</ol>
</nav>
{%- endif -%}

<style>
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}

.pagination li {
display: inline;
margin: 0 5px;
color: #ffffff;
}
</style>