- Bought between 10 and 49 items
- Denmark
- Exclusive Author
- Has been a member for 3-4 years
- Microlancer Beta Tester
Hey guys, since it is very hard to get any help on the Shopify forums (low activity) I hope maybe you guys can have a look at my problem. I suspect it is a general problem and not a big one.
The problem is this: I needed a different style for “current” (current page = the number navigation) and the 3 little dots ”...” that also show up in the navigation.
As you can see in the following link the 3 dots and the current page have the same style.
http://murray-bauch-and-altenwerth3713.myshopify.com/collections/all
The problem is that these 2 elements both the same part element and can only be styled differently by making a conditional statement like here:
{% if part.title == '…' %}
<span class="deco">{{ part.title }}</span>
{% else %}
<span class="paginate-shared-style current page">{{ part.title }}</span>
{% endif %}
I got the help to make this from: http://wiki.shopify.com/Paginate
My guess is that those 3 little dots can not be recognized for some reason. I copy-pasted directly from the wiki example and I also tried with normal punctuation for the dots but to no avail.
Below is the full code:{% if paginate.pages > 1 %}
<!-- START PAGINATE -->
<div id="paginate">
{% if paginate.previous %}
<span class="paginate-shared-style-link prev">{{ paginate.previous.title | link_to: paginate.previous.url }}</span>
{% endif %}
{% for part in paginate.parts %}
{% if part.is_link %}
<span class="paginate-shared-style-link page">{{ part.title | link_to: part.url }}</span>
{% else %}
{% if part.title == '…' %}
<span class="deco">{{ part.title }}</span>
{% else %}
<span class="paginate-shared-style current page">{{ part.title }}</span>
{% endif %}
{% endif %}
{% endfor %}
{% if paginate.next %}
<span class="paginate-shared-style-link next">{{ paginate.next.title | link_to: paginate.next.url }}</span>
{% endif %}
</div>
<!-- END PAGINATE -->{% endif %}{% endpaginate %}
#paginate {
position:absolute;
left:0px;
bottom:-33px;
z-index: 10;
}
#paginate a {
text-decoration:none;
}
.paginate-shared-style {
display:block;
padding: 3px 8px;
border-width:1px;
border-style:solid;
margin-right:3px;
float:left;
}
.paginate-shared-style-link a {
display:block;
padding: 3px 8px;
border-width:1px;
border-style:solid;
margin-right:3px;
float:left;
}
.deco {
background-color: white;
}
.current {
background-color: black;
}
I know this is a lot to go through but I hope you can spare the time. I suspect the issue is not a big one. I am just too novice in programming to see it right away.
Thanks in advance.
