Pagination Slot Combination

[Todge]

Mar 12, 2019 4:46:09 GMT -8 Sam said:

Mar 11, 2019 15:17:25 GMT -8 Todge said:

The three remaining blocks of code cover all of the pagination buttons. The red block is being repeated further down, and so was not actually doing anything.

So this what I get when the code is like this:

View Attachment



<!-- Pagination -->
<style>
                 
.ui-pagination-next a{
position:relative;
   right:-15px;
   border: 1px solid #C8C8C8;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;    
   font-family: verdana;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding: 0 10px;
   line-height:20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
.ui-pagination-prev a{
   border: 1px solid #C8C8C8;
border-radius:10px 0 0 10px;    
   font-family: verdana;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding: 0 10px;
   line-height:20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
                                                     
.ui-pagination-slot a{  
   float:right;      
   text-align: -webkit-match-parent;
   border: 1px solid #C8C8C8;
   font-family: verdana;    
   list-style: none;
position:relative;
   right:-7px;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding-left:0px;
   padding: 0 10px;
   letter-spacing:-5px;              
   line-height:20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;

}
</style>

The scrunched up numbers at the far right are being caused by the third line up from the bottom of your CSS..

letter-spacing:-5px;

Removing that should fix that issue, but may cause the pagination numbers to stretch out a bit.

[Sam]

Mar 12, 2019 16:43:49 GMT -8 Todge said:

Mar 12, 2019 4:46:09 GMT -8 Sam said:

So this what I get when the code is like this:





<!-- Pagination -->
<style>
                 
.ui-pagination-next a{
position:relative;
   right:-15px;
   border: 1px solid #C8C8C8;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;    
   font-family: verdana;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding: 0 10px;
   line-height:20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
.ui-pagination-prev a{
   border: 1px solid #C8C8C8;
border-radius:10px 0 0 10px;    
   font-family: verdana;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding: 0 10px;
   line-height:20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;
}
                                                     
.ui-pagination-slot a{  
   float:right;      
   text-align: -webkit-match-parent;
   border: 1px solid #C8C8C8;
   font-family: verdana;    
   list-style: none;
position:relative;
   right:-7px;
   font-size: 9px;
   text-transform: uppercase;
   color: #676767;
   padding-left:0px;
   padding: 0 10px;
   letter-spacing:-5px;              
   line-height:20px;
   height: 20px;
   background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;

}
</style>

The scrunched up numbers at the far right are being caused by the third line up from the bottom of your CSS..

letter-spacing:-5px;

Removing that should fix that issue, but may cause the pagination numbers to stretch out a bit.

Yep that's fine.
So how do we get the background to no repeat through each slot?

[Todge]

Mar 13, 2019 0:27:51 GMT -8 Sam said:

So how do we get the background to no repeat through each slot?

You have the background repeat and position in the wrong order..

background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;

should really be

background: url("https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png") no-repeat top right;

[Sam]

Mar 14, 2019 15:12:27 GMT -8 Todge said:

Mar 13, 2019 0:27:51 GMT -8 Sam said:

So how do we get the background to no repeat through each slot?

You have the background repeat and position in the wrong order..

background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;

should really be

background: url("https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png") no-repeat top right;

It still doesn't fix it....

[Todge]

Mar 15, 2019 0:47:32 GMT -8 Sam said:

Mar 14, 2019 15:12:27 GMT -8 Todge said:

You have the background repeat and position in the wrong order..

background: url(https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png) top right no-repeat;

should really be

background: url("https://web.archive.org/web/20170110034433im_/http://community.lego.com/html/assets/dropdown-bg.png") no-repeat top right;

It still doesn't fix it....

View Attachment

Your code is working, but I think you are wanting one background image to span all of the pagination cells instead?

If so, I'm not sure that you can because of the re-alignment of the cells. You can make the cells transparent and add the background image to the parent cell, but you have also moved the pagination cells to the right, moving them outside of the parent cell, and so they will not be included in the bg image.

Let me play with it a while to see what I can come up with, but because of the makeup of the pagination I'm not sure you can get the effect you're after.

[Sam]

Mar 15, 2019 15:09:13 GMT -8 Todge said:

Mar 15, 2019 0:47:32 GMT -8 Sam said:

It still doesn't fix it....

Your code is working, but I think you are wanting one background image to span all of the pagination cells instead?

If so, I'm not sure that you can because of the re-alignment of the cells. You can make the cells transparent and add the background image to the parent cell, but you have also moved the pagination cells to the right, moving them outside of the parent cell, and so they will not be included in the bg image.

Let me play with it a while to see what I can come up with, but because of the makeup of the pagination I'm not sure you can get the effect you're after.

Yep that's right.

Danke.

[Sam]

Any luck Todge?