I need to add jstree (version 3.3.4) as a bower dependency to a jhipster project (jhipster version 2.20.0 - not the current version!).
Using the dev profile or when starting the application from my IDE, everything works fine.
But when I deploy using the production profile, the .css files of the project get merged into one big file called assets/styles/something.vendor.css when packing the .war file, while images seem to get copied to assets/images/.
The web browser ends up asking for assets/styles/32px.png, which results in 404.
Instead when using dev profile, styles and images are both loaded from bower_components/jstree/dist/themes/default/
But jstree seems to expects it's icons next to it's css file by referncing them directly (e.g. background: url(32px.png)).
What I tried:
I managed to overwrite some of the rules by adding for example
.jstree-default .jstree-file {
background: url(../images/32px.png) -100px -68px no-repeat !important
}
to the projects main css file (src/main/webapp/assets/styles/main.css) and manually adding the images to assets/images.
But jstree seems to have most icons packed into one .png-file - and then shifting/cutting it according to which icon is needed using css rules. This makes it hard to get it to look right.
Using my approach the icons can be loaded - but they are not cut as they should for some (unknown) reason:
So I tried to overwrite attributes like repeat: no-repeat
or background-color: transparent as well (from my understanding they should be present already as they are part of jstree's css and not overwritten by my rules), but the rules seem too complex and I can not get it to look right and I'm hoping for a better solution.
How can I resolve this issue without having to 'rewrite'/overwrite most of jstree's css rules?
I solved the problem by excluding jstree from the gulp build process (thanks for the hint #Gaël Marziou) by:
making sure jstree is listed in bower.json under "devDependencies", not under "dependencies"
adding 'main/webapp/bower_components/jstree/dist/jstree.js', to jstree (like it was added by bower initially)
editing index.html so that
jstree's style.css is included after <!-- endbuild --> in the head section
jstree's javascript file is includes after the <!-- endbower --> and <!-- endbuild --> comments
This way jstree is not packed into vendor.css so that both style and images are loaded from the original location (bower_components/jstree/dist/.
Related
I'm just learning ASP.NET and I created the default Web App template in Visual Studio. There are some bootstrap.css files under wwwroot folder but even if I comment everything out it doesn't have any effect on how the website looks like.
For example in _Layout.cshtml the #RenderBody method is wrapped up in div class="container" but editing ".container" in the CSS files doesn't do anything. It's only when I delete the class name "container" in the div element something actually happens. So why editing these CSS files don't have any effect?
The browser is likely caching bootstrap.css because it is linked into the page. Try opening dev tools in your browser and telling it to dump the cache and hard reload (if you are using chrome/edge, for example).
Some devs get around this by only opening their site in private mode or with debug/dev flags. FireFox even makes a developer edition of their browser too.
I think running your site using "dotnet watch" might also fix the issue.
Check your layout, what .css file you used. You can see it in the layout or using F12 to see it in the network.
Below is two options:
1.If you used the bootstrap.min.css in your layout
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
You need comment .container in your bootstrap.min.css
2.If you used bootstrap.css in your layout
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
You need comment .container in your bootstrap.css
The structure is like below:
Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.
I'm on Debian Jessie, 32bit, editing with gEdit and trying to get BootStrap to work without an internet connexion. I went to getbootstrap.com/getting-started, downloaded the files from the left-most button, extracted the various folders (js, css, fonts) into a folder named bootstrap.
I also created custom.css in the css folder and threw in a line
#qlksjhdf { color:#FF0000;}
Within this folder, I created an HTML file. Then I copied some code from a working example. When I use the CDN links, all works fine, as expected, but when I replace the CDN with local linking such as "css/bootstrap.css", the styling disappears, although the H1 styling in "css/custom.css" works.
Do I need to "install" something or wouldn't just downloading and linking the files suffice ? And yes, I've also downloaded jQuery and linked it locally...
Are you sure that you're using the right file path for the Bootstrap resources. If you put everything in a folder called bootstrap, you should be able to link the css file like this from your index.html:
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
Double check the path you are using to reference the bootstrap files. That is most likely the issue. If everything looks fine, can you add some code to the example or create a JS fiddle with the code you are working with?
I want to develop a usual website with Meteor.js (not one-page web app) and I want to load only specific css files for every page. So not all pages share the same css code.
Is it possible?
First off if you are using Meteor you are not building a "usual" site, you are building a very powerful SPA (single page application). You can imitate a "usual" website with introducing routing, try IronRouter.
OK now about CSS. Once you deploy Meteor all your CSS and JS are merged and minified. So if you want to achieve what you are asking you will need to add a package like this one.
https://atmospherejs.com/mrt/external-file-loader
https://github.com/davidd8/meteor-external-file-loader
Then attach it to trigger once a template is created:
Template.myCustomTemplate.created = function() {
Meteor.Loader.loadCss("//example.com/myCSS/style.css");
};
I believe you could also load the CSS from the Meteor server through Meteor's Asset API. Read more here: https://docs.meteor.com/#/full/assets
I found a simple solution. In your meteor project folder create a folder named "public" (no quotes). In that folder create a folder called "css" (no quotes). Put the CSS file in that folder.
In the html file which you want the specific CSS file to apply to do the following:
<head>
<link href="css/yourfile.css" rel="stylesheet">
</head>
Since the last part of your question says, "So not all pages share the same CSS code." you might consider using less and wrapping your template in a different div class.
For example
HTML file
<template name="page1">
<div class="page1css">
<p class="content">Page 1 content</p>
</div>
</template>
LESS File
.page1css {
.content {
font-size: 2em;
}
}
This way you can just wrap your pages and the corresponding css in the correct class.
I am wondering why I cant set variables within twitter bootstrap using LESS. I am using ruby on rails which has a bootstrap_and_overrides.css.less file. it has the following statement
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// #linkColor: #ff0000;
So my understanding is that i can set my variables within here. So i set
#black: #333;
and then tried using it in my application.css calling #black file but it does not work? i.e. doesn’t render #333.
Am i understanding this incorrectly?, do all my variables and css styling go within the bootstrap and override file?
Any advice appreciated
Follow the instructions at http://lesscss.org/#usage to make sure your updated less is used, if you are using it client side.
OR
Compile your updated less into CSS and then copy over the updated CSS.
Here's a list of tools that can do the compile. http://bootstrap.lesscss.ru/less.html#compiling
For suggestions on how to organize your bootstrap modifications see the SO question Twitter Bootstrap Customization Best Practices
As an aside, I wouldn't recommend changing #black. Changing it would alter many, many things, including some you might not expect.
If I understood you correctly, you are modifying your bootstrap_and_overrides.css.less file, but the one being used is the application.css file.
If that was the case, of course it's is just natural not to reflect the changes you've made. You must compile your .less file first to .css. to reflect that changes to your .css file.
For a try, use LESS via the client-side and setup your environment like so:
For instance, in your index.html file, put
<link rel="stylesheet/less" type="text/css" href="application.less" />
in the document head. and below it add
<script src="less.js" type="text/javascript"></script>
Download the less.js file from here. and put it inside your root directory, or you may of course customize the location and make the necessary path in the href attrib.
After doing the above, you're ready to modify your application.less file (not the application.css). You may copy you're existing custom styles from the application.css file.
application.less is where you should put your variables.
You may rename your bootstrap_and_overrides.css.less file into application.less and make sure it is the one linked to in the header tag.
For more info about LESS CSS checkout the wiki.