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";
}
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 have a custom skin class that I want to apply to all scrollbars. Is there a way to set this globally in a Flex Spark application?
s|Scroller
{
skinClass: com.x.y;
}
Thanks guys I got it working :)
I place this code in the Application style tag (a style sheet would work as well),
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace skins "skins.*";
s|HScrollBar
{
skinClass: ClassReference("skins.HScrollBarSkin");
}
s|VScrollBar
{
skinClass: ClassReference("skins.VScrollBarSkin");
}
</fx:Style>
The Best answer is that you apply that style to the parentApplication that means in the first page you just give that style and then it will apply to all the sub page. such like that
<mx:Style source="Style/Style.css" />
give that to all the parent page in your application.
Have a nice day.
Style.css
Application
{
backgroundColor: #FFFFFF;
themeColor: #6C76D3;
color: #333333;
}
.NumButton
{
color: #000000;
width: 35;
font-weight:bold;
}
Accordion
{
borderStyle: solid;
headerHeight: 32;
textIndent: 0;
openDuration: 219;
fillAlphas: 1, 1, 0.7, 0.7;
fillColors: #EBF0F3, #8E8FCC, #6273C9, #263692;
selectedFillColors: #D5DBE3, #8E8FCC;
headerStyleName: "myaccordionHeader";
}
AccordionHeader
{
borderStyle: solid;
headerHeight: 36;
textIndent: 0;
openDuration: 219;
fillAlphas: 0.4, 0.5, 0.7, 0.7;
fillColors: #DEE1FF, #AEBEFF, #8C86FF, #5646D3;
selectedFillColors: #AEBEFF, #8C86FF;
headerStyleName: "myaccordionHeader";
}
.myaccordionHeader
{
color: #1F213C;
fontFamily: Tahoma;
fontSize: 12;
}
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.
Good morning,
I face a curious bug as I try to set a fontstyle in a mx:Panel object in Flex.
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
layout="absolute" title="Test"
titleStyleName="titleAssumed" >
<mx:Label x="0" y="-5" styleName="othersAssumed" />
<mx:Label x="0" y="16" styleName="othersAssumed"/>
The associated CSS file contains the following relevant styles:
/* CSS file */
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face{
src: url("ttf\\ControlSign Bold.ttf");
fontFamily: ControlSign;
fontWeight: bold;
}
#font-face{
src: url("ttf\\ControlMono Regular.ttf");
fontFamily: ControlMono;
}
.titleAssumed
{
fontFamily: ControlSign;
font-weight: bold;
font-size: 12;
color: #FFFFFF;
}
.othersAssumed
{
fontFamily: ControlMono;
font-size: 15;
color: #ADADAD;
}
With this configuration, and once I have set the compiler properties in Eclipse for the compiler to use the Flash text engine for MX components, I can see the two labels of the Panel in the correct font and style ; but the Panel's title will not show up. Even if I add the "embedAsCff: false" line to my style .titleAssumed, the title refuses to show up.
Any idea about what could be causing the trouble? Thanks !
EDIT: syntax error fixed.
You need to set embedAsCFF: true in your font. Also you have a syntax error where you are not closing your curly brackets on the fonts. Below is an example and here are some more.
#font-face{
src: url("ttf\\ControlSign Bold.ttf");
fontFamily: ControlSign;
fontWeight: bold;
embedAsCFF: true;
}
how can I completely remove button effects from a Button component in Flex ?
Background, Fill and border are completely white. But still I've a black shadow around the button (see picture bloew):
http://dl.dropbox.com/u/72686/button.png
thanks
Button {
fillAlphas: 1.0, 1.0, 1.0, 1.0;
fillColors: #FFFFFF, #FFFFFF;
themeColor: #FFFFFF;
borderColor: #FFFFFF;
cornerRadius: 0;
paddingTop: 0;
paddingLeft: 0;
paddingRight: 0;
paddingBottom: 0;
horizontalGap: 0;
leading: 0;
fontWeight: normal;
color: #000000;
textSelectedColor: #000000;
textRollOverColor: #000000;
}
skin: ClassReference(null) will not work; use the below its wokrs
upSkin: ClassReference(null);
overSkin: ClassReference(null);
downSkin: ClassReference(null);
disabledSkin: ClassReference(null);
selectedUpSkin:ClassReference(null);
selectedOverSkin: ClassReference(null);
selectedDownSkin: ClassReference(null);
selectedDisabledSkin: ClassReference(null);
You should specify the Flex version, since the newly release Flex 4 has a completely different skinning architecture.
Anyhow, I assume this is Flex 3, you could try and set this:
Button {
skin: ClassReference(null);
}
Not sure it'll work, some components choke on null skins.
If it is Flex 4, I suggest creating a skin class that does what you want, even if it is empty, and setting it like so (note the namespace, s for Spark):
s|Button {
skin-class: ClassReference('my.empty.Skin');
}
Where my.empty.Skin is the fully qualified class name for your skin.