CreativeTech Wiki (internal)

Explore

Recipes

Piano Slideshow Recipes

Changing :root Variables via Javascript

There are going to be many instances where you may want to change the CSS :root value via JS. This simple code block will help you achieve this.

// Resets CSS :root variable

document.documentElement.style.setProperty('--rootValueName', '#cssValue');

Adding NEW Fonts

Custom Fonts

In CustomCSS, add the following code, replacing the font family name and the source with your font. The source, as in the example, can be a saved font in a Google bucket folder. Assign the font to any element you like. You may add as many different fonts as you like.

@font-face {

font-family: "Kablammo";

src: url("https://storage.googleapis.com/nytpi/nextGenAdResources/Kablammo-Regular.ttf");

}

#mainSubheader{

font-family: "Kablammo", sans-serif !important;

}

Google Fonts with weighted variations

Go to Google Fonts, find the font you like and select the variations of the font you would like to include. There is a link the the font with the weighted variations. Copy that and replace the font family name and the source with your Google font. You may add as many different fonts as you like.

@font-face {

font-family: "Roboto";

src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@100,400;500;700&display=swap");

}

#mainSubheader{

font-family: "Roboto", sans-serif!important;

font-weight: 400;

}

Adjust Logo Sizing

There are a few options when it comes to updating the logo sizing.

The most important style to bear in mind is the max-width with a default size of 140px. If you find that your logo is rendering too wide or too narrow, this should be the first property to update.

The height property on the other hand is defaulted to 100%. If you find that your logo is rendering too tall, this value should be adjusted to a <100% value accordingly.

.sponsorLogo {

max-width: 140px;

height: 100%;

}

Manipulating Gradients

Modifying core background gradient

This changes the background gradient color for main gradient. Use
CSS Gradient Tool⁠
if you need help with the gradient CSS.

.imgColumn-bottomGradient {

background: linear-gradient(0deg, rgba(204,0,0,1) 0%, rgba(255,255,255,0) 100%)!important;

}

Modifying the gradient per Piano slide

You can change the gradient for each piano slide. To change the color for each slide, use the code below and change “data-index” number to target a particular slide. Indexes are zero-based, so “0” is the first slide.

// Changes the gradient color of the first and last slide to red

.imgColumn[data-index='0'] > .imgColumn-bottomGradient {

background: linear-gradient(0deg, rgba(204,0,0,1) 0%, rgba(255,255,255,0) 100%)!important;

}

.imgColumn[data-index='4'] > .imgColumn-bottomGradient {

background: linear-gradient(0deg, rgba(204,0,0,1) 0%, rgba(255,255,255,0) 100%)!important;

}

Modifying the CTA

Changing the CTA color

.sponsorButton {

background: red;

color: white;

}

Adding a new color and hover state to the CTA

.sponsorButton {

background: red;

color: white;

transition: all 250ms ease-in-out;

}

.sponsorButton:hover {

background: blue;

color: white;

}

Adjusting or Removing Magnify Hover Style

Removing the Hover Effect

The code to remove or adjust the style on hover uses the same CSS selector. You can either set transform: scale(1) !important; or you can set transform: none !important; to completely remove the hover state.

#app:not(.is-expanded):not(.is-transitioning):not(.is-animating) .imgColumn:hover .imgsContainer {

transform: scale(1) !important;

transform: none !important;

}

Adjusting the Size of the Magnify Effect

Update the scale() value in order to change the amount of zoom on hover. The default is scale(1.1).

#app:not(.is-expanded):not(.is-transitioning):not(.is-animating) .imgColumn:hover .imgsContainer {

transform: scale(1.05) !important;

}

Manipulating Vertical Spacing of Piano Key Text

Vertical Centering (on Magnify Unit)

The piano key headlines are already vertically centered on the Dim unit, so vertically centering the text on the Magnify unit involves matching the style from the Dim unit.

.imgColumn-info {

align-items: center;

height: calc(100% - 110px);

bottom: 110px;

}

Aligning Text to the Bottom (on Dim Unit)

If you want to achieve the opposite effect with the text of the Dim unit aligned lower on the key similar to the Magnify unit, use the below code instead.

.imgColumn-info {

align-items: flex-end!important;

padding: 0 10px 40px!important;

}

NOTE: In both examples, the 110px and 195px values are matched in both the height and bottom CSS properties.

Bearing this in mind, with a default value of calc(100% - 110px) being equal to 100% of the visible piano key height, you can increase this value to increase the amount of space below the headline text or vice-versa.

Swapping the Logo and CTA Positions

.sponsorCta {

padding: 0 40px;

flex-flow: row-reverse;

}

Changing the Divider Color

.has-dividers .imgColumn:after,

.has-dividers .imgColumn:not(:first-of-type) .imgColumn-info:before {

background-color: red;

}

Adding a disclaimer

Add a disclaimer with the following code. Simply replace the disclaimer text and use the two CSS blocks to control your positioning for both mobile and desktop. NOTE: In this solution the CSS is embedded via javascript. Follow the conventions in this example to modify or expand your CSS. If you would like to hide the mobile block, add the following line to the mobileCSS object: 'display': 'none'

// Adds a disclaimer to the bottom of the Piano unit on desktop and at the top in mobile.

let disclaimer = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ante quis metus luctus commodo.";

let desktopCSS = {

'position': 'absolute',

'bottom': 0,

'left': '0',

'color': 'white',

'z-index': 20,

'font-size': '10px',

'padding': '5px 10px'

};

let mobileCSS = {

'position': 'absolute',

'width': '100%',

'top': 0,

'left': '0',

'color': 'white',

'z-index': 20,

'font-size': '10px',

'padding': '5px 10px'

}

let css = window.innerWidth > 414 ? desktopCSS : mobileCSS; const div=document.createElement("span"),node=document.createTextNode(disclaimer);div.className="disclaimer",div.appendChild(node);const element=document.getElementById("app");element.appendChild(div),Object.assign(document.getElementsByClassName(div.className)[0].style,css);

Changing the Main Sub-header text on Mobile

If you would like to change the mainSubheader text when in mobile, implement the following code. Included is a version with an “observer” that will change the text when in responsive mode on your browser. We recommend you only use this version for testing and use the non-observer version for Production.

// mainSubheader Mobile Text Swapper

// Oberserver version, use for testing

const mainSubheader = document.getElementById('mainSubheader');

const resizeObserver = new ResizeObserver((entries) => {

if (window.innerWidth < 768) {

mainSubheader.innerHTML = "Mobile Text";

} else {

mainSubheader.innerHTML = "Desktop Text";

}

});

resizeObserver.observe(mainSubheader);

// mainSubheader Mobile Text Swapper

// Non-Oberserver version, use for production

const mainSubheader = document.getElementById('mainSubheader');

if (window.innerWidth < 768) {

mainSubheader.innerHTML = "Mobile Text";

} else {

mainSubheader.innerHTML = "Desktop Text";

}

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.