The documentation says it can be done by changing SCSS files. I downloaded the zip of the repo, and changed _variables.scss, modified $sidebar-width: to 250px, but then I have absolutely no idea what to do. How to generate the one CSS file that will include my change everywhere? I experimented with using NPM, but I could not figure it out. I don't even know what NPM is, properly, or any such technology, for that matter.
Any help is much appreciated.
Related
I would like to use the flag-icon-css library in my Angular 8 project. I've managed to import it and the flags are showing, however, they are only displaying as squares. How do I get them to display as rectangles?
I installed the library through npm and added this code to my global styles file (per this answer: Can angular cli use flag icon css?):
$flag-icon-css-path: '~flag-icon-css/flags' !default;
#import "~flag-icon-css/sass/flag-icon";
This is the code I use in my template:
<span class="flag-icon flag-icon-us"></span>
I am not using the flag-icon-squared class. Still, the flag is only displayed as a square.
EDIT (Added to clarify):
If I increase the width of the span, the span widens, but not the flag itself. I also tried using flag-icon-background, with the same result.
I checked the svg image itself, and it is a rectangle, however, I noticed that it also has a lot of whitespace on its left side. So that might be causing the issue - the span is displaying the whitespace and only part of the flag.
I'd appreciate any suggestions!
The reason this is happening is because the 1x1 and 4x3 ratio SVGs are being copied to the root folder after a build - you can see if this you view the style of the icon and hover over the background image URL. The 1x1 images are being used by the CSS which is why the flags are always square - I'm not sure why this was not an issue in Angular 7.
A work around is to manually copy the images into your assets folder and manually update the CSS to point to your assets folder. The downside is that you will have to manually update the CSS every time you update the npm package.
See here:
https://github.com/lipis/flag-icon-css/issues/514
I've recently has the same problem.
I overcame this by renaming the SVG files and redirecting the paths referenced in the styling files.
Specifically, you can see the changes I made here: https://github.com/nunnsy/flag-icon-css/commit/2eabbda9daf6a53627a7d4952eae0d1164bb04fc
This is by no means a long-term fix, I just needed a quick hack personally and figured someone else may want some guidance.
I understand Angular was copying the files and overwriting the 3x4 with the 1x1 due to them having the same name (separated by folder), hence the renaming out of the folder with the size now in the file name: XY_xx.svg
Even trying to reconfigure image hashing did not solve my issue - if someone has a way of implementing this, I'd appreciate to know how you implemented it. Or, any other solution, I'll be watching this question.
I'm experiencing the same issue in debug mode but not for a production build. So if it's an issue you do not want to spend a lot of time on, know that it won't exist in a production environment, building with the --prod flag solves it.
If you don't need square ones
Fast ugly hack: change the names of folders 1x1 and 3x4
I think it is correct to download images bypassing npm
I have a question about SCSS. I am new at this, so if I'm not providing enough information please let me know so that I can update my question.
I am currently working on a Wordpress installation that has an SCSS directory, with all of the various .scss files.
I tried editing the files directly, and came across a lot of issues. I did some research, and it looks like the scss needs to be compiled into css so that the site can read it. Issue is, no matter how I try, it just simply doesn't work. The site styles break, and the updated code won't work. I know I can change the css directly, but I understand that if the scss is recompiled it will remove my direct css changes.
Any help would be so appreciated.
If you don't have any way to compile the SASS to CSS then an easy way to translate your code is by using sassmeister.
Enviroment
I have an extjs 6 application which is already compiled and the css files like they should be. This application wasn't compiled for a while and now it's generating a different (wrong) css file. Since someone else changed the app, I have no clue what has changed since the last compilation. I compile with sencha app build development and the following CSS files change:
build\development\MyApp\classic\resources\MyApp-all_1.css
build\development\MyApp\classic\resources\MyApp-all_2.css
There are a few more files in the folder which do not change.
Versions:
Sencha Cmd 6.1.3.42
SDK Version (if neccessary) 6.0.2.407
Problem
I want to generate the same css like before. It seems there are just a few files which are not included within the compilation process, like:
ext/classic/theme-base/sass/etc/mixins/frame.scss
ext/classic/theme-base/sass/etc/mixins/slicer.scss
ext/classic/theme-neutral/sass/src/tab/Tab.scss
Question
What do I have to do, to get the old css? Is there some file with includes? Like classic\sass\src\view\main\Main.scss or something? I guess those includes are somewhere (since it already worked at least once) and maybe commented out or something.
What I've already tried
I tried to compile with different themes refered by the app.json attribute was builds->theme. I also tried a lot of playing around stuff, which I can't describe here in detail.
Any advice would be greatly appreciated!
Thanks in advance!
If you have any questions leave a comment and I'll try to add it to my text!
I'm trying to troubleshoot a LESS issue with my Meteor code..
I have bootstrap3-less package installed but I don't know where Meteor is getting it's LESS files from. This whole time I thought it was coming from a .less file in my client/ folder but I removed that entirely but for some reason my Meteor CSS file does not change once I remove that. But yet, when I inspect the compiled CSS file, it stayed exactly the same.
However, when I make changes to my .css file Meteor picks that up right away..
Anyone have this experience? thanks
The bootstrap3-less package contains the less code inside itself. If you want to use your own less code instead of the code inside bootstrap3-less, you should remove bootstrap3-less.
Here you can see the code that the bootstrap3-less package adds to your app: https://github.com/simison/bootstrap3-less
They suggest that you can customize bootstrap by adding the less file to your client folder, but even if you don't have that file the app will load all of the less content from the package.
I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)