Page 1 of 1
CSS Styling on Gauges
Posted: Thu Jun 02, 2011 10:08 am
by conslo
Is there any way I'm not aware of to attach CSS styles to gauges made with Geyser? Because I'd very much like to do something like Vadi's fancy gauges.
Re: CSS Styling on Gauges
Posted: Thu Jun 02, 2011 12:23 pm
by Vadi
Geyser:setStyleSheet
Re: CSS Styling on Gauges
Posted: Fri Jun 03, 2011 12:05 am
by conslo
>.>
Re: CSS Styling on Gauges
Posted: Thu Aug 16, 2012 8:37 pm
by Silvine
Vadi wrote:Geyser:setStyleSheet
Care to expand on this please, a simple example would be great
for instance how do you go about setting a radius?
border-radius:5px
thanks
Silv
Re: CSS Styling on Gauges
Posted: Thu Aug 16, 2012 9:00 pm
by Vadi
Oh certainly. Conslo was just looking for a setLabelStyleSheet() equivalent for Geyser
Say you make a new Label:
HelloWorld = Geyser.Label:new({
name="HelloWorld",
x=50, y=50,
width=200, height=50,
})
and you get a box top-left of the screen. Then you add the border to it, so the code becomes:
HelloWorld = Geyser.Label:new({
name="HelloWorld",
x=50, y=50,
width=200, height=50,
})
HelloWorld:setStyleSheet([[
border-radius: 5px;
]])
... and the box goes away. Well, it went away because your label is transparent now that we've applied some CSS without giving it any colours. Your border also while having a curvy corner, does not have a border drawn to begin with to be showing. So we add a 2px wide red border:
HelloWorld = Geyser.Label:new({
name="HelloWorld",
x=50, y=50,
width=200, height=50,
})
HelloWorld:setStyleSheet([[
border: 2px solid red;
border-radius: 5px;
]])
and voila, you get a pretty box.
We can add a background colour do it and echo some text inside:
HelloWorld = Geyser.Label:new({
name="HelloWorld",
x=50, y=50,
width=200, height=50,
})
HelloWorld:setStyleSheet([[
border: 2px solid red;
border-radius: 5px;
background-color: blue;
]])
HelloWorld:echo("<center>whoa</center>")
Hope that helps!
Re: CSS Styling on Gauges
Posted: Thu Aug 16, 2012 9:17 pm
by Silvine
Great work
Thanks
Silv
Re: CSS Styling on Gauges
Posted: Thu Aug 16, 2012 9:28 pm
by Silvine
Should have tested it first
Does the same apply for guages?
I used
healthBar:setStyleSheet([[
border: 2px solid red;
border-radius: 5px;
]])
and got error
attempt to index global 'healthbar' (a nil value)
Re: CSS Styling on Gauges
Posted: Thu Aug 16, 2012 9:45 pm
by Vadi
Yes the same applies to gauges - but you need to make it with Geyser to happen, so if you didn't do the healthBar = Geyser... business but createGauge, then you use setLabelStyleSheet("healthbar", [[ ...
Re: CSS Styling on Gauges
Posted: Thu Aug 16, 2012 9:54 pm
by Silvine
One word,
Magic!!!!
I'm to embarased to tell you what I was doing.