Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Not Solved Styling the Checkboxes
#1
Not Solved
How can I edit the way checkboxes appear in my theme? How can I style it?
Reply
#2
Not Solved
can you tell us what exactly you want to change ? And what is your forum url & which theme you are using ?
Reply
#3
Not Solved
(04-27-2017, 02:57 PM).m. Wrote: can you tell us what exactly you want to change ? And what is your forum url & which theme you are using ?

I just want to edit the way it looks, the checkboxes in everywhere. [] Signature: include your signature. [] Disable Smilies: disable smilies from showing in this post.

or

() Do not subscribe to this thread
() Subscribe without receiving any notification of new replies

Things like that...

Any idea to change the checkbox style?
Reply
#4
Not Solved Exclamation 
[Image: R0ZNGa.png]


How can I set those tyhings up? How can I make it look black and stuff.
Reply
#5
Not Solved
http://stackoverflow.com/questions/41484...-using-css
Reply
#6
Not Solved
This is a nice tutorial on how to style check-boxes and to be honest.. they look awesome! Big Grin :
https://codepen.io/CreativeJuiz/pen/BiHzp

Implement the code into you're global css and delete older check-box type declarations or append !IMPORTANT after you're recently added tag attributes.
Kortrijk Airsoft Division
  • Community Forum
  • Fotogallery
  • Airsoft Events
airsoftdivision.be
Reply
#7
Not Solved
(05-04-2017, 02:03 PM)zyra Wrote: This is a nice tutorial on how to style check-boxes and to be honest.. they look awesome! Big Grin :
https://codepen.io/CreativeJuiz/pen/BiHzp

Implement the code into you're global css and delete older check-box type declarations or append !IMPORTANT after you're recently added tag attributes.

Not working, check boxes become invisible. Any other website or template you got? or it appears like the default one whenever it appears.
Reply
#8
Not Solved
That works. You must set the label tag after input.
Reply
#9
Not Solved
(05-07-2017, 10:21 AM)MrBrechreiz Wrote: That works. You must set the label tag after input.

I'm doing something wrong, could you detail label tag and the instructions? Thank you.
Reply
#10
Not Solved
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.


Attached Files Image(s)
   
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)