I've successfully implemented sIFR3 using the nightlies from the end of Oct. All is well and much easier to work with than sIFR2 except where it comes to line-height.
I was able to deal with my headings fine. But I have a pullquote that needs more line-height/leading and though I've read through support and see that it needs to be applied to the .sIFR-root, it's not working. Is there something funky I don't know about?
Here's my code:
sIFR.replace(fedraBook, {
selector: '.callout p',
css: '.sIFR-root { background-color: #FFFFFF; color: #968b85; leading: 3.5;}'
});
I had the leading at 1.5 but changed to 3.5 just to see if I could get it to vary at all. It does not.
I tried also affecting it with this CSS selector with no joy:
.sIFR-active .callout p {
font-size: 1.6em;
padding-top: 7px;
line-height: 2.5em;
}
Does anyone have any ideas here? What am I missing?
i know my answer is not of much help but I too have had this issue. there is very little documentation on the subject. as far as I know, sIFR does not support true line-height. It uses the height of the flash object and the font-size to set the line-height. http://tests.novemberborn.net/sifr3/experiments/tuning/line-height.html
Related
I have developed a website and am in the process of converting most of the tables over to DataTables. In testing out one of the DataTable features the Print button, I discovered that nothing would print except the Title of the web page. At first I thought it was an issue with DataTables, but after playing around I've discovered that none of my pages seem to want to print. I'm testing with Chrome because it has the Print Preview, but I can right-click on any page in my site and select Print... and I get the same behavior -- only the Title of the web page displays. Has anybody experienced anything like this before? Here's a link to my site:
JCPS DMC
Even on the home page, try right clicking and select Print and you'll see what I mean. Please tell me this is some super-easy that I just don't know about -- some setting that I've overlooked. I will be happy to provide any support information you need, but I don't even know what that would be... :(
Well this is embarrassing...apparently at some point I included a css script in my Master page (the site is developed using asp.net). In the css I had this little gem which was blocking anything from being printed:
#media print {
body
{
visibility: hidden;
border-top: hidden;
width: 50%;
}
.noPrint
{
display: none !important;
}
ol
{
display: none;
}
.printSection, .printSection *
{
visibility: visible;
margin: 1px;
padding: 1px;
}
.printSection
{
position: relative;
left: 0;
top: 0;
}
}
Not even sure why I put that in there, but I removed it and everything is working peachy now...
I am trying to debug a crashing application in Microsoft Edge, but it gives the friendly error page:
This page is having a problem loading
We tried to load this page for you a few times, but there is still a problem with this site. We know you have better things to do than to watch this page reload over and over again so try coming back to this page later.
In internet explorer there is a way to turn off the friendly error messages. Is this also possible in Microsoft Edge? I'd like to know on which line of code the problem occurs.
It seems there are none at the moment. You can use the F12 developer tools for debugging though. The friendly page includes the actual HTTP response code so you can have an idea. Also, if you require more details you can check the full details on the request/response using the F12 Network tool to get the data the server is responding with.
You are probably affected by this unclosed bug.
No easy way to fix it right now, the not friendly error message will probably not help much (as you are not getting a server side HTTP error, is just the browser that raise an error and truncate the communication).
On the other hand the developer tool will not help also: Edge "smartly" close automatically it when the error happens and if you reopen the history is empty (no way to keep it, tried all of the buttons).
I have this issue on a site I'm developing but I'm not able to understand what's happen.
EDIT - after a long time I fixed this issue in my environment. Unluckily I'm pretty sure this will not help too much other devs because the bug seems to happen for a lot of different reason, but still... that's my usecase.
What was freezing my site was a combination of CSS media-queries (follow the less used):
#media (min-width:calc(#screen-mobile-size + 1px)) {
.hero_mobile {
display: none;
}
.hero_desktop {
display: inline;
}
}
...and few lines below...
#media (max-width: #screen-mobile-size) {
height: auto;
max-height: 600px;
.hero_mobile {
display: inline;
}
.hero_desktop {
display: none;
}
}
I tested a lot of combination but there's only one rule: I can't provide both media queries, it doesn't matter what there's inside them! It simply break the browser.
In my case the fix was quite easy: just preventing the first CSS rule to be embedded inside a media query, so...
.hero_mobile {
display: none;
}
.hero_desktop {
display: inline;
}
// ...
#media (max-width: #screen-mobile-size) {
height: auto;
max-height: 600px;
.hero_mobile {
display: inline;
}
.hero_desktop {
display: none;
}
}
When you see that, try hitting F12 and in debugger tab, setting break-on-all-errors. When you refresh, the last one it breaks on before the page reloads for some odd reason and triggers that error page, is likely the thing triggering some obscure bug.
You will likely find that Edge doesn't handle jQuery("someselector:visible") and refreshes, yet it does work with jQuery("someselector").filter(":visible"), but that's likely just an obscure bug in old jQuery 1.x.
Some nodes in my graph database have a property which contain a URL to an image. I wanted to use Neo4j browser's style sheet functionality to display that image as the background image of a node.
My .grass file looks like this:
node {
diameter: 40px;
color: #DFE1E3;
border-color: #D4D6D7;
border-width: 2px;
text-color-internal: #000000;
caption: '{name}';
font-size: 10px;
background-color: #00aaee;
}
node.Actor {
color: #AD62CE;
border-color: #9453B1;
text-color-internal: #FFFFFF;
background-image: url('{image}');
}
After I uploaded the file, the line background-image: url('{image}'); gets converted to background-image: url({image}); (missing apostrophes). No image is shown in the browser.
What am I doing wrong?
You're not doing anything wrong.
The feature is not supported in the Neo4j browser. Other visualization solutions do exist. Unfortunately the ones that use this feature out of the box are not open source and may require a commercial license.
Of these solutions are:
http://linkurio.us/
https://www.tomsawyer.com/products/visualization/index.php
http://www.keylines.com/
As #Kenny Bastani said most of the libraries that implement this feature have a commercial license.
For a full list of the supported ones have a look to the official Neo4J visualize page.
I am developing an app with jquery-mobile. (yes, and app, it'll run within cordova(aka phone gap))
On the nexus 7 (the target device for the app), The font displays for many things are way too small. I can barely read it and I'm young. Many of the users of this app will have poor eyesight.
Is there any simple way to change the font-size with jquery-mobile?
When I try to add entries in a custom css file, there are unexpected results (Formatting goes out, etc) I have also tried theme-roller, but that only allows you to change the font-family, not the font-size.
eg:
body p {
font-size: 1.5em;
}
Even just a general explanation about how to write a css file for jquery-mobile would be very helpful.
OK, I've worked it out.
In the jquery-mobile-1.2.0.css file is the styling for query-mobile. You modify this stuff.
There's some cryptic info on the jquery-mobile website that will make sense once you've read this.
So, to change the font-size for within all you go to the jquery-mobile-1.2.0.css file and add:
.ui-li p {
font-size: 1.5em;
}
It seams that most of the jquery-mobile elements have .ui- in from of their normal html tags. They have a special class or something. (If anyone wants to elaborate on this it'd be great.)
Setting global <body>'s font-size should be enough:
body {
font-size: 15px; // You can even use !important
}
I am trying to override some of the default variables provided by bootstrap, particularly some default color and font settings, but only a few them seem to be taking effect. Here's the top part of my custom.css.scss:
$myOrange:#f89406;
$myBlueDark: #304269;
$myBlue: #91BED4;
$myBlueLight: #D9E8F5;
$myWhite: #eee;
$myGrayBlue: #43464C;
/* colors */
$linkColor: $myBlueDark;
$navbarBackground: $myBlueDark;
$navbarBackgroundHighlight: lighten($navbarBackground, 10);
$navbarLinkColor: darken($myOrange, 10);
$navbarLinkColorHover: $myOrange;
$bodyBackground: #000;
$dropdownBackground: $myBlueDark;
$dropdownLinkColor: $myOrange;
$hrBorder: $myBlue;
$heroUnitBackground: lighten($myOrange, 20);
$dropdownLinkColorHover: $myOrange;
/* typography */
$sansFontFamily: 'PT Sans Narrow', 'Lucida Grande', serif;
$baseFontSize: 16px;
#import 'bootstrap';
// ... rest of the css ....
Here I have specified values for a few bootstrap variables and expect the font to be be the specified one and the link colors to be the values I've set them to.
However, I've noticed that only a few of these values work. E.g. the font on my page still stays at bootstrap default (Helvetica Neue) but the navigation bar colors change to the correct values.
I've searched around on the internet but none of the solutions I found worked. There was an issue logged which resembles this problem, but it has since been closed: https://github.com/thomas-mcdonald/bootstrap-sass/issues/102
I would go ahead and comment on that thread, but I just wanted to make sure that I am not missing something.
Another thing to notice here, when I explicitly do this later in my custom.css.scss:
#mixin default_font {
font-family: "PT Sans Narrow", "Lucida Grande", sans-serif;
font-weight: 400;
}
body {
padding-top: 60px;
background-color: #D9E8F5;
#include default_font;
}
The fonts show up fine. I am specifying background-color here because of the same problem.
I am using bootstrap-sass v2.0.3. Is there something I am doing wrong or missing?
Thanks.
While I was working on a demo app to reproduce my problem: https://github.com/verma/bootstrap-sass-tests I restarted the rails development server.
This seems to have fixed the issue. I am not really certain if this is a permanent fix, so I will wait before I mark this question as answered.
Removing the navbar-inverse style, from the class attribute in the header element, may fix the problem.
Use for example:
<header class="navbar navbar-fixed-top">
Hmm, I've had luck using this for fonts and link colors:
$baseFontSize: 17px;
$baseFontFamily: 'Crete Round', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$baseLineHeight: 20px;
$altFontFamily: 'Open Sans Condensed', Georgia, "Times New Roman", Times, serif !default;
$headingsFontFamily: 'Alfa Slab One'; // empty to use BS default, #baseFontFamily
$headingsFontWeight: normal; // instead of browser default, bold
$headingsColor: $blueDark;
$linkColor: $blueDark;
The variables that you can use can be found in the _varibles.scss file.
What does your application.css.scss file look like? I ran into a similar problem and found that I had another stylesheet overriding my base font, which I didn't want. Make sure you don't have other files causing overrides (such as scaffolds.css) and make sure you do not have the require_tree option enabled.
I appended !important to the font-family for body and that fixed my issues.
Context:
I had a similar issue for my Rails 5 app where my custom fonts (.otf) was not applied. In the developer console, I see the body font applied as "Helvetica Neue" what I think is coming from bootstrap-sass.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
...
when I unchecked the font-family: "Helvetica Neue", I see my fonts as expected so I know the asset pipeline for my custom fonts was working correctly.
prepending !important seemed to have fixed my issue.
body {
font-family: 'Din-Light', 'Helvetica', 'Arial', 'sans-serif' !important;
}