putting a frame around element of a scale object

[robpetrosino]

I would like to put a frame around the element of a Scale object. I am assuming that this could be done by calling the appropriate CSS command within the PennController object, but I can’t seem to get it right. I tried to do the following:

`
newScale(“scale”, 7)
[…]
.settings.cssContainer(“border-style”, “solid”)
`

but it does not work. I guess that the question may be more generally phrased: where can one access the commands that can be referred to within the setting.cssContainer command?

Thanks!

[Jeremy]

Hi again,

The command .settings.cssContainer will not affect the elements within the container, but indeed the container itself. Using newScale(7).settings.cssContainter("border-style","solid 1px black") will only add a black border around the whole Scale element, not around the scale’s buttons.

For you to modify the scale’s buttons, you need to upload a file named PennController.css under css_includes with the right target, e.g.

td.PennController-Scale-scaleButton {
  padding:10 15 10 15;
  color:blue;
  border:1px solid gray;
}

[robpetrosino]

Hi Jeremy,

thanks, this makes sense. I created a the PennController.css with the code you suggested and uploaded it under css_includes, but it did not have any effect on the aesthetics of the scale buttons. (I have already encountered this problem before, around a couple of months ago, when I was trying to modify the aesthetics of a text object).

[robpetrosino]

I think I found a solution for this – I had to prepend global_ to the name of the css file (i.e., global_PennController.css), as suggested in the IBEX tutorial. I am not sure why it is like that, but it might be good for you to know, in case you want to find out/fix it…

[Jeremy]

Ah, right, my bad, you probably want to remove PennController- between td. and Scale if you are going to use a file named PennController.css (though Ibex’s automatic class prefixation is a little bit shaky, so the global_ method is safe).

[robpetrosino]

Sounds good! Thanks!

[BenG]

Hi, I am having the same issue regarding boxes around the buttons of scales. I can make changes to the scales through the PennController.css file without issue, but for some reason the code provided above does nothing to the scale.

Any help would be appreciated!

Demo link: https://farm.pcibex.net/r/RTusyr/

• This reply was modified 1 year, 5 months ago by BenG.

[Jeremy]

Hi,

The code above dates from 2019, there have been new releases of PennController since then, and Scale elements are no longer rendered as HTML table elements

Judging from the project you shared, it seems like you have come up with a solution, as you have this in global_z.css:

.PennController-Scale .option label {
    margin: 0em 1em; 
    font-size: 18px;
}

You could add a frame like this:

.PennController-Scale .option label {
    margin: 0em 1em; 
    font-size: 18px;
    border:1px solid gray;
}

Jeremy

[Author]

Posts