Search the Community

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/