I'd like to additively build backgrounds in SASS/Compass, ignorant of the existing background string. I am able to accomplish by writing to a global var, but it seems sloppy.
Pseudo:
=mixin-add-icon
// add a background icon
=mixin-add-gradient-from-color($color: blue !default)
// add a background gradient
=mixin-add-texture-bg
// add a bg texture
a
background: blue
+mixin-add-texture-bg
// this should take the existing bg and add texture to it
&.selected
+mixin-add-gradient-from-color()
+mixin-add-icon
// these two should take the existing bgs strings from <a> and add to them
Am I missing something obvious? Thanks in advance.
There isn't currently a way to access an object's properties via Sass, but Sass is an open project so you can always go and ask the developpers if such a feature would be possible on their Github repo.
Related
I want to do the equivalent of style="background-image: url(foo.jpg); background-image: -webkit-image-set(url(foo_1x.jpg) 1x, url(foo_2x.jpg) 2x)" in a React component.
React requires me to provide a style object, not a string. But a JS object can't have the same property twice.
How do I get two background-image properties? Also, the order is significant – the image-set needs to be last.
It needs to be an inline style. (Because the URL is a dynamic, interpolated value retrieved from DB.)
I think I initially misunderstood your question. Seems you are looking to create a style object to pass as a prop to a component. You can combine your background images into a single comma separated list. You can use a string template to inject the dynamic image urls at runtime.
const style = {
backgroundImage: `url(${url1}),-webkit-image-set(url(${url2}) 1x, url(${url3}) 2x)`,
};
"spassvogel" on GitHub has a clever solution using CSS variables: https://github.com/facebook/react/issues/20757#issuecomment-776191029
The idea is to set CSS variables in the style property, like
style={ "--url1": "url(1.jpg)", "--url2": "url(2.jpg)" }
and then using them from an external style sheet, like
background-image: var(--url1);
and so on.
Turns out this still wasn't enough to solve everything I wanted – this rabbit hole runs ever deeper – but that's no fault of React's, so I'll consider this a valid answer.
I am facing a problem related to css.My question is that I want to change background-color to black of any website page through url. I want this for study better to protect my eyes meanwhile I have eye problem. So what code to apply in the url to show the page black meanwhile we use this css rule like body {
background-color:#00000;} to output .I have attached two images for it to clear more better.Hope will get response as soon as possible.Thank you too much!
I think the best solution for you to it to take some of the recommendations above, and turn it into a bookmarket! That way, you can always click the button in your address bar and it will
1) Load jQuery if necessary
2) Change the background-color of <html> and <body> elements to black.
Here's a link to the JSFiddle. Drag the link to your bookmarks bar and watch the magic happen:
http://jsfiddle.net/lasha/GjQGZ/
No need for all the extra steps! :)
I would suggest you use some kind of glare reduction/warmer color software, like F.lux.
I use it and even with white backgrounds, my eyes don't get tired as much.
For SO site, where Jquery is used, you can type this in the console:
$('body').css('background-color', '#000');
And also you can change the text color to white:
$('body').css('color', '#fff');
If no Jquery is loaded, you can selet the body tag with document.getElementByTagName
you can't do it through a URL. However, since you're using firefox:
Alternatively, look in to a plugin like greasemonkey (or similar) and inject custom CSS styles on to the page you're viewing. Something like:
// ==UserScript==
// #name Readability Helper
// #description makes font more readable for custom viewing.
// #namespace CSS
// #include *
// #version 1.0
// ==/UserScript==
(function(w){
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "* {color:#fff !important;background-color:#fff !important";
w.document.body.appendChild(css);
})(unsafeWindow);
Brad already gave a good answer.
Alternatively you could use the Firefox add-on Color That Site!
The purpose of this Add-on is to let you easily change the colors of any web site you want. These color edits can be permanently saved and be im-/exported for sharing.
This can be done by applying some javascript to the site. After site is loaded, you can write in the address bar something like this:
javascript:document.body.style.backgroundColor = "#000";
Make sure to include 'javascript:' prefix part (if you copy/pasted it might happen that browser excluded it for security reasons).
This will work only locally, of-course!
UPDATE: If it happen for some reason this doesn't work in chrome, try to do it like this:
javascript:document.body.style.backgroundColor = "#000"; alert()
I didnt figure why or how but it works!
You cannot do such things with a URL (unless the server specified in the URL has special functionality for this).
You can use a user style sheet or browser add-on to impose your CSS rules. The ways to do such things depend on browser.
When using a user style sheet, you mostly need the !important specifier, since by default page (author) style sheet rules override use style sheet rules. Example:
body { background: black !important;
color: white !important; }
Note that this also overrides any background image that pages might set for body. And setting color whenever you set background is a good idea—you don’t want to see black on black, or even dark gray on black.
But it’s really more complicated. Any element can have a background (and content color) of its own. For example, if a page has <body><div id=content>...</div></body> and it sets background on that div, then you settings for body won’t have much effect.
At the extreme, you could replace body by * in the rule above, to make everything white on black, except those ingredients that are not under CSS control (like contents of images and possibly some form fields).
When you start a new project in Sencha Architect, it gives you this off white background (#eeeeee). Naturally, like any site or app, you can swipe higher or lower than the actual content, so this off white color shows.
I want to change this background color. I'm able to change the Containers or Panels so that isn't the problem. I also tried applying a Cls to the Viewport or using the Style or HTML config of the Viewport with no luck.
Does anyone know the Cls for this so I can override it or have any other ways to do this? It's like it's the final background behind everything.
There's one css var defined to change default background color. It's $page-bg-color.
You can find it inside nearly at bottom-
....\touch\resources\themes\stylesheets\sencha-touch\default_variables.scss
Default value is set for #eee. As it's a css var, it might have referenced in various places. So adding a class with custom background to each and every element will not be good. Better override it through scss itself.
You'd need to define your own *.scss file and compile it. In this *.scss file, you can override almost every css property. In your case, set $page-bg-color:#whatever and recompile it.
Hope you are familiar with using compass and scsss, if not then there's quick start guide on http://vimeo.com/36917216.
If you wants to use Cls means
Ext.define("VUCFyn.view.MemberHome", {
extend: 'Ext.Panel',
xtype: 'memberhome',
fullscreen:true,
config: {
cls : 'booked-seats', // inside config use like this
and You have specify the design in index.html file
.booked-seats {
background-color: #DEFCE2;
},
Try it will work .. i tried like this..
I have few questions on styles (Themes). Presently i get a blue colored theme in all my window and panels. I want to change this to Pink. How can i do that ?
I read about swapStyleSheet( String id, String url) : Void but, i am not sure how to use it.
2.) I also need to know how to change the colors of labels/form panels etc, I want all the styles to be on 1 page, rather than adding it as an attribute in labels/form panels. (eg: fieldStyle: 'background-color: #ddd; background-image: none;')
Although I have not created a custom theme, there is a themeing guide located here: http://www.sencha.com/learn/theming/ that will give you very powerful tools to create your theme instead of styling individual components.
I want to change the color of my image when I move the mouse over it.
So I've prepared 2 images and this is the eventListener:
private function mouseOverHandler(e:MouseEvent):void {
e.target.source = "#Embed(source='../icons/userIconOver.png')";
}
Unfortunately when I move the mouse over, I only see a blank image (error, image not found). However the compiler doesn't give me any error, and I tried to use the same path of the original image, and also to remove "../" in case he is referencing from root directory in run-time. But still nothing.
The image is stored there, of course.
However if I can apply an effect to change the color from blue to orange to my image (by preserving the transparency), I could solve differently
Thanks
This isn't the easiest way to do what you want. Stylesheets were built for this, so use the skins styles for your various states. Example:
.backButton{
upSkin: Embed(source="BackButton.png");
downSkin: Embed(source="BackButtonDown.png");
overSkin: Embed(source="BackButtonOn.png");
disabledSkin: Embed(source="BackButton.png");
selectedUpSkin: Embed(source="BackButtonDown.png");
selectedDownSkin: Embed(source="BackButtonDown.png");
selectedOverSkin: Embed(source="BackButtonDown.png");
selectedDisabledSkin: Embed(source="BackButtonDown.png");
}
It's much easier than trying to programatically change states every time you need to do so.
While I think Robusto's solution is best, the problem with your existing code is that you're pointing the source at a string. You're not using MXML, so the compiler isn't going to parse the Embed code for you, you'll need to embed the image seperately:
(at the top of the class:)
[Embed(source='../icons/userIconOver.png')]
public var myImageRef:Class
(in your event handler)
e.target.source = myImageRef;