Using Flex 3, I have a Button which is skinned using PNGs specified in a CSS style sheet.
Button.addextra {
downSkin : Embed( source="img/add-extra-icon.png" );
overSkin : Embed( source="img/add-extra-icon.png" );
upSkin : Embed( source="img/add-extra-icon.png" );
disabledSkin : Embed( source="img/add-extra-icon-disabled.png" );
}
My designer colleague would like to add a rollover effect of a hairline #999999 line outside the image. Is this possible (without creating a new overSkin png) using the standard Flex styles?
What about drawing lines with Graphics?
I believe you will need to change the overSkin, i think that would be the only way.
Related
I have :
auto btnBox = new QDialogButtonBox(QFlags({QDialogButtonBox::Abort, QDialogButtonBox::Ok}));
layout()->addWidget(btnBox);
I tried
btnBox->setStyleSheet("QPushButton {background-color : red;}");
But the buttons remains light gray...
Thanks for your help
The following shorter version changes the Background-Color of the Buttons:
auto btnBox = new QDialogButtonBox( QDialogButtonBox::Abort| QDialogButtonBox::Ok );
layout()->addWidget(btnBox);
btnBox->setStyleSheet("background: red");
#SteveXP solution works, if you don't use QWindowsVistaStyle, which uses native drawing
For example I've QToolButton with custom icon
Can I make this icon lighter on hover using QToolButton:hover qss?
Could you please try below options:
option 1:
Try PaletteRole property type
http://doc.qt.io/qt-5/stylesheet-reference.html#paletterole
As you require for hovering,
QToolButton:hover { color: palette(light); }
option 2:
Create a different image with lighter view Icon.
And set the background when you hover on it.
QToolButton:hover { background: url("LighterView.png") ; }
Is there a way to darken or lighten an image or actually any display object on mouse over and then restore it back on mouse out? I would prefer to use filters if possible just because I am already applying a filter on mouse over and removing it on mouse out. I would then be able to add it to the filters list. If not that's fine. In my code I'm using a Flex 4 Spark Image component.
You should use ColorTransform for this. Below is shown how you can utilise this.
image.addEventListener(MouseEvent.MOUSE_OVER, checkTransform);
image.addEventListener(MouseEvent.MOUSE_OUT, checkTransform);
private function checkTransform(e:event):void
{
if(e.type == MouseEvent.MOUSE_OVER)
image.transform.colorTransform = new ColorTransform(0.5, 0.5, 0.5); //multiplies all RGB-values by 0.5
else
image.transform.colorTransform = new ColorTransform(1, 1, 1); //restores to default image
}
this should do the trick. For more information on ColorTransform: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/ColorTransform.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6
The easiesy way to do is, create a colorfilter, and apply this colorfilter to the image on rollover and remove the filter on rollout.
For details visit :
http://cookbooks.adobe.com/post_Convert_images_to_grayscale_using_ActionScript_-12769.html
Thanks
The examples I've seen seem to show how to change the color that shows when the user actually hovers over the textinput field.
However when the validation fails, a generic textInput border qill have a red line over it. My CSS file uses a border skin for the textInput, so I can't see this line.
I was hoping there was a way to highlight the text box when it failed validation, or re-enable the red line feature. I don't want to get rid of my CSS cos it'll totally blow my color-scheme, but any tweak allowing the error line to show would be much appreciated.
This is the CSS:
TextInput, TextArea
{
border-skin: Embed(source='/../assets/images/input_bg.png', scaleGridLeft=8, scaleGridRight=20, scaleGridTop=8,scaleGridBottom=9);
padding-top:2;
padding-left:2;
font-size:11;
}
anything that extends UIComponent (both TextInput and TextArea do) has a style called errorColor. It defaults to red. You can change this to whatever you want.
Additionally, if you've got an image that you are using as a border, you should probably remove the pixels from the middle so that it is an actual border instead of an overlay.
The only way I've managed to find, is that Validator will change the component's borderColor style. I don't think it can be achieved using an image- you'll have to embed the image in a basic GraphicRectangularBorder subclass or similar. You can then add this to your skin class:
override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
if (styleProp == "borderColor")
{
if (getStyle("borderColor") == getStyle("errorColor"))
{
// show error outline
}
else
{
// hide error outline
}
}
}
in MXML, there is a Button class which you can instantiate like so:
<mx:Button id="something />
but what if you wanted to dynamically build this in AS3 and add it to the Flex app dynamically, without the use of components (just AS3) and then modify Flex's styles, for example, here you access the Button's properties and set them:
var btn:Button = new Button();
btn.height = 50;
btn.width = 75;
btn.x = 100;
btn.y = 40;
but how would you go about changing the Style, for example:
btn.downSkin = "something";
btn.color = "0xfffff";
I'm sort of starting to lean towards making a flex component in MXMLand than just making it visible true/false, but i like the fact that i create an object in AS3 and then destroy it when I don't need it anymore, than create it again once needed.
This page has a solution to the problem:
Setting and getting Style attributes in ActionScript:
// setting a components styleName to reference a CSS class
component.styleName = "highlight";
// set a Button's background color and font size
submitButton.setStyle( "backgroundColor", 0x000000 );
submitButton.setStyle( "fontSize", 14 );
// get a TextArea's font family and color
textArea.getStyle( "fontFamily" );
textArea.getStyle( "color" );
You could use CSS, either inline or as an external CSS file. That way you don't have to set the properties manually every time you create a button.
/* CSS file */
Button {
borderColor: red;
}
Check out Styling Button control, by Peter deHaan (also read the comments in that post).