Need a little help guys

[Know_About_IT]

I was developing my local appinventor, but I actually want to do something in which I am failing again and again

I want my blocks to look like this (I added strokes with inspect element)

I have changed colors, font and font family but, I just want to add a unique border to every block using css stroke property, I want the property to be attached to only a specific block, aka every blocks needs to have a unique stroke colors (not possible till now). So, can anyone help me attach a unique id/class to every block category like, I want to attach color-block class/id to color category so that I can apply a unique color border (dark grey border to it). I have tried to do much things but, all threw errors for me.

What i want ?

I just want to attach a unique id to a certain block category so that my css changes don't get applied on other category blocks and are only applied to a certain block category

@ewpatton Sir, I guess it is possible to do it in code if we can do with inspect element

Regards

[Aarush_Kumar]

Instead of Id, you can also use class. You can add a class by using this method.

block.addClassName("border-effect");

answer by @newbiedeveloper

[Know_About_IT]

Thanks for your answer, can u breif me about in which file must I add this ?

Regards

[MohamedTamer]

Hello @Know_About_IT,
If you want a workaround with pure CSS, so you can try this, which uses the fill colour property of the block to change the stroke.
path.blocklyPath[fill="#B32D5E"] { stroke-width: 3px; stroke: red; }
Where the fill property above us set to the colour of the block you want to change its stroke.
This results in:

However, if you use the same colour for both the events and the control blocks, so the sake stroke colour would be applied for both of them.

[Know_About_IT]

I want unique border color for each block category actually

[MohamedTamer]

That would actually do it, for example:
Assuming that you have the text category which have the block colour: #B32D5E and want to add the stroke colour: red, so you can add to your appinventor instance CSS:

path.blocklyPath[fill="#B32D5E"] { 
  stroke-width: 3px; 
  stroke: red; 
}

And it would apply the stroke to all the ockd into category with that Color, which is the text category, as you can see in the image above!

[Know_About_IT]

Thank you so much sir, I will test this and hope it will work

[Know_About_IT]

@MohamedTamer

path.blocklyPath[fill="#B32D5E"]

@MohamedTamer It worked and it is exactly like I thought, thank you so much, So much !!!!! I can't explain in words how happy I am