{"componentChunkName":"component---src-templates-raw-html-js","path":"/internal-pencil-banner-creation/","result":{"pageContext":{"pageContent":{"HTML":{"order":0,"visible":true,"scriptJS":"","rawHTML":"
\n\n\n\n\nPencil Banner Editor — Team MXS\n\n\n\n\n\n\n\n\n
\n\n\n
\n
\n
\n
\n
\n Team MXS · Internal Tool\n

Pencil Banner Editor

\n

\n Edit colors, text & padding. Copy the code. Paste into the DealerMasters HTML Array. Designed to lock the approved Team MXS banner template — no custom HTML required.\n

\n
\n
\n\n\n
\n
\n\n \n
\n
\n

Banner Settings

\n live update\n
\n
\n\n
\n
\n \n
\n \n
\n\n
\n
\n
\n \n
\n
\n \n \n
\n
\n
\n
\n \n
\n
\n \n \n
\n
\n
\n\n
\n
\n \n ?\n \n Banner Height\n Higher padding = taller banner. Same width across; only top/bottom changes.\n
    \n
  • Slim — 0.5% — minimal strip
    • \n
  • Normal — 1% — DM default
    • \n
  • Wide — 2% — emphasized
    • \n
  • X-Wide — 3% — major announcements
    • \n
\n \n \n
\n
\n \n \n \n \n
\n
\n\n
\n
\n \n ?\n \n Banner Text Size\n Sets the HTML heading tag used inside the banner — this controls how large the text renders.\n
    \n
  • Small — <h3> — subtle, low-key
    • \n
  • Medium — <h2> — DM default
    • \n
  • Large — <h1> — bold & attention-grabbing
    • \n
\n \n \n
\n
\n \n \n \n
\n
\n\n \n
\n \n
\n
\n Banner hiding under the nav, or floating too low?
\n Pick the dealership brand below to auto-set the spacing. Then use the two symptoms to fine-tune:\n
• Banner hidden under the nav → nav floats over it. Keep \"floats over\" = Yes, and if it's still clipped, bump the spacing up (Custom).\n
• Big gap above the banner → too much spacing. Set \"floats over\" to No, or lower the Custom px.\n
\n
\n
\n \n ?\n \n Pick the dealership's brand\n Each OEM template has a different nav height. Pick the brand to auto-set the right top spacing.\n
    \n
  • ✓ Confirmed — verified on a live site
    • \n
  • (est.) — best guess, verify on the live site & tell the team to confirm
    • \n
  • General — use when the template is unknown
    • \n
  • Custom — type an exact px value
    • \n
\n \n \n
\n \n
\n
\n \n \n px\n
\n
\n New template? Measure the nav ›\n
\n

On the live dealer site at full desktop width, open DevTools → Console, paste this, press Enter:

\n (()=>{const c=[...document.querySelectorAll('header,#header,.js-header,[class*=\"header\"]')].map(e=>{const r=e.getBoundingClientRect();return{b:Math.round(r.bottom),t:r.top,w:r.width}}).filter(o=>o.t<10&&o.b>40&&o.b<250&&o.w>800).sort((a,b)=>b.b-a.b);return c.length?c[0].b:'no nav found - use the visual method'})()\n

Returns the real nav's bottom edge in px (it filters out sliders & page-tall elements that fooled older snippets). Put that number in Custom above, set floats-over to Yes, then send it to the team to confirm.

\n

If it says \"no nav found\": right-click the nav bar → Inspect, hover the highlighted element, and read its pixel height from the tooltip.

\n
\n
\n
\n\n
\n
\n \n ?\n \n Does the nav sit ON TOP of the page?\n Look at the very top of the live dealer site.\n
    \n
  • Yes — nav floats over the content (fixed, or an overlay on the hero) → banner needs top spacing or it hides under the nav
    • \n
  • No — nav pushes content down normally → banner needs NO top spacing
    • \n
\n A nav can scroll away and still float over the top — what matters is whether it covers the banner. Picking a brand auto-sets this; you can override.\n \n \n
\n
\n \n \n
\n
\n\n
\n
\n \n ?\n \n Space below the banner\n DM Gatsby templates wrap page content in a .body div with a padding-top that creates a gap below the banner. Flush zeros it out.\n
    \n
  • Flush — removes the gap (recommended default)
    • \n
  • Normal — keeps the dealer's original spacing
    • \n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n\n \n
\n
\n \n ?\n \n Invisible code comment\n Auto-fills with today's date and is always added as an HTML comment at the top of the code. It's never visible on the live site — only developers see it in the code. Edit the text if you want, but it works as-is.\n \n \n
\n \n

Auto-dated & always included as an invisible <!-- AMT Note: ... --> comment. Visible to devs, never shown on the website. Editable.

\n
\n\n \n
\n
\n\n \n
\n\n
\n
\n

Live Preview

\n as rendered on site\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n

Generated Code — paste into DM HTML Insert field

\n \n
\n
\n 
\n        
\n      
\n\n    
\n  
\n\n  \n  
\n    
\n      Where it goes\n      
Placement Instructions
\n      
Pick the scope. Follow the steps. Publish.
\n    
\n\n    
\n      
\n        Page-Specific Placement\n        
One page only
\n        
    \n          
  1. In DM, open the specific page for the banner
    2. \n          
  2. Scroll to the HTML Array section
    3. \n          
  3. Open or create a Raw HTML block component
    4. \n          
  4. Paste the generated code into the HTML Insert field
    5. \n          
  5. Set Component Order to -1 so it renders at the very top
    6. \n          
  6. Go back to Pages in the left nav and press Publish
    7. \n        
\n      
\n      
\n        Sitewide Placement\n        
Every page
\n        
    \n          
  1. In DM, go to Site Settings
    2. \n          
  2. Find the Site-Wide Top HTML box
    3. \n          
  3. Paste the generated code below the final style / div block already in the field
    4. \n          
  4. Save & verify across multiple pages
    5. \n        
\n      
\n    
\n\n    
\n      Component Order Note (Page-Specific Only)\n      For page-specific placement: if the page doesn't already have a Raw HTML block in the HTML Array, you'll need to create a new block component for this. Set its Component Order to -1 — that's what pushes the banner above all other page content. The order field is in the DM UI, not in the code. Sitewide placement doesn't need this — just paste below the existing block in the Site-Wide Top HTML box.\n    
\n  
\n\n
\n\n\n
\n  
\n    Team MXS · Internal\n    
Built. Branded. Locked.
\n    
\n      This editor enforces the approved MXS pencil banner template. Edits are restricted to colors, text, padding, and heading size — keeping every dealership banner on-brand and platform-safe.\n    
\n    
\n      Team MXS · Internal Tool · teammxs.com\n    
\n  
\n
\n\n
\n\n\n\n\n\n\n
"},"SEO":{"order":15,"visible":true,"seo":{"MetaData":"","MetaTitle":"","tags":["",{"tagName":"robots","tagContent":"noindex","id":"\"robotsnoindex\"","editState":false},{"tagName":"robots","tagContent":"nofollow","id":"\"robotsnofollow\"","editState":false}]}}},"title":"Internal Pencil Banner Creation","theme":{"colors":{"primary":"#0a0f1c","secondary":"white","text":"#ffffff","secondarytext":"#272727","accent1":"#276df1","accent2":"#276df1"}},"dealerInfo":{"dealerAddress":"333 N Lantana Street, Suite 122,,Camarillo, CA 93010","dealerLogo":"https://media.dealermasters.com/Nissan/MXS/MXS_logo_04.webp","dealerName":"Team MXS","salesNumber":"866-665-4669","serviceNumber":"866-665-4669","partsNumber":"866-665-4669","bodyShopNumber":"866-665-4669","financeNumber":"866-665-4669","manufacturer":"","website":"Team MXS","websiteLink":"/","directions":"https://www.google.com/maps/","newInventory":"/","usedInventory":"/","bgBackground":"","salesHours":[{"day":"Mon - Fri","time":"8 AM - 5 PM PST"}],"financeHours":[],"serviceHours":[],"partsHours":[],"collisionHours":[],"managerSpecialPage":"/manager","financeSpecialPage":"/finance","leaseSpecialPage":"/lease","privacy":"/","termsOfService":"/","favicon":"https://media.dealermasters.com/6351ab9310c6d3e9abe42c4b/dbf217aa4f6ef4a9a7227a195766d659.png","gtmId":"GTM-PZD6C7W","socialThumbnail":"https://media.dealermasters.com/6351ab9310c6d3e9abe42c4b/dbf217aa4f6ef4a9a7227a195766d659.png"},"inventorymanagement":{"filterOptions":"NUC","costrange":"5000","mileagerange":"10000","months":"180","downpayment":"15","aRate":"0","bRate":"0","cRate":"0","dRate":"0","eRate":"0","fRate":"0","unavailableImg":"","vehiclecardbutton":[{"btnleft":"","btnleftlink":"","btnright":"","btnrightlink":"","overrideTheme":false,"btncolor":"","btntxtcolor":""}],"topHtmlVDP":"
","botHtmlVDP":"
","topHtmlSRP":"
","botHtmlSRP":"
","disclaimerSRP":"
We make every effort to present information that is accurate. However, it is based on data provided by the vehicle manufacturar and/or other sources and therefore exact configuration, color, specifications & accesories should be used as a guide only and are not guaranteed. Under no circumstances will be liable for any inaccuracies, claims or losses of any nature. Furthermore inventory is subject to prior sale and prices are subject ot change without notice., cannot be combined with any other offer(s), do not include provincial or local taxes, tags, registration or title fees. To ensure your complete satisfaction, please verify accuracy prior to purchase.
\n","vdpslug":"{{year}}/{{make}}/{{model}}/{{vin}}","actionButtons":[{"buttonText":"Check availability","buttonLink":"","buttonImage":"","overrideTheme":"","btncolor":"","btntxtcolor":""}],"disclaimerVDP":"
We make every effort to present information that is accurate. However, it is based on data provided by the vehicle manufacturar and/or other sources and therefore exact configuration, color, specifications & accesories should be used as a guide only and are not guaranteed. Under no circumstances will be liable for any inaccuracies, claims or losses of any nature. Furthermore inventory is subject to prior sale and prices are subject ot change without notice., cannot be combined with any other offer(s), do not include provincial or local taxes, tags, registration or title fees. To ensure your complete satisfaction, please verify accuracy prior to purchase.
\n","disclaimerCalculator":"
","disclaimerFinanceApp":"
","disclaimerContact":"
","fallbackText":"Call for Price","PosDifText":"Dealer Accessories","NegDifText":"Dealer Discount","netPriceCustomText":"","LocationFilter":false},"footer":{"logo":"https://media.dealermasters.com/242ebbad91ba7e3a4af114846cbcd19a.png","links":[{"linkName":"SERVICE & PARTS","linkValue":"/service","subLinks":[{"linkName":"Shop Parts","linkValue":"/parts"}]}],"cookieDisclaimer":"
","linkLI":"","linkIOS":"","linkAndroid":"","bottomLinks":[{"linkName":"Dealer Masters","linkValue":"/dealermasters"},{"linkName":"eCommerce","linkValue":"/ecommerce-services"},{"linkName":"About","linkValue":"/about"},{"linkName":"Contact Us","linkValue":"?title=Get%20In%20Touch%20With%20Us#contact-form"},{"linkName":"Privacy Policy","linkValue":"/privacy-policy-and-cookie-policy"},{"linkName":"SOC 2 | Trust Center","linkValue":"https://trust.teammxs.com/"}]},"lead_url":"https://leads.dealermasters.com/leads","site_id":"6351ab9310c6d3e9abe42c4b","blogmanagement":{"blogResultsTopHTML":"\n","blogResultsBottomHTML":"
\n\n\n    
\n        
MEET WITH TEAM MXS
\n        BOOK NOW\n    
\n
\n","allBlogPagesBottomHTML":"","categoriesBlogResultsHTML":"","blogResultsPageSlug":"/blogs"},"gtmId":"GTM-PZD6C7W"}},"staticQueryHashes":["952559061"]}