While we do not recommend fully customizing the homepage, there are some instances when you'll want your homepage to have a similar layout to a custom landing page. There are many great 3rd party Bootstrap resource centers that provide you with the code you'll need to create a fully custom homepage. Our favorites are:


Please note that Brilliant Directories does not support custom landing pages, however, with these instructions it is easy for anyone to access and fully customize the homepage. With these instructions it should be easy for any developer in the marketplace to complete these steps for you if you need assistance with the coding. The most common issues include linking the pricing page to the your membership levels and having your custom images display the way you want them to. 

The following documentation assumes that you have already complete the custom Bootstrap layout you would like to apply to your homepage. Please have your custom HTML and CSS handy in order to follow these steps. We provided the same HTML and CSS used for this example:


customhomepage.png



Step 1 - Hiding Homepage Elements


  1. Login to the ADMIN and go to CONTENT >> EDIT PAGES >> EDIT HOMEPAGE
  2. Hide Header, Footer, Header Links, Main Menu, and check the box to make it a Full Width Page


    blob1477509921209.png



  3. Here is what your homepage looks like with these boxes checked off:


    blob1477509987940.png



  4. Go to DESIGN SETTINGS >> HOMEPAGE LAYOUT >> HOMEPAGE SEARCH SETTINGS

  5. Select "Hide On Homepage 


    blob1477515451359.png





  6. Select "Hide Entire Section" in the "Search Type" box:


    blob1477510898123.png




  7. Still inside of the HOMEPAGE LAYOUT TAB, go to HOMEPAGE SECTION ORDER and set everything to "None":


    blob1477510313520.png




  8. Click on "Save Changes"



Step 2 - Customize The Bootstrap Theme - Homepage Widget


Please follow these important steps:

  1. Go to TOOLBOX >> WIDGET MANAGER >> SEARCH FOR "Bootstrap Theme - Homepage" Widget
  2. Click on "Edit"
  3. Delete all of the current content on the HTML and CSS boxes so that they are blank. They should look like this:


    blob1477511257041.png



  4. Paste your custom HTML code inthe HTML box. 


    blob1477511759352.png




  5. Paste your custom CSS inside of the CSS box. 

  6. IMPORTANT - If you are calling an image in your template, or using the code below, you MUST add the images to your FTP and save them in the file manager, and make sure you are calling images from the proper location. We have attached the images used in this example to this article. If you download them, and upload them to your "images" folder, the images should appear on your website as well. 



Custom HTML Code Used In This Example:


<div class="container header-section">
       <h1 class="animated fadeInDown delay-07s">Welcome To %Website_name%</h1>
     <figure class="logo-header-section animated fadeInDown delay-07s">
       
  <? if ($w[website_logo]!="") { ?>
   <a href="<? if ($_SERVER[HTTPS]=="on") { ?>http://<?=$w[website_url]?><? } ?><?=$w[website_home]?>" title="<?=$w[website_name]?>">
    <img src="<?=trim($w[website_logo])?>" alt="<?=$w[website_name]?>">
   </a>
  <? } else { ?>
    <a class="logo vpad vmargin xs-nomargin" title="<?=$w[website_name]?>" href="<? if ($_SERVER[HTTPS]=="on") { ?>http://<?=$w[website_url]?><? } ?><?=$w[website_home]?>">
     <i class="animated infinite wobble fa <?=$wa[custom_14]?> pull-left hidden-sm hidden-xs bmargin"></i>
     <?=$wa[custom_150]?>
    </a>
   <? } ?>
     
        </figure>
        <div class="we-create animated fadeInUp delay-1s">
         <h3 style="color: white;"><? echo $wa[custom_151]; ?></h3>
        </div>
  <a class="animated fadeInUp delay-1s btn btn_get_listed bold" href="/join"><button type="button" class="btn btn-danger btn-lg">Start today!</button></a>
    </div>
<div style="margin-top:5%;"></div>
 <div class="container">
     <h2 class="services-header">Services</h2>
     <h6 class="services-mini-header">We offer exceptional service with complimentary hugs.</h6>
        <div class="row">
         <div class="col-lg-4 col-sm-6 wow fadeInLeft delay-05s">
             <div class="service-list">
                 <div class="service-list-col1">
                     <i class="fa-paw"></i>
                    </div>
                 <div class="service-list-col2">
                        <h3>branding &amp; identity</h3>
                        <p>Proin iaculis purus digni consequat sem digni ssim. Donec entum digni ssim.</p>
                    </div>
                </div>
                <div class="service-list">
                 <div class="service-list-col1">
                     <i class="fa-gear"></i>
                    </div>
                 <div class="service-list-col2">
                        <h3>web development</h3>
                        <p>Proin iaculis purus consequat sem digni ssim. Digni ssim porttitora .</p>
                    </div>
                </div>
                <div class="service-list">
                 <div class="service-list-col1">
                     <i class="fa-apple"></i>
                    </div>
                 <div class="service-list-col2">
                        <h3>mobile design</h3>
                        <p>Proin iaculis purus consequat digni sem digni ssim. Purus donec porttitora entum.</p>
                    </div>
                </div>
                <div class="service-list">
                 <div class="service-list-col1">
                     <i class="fa-medkit"></i>
                    </div>
                 <div class="service-list-col2">
                        <h3>24/7 Support</h3>
                        <p>Proin iaculis purus consequat sem digni ssim. Sem porttitora entum.</p>
                    </div>
                </div>
            </div>
            <figure class="col-lg-8 col-sm-6 text-right wow fadeInUp delay-02s">
    <img src="/images/macbook-pro.png" alt="">
            </figure>
       
        </div>
 </div>
<div style="margin-top:5%;"></div>
<!-- <div class="row">
 <div class="col-md-8">
  <h2 class="services-header">Search through our very useful articles</h2>
  <?php echo widget("Bootstrap Theme - Module - Articles Search","",$w[website_id],$w);?>
 </div>
<!-- <div class="col-md-4">
 <?php echo widget("Bootstrap Theme - Banner - 300_250 Rotating","",$w[website_id],$w);?>
 </div>
</div> -->
<div style="margin-top:5%;"></div>
 <div class="container">
     <div class="row">
   <figure class="col-lg-5 col-sm-4 wow fadeInLeft">
    <img src="/images/iphone.png" alt="">
            </figure>
         <div class="col-lg-7 col-sm-8 featured-work">
             <h2 class="services-header">featured work</h2>
             <P class="padding-b">Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</P>
             <div class="featured-box">
                 <div class="featured-box-col1 wow fadeInRight delay-02s">
                     <i class="fa-magic"></i>
                    </div>
                 <div class="featured-box-col2 wow fadeInRight delay-02s">
                        <h3>magic of theme development</h3>
                        <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. </p>
                    </div>
                </div>
                <div class="featured-box">
                 <div class="featured-box-col1 wow fadeInRight delay-04s">
                     <i class="fa-gift"></i>
                    </div>
                 <div class="featured-box-col2 wow fadeInRight delay-04s">
                        <h3>neatly packaged</h3>
                        <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. </p>
                    </div>
                </div>
                <div class="featured-box">
                 <div class="featured-box-col1 wow fadeInRight delay-06s">
                     <i class="fa-dashboard"></i>
                    </div>
                 <div class="featured-box-col2 wow fadeInRight delay-06s">
                        <h3>SEO optimized</h3>
                        <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. </p>
                    </div>
                </div>
                <a class="Learn-More" href="#">Learn More</a>
            </div>
        </div>
 </div>
<div style="margin-top:5%;"></div>
<h2 class="services-header">Our Pricing Plans</h2>
<?php echo widget("Bootstrap Theme - Display - Membership Plans","",$w[website_id],$w);?>
<div style="margin-top:8%;"></div>
 <div class="container">
        <h2 class="services-header">our team</h2>
        <h6 class="services-mini-header">Take a closer look into our amazing team. We won’t bite.</h6>
        <div class="team-leader-block clearfix">
            <div class="team-leader-box">
                <div class="team-leader wow fadeInDown delay-03s">
                    <div class="team-leader-shadow"><a href="#"></a></div>
     <img src="/images/team-leader-pic3.jpg" alt="">
                    <ul>
                        <li><a href="#" class="fa-twitter"></a></li>
                        <li><a href="#" class="fa-facebook"></a></li>
                        <li><a href="#" class="fa-pinterest"></a></li>
                        <li><a href="#" class="fa-google-plus"></a></li>
                    </ul>
                </div>
                <h3 class="wow fadeInDown delay-03s">Walter White</h3>
                <span class="wow fadeInDown delay-03s">Chief Executive Officer</span>
                <p class="wow fadeInDown delay-03s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>
            </div>
            <div class="team-leader-box">
                <div class="team-leader wow fadeInDown delay-06s">
                    <div class="team-leader-shadow"><a href="#"></a></div>
                    <img src="/images/team-leader-pic3.jpg" alt="">
                    <ul>
                        <li><a href="#" class="fa-twitter"></a></li>
                        <li><a href="#" class="fa-facebook"></a></li>
                        <li><a href="#" class="fa-pinterest"></a></li>
                        <li><a href="#" class="fa-google-plus"></a></li>
                    </ul>
                </div>
                <h3 class="wow fadeInDown delay-06s">Jesse Pinkman</h3>
                <span class="wow fadeInDown delay-06s">Product Manager</span>
                <p class="wow fadeInDown delay-06s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>
            </div>
            <div class="team-leader-box">
                <div class="team-leader wow fadeInDown delay-09s">
                    <div class="team-leader-shadow"><a href="#"></a></div>
                    <img src="/images/team-leader-pic3.jpg" alt="">
                    <ul>
                        <li><a href="#" class="fa-twitter"></a></li>
                        <li><a href="#" class="fa-facebook"></a></li>
                        <li><a href="#" class="fa-pinterest"></a></li>
                        <li><a href="#" class="fa-google-plus"></a></li>
                    </ul>
                </div>
                <h3 class="wow fadeInDown delay-09s">Skyler white</h3>
                <span class="wow fadeInDown delay-09s">Accountant</span>
                <p class="wow fadeInDown delay-09s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>
            </div>
        </div>
    </div>
<div style="margin-top:8%;"></div>
<div class="jumbotron">
[widget=Bootstrap Theme - Contact Us Page]
</div>


Custom CSS Used In This Example


ul li {
 list-style: none ;
}
.header-section{
 text-align:center;
 background-image: url('/images/banner-bg.jpg');
 padding: 9% 0;
 background-size: cover;
 background-position: fixed;
}
.logo-header-section{
 width:130px;
 margin:0 auto 35px;
}
.header-section h1{
 font-family: 'Montserrat',sans-serif;
 font-size:50px;
 font-weight:400;
 letter-spacing: -1px;
 margin:0 0 22px 0 ;
 color:#fff;
}
.service-list{
 padding:0 0 0 0;
 font-size:14px;
 margin-bottom:40px;
}
.service-list-col1{
 float:left;
 width:60px;
}
.service-list-col1 i{
 font-style:normal;
 font-size:38px;
 display:block;
 color:#222;
 font-family: 'FontAwesome';
 line-height:38px;
}
.service-list-col2{
 overflow:hidden;
}
.main-section.alabaster{
 background:#fafafa;
}
h2.services-header {
    font-size: 34px;
    color: #222222;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 15px 0;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}
h6.services-mini-header {
    font-size: 16px;
    color: #888888;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-align: center;
    margin: 0 0 60px 0;
}
.featured-work{
 font-size:14px;
}
.featured-work h2{
 text-align:left;
}
.featured-box{
 padding:0 0 0 0;
 margin-bottom:25px;
 font-size:14px;
}
.featured-box h3{
 margin-bottom:5px;
}
.featured-box p{
 line-height:22px;
}
.featured-work p.padding-b{
 padding-bottom:35px;
}
.featured-box-col1{
 width:60px;
 float:left;
}
.featured-box-col1 i{
 display:block;
 line-height:38px;
 font-family: 'FontAwesome';
 font-size:38px;
 color:#777777;
 font-style:normal;
}
.featured-box-col2{ overflow:hidden;}
.featured-box.magic{
 background:url(../img/magic.png) left top no-repeat;
}
.featured-box.packaged{
 background:url(../img/packaged.png) left top no-repeat;
}
.featured-box.seo{
 background:url(../img/seo.png) left top no-repeat;
}
.Learn-More{
 display:inline-block;
 padding:0 5px 0 0;
 color:#7cc576;
 font-size:16px;
 text-transform:uppercase;
 font-family: 'Montserrat', sans-serif;
 font-weight:400;
 line-height:24px;
 transition:all 0.3s ease-in-out;
 -moz-transition:all 0.3s ease-in-out;
 -webkit-transition:all 0.3s ease-in-out;
 display: none;
}
.Learn-More i{
 padding-right:15px;
}
.Learn-More:hover, .Learn-More:focus{
 text-decoration:none;
 color: #111;
}
.team-leader-block{
 max-width:993px;
 margin:0 auto;
}
.team-leader-box{
 width:30.66%;
 margin-right: 3.82979%;
 height: 490px;
 overflow: hidden;
 text-align: center;
 float: left;
}
.team-leader-box span{
 margin-bottom:24px;
 display:block;
}
.team-leader-box:nth-of-type(3n+0){ margin:0;}
.team-leader{
 width:auto;
 height:auto;
 position:relative;
 border-radius:50%;
 box-shadow:0px 0px 0px 7px rgba(241,241,241,0.80);
 margin:7px 7px 25px 7px;
 
}
.team-leader-shadow{
 transition:all 0.3s ease-in-out;
 -moz-transition:all 0.3s ease-in-out;
 -webkit-transition:all 0.3s ease-in-out;
 border-radius:50%;
 position:absolute;
 width:100%;
 height:100%;
 z-index:10;
 border-radius:50%;
}
.team-leader-shadow a{
 display:block;
 width:100%;
 height:100%;
}
.team-leader:hover .team-leader-shadow{
 box-shadow:inset 0px 0px 0px 148px rgba(17,17,17,0.80);
}
.team-leader:hover ul{ display:block; opacity:1}
.team-leader img{
 display:block;
 border-radius:50%;
}
.team-leader ul{
 display:block;
 opacity:0;
 padding:0;
 margin:0;
 list-style:none;
 position:absolute;
 left:0;
 top:50%;
 width:100%;
 text-align:center;
 margin-top:-14px;
 z-index:15;
 transition:all 0.6s ease-in-out;
 -moz-transition:all 0.6s ease-in-out;
 -webkit-transition:all 0.6s ease-in-out;
}
.team-leader ul li{
 display:inline;
 margin:0 11px;
}
.team-leader ul li a{
 font-family: 'FontAwesome';
 display:inline-block;
 font-size:28px;
 color:#fff;
 transition:all 0.3s ease-in-out;
 -moz-transition:all 0.3s ease-in-out;
 -webkit-transition:all 0.3s ease-in-out;
}
.team-leader ul li a:hover, .team-leader ul li a:focus{
 text-decoration:none;
}
.team-leader ul li a.fa-twitter:hover{
 color:#55acee;
}
.team-leader ul li a.fa-facebook:hover{
 color:#3b5998;
}
.team-leader ul li a.fa-pinterest:hover{
 color:#cb2026;
}
.team-leader ul li a.fa-google-plus:hover{
 color:#dd4b39;
}
.jumbotron {
background-color: white;
}