I found this link on how to embed custom fonts in XAML apps. Is there some way I can achieve the same while building using JS? The following method did not work.
#font-face {
font-family: "MimicRoman";
src: url("/fonts/MimicRoman.otf") format('opentype');
}
Looks ok to me, that's how it should work. You are sure the path to the font file is correct and you did also actually use the font-face somewhere? For instance,
body {
font-family: MimicRoman;
}
Also, you are sure there are no other font-family declarations taking precedence over the declaration you've made? (this can be seen quite easily with the DOM Explorer).
If nothing else works, you might want to test some other font file, just in case that file is corrupt or something (some working examples from here, for instance).
Related
I am attempting to change the styling of Sanity Studio as noted here in the docs: https://www.sanity.io/docs/styling#d7f9b5cc2adb
As such, I have created a file with the following css variables:
#import "part:#sanity/base/theme/variables/gray-colors-style";
:root {
--fieldset-border: none;
--fieldset-bg: var(--gray-darker);
}
Now, this works as I want for --fieldset-border, but it does not work for --fieldset-bg. I even tried hard-coding the value of --fieldset-bg as follows: --fieldset-bg: #454545; -- it still did not work.
So, I am wondering, why does --fieldset-border work and --fieldset-bg not work. More importantly, what do I have to do so that I can change the background color of fieldsets in sanity studio?
I have a hunch that the specific --fieldset-bg variable got silently deprecated recently (the move from #sanity/components to #sanity/ui). IF that's the case, opening a bug report issue in sanity-io/sanity repository would be great!
Regardless if that's the case, I'd suggest overwriting the css with a global selector in your variableOverrides.css file:
div[class^="DefaultFieldset_root"] {
background: papayawhip;
}
Hope this helps 🙌
I'm diggin' the Glyphicons in Bootstrap 3, but it looks like they're not all there! I'd really like to use the building icon, but Googling hasn't turned up much of anything.
Does anyone know how to add the missing Glyphicons to Bootstrap 3?
You can build your own custom font using the free service: http://fontello.com/
Simply drag your glyphicons-halflings-regular.svg file in, choose the icons you want to use and download a custom font containing only that which you need.
Fontello comes preloaded with the following libraries:
Fontelico
Font Awesome
Entypo
Typicons
Iconic
Modern Pictograms
Meteocons
MFG Labs
Maki
Zocial
Brandico
Elusive
Linecons
Web Symbols
You can also buy the full version of Glyphicons for $59 at http://glyphicons.com/
I wanted to use the Glyphicons Pro I'd bought but expanding the current halflings stuff inside bootstrap was messy. So I created a separate css file for each icon set (full, filetypes & social) and copied the way bootstrap initialises them so I could use similar syntax.
i.e.
<span class="glyphpro glyphpro-download"></span>
<span class="glyphfiles glyphfiles-xml"></span>
<span class="glyphsocial glyphsocial-github"></span>
This way you can load only the ones you want and when you want and you can use the vanilla bootstrap config. Find my files here: Gist#GitHub
I have purchased the full Gylphicons set from http://glyphicons.com/ and wanted to use all the icons available. If you are using less you may have to do something different I dont know.
What I have done and worked for me after trying various things posted from this thread and others on the stackexchange network is the following:
(1) Backed up my original bootstrap.css file (I have modified mine, plus good idea)
(2) Copied all the glyphicons-regular font files from /web/html_css/fonts directory to the fonts directory where my bootstrap font files are located
(3) Starting on line 263ish of bootstrap.css make the change to reflect like below: (yours might be slightly different)
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-regular.eot');
src: url('../fonts/glyphicons-regular.eot?#iefix')
format('embedded-opentype'), url('../fonts/glyphicons-regular.woff')
format('woff'), url('../fonts/glyphicons-regular.ttf')
format('truetype'), url('../fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
}
They url's should be pointed at the new font files.
(4) If you want all of the glyphs like I did then open up the file in the /web/html_css/css/ directory labeled glyphicons.css and copy all the css for the glyhicons except the part with #font-face{} and the .glyphicon{}
and paste into empty text document.
(5) You will need to do a search and replace (I did anyway) for .glyphicons, mind the (s) at the end and replace with .glyphicon no (s) on the end
(6) Next open up the bootstrap.css file and comment out or remove all the other .glyphicon-whatever styles and paste in your new styles.
(7) You may need to remove the line from the very bottom of the file which point to the bootstrap.css.map file. I didn't have to but you may need to.
(8) Happy Glyphing!
NOTE You should be setup to use all the glyhpicons now. Just keep in mind that some of the names of the glyphicons are different then in the original bootstrap file.
I created a repository for the modified css file: https://github.com/snowballrandom/bootstrap
It would be simpler to just create a custom .png and use css normally.
I'm having trouble adjusting PhantomJS to create a PNG file that matches the original browser presentation.
Here is the entire sample html file. It's a sankey diagram creating using rCharts and d3-sankey. (You'll need to save the file to your hard drive and view it from there.)
I'm running on Windows and using rasterize.js:
>> phantomjs.exe rasterize.js test.html test.png
ISSUE: Below is a snip of one of the text strings when viewed in a browser:
And here is a snip of the same string from the PNG created by PhantomJS:
How do I make the text-shadow go away? I've played around with various CSS attributes (text-shadow) and webkit-specific attributes (e.g., -webkit-text-rendering), but can't seem to make it go away.
Is this a setting in PhantomJS? in the underlying webkit? or somewhere else?
rCharts has an undocumented function called take_screenshot that uses CasperJS (which in turn uses PhantomJS to take screenshots of rCharts created visualizations on a given html page.
For example, I forked the example you provided, renamed it as a html file, which you can view here.
I ran rCharts::take_screenshot('http://rcharts.io/viewer/?7063641'), which results in the following screenshot. The take_screenshot function uses system commands, and work well on a Mac. I have not tested it on Windows, so YMMV.
NOTE: You will need to install the dev branch for this feature.
OK - I found the issue. It is related to browser display differences. SANKEY.CSS sets the text shadow:
.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}
The text-shadow is ignored in Firefox (my default browser) and is properly rendered using Chrome (thanks #ramnath for cluing me into the browser differences!). PhantomJS uses webkit to render pages (which works properly) while Firefox uses gecko (which obviously doesn't implement text-shadow properly.) Fiddling with text-shadow in my original post didn't affect any changes - because Firefox wasn't rendering any changes and I was experimenting in the browser.
SO, the fix is to override .node text-shadow in my main HTML file. After the change, all is rendering as I prefer in the PhantomJS-created PNG.
.node text {
pointer-events: none;
text-shadow: 0 0px 0 #fff;
}
Lesson: to properly test HTML for rendering in PhantomJS on Windows, use Chrome to preview. Both use webkit as the underlying rendering engine.
In my web project I have split my CSS into separate LESS files for maintenance reasons. I have a file called config.less acting as a master file that imports the other less files, using #import directives.
The problem with this setup seems to be that I get a lot of "Undeclared variable" & "Undeclared mixin" while editing my LESS files, for instance while adding a property variable called #textColor in base.less, that is declared in another less file called variables.less. Is there any way of making web essentials aware of variables and mixins being defined in external less files?
Another thing that seems to be tripping up Web Essentials is when I'm using the nested media query feature of LESS:
.some-selector {
background: #000;
#media only screen and (max-width: 800px) {
background: #fff;
}
}
The nested #media declaration gets a red underline, and on hover it says "Unexpected '#' block in the style rule". Hovering the nested background property shows a "Validation: 'color' isn't a valid HTML tag.
I cannot give an answer regarding the #media issue with Web Essentials, but I can give advice on the variables and mixins issue.
Basically, change your config.less file to have the variables.less and any other mixin files to be #import-once, then also add #import-once 'variables.less into each file that uses variables from it (do the same for any mixin files used).
What this does is imports the file if you are working on it (like your base.less), but when all the files are compiled by config.less, it will only import the variables.less once, and not again for each file that also references the variables.less.
I'm a friend clean GUI's. Unfortunately I need to overwrite the "chrome://global/skin" stylesheets for some reason.
What's the best method, to implement different os-based stylesheets into xul-documents - eg. for GUI's like windows xp, windows aero or macosx aqua (overlay-aero.css, overlay-aqua.css...).
Does Mozilla provide any standards for os-based stylesheet-implementing?
Without really knowing how you intend to overlay the styles: yes, the usual approach would be using manifest flags. For example, if you define a style overlay in your extension's chrome.manifest file, you would do it like this:
style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-win.css os=WINNT
style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-osx.css os=Darwin
style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-linux.css os=Linux
You can also use Mozilla-specific media features to distinguish between different themes of one OS in your stylesheet. For example:
#media all and (-moz-windows-classic)
{
...
}
#media all and (-moz-windows-theme: aero)
{
...
}
#media all and (-moz-windows-compositor)
{
...
}
Sounds to me like you want to create your own Firefox Theme (essential an extension made up of CSS files and images that replace the standard look of the browser). There's a whole section about this on Mozilla Development Center: https://addons.mozilla.org/en-US/developers/docs/how-to/theme-development