Cascading styles in WPF (a la CSS) - css

is there a way to specify something like this in WPF:
CSS:
#someSpan input { color: #f1f1f1; }
or
span input { color: #f1f1f1; }
meaning, i'd like to have all TextBlock elements within container follow x style, w/out having to apply the style to each textblock.
just to clarify, i need to do something like this in WPF.
i know about the BasedOn attribute of a style.. but that's not quite what i'm looking for here
looking for something like this
<Style x:Key="FileItem" TargetType="{x:Type #SomeContainer TextBlock}">
or maybe within SomeContainer, add a TextBlock style that will apply to all of its textblocks

You can do that, you just need to nest styles, e.g.
<Style TargetType="{x:Type Border}">
<Style.Resources>
<Style TargetType="{x:Type TextBox}">
<!-- ... -->
</Style>
<Style.Resources>
</Style>
This allows you to style TextBoxes in Borders, elements however can only have one style applied to them, so having parallel "rules" is not going to work as well.

Regarding the last part of your question, if you want to apply a style to all TextBlocks within a particular element, just put the Style within that elements resources:
<TextBlock /> <!-- unaffected -->
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<!-- ... -->
</Style>
</Grid.Resources>
<TextBlock /> <!-- will be styled -->
</Grid>
If you have your styles stored in a separate ResourceDictionary then you can "import" them all for a particular element by merging resource dictionaries:
<Grid>
<Grid.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/MyOtherStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Grid.Resources>
<TextBlock /> <!-- will be styled -->
</Grid>

Related

Xamarin.Forms CSS selector for custom control

I have a custom control (MyControl) in my Xamarin.Forms project.
I wonder if it is possible to style my control with CSS? Currently I do not know how to specify a selector for my custom control.
If I style the control in XAML, I need to import a namespace and use it:
xmlns:ctrls="clr-namespace:DemoApp.Controls"
...
<Style TargetType="ctrls:MyControl"...
CSS also supports namespaces:
#namespace ctlrs "clr-namespace:DemoApp.Controls";
However, if I try to write a CSS rule...
ctrls|MyControl {
margin: 10;
}
...I get a System.NotSupportedException: 'AT-rules not supported'.
So I wonder if there is a solution for custom control to be styled with CSS.
Select element by base class
CSS in file /Styles/styles.css in Xamarin.Forms project:
^MyClass {
font-style: italic;
}
XAML:
<ContentPage ...
xmlns:myNamespace="clr-namespace:MyNamespace;assembly=MyAssembly"
...
>
<ContentPage.Resources>
...
<StyleSheet Source="/Styles/styles.css" />
...
</ContentPage.Resources>
...
<myNamespace:MyClass Text="Text" />
...
</ContentPage>
Note:
The ^base selector is specific to Xamarin.Forms, and isn't part of the CSS specification.
Elements with a specific class attribute can be selected with the case sensitive .class selector:
For example , set the style of Label
style.css
.detailPageTitle {
font-style: bold;
font-size: medium;
text-align: center;
}
.detailPageSubtitle {
text-align: center;
font-style: italic;
}
in xaml
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet Source="/Assets/styles.css" />
</ContentPage.Resources>
<ScrollView>
<StackLayout>
<Label ... StyleClass="detailPageTitle" />
<Label ... StyleClass="detailPageSubtitle"/>
</StackLayout>
</ScrollView>
</ContentPage>
In your case , you should make sure that your custom control has the property Margin.
For more details about using CSS in xamarin.forms you can check here .
Update
You can set the style as following
^MyControl {
background-color: lightgray;
}
Or you can directly set it in xaml
<ContentPage.Resources>
<StyleSheet>
<![CDATA[
^MyControl {
background-color: lightgray;
}
]]>
</StyleSheet>
</ContentPage.Resources>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<conv:MyControl Text="1111111"/>
<conv:MyControl Text="1111111"/>
<conv:MyControl Text="1111111"/>
<conv:MyControl Text="1111111"/>
</StackLayout>

How do you use :last-child without defining the elements on the HTML page?

I'm trying to define a group of buttons that are on top of each other with a black border and in order to have no overlapping borders I want to do something like this:
.myCustomButton {
border: 1.5px solid black;
}
.myCustomButton:not(:last-child) {
border-bottom: none;
}
I've tried a few variations of that and had no success. I assume (after some playing around with it) this is because the elements aren't a "group", so there is no actual last child.
I have tried using the "Field Group Ids" but that didn't change much. Also tried giving the "items" its own class and use :last-child on that but that also didn't work.
<VBox xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" width="auto" direction="Column" id="vbox0_copy2">
<items class="a">
<Button xmlns="sap.m" text="1" id="flight1" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="2" id="flight2" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="3" id="flight3" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
</items>
</VBox>
To my understanding, using standard HTML and css where I define the buttons in the HTML file itself should work it out but as far as I know this is how you are supposed to do it:
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "ExampleScreen2"
})
}).placeAt("content");
});
</script>
So, generally speaking, am I wrong to use only one '.placeAt("content")' or am I missing another way to use :last-child correctly?
What happens is that sapui5 add a 'div' layer for each child of a VBox.
that means the generated html will look like
<div> <-- VBox
<div> <-- item 1 container
<button />
</div>
<div> <-- item 2 container
<button />
</div>
...
</div>
thus your selector cannot target a class set on the item itself (because as you said, they are not sibling in the html tree)
to achieve your goal, set a class on the VBox, like 'myCustomButtonContainer' and then set your css as
.myCustomButtonContainer > .sapMFlexItem {
border: 1.5px solid black;
}
.myCustomButtonContainer > .sapMFlexItem:not(:last-child) {
border-bottom: none;
}

Customizing Semantic UI React font-family, but can't find src/site/globals/site.variables file to do so. Is there another way?

I am trying to change the global font-family for my app, but I can't get it to work.
I am using Semantic-UI-React so I figured that could be the problem, but when I looked for src/site/globals/site.variables (something other solutions have referenced) to change the global variables, I realized that I don't have those files inside the Semantic-UI-React node module. I also tried to use !important on the #root of my application as well as the .app that encloses all of my components and other lower levels too, but It only changes the code inside of my Semantic-Modal.
I imported the fonts in frontend_react/public/index.html
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="/styles.css" >
<link href="https://fonts.googleapis.com/css?family=Cinzel:700,900" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css?family=Cinzel:700,900');
#root {
font-family: 'Cinzel', serif !important;
}
</style>
<title>Three Seeds Tarot</title>
I then called on the font in /App.css. I also called on it with the body, html selector in the same way and in the page selector to no avail.
.App {
text-align: center;
background-image: url('http://2.bp.blogspot.com/-kX_5_Cqch4g/UmBAsMV4krI/AAAAAAAADjA/XEJnfAq1Dsg/s1600/ProtectionKamea300dpi(a3).jpg');
font-family: 'Cinzel', serif !important;
}
and here is my /App.js components render function:
render() {
const user = this.props.user
return (
<div className='App'>
<div id='nav-bar'>
<NavBar/>
</div>
<div className='page'>
{!user.loggedIn ? <div>
<header className='App-header'>
<marquee scrollamount='5' direction='right'><img src={image} className='App-logo' alt='logo' /></marquee>
</header>
</div> : null
}
<Switch>
<Route path='/readings/new' component={ NewReading } />
<Route path='/readings' component={ ReadingSplash } />
<Route path='/cards' component={ CardList }/>
<Route exact path='/profile' component={ Profile } />
<Route exact path='/' component={ Welcome } />
<Route exact path='/login' component={ Login } />
<Route exact path='/signup' component={ Signup } />
</Switch>
</div>
</div>
);
}
The only spot that the CSS changes have worked are in the <p> tags inside of my Semantic UI Modal:
render() {
return (
<div className='card-image'>
<Modal
size='large'
trigger={
<div className="ui medium images" >
<img className="single-card" src={this.getImage(this.props.card.name)} alt="No Image Found" onClick={this.handleClick} />
</div>}
style={inlineStyle.modal}
>
<Modal.Header>{this.props.card.name}</Modal.Header>
<Modal.Content >
<Image wrapped size='medium' src={this.getImage(this.props.card.name)} floated='left' />
<Modal.Description>
<Header>{capitalize(this.props.card.card_type)} Arcana</Header>
<p>Meaning Upright: {this.props.card.meaning_up} </p>
<p>Meaning Reversed: {this.props.card.meaning_rev} </p>
<p>Description: {this.props.card.desc} </p>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
{/* <Button primary onClick={this.modalClose}>Close</Button> */}
</Modal.Actions>
</Modal>
</div>
)
}
So, to conclude, I want to change the global font. I tried using !important which I know isn't the best solution, but all of the other solutions I have found have references to changing the global variables for Semantic UI React in the src/site/globals/site.variables folder, which I don't seem to have.
The site.variables file is a separate file in the Semantic UI build tools for the CSS. If your project is not also including the main Semantic UI project that includes all of the Gulp build tooling, you will not have any of those files. The only way to change that font would be to recompile your own CSS.
It sounds like you are importing the Semantic UI styles that are already compiled as a CSS import somewhere early in your application. As long as you define your desired font on the body tag AFTER your SUI import of the CSS it should take precedence. You could also combine selectors to increase specificity if you want to be sure.
body #root {
font-family: "MyFont", ...your fallback stack
}

How can I set the height in layoutUnit of primefaces?

I'm using primefaces 5.0. Below is my page where I like to set the height fix to 200px of the layoutunit west and center. Is there any possibility to do this? The current height will be ignored.
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml">
<ui:define name="header_title">
<h:outputText value="Titel" align="center" />
</ui:define>
<ui:define name="content">
<h:form id="labelForm" style="height:100%">
<p:growl id="growl" showDetail="true" />
<p:layout style="height:100%" fullPage="false" >
<p:layoutUnit position="west" header="west" resizable="false" closable="false" collapsible="false" style="height:200px">
<p:tieredMenu id="type" model="#{dynamicLabelMenu.menu}" trigger="itemSelect" />
</p:layoutUnit>
<p:layoutUnit position="center" resizable="false" closable="false" collapsible="false" header="center" style="height:200px">
<!-- datatable -->
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="false" closable="false" collapsible="false">
<br/>
<br/>
<!-- datatable -->
</p:layoutUnit>
</p:layout>
</h:form>
</ui:define>
</ui:composition>
The height should be consistent with the other units... meaning if you would like to fix the height of one unit the others have to be also fixed...
The reason behind this is that PrimeFaces embeds the css rules into the style attribute and totally ignores your style.
You have two options to solve this:
If you are okay keeping the consistent between the units, then this might help. Currently your layout has a height of 100% that means the units should fit into the content, but to fix it you might take this approach
<p:layout style="min-height:200px;">
This way you have a minimum height of 200px and it could expand with the content, or just use height:200px.
The other option is to define a CSS class with !important option, although using !important is ugly and not recommended, but in this particular case PrimeFaces is injecting the css into the style attribute making it hard to cascade the height option.
<style>
.westUnit {
height: 200px !important;
}
</style>
<p:layoutUnit position="west" styleClass="westUnit">
Have a look at the CSS priority rules:
http://www.standardista.com/css3/css-specificity/
You can simply overwrite the primefaces CSS rules by adding more specific CSS selectors.
Example :
Primefaces:
.ui-dialog .ui-dialog-title {
text-align : center;
}
Your CSS:
#content .ui-dialog .ui-dialog-title {
text-align : right;
}
You can use the browser debugging tools (F12 in most browsers) to find out witch primefaces css is used for your components. Overwrite them with more specific CSS selectors from your own css code.

define the height of an image in xul extension

My extension is an overlay that has some images inside a toolbar. I need to display these images small (about 15px), but they render always at the same height of toolbar.
I've already tried to define height and maxHeight of image and of hbox where them are palced but it doesn't work.
here is the piece of code:
...
<toolbox id="navigator-toolbox">
<toolbar id="my-toolbar">
<label>images:</label>
<hbox id="rsour_inputRating">
<image id="rsour_1" />
<image id="rsour_2" />
<image id="rsour_3" />
<image id="rsour_4" />
<image id="rsour_5" />
</hbox>
<toolbarseparator />
...
The correct way is to use -moz-box-align in CSS, or align attribute in xul, so the image doesn't stretch vertically:
#rsour_inputRating{
-moz-box-align:center;
}
#rsour_inputRating img{
list-style-image : url("chrome://...");
width:20px;
height:15px;
}
At the top of the file, add:
<?xml-stylesheet href="chrome://your_ext_name/content/cssFile.css" type="text/css"?>
Then in the css file:
#rsour_inputRating img {height:15px;}

Resources