Re: Variable stylesheet selection in guided landing pages

Anonymous
Not applicable

Variable stylesheet selection in guided landing pages

Hello everyone.

Situation

I have one guided landing page template. This template will be used by four campaigns that each have their own branding. The scss and templates were built so that changes can be made to variables within the scss and when compiled will create a brand specific stylesheet. So each time a new brand is added I change the values in a small scss file, recompile, and create a new brand specific stylesheet. I want to create a way that when building a page with the one template, the user can just select which brand they want and that is the stylesheet that will be called. I want to make it as easy for the user as possible.

What I've tried

1. I set up a string variable where the user would just add the name of the brand they wanted to use and it would be added into the url for the stylesheet

<meta class="mktoString" id="whichBrand" mktoName="Which Brand" default="brand1" />

<link href="http://resources.thenameofmycompany/images/${whichBrand}-style.css" rel="stylesheet" />

This didn't work in design studio and didn't work in draft in marketing activities. Once the page was approved on the marketing activities side, then the stylesheet would render. Problem is that the user would have to populate content without the styles rendering. Far from ideal.

2. Thought about using Velocity script. I've used it before (don't enjoy it) so went down that rabbit hole. That ended quickly since Velocity script only works with emails?

3. Tokens. This had the problem of the tokens not rendering on the design studio side, which made working on the templates difficult. Also I tried adding :default=http://resources.thenameofmycompany/images/brand1-style.css to the token. The page wouldn't render with the stylesheet, but when inspecting the page with dev tools, the default was being added. My thought he is that the token value (or default) is being populated after the DOM loads, which is causing the elements to render without the styles. I then realized that tokens don't render on the design studio side of things

Help

All I want is for the user to be able to pick which stylesheet they want use when building a new landing page from a template. I don't want to have to create a template for each brand where the only difference is which stylesheet they are calling. Any and all help would be great.

Thanks in advance.

5 REPLIES 5
Grégoire_Miche2
Level 10

Re: Variable stylesheet selection in guided landing pages

That ended quickly since Velocity script only works with emails

Yes, this is correct.

I would probably manage it with a JS that would render the default value, unless a value exists in the variable. See StyleSheet - Web APIs | MDN

-Greg

SanfordWhiteman
Level 10 - Community Moderator

Re: Variable stylesheet selection in guided landing pages

<meta class="mktoString" id="whichBrand" mktoName="Which Brand" default="brand1" />

<link href="http://resources.thenameofmycompany/images/${whichBrand}-style.css" rel="stylesheet" />

This didn't work in design studio and didn't work in draft in marketing activities.

Likely due to inherent browser security restrictions.

When you're in editor or nested preview frame, it's an SSL-protected document.  You can't load an insecure CSS stylesheet from a secure site. So this doesn't really have to do with dynamic vs. static stylesheet URL.

Are you running SSL on that domain? (You can tell us the real domain.)

Dave_Roberts
Level 10

Re: Variable stylesheet selection in guided landing pages

Hey Nick-

It's not EXACTLY what you asked about (variablized CSS path) but I've done something like this before using a slightly different approach. Since you're already looking to use a string variable, lets just say our options are Red, Blue, and Yellow for our different "brands". Rather than building three different stylesheets, I'd build one stylesheet that included styles for all the brands and then add the string variable as a class to the body element to allow the user to toggle between the different 'brands'.

Here's what that might look like if you setup a string variable called with an id of "whichBrand":

<!-- this could be in a <style> or on an external stylesheet -->

<style>

/* add all styles here, prefixed w/ body.Red */

body.Red {background-color: red;}

body.Red div.Section1 {background-color:white; color: red;}

/* add all styles here, prefixed w/ body.Blue */

body.Blue {background-color: blue;}

body.Blue div.Section1 {background-color:white; color: blue;}

/* add all styles here, prefixed w/ body.Yellow */

body.Yellow {background-color: yellow;}

body.Yellow div.Section1 {background-color:white; color: yellow;}

</style>

<body class="${whichBrand}>

...

</body>

----

I've also had some issues trying to load the path as a variable and I think you're right about the load-order having something to do with it not rendering. Another approach here (with more toggles, but less "keyword" requirement) would be to setup three boolean variables instead that added the classes to the body when they were "true" and " " (blank) when they were false.

<meta class="mktoBoolean" id="Brand1-toggle" mktoName="Use Red Brand?" value="false" false_value=" " false_value_name="NO" true_value="Red" true_value_name="YES">

... repeat, one for each brand. Ideally, you'd only turn on one at a time, but in the event that you had two on, it should only read out the 2nd class that gets added, ie. <body class="Red Yellow"> is still going to load the Yellow stuff -- but if you needed to in some cases, you could use that for overlapping bits, something like:

body.Red.Yellow {background-color: Orange;}

body.Red.Yellow div.Section1 {color: Orange; font-weight:bold;}

SanfordWhiteman
Level 10 - Community Moderator

Re: Variable stylesheet selection in guided landing pages

For the record, this works fine in Designer and live:

    <meta class="mktoBoolean" mktoName="Red Styles" id="stylesheetEnableRed" true_value="" false_value="alternate" default="false">

    <meta class="mktoBoolean" mktoName="GreenStyles" id="stylesheetEnableGreen" true_value="" false_value="alternate" default="false">

    <link rel="${stylesheetEnableRed} stylesheet" href="https://codepen.io/figureone/pen/dc1f0780945955369517e933624d3de9.css">

    <link rel="${stylesheetEnableGreen} stylesheet" href="https://codepen.io/figureone/pen/723737625d7ecf2ba7a74826c43c573d.css">

pastedImage_1.gif

One must make sure there isn't an SSL (mixed content) mismatch that's the actual problem...

Dave_Roberts
Level 10

Re: Variable stylesheet selection in guided landing pages

The rel=alternate part is what I was missing here ::mind-blown:: thanks for sharing this Sanford!