Advanced: Advanced Style Customizationof the DMXzone Paginator with CSS

Introduction

In this tutorial we will show you how to fully customize your DMXzone Paginator with CSS for a better fit with your unique website.

How to do it

1.       Create your Paginator
As you can see, we've already inserted a dynamic table and added a paginator which we will now customize with CSS.


Here you can see a table of the properties you can change and the CSS rules that are relevant to those properties .

2.       Go to CSS Styles in your Dreamweaver

Make sure under CSS Styles you've selected "All".

3.       Now you are ready to start editing.
Select the first CSS Rule and look at the properties that appear right underneath. We will be doing our editing from here.


This first CSS rule pertains to the div layer that our paginator is in. Here, under Properties you can edit the margin, padding, and text alignment right off the bat. We set margin and padding to 3px and text align to center.
 
Our paginator will look like this on our page:


When we click the last property under text align, Add Property, we can do almost everything imaginable to our div like change its background, border, font, spacing, etc.
 
Keep in mind that the settings for the div will be overridden by the properties of the individual paginator elements.

4.       Moving on to the next CSS rule
Select the second CSS Rule and look at the properties that appear right underneath. We will be doing our editing from here.


This second CSS rule pertains to all the active page links. Here, under Properties you can edit the background position, border, color, margin, and text decoration right off the bat. We edit the settings in a way that would look good with our website:

And the result looks like this:

 
When we click the last property under text align, Add Property, again we can do almost everything imaginable to our rule like change its background, border, font, spacing, etc.

5.       The third CSS rule
pertains to the active page links that you have your mouse over.
 

Here, under Properties you can edit the background color, background image, border, and color, right off the bat. When we click the last property under text align, Add Property, again we can do almost everything imaginable to our rule like change its background, border, font, spacing, etc.


We edit the settings in a way that would look good with our website:


The result in your browser will look and behave like this:

6.       The fourth CSS rule
pertains to the page link of the page you are currently on.

Here, under Properties you can edit the border, color, font-weight, margin-right, and padding, right off the bat. When we click the last property under text align, Add Property, again we can do almost everything imaginable to our rule like change its background, border, font, spacing, etc.

7.       The fifth CSS rule
pertains to an inactive label which would appear when you are either on the first or last page.

Here, under Properties you can edit the border, color, margin-right, and padding, right off the bat. When we click the last property under text align, Add Property, again we can do almost everything imaginable to our rule like change its background, border, font, spacing, etc.

8.       When you are done
save your work and test it in your browser. Your result should look something like: