Set CSS colour using widget options

adrianps · ‎09-16-2019

I'm pretty sure I'm missing something fundamentally simple here...

I've created a 'Salutation' widget that simply displays "Hi, <User displayname>". I've got the server script and HTML template working correctly to display the user name.

I plan on using this widget in multiple places and I'd like each widget instance to have its own text colour, so I assume that a widget option is the place to configure this.

Creating a "Text colour" option seems straightforward enough, but I'm falling down trying to work out how to get the instance option value to be populated in the CSS code.

So this is what I have:

HTML Template

<div class="hidden-xs">
<h1 class="font-thin m-b-lg sp-tagline-color">
  Hi, {{c.data.username}}
  </h1>
</div>

CSS-SCSS

.sp-tagline-color {
	color: $sp-tagline-color;
}

Option schema:

[{"hint":"Use #RGB to specifiy text colour","name":"text_colour","section":"Presentation","default_value":"#FFFFFF","label":"Text colour","type":"string"}]

So assuming my approach is correct, how do I use the instance option to populate the CSS variable $sp-tagline-color?

Or is there another way?

Cheers,

Adrian

Alikutty A · ‎09-16-2019

Can you replace the client controller with this. See the inputs i have added in function paranthesis

function($element, $timeout) {
	/* widget controller */
	var c = this;
	$timeout(function() {
		$element.find('.sp-tagline-color').css("color", c.options.text_colour);
	}, 100);
	console.log(c.options.text_colour);
}

View solution in original post

adrianps · ‎09-16-2019

Now we're cooking!!!

Thanks very much for your help. Passing in the $element and $timeout parameters did the trick!

Cheers!

Alikutty A · ‎09-16-2019

Great !! Have a nice day