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.