Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

Changing window color through USS

Discussion in 'UIElements' started by joelybahh, Sep 12, 2019.

  1. joelybahh

    joelybahh

    Joined:
    Mar 18, 2015
    Posts:
    65
    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:
    85
    This works fine for me, I guess something is wrong with how you load the uss.
     
  3. joelybahh

    joelybahh

    Joined:
    Mar 18, 2015
    Posts:
    65
    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:
    85
    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:
    61
    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:
    65
    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:
    85
    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.