I am trying to override the default panel style on Flex 3.
And the following doesn't work.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" minWidth="955" minHeight="600"
creationComplete="init();">
<mx:Style>
.panel {
borderAlpha: 1;
borderColor: white;
}
</mx:Style>
I got the style properties via here:
http://www.loscavio.com/downloads/blog/flex3_css_list/flex3_css_list.htm#Panel
Please kindly help. Thank you.
The style should be Panel{...} instead of ".panel"
<mx:Style>
Panel {
borderAlpha: 1;
borderColor: white;
}
Your identifier is wrong, try using 'Panel' instead of '.panel'.
Related
Playing with exemples located in apache-royale-0.9.6-bin-js\royale-asjs\examples, I tried to change background or font color of a Button.
So, I found an exemple of how to use style for js|TextButton, but I ask myselft several questions :
1) how to do same thing with j|Button ?
2) how to do if I want to change the color of j|Button on a clic (search for a 'setStyle' equivalent)
Here is full code :
<js:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:j="library://ns.apache.org/royale/jewel" >
<fx:Style>
#namespace j "library://ns.apache.org/royale/jewel";
#namespace js "library://ns.apache.org/royale/basic";
j|Button {
color : #ffA3EE ; /*Has no effect, not sure I do the right things*/
}
js|TextButton {
background-color: #fc0000;
border-radius : 6px ;
font-weight : normal ;
line-height : 1.4 ;
color : #ffA3EE ;
font-size : 15px ;
padding : 5px ;
}
js|TextButton:hover {
background-color: #CFCFCF;
vertical-align: middle;
border: none;
border-radius: 6px;
}
js|TextButton:active {
background-color: #77CEFF;
color: #FFFFFF;
}
</fx:Style>
<fx:Script>
<![CDATA[
private function ev_clic_jbutton():void{
//jbutton.setStyle("color",0x00ff00); // How to do to change color ?
}
]]>
</fx:Script>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:beads>
<js:ApplicationDataBinding />
</js:beads>
<js:initialView>
<js:View width="100" height="100" >
<j:HGroup gap="10">
<j:Button id="jbutton" click="ev_clic_jbutton()" text="J Button" width="100" height="100"/>
<js:TextButton text="JS TextButton" width="100" height="100"/>
</j:HGroup>
</js:View>
</js:initialView>
</js:Application>
Regards
In the case of Jewel, styles are modified via CSS. Selectors uses the following format: .jewel.<component-name>. In the case of Jewel Button, use the following to affect all jewel buttons at once and change color of text label to red:
<fx:Style>
.jewel.button
{
color: #ff0000;
}
</fx:Style>
(You can add this selector in an external CSS file too if you want instead in MXML or AS3)
The compiler will output this selector rule instead of the one in the Jewel Theme since your project takes precedence.
For change only one instance:
.jewel.button.mystyle
{
color: #00ff00;
}
and use it:
<j:Button text="A Button" className="mystyle"/>
The previous button will change color of text label to green.
Additionally, you can use j|Button as you did to change or add beads at runtime (IBead)
In the case of Basic components all is done through js|Button, beads, and CSS styles.
I'm using flash builder 4.5 to make a website. At the moment I'm trying to work on the layout of my website but I'm facing some problems. First of all my CSS looks like this.
/* CSS file */
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
s|Application{
backgroundColor : #ffffff;
}
mx|LinkButton{
backgroundColor : #000000;
color: #666666;
}
s|Button{
backgroundColor : #666666;
color: #666666;
}
The problem is that neither my buttons nor my linkbuttons obtain the color I have set in the above stylesheet, yet my application backgroundcolor is the color i set it to be in the above css file. So I'm sure the url for my style sheet is correct... this is it:
<fx:Style source="PsyThOn.css"/>
This is what my code looks like(a fragment)
<mx:LinkButton id="btnHome" width="100" height="30"
label="Startpagina" click="goHome(event)"/>
<mx:LinkButton id="btnProfiel" visible="{profielVisible()}" height="30"
label="Profiel" click="toonProfiel(event)"/>
Since I'm relatively new to the flex development the problem might be obvious but i can't put my finger on it.
Any help?
Is there maybe another/better way to style a flex application?
Thanks in advance.
try using chromeColor
Like this:
s|ActionBar
{
chromeColor: #229988;
titleAlign: center;
}
s|ActionBar #titleDisplay
{
color: #CCCCCC; /* default color is white */
fontSize: 40;
fontFamily: "Comic Sans MS";
}
I think Adobe are messing with me, from all the docs and tutorials it seems like styling a simple button got much more difficult in Flex 4 (Spark). I used to be able to have my designer create the CSS as it wasn't too far off from web standard CSS. Now it seems like I need to make a skin first as outlined in this post?
Below is the old button style.
Button {
fontFamily: "Arial, Helvetica";
fontWeight: bold;
fontSize: 11px;
paddingTop: 0px;
paddingBottom: 0px;
highlightAlphas: 0.42, 0.13;
fillAlphas: 1, 1, 1, 1;
fillColors: #B9DEF8, #9AC3EB, #B9DEF8, #9AC3EB;
color: #477199;
textRollOverColor: #477199;
textSelectedColor: #3399cc;
borderStyle: none;
}
thanks!
Skinning the Spark Button would be a programmatic approach to which you could mimic the Halo mx:button very closely.
If you just wanted your application to use the Halo theme, you could use Halo theme.
It's also important to note mx:Button included things like icon, which Spark Button does not.
As you denote you want to use CSS only, you'll have to dive in to mx skin class at:
mx.skins.halo.ButtonSkin
Spark theme:
Halo theme:
Based upon your CSS for spark:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955"
minHeight="600">
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
s|Button
{
fontFamily: "Arial, Helvetica";
fontWeight: bold;
fontSize: 11px;
paddingTop: 0px;
paddingBottom: 0px;
highlightAlphas: 0.42, 0.13;
fillAlphas: 1, 1, 1, 1;
fillColors: #B9DEF8, #9AC3EB, #B9DEF8, #9AC3EB;
color: #477199;
textRollOverColor: #477199;
textSelectedColor: #3399cc;
borderStyle: none;
}
</fx:Style>
<s:VGroup width="100%"
height="100%"
paddingTop="10"
paddingLeft="10">
<s:Button label="Hello, world!" />
<mx:Button label="Hello, world!" />
</s:VGroup>
</s:Application>
Yes, it is possible.
Check out the styles on the Spark Button to find out what can be modified using CSS.
Unable to use "HelveticaLtEx" font.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" fontFamily="Arial" fontSize="12"
xmlns:ilog="http://www.ilog.com/2007/ilog/flex"
xmlns:local="c7.views.apps.calendar.*"
backgroundColor="#FFFFFF">
<mx:Style>
#font-face {
src:url("assets/cloud_main/font/HelveticaNeueLTStd-LtEx.otf");
fontFamily: HelveticaLtEx;
}
.dateStyle{
font-family: "HelveticaLtEx";
fontSize: 18;
}
</mx:Style>
<mx:Canvas>
<mx:VBox>
<mx:Label text="testing testing testing" styleName="dateStyle"/>
</mx:VBox>
</mx:Canvas>
</mx:Application>
The bold and italics properties must match the properties of the font itself.
Try these styles and see what happens :
.dateStyle{
font-family: "HelveticaLtEx";
fontSize: 18;
fontWeight:bold;
}
Or :
.dateStyle{
font-family: "HelveticaLtEx";
fontSize: 18;
fontStyle:italic;
}
Or :
.dateStyle{
font-family: "HelveticaLtEx";
fontSize: 18;
fontWeight:bold;
fontStyle:italic;
}
It will work for you, if not, let me know and we'll try something else...
What kind of styling is there in the default Spark theme in Flex 4?
And how to override the Spark theme? For example I want to provide another backgroundcolor and
nothing happens, the color css works as intended. The CSS looks like this:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace local "*";
global
{
font-family: Georgia;
color: #260B01;
content-background-color: Red;
content-background-alpha: 0.8;
}
</fx:Style>
Hmm. This code works fine:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
global {
font-family: Georgia;
color: #260B01;
content-background-color: Red;
content-background-alpha: 0.8;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
]]>
</fx:Script>
<s:List dataProvider="{new ArrayCollection(['First','Second'])}" />
</s:Application>
What did you expected and what is your result?