change default help icon

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Is there a way to configure skuid to use a different icon for inline help?  

I can use CSS to manipulate the existing class (ui-silk-help) to point to a different icon but possibly there is a global config value that can be modified somewhere so that skuid uses it instead of the ui-silk-help class when generating the HTML?

Thanks!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 4 years ago

  • 1
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Barry,

Theming is something that is on our road map for an upcoming release. We're still working through how it will all work, so I can't say for sure that you'll be able to customize the help icons specifically, but in the meantime, there is a way to auto include a CSS file for all pages in a given module:

http://help.skuidify.com/m/11720/l/129358-create-a-skuid-module

That link makes mention of naming your JavaScript Static Resources according to your module name, but Skuid also does something similar with CSS Static Resources. In other words, if your module name is "MyModule" then a Static Resource named "MyModuleCSS" would automatically be included in all pages in the "MyModule" module.

Another possibility would to use a module included JavaScript resource (e.g. "MyModuleJS") to run a jQuery selector for the ui-slik-help class, then removeClass and append, or switchClass as needed. It doesn't seem like the most efficient solution, and I haven't tested this approach fully, but I think it would work, at least for the time being.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey J -

Thanks for the reply, encouraged by the future theming feature!.

We decided to use the stock "help" icon that SFDC uses on declarative pages. To solve for this, I added the following to our CSS.

.ui-silk-help {
background-image: url(/img/help/helpOrbs.gif) !important;
width:20px;
height:15px;
background-position: top left;
}