"generatedImagesDir" parameter works well with below codes, does it mean that this only work with compass sprites utils?
#import "compass/utilities/sprites";
#import "icons/*.png";
#include all-icons-sprites;
Previous questions:
Compass success to compile the css to folder ".tmp/styles", I use the new one in index.html as below:
<link rel="stylesheet" href="../.tmp/styles/style.css">
but there is no "../img/1-1.png" image in "../.tmp" folder,
so how can I let compass to create a new "1-1.png" in to generatedImagesDir? Is "generatedImagesDir" paramenter used to do such a thing? Thanks.
Grunt task
compass: {
options: {
importPath: '<%= yeoman.app %>/bower_components',
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
imagesDir: '<%= yeoman.app %>/img',
generatedImagesDir: '.tmp/img',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
httpImagesPath: '/img',
httpGeneratedImagesPath: '/img/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false
},
dist: {},
server: {
options: {
debugInfo: true
}
}
},
CSS
.ap-navbar-bg.navbar-inner {
background-color: #E86224;
background-image: url(../img/1-1.png);
height: 40px;
Compass will generate for you those png's you wanted as sprites, but the rest of the images includes on the sass file should not be generated by compass, they must be there already, on their own folder.
What compass does its to have a look to the images path, in your case: <%= yeoman.app %>/img, the one you specified.
Compass will help you with the routes in this case, but not generate new images.
Does this help you ?
Related
I'm working on a Laravel project and I'm using Tailwind CSS for it.
What I'm trying to do is to add a costume color in order to use it in the class in the HTML just like it is said in the documentation: https://tailwindcss.com/docs/background-color
I have added a color like this:
tailwind.config.js
theme: {
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
},
colors: {
emerald: "#2dd4bf",
},
},
},
page.blade.php
<nav class:"bg-emerald">
....
</nav>
The color of the navbar won't change.
How can I fix it?
try executing (in the terminal)
npm run watch
or
npm run dev
For some reason, the angular cli does not compile the sass file. This is my sass file:
/* You can add global styles to this file, and also import other style files */
/* Variáveis */
$bodyColor: #f1f1f1;
body { background: $bodyColor; margin: 0px; }
header{ background-color: #FFF059; width:100%; height: 54px; border-bottom: 1px solid #D9D9D9; }
.logo{ margin-top:4px; }
And this here is the error presented in the console:
ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.sass
Module build failed:
.logo{ margin-top:4px; }
^
Invalid CSS after "...rgin-top:4px; }": expected 1 selector or at-rule, was "{}"
in /Users/danielswater/Documents/MercadoLivre/src/styles.sass (line 10, column 26)
# ./src/styles.sass 4:14-187
# multi ./src/styles.sass
What is wrong? It would be a problem with the angular CLI
I have faced similar problem in angular2
First you need to make sure, your .angular-cli.json has .scss as the defaut style extension.
"defaults": {
"styleExt": "css",
"component": {}
}
Aftet that, I manually installed node-sass and sass-loader which fixed my errors
npm i -D node-sass sass-loader
You have to include your scss file e.g. 'bootstrap.scss' in your .angular-cli.json file as follows :
"apps": [
{
...
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
}
]
and then restart your
ng serve
I have a problem with the initialization of images in CKEditor 4.5.4 with the Enhanced Image plugin (image2). The first time a CKEditor instance is being loaded, the images don't get initialized correctly. See picture image not correctly initialised. The caption field does work correctly, but I cannot move or select the picture.
However, if I navigate to another web page in my web application, and then navigate back to the page where we use CKEditor, everything works fine. In other words if the CKEditor instance has been loaded before, everything works perfectly.
We are using AngularJS 1.4.4 together with ng-ckeditor. This is the editorOptions we use:
$scope.editorOptions = {
language: 'no',
customConfig: '/statisk/app/common/ckeditor/ckeditor-config.js',
extraPlugins: 'sharedspace,image2,widget,lineutils,uploadimage,uploadwidget,filetools',
extraAllowedContent: 'a(*); span(*); figure(align_center, align_left); div{*}; figure; figcaption; img[alt,!src]{width,height};',
toolbar: [
{name: 'paragraph', items: ['BulletedList', 'NumberedList']},
{name: 'links', items: ['Link']},
{name: 'insert', items: ['Image']}
],
sharedSpaces: { top: 'toolbar_hovedtekst' }
};
HTML:
<div id="hovedtekst" data-ng-show="modus.showEditorControls()">
<div id="toolbar_hovedtekst"></div>
<div class="ck_editor_hovedtekst test_hovedtekst" ckeditor="editorOptions" data-ng-model="hovedtekstCtrl.content"></div>
</div>
What could be wrong?
I want to change the tags
<strong> to <font style = "font-weight: bold;">
and change the tags
<em> to <font style = "font-style: italic;">
I've tried it as described in http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.coreStyles_bold
but there is absolutely no change.
Last I turn it into:
CKEDITOR.config.coreStyles_bold = { element: 'strong', styles: { font-weight: 'bold' }, overrides: 'b' };
expect the result to be:
<strong style="font-weight: bold;"></strong>
version of CKEditor, 4.1.1
If you really want this, this might do the trick:
config.allowedContent = true;
config.coreStyles_bold = {
element: 'font',
attributes: { 'style': 'font-weight: bold;' },
overrides: 'strong'
};
Set these in the config.js file - not inline. BTW, you are using the wrong documentation, see: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-coreStyles_bold
I recently added jwplayer to my site. I added video with subtitles. But when we do full screen subtitles are too low almost at the bottom. Is there anyway i can adjust it to appear higher.
Here my code:
<div id="myElement">Loading the player ...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "/sample.mp4",
height: 420,
width: 950,
tracks: [{
file: "/sample.srt",
label: "English",
kind: "captions",
"default": true }]
});
</script>
This solution will work for HTML5, I am not sure about flash though.
check this out show-subtitle-outside-of-player
You need to catch the caption div and override the css