1

Topic: How to put boxes around number bullets with CSS?

http://img504.imageshack.us/img504/1007/this4dt.gif


Like the image above, how do I turn basic numbers into numbers at the bottom of the page with borders using CSS? The boxes make it easier to locate and position our mouse pointer and navigate. Has anyone sucessfully created something like this?

Thanks.

Re: How to put boxes around number bullets with CSS?

Thats a great idea,

.pagelink a, .pagelink strong {
    padding: 2px;
    background-color: #F1F1F1;
    border: 1px solid #D1D1D1; 
}

does the trick smile
(maybe this should be part of the default theme, people do complain about how hard it is to click the links)

3

Re: How to put boxes around number bullets with CSS?

http://img403.imageshack.us/img403/4726/pad3rh.gif

Wow. That did the trick. What a short and simple code. Thanks. big_smile

One more thing, if it's not more to ask. Is there a way to get the word "Pages:" to have a border around it too?

Thanks.

Re: How to put boxes around number bullets with CSS?

not without modifying the code you can put another box around the whole lot though

.pagelink a, .pagelink strong {
    padding: 2px;
    background-color: #F1F1F1;
    border: 1px solid #D1D1D1; 
}
.pagelink {
    background-color: #F1F1F1;
    border: 1px solid #D1D1D1;
    padding: 5px !important;
}

Thats not great but it could be tidied up

5

Re: How to put boxes around number bullets with CSS?

Why not put this wonderfull tip into the PunBB Wiki docs?

Grtz., Shine

6

Re: How to put boxes around number bullets with CSS?

Should be in the default tpl wink