Design System

Junklugger Snippets

Junk Template

Update Core Token

  • Header Make sure the font files match up before changing them `html
      <link rel="preconnect" href="https://cdn.treehouseinternetgroup.com">
  <link rel="preconnect" href="https://a80427d48f9b9f165d8d-c913073b3759fb31d6b728a919676eab.ssl.cf1.rackcdn.com/">
  <link rel="icon" href="https://cdn.treehouseinternetgroup.com/cms_core/images/jl/favicon.png">
      [[custom_core_v3_7]]
  <link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://use.typekit.net/uhd6ouc.css" >
  <link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" >
  <link rel="stylesheet" as="style" onload="this.rel='stylesheet';" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 - [[custom_core_v3_7]]
 - [[custom_core_v3_7_js]]

- Add to template CSS 
@font-face {
font-family:"FontAwesome";
font-weight:normal;
font-display:swap;
font-style:normal;
src:url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2");

}

## File Paths 

```html
https://a80427d48f9b9f165d8d-c913073b3759fb31d6b728a919676eab.ssl.cf1.rackcdn.com/images/junkluggers/ - old path 
https://cdn.treehouseinternetgroup.com/cms_core/images/jl/ - new path

Move CSS to the inline tab / base styles and navigation (Structure Styles and Font Styles)

New Logo in header / footer switch to token

  • [[custom_junk_no_tag_logo]]

  • [[custom_junk_tag_logo]]

  • CSS for logo heights WITH tagline

    @media screen and (min-width:641px) and (max-width:1024px){
  #logo img {
      max-height:135px;
  }
}
@media screen and (min-width:1025px) {
  #logo img {
      max-height:156px;
  }
}

Main Message

  • Make sure theres a mobile/desktop of image

Homepage

  • No Commented Code In Content
  • Inline the SVG Icons that are in tags
  • New Youtube Code
    <iframe
width="600"
height="373"
src="https://www.youtube.com/embed/t-2x2bEVQW0"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/t-2x2bEVQW0?autoplay=1><img src=https://img.youtube.com/vi/t-2x2bEVQW0/hqdefault.jpg alt='[company] - How It Works'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
loading="lazy"
title="[company] - How It Works"> </iframe>

Update Nav to New System

  • First, check to see if there is a script in borders hiding “Our Work” from showing in the nav or header and delete that code. Go to nav menus, the top super nav should be there as “Top Nav Imported”.
  • A lot of the dropdown info should already be filled out. Make the Commercial dropdown a Page that targets Commercial and select all three options (super split display, show grandchildren and show parent link) (sometimes there will be an additional commercial dropdown in the new code when imported, you can delete this). This will set it up so that the parent link shows in the dropdown on mobile only.
  • Make sure “Show About Us Link?” is selected on the About US silo. Again this has now been setup so it will show in the mobile dropdown only.
  • For Service Area and Book Now you will also need to select Page, the appropriate page and select all options.
  • Select Split About Us in Menu Settings, select Top Nav, replace supernav code in Borders with [[top_nav]] token. Check everything looks ok and then push live and deselect Dev Menu in Menu Settings.
  • You may need to devify to see the changes, especially when you are deleting items from the menu that were imported and make sure you remove the php tags from around the token.
  • Finally, create a new footer nav with the new tool and replace that. This often does not autogenerate, but has less fields so should be fine to setup. We also don’t have the parent link not being clickable on mobile issue, so those boxes do not need to be selected for this menu.