Jump to content

How to make the make ground colour the full page width - Homepage.tpl


Recommended Posts

Hi All,

 

I am carrying on with my customisation learning curve, and have been working on a mock up here. Its a bit rough around the edges and some images need to be altered in size, however, i am working on my domain name checker section and would like the full page width background colour to be #4c90fe.

 

My homepage.tpl code is (i am including html comments for my editting purposes, i will change these to smarty comments on completion):

 

<!--Add Price table-->
<section>
<div class="box centered gkmod-1 nomargin">
  <h2 class="header">A price that fits your needs</h2>
  <div class="content">
     <div class="customcentered">
        <p class="gkCentered">We provide simple affordable web design and hosting packages . Do not see what you need? Click to get a quote and see what extras are available, logo design, blog inclusion, social media integration....whatever you have in mind we can help.</p>
        <div class="gkPriceTable gkPriceTableAnimated col3">
           <dl class="loaded">	
		<i class="fa fa-user fa-2" aria-hidden="true"></i>
              <dt>Personal</dt>
              <dd class="gkPrice">£***<small> Per month</small></dd>
              <dd>Free Domain Name*</dd>
              <dd>Free 12 Month Hosting</dd>
              <dd>5 Email Addresses</dd>
              <dd>2GB Storage</dd>
              <dd>Content Management System</dd>
              <dd>5 hours support included</dd>
              <dd>Online Tutorials</dd>
              <dd>Set-Up included</dd>
              <dd></dd>
              <dd><a href="#">Choose</a></dd>
           </dl>
           <dl class="gkPremium loaded">
		<i class="fa fa-users fa-2" style="color:#fff;" aria-hidden="true"></i>
              <dt>Small Business</dt>
              <dd class="gkPrice">£***<small> Per month</small></dd>
              <dd>Free Domain Name*</dd>
              <dd>Free 12 Month Hosting</dd>
              <dd>Unlimited Email Addresses</dd>
              <dd>10GB Storage</dd>
              <dd>Content Management System</dd>
              <dd>Integrated Shopping Cart</dd>
              <dd>Standard SSL Certificate</dd>
              <dd>10 hours support included</dd>
              <dd>Online Tutorials</dd>
              <dd>Set-up Included</dd>
              <dd><a href="#">Choose</a></dd>
           </dl>
           <dl class="loaded">
		<i class="fa fa-university fa-2" aria-hidden="true"></i>
              <dt>E-Commerce</dt>
              <dd class="gkPrice">£***<small> Per month</small></dd>
              <dd>Fully Ofsted Compliant</dd>
              <dd>Complete School colour Integration</dd>
              <dd>Free 12 Month Hosting</dd>
              <dd>10GB Storage</dd>
              <dd>Content Management System</dd>
              <dd>Standard SSL Certificate</dd>
              <dd>Online Tutorials</dd>
              <dd>Set-up Included</dd>
              <dd><a href="#">Choose</a></dd>
           </dl>
        </div>
        <p class="gkDisclaimer"><strong>*</strong> If you already have a domain we can help you point this to your new site, school domains are not included.</p>
     </div>
  </div>
</div>
</section>
<!--end price table-->

<!--Start of domain name checker-->
<section id="name-checker">
<div>
hello world
</div>
</section>

<!--end of domain name checker-->
{*{if $twitterusername}

   <h2>{$LANG.twitterlatesttweets}</h2>

   <div id="twitterFeedOutput">
       <p class="text-center"><img src="{$BASE_PATH_IMG}/loading.gif" /></p>
   </div>

   <script type="text/javascript" src="templates/{$template}/js/twitter.js"></script>

{elseif $announcements}

   <h2>{$LANG.news}</h2>

   {foreach $announcements as $announcement}
       {if $announcement@index < 2}
           <div class="announcement-single">
               <h3>
                   <span class="label label-default">
                       {$announcement.rawDate|date_format:"M jS"}
                   </span>
                   <a href="{if $seofriendlyurls}{$WEB_ROOT}/announcements/{$announcement.id}/{$announcement.urlfriendlytitle}.html{else}announcements.php?id={$announcement.id}{/if}">{$announcement.title}</a>
               </h3>

               <blockquote>
                   <p>
                       {if $announcement.text|strip_tags|strlen < 350}
                           {$announcement.text}
                       {else}
                           {$announcement.summary}
                           <a href="{if $seofriendlyurls}{$WEB_ROOT}/announcements/{$announcement.id}/{$announcement.urlfriendlytitle}.html{else}announcements.php?id={$announcement.id}{/if}" class="label label-warning">{$LANG.readmore} »</a>
                       {/if}
                   </p>
               </blockquote>

               {if $announcementsFbRecommend}
                   <script>
                       (function(d, s, id) {
                           var js, fjs = d.getElementsByTagName(s)[0];
                           if (d.getElementById(id)) {
                               return;
                           }
                           js = d.createElement(s); js.id = id;
                           js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                           fjs.parentNode.insertBefore(js, fjs);
                       }(document, 'script', 'facebook-jssdk'));
                   </script>
                   <div class="fb-like hidden-sm hidden-xs" data-layout="standard" data-href="{$systemurl}{if $seofriendlyurls}{$WEB_ROOT}/announcements/{$announcement.id}/{$announcement.urlfriendlytitle}.html{else}announcements.php?id={$announcement.id}{/if}" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>
                   <div class="fb-like hidden-lg hidden-md" data-layout="button_count" data-href="{$systemurl}{if $seofriendlyurls}{$WEB_ROOT}/announcements/{$announcement.id}/{$announcement.urlfriendlytitle}.html{else}announcements.php?id={$announcement.id}{/if}" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>
               {/if}
           </div>
       {/if}
   {/foreach}
{/if}*}

 

The css i have used is:

 

#name-checker  {
height:412px;
background-color:#4c90fe;
overflow: visible;
width:100%;
}

 

But it does not cover the entire width, am i missing a DIV somewhere does anybody know. Any support would be most appreciated?

 

Best Regards

Donna

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.

  • 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