Beginner question: css

Community General Discussion
1

Hi,

I just started to work on my first OSC template for Cubase 12.

Over de last couple days i researched quite a lot on CSS, since i never coded anything in my life. It's very overwhelming.

However very basic lines ( border-radius / color / background color)
Work well and i tought i've gotten the hang of it, until wanted to create a external css style sheet to design my buttons.
Every thing is set up correctly so thats not the problem.

I want to create a border around my button in a diffrent collor than the background collor but i can't get it to work.

Also: when i set a background-color it only changes the color of the "off" state of the button

This is the code that i use:

.btn {border-radius:3px; background-color:"color of my choice"; color: white; border-color: "color of my choice";}

Any help would be appreciated.

2

Hi @Cox

I think it's better to use the css custom properities to style your classes.
As far as I understand it, the css border of osc widgets is not the border that you think appears visually in a widget.
However please try the following:

.btn {
	//--color-widget: orange;
	--color-fill: blue;
	--color-stroke: red;
	--line-width: 10px;
	//border-radius: 100px; //just for understanding
}

Taken from widgets.scss.

I hope it's self explaining. Just hit me up if you have questions.
Cheers!

3

That did the trick!

It's not alwaysveasy to understand what terminology to use.

One more little question: what does the "--" mean, and why do you need to use it with for example: color-widget and not with border radius?

Just trying to learn whatever i can

4

Hi,

Css variables begin with --, the second - is up to you for easy reading. --color-buttons is more readable than --colorButtons

border-radius is a css property set by the language.border-radius - CSS : Feuilles de style en cascade | MDN

Cheers

1 Like
5

thanks, i understand now.

yet unother little question:

i've learned to set the geometry settings in % zo it always fits my touchscreen.

so now i have a made a panel with some buttons (al set in %), now i want to make the panel bigger but keep de buttons te same, is there an easy way to do it? because now the buttons scale with the panel.

also, is it possible to show fader names above or below the actual fader. Maybe i'm overlooking something, but i can't find that option anywhere.

thanks in advance.

6

Hi,

Almost certain you will find on this forum answers to your questions. Search for faders, matrix. And if a json file is provided, load it and study the code.
Good luck