In our spring Application in one of the JSP pages, we have a link
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css"></link>
When we run the Project in local environment css works but it does not work in different environment
In the other environment CSS URL being
<link rel="stylesheet" href="/myapp/css/jquery-ui.css">
when we remove the App name(request.getContextPath()) below this
<link rel="stylesheet" href="/css/jquery-ui.css">
The css works in the other environment.
***1. ***In Local System, the Below URL is Working perfectly.******
<link rel="stylesheet" href="<%request.getContextPath()%>/css/bootstrap.min.css"></link>
When we remove the ContexPath() means the CSS didn't work
<link rel="stylesheet" href="/css/bootstrap.min.css"></link>
How to handle this issues in local and other environment?
try this
<link type="text/css" href="<%=request.getContextPath() %>/resources/css/main.css" rel="stylesheet"/>
Related
I have placed bootstrap.min.css and bootstrap.min.js in assets/stylesheets and assets/javascripts, respectively. When I run my app locally, I get the styling that I expect. Further, if I view the source locally I see the following tags:
<link rel="stylesheet" media="all" href="/assets/comments.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
(there are many other tags like this one)
I have the same setup on a DigitalOcean Droplet, but the css and javascript doesn't seem to be working.
If I view the source on the server I see tags like this:
<link rel="stylesheet" media="all" href="/stylesheets/application.css" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/stylesheets/bootstrap.min.css" data-turbolinks-track="true" />
Something doesn't seem to be rendering properly. This is probably my lack of experience showing, but I really have no idea how to proceed here.
Any ideas?
Here is my webapp folder structure
<link href="${pageContext.request.contextPath}/common/css/style.css" rel="stylesheet" type="text/css">
<link href="../common/css/style.css" rel="stylesheet" type="text/css">
<link href="<s:url value ="../common/css/style.css"/>" rel="stylesheet" type="text/css"/>
I've tried using above methods but still no luck. Same with js files.
I use sturts 2 spring 4 in my project
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 facing a problem when our application is deployed in IIS. The styles are not applying to the content page but everything was working fine when I was running it through VS 2010.
This is what I have given in the master page.
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
The above code which I have specified will apply only for the Home page which is in the root directory but when I navigate to so other module styles are not applying to those page which are inside other folder.
I searched in Google and I tried many options like
<link href="./Styles/style.css" rel="stylesheet" type="text/css" />
<link href="../Styles/style.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#import 'Styles/style.css'; </style>
None of the above things are working even for home page also which used to work before. Please let me know some suggestions so I can proceed further.
<head runat="server">
<link href="~/Styles/style.css" rel="stylesheet" type="text/css" />
</head>
it will work and load your css on every page
try with adding the root/domain in a dynamic way before the styles folder in ur code.
I m sonal.
I am designing a website.
In which i m using font-Awesome and bootstrap combine.
But some where confused in linking.
my linking files are:
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/
bootstrap.min.css">
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/
bootstrap-theme.min.css">
<script src="../goyal/bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/
bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="../goyal/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../goyal/font-awesome/css/font-
awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
Where i am lacking. I am in new in this feild.
The only issue I can see is that you are linking both full and minified version of a few of the files.
Try this instead:
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../goyal/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="../goyal/bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
The .min.css and .min.js files are supposed to be used in production, they ususaly have shorter variable names etc to make the files smaller, but are ALOT harder to read.
I would recomend linking to the files that are not minified while developing then switch to the minified files when going 'live' with the site to keep the bandwidth down.