Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Changing window color through USS

Discussion in 'UI Toolkit' started by joelybahh, Sep 12, 2019.

  1. joelybahh

    joelybahh

    Joined:
    Mar 18, 2015
    Posts:
    66
    tried following the documentation and tried this:
    Code (CSharp):
    1. :root {
    2.     -unity-background-color: rgb(255, 255, 255);
    3. }
    and

    Code (CSharp):
    1. :root {
    2.     background-color: rgb(255, 255, 255);
    3. }
    Am I missing something required to override the default Background Color/Image?
    I can do it from the elements debugged but I haven't quite got the hang of translating that into USS and UXL.

    Regards,
     
  2. Kamyker

    Kamyker

    Joined:
    May 14, 2013
    Posts:
    1,085
    This works fine for me, I guess something is wrong with how you load the uss.
     
  3. joelybahh

    joelybahh

    Joined:
    Mar 18, 2015
    Posts:
    66
    Interesting, the rest of the USS is working. Does the :root need to be at the top of the USS script?
     
  4. Kamyker

    Kamyker

    Joined:
    May 14, 2013
    Posts:
    1,085
    Nah, mine is at the bottom. Maybe you added style to wrong element. Inspect uielements with:
    Code (CSharp):
    1. :root {
    2.     display: none;
    3. }
    4.  
     
  5. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi joelybahh,

    ":root" can be anywhere in the USS, maybe you have another rule overriding your background-color. You should be able to see that in the debugger.

    If that doesn't work, I can take a look if you have a small example that you can share.
     
  6. joelybahh

    joelybahh

    Joined:
    Mar 18, 2015
    Posts:
    66
    upload_2019-9-13_9-17-58.png
    x2 ':roots' come up as selectors, this is likely due to personal/pro licenses having different default styles.

    My USS looks like this:
    Code (CSharp):
    1. Label {
    2.     font-size: 10;
    3.     text-color: rgb(255, 255, 255);
    4. }
    5.  
    6. .title {
    7.     font-size: 20;
    8.     font-weight: bold;
    9.     text-color: rgb(90, 125, 173);
    10.     margin: 5px;
    11. }
    12.  
    13. .subTitle {
    14.     font-size: 16;
    15.     font-weight: bold;
    16.     text-color: rgb(55, 5, 5);
    17. }
    18.  
    19. .box {
    20.     background-color: rgb(255, 255, 255);
    21.     width: 100;
    22.     height: 100;
    23. }
    24.  
    25. .inspace-body-box {
    26.     background-color: rgba(50, 50, 50, 255);
    27.     background-image: none;
    28.     height: 300;
    29. }
    30.  
    31. .inspace-window-banner {
    32.     background-image: url("/Assets/Editor/Resources/Banner1.png");
    33.     height: 128px;
    34.     flex-grow: 0;
    35.     flex-shrink: 0;
    36. }
    37.  
    38. :root {
    39.     background-color: rgb(255, 255, 255);
    40. }
    My UXML like this:
    Code (CSharp):
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <engine:UXML
    3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4.     xmlns:engine="UnityEngine.UIElements"
    5.     xmlns:editor="UnityEditor.UIElements"
    6.     xmlns:upm="UnityEditor.PackageManager.UI"
    7.  
    8. xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
    9. xsi:schemaLocation="
    10.                        UnityEngine.UIElements ../../UIElementsSchema/UnityEngine.UIElements.xsd
    11.                        UnityEditor.UIElements ../../UIElementsSchema/UnityEditor.UIElements.xsd
    12.                        UnityEditor.PackageManager.UI ../../UIElementsSchema/UnityEditor.PackageManager.UI.xsd">
    13.     <engine:Box class="inspace-window-banner"/>
    14. </engine:UXML>
    My CSharp initialization looks like this:
    Code (CSharp):
    1. public void OnEnable()
    2.     {
    3.         _rootElement = rootVisualElement;
    4.  
    5.         _styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/Styles/IXR_RigBuilderWizard.uss");
    6.         _visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/UXML/IXR_RigBuilderWizard.uxml");
    7.      
    8.         VisualElement labelFromUXML = _visualTree.CloneTree();
    9.         labelFromUXML.styleSheets.Add(_styleSheet);
    10.         _rootElement.Add(labelFromUXML);
    11.     }
    If I were to guess, something in my UXML is overriding it, I am just not familiar enough to understand what exactly.
     

    Attached Files:

  7. Kamyker

    Kamyker

    Joined:
    May 14, 2013
    Posts:
    1,085
    Change
    Code (CSharp):
    1. labelFromUXML.styleSheets.Add(_styleSheet);
    to
    Code (CSharp):
    1. _rootElement.styleSheets.Add(_styleSheet);
    Otherwise labelFromUXML will be your ":root" in uss.
     
    jonathanma_unity likes this.