Derma tutorials?

At the moment I can do some basic derma, tabs, sliders, buttons that change colour etc. but I’m trying to find how to make more aesthetically pleasing menus, rather than the plain grey and greyer.

Are there any tutorials that explain this kind of stuff? The wiki is very bare at the moment, with only the basics covered.
Also, how does one utilize the engine based Panels and how are they different to other VGUI elements?
Thanks in advance

use the Panel:Paint() function, along with the “draw” library.

Is this the sort of thing you mean?

yup.

So lets say I registered this button:



RECTBUTTONS = {} -----------The buttons for the options
	function RECTBUTTONS:Init()
		self:SetSize(160,40)
	end
	function RECTBUTTONS:Paint(colour)
		draw.RoundedBox(1,0,0,160,40,colors.green)
	end
	vgui.Register("!OptionsButton",RECTBUTTONS, "DColorButton")


And lets say the name of the panel once it’s created is OptionsBox, how do I change Optionsbox’s colour with a function? Does :SetColor() work in these situations? What library would I use?

function RECTBUTTONS:Paint(colour) would be
[lua]function RECTBUTTONS:Paint(w,h)[/lua]

and draw.RoundedBox(1,0,0,160,40,colors.green) would be
[lua]draw.RoundedBox(1,0,0,w,h,self:GetColor())[/lua]

Then you could do OptionsBox:SetColor(Color(r,g,b,a))

Worked exactly as I wanted! Thank you very much

[editline]21st December 2013[/editline]

So I tried a similar thing with text(using SetText), and it works fine apart from the fact that the Rounded Box also has the text applied to it, because both drawn objects are in the same function. Is there a way to prevent text being set on the Rounded box but not the Simple text?



function RECTBUTTONS:Paint(w,h)
		draw.RoundedBox(8,0,0,160,40,self:GetColor())
		--draw.WordBox(20,0,0,self:GetText(),"Default",self:GetColor(),Color(10,10,10,255))
		draw.SimpleText(self:GetText(),"Default",w/2,h/2,Color(10,10,10,255),TEXT_ALIGN_CENTER,TEXT_ALIGN_CENTER)
	end
	vgui.Register("!OptionsButton",RECTBUTTONS, "DColorButton")


[editline]21st December 2013[/editline]

Without having them as two seperate objects, I mean

If you want to change the derma look and feel, there is a much simpler way to do so using GWEN’s skin system.
Garry made an interesting blog post about it which I highly recommend you read http://garry.tv/2011/08/28/gwen-skins-pixel-reading/