StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I don't know what a DataPager control is. But if it's some kind of pagination* class, and you want to do something like what's at the bottom of the StackOverflow New Questions page, then yes it is completely doable in CSS.</p> <p>In most cases, the page numbers are just hyperlinks. So what you can do is find out what class the pagination control uses for the links, and style them the way you want. For instance, if the HTML looks something like this:</p> <pre><code><div class="pagination"> <span class="page_cur">1</span> <a href="news.php?page=2" class="page_num">2</a> <a href="news.php?page=3" class="page_num">3</a> <a href="news.php?page=4" class="page_num">4</a> <a href="news.php?page=5" class="page_num">5</a> ... </div> </code></pre> <p>Then you'll want to include something like this in your CSS:</p> <pre><code><style> div.pagination > span.page_cur, div.pagination > a.page_num { display: block; float: left; padding: 4px; } div.pagination > span.page_cur { background-color: #ddd; border: 1px solid #ddd; } div.pagination > a.page_num { background-color: #fff; border: 1px solid #e0e0e0; } </style> </code></pre> <p>If you don't know the CSS selectors to use for the pagination numbers, I suggest taking a look at some online references on CSS selectors. The Firebug plugin for Firefox is also very helpful in identifying layout elements and the styles currently applied to them.</p> <p>*StackOverflow doesn't like URLs with underscores in them apparently: <a href="http://en.wikipedia.org/wiki/Pagination_(web)" rel="nofollow noreferrer">Pagination</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload