Hi,
We would like to utilize the inverse color scheme within PowerChart, and everything is setup somewhat the way the end user likes, however, I cannot seem to find the setting for changing the clock / timestamp color within an x-trace (See screenshot). I’ve tried adding a style to the infoBox, but again, limited to no success. I must be missing something obvious.
This is actually less obvious than you might think when you’re not used to adjusting Perspective component styles. The only way to adjust the color of the timestamp text above the x-trace info box and the text within the x-trace info box at this time is by modifying the CSS it uses:
/* timestamp text above the x-trace box */
.ia_timeMarker > g > text {
fill: #ffffff !important;
}
/* x-trace box itself */
.ia_powerChartComponent__xTrace__box {
fill: transparent;
stroke: transparent !important;
}
/* text within the x-trace box */
.ia_powerChartComponent__labelText {
fill: #000000 !important;
}
Personally, I like to make the x-trace box itself transparent because its width does not seem to adjust to the text inside it. You can also use the fill/stroke properties exposed on the component to do this.
Those CSS properties either need to be added to one of your theme CSS files or you could “inject” them via a style class property that takes a string value, like @victordcq has been suggesting. If you are not creating your own custom theme files, I would recommend the latter, since the six default themes Inductive provides may get overwritten during version upgrades.
I do appreciate the ‘new.css=good’ and ‘injection=bad’ comment from @victordcq, but it did work. Thank you.
Exactly. The real solution is creating a new theme, but if I’m working on a project where that’s not possible or a quick band aid is all that’s needed, injection works. Well, at least it does for now; I wouldn’t be surprised if Inductive were to patch that in the future.
Is there any way to make a certain data pen have its text be transparent? Basically I want a data point to show up on the plot but not show up in the xTrace, is there a different way to do this?
Also how do you find the different CSS attributes of a component?
For example, from your example:
/* timestamp text above the x-trace box */
.ia_timeMarker > g > text {
fill: #ffffff !important;
}
How did you know that the .ia_timeMarker even existed, let alone changed the timestamp text?
Cheers
I don't think there is a way to change the text color of only a portion of the text in the x-trace infobox. As I understand it, the "text" is actually being rendered as an svg aligned over top of the infobox (which I assume is at least part of the reason that it does not respect a typical style class assignment that would change the text color).
I launch a Perspective session in Chrome, navigate so that whatever I want to inspect is in view, then press F12 (at least on Windows) to launch Chrome's built-in web development tools. From there, you can find everything that is shown in the Perspective session listed in the Elements tab. There is a button in the upper-left corner of the development tools menu that makes finding a specific element on the web page much easier. After clicking it, the CSS elements related to each component on screen will highlight as you hover your cursor over the screen. It just takes a little digging to find out what attributes have been assigned to each component and see what happens when you change them. Some components, like the power chart, are more complex and the element hover tool will only take you so far, so be prepared to do some manual sorting to find stuff.
I can't take full credit for that one. 
IA's tech support clued me in to this right as I started my journey to investigate a lot of these CSS attributes. Though it is able to be found just the same as everything else if you use the development tools mentioned above.
Edit: I just realized that I should clarify on that last note, since the .ia_timeMarker is part of the x-trace group that only exists on hover, you will need to "freeze" your screen when it is visible in order to find it, otherwise you will be chasing a ghost.
Edit 2: I am an idiot, you can just click to get the x-traces to stay in the power chart component. I was thinking about the time series chart where I had to freeze the x-trace in its place in order to find its corresponding CSS element. 
Is there a reason my CSS files keep updating? I apply the changes to files and then twice now all the css files in the theme folders have reverted to their default state. ( 8.1.13 (b2021122109))
You aren’t supposed to edit the IA-supplied theme files. You are supposed to copy/prune into your own. See the readme file in that folder.
I figured I was missing something. Thank you
It is possible to select a full line in the xtrace.
with :nth-child() css selector. Yo will have to be sure it will always be on the same spot though.
.ia_timeMarker > g > g > g > g:nth-child(2) for the first text +1 for every below
For something so specific you should add in the styleclass infront too.
.psc-folder\/styleclassName infront and add an (empty) styleclass with the name folder/styleclassName to the component like normal
( / of folders are changed to \/ in css ) (psc- gets added by igntion)
.psc-folder\/styleclassName .ia_timeMarker > g > g > g > g:nth-child(2)
Hello,
I tried to inject this css code to make the box transparent by creating a new style class but it doesn’t change anything, is there something else to do ?
By the way, what does “ia” mean in the code ?
Thanks
Inductive Automation
the injection part seems good to me.
ia_powerChartComponent__xTrace__box is the name of the css class attachted to the xtrace box.
ia is proabbly the initials of Inductive Automation but its just the name of the class so dont look much into it xd
fill also requires to be !important
The problem was actually solved by adding the “!important” mention on the fill property, thanks !
