We can now place our Single and MultipleChoice Nodes in the Graph. Great! But let's be honest, it's gotta be one of the ugliest things you've ever seen. I mean, just look at that. Thankfully, we can make it at least slightly better using Style Sheets. I'll be showing the final result in the screen right now. So let's start by creating our node Style Sheet. to do that we'll go into To do that, we'll go into our "Editor Default Resources/DialogueSystem" folder and right click in the project window, go to Create > UI Toolkit > Style Sheet. I'll name mine "DSNodeStyles". Let's use this moment to add it to our GraphView script right away beneath our GraphViewStyles. When that's done, we can go to our "DSNodeStyles.uss" file and start updating our styles. We'll be creating our own classes so I'll talk about how I'll go about naming them. You can of course follow whatever you'd like and name them whatever you want. I'll be following the way Unity does it a little bit, but not perfectly. I'll start with "ds", which is short for Dialogue System, and then add in a scope (--ds-scope), such as "node" or "graph-view", this is where these styles will be applied, likely to be specified in the name of the file. Right after that I'll be specifying the context like "text-field" or "button" (--ds-scope__context) which tells us what elements are going to use this class, and then the state (--ds-scope__context__state) of the element, such as "hidden" or "selected". The double underscore (__) is because Unity follows the BEM methodology. As we're only going to add these classes to their elements at the end I'll be showing on the screen
the differences whenever we add a new style. Remember that to many styles you just try things out and leave whatever you think looks best, and because this is a tutorial for an already made Dialogue System, I'll have my color codes and so on ready. Let's start by updating our extension container. We're simply going to update its background color and give it some padding so that the things inside are not touching the borders and have a nice spacing. So let's name our class ".ds-node__extension-container". Let's set the "background-color" to be of the hex code "#1D1D1E", this will make it a dark grey. Then, we'll set its "padding" to "8px". Next, we'll be setting our custom data container class. We'll set its background color, its border radius and give it a padding as well. I'll name it ".ds-node__custom-data-container". For the "background-color" I'll give it an hex code of "#212325", which is a lighter grey than the previous one. For our "border-radius", I'll give it a value of "4px", this basically means the corners will be round instead of sharp, and for the "padding" I'll give it a padding of "8px". After that, we'll be updating our Text Fields. However, we'll actually update their input class and not the Text Fields themselves, as we want to update how the box looks like. Although, even though we're going to update an Unity built in class, I'll make it so only those inside our custom node related classes are updated. Therefore, I'll name our class ".ds-node__textfield" but make sure we're actually updating the input by saying "> .unity-text-field__input". I'll leave a link down below if you want to know more about the greater than (>) symbol, but it mostly means "the input that's directly inside the element with our custom class". We'll be updating our background color, border color, border radius, max and min width and padding. I'll give the "background-color" the same hex code as our extension container (#1D1D1E), and our "border-color" an hex code of "#27292C", which is a lighter grey. The "border-radius" will be of "4px", and to make sure the Text Fields don't grow too big for having a lot of text, we're going to make it have a "max-width" of "240px". For the same reason but for becoming too small, we're going to give it a "min-width" of "160px". For our "padding" I'll give it a value of "8px". The styles we've defined here are fine for the base of our Text Fields but we'll create an extra class for each Text Field so that they fit more to where they are and to what they are. We'll first create a Text Field with the hidden state. This will make the Text Field look like Labels when they are not being edited. We'll be using it both in our dialogue name text field and in our choice text fields. So let's start by naming it ".ds-node__textfield__hidden" and also make sure it's for the "> .unity-text-field__input". What we're going to do is very simply make both the background color and the border color transparent and then revert their colors when we are focusing on the Text Field. so type in background color So type in "background-color" and pass in "transparent", and then type in "border-color" and pass in "transparent" as well. Now for when we are focusing on the text field we use the same class but put in the :focus pseudo-class and revert both colors to the colors of the base Text Field above. Next, we'll do a slight update in our filename Text Field. I'll name it ".ds-node__filename-text-field" and of course update the "> unity-text-field__input" and here we'll simply update its "max-width" to be "1000px". We'll also be updating it in its focus to add a "margin" of "4px" together with a "padding" of "4px" as well. The margin makes it so the Text Field won't be touching the node borders and the padding makes it so you can see more of the text while focusing. We're left with a slight problem however and that's because the TextField comes with a default left margin, making our text field not be correctly placed, so let's type in "TextField" for our C# Type Selector and set its "margin-left" to be "0px". We'll now update our Choices Text Field, so I'll create one named ".ds-node__choice-textfield" and, of course, for the input again. We'll be updating the font size, the height and the max and min width here so for our "font-size" I'll give it a value of "11px", this will make the text slightly smaller. For the "height" I'll pop it up to "35px", and the reason why is that if it was less than that, letters like "y" would be cut off. For the "max-width" I'll go with "1000px" as well here and for our "min-width" I'll go with "0px". We'll also be updating its styles when focusing as of right now when we focus on it, the "height" will be too big as it doesn't look like a Label anymore but like a Text Field instead, so I'll tone it down to be "25px" instead. Because of that I'll add a "margin" of "4px" and a "padding" of "4px" as well, this will do the same as our filename Text Field. The last Text Field we'll be updating will be the dialogue text one, which will be a bit different as it looks more like a quote box. We'll be updating it on normal input, on hover and when focusing, so I'll create a class named ".ds-node__quote-textfield" and place the other two states now as well. In the normal input we'll be updating its "background-color" to have the hex code of "#232527". This code makes it a lighter grey than the custom data container one. We'll be updating its "border-color" to be "transparent" so that it has no border whatsoever. However, we want a border to its left side to make it seem like a quote, so I'll give the "border-left-color" and set it to "#27292C". Right now though it will be too small so we'll increase the "border-left-width" to be "4px". So that the text isn't too together with the Text Field, I'll be giving it a "padding" of "16px". Whenever we convert this Text Field to a Text Area, we don't want the Text Area to occupy the whole node as long as we type, so I'll make it have a "max-width" of "600px", to make the text go down without us needing to press enter. For our hover state I only want to make the "background-color" a little bit lighter, simply as a small piece of feedback, so I'll give it an hex code of "#252729". For our focus, we'll be making it look more like a Text Field again, so we'll give it the same "background-color" and "border-color" as our Text Field class. Our Text Fields are now done so let's update our Buttons. We'll only be needing to update our Add Choice and Remove Choice buttons, but I'll name it ".ds-node__button". In here we'll update the "background-color" to be "#252729", and the "border-color" to be "#1D1D1E". We'll also make its "max-height: 25px", so that it doesn't become too big and give it a "margin" of "4px". When hovering in our button we'll want to make the "background-color" a bit lighter for feedback so I'll pass in "#2B2D2F". When pressing on it, or on the active pseudo-class, we'll make it go darker and update its text color. So for our "background-color" I'll go with "#212325" and for our "color" I'll go with "#FDD057", which is an yellowish color. We should also update our main container background color which will update the background color under our Add Choice button, so let's go ahead and type in ".ds-node__main-container" and update its "background-color" to be the same as our extension container background color. With that done, we only have a few remaining styles that aren't extremely necessary but will, in my opinion, make things look a bit better. The first style is to give a margin to the Foldout arrow and text, making them separate a bit more. We can do that by using the ".unity-toggle__text" class selector. Simply say "margin-left" and give it a value of "2px". Then, we'll add a top and left margin to both our custom data container Foldout and Text Field. Let's do that by typing in
".ds-node__custom-data-container > Foldout", and for the "margin-left" I'll give it "-4px", which will make it move to the left, and to the "margin-top" I'll give it "4px". For our Foldout TextField we can copy the above styles but also add "> TextField" and update the "margin-left" to be "-12px" and the "margin-top" to be "8px". With that change, we've finished all the styles we needed and all that's left is to add those classes to our elements using the "AddToClassList" method, so let's go to our DSNode class and add our "ds-node__extension-container" to our extensionContainer on the Initialize method. When that's done, add the "ds-node__main-container" class to our main container in the Initialize method. Once that's done, we'll add the "ds-node__textfield" to every Text Field we have, so one will be for our dialogue name, another will be for our dialogue text, and then another will be for our choices. Then, we'll be adding the "ds-node__filename-textfield" class to our dialogue name Text Field, followed by the "ds-node__textfield__hidden" class. When that's done, do the same for the choices Text Field but add the "ds-node__choice-textfield", followed by the "ds-node__textfield__hidden" class as well. For our last Text Field add the "ds-node__quote-textfield" to the dialogueTextTextField. All that's left now are our buttons so let's start by adding the "ds-node__button" class to both our Add Choice and Delete Choice buttons in
the MultipleChoiceNode script. Then, we'll do the same but for our custom data container in the Draw method by giving it the "ds-node__custom-data-container" class. If we save both files, we should now have our styles working. You might need to re-open your Dialogue Graph Window again if things aren't working properly. If an error shows up make sure you haven't typed in anything wrong in the Style Sheet file, it often tells you the line of where something was wrong. We now have our styles working, but we should be making their values into variables instead. We will separate the dark grey colors in 6 colors in which we'll order from the darkest to the lightest, and which I'll name them "--ds-colors-window-dark-grey-" and the number from 1 up to 6. I'll be leaving the hex codes in the correct order in screen but feel free to type along. We'll also make one for our yellowish color. Let's now swap our color values into their corresponding variables in our "DSNodeStyles.uss" file. You can just search for the hex code that you want and swap it with var() and the correct variable. Once that's done we'll be creating our metrics variables. I'll order it from smallest number to highest number and will write "negative" before the amount for the negative values. Feel free to type in along as well. All that's left now is to swap these values into their correct variables using the same technique. When we're done we can simply save, and going back to Unity should leave us with the same result. Uur custom data container styles are missing here and that's simply because in our ".uss" file I've typed in "custom-data-containers", so
remove the last letter ("s") and it should be fine.
