i know quite quell processing.org, in java. and i like it. from a little bit i have done some work with html, javascript, css, jquery, d3.js. i wan surprised how nicly and easily i can style my stuffs: with css. and i incredibly love it. do the code, and style the visual output. forget bad headache trying to code some nice draw elements, manage different color, font, margin and floats between gui elements.
now, just for give it a try, i'm figure how to syle a processing.org font?
ps i'm using processing.js from pure js code as described here
Declare your own css #font-face rule, with some font-family name like "ABCXYZ" and then in the sketch code use a var pfont = createFont("ABCXYZ",[size]); call to set up your font and then apply it like any other using textFont(pfont)
Related
I am trying to find what is overriding my CSS element using chromes element selector but am unable too.
This answer seems outdated I can't find how to access "computed styles":
Chrome Developer Tools: How to find out what is overriding a CSS rule?
I don't know why this color is overridden with gray:
chrome
How can I find whats doing it with google chrome?
If you look at the image, it will tell you that the property is changed in the element.style.
In other words, the change is not applied using a selector such as class or id, but rather to the element itself.
This can be done in two ways, as far as I am aware.
1) In HTML, writing the properties directly within the element:
<div style="color:gray;"></div>
2) In Jquery, referencing the specific object (for example, using the id property) and then using the css property:
$('#divname').css({
color:gray;
});
With regard to finding what is causing the issue:
1) Finding out if the change has been made in HTML should be fairly straightforward, as you would just need to have a look at the HTML file.
2) If the change has been made through Jquery, things get a little more complicated: a ghetto method would be to search your script files for the "gray" string. Don't forget that scripts can also be embedded into HTML, however, looking for the property the HTML file would be a good way to proceed :)
I'v only seen "solid" in use everywhere.
Is there any way to draw dashed line borders around widgets using qt stylesheets?
I'v tried looking through the designer, and I can see the different pen styles in QPen, but the stylesheet equivalents of those remain unfound.
Where/What would the complete list of these be?
EDIT:
I made a mess with the question, I didn't specify enough. I wanted to know the syntax for the different edge and fill styles I can use. But the linked Page contains everything:
http://qt-project.org/doc/qt-5/stylesheet-reference.html
Gradients, transparency values for colors, pen styles.. the works.
This documentation is way better than the 4.8.4 one I have on my computer, and it even seems to work. (Even though it's for version 5.x)
The stylesheet border-style is almost the same as in CSS3.
Take a look here: CSS border-style and here: Qt Style Sheet: border-style
I want a background image on my page (background.png), but some rogue CSS is thwarting me.
I can see that my style.css from line 39 is being overwritten. I would think this is being done by something like style.css. I search and do not find anything but my original desired specification in that file. I can not find out what css is doing the overriding.
I have searched all the css files I can think of for the specified image (bg_p2_28.jpg). I have searched all the css files for background, nothing seems to come up. It is not being specified in the main HTML
I am barely struggling through as a reasonably competent programmer that has not used HTML since the mid 1990's. I am just trying to modify a template I bought.
What techniques can I use, or how do I interpret what I have here shown here to figure out what CSS override is ultimately being pushed into the page?
EDIT:
Adding the !important; works. It feels very dirty for some reason. I do not know why. I have tried following the javascript in, but the debugger is confusing to the uninitiated. Is the Important! a terrible thing to do, or reasonable? I think it would be useful to understand where these are being set in the java code, but when I search the code, I think the values are stored in variable, so can only be caught at run time.
That's coming from the inline style="" attribute.
If you don't see it in the HTML source, it's probably being set by Javascript.
You can right-click the element in the inspector and click Break on Attribute Modifications to find out where.
You could try background: url(src) !important;, not the perfect solution, but i think it will work for you in this case.
The grey element.style means that it's a style attribute directly on the element itself. Any style on an element will override styles from style sheets unless the sytlesheet style is marked with !important
Alright, so I recently found this script called "Selectivizr" and I was really excited, but I plugged it into my project, set it up just as it said, and it didn't work.
So, what I am looking for is any sort of JavaScript library/script that will allow me to use CSS3 selectors (especially :checked) in IE8.
Selectivizr seems broken, and hasn't been updated in over a year. Has anybody else had luck with it?
Does anybody know of any other scripts that will allow for use of CSS3 selectors in IE8?
Not looking for CSS3 stylings like border radius, shadows, etc. Just looking for the selectors, like :before, :after, :checked, etc...
Dean Edward's IE9.js is pretty solid, though I have heard of some incompatibility problems when using other libraries as well. Never experienced them myself, but haven't used the library too often in the wild for a long time. Plug it and play, and if it doesn't break then you're all set.
Link: http://code.google.com/p/ie7-js/
Demos: http://ie7-js.googlecode.com/svn/test/index.html
With jQuery code, you can use these few lines to toggle a class on all your checkboxes (or on it's container) any time it's checked or unchecked. This then lets you use regular CSS code in all browsers.
$("input[type='checkbox']").click(function() {
$(this).parent().toggleClass("checked", this.checked);
});
Working example here: http://jsfiddle.net/jfriend00/7jA5r/.
If you dynamically create checkboxes, then you could use the dynamic form of .on() to make sure to catch them.
I would personally rather use a solution with a few lines of code like this than use a heavy library that tries to add CSS style file capabilities. If you were going to use that, make sure you understand what's really going on under the covers before you adopt it.
If you just wanted a selector libraryby itself, the Sizzle selector library works across a wide variety of browsers including all the way back to IE6. It will adapt to the capabilities of the host browser, using as many built-in capabilities as are present and using it's own code when the host browser does not support an explicit capability.
You can use just the selector library itself from here or it is also the selector library inside of jQuery.
It's extremely simple to use. You just do something like this:
var items = Sizzle(":checked");
and you will have an array of DOM elements that match the selector.
"good lord, man, why would you want to do that? don't you know that inline styles are EVIL?!"
ya, I know.
but i want to make real html emails, and real pretty craigslist ads [1], and as you know, they (mostly) only support inline styles. i'd like to have pretty, manageable, css themes for them, but obviously, this is impractical with inline styles.
so, what i'm looking for is a tool (php or jquery pref), that can take all the styles that apply to a document or block of text, and output some new html, but with the styles inline. know of one?
thanks in advance!
[1] i know what you're thinking, CL doesn't support css, but that's not actually true. some sections let u put in css.
This Question has an answer with a JQuery implementation of what you want.
Copying CSS to inline using jquery (or retaining formatting when copying stuff from a web page)
Check out this converter, might help:
http://inlinestyler.torchboxapps.com