This is my first time using a website template which uses SCSS and thus I have no clue what to do with this.
I have the following code to set the text stying of my navbar links:
.nav-link{
font: 500 15px/120px $rob;
text-transform: uppercase;
color: #fff;
padding: 0px;
display: inline-block;
&:after{
display: none;
}
}
I have set the min/max font size to be 15px/120px. However on my website it keeps appearing as 12px. What am I doing wrong?
Inspect element shows this:
But when I check the code it shows as this:
With a bit of luck, you can find your way to the truth using Sass source maps. It seems like your template has this built-in, since you can see the file name _header.scss:17 in your inspector code. (If source maps weren't enabled it would just say the name of the compiled .css file.)
In Chrome dev tools, you can ctrl-click the property value - in this case 500 15px/120px $rob as shown in your screenshot.
This should take you to the "Sources" panel in dev tools and show the .scss file that compiles this specific value, and you can see if you have been editing the right file.
Since it's a common practice to split up Sass files into smaller files (or partials), there's a good chance your edits are being overwritten in one of the other partials in the template.
Related
I'm trying to set a Roboto font variant in CSS - not working.
font-family: 'sans-serif-condensed'
I tried 'Roboto-Black' - not working also.
If I set the font-family to a font name that's in my /app/fonts folder - that works.
To apply font variant use either css properties like font-weight (bold, normal) and font-style (italic, normal) or provide the different font variants usually created by the authors of the fonts in separate font files.
With Roboto you have 12 different made font variants like Roboto-Bold, Roboto-THin, Roboto-Medium and others. You can use them with the file name as you mentioned in your post.
e.g.
app.css
.rb-black {
font-family: "Roboto-Black"
}
.rb-black-italic {
font-family: "Roboto-BlackItalic"
}
.rb-bold {
font-family: "Roboto-Bold"
}
.rb-medium {
font-family: "Roboto-Medium"
}
Will produce the following results:
Sample project can be found here
font-family in NativeScript supports three generic families as follows:
serif (ex. Times New Roman)
sans-serif (ex. Helvetica)
monospace (ex. Courier New)
So using sans-serif-condensed won't produce the expected results.
This question is specific to docs.typo3.org please.
I'd like to create PDFs from the documentation on docs.typo3.org using the print dialog, because it's sometimes easier to mark all the things to do before you start doing it.
So e.g. I'd like to print out the https://docs.typo3.org/typo3cms/extensions/multishop/Administrator/Typo3BackendSection/Index.html to a PDF. (Yes I know if the developer would set all the necessaryy things a PDF would be generated, but this is not what I am after here)
I'd simply like to do a Ctrl+P to create a PDF with any of the pdf-creators.
Unfortunately this works in most cases for the 'normal' text, but does not for the headings h1, h2, ....
The headings seem to be included as graphics an can not be marked/highlighted in the PDF.
I've tried already several pdf-creators, have looked into the html and .css, but can't find anything how to overcome this issue.
Any solution or suggestion appreciated.
Thanks for your effort to respond.
Cause
As far as I could figure out now, is the font-family: Share;, where Share is a Web Font as far as I understand it.
Solution
Injected a font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; and the problem is gone.
In my Sass, I have a variable like this:
$icon-pencil: \270e;
Then, later I have this:
i.icon-pencil:before {
content: "#{$entypo-icon-pencil}";
height: inherit;
}
(Yes, I know that I don't need interpolation there. I actually have a function there, but I'm simplifying to make the question easier to follow.)
That outputs this:
i.icon-pencil:before {
content: "\\270e";
height: inherit;
}
The extra slash makes it just output the text instead of the HTML entity (i.e., the pencil icon).
Why is it being escaped? What can I do to prevent it?
I found this comment which seems like my issue, but not sure where to go from here.
I recently started using bootstrap SCSS on my node project. So I have app/bower_components/bootstrap-sass/lib/_glyphicons.scss for example.
Looking at my CSS output I see things like:
#media -sass-debug-info{filename{font-family:file\:\/\/\/home\/some\/path\/project\/app\/bower_components\/bootstrap-sass\/lib\/_normalize\.scss}line{font-family:\0000332}}
audio,
canvas,
video {
display: inline-block;
}
I have 2 questions:
This seems like a security hole. Everyone can deduce something about my OS and directory structure simply by looking at my CSS. What is the correct way to close this security hole?
How does it work? I nearly got it figured out, but I am missing something. Looking at the SCSS, I see bootstrap is using $icon-font-path which apparently turns into this absolute path. Looking at compass documentation, I see they provide absolute values but no $icon-font-path
This is the piece of code I am referring to:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('#{$icon-font-path}#{$icon-font-name}.eot');
src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
}
Both answers are correct. To sum it up, there's no magic.
Bootstrap initializes $icon-font-path with a default value.
if you include bootstrap's SCSS in a manager that requires a different value for $icon-font-path you should also override their default value.
The syntax $icon-font-path: some_value !default; means - use this value if not already set.
So when you include you should do the following
/* override icon-font-path value and include scss */
$icon-font-path: bower_components/bootstrap/fonts;
#include bower_components/bootstrap/bootstrap.scss;
paths might be different in real scenarios.
This seems to be a standard mechanism for publishing a reusable SCSS modules.
Here is the variables file where they set the $icon-font-path variable.
It looks like $icon-font-path is set to the foldername of the font files. not necessarily a security hole because its a relative path to the fonts.
The -sass-debug-info mess is rudimentary "source mapping", so browser developer tools can show you the original line number and filename of the Sass rule that generated that CSS (instead of the line number for the generated CSS).
Firebug has a FireSass plugin that understands these annotations. I think Chrome has built-in support, but it might be behind an experimental flag.
It has nothing to do with fonts; font-family is just used because it's an easy way to shove a string into CSS in a way that's still accessible to JavaScript without actually affecting the rendering of the document. It also has nothing to do with Bootstrap; this is part of the scss compiler.
It won't be there in compressed output, which I hope you're using in production. :)
#guy mograbi: In Bootstrap-SASS-3.3.6, $icon-font-path in /bootstrap/bootstrap/_variables.scss #83 is declared like this:
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
Since $bootstrap-sass-asset-helper is not defined yet, it may be useful to include the _variables.scss before overwriting the $icon-include-path, so we can read the "settings" and overwrite the $icon-font-path together with the if() cases.
We can use something like:
#include bower_components/bootstrap/bootstrap/_variables.scss;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "/fonts/bootstrap/");
#include bower_components/bootstrap/bootstrap.scss;
I am getting a strange error in my log file, and I can't find where in my site it is coming from: I am using log4net to log the errors, and the site is MVC3
The error is "A potentially dangerous Request.Path value was detected from the client":
Now, I know this normally happens if html chars etc are posted back to the form.
The strange thing is, I have tried all forms on the site, and I can't get it to happen.
I am logging the Request.Path value in the file, and it gives me:
/assets/img/footer_arrows.gif) ,
url(http:/xxmysite.com/assets/img/footer_bg.png) ,
url(http:/xxmysite.com/assets/img/page_bg.gif
Now the above is in my CSS file (within background image, using CSS3 multiple background images). Also, the items in the url(xx part are not fully qualified in my file.
Also, the first line (footer_arrows.gif) is in a URL(xx
Can anyone think of a reason why this error could happen?
EDIT: Looks like it only happening on IE6-IE8? Stil not sure why?
EDIT 2: Thanks to #Ash Burlaczenko spot: It appears that the "http:/" i.e. missing "/" is actually what is being requested:
actual CSS Tag is:
.inner_wrapper {
position: relative;
margin:23px 28px 0;
min-height:574px;
background-color:#EEE8D6;
background-image: /* CSS3 multiple background images */
url(/assets/img/footer_arrows.gif),
url(/assets/img/footer_bg.png),
url(/assets/img/page_bg.gif);
background-repeat: no-repeat, no-repeat, repeat;
background-position: 29px 100%, 0 100%, 0 0;
overflow:hidden;
}