Homer Themes Customize Standard Components

Include JQuery Library

/* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="https://code.jquery.com/jquery-1.10.2.js">

Radio Buttons

.radio-new-styling this class must be used Select any one

Radio Buttons

Option one is this and that—be sure to include why it's great

Option one is this and that—be sure to include why it's great

HTML Code

       
        <div class="radio-new-styling">
       <input type="radio" id="cx1" name="cx1" value="abc" />
       <label for="cx1"><span></span>  Option one is this and that—be sure to include why it's great </label>
      </div>
   
   <div class="radio-new-styling">
       <input type="radio" id="cx2" name="cx1" value="dfe" />
       <label for="cx2"><span></span>  Option one is this and that—be sure to include why it's great </label>
      </div>
       
      

CSS Code

       
  .radio-new-styling input[type="radio"] {
    display:none;
}

.radio-new-styling input[type="radio"] + label {
    font-weight: 400;
}

.radio-new-styling input[type="radio"] + label span {
    display:inline-block;
    width:28px;
    height:28px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(images/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

.radio-new-styling input[type="radio"] + label span:hover {
   width:28px;
    height:28px;
    background:url(images/check_radio_sheet_hover.png) left top no-repeat;
}

.radio-new-styling input[type="radio"]:checked + label span {
    background:url(images/check_radio_sheet.png) -28px top no-repeat;
}
      
      

Multiple Radio Buttons

.radio-new-styling this class must be used Multiple Select. This is checkboxes But styling like Radio Button.

Radio Buttons

Option one is this and that—be sure to include why it's great

Option one is this and that—be sure to include why it's great

Option one is this and that—be sure to include why it's great

Option one is this and that—be sure to include why it's great

HTML Code

       
       <div class="radio-new-styling">
       <input type="checkbox" id="cx6" name="xx1" value="abc" />
       <label for="cx6"><span></span>  Option one is this and that—be sure to include why it's great </label>
      </div>
   
   <div class="radio-new-styling">
       <input type="checkbox" id="cx7" name="xx2" value="dfe" />
       <label for="cx7"><span></span>  Option one is this and that—be sure to include why it's great </label>
      </div>
   
   <div class="radio-new-styling">
       <input type="checkbox" id="cx8" name="xx3" value="xyz" />
       <label for="cx8"><span></span>  Option one is this and that—be sure to include why it's great </label>
      </div>
   
    <div class="radio-new-styling">
       <input type="checkbox" id="cx9" name="xx4" value="zyx" />
       <label for="cx9"><span></span>  Option one is this and that—be sure to include why it's great </label>
      </div>
       
      

CSS Code

       
         
.radio-new-styling input[type="checkbox"] {
    display:none;
}

.radio-new-styling input[type="checkbox"] + label {
    font-weight: 400;
}

.radio-new-styling input[type="checkbox"] + label span {
    display:inline-block;
    width:28px;
    height:28px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(images/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

.radio-new-styling input[type="checkbox"] + label span:hover {
   width:28px;
    height:28px;
    background:url(images/check_radio_sheet_hover.png) left top no-repeat;
}

.radio-new-styling input[type="checkbox"]:checked + label span {
    background:url(images/check_radio_sheet.png) -28px top no-repeat;
}

      

Checkboxes

.checkboxes-new-styling this class must be used

Checkboxes

Option one is this and that—be sure to include why it's great

Option one is this and that—be sure to include why it's great

Option one is this and that—be sure to include why it's great

       
        <div class="checkboxes-new-styling">
         <input type="checkbox" id="c3" name="c3" />
         <label for="c3"><span></span>  Option one is this and that—be sure to include why it's great </label>
        </div>
       
      

CSS Code

       
         
.checkboxes-new-styling input[type="checkbox"] {
    display:none;
}

.checkboxes-new-styling input[type="checkbox"] + label {
    font-weight: 400;
}

.checkboxes-new-styling input[type="checkbox"] + label span {
    display:inline-block;
    width:28px;
    height:28px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(images/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

.checkboxes-new-styling input[type="checkbox"] + label span:hover {
   width:28px;
    height:28px;
    background:url(images/check_radio_sheet-hover.png) left top no-repeat;
}

.checkboxes-new-styling input[type="checkbox"]:checked + label span {
    background:url(images/check_radio_sheet.png) -28px top no-repeat;
}

       
      

Forms elements

Document Name

       
  <div class="form-group">
     <label class="col-sm-4 control-label">Document Name</label>
     <div class="col-sm-8"><input type="text" class="form-control"></div>
                </div>

Select

option 1 option 2 option 3 option 4

       
  
    <div class="form-group"><label class="col-sm-4 control-label">Select</label>

                    <div class="col-sm-8"><select class="form-control m-b" name="account">
                        <option>option 1</option>
                        <option>option 2</option>
                        <option>option 3</option>
                        <option>option 4</option>
                    </select>
                    </div>
                </div>

Table Grid

when you click #allcheck - All checkboxes will checked

#All Check	Completed	Task	Date
Check Box 1	Zender Company	20%	Jul 14, 2013
Check Box 1	Zender Company	20%	Jul 14, 2013
Check Box 1	Zender Company	20%	Jul 14, 2013

Java Script for grid to all checked

        
         $(document).ready(function () {
   
          $( "#checkAll" ).click(function() {
           $('label div.icheckbox_square-green').toggleClass( "hover checked" );
           $('input:checkbox').not(this).prop('checked', this.checked);
          });

         });
        
       

Normal Grid

	Completed	Task	Date
All Check	Zender Company	20%	Jul 14, 2013
All Check	Zender Company	20%	Jul 14, 2013
All Check	Zender Company	20%	Jul 14, 2013

Standard Button Format

for a href=""

    
     <a class="btn btn-primary" href="#" title="Upload">Upload</a>
    
     

for button

    
     <button type="button" class="btn w-xs btn-default">Default</button>
    
     

Click here to Download Code Download