HTML Codes for Reference

Link to Google Doc

Img Src

Change the size and/or font of subjects/questions/titles in different blocks (not title blocks though)

<span style="font-family: 'Dancing Script'; font-size: 28px;">insert verbiage here</span>

Hide Price Until Greater Than Zero css

<style>

.cart__item-price {

display: none;

}

</style>

Full width logo area on side menu templates

@media (max-width: 999px) {
  .header__content, .menu-layout__content {
  max-width: none;
  width: 100%;
  }

  .logo__link, .logo__picture {
      display: block;
  }

  .logo__img {
      margin-inline: auto;
  }
}

Text area

<textarea cols="100" rows="3"> EMAIL HTML GOES HERE

</textarea>

</center>

Center text on image with text + image block (update block ID and image height. Image height will depend on what layout you choose)

@media (min-width:768px) and (max-width:999px) {
.block--1606334 .grid__cell:first-child {
height: 507px;
display: flex;
flex-direction: column;
justify-content: center;
}
}
</style>

Change font size for footer tagline text

<style>

.taglines-block {

font-size: WHATEVER FONT SIZE GOES HEREpx;

}

</style>

Add image into HTML (paste direct img URL in LINK)

<imgsrc=”LINK”>

Embed something that lives somewhere else

<img src=”LINKURLGOESHERE”>IMG SRC

FONT

Clickable email address

<a href = "mailto: abc@example.com">Send Email</a>

Clickable Phone #

Embeddable clickable texting widget (copy code into footer html block)

https://tools.simpletexting.com/#click-to-text

Button in text editor

LEGACY

<p><a class="page-builder-widget__button-button" href="https://ccomp.zibster.com/form/teacher-appreciation-new" target="_parent">LEARN MORE</a></p>

PB8

<a href="LINK URL HERE" class="button-block__btn u-no-text-decoration custom-link custom-link--inline-block"

style="padding-bottom: 5px;">

<span class="btn__content">LEARN MORE</span>

</span>

Disable right clicking, task ID 16009

Code to fix in meantime, added to <BODY>

Do not use

<style>

.main-nav__link {

letter-spacing: 1pt;

}

</style>

AUTOPLAY MUTE VIDEO

3 column button

<span class="btn__content">BOOK SESSION</span>

</span>

</a>

</div>

<span class="btn__content">GET GROUP QUOTE</span>

</span>

</a>

</div>

<span class="btn__content">HEADSHOT BOOTH</span>

</span>

</a>

</div>

Prevent images in image block grid from opening in large view

<style>

/*IMAGES NOT CLICKABLE*/

.block--569163, .block--577810{

pointer-events: none;

}

</style>

Change font size

<style>

.block--559793 .grid--col-4-medium-up .last-item__link, .block--559793 .grid--col-4-medium-up .images-editorial-square-layout__title {

font-size: calc(18px * var(--ff-global-p-multiplier));

}

</style>

Code for pinterest:

Step 1

add this to javascript section of overall site: <script async defer src="//assets.pinterest.com/js/pinit.js"></script>

Step 2.

Create a site link,

Text Only

Label: Pin

Links To: Ext Link

URL: https://www.pinterest.com/pin/create/button/

Code to remove + icon from side menu templates

<style>

.main-nav__dropdown-icon {display:none;}

</style>

MAKE PRODUCT SQUARES FIT DIFF SIZES (FIT ANY ORIENTATION)

-o-object-fit: contain;

object-fit: contain;

}

</style>

Codes for auto-playing videos:

Youtube:

Vimeo

HIDE HEADER

<style>

.header {display:none;}

</style>

LANDING PAGE CODE (top menu templates?)

<style>

.logo__content {

display: none;

}

/*HIDES MENU*/

.header__menu, .menu-layout-trigger--open-type {

width: 100%;

display: none;

}

/*HIDES SOCIAL & SITE LINKS*/

.grid.u-hidden-medium-down {

display: none;

}

/*NON CLICKABLE LOGO*/

.logo__link, .logo__picture {

pointer-events: none;

}

/*HIDES FOOTER*/

.footer {

display: none;

}

</style>

LANDNG PAGE CODE (Lennon template)

<style>

/*HIDES MENU*/

.header__menu, .menu-layout-trigger--open-type {

width: 100%;

display: none;

}

/*HIDES SOCIAL & SITE LINKS*/

.grid--gutter-ultra-thin>.grid__cell {

padding: 10px 0 0 10px;

display: none;

}

/*NON CLICKABLE LOGO*/

.logo__link, .logo__picture {

pointer-events: none;

}

/*HIDES FOOTER*/

.footer {

display: none;

}

</style>

REDUCES SIDE OF MOBILE TITLES ON LIST BLOCK IF ONLY LIST BLOCK ON PAGE

<style>

@media(max-width:456px){

.list-block__title {

color: #575757;

font-size: 20px;

}

</style>

Hide menu

<style>

/*HIDES MENU*/

nav.main-nav.main-nav--horizontal-direction.main-nav--hover-dropdown-trigger.main-nav--x-align-center.main-nav--dropdown-below.main-nav--dropdown-left.main-nav--dropdown-relative-to-item.header__menu.u-hidden-medium-down.u-padding-thin, .menu-layout-trigger--open-type{

display: none;

}

</style>

Changes Button Graphic To Classic while keeping graphics underline

Add to body section of page

<style>

.app--ghost-graphics .btn--text, .app--round-ghost-graphics .btn--text, .app--underline-graphics .btn--text {

border-width: 2px;

/* border-style: solid; */

/* border-color: var(--c-btn-buttonBorder,var(--c-global-buttonBorder)); */

background-color: #707E89;

}

</style>

Hides share button on products

Paste into body section of page in which the product block is placed

<style>

.blog-post-detail__item-share

{display: none}

</style>

GOOGLE TRANSLATE ENGLISH TO SPANISH CODE (GOES INTO HEAD SECTION OF CSS/JS)

<!--

#goog-gt-tt {display:none !important;}

.goog-te-banner-frame {display:none !important;}

.goog-te-menu-value:hover {text-decoration:none !important;}

body {top:0 !important;}

#google_translate_element2 {display:none!important;}

.gbutton {

border: 0px;

}

-->

</style>

<div>

<button class="gbutton" onclick="doGoogleTranslate('en|en');">English</button>

<button class="gbutton" onclick="doGoogleTranslate('en|es');">Spanish</button>

</div>

function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'en',autoDisplay: false}, 'google_translate_element2');}

</script>

/* <![CDATA[ */

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3 c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}',43,43,'||document|var|if|length|function|GoogleTranslateFireEvent|value|createEvent||||||true|else|doGoogleTranslate||getElementById|google_translate_element2|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split('|'),0,{}))

/* ]]> */

</script>

Remove dates from blog posts

Editorial layout ONLY

-paste this in the body

-no need to add anything to the posts

<style>

.blog-editorial-layout__info-item~.blog-editorial-layout__info-item {

margin-top: 10px;

display: none;

}

.blog-detail__banner-info {

display: none;

}

</style>

Landing page emerson

<style>

.main-nav--horizontal-direction .main-nav__content {

-webkit-flex: 0 1 auto;

-ms-flex: 0 1 auto;

flex: 0 1 auto;

display: none;

}

.footer {

color: #FFFFFF;

background-color: rgba(15,120,137,1);

display: none;

}

.site-links__link--1 {

color: #666666;

display: none;

}

.social__pipe {

border-right: 2px solid #666666;

display: none;

}

.btn--icon .btn__content {

display: none;

}

.logo__link, .header__site-links, .header__social, .fixed-open-trigger__trigger, .fixed-menu__content {

pointer-events: none;

}

</style>

Google Analytics General Code

Replace UA # with clients UA#

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'UA-52747679-2');

</script>

Hide scheduler share button

element.style {

}

.scheduler-detail__item-share {

display: none;

</script>

<style>

.u-cursor-pointer.js-show-share-popup {

display: none;

}

</style>

Google Translate Dropdown Button

function googleTranslateElementInit() {

new google.translate.TranslateElement({

pageLanguage: 'en'

}, 'google_translate_element');

}

</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Hide Branding (not in all areas, but on main pages) - add in CSS area in design tab

<style>

.brand{
display: none;
}

</style>

Hide date from blog for blog feed setups

</style>