I have this code in xul:
<treechildren id = "mainTree_treechildren">
<treeitem container="true" open="true">
<treerow>
<treecell label="&tree.actions;" />
</treerow>
<treechildren id="tree_actions_treechildren" >
<treeitem container="true" open="true">
<treerow>
<treecell label="&tree.actions.warnings;" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
and i have problem styling it. I need to have to different text colors for treecell in mainTree_treechildren and different text color for treecell in his child treechildren with id tree_actions_treechildren.
At the moment I have this css code
#mainTree #mainTree_treechildren::-moz-tree-cell-text { color: #000000; }
#mainTree #tree_actions_treechildren::-moz-tree-cell-text { color: #FFFFFF; }
But it doesn't work. I only get black color for every element inside mainTree_treechildren including tree_actions_treechildren.
The <treechildren> elements aren't actually being displayed - they are merely the data source for the tree widget (other data sources are also possible, e.g. RDF or XML files). Consequently, their contents cannot be styled directly. If you want to style individual tree cells differently you should use the properties attribute. Something like this should work:
<treechildren id="mainTree_treechildren">
<treeitem container="true" open="true">
<treerow>
<treecell label="&tree.actions;" />
</treerow>
<treeitem container="true" open="true">
<treerow>
<treecell label="&tree.actions.warnings;" properties="warning" />
</treerow>
</treeitem>
</treeitem>
</treechildren>
And the corresponding styles:
#mainTree_treechildren::-moz-tree-cell-text { color: #000000; }
#mainTree_treechildren::-moz-tree-cell-text(warning) { color: #FF0000; }
Note that using CSS selectors like #foo #bar isn't recommended - an ID is always unique so specifying more than one in a selector will only slow things down.
Related
I have a re-useable table component that I am styling with vanilla CSS. I have six possible colors that I would like users to be able to pick from to change the table header background color if wanted. Ideally, this color choice should be a prop on the component, but I'm not sure how to do this.
In my CSS file I have the color variables defined:
th {
--deq-primary: #0080b7;
--daq-primary: #1ab7da;
--ddw-primary: #147995;
--dwq-primary: #034a64;
--derr-primary: #05a68b;
--dwmrc-primary: #f26322;
}
th {
background-color: var(--deq-primary);
color: white;
border: 1px solid #cecece;
}
Is it possible to set a prop on my table to accept one of these values so that the header background color can be changes within the component?
Something like
<MyTable headerColor="ddw-primary" />
the the header color would change to the ddw-primary color
UPDATE
I was able to implement Hugo Elhaj-Lahsen suggestion. The variable name is being passed as a string and I updated the example he provided to account for the -- that is required in the variable name. So the final style tag in the code looks like
return <table style={{backgroundColor: `var(--${headerColor})` }}>
{// ...}
</table>
....
>
In the component I'm passing the var name as a string:
<MyTable
columns={columns}
data={data}
headerColor="my-color-variable-name"
/>
A possible React solution without libs would be to pass the CSS variable name as props, and reference it in the style of your component. Suppose we have:
<MyTable headerColor="ddw-primary" />
and your CSS variables defined in the MyTable component. Assuming you style via the style= property, you can do:
return <table style={{backgroundColor: `var(${headerColor})` }}>
{// ...}
</table>
Let's assume that the user can add styles for every component in admin panel and I get it as string in my Node server:
const stylesFromAPI = ".p { color: red } .bg { background: lime }";
How to prefix this styles before append to my document to avoid conflicts?
I need something like CSS modules but working with strings (not as module loader):
const stylesFromAPI = css(".p { color: red } .bg { background: lime }"); // returns hashedClassname685946898456
<SomeCompontent className={stylesFromAPI} />
produces:
<style>
.hashedClassname685946898456 .p { color: red }
.hashedClassname685946898456 .bg { background: lime }
</style>
<div class="hashedClassname685946898456"></div>
Shadow DOM seems like a reasonable option here. You can create your style tags with inside the shadow DOM without having to deal with any selector prefixes. For example, using the react-shadow package:
import root from 'react-shadow';
Then in JSX, something like:
<root.div>
<style type="text/css">
{/* CSS string here */}
</style>
<div>
{/* Stuff here */}
</div>
</root.div>
Check out a working example of this here: https://github.com/joshdavenport/stack-overflow-61566764-react-css-shadow-dom
The main downside here is your styles from outside the shadow DOM will not apply. Those using the shadow DOM for components see this as a good thing, those simply trying to scope CSS do not. Not sure what it is you're scoping, so I can't really tell if that would be an issue for you.
If it is, you could re-import your styles within the shadow DOM, though I can't really point out how to do that without knowing what bundler is in use and how it is in use.
Alternatively you could pull apart your imported CSS using the css package, iterate over the selectors prefixing all with a randomly generated class, and then re-stringify.
How to customize the Semantic UI buttons(background-color, border-radius and all)
<button class="ui button create-new-menu-btn">Create New Menu</button>
. create-new-menu-btn {
border-radius: 0;
background-color: red;
}
The above code is not working
You need to make your custom properties more specific than the ones semantic is using. How specificity works (simply) is that when there are competing property values on the same element, the one that is more "specific" is chosen.
Read this to know more about CSS specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
For your particular problem:
One way to make your custom CSS more specific is to use an id in the body tag of your page and use the following selector:
Method 1
#bodyid .create-new-menu-btn {
//Properties
}
Another way is to simply add an id to the element you want to select
Method 2
#create-new-menu-btn {
}
Method 1 is preferred when you want to apply the properties on multiple elements (hence the use of a class) (Like multiple comment buttons on a page)
Method 2 is preferred when there is a single element to be selected. (Like a login/signup button in the header)
You can also add semantic ui's classes before your own for specificity.
For example : if your className is .create-new-menu-btn you can add in css or scss before ui.button or any other semantic ui specific clas that you neeed. So in the end, your class definition in css would look like this:
ui.button.create-new-menu-btn {
....
}
If using JSX, you can use inline styling for the targeted elements
Example:
<Button style={{backgroundColor: 'red', borderRadius: 0}}> View Created </Button>
#bodyId .ui.create-new-menu-btn {
border-radius: 0;
background-color: red;
}
It will target all button with ui class.
Hope It will be useful :)
Put .ui.button infront of your class name create-new-btn. It should look like below
.ui.button.create-new-btn {
//Your css code
}
Then in your html/jsx template you can use the class name create-new-btn like below:
<Button class="create-new-btn"/>
or for Jsx
<Button className="create-new-btn"/>
I'm looking into LESS because I definitely see some of their benefits. For instance colour declaration.
One thing I don't understand tho, and maybe I'm not getting the flow right is - why use the following LESS snippet
.radius {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.btn-red{
background-color:red;
.radius;
}
.btn-green{
background-color:green;
.radius;
}
...
When we can use the .radius class in the html file right away. I'm left with the impression that LESS will add a ton of duplicate code once it gets compiled.
I'm using the following, which makes more sense. Same with font-size, margins, etc... Aren't classes used in such cases?
<div class="btn-red radius">Cancel</div>
<div class="btn-green radius">Go</div>
The snippet above does not benefit from SASS/LESS capabilities that much. Lets have a closer look and check this SCSS snippet.
// Abstract placeholder.
%radius {
border-radius: 5px;
}
// Put your global styling here.
// I'm assuming that you can alter the markup and have button.btn.btn-green
.btn {
// Color modifier.
&-red {
#extend %radius;
background-color: red;
}
&-green {
#extend %radius;
background-color: green;
}
}
The CSS output will be:
.btn-red, .btn-green {
border-radius: 5px;
}
.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}
And then you have to pick up Autoprefixer and vendor-prefixes issue is solved once and for all.
Because now, you can just specify the class btn_red or btn_green and all the buttons will automatically have a radius.
Your HTML should contain only the semantics, and styling or classes referring to styling should not be part of it.
That applies to the other classes as well. If for instance, you would rename btn_red to btn_cancel, you have a meaningful classname that you can apply to any kind of cancel button. And in the CSS you can specify that a cancel button is red and a 'Go' button is green, and both have a radius, without needing to modify the HTML at all.
So, the ultimate goal is to have the HTML describe the structure and the CSS describe how that structure should look. And a CSS preprocessor is only their to make a bulky spaghetti-like CSS file more structured.
There are several benefits.
You can use more semantic class names. Rather than encoding style information directly in your class names, (btn-red, radius) you could use a single class that conveys the usage of the style, rather than its contents.
You can avoid repeating yourself.
#radius-size: 5px;
-webkit-border-radius:#radius-size;
-moz-border-radius:#radius-size;
border-radius:#radius-size;
You can parameterize it so that you'd be able to use different radiuses (radii?) in different contexts.
.radius(#radius-size) { ... }
Because there are cases that developer has-no-access or don't-want to change the markup. and the only solution is to include all props from a predefined class.
for example:
you have bootstrap loaded (then you already have .has-success and .has-error classes) and if you want to use HTML5's native form validation using input's :valid and :invalid states, you have to use JavaScript to add/remove success/error classes based on input's states. but with this feature of LESS you can include all props of success/error class inside input's states. the code for this example could be something like this:
#myinput {
&:valid { .has-success; }
&:invalid { .has-error; }
}
I'm developing a web based source code editor. I'm thinking of adding support for themes (syntax highlighting).
//Default theme
.default-reserved-word
{
background-color : red;
}
//Some other theme
.monokai-reserved-word
{
background-color : green;
}
inside the editor each syntax highlightable word is surrounded by a span tag with the appropriate class:
....
<span class="default-reserved-word">def</span>method name
...
which I want to convert to (when the user clicks a "change theme" button)
....
<span class="monokai-reserved-word">def</span>method name
...
Is there a simple way of switching these CSS rules without going through all the elements and modifying the class attributes?
(FWIW, I need to support IE7+, FF3.6+)
I'd suggest using a different method, perhaps have a theme class on a higher parent container:
<div class="theme-default">
And then use CSS like this:
.theme-default .reserved-word {
color: blue;
}
Whilst this method is not exactly what you've asked for it will simplify the process of changing styles, for a start you won't have to search through loads of spans, finding the current class of theme-name + ' -reserved-word' (etc) and doing a string replace on them.
Add a class name to the root element (<html>) and change that on use input.
.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }
and then change
<html class="theme1">
to
<html class="theme2">
with Javascript.
You can use jQuery for that:
var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');