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]

Hi,

Can you add the following line in your widget client script

function ($element){
  

$timeout(function() {
  $element.find('.sp-tagline-color').css("color", c.options.text_color);
}, 100);


}

[adrianps]

Thanks for the reply Alikutty - sorry but could you clarify: The initial content of the client script is:

function() {
  /* widget controller */
  var c = this;
}

Do you want your snippet placed after the var c statement, after the function or replacing this function?

Cheers,

Adrian

[Alikutty A]

Yes, you can replace with this

function ($element){
var c = this;  

$timeout(function() {
  $element.find('.sp-tagline-color').css("color", c.options.text_color);
}, 100);


}

[adrianps]

OK, I've tried that, but it appears to break the salutation, in that I get the literal c.data.username string instead of the username.  The colour is also not applied (defaults to a grey instead of a black or white that I've configured in the options).