theme based on drop-down

replied on April 24, 2017

Hey Ben,

You can achieve this with custom CSS and JavaScript. The main steps involved:

Assign any default formatting (formatting which should be applied unless superseded by a theme).
For formatting which should depend on theme, preface each selector with body.theme1, body.theme2, etc. according to the theme. So if for example your selector was something like ".someOtherClass input", you would split these to "body.theme1 .someOtherClass input" and "body.theme2 .someOtherClass input".
[The class for the theme does not need to be "theme1", "theme2", they can be more descriptive; I simply use the numbering scheme here for illustration.]
Add the dropdown field to the form. Assign the theme class ("theme1", "theme2") to the choices ("Theme 1", "Theme 2"). Give the dropdown field the "themeSelector" class.

Add the following custom JavaScript: this does the heavy lifting.

$(document).ready(function() {
  updateTheme();
  $('#q1 select').on('change',updateTheme);
});

function updateTheme() {
  $('body').removeClass();
  $('body').addClass($('.themeSelector select').val());
}

When running the form now, when the value of the dropdown changes, the class attribute of the body element is updated with the new value of the dropdown. The CSS formatting then takes over.

Attached is a video demonstration with a simple theme change.

For the case of handling multiple languages, while CSS alone would not be able to handle translation, the same principle could apply if you had a JavaScript function to handle string translation, since the main mechanic is updating selectors. However it would seem that in practice, any such function would take the target language/culture as an argument, so it would probably just make more sense to pass that directly. The above method could be used though to handle any logos which might differ between browser cultures, for example.

Hope this helps!

select-theme.swf (427.85 KB)

1 0

replied on May 4, 2017 • Show version history

Is there any way to apply a whole preconfigured theme? That's more what I'm looking for than editing individual elements.

Lacking that, how can I swap out logos using this method? Is there a complete list of available variables somewhere?

Thanks!

0 0

replied on May 4, 2017

Since (as far as I can tell) the default themes are just different sets of CSS applied to the form, I think you'd need to basically reproduce all the CSS you'd need for each theme, in order to 'hot swap' them as you describe above, like James was explaining.

When I inspected the DOM for a form of mine, I didn't see any <link> tags referencing external style sheets, which leads me to believe that you'd need to include all your various themes' CSS definitions in the CSS pane of the "CSS and JavaScript" tab in the Forms designer.

Swapping logos should be a bit less entailed. Here's an example of the logo's <img> tag:

<img id="form-logo" alt="Logo" src="http://localhost/Forms/Handlers/FileRouter.ashx?guid=70b3f5c5-2b62-477a-b43c-756830423ea5" style="width: 100px;  float:left;  margin-right: 30px;">

So, you could create a drop-down menu to hold the names of all the logos you'd want to be swappable, and associate with each of those choices a value that matches the logo's file path:

You'd would assign a class to it like so:

Then, you could use JavaScript to target the id #form-logo and change its src attribute's destination to match the values associated with the choices in your drop-down. The code would be almost identical to what James posted:

$(document).ready(function() {
  updateLogo();
  $('.logos').on('change', updateLogo);
});
 
function updateLogo() {
  $('#form-logo').attr('src', $('.logos').val());
}

I didn't have a chance to test this, but something like it should work. Your mileage may vary.

Good luck!

Rob

1 0

Question

Question

Replies

Sign in to reply to this post.