Jump to content

VirtualHorror

New Member
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About VirtualHorror

  • Rank
    Junior Member
  1. Hello there, I recently installed a theme for my WHMCS Installation (I am aware I should contact the theme developer directly but am just looking for answers from the official WHMCS Community as of now). So my WHMCS is installed at https://portal.protonservershost.com but when I go to a cart page such as this https://portal.protonservershost.com/cart.php?gid=8 I see that there is a small Show Menu option on the left hand which by default is closed but when clicked on it it opens up perfectly fine and shows the menu but the problem is it pushes the third product on the orderform to the right which makes it not visible to people. I also want to display only 2 times in one row. Please help me fix this ASAP as I really need help with this. I have attached the style.css and products.tpl file code below. I think I should have hired a PHP Developer or contacted theme developer directly but currently I am in no position to do so due to certain reasons and hence I need help. Style.css: /*------------------------------------------------------------------ * template Name: Nuhost - Multipurpose Hosting HTML & WHMCS Template * Author: coodiv (nedjai mohamed) * Author URI: https://coodiv.net/ * Author URI: https://themeforest.net/user/coodiv * Description: A Bootstrap Responsive Domain & Web Hosting Template + WHMCS template * Version: 1.0.0 * Copyright 2018 coodiv. -------------------------------------------------------------------*/ div#order-premium_comparison { padding:0 0 0 0; margin:0 0 30px 0; height: 100%; width: 100%; line-height:18px; font-size:14px; color:#666666; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: ===antialiased !important; } /* Text Styling */ #order-premium_comparison a, #order-premium_comparison a:hover, #order-premium_comparison a:active, #order-premium_comparison a:visited, #order-premium_comparison a:link { outline:none; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; } #order-premium_comparison div, #order-premium_comparison ul, #order-premium_comparison li { padding:0 0 0 0; margin:0 0 0 0; } /* Headings */ #order-premium_comparison h1 { } #order-premium_comparison h2 { } #order-premium_comparison h3 { padding:0 0 0 0; margin:0; font-size:32px; line-height:38px; font-weight:bold; color:#333333; } #order-premium_comparison h4 { padding:0 0 0 0; margin:10px 0; font-size:24px; color:#333333; } #order-premium_comparison h5 { padding:0 0 0 0; margin:5px 0; font-size:16px; color:#666666; } #order-premium_comparison .txt-center { text-align:center; } #order-premium_comparison .alert { margin-top: 70px; padding: 15px; } #order-premium_comparison .main-container { padding:0 2% 40px 2%; margin:0 auto; } #order-premium_comparison .main-container.price-01 { font-size:14px; line-height:17px; } #order-premium_comparison .main-container.price-01 h3, #order-premium_comparison .main-container.price-01 h5 { font-weight:normal; } #order-premium_comparison .price-table-container { padding:10px 0 0 0; margin:0 0 0 0; } #order-premium_comparison .price-table-container ul { padding:0 0 0 0; margin:0 0 0 0; list-style:none; text-align:center; } #order-premium_comparison .price-table-container ul li { padding:30px 10px 5px 10px; margin:0 0 0 0; display:inline-block; background:url(../img/shadow-btm.png) no-repeat center bottom; } #order-premium_comparison .price-table-container .price-table { padding:0 0 0 0; margin:0 0 0 0; width: 270px; min-width: 270px; background:#ffffff; -moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; border-radius:5px; -webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,0.30); -moz-box-shadow: 0 0 2px 0 rgba(0,0,0,0.30); box-shadow: 0 0 2px 0 rgba(0,0,0,0.30); } #order-premium_comparison .price-table-container .price-table.active { margin:-30px 0 0 0; width:245px; } #order-premium_comparison .price-table-container .price-table .top-head { /* Old browsers */ background: #006699; /* FF3.6+ */ background: -moz-linear-gradient(top, #006699 0%, #004c66 100%); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006699), color-stop(100%,#004c66)); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, #006699 0%,#004c66 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, #006699 0%,#004c66 100%); /* IE10+ */ background: -ms-linear-gradient(top, #006699 0%,#004c66 100%); /* W3C */ background: linear-gradient(to bottom, #006699 0%,#004c66 100%); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#004c66',GradientType=0); border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; } #order-premium_comparison .price-table-container .price-table .top-head .top-area { padding:15px 0; margin:0 0 0 0; border-bottom:1px solid #004662; -webkit-text-shadow: 0 1px 2px rgba(0,0,0,0.4); -moz-text-shadow: 0 1px 2px rgba(0,0,0,0.4); -ms-text-shadow: 0 1px 2px rgba(0,0,0,0.4); text-shadow: 0 1px 2px rgba(0,0,0,0.4); } #order-premium_comparison .price-table-container .price-table .top-head .top-area h4 { padding:0 0 0 0; margin:0 0 0 0; font-weight:normal; color:#ffffff; line-height:29px; } #order-premium_comparison .price-table-container .price-table .top-head .top-area p { padding:5px 0 0 0; margin:0 0 0 0; color:#80a7ba; font-size:13px; line-height:20px; } #order-premium_comparison .price-table-container .price-table .top-head .price-area { padding:15px 0; margin:0 0 0 0; border-top:1px solid #12688d; -webkit-text-shadow: 0 1px 2px rgba(0,0,0,0.4); -moz-text-shadow: 0 1px 2px rgba(0,0,0,0.4); -ms-text-shadow: 0 1px 2px rgba(0,0,0,0.4); text-shadow: 0 1px 2px rgba(0,0,0,0.4); color:#ffffbf; font-size:16px; } #order-premium_comparison .price-table-container .price-table .top-head .price-area .price { padding:10px 0 10px 0; } #order-premium_comparison .price-table-container .price-table .top-head .price-area .price span { font-size:38px; } #order-premium_comparison .price-table-container .order-button, #order-premium_comparison .price-table-container .order-button:hover { padding:13px 0; margin:10px 25px; font-size:16px; color:#ffffff; display:block; font-weight:normal; /* Old browsers */ background: #4a92b7; /* FF3.6+ */ background: -moz-linear-gradient(top, #4a92b7 0%, #006699 100%); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a92b7), color-stop(100%,#006699)); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, #4a92b7 0%,#006699 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, #4a92b7 0%,#006699 100%); /* IE10+ */ background: -ms-linear-gradient(top, #4a92b7 0%,#006699 100%); /* W3C */ background: linear-gradient(to bottom, #4a92b7 0%,#006699 100%); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4a92b7', endColorstr='#006699',GradientType=0); -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; border-radius:3px; text-decoration:none; -webkit-text-shadow: 0 0 1px rgba(0,0,0,0.4); -moz-text-shadow: 0 0 1px rgba(0,0,0,0.4); -ms-text-shadow: 0 0 1px rgba(0,0,0,0.4); text-shadow: 0 0 1px rgba(0,0,0,0.4); -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.40); -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.40); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.40); } #order-premium_comparison .price-table-container .order-button.unavailable:hover { cursor: not-allowed; /* Old browsers */ background: #404A53; /* FF3.6+ */ background: -moz-linear-gradient(top, #404A53 0%, #949499 100%); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404A53), color-stop(100%,#949499)); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, #404A53 0%,#949499 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, #404A53 0%,#949499 100%); /* IE10+ */ background: -ms-linear-gradient(top, #404A53 0%,#949499 100%); /* W3C */ background: linear-gradient(to bottom, #404A53 0%,#949499 100%); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404A53', endColorstr='#949499',GradientType=0); } #order-premium_comparison .price-table-container .price-table ul { padding: 4px 10px 10px 10px; margin:0 0 0 0; list-style:none; } #order-premium_comparison .price-table-container .price-table ul li { padding:17px 0 15px 0; margin:0 0 0 0; width:100%; border-bottom:1px solid #d9d9d9; color:#333333; text-align:center; line-height:16px; font-size:14px; background:none; } #order-premium_comparison .price-table-container .price-table ul li a { color:#006699; } #order-premium_comparison .price-table-container .price-table ul li:last-child { border-bottom:0; } #order-premium_comparison .price-table-container .price-table .popular-plan { padding:7px 0 5px 0; background:rgba(0,0,0,0.2); border-bottom:1px solid #004662; color:#a3d900; font-size:13px; text-transform:uppercase; } #order-premium_comparison .includes-features { margin:0 auto; width:100%; max-width:780px; padding-top:10px; } #order-premium_comparison .includes-features .head-area { padding:0 0 0 0; margin:0 0 0 0; text-align:center; background:url(../img/head-bg.png) no-repeat center center; background-size:100% auto; } #order-premium_comparison .includes-features .head-area span { padding:0 20px; margin:0 0 0 0; display:inline-table; background:#ffffff; } #order-premium_comparison .main-container.price-01 .includes-features .head-area span { background:#f3f3f3; } #order-premium_comparison .includes-features ul.list-features { padding:20px 0 0 0; margin:0 0 0 0; list-style:none; } #order-premium_comparison .includes-features ul.list-features li { padding:0 0 0 22px; margin:5px 0; width:33%; display:inline-table; background:url(../img/tick.png) no-repeat; } /* This media query is written for iPad and tablets */ @media (max-width: 991px) { #order-premium_comparison .includes-features ul.list-features li { width:48%; } } /* This media query is written for Mobile only */ @media (max-width: 600px) { #order-premium_comparison .price-table-container .price-table { margin:0 0 0 0; width: 300px; } #order-premium_comparison .price-table-container .price-table.active { margin:0 0 0 0; width:300px; } } /* This media query is written for Mobile only */ @media (max-width: 480px) { #order-premium_comparison .includes-features ul.list-features li { width:100%; } } /* Sidebar */ html, body { overflow-x: hidden; /* Prevent scroll on narrow devices */ } .row-product-selection { position: relative; left: 0; -webkit-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; } .product-selection-sidebar { position: absolute; top: 0; left: -300px; width: 300px; display: none; } #btnShowSidebar { margin: 0 0 20px 0; } .tittle-simple-cart-em h5 { position: relative; font-size: 30px; color: #3b566e; font-weight: 300; line-height: 1.4em; margin-bottom: 90px; text-align: center; } .tittle-simple-cart-em h5 span { position: relative; font-size: 15px; line-height: 16px; font-weight: 300; padding-top: 5px; display: block; color: #a0a9ad; } .order-button.unavailable.outofstock { background: #F44336; text-align: center; padding: 5px 23px; color: #fff; border-radius: 25px; font-weight: 600; letter-spacing: 1px; font-size: 14px; } @media (max-width: 1200px) { .cart-whmcs-custom-hosting-order .tree-steps-hosting-plans-title { font-size: 17px; } } #btnShowSidebar { margin: 0 0 20px 0; font-size: 13px; font-weight: 600; color: #97a1a5; background: #f0f2f3; padding: 6px 20px; border-radius: 30px; border: 0; text-decoration: none; outline: none !important; box-shadow: none; } #bredh-cart-custom .bredh-orderform-template{ text-align: center; padding: 30px 30px; background: #fff; box-shadow: 0 10px 100px 0 rgba(77, 77, 119, 0.16); border-radius: 5px; position: relative; overflow: hidden; margin-bottom: 35px; } #bredh-cart-custom .bredh-orderform-template:before { content: ''; position: absolute; width: 400px; height: 400px; background: rgba(240, 98, 154, 0.05); bottom: -120px; right: -130px; border-radius: 100%; z-index: 0; pointer-events: none; } #bredh-cart-custom .bredh-orderform-template .bredh-orderform-template-header{ padding-bottom: 0; border-bottom: 1px solid #eaedef; margin-bottom: 30px; } #bredh-cart-custom .bredh-orderform-template .bredh-orderform-template-header{ padding-bottom: 0; border-bottom: 1px solid #eaedef; margin-bottom: 30px; } #bredh-cart-custom .bredh-orderform-template .bredh-orderform-template-header .hosting-plans-icon{ font-size: 35px; color: #ffc107; float: right; margin: 14px 0; } #bredh-cart-custom .bredh-orderform-template .bredh-orderform-template-header .pricing-table-title { text-align: left; margin-bottom: 15px; font-size: 20px; } #bredh-cart-custom .bredh-orderform-template .bredh-orderform-template-header .pricing-table-title span{ display: block; font-size: 15px; color: #58676f; font-weight: 100; letter-spacing: 0.5px; } #bredh-cart-custom .bredh-orderform-template .bredh-orderform-template-header .tha_price{ text-align: left; font-size: 14px; color: #b6c2c7; display: block; margin: 10px 0 15px; font-style: inherit !important; } #bredh-cart-custom .bredh-orderform-template .bredh-orderform-template-header .tha_price i{ font-style: inherit !important; font-size: 22px; color: #4f5a5f; margin-right: 5px; font-weight: 500; } #bredh-cart-custom .bredh-orderform-template .pricing-table-body{ padding-left: 0; text-align: left; } #bredh-cart-custom .bredh-orderform-template .pricing-table-body li{ list-style: none; font-size: 14px; padding: 6px; font-weight: 500; border-radius: 30px; color: #4c5b63; position: relative; z-index: 1; } #bredh-cart-custom .bredh-orderform-template .pricing-table-button{ background: #2fd5c9; border: 2px solid #2fd5c9; margin-top: 5px; display: inline-block; float: left; color: #fff; font-weight: 500; font-size: 14px; padding: 9px; width: 100%; border-radius: 5px; text-decoration: none !important; margin-bottom: 15px; position: relative; } #bredh-cart-custom .bredh-orderform-template .pricing-table-button:hover{ background: #fff; border: 2px solid #2fd5c9; color: #2fd5c9; } #bredh-cart-custom .bredh-orderform-template .palans-setup-free-styles small{ font-size: 13px; font-weight: 400; color: #8e9ea7; text-transform: lowercase; } #bredh-cart-custom .price-table-container .row:nth-child(1) .col-md-4:nth-child(1) .bredh-orderform-template.cart-whmcs-custom-hosting-order .hosting-plans-icon { color: #ffc107; } #bredh-cart-custom .price-table-container .row:nth-child(1) .col-md-4:nth-child(2) .bredh-orderform-template.cart-whmcs-custom-hosting-order .hosting-plans-icon { color: #8BC34A; } #bredh-cart-custom .price-table-container .row:nth-child(1) .col-md-4:nth-child(3) .bredh-orderform-template.cart-whmcs-custom-hosting-order .hosting-plans-icon { color: #F44336; } #bredh-cart-custom .price-table-container .row:nth-child(2) .col-md-4:nth-child(1) .bredh-orderform-template.cart-whmcs-custom-hosting-order .hosting-plans-icon { color: #03A9F4; } #bredh-cart-custom .price-table-container .row:nth-child(2) .col-md-4:nth-child(2) .bredh-orderform-template.cart-whmcs-custom-hosting-order .hosting-plans-icon { color: #9C27B0; } #bredh-cart-custom .price-table-container .row:nth-child(2) .col-md-4:nth-child(3) .bredh-orderform-template.cart-whmcs-custom-hosting-order .hosting-plans-icon { color: #CDDC39; } .price-table-container .row:nth-child(3) .col-md-4:nth-child(1) .tree-steps-hosting-plans.cart-whmcs-custom-hosting-order .tree-steps-hosting-plans-icon { color: #ffc107; } .price-table-container .row:nth-child(3) .col-md-4:nth-child(2) .tree-steps-hosting-plans.cart-whmcs-custom-hosting-order .tree-steps-hosting-plans-icon { color: #8BC34A; } .price-table-container .row:nth-child(3) .col-md-4:nth-child(3) .tree-steps-hosting-plans.cart-whmcs-custom-hosting-order .tree-steps-hosting-plans-icon { color: #F44336; } #bredh-cart-custom .bredh-orderform-template.features-plan{ background: #48486b; background: -webkit-linear-gradient(left top,#79799c,#131327); background: -o-linear-gradient(bottom right,#79799c,#131327); background: -moz-linear-gradient(bottom right,#79799c,#131327); background: linear-gradient(to bottom right,#79799c,#131327); } #bredh-cart-custom .bredh-orderform-template.features-plan:before { width: 400px; height: 400px; border-radius: 0; bottom: 0; right: 1px; z-index: 0; pointer-events: none; background: url(../img/plans.svg) no-repeat right bottom !important; } #bredh-cart-custom .bredh-orderform-template.features-plan .bredh-orderform-template-header .pricing-table-title { color: #fff; } #bredh-cart-custom .bredh-orderform-template.features-plan .bredh-orderform-template-header .tha_price i { color: #fff; } #bredh-cart-custom .bredh-orderform-template.features-plan .bredh-orderform-template-header { border-bottom: 1px solid #737392; } #bredh-cart-custom .bredh-orderform-template.features-plan .pricing-table-body li { color: #d4dce0; } #bredh-cart-custom .bredh-orderform-template.features-plan .pricing-table-button { background: transparent; border: 2px solid #fff; } #bredh-cart-custom .bredh-orderform-template.features-plan .pricing-table-button:hover { background: #2fd5c9; border: 2px solid #2fd5c9; color: #fff; } #bredh-cart-custom .bredh-orderform-template.features-plan .palans-setup-free-styles small { position: relative; color: #fff; opacity: 0.8; } #bredh-cart-custom .bredh-orderform-template.features-plan .bredh-orderform-template-header .hosting-plans-icon { color: #fff !important; } #bredh-cart-custom .bredh-orderform-template .bredh-orderform-template-features-tag { background: #2fd5c9; color: #fff; font-weight: 500; font-size: 13px; padding: 3px 10px; border-radius: 18px; letter-spacing: 0.5px; } Products.tpl <script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/main.js"></script> <link rel="stylesheet" type="text/css" href="{$WEB_ROOT}/templates/orderforms/{$carttpl}/css/style.css" property="stylesheet" /> <script> jQuery(document).ready(function () { jQuery('#btnShowSidebar').click(function () { if (jQuery(".product-selection-sidebar").is(":visible")) { jQuery('.row-product-selection').css('left','0'); jQuery('.product-selection-sidebar').fadeOut(); jQuery('#btnShowSidebar').html('<i class="fas fa-arrow-circle-right"></i> {$LANG.showMenu}'); } else { jQuery('.product-selection-sidebar').fadeIn(); jQuery('.row-product-selection').css('left','300px'); jQuery('#btnShowSidebar').html('<i class="fas fa-arrow-circle-left"></i> {$LANG.hideMenu}'); } }); }); </script> {if $showSidebarToggle} <button type="button" class="btn btn-default btn-sm" id="btnShowSidebar"> <i class="fas fa-arrow-circle-right"></i> {$LANG.showMenu} </button> {/if} <div class="row row-product-selection"> <div class="col-xs-3 product-selection-sidebar nuhost-sidebar" id="premiumComparisonSidebar"> {include file="orderforms/standard_cart/sidebar-categories.tpl"} </div> <div class="col-xs-12"> <div id="bredh-cart-custom"> <div class="main-container price-01"> <div class="txt-center"> <div class="tittle-simple-cart-em"> <h5> {if $productGroup.headline} {$productGroup.headline} {else} {$productGroup.name} {/if} {if $productGroup.tagline} <span>{$productGroup.tagline}</span> {/if} </h5> </div> {if $errormessage} <div class="alert alert-danger"> {$errormessage} </div> {/if} </div> <div id="products" class="price-table-container"> <div class="row"> {foreach $products as $product key=num} <div class="col-md-4"> <div id="product{$product@iteration}" class="bredh-orderform-template cart-whmcs-custom-hosting-order {if $product.isFeatured}features-plan{/if}"> {if $product.isFeatured}<span class="bredh-orderform-template-features-tag">{$LANG.featuredProduct|upper}</span>{/if} <div class="bredh-orderform-template-header"> <i class="fas fa-fire hosting-plans-icon"></i> <h5 class="pricing-table-title">{$product.name} <span>{$product.tagLine}</span></h5> <!-- steps hosting plan title --> <span class="tha_price"><!-- steps hosting plan price --> {if $product.bid} {$LANG.bundledeal} {if $product.displayprice} <i>{$product.displayPriceSimple}</i> {/if} {elseif $product.paytype eq "free"} <i>{$LANG.orderfree}</i> lifetyme {elseif $product.paytype eq "onetime"} <i>{$product.pricing.minprice.price}</i> {$LANG.orderpaymenttermonetime} {else} {if $product.pricing.hasconfigoptions} {$LANG.from} {/if} {$product.pricing.minprice.cycleText} <br> {/if} </span> <!-- steps hosting plan price --> </div> <div class="price-table"> <ul class="pricing-table-body"> {foreach $product.features as $feature => $value} <li id="product{$product@iteration}-feature{$value@iteration}"> {$value} {$feature} </li> {foreachelse} {$product.description} {/foreach} </ul> <div class="tree-steps-hosting-plans-footer text-center"> {if $product.qty eq "0"} <span id="product{$product@iteration}-unavailable" class="order-button unavailable outofstock">{$LANG.outofstock}</span> {else} <a class="pricing-table-button" href="{$smarty.server.PHP_SELF}?a=add&amp;{if $product.bid}bid={$product.bid}{else}pid={$product.pid}{/if}" class="order-button" id="product{$product@iteration}-order-button"> {$LANG.ordernowbutton} </a> {/if} </div> </div> {if $product.pricing.minprice.setupFee} <div class="palans-setup-free-styles"> <small>{$product.pricing.minprice.setupFee->toPrefixed()} {$LANG.ordersetupfee}</small> </div> {/if} </div> </div> {if $num % 3 == 2} </div> <div class="row"> {/if} {/foreach} </div> </div> </div> {if count($productGroup.features) > 0} <div class="includes-features"> <div class="row clearfix"> <div class="col-md-12"> <div class="head-area"> <span> {$LANG.orderForm.includedWithPlans} </span> </div> <ul class="list-features"> {foreach $productGroup.features as $features} <li>{$features.feature}</li> {/foreach} </ul> </div> </div> </div> {/if} </div> </div> </div>
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated