Styling the Checkboxes

[Glunar]

As for example only one input field.

Open your usercp_options template and find

<input type="checkbox" class="checkbox" name="invisible" id="invisible" value="1" {$invisiblecheck} />

change to

<input type="checkbox" class="checkbox css-checkbox" name="invisible" id="invisible" value="1" {$invisiblecheck} /><label for="invisible" class="css-label"></label>

Add in your global.css this

input[type=checkbox].css-checkbox {
 position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
 padding-left:30px;
 height:12px; 
 display:inline-block;
 line-height:12px;
 background-repeat:no-repeat;
 background-position: 0 0;
 font-size:12px;
 vertical-align:middle;
 cursor:pointer;
 margin-top: 3px;
}
input[type=radio].css-checkbox + label.css-label {
 padding-left:30px;
 height:12px; 
 display:inline-block;
 line-height:12px;
 background-repeat:no-repeat;
 background-position: 0 0;
 font-size:12px;
 vertical-align:middle;
 cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
 background-position: 0 -12px;
}
label.css-label {
 background-image:url(images/checkbox.png);
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

Copy the attachment in your images folder.



This is MY EXAMPLE and you can change it as you want.

I will try it, thank you so much!

Anyway to design the circle check boxes as known as "radio" postoptions[subscriptionmethod]?

Anyway to make checkboxes just black?

[MrBrechreiz]

Ok, please try this

In global.css add this

input[type=checkbox].css-checkbox {
 position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
 padding-left:17px;
 height:12px; 
 display:inline-block;
 line-height:12px;
 background-repeat:no-repeat;
 background-position: 0 0;
 font-size:12px;
 vertical-align:middle;
 cursor:pointer;

}

input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
 background-position: 0 -12px;
}
label.css-label {
 background-image:url(images/checkbox.png);
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

and copy my attachment in your images folder.

So it looks to my localhost

   

[Glunar]

Ok, please try this

In global.css add this

input[type=checkbox].css-checkbox {
 position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
 padding-left:17px;
 height:12px; 
 display:inline-block;
 line-height:12px;
 background-repeat:no-repeat;
 background-position: 0 0;
 font-size:12px;
 vertical-align:middle;
 cursor:pointer;

}

input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
 background-position: 0 -12px;
}
label.css-label {
 background-image:url(images/checkbox.png);
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

and copy my attachment in your images folder.

So it looks to my localhost

It still appears to be the classic and default checkbox after adding it into global.css and using the image. I did follow your instructions.

-

Any sort of circle / (radio) box templates?

[MrBrechreiz]

This is about the same as with the checkbox.

[Glunar]

This is about the same as with the checkbox.

I can't understand why its not working, i did everything. I'm 100% sure i didn't do anything wrong.