Even after you switch to RibbonBar and make it like SystemMenu, you may still be unsatisfied with the result. For instance, you may not like that you have to still switch through multiple tabs to access some of the RibbonBar-exclusive features which can’t be added to the Quick Access Menu (QAM). Or maybe you don’t like the idea of making RibbonBar look like SystemMenu and prefer the tabs, but you see the tab layout as atrocious and find it difficult to work with. If either of those describe you, you’re in luck, because it’s possible to alleviate those issues by modding RibbonBar’s interface.
#What can I accomplish with RibbonBar modding?
You can:
- Change the contents of the File menu
- Create new tabs
- Remove/rename existing tabs
- Change the contents/layout of tabs
- Change the grouping and size of buttons in tabs
- Add your own plugins to tabs
- Change the font studio’s interface uses
You cannot:
- Add more menus (like the File menu)
- Add more Quick Access Menus
- Change the ordering of the file menu, QAM, or group of tabs
- Move the toolbar/ribbon to other places on the screen
- Change the icons of buttons to an image not already included in Studio
#What’s the catch?
The biggest catch of all is that ROBLOX does not officially support modding the RibbonBar interface. This means they won’t help if you’re having issues due to modding the interface, they won’t help us figure out how to modify the interface, and we can’t request any features related to modifying the ribbon files. The first isn’t too much of an issue because you can just re-install Studio or revert to a previous ribbon layout if you run into any issues. As for the second, you’ll just have to rely on the community of ribbon modders and your own efforts to play with the ribbon and see how you can tweak it.
Aside from that, there’s also the issue that ROBLOX will overwrite your ribbon modifications each time Studio updates. You’ll have to use a mod manager or run a script that re-applies your changes on update. If these don’t sound like something you’d want to do, then for now modding Studio’s ribbon is probably not for you.
#The mod manager
Before we start modifying the Studio ribbon, we need a mod manager to make sure our changes aren’t overwritten whenever Studio updates. For the purposes of this tutorial, we’ll use CloneTrooper1019’s Studio Mod Manager <download> <source code>. Once you download the program, run it to be greeted with the following screen.
This will be where you’ll launch Studio from here on out. The first button will launch Studio, and the second button will open a directory where you’ll put your mod files. The options below aren’t of any use to us for the purposes of this tutorial, but the last one will come in handy for the next step.
Click “Manage Mod Files”, tick “Open Studio Directory”, and then launch Studio. If you don’t already have it installed, Studio will download – once that’s done, your studio folder will open. As of yet, we haven’t made any changes, so the interface will still be the default. Close out of Studio now and put the Studio directory and mod directory side by side. It should look something like this:
From here, find RobloxStudioRibbon.xml in the Studio directory and copy it over to the ModFiles folder. The ModFiles folder should now look like this:
Setting up the mod manager is now complete. Any changes we make to RobloxStudioRibbon.xml will be applied to Studio, and the mod manager will re-apply the changes whenever Studio updates. CloneTrooper1019’s mod manager will actually modify the Studio directory, so if you make changes and then uninstall the mod manager, the changes will still be there. To completely remove the changes you’ll have to re-install Studio without the mod manager.
#Modifying the ribbon xml
As mentioned earlier, the process of modifying the ribbon is mostly guess-and-check – it’s not a hard science. You will likely need to spend some time playing around with ribbon modifications to get the result you’d like. That being said, this section will elaborate on the various ways the ribbon can be modified to make the process easier. To start modifying the ribbon xml, you can use Notepad, but it is strongly recommended to use Notepad++ or a similar text editor that will provide syntax highlighting and proper tabbing to make editing easier. Here is a comparison of the two:
The fundamentals:
If you experience issues with Studio’s interface or the buttons it holds, make sure the issue exists in unmodded Studio before reporting the bug. The issue may be due to your custom modification rather than something ROBLOX is at fault for.
Do not remove anything. If you remove something and Studio later tries to access it, Studio will crash. There are only a couple instances this can happen as of now (Terrain tab + its toolbar and the Script Menu), but in general it’s good practice to never remove anything. Instead, just hide it. This can be accomplished by adding the visible="false" attribute to a tab, toolbar, or button. There is only one exception to this: some Studio buttons break if they’re added to the ribbon multiple times. The only known button that does this is “Show Details” for constraints. You’ll have to remove the original if you plan on adding a second.
Do not change anything’s name, as this may cause it to stop functioning properly. For instance, if I changed the Terrain tab’s name to “Stuff”, it would break. Instead, use the text attribute to change its displayed name. For instance, adding text="Stuff" to the Terrain tab would change the display text while still allowing Studio to find the Terrain tab.
You can add <addseparator /> pretty much anywhere to add a separator between two items.
Items cannot be added to tabs unless they are inside a Group.
Special items like the Test Server/Player dropdowns can only be added to tabs and not the File / QAM menus.
If you see the fflag attribute, this means that this particular item will not be enabled unless ROBLOX enables a special test value. They can use this to disable/enable features without requiring you to update Studio. It is recommended to respect these attributes in case ROBLOX ever needs to turn a feature off due to broken behavior.
You can add (multi-lined) commends to the xml with <!-- comment inside here -->
Modifying the QAM:
Modifying this QuickAccessBar section will not immediately change your Quick Access Menu. What you see here is the default Quick Access Menu items. Modifying this is only useful if you expect to be resetting the QAM to default frequently. As an added note, starting up Studio with the QuickAccessBar removed will reset your QAM to default. Removing this section or making it hidden will hide the QAM from Studio. If you wish to remove the QAM from Studio, following fundamental #2 it is recommended to hide it rather than remove it. Separators do not work in the QAM.
Modifying the File button/menu:
There’s not much benefit in modifying the File button aside from if you’d like to change the tooltip or display name. Fundamental #3 must be ignored if you wish to change the display text, as the text attribute does not affect the File button. You must change the name directly, though it does not appear to have any negative side effects.
Modifying the File menu is pretty straightforward. You can add any action to it, but recall that special items like dropdowns and textboxes cannot be added to this menu. The File menu supports the submenu attribute though which allows you to create a menu within the File menu like so:
Lastly, there is a bug with Studio that causes the padding of every item in the menu to be decreased when the manageEmulationDeviceAction action is added to the menu. This can be a useful tool for decreasing the super-padding seen in the default menu which becomes more apparent when larger buttons are added.
I find the following setup for the File menu works best for me if you’re having trouble deciding what you should put in it:
The code for this can be found in the sample ribbon XML found at the end of this tutorial.
Changing the interface’s font:
Search the XML for <RibbonBar . The very last attribute for that entry will be font="". With empty quotes Studio will use the default font; however, a font name can be provided and Studio will use that instead. To find the names you should use for fonts, open Studio’s settings. Configuring the Script Editor > Font setting will open up a list of all the fonts available for Studio. Provide the font attribute with the font names you find here verbatim. As an example, if I use font="Comic Sans MS", Studio will use Comic Sans in most of its interface:
Theme options:
On the same line as font, if you set themeoptions="false" to themeoptions="true", you will gain access to various themes to use with Studio. The dropdown to select a theme can be found in the top-right corner of the screen. Unfortunately, these themes were not designed for Studio, and do not look the best. On top of that, the theme must be set every time Studio starts. If you would like more theme options, please vote for the Studio dark theme here. So in short you’ll probably not want to enable this setting, as it’s not very useful. For reference, here is one of the dark themes available:
Changing the order of tabs:
You can change the order of the ribbon’s tabs by changing the order they’re defined in the XML. For instance, if I wanted the Model tab to appear before the Home tab, I would move the section defining Model above the section defining Home in the XML. Whichever tab is defined first will be the default tab that’s selected when Studio opens.
Changing the name of tabs:
If renaming an existing tab, it is recommended to use the text attribute rather than changing the name as per fundamental #3. The following would rename the Terrain tab to “Stuff” <TabPage name="Terrain" text="Stuff">. If creating a new tab, set the name attribute to whatever you’d like the tab to be displayed as – just make sure the tab name is unique and isn’t used by another tab.
Removing tabs:
If you’d like to remove an existing tab, as per fundamental #2 use the visible attribute. The following would hide the Home tab for instance <TabPage name="Home" visible="false">. If you want to remove a custom tab you created, it’s safe to delete it from the file.
Creating tabs:
You can create a tab with the following syntax:
<TabPage name="TabName">
</TabPage>
Insert the items you’d like to appear inside the tab between the <TabPage> and </TabPage> tags. Remember that items inside tabs must be inside groups.
Groups:
The usage and syntax of groups are similar to that of tabs. To create a group, the syntax is:
<Group name="GroupName">
</Group>
Contents of tabs and groups:
Pretty much anything can be added to the inside of a tab+group. Place items after the start tags of the tab and group, and before the end tags of the tab and group. Similarly to tabs and groups, the order items are defined is the order they’ll show up under the tab.
Changing the appearance of buttons:
You can modify the size of buttons by using the width and height attributes. Most of these default to either 16 or 32. To set the height of a button to 32, I’d use height="32". You can modify the icon of a button with the icon attribute, but you may only use images included by Studio (the paths to which can be found by looking at other buttons already-defined). The tooltips of the buttons can be changed with the tooltip attribute. You can also change whether the text for the button appears below or beside it. To select one of the two, use style="textundericon" or style="textbesideicon"
Adding plugin buttons to the interface:
There is special syntax you need to add plugin buttons to the ribbon. It is as follows:
<addaction name="ButtonName.ToolbarName.Plugins." isProxy="true" text="TextYouWantToDisplay" style="textundericon" width="32" height="32"/>
For instance, if I wanted to add Stravant’s StorageSwap to the ribbon, I’d first have to look at how the button is created in the plugin.
plugin:CreateToolbar('ObjectTools'):CreateButton("StorageSwap", ...)
StorageSwap’s button name is “StorageSwap”, and its toolbar’s name is “ObjectTools”. Based on this, my syntax for adding StorageSwap to a tab is:
<addaction name="StorageSwap.ObjectTools.Plugins." isProxy="true" text="Storage Swap" style="textundericon" width="32" height="32"/>
There are two caveats to this though. The first is that the icon size can be no larger than the size the plugin’s icon was uploaded at. The second is that if the button becomes visible before the plugin loads (usually when a place is opened) the button’s appearance will be messed up – this should not be an issue if you do not have your ribbon open by default or if you do but your button is not on the main tab. This can also be an issue if you have plugins that only create buttons/toolbars while you’re in a certain place.
Template XML:
This is the modified ribbon XML I personally use if you’d like to use it as a reference: http://pastebin.com/M7dQrPm5
#Final Note
Remember that you are responsible for keeping your ribbon up to date with the latest features, as they will not be added for you. Also know that some updates can break your modded ribbon. For instance, when ROBLOX changed how test servers worked with the introduction of Team Create group-testing, creating test servers no longer worked for me until I updated my ribbon xml.
If you have any questions about modding your ribbon XML, feel free to ask them here. I or another ribbon modder will be more than happy to help.
Also, it’s not just the ribbon which can be modded. For instance, by modifying the ReflectionMetadata.xml, you can control which order instances are sorted in the explorer, which order their properties are sorted in the Properties widget, and hide/show instances and servers in the Explorer and Advanced Objects. You can also change textures/etc in the Studio folder to change the cursor’s appearance for instance. The ribbon is not the only thing you can change. Feel free to explore how you can make Studio your own.