Adding css and js to struts 2 project - css

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

Related

Could not find stylesheet file 'css/style.css' linked from the template. Got this error while interfacing bootstrap with Angular

<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="plugins/magnific-popup/magnific-popup.css">
<link rel="stylesheet" href="css/style.css">
this is what the part of the code that throughs me the error just like for css I get error for all the plugins like bootstrap, owl-carousel, magnific-popup

Styling React component with styles from frameworks

I'm trying to upload styles from another frameworks to my components in React. I didn't find info about this in videojs docs. At this moment I'm uploading styles via cdn like this:
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video-js.css" rel="stylesheet">
I'm uploading scripts locally, but how can I do that with styles? I'm using scss, so for my styles I'm using this:
require('.././styles/style.scss');
EDIT
Project structure
I'm supposing your code belongs to the index.html file (root path as shown here: https://i.stack.imgur.com/POPhJ.png)
So you'll need to add your SCSS files like:
<link rel="stylesheet/scss" type="text/css" href="styles/contact.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/desktop.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/mobile.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/other.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/reset.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/style.scss">
<link rel="stylesheet/scss" type="text/css" href="styles/tablet.scss">
Just after -or before- the other <link> tags

Laravel 4 - CSS does not get loaded

I have imported a html page into my laravel 4 project. I linked all the js and css files together. However, when loading the page the page just outputs plain html.
This is my internal folder structure:
In my main.blade.php site I link to my css like that:
<!-- CSS Files
================================================== -->
<link rel="stylesheet" href="{{asset('css/mainPage/bootstrap.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/jpreloader.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/animate.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/flexslider.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/plugin.css')}}" type="text/css">
Any recommendations what I am doing wrong?
I appreciate your answer!
As the others already pointed out, your missing the 'assets' at the beginning of your path. That's because it requires the full path relative to the public folder.
Besides that, I suggest you use the tools Laravel provides to generate the full link tag of your css includes. It makes your code a lot more cleaner.
{{ HTML::style('assets/css/mainPage/bootstrap.css') }}
And there's HTML::script('path') as well for javascript files
Use the following:
<!-- CSS Files
================================================== -->
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/bootstrap.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/jpreloader.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/animate.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/flexslider.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/plugin.css')}}" type="text/css">
give the full path of the directory under public folder:-
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/bootstrap.css') }}">

bootstrap with fontAwesome issue

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.

How to connect CSS files to my JSP pages stored in Web-Content (Dynamic Web Project)

I'm quite new to the Spring|Hibernate|Eclipse setup. For some reason, My index.jsp files are not picking on the css files (css & css01).
Any clue why?
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css">
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css">
You have not provided the end tag of the link tag. Provide it like this.
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css" />
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css" />
OR
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css"></link>
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css"></link>

Resources