Domain Options WEB Browser Template

[USA_Webmaster]

This is my first contribution to the WHMCS community and I hope you like it. This is what the end result looks like:

 

 

Hee is the CSS:

/*
Domain Registrations
*/

#order-modern .domainreg {
   margin: 0 auto 15px auto;
   padding: 10px;
   width: 70%;
   background-color: #f6f6f6;
   border: 1px dashed #ccc;
}
#order-modern .domainoptions {
   margin: 20px 0;
   padding: 0;
}
#order-modern .domainoptions .option {} #order-modern .domainoptions .option label {
   display: block;
   padding: 10px 10px 10px 30px;
   margin-bottom: 15px;
}
#order-modern .domainoptions .option:first-child {} #order-modern .domainoptions .option:last-child {
   border-bottom: 0;
}
#order-modern .domainoptions .optionselected {
   margin: 0 0 25px 0;
   background-color: #D3D3D3;
}
#order-modern .domainreginput {
   margin: 0;
   padding: 0 10px 10px 10px;
}
#order-modern .domainreginput input,
#order-modern .domainreginput select,
#order-modern .domainregperiod select {
   font-size: 14px;
   padding: 3px;
}
.browser-incognito {
   float: left;
   margin: 5px 0 0 9px;
}
/*.browser-wrapper{box-shadow: 0px 4px 35px -10px rgba(0,0,0,0.7);}*/

.browser-wrapper .row {
   clear: both;
   padding: 0.8em;
   background-color: lightGrey;
}
.browser-wrapper .row.small {
   padding-bottom: 0;
}
.browser-wrapper .row.flex {
   display: flex;
}
.browser-wrapper .row.active {
   background-color: #f1f1f1;
   margin: 0;
   padding: 5px 5px 4px 10px;
}
.tab {
   border-bottom: 2em solid #F1F1F1;
   border-left: 1em solid rgba(0, 0, 0, 0);
   border-right: 1em solid rgba(0, 0, 0, 0);
   height: 0;
   float: left;
   margin-left: 10px;
   padding: 0 0.5em;
   margin-top: 5px;
   line-height: 2em;
   text-shadow: 1px 1px rgba(255, 255, 255, 0.2);
   color: #D3D3D3;
}
.top-bar {
   background: #D3D3D3;
   clear: both;
   padding: 0;
}
.browser-navigation,
.sandwich-button {
   line-height: 1.8em;
   padding: 7px 0;
}
.browser-navigation i,
.sandwich-button i {
   color: #808080;
   font-size: 20px;
   margin: 0 15px 0 0;
   vertical-align: middle;
}
input#owndomainsld,
input#owndomaintld {
   background: #FFF;
   border: none;
   font-size: 18px !important;
   color: #000 !important;
}
.address-bar {
   background-color: white;
   flex-grow: 1;
   border: 1px solid lightGrey;
   box-shadow: inset 1px 2px 5px -2px rgba(0, 0, 0, 0.7);
   border-radius: 3px;
   line-height: 1.8em;
   padding-top: 4px;
}
.browser-padlock img {
   margin: 5px 0 10px 10px;
   width: 16px;
   float: left;
}

 

Here is the code I added in \templates\orderforms\modern\configureproductdomain.tpl

 

<div class="row">
   <div class="col-sm-12">
       <div class="browser-wrapper">
           <div class="top-bar">
               <div class="browser-incognito"><img src="http://imgur.com/tROg4K9.png" width="36"></div>
               <div class="tab">
                   Tab Title
               </div>
               <div class="row flex active">
                   <div class="browser-navigation">
                       <i class="fa fa-arrow-left"></i><i class="fa fa-arrow-right"></i><i class="fa fa-refresh"></i>
                   </div>
                   <div class="address-bar">
                       <div class="browser-padlock"><img src="http://imgur.com/NHGSlBA.png" width="24"></div>
                       <div class="col-xs-6">
                           <input type="text" id="owndomainsld" value="{$sld}" placeholder="your perfect domain" class="form-control" autofocus />
                       </div>
                       <div class="col-xs-4">
                           <input type="text" id="owndomaintld" value="{$tld|substr:1}" placeholder=".com .net .org" class="form-control" />
                       </div>
                   </div>
                   <div class="sandwich-button"><i class="fa fa-bars"></i></div>
               </div>
           </div>
       </div>
   </div>
</div>
</div>

 

Here is imgur images: http://imgur.com/a/fCKv7

Here is a font awesome icons: http://fortawesome.github.io/Font-Awesome/icons/

Edited January 31, 2016 by USA_Webmaster
forgot links