On our servers we use a diffrent layout for the Kits UI.
If you want to do the same heres a little walkthrough
Pre make the individual kit images with any paint software.
In our case i used Photoshop.
This would look something like this :
Below is the link to the .psd file i used for the example above and on our kits layout!
U can upload the images used for the kits on your website/discord/or any other imagehost.
After that u can add them the same as you would with the unedited UI.
Now the UI part.
To change the anchors of the positions of each UI element u have to lookup the following code
change the vallues or paste this snippet oover the code in the .cs file (plugin) can use any text editor you want.
private void CreateKitEntry( BasePlayer player, ref CuiElementContainer element, string panel, float[] pos, string entry )
{
var kit = storedData.Kits[entry.ToLower()];
var kitData = GetKitData(player.userID, entry.ToLower());
var image = kit.image ?? "http://i.imgur.com/xxQnE1R.png";
if ( ImageLibrary )
{
image = TryForImage(kit.name.Replace(" ", ""));
}
UI.CreatePanel( ref element, PanelKits, _uiColors["header"], $"{pos[0]} {pos[1]}", $"{pos[2]} {pos[3]}");
UI.LoadImage( ref element, PanelKits, image, $"{pos[2] - .19f} {pos[1] + .1f}", $"{pos[2] - .0f} {pos[1] + .4f}");
UI.CreateLabel( ref element, PanelKits, _uiColors["white"], kit.name, 12, $"{pos[0] + .0f} {pos[3] - .032f}", $"{pos[2] - .003f} {pos[3] - .0f}");
UI.CreateLabel( ref element, PanelKits, _uiColors["white"], kit.description ?? string.Empty, 12, $"{pos[0] + .005f} {pos[3] - .18f}", $"{pos[2] - .005f} {pos[3] - .07f}", TextAnchor.UpperLeft);
UI.CreateLabel( ref element, PanelKits, _uiColors["white"], string.Format(GetMsg("KitCooldown", player.UserIDString), kit.cooldown <= 0 ? GetMsg("None", player.UserIDString) : CurrentTime() > kitData.cooldown ? MinuteFormat(kit.cooldown / 60).ToString() : "<color=red> -" + MinuteFormat((double)Math.Abs(Math.Ceiling(CurrentTime() - kitData.cooldown)) / 60) + "</color>"), 12, $"{pos[0] + .005f} {pos[3] - .34f}", $"{pos[2] - .005f} {pos[3] - .31f}", TextAnchor.MiddleLeft);
UI.CreateLabel( ref element, PanelKits, _uiColors["white"], string.Format(GetMsg("KitUses", player.UserIDString), kit.max <= 0 ? GetMsg("Unlimited") : kit.max - kitData.max < kit.max ? $"<color=red>{kit.max - kitData.max }</color>/{kit.max}" : $"{kit.max - kitData.max }/{kit.max}"), 12, $"{pos[0] + .005f} {pos[3] - .37f}", $"{pos[2] - .005f} {pos[3] - .34f}", TextAnchor.MiddleLeft);
if ( player.net.connection.authLevel == 2 || permission.UserHasPermission( player.UserIDString, this.Title + ".admin" ) )
{
UI.CreateButton( ref element, PanelKits, _uiColors["buttonred"], GetMsg("RemoveKit", player.UserIDString), 14, $"{pos[0] + .12f} {pos[1] + 0.0f}", $"{pos[0] + .19f} {pos[1] + .05f}", $"UI_RemoveKit {entry.ToLower()}");
}
if (!ShowUnavailableKits)
{
UI.CreateButton( ref element, PanelKits, _uiColors["header"], GetMsg("Redeem"), 10, $"{pos[0] + .056f} {pos[1] + .10f}", $"{pos[0] + .134f} {pos[1] + .123f}", $"kit.gui {entry.ToLower()}");
}
else
{
string reason;
var cansee = CanSeeKit(player, entry.ToLower(), PlayerGUI[player.userID].guiid == 0 ? false : true, out reason);
if (!cansee && string.IsNullOrEmpty(reason))
{
UI.CreatePanel( ref element, PanelKits, _uiColors["header"], $"{pos[0] + .005f} {pos[1] + 0.01f}", $"{pos[0] + .06f} {pos[1] + .07f}");
UI.CreateLabel( ref element, PanelKits, _uiColors["white"],"<color=red>"+GetMsg("Unavailable", player.UserIDString)+"</color>", 12, $"{pos[0] + .005f} {pos[1] + 0.01f}", $"{pos[0] + .06f} {pos[1] + .07f}");
}
else
{
UI.CreateButton( ref element, PanelKits, _uiColors["dark"], GetMsg("Redeem"), 12, $"{pos[0] + .005f} {pos[1] + 0.01f}", $"{pos[0] + .06f} {pos[1] + .07f}", $"kit.gui {entry.ToLower()}");
}
}
}
u can now upload the new kits.cs file to your servers oxide plugin folder.
Once everything has been changed its layout would look like the image on top.
to change the whole background of the main UI frame go to the config and change the background image to your liking.