Jump to content

Alykhan

Newbie
  • Content count

    3
  • Joined

  • Last visited

Community Reputation

10 Good

About Alykhan

  • Rank
    Newbie
  1. Creating a Custom Template

    Thanks for your help! I did make some changes and found some files were not in the folders so I modified that and now have my header and footer showing but not displaying properly. Could you help me out? http://forum.whmcs.com/showthread.php?77907-Header-Integration-Issues Should I move all the js to my header?
  2. Header Integration Issues

    Hey so I am integrating my header and footer into my site and although it is there, its not displaying the way it should like it does in the rest of my site. Somehow my style for my site is copied into WHMCS and I don't want that, I want WHMCS style to not be modified at all I just wanted to add my header and footer but still have my WHMCS still look the same as it was without the changes to header and footer. Anyways, so here is the link to my site: http://www.alykhan.ca (I want my header and footer to be like this) http://alykhan.ca/whmcs/index.php?systpl=alykhanservices (This is what it looks like right now) I'm not sure if it a problem with the header.tpl or something to do with style.css, I have a few different style.css in different locations. Here is my code for the header, what changes do I need to make to have it display the way it does on the rest of my site: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset={$charset}" /> <title>{$companyname} - {$pagetitle}{if $kbarticle.title} - {$kbarticle.title}{/if}</title> {if $systemurl}<base href="{$systemurl}" />{/if} <link rel="stylesheet" type="text/css" href="templates/{$template}/style.css" /> <script type="text/javascript" src="includes/jscript/jquery.js"></script> {$headoutput} {if $livehelpjs}{$livehelpjs}{/if} <meta http-equiv="content-type" content="text/html; charset={$charset}" /> <title>{if $kbarticle.title}{$kbarticle.title} - {/if}{$pagetitle} - {$companyname}</title> {if $systemurl}<base href="{$systemurl}" /> {/if}<script type="text/javascript" src="includes/jscript/jquery.js"></script> {if $livehelpjs}{$livehelpjs} {/if} <link href="templates/{$template}/css/bootstrap.css" rel="stylesheet"> <link href="templates/{$template}/css/whmcs.css" rel="stylesheet"> <script src="templates/{$template}/js/whmcs.js"></script> {$headoutput} <!-- Bootstrap --> <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- web font --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,800" rel="stylesheet" type="text/css"> <!-- icon fonts --> <link type="text/css" rel="stylesheet" href="templates/alykhanservices/font-icons/custom-icons/css/custom-icons.css"> <link type="text/css" rel="stylesheet" href="templates/alykhanservices/font-icons/custom-icons/css/custom-icons-ie7.css"> <!-- Custom css --> <link type="text/css" rel="stylesheet" href="templates/alykhanservices/HTML/css/layout.css"> <link type="text/css" id="colors" rel="stylesheet" href="templates/alykhanservices/HTML/css/colors.css"> <link type="text/css" rel="stylesheet" href="css/layout.css"> <link type="text/css" id="colors" rel="stylesheet" href="css/colors.css"> <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> {/literal}<script src="js/modernizr-2.6.1.min.js"></script>{/literal} </head> <body onLoad="initialize('mapWrapperFullwidth')" id="boxedLayout"> <!-- Primary Page Layout ================================================== --> <!-- globalWrapper --> <div id="globalWrapper"> <!-- header --> <header id="mainHeader" class="clearfix"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner preHeader"> <div class="container"> <div class="row-fluid"> <div class="span6 clearfix"> <ul class="quickMenu"> Partners <li><a href="http://www.brandedemails.ca"> Branded Emails </a></li> <li><a href="http://www.windsites.ca">Wind Sites </a></li> <li><a href="http://www.alyk.ca">UnlockCellCodes </a></li> <ul class="quickMenu"> </ul> </div> <div class="span6 clearfix"> <ul class="socialNetwork"> <li><a href="http://www.facebook.com/#!/pages/Alykhan-Suleman-Technology-Consulting/371214272994536?fref=ts" class="icon-facebook socialIcon tips" title="follow me on Facebook"><span>facebook</span></a></li> <li><a href="http://www.twitter.com/alykhans" class="icon-twitter-bird socialIcon tips" title="follow me on Twitter (/alykhans)"><span>twitter</span></a></li> <li><a href="https://plus.google.com/111246329699784142452" class="icon-gplus socialIcon tips" title="follow me on Google +"><span>google +</span></a></li> <li><a href="http://www.linkedin.com/in/alykhan" class="icon-linkedin socialIcon tips" title="follow me on Linkedin (/alykhan)"><span>linkedin</span></a></li> </ul> </div> </div> </div> </div> </div> <div class="navbar navbar-fixed-top mainNav"> <div class="navbar-inner"> <div class="container"> <a href="index.html" class="brand"><img src="images/main-logo.png" alt="himalaya"/></a> <nav id="mainMenu"> <ul> <li><a href="http://www.alykhan.ca/index.html" class="firstLevel active" >Home</a> <ul> </ul> <li> <a href="http://www.alykhan.ca/about.html" class="firstLevel">About</a> </li> <li> <a href="http://www.alykhan.ca/services.html" class="firstLevel">Services</a> </li> <li><a href="http://www.alykhan.ca/externallinks.html" class="firstLevel">External Links</a> </li> <li><a href="http://www.alykhan.ca/clients.html" class="firstLevel">Clients</a> </li> <li><a href="http://www.alykhan.ca/http://www.alykhan.me" class="firstLevel">Portfolio</a> </li> <li> <a href="http://www.alykhan.ca/contact.html" class="firstLevel last">Contact</a> </li> </ul> </nav> </div> </div> </div> </header> <!-- header --> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <ul class="nav"> <li><a href="{if $loggedin}clientarea{else}index{/if}.php">{$LANG.hometitle}</a></li> </ul> {if $loggedin} <ul class="nav"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navservices} <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="clientarea.php?action=products">{$LANG.clientareanavservices}</a></li> {if $condlinks.pmaddon}<li><a href="index.php?m=project_management">{$LANG.clientareaprojects}</a></li>{/if} <li class="divider"></li> <li><a href="cart.php">{$LANG.navservicesorder}</a></li> <li><a href="cart.php?gid=addons">{$LANG.clientareaviewaddons}</a></li> </ul> </li> </ul> {if $condlinks.domainreg || $condlinks.domaintrans}<ul class="nav"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navdomains} <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="clientarea.php?action=domains">{$LANG.clientareanavdomains}</a></li> <li class="divider"></li> <li><a href="cart.php?gid=renewals">{$LANG.navrenewdomains}</a></li> {if $condlinks.domainreg}<li><a href="cart.php?a=add&domain=register">{$LANG.navregisterdomain}</a></li>{/if} {if $condlinks.domaintrans}<li><a href="cart.php?a=add&domain=transfer">{$LANG.navtransferdomain}</a></li>{/if} {if $enomnewtldsenabled}<li><a href="index.php?m=enomnewtlds">Preregister New TLDs</a></li>{/if} <li class="divider"></li> <li><a href="domainchecker.php">{$LANG.navwhoislookup}</a></li> </ul> </li> </ul>{/if} <ul class="nav"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navbilling} <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="clientarea.php?action=invoices">{$LANG.invoices}</a></li> <li><a href="clientarea.php?action=quotes">{$LANG.quotestitle}</a></li> <li class="divider"></li> {if $condlinks.addfunds}<li><a href="clientarea.php?action=addfunds">{$LANG.addfunds}</a></li>{/if} {if $condlinks.masspay}<li><a href="clientarea.php?action=masspay&all=true">{$LANG.masspaytitle}</a></li>{/if} {if $condlinks.updatecc}<li><a href="clientarea.php?action=creditcard">{$LANG.navmanagecc}</a></li>{/if} </ul> </li> </ul> <ul class="nav"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navsupport} <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="supporttickets.php">{$LANG.navtickets}</a></li> <li><a href="knowledgebase.php">{$LANG.knowledgebasetitle}</a></li> <li><a href="downloads.php">{$LANG.downloadstitle}</a></li> <li><a href="serverstatus.php">{$LANG.networkstatustitle}</a></li> </ul> </li> </ul> <ul class="nav"> <li><a href="submitticket.php">{$LANG.navopenticket}</a></li> </ul> {if $condlinks.affiliates}<ul class="nav"> <li><a href="affiliates.php">{$LANG.affiliatestitle}</a></li> </ul>{/if} <ul class="nav pull-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$LANG.hello}, {$loggedinuser.firstname}! <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="clientarea.php?action=details">{$LANG.editaccountdetails}</a></li> {if $condlinks.updatecc}<li><a href="clientarea.php?action=creditcard">{$LANG.navmanagecc}</a></li>{/if} <li><a href="clientarea.php?action=contacts">{$LANG.clientareanavcontacts}</a></li> {if $condlinks.addfunds}<li><a href="clientarea.php?action=addfunds">{$LANG.addfunds}</a></li>{/if} <li><a href="clientarea.php?action=emails">{$LANG.navemailssent}</a></li> <li><a href="clientarea.php?action=changepw">{$LANG.clientareanavchangepw}</a></li> <li class="divider"></li> <li><a href="logout.php">{$LANG.logouttitle}</a></li> </ul> </li> </ul> {else} <ul class="nav"> <li><a href="announcements.php">{$LANG.announcementstitle}</a></li> </ul> <ul class="nav"> <li><a href="knowledgebase.php">{$LANG.knowledgebasetitle}</a></li> </ul> <ul class="nav"> <li><a href="serverstatus.php">{$LANG.networkstatustitle}</a></li> </ul> <ul class="nav"> <li><a href="affiliates.php">{$LANG.affiliatestitle}</a></li> </ul> <ul class="nav"> <li><a href="contact.php">{$LANG.contactus}</a></li> </ul> <ul class="nav pull-right"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.account} <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="clientarea.php">{$LANG.login}</a></li> <li><a href="register.php">{$LANG.register}</a></li> <li class="divider"></li> <li><a href="pwreset.php">{$LANG.forgotpw}</a></li> </ul> </li> </ul> {/if} </div><!-- /.nav-collapse --> </div> </div><!-- /navbar-inner --> </div><!-- /navbar --> <div class="whmcscontainer"> <div class="contentpadded"> {if $pagetitle eq $LANG.carttitle}<div id="whmcsorderfrm">{/if} Here is the code for my style.css, as you can see my WHMCS is modified in the process when changing my header. What changes do I need to make to have it look like normal (without any modifications to WHMCS besides the header and footer)? whmcs/css/style.css @charset "utf-8"; /* CSS Document */ body { margin: 0; padding: 0;} /* fonts for box's h2, p, a, label */ .box h2, p , a, label { font-family: 'Exo', sans-serif;} a:link, a:active, a:visited{ text-decoration:none; } /* main box styles */ .box { width: 330px; height: auto; left: 50%; top: 10%; padding: 15px; position: fixed; display: inline-block; background: white; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0, .4); text-align: center; border: 1px solid #b4b1b1; visibility: hidden; z-index: 10; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity .5s, top .5s; -moz-transition: opacity .5s, top .5s; -ms-transition: opacity .5s, top .5s; -o-transition: opacity .5s, top .5s; transition: opacity .5s, top .5s; } .overlay:target+.box { top: 42%; opacity: 1; visibility: visible; } .overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .overlay:target { visibility: visible; opacity: 1; } /* close button you can change background */ .close { background-image:url(../images/close.png); height: 48px; width:48px; position: absolute; right: -18px;; text-align: center; text-decoration: none; top: -20px; } .close:hover { -webkit-filter: brightness(10%); } /* login with facebook button */ .fb { background-image: url(../images/fb-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#3b5998; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #133783; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.fb:hover { background-color:#5782d9; }.fb:active { position:relative; top:1px; } /* login with twitter button */ .tw { background-image: url(../images/tw-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#00aeed; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #027091; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.tw:hover { background-color:#009dd1; }.tw:active { position:relative; top:1px; } /* login signup buttons red and blue */ input[type=button] { padding: 5px 25px; border: 1px solid; font-size: 11px; cursor: pointer; } input[type=button].red { color: #fff; border-color: #cc3333; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); /* Gradient */ background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #cb4229 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#cb4229)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#cb4229 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#cb4229 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#cb4229',GradientType=0 ); /* IE6-9 */ -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } input[type=button].red:hover { background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #c9371e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#c9371e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#c9371e 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#c9371e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#c9371e',GradientType=0 ); /* IE6-9 */ } input[type=button].red:active { background: #e35940; } input[type=button].blue { color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } input[type=button].blue:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue:active { background: #9ae0e9; } input[type=button].blue-round { margin-bottom:10px; color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } input[type=button].blue-round:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue-round:active { background: #9ae0e9; } /* text fields */ .text-field { display: block; margin: 0 auto; width: 180px; height:10px; border: 1px solid #c0c2c7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #8c8f90; padding: 10px; font-style: italic; font-size: 11px; margin-bottom: 10px; -moz-box-shadow: inset 0 1px 3px -1px #b4b1b1; -webkit-box-shadow: inset 0 1px 3px -1px #b4b1b1; box-shadow: inset 0 1px 3px -1px #b4b1b1; } .text-field:focus { outline: none; box-shadow: inset 0 2px 0 rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,0.1), 0 0 5px 1px #51CBEE; } /* Error notification it is not visible because: visibility:hidden */ .error { position:absolute; width: 362px; height:50px; margin-left:-16px; margin-top:13px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color:#b20a0a; box-shadow: 0 0 10px rgba(0,0,0, .4); visibility:hidden; } .error .errortext { vertical-align:middle; margin-top:17px; font-family: 'Exo', sans-serif; } .box p { display: inline; color: #7e7e7e; font-size: 11px; } #forg { color: #7e7e7e; margin-left:95px; } #buttons, .connectwith { display:block; padding-bottom:15px; } whmcs/style.css @charset "utf-8"; /* CSS Document */ body { margin: 0; padding: 0;} /* fonts for box's h2, p, a, label */ .box h2, p , a, label { font-family: 'Exo', sans-serif;} a:link, a:active, a:visited{ text-decoration:none; } /* main box styles */ .box { width: 330px; height: auto; left: 50%; top: 10%; padding: 15px; position: fixed; display: inline-block; background: white; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0, .4); text-align: center; border: 1px solid #b4b1b1; visibility: hidden; z-index: 10; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity .5s, top .5s; -moz-transition: opacity .5s, top .5s; -ms-transition: opacity .5s, top .5s; -o-transition: opacity .5s, top .5s; transition: opacity .5s, top .5s; } .overlay:target+.box { top: 42%; opacity: 1; visibility: visible; } .overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .overlay:target { visibility: visible; opacity: 1; } /* close button you can change background */ .close { background-image:url(../images/close.png); height: 48px; width:48px; position: absolute; right: -18px;; text-align: center; text-decoration: none; top: -20px; } .close:hover { -webkit-filter: brightness(10%); } /* login with facebook button */ .fb { background-image: url(../images/fb-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#3b5998; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #133783; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.fb:hover { background-color:#5782d9; }.fb:active { position:relative; top:1px; } /* login with twitter button */ .tw { background-image: url(../images/tw-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#00aeed; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #027091; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.tw:hover { background-color:#009dd1; }.tw:active { position:relative; top:1px; } /* login signup buttons red and blue */ input[type=button] { padding: 5px 25px; border: 1px solid; font-size: 11px; cursor: pointer; } input[type=button].red { color: #fff; border-color: #cc3333; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); /* Gradient */ background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #cb4229 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#cb4229)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#cb4229 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#cb4229 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#cb4229',GradientType=0 ); /* IE6-9 */ -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } input[type=button].red:hover { background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #c9371e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#c9371e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#c9371e 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#c9371e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#c9371e',GradientType=0 ); /* IE6-9 */ } input[type=button].red:active { background: #e35940; } input[type=button].blue { color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } input[type=button].blue:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue:active { background: #9ae0e9; } input[type=button].blue-round { margin-bottom:10px; color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } input[type=button].blue-round:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue-round:active { background: #9ae0e9; } /* text fields */ .text-field { display: block; margin: 0 auto; width: 180px; height:10px; border: 1px solid #c0c2c7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #8c8f90; padding: 10px; font-style: italic; font-size: 11px; margin-bottom: 10px; -moz-box-shadow: inset 0 1px 3px -1px #b4b1b1; -webkit-box-shadow: inset 0 1px 3px -1px #b4b1b1; box-shadow: inset 0 1px 3px -1px #b4b1b1; } .text-field:focus { outline: none; box-shadow: inset 0 2px 0 rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,0.1), 0 0 5px 1px #51CBEE; } /* Error notification it is not visible because: visibility:hidden */ .error { position:absolute; width: 362px; height:50px; margin-left:-16px; margin-top:13px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color:#b20a0a; box-shadow: 0 0 10px rgba(0,0,0, .4); visibility:hidden; } .error .errortext { vertical-align:middle; margin-top:17px; font-family: 'Exo', sans-serif; } .box p { display: inline; color: #7e7e7e; font-size: 11px; } #forg { color: #7e7e7e; margin-left:95px; } #buttons, .connectwith { display:block; padding-bottom:15px; } whmcs/template/alykhanservices/style.css /* -------------------------------------------------------------- GLOBAL -------------------------------------------------------------- */ body { background-color: #efefef; } form { margin: 0px; } body,td,input,select,textarea { font-family: Tahoma; font-size: 12px; } a { color: #65A5E6; } a:hover { text-decoration: none; } .wrapper { width: 730px; border: 0px; padding: 5px; background-color: #ffffff; margin-left: auto; margin-right: auto; } .clear { clear: both; } /* -------------------------------------------------------------- HEADINGS -------------------------------------------------------------- */ .heading { font-family: Tahoma; font-size: 18px; font-weight: normal; color: #65A5E6; } .heading2 { font-family: Tahoma; font-size: 16px; font-weight: bold; text-decoration: none; color: #000000; } .heading3 { font-family: Tahoma; font-size: 12px; font-weight: bold; color: #16679F; } /* -------------------------------------------------------------- INFO BOXES -------------------------------------------------------------- */ .contentbox { width: 75%; text-align: center; background-color: #f7f7f7; border: 1px dashed #cccccc; padding: 5px; margin-left: auto; margin-right: auto; } .errorbox { border: 1px dashed #cc0000; font-weight: bold; background-color: #FBEEEB; text-align: center; width: 90%; padding: 10px; color: #cc0000; margin-left: auto; margin-right: auto; } .successbox { border: 1px dashed #66CC00; font-weight: bold; background-color: #DDFFC6; text-align: center; width: 90%; padding: 10px; color: #009933; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------- CLIENT AREA NAVBAR -------------------------------------------------------------- */ .clientarealinks { background-color: #FDFCDD; padding: 10px; } .clientarealinks a { color: #555555; } /* -------------------------------------------------------------- TABLES -------------------------------------------------------------- */ table.topnavbar { width: 100%; } tr.topnavbar { background-color: #efefef; font-weight:bold; text-align: center; } tr.topnavbar a { color: #000000; text-decoration: none; } tr.topnavbar a:hover { color: #666666; } table.frame { width: 100%; border: 1px solid #8FBCE9; padding: 0px; } .fieldarea { background-color: #EFF2F9; text-align: right; } .clientareatable { width: 100%; background-color: #fff; } tr.clientareatableheading td, tr.clientareatableheading th { background-color: #304270; border: 0; color: #fff; font-weight: bold; text-align: center; font-size: 12px; padding: 4px; } tr.clientareatableheading td a, tr.clientareatableheading th a { color: #fff; } .clientareatable td, tr.clientareatableactive td { background-color: #fff; border-bottom: 1px solid #ccc; text-align: center; padding: 3px; } tr.clientareatablepending td { background-color: #FFFFE2; text-align: center; padding: 2px; } tr.clientareatablependingtransfer td { background-color: #FFDBBB; text-align: center; padding: 2px; } tr.clientareatablesuspended td { background-color: #E9FFD2; text-align: center; padding: 2px; } tr.clientareatableterminated td, tr.clientareatablecancelled td { background-color: #FFE1E1; text-align: center; padding: 2px; } tr.clientareatablefraud td { background-color: #DDDDDD; text-align: center; padding: 2px; } /* -------------------------------------------------------------- NETWORK ISSUES -------------------------------------------------------------- */ .networkissuessummary { background-color: #f6f6f6; border: 1px dashed #cccccc; padding: 10px; text-align: center; } .networkissuesopen { font-size: 16px; font-weight: bold; color: #65CC00; padding-right: 20px; } .networkissuesscheduled { font-size: 16px; font-weight: bold; color: #EEDD00; padding-right: 20px; } .networkissuesclosed { font-size: 16px; font-weight: bold; color: #888888; } .networkissuedescription { border-left: 5px solid #efefef; padding: 20px; padding-top: 1px; } .networkissueaffected { background-color: #FDFCDD; padding: 10px; margin-top: 10px; } /* -------------------------------------------------------------- SUPPORT TICKETS -------------------------------------------------------------- */ .clientticketreplyheader { margin-top: 20px; background-color: #92BDEA; font-weight: bold; color: #ffffff; padding: 4px 20px 4px 20px; } .clientticketreply { min-height: 80px; background-color: #ffffff; background-image: url('images/clientticketreplybg.gif'); background-repeat: repeat-x; padding: 10px; } .adminticketreplyheader { margin-top: 20px; background-color: #888888; font-weight: bold; color: #ffffff; padding: 4px 20px 4px 20px; } .adminticketreply { min-height: 80px; background-color: #ffffff; background-image: url('images/adminticketreplybg.gif'); background-repeat: repeat-x; padding: 10px; } .closeticket { border: 1px dashed #cc0000; font-weight: bold; background-color: #FBEEEB; color: #cc0000; } /* -------------------------------------------------------------- CHAT TRANSCRIPTS -------------------------------------------------------------- */ div.chat div.visitor div.name, div.chat div.operator div.name { font-weight: bold; } div.chat div.visitor div.message, div.chat div.operator div.message { padding: 0 25px; } /* -------------------------------------------------------------- KNOWLEDGEBASE -------------------------------------------------------------- */ .kbarticle { padding: 2px 5px 5px 15px; } .kbviews { color:#A8A8A8; font-size:10px; } .kbalsoread { padding: 5px 5px 5px 15px; background-color: #f8f8f8; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; font-weight: bold; margin: 10px 0 10px 0; } /* -------------------------------------------------------------- TEXT COLORS -------------------------------------------------------------- */ .textblack { color: #000000; } .textblue { color: #224488; } .textgreen { color: #779500; } .textgrey { color: #888888; } .textgold { color: #ffbb55; } .textorange { color: #ff6600; } .textred { color: #cc0000; } /* -------------------------------------------------------------- BUTTONS -------------------------------------------------------------- */ input.button,input.buttongo,input.buttonwarn { margin:0 7px 0 0; background-color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee; border-left:1px solid #eee; line-height:130%; text-decoration:none; font-weight:bold; color:#565656; cursor:pointer; width:auto; overflow:visible; padding:4px 7px 3px 7px; } input.button:hover{ background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; } input.buttongo:hover{ background-color:#E6EFC2; border:1px solid #C6D880; color:#529214; } input.buttonwarn:hover{ background-color:#fbe3e4; border:1px solid #fbc2c4; color:#d12f19; } /* -------------------------------------------------------------- TWITTER FEED -------------------------------------------------------------- */ #twitterfeed ul { list-style-type: none; padding: 0; margin: 15px 0 20px 0; } #twitterfeed li { background-image: url(../../images/twittericon.png); background-repeat: no-repeat; background-position: 0; margin: 0 20px 10px 20px; padding-left: 25px; } #twitterfeed p { text-align: center; margin: 15px; } #announcementstwitter { float: right; width: 250px; margin: 0 0 20px 10px; padding: 10px 0 10px 0; border: 1px dashed #f5e303; background-color: #ffffec; } #announcementstwitterfeed ul { list-style-type: none; padding: 0; margin: 15px 0 0 0; } #announcementstwitterfeed li { padding: 10px; border-top: 1px dashed #f5e303; } #announcementstwitterfeed p { text-align: center; padding: 10px; margin: 10px 0 0 0; border-top: 1px dashed #f5e303; } .tweetbutton { float: right; margin: 0 15px 15px 15px; } /* -------------------------------------------------------------- QUOTES -------------------------------------------------------------- */ .quotecontainer { border: 1px solid #ccc; background-color: #fff; background-image:url('../../images/quote.png'); background-repeat:no-repeat; background-position: 10px 11px; color: #666; margin: 10px; } .quotecontainer:hover { background-color: #efefef; cursor: hand; cursor: pointer; } .quotecontainer .quoteid { float: left; width: 80px; padding: 13px 0 0 40px; text-align: center; font-size: 24px; } .quotecontainer .quoteleft { float: left; padding: 10px 0 10px 0; font-size: 11px; } .quotecontainer .quoteleft .subject { font-weight: bold; font-size: 14px; padding-bottom: 4px; color: #000; width: 350px; } .quotecontainer .quoteright { float: right; padding: 10px 15px 0 0; text-align: right; } .quotecontainer .quoteright .stage { font-weight: bold; font-size: 12px; padding-bottom: 4px; } /* -------------------------------------------------------------- CLIENT AREA HOMEPAGE -------------------------------------------------------------- */ .duebalance { background-color: #F2FFE1; width: 80%; margin: 10px auto 0 auto; padding: 5px 0 2px 0; font-size: 18px; text-align: center; color: #86BC16; } .duebalance.overdue { background-color: #FFB9B9; color: #cc0000; } .creditbalance { background-color: #F2FFE1; width: 80%; margin: 0 auto 10px auto; padding: 2px 0 5px 0; font-size: 15px; color: #86BC16; text-align: center; } .creditbalance.overdue { background-color: #FFB9B9; color: #fff; } .balanceoptions { text-align: center; margin: 5px 10px 0 0; font-size: 12px; } .homeyourdetails { margin: 15px 0 0 0; padding: 5px; font-size: 12px; } .homeyourdetails .title { font-size: 14px; font-weight: bold; text-align: center; } .homeyourdetails .update { float: right; margin: 35px 30px 0 0; font-size: 11px; text-align: center; } .homeyourdetails .update a { color: #000; } .homeyourdetails .details { border-left: 10px solid #f2f2f2; padding: 10px 0 10px 20px; margin: 15px; width: 400px; } .homequicklinks { float: right; margin: 0; width: 310px; padding: 5px; text-align: center; font-size: 10px; } .homequicklinks .title { font-size: 14px; font-weight: bold; padding-bottom: 5px; text-align: center; } .homequicklinks .cols { float: left; width: 150px; margin-left: 5px; } .homequicklinks ul { list-style-type: none; margin: 0; } .homequicklinks li { font-size: 14px; margin: 0 0 5px -40px; padding: 4px; background-color: #f2f2f2; text-align: center; } .homequicklinks li:hover { background-color: #C6DCF4; } .homequicklinks li:hover a { color: #fff; } .quickjumpbar { border: 1px dashed #ccc; background-color: #f2f2f2; margin: 15px 0 0 0; padding: 10px; font-size: 13px; } .quickjumpbar .col1 { float: left; width: 20%; font-size: 16px; font-weight: bold; text-align: center; } .quickjumpbar .cols { float: left; width: 40%; text-align: center; } .quickjumpbar input { border: 1px solid #ccc; padding: 3px; font-size: 12px; } .clear { clear: both; } /* Security */ div#twofaactivation { margin: 50px auto; padding: 20px; width: 75%; min-height: 250px; background-color: #fff; border: 4px solid #efefef; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } div#twofaactivation p { margin: 15px 0; } whmcs/templates/alykhanservices/css/style.css @charset "utf-8"; /* CSS Document */ body { margin: 0; padding: 0;} /* fonts for box's h2, p, a, label */ .box h2, p , a, label { font-family: 'Exo', sans-serif;} a:link, a:active, a:visited{ text-decoration:none; } /* main box styles */ .box { width: 330px; height: auto; left: 50%; top: 10%; padding: 15px; position: fixed; display: inline-block; background: white; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0, .4); text-align: center; border: 1px solid #b4b1b1; visibility: hidden; z-index: 10; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity .5s, top .5s; -moz-transition: opacity .5s, top .5s; -ms-transition: opacity .5s, top .5s; -o-transition: opacity .5s, top .5s; transition: opacity .5s, top .5s; } .overlay:target+.box { top: 42%; opacity: 1; visibility: visible; } .overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .overlay:target { visibility: visible; opacity: 1; } /* close button you can change background */ .close { background-image:url(../images/close.png); height: 48px; width:48px; position: absolute; right: -18px;; text-align: center; text-decoration: none; top: -20px; } .close:hover { -webkit-filter: brightness(10%); } /* login with facebook button */ .fb { background-image: url(../images/fb-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#3b5998; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #133783; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.fb:hover { background-color:#5782d9; }.fb:active { position:relative; top:1px; } /* login with twitter button */ .tw { background-image: url(../images/tw-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#00aeed; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #027091; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.tw:hover { background-color:#009dd1; }.tw:active { position:relative; top:1px; } /* login signup buttons red and blue */ input[type=button] { padding: 5px 25px; border: 1px solid; font-size: 11px; cursor: pointer; } input[type=button].red { color: #fff; border-color: #cc3333; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); /* Gradient */ background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #cb4229 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#cb4229)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#cb4229 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#cb4229 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#cb4229',GradientType=0 ); /* IE6-9 */ -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } input[type=button].red:hover { background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #c9371e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#c9371e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#c9371e 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#c9371e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#c9371e',GradientType=0 ); /* IE6-9 */ } input[type=button].red:active { background: #e35940; } input[type=button].blue { color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } input[type=button].blue:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue:active { background: #9ae0e9; } input[type=button].blue-round { margin-bottom:10px; color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } input[type=button].blue-round:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue-round:active { background: #9ae0e9; } /* text fields */ .text-field { display: block; margin: 0 auto; width: 180px; height:10px; border: 1px solid #c0c2c7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #8c8f90; padding: 10px; font-style: italic; font-size: 11px; margin-bottom: 10px; -moz-box-shadow: inset 0 1px 3px -1px #b4b1b1; -webkit-box-shadow: inset 0 1px 3px -1px #b4b1b1; box-shadow: inset 0 1px 3px -1px #b4b1b1; } .text-field:focus { outline: none; box-shadow: inset 0 2px 0 rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,0.1), 0 0 5px 1px #51CBEE; } /* Error notification it is not visible because: visibility:hidden */ .error { position:absolute; width: 362px; height:50px; margin-left:-16px; margin-top:13px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color:#b20a0a; box-shadow: 0 0 10px rgba(0,0,0, .4); visibility:hidden; } .error .errortext { vertical-align:middle; margin-top:17px; font-family: 'Exo', sans-serif; } .box p { display: inline; color: #7e7e7e; font-size: 11px; } #forg { color: #7e7e7e; margin-left:95px; } #buttons, .connectwith { display:block; padding-bottom:15px; } WHMCS support and technical support won't help me out so I'd appreciate any assistance I can get!
  3. Hey! So for the past three days I have been trying to integrate my sites header and footer with WHMCS to match the rest of my site. Here is the link to my site: http://www.alykhan.ca Here is the link to my site with the edited header.tpl and and footer.tpl: http://alykhan.ca/whmcs/index.php?systpl=alykhanservices As you can see my header and footer do not match the rest of my site at all! Can someone help me as to where I have gone wrong? To view my coding, just right click on the page and select view source. I believe the issue is to do with the css or style as all the text shows up but not the way it is suppose to like the rest of the site. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Alykhan Suleman - Portal Home</title> <base href="http://www.alykhan.ca/whmcs/" /> <link rel="stylesheet" type="text/css" href="templates/alykhanservices/style.css" /> <script type="text/javascript" src="includes/jscript/jquery.js"></script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Portal Home - Alykhan Suleman</title> <base href="http://www.alykhan.ca/whmcs/" /> <script type="text/javascript" src="includes/jscript/jquery.js"></script> <link href="templates/alykhanservices/css/bootstrap.css" rel="stylesheet"> <link href="templates/alykhanservices/css/whmcs.css" rel="stylesheet"> <script src="templates/alykhanservices/js/whmcs.js"></script> <!-- Bootstrap --> <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- web font --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,800" rel="stylesheet" type="text/css"> <!-- icon fonts --> <link type="text/css" rel="stylesheet" href="templates/alykhanservices/font-icons/custom-icons/css/custom-icons.css"> <link type="text/css" rel="stylesheet" href="templates/alykhanservices/font-icons/custom-icons/css/custom-icons-ie7.css"> <!-- Custom css --> <link type="text/css" rel="stylesheet" href="templates/alykhanservices/HTML/css/layout.css"> <link type="text/css" id="colors" rel="stylesheet" href="templates/alykhanservices/HTML/css/colors.css"> <link type="text/css" rel="stylesheet" href="css/layout.css"> <link type="text/css" id="colors" rel="stylesheet" href="css/colors.css"> <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="js/modernizr-2.6.1.min.js"></script> </head> <body> <!-- Primary Page Layout ================================================== --> <!-- globalWrapper --> <div id="globalWrapper"> <!-- header --> <header id="mainHeader" class="clearfix"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner preHeader"> <div class="container"> <div class="row-fluid"> <div class="span6 clearfix"> <ul class="quickMenu"> Partners <li><a href="http://www.brandedemails.ca"> Branded Emails </a></li> <li><a href="http://www.windsites.ca">Wind Sites </a></li> <li><a href="http://www.alyk.ca">UnlockCellCodes </a></li> <ul class="quickMenu"> </ul> </div> <div class="span6 clearfix"> <ul class="socialNetwork"> <li><a href="http://www.facebook.com/#!/pages/Alykhan-Suleman-Technology-Consulting/371214272994536?fref=ts" class="icon-facebook socialIcon tips" title="follow me on Facebook"><span>facebook</span></a></li> <li><a href="http://www.twitter.com/alykhans" class="icon-twitter-bird socialIcon tips" title="follow me on Twitter (/alykhans)"><span>twitter</span></a></li> <li><a href="https://plus.google.com/111246329699784142452" class="icon-gplus socialIcon tips" title="follow me on Google +"><span>google +</span></a></li> <li><a href="http://www.linkedin.com/in/alykhan" class="icon-linkedin socialIcon tips" title="follow me on Linkedin (/alykhan)"><span>linkedin</span></a></li> </ul> </div> </div> </div> </div> </div> <div class="navbar navbar-fixed-top mainNav"> <div class="navbar-inner"> <div class="container"> <a href="index.html" class="brand"><img src="images/main-logo.png" alt="himalaya"/></a> <nav id="mainMenu"> <ul> <li><a href="index.html" class="firstLevel active" >Home</a> <ul> </ul> <li> <a href="about.html" class="firstLevel">About</a> </li> <li> <a href="services.html" class="firstLevel">Services</a> </li> <li><a href="externallinks.html" class="firstLevel">External Links</a> </li> <li><a href="clients.html" class="firstLevel">Clients</a> </li> <li><a href="http://www.alykhan.me" class="firstLevel">Portfolio</a> </li> <li> <a href="contact.html" class="firstLevel last">Contact</a> </li> </ul> </nav> </div> </div> </div> </header> <!-- header --> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <ul class="nav"> <li><a href="index.php">Home</a></li> </ul> <ul class="nav"> <li><a href="announcements.php">Announcements</a></li> </ul> <ul class="nav"> <li><a href="knowledgebase.php">Knowledgebase</a></li> </ul> <ul class="nav"> <li><a href="serverstatus.php">Network Status</a></li> </ul> <ul class="nav"> <li><a href="affiliates.php">Affiliates</a></li> </ul> <ul class="nav"> <li><a href="contact.php">Contact Us</a></li> </ul> <ul class="nav pull-right"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Account <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="clientarea.php">Login</a></li> <li><a href="register.php">Register</a></li> <li class="divider"></li> <li><a href="pwreset.php">Forgot Password?</a></li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </div> </div><!-- /navbar-inner --> </div><!-- /navbar --> <div class="whmcscontainer"> <div class="contentpadded"> <div class="well"> <div class="styled_title"> <h1>Choose a Domain...</h1> </div> <p>Start your web hosting experience with us by entering the domain name you want to register, transfer or simply purchase hosting for below...</p> <br /> <div class="textcenter"> <form method="post" action="domainchecker.php"> <input type="hidden" name="token" value="36d120142a86c83ec56d4596c229eed0a0d6195a" /> <input class="bigfield" name="domain" type="text" value=" eg. yourdomain.com" onfocus="if(this.value==' eg. yourdomain.com')this.value=''" onblur="if(this.value=='')this.value=' eg. yourdomain.com'" /> <div class="captchainput" align="center"> <p>Please enter the characters you see in the image below into the text box provided. This is required to prevent automated submissions.</p> <p><img src="includes/verifyimage.php" align="middle" /> <input type="text" name="code" class="input-small" maxlength="5" /></p> </div> <div class="internalpadding"> <input type="submit" name="hosting" value="Order Hosting Only" class="btn btn-large" /></div> </form> </div> </div> <div class="row"> <div class="col2half"> <div class="internalpadding"> <div class="styled_title"> <h2>Order New Services</h2> </div> <p>Visit the Order Form to browse the Products & Services we offer. Existing customers can also purchase optional extras and addons here.<br /><br /></p> <form method="post" action="cart.php"> <input type="hidden" name="token" value="36d120142a86c83ec56d4596c229eed0a0d6195a" /> <p align="center"><input type="submit" value="Go to Order Form »" class="btn" /></p> </form> </div> </div> <div class="col2half"> <div class="internalpadding"> <div class="styled_title"><h2>Manage Your Account</h2></div> <p>Already registered with us? If so, click the button below to login to our client area from where you can manage your account.<br /><br /></p> <form method="post" action="clientarea.php"> <input type="hidden" name="token" value="36d120142a86c83ec56d4596c229eed0a0d6195a" /> <p align="center"><input type="submit" value="Secure Client Login »" class="btn" /></p> </form> </div> </div> </div> <div class="row"> <div class="styled_title"> <h2>Our Latest Tweets</h2> </div> <div id="twitterfeed"> <p><img src="images/loading.gif"></p> </div> <script language="javascript"> jQuery(document).ready(function(){ jQuery.post("announcements.php", { action: "twitterfeed", numtweets: 3 }, function(data){ jQuery("#twitterfeed").html(data); }); }); </script> </div> <p style="text-align:center;">Powered by <a href="http://www.whmcs.com/" target="_blank">WHMCompleteSolution</a></p> <footer> <section id="mainFooter"> <div id="backToTop"> <div class="container" > <a href="#" class="iconWrapper"><i class="icon-up-open"></i></a> </div> </div> <div class="container" id="footer"> <div class="row"> <div class="span2 testimonialWidget"> <h3>ABOUT</h3> <ul> <li> <h4><a href="http://www.alykhan.me">Portfolio</a></h4> </li> <li> <h4> <a href="http://www.about.me/alykhans">About.me</a></h4> </li> <li> <h4> <a href="http://cv.alykhan.ca">Resume</a></h4> </li> </ul> </div> <div class="span2 testimonialWidget"> <h3>Links</h3> <ul> <li> <h4><a href="http://www.facebook.com">Facebook</a></h4> </li> <li> <h4> <a href="http://www.twitter.com/alykhans">Twitter</a></h4> </li> <li> <h4> <a href="http://www.linkedin.com/in/alykhan">LinkedIn</a></h4> </li> <li> <h4><a href="http://www.old.alykhan.ca">Old Site</a></h4> </li> </ul> </div> <div class="span2 projectWidget"> <h3>MEDIA & Extras</h3> <ul> <li> <h4><a href="services.html">Domain & Hosting Deals</a></h4> </li> <li> <h4> <a href="contact.html">Terms of Service</a></h4> </li> <li> <h4><a href="contact.html">Privacy Policy</a></h4> </li> <li> <h4><a href="appdev.html">App Dev</a></h4> </li> <li> <h4><a href="clients.html">Clients</a></h4> </li> </ul> </div> <div class="span2 newsWidget"> <h3>Services</h3> <ul> <li> <h4><a href="services.html">Computer Classes</a></h4> </li> <li> <h4><a href="services.html">Domain Management</a></h4> </li> <li> <h4><a href="services.html">Web Development</a></h4> </li> <li> <h4><a href="services.html">Mobile Services</a></h4> </li> <li> <h4><a href="services.html">Computer Repair</a></h4> </li> <li> <h4><a href="services.html">Technology Consulting</a></h4> </li> </ul> </div> <div class="span2 contactWidget"> <h3>Contact</h3> <address> <strong>Alykhan Suleman</strong> <p> <i class="icon-location"></i> Chilliwack<br/> British Columbia, Canada <br /> <i class="icon-phone"></i> 604.832.5845 <br /> <i class="icon-mail-alt"></i> <a href="mailto:alykhan@alykhan.ca">alykhan@alykhan.ca</a> </p> <p> vCard </p> </address> </div> </div> </div> </section> <section id="footerRights"> <div class="container"> <div class="row"> <div class="span12"> <div class="innerBg"> <p><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_CA"><img src="http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png"alt="Creative Commons Licence" style="border-width:0;vertical-align:; top;" height="15" width="80" /></a><a href="http://www.dmca.com/" title="DMCA"> <img src ="http://images.dmca.com/Badges/dmca_protected_sml_120al.png" alt="DMCA.com" /></a></p> <p>Copyright � Alykhan Suleman / All rights reserved.</p> </div> </div> </div> </div> </section> </footer> </div> <link type="text/css" rel="stylesheet" href="css/layout.css"> <link type="text/css" id="colors" rel="stylesheet" href="css/colors.css"> <script type="text/javascript" src="js-plugin/respond/respond.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- third party plugins --> <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap-carousel-ie.js"></script> <script type="text/javascript" src="js-plugin/pretty-photo/js/jquery.prettyPhoto.js"></script> <script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js-plugin/hoverdir/jquery.hoverdir.js"></script> <script type="text/javascript" src="js/custom.js"></script> </body> </html>
×

Important Information

By using this site, you agree to our Terms of Use & Guidelines