Template 7-D Header BG Colour Issue

Anonymous
Not applicable

Template 7-D Header BG Colour Issue

Has anybody had any issues with the 'Header BG Colour' for Marketo Template 7-D. It doesn't matter what colour I change it to, it doesn't update. Thanks.

9 REPLIES 9
Frank_Breen2
Level 10

Re: Template 7-D Header BG Colour Issue

Can you show the sample of your code? You need the following 3 things for it to work:

<meta class="mktoColor" id="headerBG" mktoName="Header BG Color" default="#222222">

.header

{

background-color:${headerBG};

}

<div class="header"></div>

Anonymous
Not applicable

Re: Template 7-D Header BG Colour Issue

Thanks Jeffrey, I checked this and all seems to be as below but it's still not working.

Anonymous
Not applicable

Re: Template 7-D Header BG Colour Issue

Hi Jeffrey/Frank,

I checked out both of these issues and they are as mentioned above but the issue is still there.

Thanks,

Nicole

Anonymous
Not applicable

Re: Template 7-D Header BG Colour Issue

Further to Frank's point, the specific color should live in one of those three places. Generally changing the hex code in the <meta> element should do the trick, as the .header class just references that value.

Anonymous
Not applicable

Re: Template 7-D Header BG Colour Issue

Hi Jeffrey,

I checked out both of these issues and they are as mentioned above but the issue is still there.

Thanks,

Nicole

Frank_Breen2
Level 10

Re: Template 7-D Header BG Colour Issue

Can you share your code, without that we couldn't give a full answer.

Anonymous
Not applicable

Re: Template 7-D Header BG Colour Issue

Hi Frank,

I have posted the code below.  Apparently it's do with removing the 'navbar-inverse' text from line 377 of the template. I tried and it worked as this setting overrides the header colour setting.



  </div><!--/row -->

 

  <div class="row mtb">

   <div class="col-lg-10 col-lg-offset-1">

    <div class="mktoImg" id="section3Image4" mktoName="Section 3 Image 4" mktoImgClass="expandToFit"></div>

                <div class="mktoText" id="section3Text" mktoName="Section 3 Text">

    <p class="mtb centered">There are many variations of passages of <b>Lorem Ipsum</b> available, but the majority have <b>suffered alteration</b> in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

                </div>

   </div>

  </div><!--/row -->

</div><!--/container -->

</div><!-- Section 3 -->

<div class="section4">

<div id="info">

  <div class="container">

   <div class="row">

    <div class="col-md-6">

                <div class="mktoImg" id="section4Image" mktoName="Section 4 Image" mktoImgClass="expandToFit" style="width:350px; margin:0 auto;"></div>

    </div><!--/col-md-6 -->

   

    <div class="col-md-6">

                <div class="mktoText" id="section4Text" mktoName="Section 4 Text">

     <p><i class="ion-arrow-right-b"></i>Lorem Ipsum is simply dummy text of the printing and typesetting industry, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

     <p><i class="ion-arrow-right-b"></i>Printer took a galley of type and scrambled it to make a type specimen book.</p>

     <p><i class="ion-arrow-right-b"></i>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

                    </div>

    <p class="mt"><a href="${section4ButtonLink}"><button class="btn btn-lg btn-white">${section4ButtonLabel}</button></a></p>

    </div>

   

   </div><!--/row -->

  </div>

</div><!--/info -->

</div><!-- Section 4 -->

<div class="section5">

<div class="container">

  <div class="row mt">

   <div class="col-lg-8 col-lg-offset-2 testimonials">

             <div class="mktoText" id="section5Header" mktoName="Section 5 Header">

    <h2 class="theme">What Our Users Think About Us</h2>

                </div>

           <div class="item">

             <div class="mktoImg circle" id="section5Image" mktoName="Section 5 Image" mktoImgClass="expandToFit" style="width:80px; margin:0 auto;"></div>

                      <div class="mktoText" id="section5CaptionTitle" mktoName="Section 5 Caption Title 1">

             <h3>Mark Turin</h3>

                      </div>

                       <div class="mktoText" id="section5Text" mktoName="Section 5 Text">

             <p class="ts">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

                      </div>

           </div>

   </div><!--/col-lg-8-->

  </div><!--/row -->

</div><!--/container -->

</div><!-- Section 5 -->

<div class="footer">

<div id="f">

  <div class="container">

   <div class="row mtb">

    <div class="col-md-6 col-md-offset-3">

     <div class="mktoForm" id="footerForm" mktoName="Footer Form" style="min-height:80px;"></div>

    </div>

   </div><!--row -->

  </div><!--/container -->

</div><!--/F -->

</div>

   

   <!-- Bootstrap core JavaScript

    ================================================== -->

    <!-- Placed at the end of the document so the pages load faster -->

<script src="//templates.marketo.net/template7/js/jquery.min.js"></script>

<script src="//templates.marketo.net/template7/js/bootstrap.min.js"></script>

<script src="//templates.marketo.net/template7/js/retina-1.1.0.js"></script>

</body>

</html>

Frank_Breen2
Level 10

Re: Template 7-D Header BG Colour Issue

The above code is only part of the code, but I think I found the issue from the original template. The issue is that the Bootstrap CSS file is overriding what's in your template and the variable, I assume you wouldn't notice as the colour is the same and most people may not change.

In the template, it has a line:

<link href="https://nation.marketo.com//templates.marketo.net/template7/css/bootstrap.css" rel="stylesheet">

It links to this: http://templates.marketo.net/template7/css/bootstrap.css

Look for a line that says: .navbar-inverse { background-color: #222; border-color: #080808; }

This is overriding what you are setting for .header.

The HTML looks something like this:

<div class="header">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

To fix it, you need to bring

.navbar-inverse { background-color: #222; border-color: #080808; }

into the Head and change it to

.navbar-inverse { background-color: ${headerBG}; border-color: #080808; }

This code is for Template 7-D. You may find that you have to bring in other styles too depending on your setup.

Using Bootstrap is great and very handy for design, but it has a lot of styles predefined, that's why when you see Marketo using them, they add a lot of the styles to the Head so they are easily editable and become the default. This is a Marketo issue, not how you've created your template. Let me know if this works.

Anonymous
Not applicable

Re: Template 7-D Header BG Colour Issue

Thanks so much for your help. You definitely made it a lot easier.