I've this tabs that I wanted to make rounded only on top-right and top-left corners. But it ended up rounding all 4 corners.
What I did:
<mx:TabNavigator id="myTabNav" x="58" y="61" width="584" height="200" creationComplete="setColors(event)" styleName="myTabStyle">
<pages:One label="ThisOne" id="one" name="One"/>
<pages:Two label="Twoooooooooooh" id="two" width="584" name="two" />
<pages:Three label="Threeeeeeeeh" id="three" width="583" name="three" />
</mx:TabNavigator>
and
my pageStyles.css file is:
.myTabStyle {
tabStyleName: "myTabs";
corner-radius:15;
}
.myTabs {
backgroundColor: #FF0080;
corner-radius:10;
focusRoundedCorners: "tl tr";
skin:ClassReference('mx.skins.spark.ButtonSkin');
chromeColor: #FF0080; /* this is the tab widget itself, not the content */
border-style:outset;
}
As you can see I have the "focusRoundedCorners" to point to top-right and top-left but no luck. What I got is:
What am I doing wrong guys??
Thanks in advance.
Have a look at this tool http://www.wabysabi.com/flex/enhancedbuttonskin/
I would guess that the focus part of the focusRoundedCorners refers to how it should be when it has focus only..
So here is the solution.
You can write you own button skin or use the one here http://www.wabysabi.com/flex/enhancedbuttonskin/
named EnhancedButtonSkin.as (right-click, View-Source).
Then declare your TabNavigator component and specify its tabStyleName.
<mx:TabNavigator y="0" height="100%" right="0" left="0" id="navigator" tabStyleName="tab">
And now the css:
<fx:Style>
.tab
{
upSkin:ClassReference('com.EnhancedButtonSkin');
overSkin:ClassReference('com.EnhancedButtonSkin');
downSkin:ClassReference('com.EnhancedButtonSkin');
disabledSkin:ClassReference('com.EnhancedButtonSkin');
selectedUpSkin:ClassReference('com.EnhancedButtonSkin');
selectedOverSkin:ClassReference('com.EnhancedButtonSkin');
selectedDownSkin:ClassReference('com.EnhancedButtonSkin');
selectedDisabledSkin:ClassReference('com.EnhancedButtonSkin');
cornerRadii: 5, 5, 0, 0;
borderColors: #CC0000, #000000;
overBorderColors: #003399, #003399;
selectedBorderColors: #666666, #FFFFFF;
borderThickness: 1;
borderAlpha: 1;
fillColors: #CC3300, #F98900;
fillAlphas: 1, 1;
fillColorRatios: 0, 255;
overFillColors: #999999, #FFFFFF;
overFillAlphas: 1, 1;
overFillColorRatios: 0, 255;
selectedFillColors: #999999, #FFFFFF;
selectedFillAlphas: 1, 1;
selectedFillColorRatios: 111, 255;
highlightAlphas: 0, 0;
color: #000000;
textRollOverColor: #000000;
fontSize: 13;
}
</fx:Style>
This css will display:
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 working with svgs and I have two "rect" elements. They have four css properties of width, height, x and y. It works fine on Chrome and Safari, but on Firefox the x and y properties don't show up. When I manually added them inside of the inspector there is a triangle with an exclamation point next to the x and y properties, which means it's not valid. I'm surprised by this because when I go to Mozilla developer website I can see that these are valid properties. Since the x and y are not valid according to the Firefox browser it's causing my SVG to not render. I'm not sure what I'm doing wrong. What is the workaround?
<button
class="button button--plusButton"
data-ng-click="plus.toggleState()"
data-ng-class="{'is-checked':plus.state}">
<svg viewBox="-7 9 24 24" xml:space="preserve">
<rect class="plusButton-topBar"/>
<rect class="plusButton-bottomBar"/>
</svg>
</button>
.plusButton-topBar {
x: 4px;
y: 16.5px;
width: 2px;
height: 9px;
}
.plusButton-bottomBar {
x: 0.5px;
y: 20px;
width: 9px;
height: 2px;
}
.plusButton-topBar, .plusButton-bottomBar {
fill: #656c75;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
transform: matrix(1, 0, 0, 1, 0, 0);
transition: all 0.218s ease;
}
You have 2 issues here.
X and Y are not valid css properties.
Move them to inline attributes.
Your SVG element needs dimensions.
Add height and width.
button svg { /*add dimensions*/
height: 20px;
width: 20px;
}
.plusButton-topBar {
/*x: 4px;
y: 16.5px; Move these */
width: 2px;
height: 9px;
}
.plusButton-bottomBar {
/*x: 0.5px;
y: 20px; and these*/
width: 9px;
height: 2px;
}
.plusButton-topBar, .plusButton-bottomBar {
fill: #656c75;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
transform: matrix(1, 0, 0, 1, 0, 0);
transition: all 0.218s ease;
}
<button class="button button--plusButton" data-ng-click="plus.toggleState()" data-ng-class="{'is-checked':plus.state}">
<svg viewBox="-7 9 24 24" xml:space="preserve">
<rect x="4" y="16.5" width="2" height="9" class="plusButton-topBar" />
<rect x="0.5" y="20" width="9" height="2" class="plusButton-bottomBar" />
</svg>
</button>
Just a thought...
You could use text rather than svg.
button{
color:#656c75;
font: 1.5em "arial";
}
<button
class="button button--plusButton"
data-ng-click="plus.toggleState()"
data-ng-class="{'is-checked':plus.state}">
+
</button>
Just a two guesses:
First, I think x and y aren't CSS properties but HTML attributes, so
you should include them inline in HTML tags.
Second, your CSS rules aren't wrapped by tag (I guess it's
just because you pasted two different parts of file here but just
making sure)
for modifying the x and y for a svg element via CSS, you can use
transform: translate(x,y) //to modify x and y axis
transform: translateX(x) //to modify only x axis
transform: translateY(y) //to modify only y axis
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 created a TabNavigator with a bunch of NavigatorContent inside it, and want to skin just the buttons of the tabs themselves. So I added a skinClass, but looks like in the documentation, there's no skin part to target the button specifically.
Do I have to style the mx:TabNavigator itself to accomplish this? I was hoping not since I don't know how to style mx components and am more comfortable with styling spark.
Any other alternatives that I didn't think about?
Since TabNavigator is a mx component, you'll have to style it the old way. You can style the buttons by setting the 'tabStyleName' style, ie:
TabNavigator{
tabStyleName: "myTabButton";
}
.myTabButton{
skin: ClassReference("com.yournamespace.skins.TabButtonSkin");
}
You'll have to create the skins the old way, you may want to look at the mx.skins.halo.Button class for an example, or you can use degrafa or you can use pngs.
Note you can also set a firstTabStyleName or lastTabStyleName seperately if you so desire.
programmatic skin example:
http://www.davidflatley.com/2007/12/17/programmatic-button-skins-in-flex-3/
degrafa example:
http://styleanderror.net/2010/02/creating-animated-programmatic-button-skins-in-degrafa/
You can write you own button skin or use the one here http://www.wabysabi.com/flex/enhancedbuttonskin/
named EnhancedButtonSkin.as (right-click, View-Source).
Then declare your TabNavigator component and specify its tabStyleName.
<mx:TabNavigator y="0" height="100%" right="0" left="0" id="navigator" tabStyleName="tab">
And now the css:
<fx:Style>
.tab
{
upSkin:ClassReference('com.EnhancedButtonSkin');
overSkin:ClassReference('com.EnhancedButtonSkin');
downSkin:ClassReference('com.EnhancedButtonSkin');
disabledSkin:ClassReference('com.EnhancedButtonSkin');
selectedUpSkin:ClassReference('com.EnhancedButtonSkin');
selectedOverSkin:ClassReference('com.EnhancedButtonSkin');
selectedDownSkin:ClassReference('com.EnhancedButtonSkin');
selectedDisabledSkin:ClassReference('com.EnhancedButtonSkin');
cornerRadii: 5, 5, 0, 0;
borderColors: #CC0000, #000000;
overBorderColors: #003399, #003399;
selectedBorderColors: #666666, #FFFFFF;
borderThickness: 1;
borderAlpha: 1;
fillColors: #CC3300, #F98900;
fillAlphas: 1, 1;
fillColorRatios: 0, 255;
overFillColors: #999999, #FFFFFF;
overFillAlphas: 1, 1;
overFillColorRatios: 0, 255;
selectedFillColors: #999999, #FFFFFF;
selectedFillAlphas: 1, 1;
selectedFillColorRatios: 111, 255;
highlightAlphas: 0, 0;
color: #000000;
textRollOverColor: #000000;
fontSize: 13;
}
</fx:Style>
This css will display:
i.imgur.com/4HwD3.png
Remy
how can I remove the space between my video and control bar... I tried to change margin and padding to all element without success. There is still a thin white space above the controls.
http://dl.dropbox.com/u/72686/hSliderMargin.png
thanks
<mx:VideoDisplay id="videoD" autoPlay="{autoPlayOption}" source="{videoPath}" playheadUpdate="playUpdate()" click="togglePlay()" />
<mx:HBox width="{videoD.width}" styleName="controlsBar" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
<mx:Button id="playB" icon="{playImg}" width="8" height="14" click="togglePlay()"/>
<mx:HSlider id="slider" minimum="0" maximum="{videoD.totalTime}"
height="12"
width="{videoD.width - 58} "
dataTipPlacement="top"
allowTrackClick="true"
liveDragging="false"
showTrackHighlight="true"
click="isDragging=true;"
mouseUp="seek()"
sliderThumbClass="BigThumbClass"
/>
<mx:Button id="fullB" icon="{fullscreen}" width="10" height="17" click="fullScreen()"/>
<mx:Button id="volumeB" icon="{volumeOn}" width="14" height="14" click="toggleVolume()"/>
</mx:HBox>
/* CSS file */
global {
backgroundColor: #FFFFFF;
padding:0;
margin:0;
}
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);
}
Application {
backgroundColor: #FFFFFF;
backgroundGradientAlphas: 1.0, 1.0;
backgroundGradientColors: #FFFFFF, #FFFFFF;
}
HSlider {
fillAlphas: 1.0, 1.0;
fillColors: #C1C1C1, #C1C1C1, #717070, #717070;
themeColor: #3C3C3C;
thumbSkin: Embed(source="asset/thumb.png");
thumbOffset: -1;
}
Is all this set in a VBox? adding
vertical-gap : 2;
to a VBox style might fix this. also if you're using absolute height, adding clipContent = false to the box containing your slider might help too.