First Grails (2.3.6) app here. Trying to add a custom CSS file to my views/index.gsp:
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/main.css" />
</head>
<body>
...
</body>
</html>
Inside my grails-app directory, where the views subdir lives, I would have expected to see a resources or css directory, but don't see anything. So I ask: where do I place main.css so that it's available to index.gsp at runtime?
Your css should not go under grails-app/views. It should be under web-app/css/. Then you can do something like this in your GSP...
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
Related
I am building a web application and trying to link a stylesheet to my app. Here is my code
<html>
<head>
<title>Bubble</title>
</head>
<link rel="stylesheet" href="./public/main.css">
<body>
The app is located in the direct DrDenver/blog. The full style sheet is located in DrDenver/blog/public.
Remove the dot and slash. you are looking above the dir instead of within.
Try This.
<link rel="stylesheet" href="public/main.css">
I added this line to my app.js
app.use(express.static(__dirname +"/public"));
And updated the code on my header.ejs to after moving the main.css to public/stylesheet directory.
link rel="stylesheet" href="/stylesheets/main.css"
this is how I load some libs to my angular project:
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<script src="lib/angular.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/effects.css">
</head>
<body>
</body>
</html>
now, suppose I wanted to load another css file that is also stored in the "css" folder. Could I declare just the folder and have all ".css" files inside properly loaded to the project? For example:
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<script src="lib/angular.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/*.css"> <--- here!
</head>
<body>
</body>
</html>
Thanks.
Unfortunately, no. Angular is a front-end framework, and you cannot load all the CSS files in a folder with only front-end languages without specifying them individually.
If you have access to a back-end language, you can scan the directory and work out what files are contained within. Then you can use a loop to individually write each link to your HTML.
Without a back-end language, the best thing you can do is package up all of the CSS or JS files used in a project into a single file. This improves performance, and also allows you to easily compress the code.
Here is my root HTML file. As you can see, it has no problem getting styles from Bootstrap (this functionality is working just fine). When I open up index.html in the browser at localhost:8080 (running a server through a webpack command), It cannot find the stylesheet! This is something I don't understand. Please help. Thank you.
BTW.. stylesheet.css is at the same directory level as index.html AND index.js. How come the bootstrap stylesheet is getting picked up but not my stylesheet?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Meteor automatically loads all style sheets. I've seen it recommended to put them in the /client/stylesheets, or /imports/ui/css folder.
You don't have need to put <link rel="stylesheet" href="stylesheet.css" /> . Try removing that line and see if you can see your styles applied to your page.
The reason <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> is working for you is because it is loading from an external address. It is hard-coded on your html and not being managed by meteor. I don't recommend it, but if you wanted to do the same thing with your style sheet, you would put it in the /public folder, and use <link rel="stylesheet" href="/stylesheet.css" />. But Meteor is designed to manage all the style sheets for you, so best not to do this.
Lastly, if you want to control the order style sheets are imported, you can specify import '/client/stylesheet.css'; // import CSS from absolute path - see here for clarity: https://guide.meteor.com/structure.html#intro-to-import-export
I've started using meteor and want to know what is a good way to migrate a HTML file that refers to many CSS files. So far, I found that meteor will automatically load all CSS files in an alphabetic order. My two questions are as follows:
Where should I locate the CSS files? (or from where I can control which directories are loaded)
Is it possible to load specific CSS files in particular order?
Here are the current references I have in my HTML file, before migrating to meteor.
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Libs CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="vendor/owl-carousel/owl.carousel.css" media="screen">
<link rel="stylesheet" href="vendor/owl-carousel/owl.theme.css" media="screen">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" media="screen">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-animate.css">
<!-- Current Page Styles -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/blue.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/theme-responsive.css" />
Thank you for your help! :)
There is no need to provide reference of stylesheets in meteor. Just put your css file in client/stylesheets folder. Meteor will automatically apply these css rules.
As stated by #imslavko you can find Meteor behaviour at https://guide.meteor.com/structure.html
However these rules are more relevant for .js code and .htmltemplate files: Meteor merge and minimize all .css in a single file (as long as they are provided by you and not on a CDN) so you will find a single <link rel="stylesheet"> reference in your <head>.
Remember to put all frontend files inside client folder, to avoid unnecessary server loading and availability.
So you can choose your convenient folder structure for .css files, for example put them all in client/stylesheets or use other subfolders to better manage them.
I'm having some issue with importing a .css file in my jsp within the eclipse using this tag
<link rel="stylesheet" href="css/style.css" type="text.css">
The structure of my pages is so
WEB-INF
>jsp
>css(folder)
>style.css
>home.jsp
So basically home.jsp and the css folder are parallels, a relative url like the one i'm using should be fine according to most tutorial.
Do you see some problem?
Thank you
<link rel="stylesheet" href="css/style.css" type="text/css" />
Change it to a slash.
In your structure the css folder is style and in your link it is css
<link rel="stylesheet" href="style/style.css" type="text/css">