AnsweredAssumed Answered

Variable stylesheet selection in guided landing pages

Question asked by d5330212eb3420c0a7e9888a6b3f3994ba01e5d0 on Apr 20, 2018
Latest reply on Jun 27, 2018 by Dave Roberts

Hello everyone.



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



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.