Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Not Solved Styling the Checkboxes
#11
Not Solved
(05-07-2017, 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?
Reply
#12
Not Solved
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

   


Attached Files Image(s)
   
Reply
#13
Not Solved
(05-07-2017, 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?
Reply
#14
Not Solved
This is about the same as with the checkbox.
Reply
#15
Not Solved
(05-08-2017, 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.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)