Set CSS colour using widget options

[adrianps]

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]

You should remove the CSS applied, there should be no color applied to it. Also check your HTML, if salutation is broken.

Can you paste your complete widget code including CSS?

[adrianps]

Again, thanks for your time with this and with helping a slow student...here's the code as it stands right now:

HTML

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

CSS

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

Client controller

function() {
	/* 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);
}

Interestingly, when I look at the console while refreshing the page, I notice the following error:

Error: $timeout is not defined
api.controller@salutation.js:4:2

[Alikutty A · Accepted solution]

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);
}

[Shane J]

I've tried to apply this same logic to 'hover' but it doesn't seem to work.  Do you know how this could be changed to get a 'hover' color to be applied this way?

[Jeffrey Siegel]

Were you able to figure out how to apply this to a hover?