Standardize Banner/Snipes and beginning of the Master CSS 

This CSS code is stored on chaterseniorliving .com and then linked in each site per JS and CSS tool.

Inside the CSS and JS Toolbox on this sandbox site you will see the css link.

  1. Copy the code from there (see image).
    Sandbox CSS and JS Link (must be logged in for this link to work)
  2. Create a new code block in CSS and JS Toolbox on new desired site.
  3. Navigate to the banner/snipe section wrapper and add the ID of topNote to the section. See figure 2.

Note: This new style does not completely override all block styles so it is important to not have padding, margins, font style and font sizes in the block. The first time this is put on a home page the above styles need to be removed from the blocks. (exception buttons)

Buttons are still styled in the block editor but short of setting the border, color and font size all else is controlled by the master.

If in doubt copy the banner section from sandbox and import to the page. Then implement the new stylesheet and it should be good to go.

Standardize PPC Landing Pages Hero – Master CSS

This CSS code is stored on chaterseniorliving .com and then linked in each site per JS and CSS tool.

The standardization of ALL  h1, h2, h3, h4, h5 and h6 in the master style sheet is going to require some work on all PPC landing pages that have the “special” font treatment with the Qwigley Font. Before there were three instance of the text with different treatments for each device screen size (Mobile, Tablet and Desktop) I have consolidated this to the css sheet and now once implemented in master they need to change. 

Brett is going to supply a list of all the pages that will need to change.

Here are the instructions on how to do this.

1. The new styles will be added to the master-csl.css that is stored on Charterseniorliving.com

2. On each PPC page that has this font in the hero the mobile button will need to turned off. (See first image)

3. Once that is turned off the code in desktop only will need to be replaced per the appropriate care type. (below is the code for those Care Types)

NOTE: This is true of the Facebook page as well which is a copy of the Personal Care or Assisted Living PPC Landing page.

 

INDEPENDENT LIVING 
<h1>
<span class=“specialHero”><em>Feel the Difference</em></span>
<span class=“ppcHeroSmall”>OF INDEPENDENT LIVING AT</span>
<span class=“ppcHeroLarge”>CHARTER SENIOR LIVING
OF COMMUNITY</span>

</h1>

 

MEMORY CARE
<h1>
<span class=“specialHero”><em>Feel the Difference</em></span>
<span class=“ppcHeroSmall”>OF MEMORY CARE AT</span>
<span class=“ppcHeroLarge”>CHARTER SENIOR LIVING
OF COMMUNITY</span>

</h1>

 

PERSONAL CARE
<h1>
<span class=“specialHero”><em>Feel the Difference</em></span>
<span class=“ppcHeroSmall”>OF PERSONAL CARE AT</span>
<span class=“ppcHeroLarge”>CHARTER SENIOR LIVING
OF COMMUNITY</span>
</h1>

 

ASSISTED LIVING

 

<h1>
<span class=“specialHero”><em>Feel the Difference</em></span>
<span class=“ppcHeroSmall”>OF ASSISTED LIVING AT</span>
<span class=“ppcHeroLarge”>CHARTER SENIOR LIVING
OF COMMUNITY</span>
</h1>

Hustle Popup Code Fix

This fixes the popup showing on desktop when reducing the size of the browser and allows scroll to work on devices under 782px width.

Inside the CSS and JS Toolbox on this sandbox site you will see the fix for Hustle popups.

  1. Copy the code from there (see image).
    Sandbox CSS and JS Link (must be logged in for this link to work) NOTE: This code has changed due to a bug with Divi (8/17/2022)
  2. Create a new code block in CSS and JS Toolbox on new desired site.
  3. Add code and set Aux to entire site. Create your popup per instructions in the assets page and you are good to go.