How to use both Css LAF with Normal Laf together

[DabDab]

I am trying to mix two laf functions CSS Laf and Normal LAF.

const var Slider_ArcKnob2 = Content.getComponent("Slider_ArcKnob2");

// Local LAF
const locl_laf = Content.createLocalLookAndFeel();




//  Sliders
locl_laf.registerFunction("drawRotarySlider", function(g, obj)
{

// Text Knobs
 if (obj.text == "Vol" || obj.text == "Unison") 
   {
	g.fillAll(obj.itemColour1);
	
	var a = obj.area;
	var val = "";
	
	g.drawAlignedText(Math.round(val) + "" + obj.suffix, [a[0], 0.15*a[3], a[2], a[3]], "centred");
 
    
 }



// Arc Knob
  else if (obj.text == "Arc_Gain" || obj.text == "Arc_Drive" || obj.text == "Arc_Warmth")
    {
    var K = Content.createPath();
    var p1 = Content.createPath();
    var range = obj.max - obj.min;
    
    var startOffset = 2.4;
    var arcThickness = 0.08;
    var arcWidth = 1.0 - 2.0 * arcThickness;
      
    p1.clear();

	var endOffset = -startOffset + 2.0 * startOffset * obj.valueNormalized;
    
    var val = "";

    var a = obj.area;
    var w = obj.area;
    var round = 2;
    var h = a[3];
    
    
// Label Text
	g.setColour(obj.itemColour1);
	g.setFont("Oxygen Regular", 15); 
	g.drawAlignedText(obj.text.replace("Arc_", ""), [a[0], a[3]-a[2], a[2], a[3]], "centred");    
	    
	    
    g.setColour(obj.bgColour);
    p1.addArc([arcThickness / 2, arcThickness / 2, arcWidth + arcThickness, arcWidth + arcThickness], - startOffset , 2.5);

        
    var pathArea = p1.getBounds(obj.area[2]);

        
    g.setColour(obj.bgColour);
    g.drawPath(p1, pathArea, obj.area[2] * arcThickness);

    
    K.addArc([arcThickness / 2, arcThickness / 2, arcWidth + arcThickness, arcWidth + arcThickness], -startOffset - 0.08 , endOffset);   

    
    var pathArea = K.getBounds(obj.area[2]);
    

    g.setColour(obj.itemColour2);
    g.drawPath(K, pathArea, obj.area[2] * arcThickness );

   
    
    if (obj.hover || obj.clicked)
    {

    g.setColour(obj.textColour);	
    g.drawPath(K, pathArea, obj.area[2] * arcThickness );

    }
    
    
    g.rotate(endOffset, [obj.area[2] / 2, obj.area[2] / 2]);
    g.setColour(obj.textColour);
    g.fillRoundedRectangle([obj.area[2] / 2 - obj.area[2] * 0.04, obj.area[2] / 2 - obj.area[2] * 0.5, obj.area[2]  * 0.1, obj.area[2] * 0.13], 0);

} 

});




Slider_ArcKnob2.setLocalLookAndFeel(locl_laf);

I want to change show popup value via CSS Laf. How to do it ?

label
{
	background: red;
	padding: 3px 10px;
	margin: 5px;
	border-radius: 50%;
	box-shadow: 0px 2px 3px black;
}

[DabDab]

Bump... bump

[d.healey]

From my brief time playing around with the CSS stuff it seems that once you assign a style sheet to a component then you have to do everything with CSS. It's all or nothing.

@Christoph-Hart Have I got that right?

The particular use case I have is styling the preset browser and being able to style the add/edit/delete buttons individually. They all have the .button class so I can't differentiate between them. So I was thinking of styling the rest of the browser with CSS and these buttons with traditional LAF.

[DabDab]

@d-healey It should be a feature request. Because CSS and traditional LAF both required in many cases.

[d.healey]

@DabDab yeah I agree, I'm just sticking with laf for now.

[HISEnberg]

@DabDab I had this exact issue working with the preset browser a few weeks ago, I did not find the solution.

However, I recall a post in the forum saying that mixing and matching CSS with traditional LAF is possible. I can't find it but I would like to see an example of this.

[d.healey]

@HISEnberg I think that was me, and looks like I was wrong.

[HISEnberg]

@d-healey haha okay thanks for finding that, I thought I was doing something wrong and needed to improve my skills.

[Morphoice]

@HISEnberg just out of interest, is it actually just the CSS syntax that is applied here or do the elements conform to some sort of HTML specs? how do we know which parameters every element has, that can be styled? e.g. padding in a label, isn't a parameter the element usually has, is it? I would assume the styleable parameters are exactly those listed in the Property Editor/Inspector, no?

[d.healey]

@Morphoice @Morphoice The docs explain most of it pretty well - the stuff about padding for example.To find out which elements can be styled there is the built in CSS debugger, but I find its output confusing.