(2017-05-07, 12:18 PM)MrBrechreiz Wrote: [ -> ]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?
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
[
attachment=38842]
(2017-05-07, 01:17 PM)MrBrechreiz Wrote: [ -> ]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?
This is about the same as with the checkbox.
(2017-05-08, 02:21 PM)MrBrechreiz Wrote: [ -> ]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.