Remove border around image

Shopify Expert
9922 75 1439

I manually added 5 links just for the css example. The pagination code much earlier in this thread takes care of creating those links for you - you just need to style them up.

CSS styles should get added into your stylesheet - not pagination.liquid (styles.css.liquid)

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Excursionist
36 0 31

Hi Jason,

I have tried using the example you have provided, http://jsfiddle.net/N9ptE/. However, I'm having difficulty trying to align/position the circle properly & also is it possible to not have the circle on "Prev/Next" ?

 

This is what i did in Pagination.liquid & style.css.liquid & the result i got (attached image).

~ Pagination.liquid ~

<div class="pagination">

{% if paginate.previous %}
      <a href="paginate.previous.url"><<</a>
    {% endif %}
    {% for part in paginate.parts %}
      {% if part.is_link %}
        {{ part.title | link_to: part.url }}
      {% else %}
        {{ part.title }}        
      {% endif %}        
    {% endfor %}      
    {% if paginate.next %}
      <a href="{{ paginate.next.url }}" class="next">Next</a>
    {% endif %}

</div>
~ style.css.liquid ~

.pagination { 
  font-size: 15px;
  text-align: center;
  word-spacing:30px;
}

.pagination a {
    display:inline-block;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background:#121212;
    text-decoration:none;
    color:#fff;
    transition:background .2s
}

.pagination a:hover{
    background:#ffcc00;
}

 

Thanks.

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
5841 0 117

@Gwen, it's really hard to help troubleshoot and adjust CSS without a live example. Do you have a link to the page in question so that Jason or someone else can have a look at it and help you with the adjustments.

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Excursionist
36 0 31

Hi Jamie,

Yes, my trial site is http://bagsloover.myshopify.com. Thanks & sorry for the trouble.

0 Likes
Excursionist
36 0 31

Hi,

I'm still having problem for the styling. Unable to create the circle around the numbers. Please help me ><

Thanks.

0 Likes
Shopify Expert
9922 75 1439

I went to have a look at the store too see what you've done, but it's locked.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Excursionist
36 0 31

Hi,

I'm working on this new store, http://bagsloover.myshopify.com.

0 Likes
Shopify Expert
9922 75 1439

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Excursionist
36 0 31

Hi,

Oh. I think the password is whotwi. No idea why it is locked.

0 Likes
Shopify Expert
9922 75 1439

Based on what you've got currently something like this might work:

.pagination a{
   display: inline-block;
   width: 2em;
   height: 2em;
   line-height: 2em;
   border-radius: 50%;
   background: #f45b4f;
   text-align: center;
   text-decoration: none;
   color: #fff;
}

.pagination a.next, .pagination a.prev{
   border-radius: 0;
   background:none;
   text-decoration: auto;
   color: #f45b4f;
}

Proof is in the testing of course...

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes