9 Replies Latest reply on Jan 12, 2017 2:55 PM by Nicole Sciberras

    Template 7-D Header BG Colour Issue

    Nicole Sciberras

      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.

        • Re: Template 7-D Header BG Colour Issue
          Frank Breen

          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>

          1 of 1 people found this helpful
          • Re: Template 7-D Header BG Colour Issue
            Jeffrey Brown

            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.

            1 of 1 people found this helpful
              • Re: Template 7-D Header BG Colour Issue
                Nicole Sciberras

                Hi Jeffrey,

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

                Thanks,

                Nicole

                  • Re: Template 7-D Header BG Colour Issue
                    Frank Breen

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

                      • Re: Template 7-D Header BG Colour Issue
                        Nicole Sciberras

                         

                        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>

                          • Re: Template 7-D Header BG Colour Issue
                            Frank Breen

                            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="//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.

                            1 of 1 people found this helpful