Jump to content

Picture behind the domain search on homepage

WaveTech

By WaveTech
in Developer Corner

 Share

Recommended Posts

WaveTech Junior Member

WaveTech

Posted
Posted

Hello 

 

I'm trying to add a picture behind the domain search on the home page but it's not working. 

I haven't changed anything in the header.tpl but added below code to custom.css 

section#home-banner {
   background-image: url('link to png picture');
}

I've checked and the link works but the CSS isn't working, I've also stripped of background colour from the style.css just to check if it does anything but the background stays blue

0
Link to comment
Share on other sites
brian! Senior Member

brian!

Posted
Posted
17 hours ago, WaveTech said:

I haven't changed anything in the header.tpl but added below code to custom.css -  I've checked and the link works but the CSS isn't working,

that should work (with or without the single quotes) - and looking at your site, I see that it now is. 🙂

17 hours ago, WaveTech said:

I've also stripped of background colour from the style.css just to check if it does anything but the background stays blue

I thinks styles.css is no longer used and is just a legacy file...

https://docs.whmcs.com/WHMCS_7.1_Asset_Changes

0
Link to comment
Share on other sites
WaveTech Junior Member

WaveTech

Posted
  • Author
Posted

I don't see the banner image... is there something I'm doing that is causing that? 

Also i worked with changing the Header and Footer and each time  I changed the header for one I wanted the orders stopped working, it would allow me to pick a product I want e.g. hosting and then get the domain name sorted and it would just throw me back to the products page instead and I could do this in a loop

0
Link to comment
Share on other sites
brian! Senior Member

brian!

Posted
Posted
19 hours ago, WaveTech said:

I don't see the banner image... is there something I'm doing that is causing that? 

aah you had it working yesterday when I looked at your site (it would be a weird coincidence if there were multiple wavetech sites out there, using WHMCS and having the same issue!) - it's still in your custom.css, but it's not working now. 🙄 

section#home-banner {
   background-image: url("https://domain.com/templates/six/css/domainbanner.png");
}

it looked like this yesterday...

UksSOGV.png

try putting the URL in double quotes and it should work - if it doesn't, throw an !important in as well, but double quoting should work. 

section#home-banner {background-image: url("https://domain.com/templates/six/css/domainbanner.png");}

if I make that tweak to your css in the browser (just adding the double quotes), then it works again on your site...

NEAPkH8.png

so hopefully just making the above tweak to custom.css will resolve this for you.

19 hours ago, WaveTech said:

Also i worked with changing the Header and Footer and each time  I changed the header for one I wanted the orders stopped working, it would allow me to pick a product I want e.g. hosting and then get the domain name sorted and it would just throw me back to the products page instead and I could do this in a loop

what did you remove from either template file ?

0
Link to comment
Share on other sites
WaveTech Junior Member

WaveTech

Posted
  • Author
Posted
36 minutes ago, brian! said:

so hopefully just making the above tweak to custom.css will resolve this for you.

I will try this now

36 minutes ago, brian! said:

what did you remove from either template file ? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="{$charset}" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{if $kbarticle.title}{$kbarticle.title} - {/if}{$pagetitle} - {$companyname}</title>

<!-- Extra-->
    <!--Bootstrap-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    
    <!--Loader-->
    <link rel="stylesheet" href="css/spinners.css">
    
    
    <!-- Vendors -->
    <link rel="stylesheet" href="vendors/owl.carousel/owl.carousel.css">
    <link rel="stylesheet" href="vendors/simple-line-icons/css/simple-line-icons.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="vendors/lineariconsFree/style.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    
    <!--Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,100,300,400italic,600,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    
    <!--Theme Styles-->
    <link rel="stylesheet" href="css/default/style.css">
    <link rel="stylesheet" href="css/responsive/responsive.css">
    
    <!--[if lt IE 9]>
        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->
    
<!-- end of extra-->

    {include file="$template/includes/head.tpl"}

    {$headoutput}

</head>
<!--
<body data-phone-cc-input="{$phoneNumberInputStyle}">

{$headeroutput}

<section id="header">
    <div class="container">
        <ul class="top-nav">
            {if $languagechangeenabled && count($locales) > 1}
                <li>
                    <a href="#" class="choose-language" data-toggle="popover" id="languageChooser">
                        {$activeLocale.localisedName}
                        <b class="caret"></b>
                    </a>
                    <div id="languageChooserContent" class="hidden">
                        <ul>
                            {foreach $locales as $locale}
                                <li>
                                    <a href="{$currentpagelinkback}language={$locale.language}">{$locale.localisedName}</a>
                                </li>
                            {/foreach}
                        </ul>
                    </div>
                </li>
            {/if}
            {if $loggedin}
                <li>
                    <a href="#" data-toggle="popover" id="accountNotifications" data-placement="bottom">
                        {$LANG.notifications}
                        {if count($clientAlerts) > 0}
                            <span class="label label-info">{lang key='notificationsnew'}</span>
                        {/if}
                        <b class="caret"></b>
                    </a>
                    <div id="accountNotificationsContent" class="hidden">
                        <ul class="client-alerts">
                        {foreach $clientAlerts as $alert}
                            <li>
                                <a href="{$alert->getLink()}">
                                    <i class="fas fa-fw fa-{if $alert->getSeverity() == 'danger'}exclamation-circle{elseif $alert->getSeverity() == 'warning'}exclamation-triangle{elseif $alert->getSeverity() == 'info'}info-circle{else}check-circle{/if}"></i>
                                    <div class="message">{$alert->getMessage()}</div>
                                </a>
                            </li>
                        {foreachelse}
                            <li class="none">
                                {$LANG.notificationsnone}
                            </li>
                        {/foreach}
                        </ul>
                    </div>
                </li>
                <li class="primary-action">
                    <a href="{$WEB_ROOT}/logout.php" class="btn">
                        {$LANG.clientareanavlogout}
                    </a>
                </li>
            {else}
                <li>
                    <a href="{$WEB_ROOT}/clientarea.php">{$LANG.login}</a>
                </li>
                {if $condlinks.allowClientRegistration}
                    <li>
                        <a href="{$WEB_ROOT}/register.php">{$LANG.register}</a>
                    </li>
                {/if}
                <li class="primary-action">
                    <a href="{$WEB_ROOT}/cart.php?a=view" class="btn">
                        {$LANG.viewcart}
                    </a>
                </li>
            {/if}
            {if $adminMasqueradingAsClient || $adminLoggedIn}
                <li>
                    <a href="{$WEB_ROOT}/logout.php?returntoadmin=1" class="btn btn-logged-in-admin" data-toggle="tooltip" data-placement="bottom" title="{if $adminMasqueradingAsClient}{$LANG.adminmasqueradingasclient} {$LANG.logoutandreturntoadminarea}{else}{$LANG.adminloggedin} {$LANG.returntoadminarea}{/if}">
                        <i class="fas fa-sign-out-alt"></i>
                    </a>
                </li>
            {/if}
        </ul>

        {if $assetLogoPath}
            <a href="{$WEB_ROOT}/index.php" class="logo"><img src="{$assetLogoPath}" alt="{$companyname}"></a>
        {else}
            <a href="{$WEB_ROOT}/index.php" class="logo logo-text">{$companyname}</a>
        {/if}

    </div>
</section>

<section id="main-menu">

    <nav id="nav" class="navbar navbar-default navbar-main" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display --
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#primary-nav">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling --
            <div class="collapse navbar-collapse" id="primary-nav">

                <ul class="nav navbar-nav">

                    {include file="$template/includes/navbar.tpl" navbar=$primaryNavbar}

                </ul>

                <ul class="nav navbar-nav navbar-right">

                    {include file="$template/includes/navbar.tpl" navbar=$secondaryNavbar}

                </ul>

            </div><!-- /.navbar-collapse --
        </div>
    </nav>

</section>

{if $templatefile == 'homepage'}
    <section style="style="background-image: url("https://wavetechcloud.com/templates/six/img/domainbanner.jpg");"id="home-banner">
        <div class="container text-center">
		
            {if $registerdomainenabled || $transferdomainenabled}
                <h2>{$LANG.homebegin}</h2>
                <form method="post" action="domainchecker.php">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                            <div class="input-group input-group-lg">
                                <input type="text" class="form-control" name="domain" placeholder="{$LANG.exampledomain}" autocapitalize="none" />
                                <span class="input-group-btn">
                                    {if $registerdomainenabled}
                                        <input type="submit" class="btn search" value="{$LANG.search}" />
                                    {/if}
                                    {if $transferdomainenabled}
                                        <input type="submit" name="transfer" class="btn transfer" value="{$LANG.domainstransfer}" />
                                    {/if}
                                </span>
                            </div>
                        </div>
                    </div>

                    {include file="$template/includes/captcha.tpl"}
                </form>
            {else}
                <h2>{$LANG.doToday}</h2>
            {/if}
        </div>
    </section>
    <div class="home-shortcuts">
        <div class="container">
            <div class="row">
                <div class="col-md-4 hidden-sm hidden-xs text-center">
                    <p class="lead">
                        {$LANG.howcanwehelp}
                    </p>
                </div>
                <div class="col-sm-12 col-md-8">
                    <ul>
                        {if $registerdomainenabled || $transferdomainenabled}
                            <li>
                                <a id="btnBuyADomain" href="domainchecker.php">
                                    <i class="fas fa-globe"></i>
                                    <p>
                                        {$LANG.buyadomain} <span>&raquo;</span>
                                    </p>
                                </a>
                            </li>
                        {/if}
                        <li>
                            <a id="btnOrderHosting" href="cart.php">
                                <i class="far fa-hdd"></i>
                                <p>
                                    {$LANG.orderhosting} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a id="btnMakePayment" href="clientarea.php">
                                <i class="fas fa-credit-card"></i>
                                <p>
                                    {$LANG.makepayment} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                        <li>
                            <a id="btnGetSupport" href="submitticket.php">
                                <i class="far fa-envelope"></i>
                                <p>
                                    {$LANG.getsupport} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
{/if}

{include file="$template/includes/verifyemail.tpl"}

<section id="main-body">
    <div class="container{if $skipMainBodyContainer}-fluid without-padding{/if}">
        <div class="row">

        {if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren())}
            {if $primarySidebar->hasChildren() && !$skipMainBodyContainer}
                <div class="col-md-9 pull-md-right">
                    {include file="$template/includes/pageheader.tpl" title=$displayTitle desc=$tagline showbreadcrumb=true}
                </div>
            {/if}
            <div class="col-md-3 pull-md-left sidebar">
                {include file="$template/includes/sidebar.tpl" sidebar=$primarySidebar}
            </div>
        {/if}
        <!-- Container for main page display content --
        <div class="{if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren())}col-md-9 pull-md-right{else}col-xs-12{/if} main-content">
            {if !$primarySidebar->hasChildren() && !$showingLoginPage && !$inShoppingCart && $templatefile != 'homepage' && !$skipMainBodyContainer}
                {include file="$template/includes/pageheader.tpl" title=$displayTitle desc=$tagline showbreadcrumb=true}
            {/if}
-->  
    <section class="row top_header"> <!-- START OF HEADER -->
        <div class="container">
            <div class="row">
                <div class="col-sm-6 wc_msg">WaveTech Cloud Solutions</div>
                <div class="col-sm-6">
                    <ul class="nav nav-pills">
                        <!--<li><a href="tel:12345612348"><i class="icon-call-out"></i>123 - 456 - 12348</a></li>-->
                        <li><a href="mailto:info@wavetechcloud.com"><i class="icon-envelope"></i>info@wavetechcloud.com</a></li>
                        <li><a href="https://facebook.com/wavetechcloud"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="https://twitter.com/wavetechcloud"><i class="fa fa-twitter"></i></a></li>
                        <!--<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-youtube"></i></a></li>-->
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <nav class="navbar navbar-default navbar-static-top fluid_header centered">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html"><img src="images/wavetech.png" alt=""></a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_navigation" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="main_navigation">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown active">
                        <a href="index.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="false" aria-expanded="false">home</a>
                        
                    </li>
                    
                    <li class="dropdown mega-drop"> <!-- Hosting -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="false" aria-expanded="false">hosting</a>
                        <ul class="dropdown-menu hosting-dropdown mega-menu">
                            <li class="service_list">
                                <div class="fleft service service1">
                                    <div class="media">
                                        <div class="media-left"><a href="#"><img src="images/icons/menu/hosting/1.png" alt=""></a></div>
                                        <div class="media-body">
                                            <a href="hosting-dedicated.html">Wave Starter</a>
                                            <p>Perfect for personal websites</p>
                                        </div>
                                    </div>
                                </div> <!--Menu Feature-->
                                <div class="fleft service service2">
                                    <div class="media">
                                        <div class="media-left"><a href="#"><img src="images/icons/menu/hosting/2.png" alt=""></a></div>
                                        <div class="media-body">
                                            <a href="hosting-shared.html">Wave Business</a>
                                            <p>Ideal for small to medium size businesses</p>
                                        </div>
                                    </div>
                                </div> <!--Menu Feature-->
                                <div class="fleft service service3">
                                    <div class="media">
                                        <div class="media-left"><a href="#"><img src="images/icons/menu/hosting/3.png" alt=""></a></div>
                                        <div class="media-body">
                                            <a href="hosting-reseller.html">Wave Enterprise</a>
                                            <p>Designed for medium to large size businesses</p>
                                        </div>
                                    </div>
                                </div> <!--Menu Feature-->
                                <div class="fleft service service4">
                                    <div class="media">
                                        <div class="media-left"><a href="#"><img src="images/icons/menu/hosting/4.png" alt=""></a></div>
                                        <div class="media-body">
                                            <a href="domain-transfer.html">Wave Unlimited</a>
                                            <p>Completely unlimited hosting solution.</p>
                                        </div>
                                    </div>
                                </div> <!--Menu Feature-->
                            </li>
                            <li class="start_offer">
                                <div class="row m0 inner">
                                    <h3 class="title">Starting@</h3>
                                    <h3 class="offered_price"><small>&pound;</small>0.99/mo</h3>
                                    <h5 class="regular_price"><small>&pound;</small>1.75/m0</h5>
                                    <a href="#" class="btn btn-default">start today</a>
                                </div>
                            </li>
                        </ul>
                    </li>
					<li class="dropdown mega-drop"> <!-- Email Services-->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="false" aria-expanded="false">Emails</a>
                        <ul class="dropdown-menu hosting-dropdown mega-menu">
                            <li class="service_list">
                                <div class="fleft service service1">
                                    <div class="media">
                                        <div class="media-left"><a href="#"><img src="images/icons/menu/hosting/1.png" alt=""></a></div>
                                        <div class="media-body">
                                            <a href="hosting-dedicated.html">Professional Emails</a>
                                            <p>Perfect for personal websites</p>
                                        </div>
                                    </div>
                                </div> <!--Menu Feature-->
                                <div class="fleft service service2">
                                    <div class="media">
                                        <div class="media-left"><a href="#"><img src="images/icons/menu/hosting/2.png" alt=""></a></div>
                                        <div class="media-body">
                                            <a href="hosting-shared.html">Email Security</a>
                                            <p>Take back control of your inbox</p>
                                        </div>
                                    </div>
                                </div> <!--Menu Feature-->
                                
                            </li>
                        </ul>
                    </li>
					<li class="dropdown mega-drop"> <!-- Web Secuirty-->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="false" aria-expanded="false">Web Security</a>
                        <ul class="dropdown-menu hosting-dropdown mega-menu">
                            <li class="service_list">
                                <div class="fleft service service1">
                                    <div class="media">
                                        <div class="media-left"><a href="#"><img src="images/icons/menu/hosting/1.png" alt=""></a></div>
                                        <div class="media-body">
                                            <a href="hosting-dedicated.html">SSL Certificates</a>
                                            <p>Perfect for personal websites</p>
                                        </div>
                                    </div>
                                </div> <!--Menu Feature-->
                                <div class="fleft service service2">
                                    <div class="media">
                                        <div class="media-left"><a href="#"><img src="images/icons/menu/hosting/2.png" alt=""></a></div>
                                        <div class="media-body">
                                            <a href="hosting-shared.html">SiteLock</a>
                                            <p>Ideal for small to medium size businesses</p>
                                        </div>
                                    </div>
                                </div> <!--Menu Feature-->
                                
                            </li>
                        </ul>
                    </li>

                    <li><a href="blog.html">News</a></li>
                    </li>
                    <li><a href="contact.html">contact</a></li>
                    <li class="login-link"><a href="https://control.wavetechcloud.com">CP LOGIN</a></li>
                    <li class="login-link"><a href="https://wavetechcloud.com/clientarea.php">LOGIN</a></li>
                    <li class=""><a href="https://wavetechcloud.com/register.php">Register</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
	<!-- END OF HEADER -->

Above you can see what I've taken out of the header

0
Link to comment
Share on other sites
brian! Senior Member

brian!

Posted
Posted

I don't like the look of the comment disabler before body - I would have thought it would be nice to keep the body tag in and working! 🙂

i'd be tempted to move the <!-- Extra--> block of css links into /includes/head.tpl - not least so that all css calls are in the one file and you're not duplicating links (e.g Open+Sans is in both).

with regards to body, I would change... 

</head>
<!--
<body data-phone-cc-input="{$phoneNumberInputStyle}">

{$headeroutput}

<section id="header">

to... 

</head>

<body data-phone-cc-input="{$phoneNumberInputStyle}">

{$headeroutput}
<!--
<section id="header">

that also leaves {$headeroutout} available should you ever need to use a ClientAreaHeaderOutput hook - from your current changes, that would not be possible.

also, you've removed sidebars from the pages, which could cause navigational issues down the road depending on the page if there are no alternate link methods provided.

0
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • 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

  I accept