Perspective - is selected text color setting available to add to style or somewhere in session props

Ignition
1

Does anyone know where to find the setting in ignition that controls the color of the selected text on the screen. below is the CSS code that controls it. I am working with a predefined theme from my company and the color they picked is impossible to see on a white background.

*** Works on common browsers ***
selection {
    background-color: #352e7e;
    color: #fff;
}
2

There are a couple of different places which allow for setting CSS rules, with the differences depending on the scope or breadth of your desired impact.

To apply this setting to:

  • Every project on the Gateway, create your own custom theme files which inherit from the default Perspective theme files and place this rule within the appropriate file.
  • Just a single project (only available in version 8.1.22 or newer), use the stylesheet.css resource available by right-clicking Styles in the Project Browser within the Perspective context and selecting Enable Advanced Stylesheet.
1 Like
3

you need ::selection though

4

I cannot find where to apply the advanced stylesheet under props. can you help me understand how to get this implemented correctly?

image
image1019×310 26.8 KB

image
image
image353×564 21 KB

5

The advanced stylesheet is always applied

its just a common ccs file. you need knowledge of css to be able to define classes and such...

The naming of the class is wrong the prefix is psc- not psc_
and you as always for css you still have to add the class to the component,

6

This looks like you're trying to set the rule to only apply to certain components which have a Style applied, so that's what my steps will describe. If you want a broader application, the steps will vary.

  1. Create a named style within the Style directory. For now, let's assume you name this Style "Selected". You do not need to apply any setting to this class.
  2. Set Landscape in: TextField.props.style.classes to have a value of "Selected".
  3. In the stylesheet.css resource, supply the following code:
.psc-Selected::selection{
    background-color: #3352e7e;
    color: #fff;
}
7

Thanks for the help, the steps you outlined along with your code suggestion helped me to get it working in my project.