My directive uses an HTML file. The HTML file uses a CSS stylesheet. I need to distribute the directive js, HTML and CSS files, so the CSS location definition needs to be relative to the HTML.
Note: This is how I solved the location of the HTML, I have pending to solve the location of the CSS file.
I put the CSS file in the same folder as the HTML file, and then defined in the HTML:
<link rel="stylesheet" href='somefile.css'>
however this points to the domain root, not to the HTML file location.
Any ideas how to achieve this?
I think there are two ways to fix your issue as you don't know where the directives are located:
Solution 1 - Ancient HTML Way
If the length of the CSS is small, you can directly include it in your template HTML itself, through the style tag.
<style type="text/css">
Add style rules here
</style>
Solution 2 - The Angular Way(most recommended)
Use ngHref directive.
In your directive.js code, you can just put the path of the directive.html to a scope/rootScope variable and then you can access it from the directive.html
In directive.js
link: function (scope, iElement, iAttrs) {
scope.htmlPath = <path of templateURL>;
}
In directive.html
<link rel="stylesheet" ng-href="{{ htmlPath }}/filename.css">
Note:
I hope you are not using Gulp to build the angular JS code. But, If your are using gulp, you can add a gulp task and pipe all the CSS to a single CSS and can inject to your index.
You need to make separate directories for css and html(template files)
and use full path from root to the css folder
<link rel="stylesheet" href='/angualr/css/style.css'>
Related
I have a trouble with the import of my CSS - which is made through the html link tag.
<link rel="stylesheet" href="styles/main.css">
It works well when the url has got a single slash - like http://url/page.
it correctly look for the css at http://url/styles/main.css
but when the URL comports two slashes like http://url/page/1 then the css is looked at:
http://url/page/styles/main.css and so is not found cause path is incorrect.
I am using clojurescript react-js wrapper called re-frame.
How to tell the soft to always look at http://url/styles/main.css whatever the URL.
Thanks in advance for your help
Your <link ...> is using a relative URL. Relative to the current page, that is.
Just change it to an absolute one by adding / at the front - "/styles/main.css".
On my laravel app, I'm using a forum package called "chatter".
This forum is injected into my master layout, so it looks like this:
nav bar
chatter package
footer
It's injected into a container called <div id="chatter">, and its styles are found in the style sheet chatter.css, which is separate from my main sheet.
The problem is, some of the styles in this sheet are conflicting with my nav and footer. Furthermore, some of the styles in my main sheet are affecting the forum (albeit minimally, so I don't mind making the changes manually).
I can't change the markup, but I can edit the styles.
So how could I make it so that all the styles found in chatter.css ONLY apply to what's inside of <div id="chatter">?
Add #chatter to every style in chatter.css like this
#chatter table{...}
#chatter tr{...}
#chatter td{...}
etc.
If style is for level above the chatter div then add after like this:
html #chatter{..}
body #chatter div{...}
You will have to namespace your CSS as user Nawed Khan pointed out but there is a much simpler way to do that than changing each of your styles manually. This method uses less to handle it for you.
Drop this in a file called chatter.less.
#chatter {
#import (less) 'chatter.css';
}
Then you need to include it on your page...
<link rel="stylesheet/less" type="text/css" href="chatter.less" >
Then you need to include less.js AFTER you've included your .less file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
In your .less file you might have to mess with the path to chatter.css, I believe it's going to be relative to whatever file you are including the .less file on.
How do I automate turning something like ...
<link rel="stylesheet" href="css/main.css">
... into something like ...
<style>
/* lotsa CSS rules */
</style>
... in an HTML document?
I currently do it manually. I also use a postCSS with a bunch of plugins. So, I start with a separate CSS file and I use a link tag initially. When I'm done working on the CSS, I comment out the link tag and add a style tag and copy all of the CSS into the document. Vim makes this a little easier:
:read css/main.css
I already use gulp for automating some of my workflow, so I prefer a solution that can be easily integrated with that.
Gulp has been a great benefit for me, but I might not understand enough about how it works. I tried searching the plugins and I found too many that look like they'll do what I want. Some of them seem to process the CSS and HTML to add style tags to the individual elements, which is not what I want.
gulp-smoosher
gulp-css-inliner
gulp-inline
It looks like Grunt has a task for this. Check out the github repo here.
Install the plugin:
npm install grunt-inline --save-dev
Enable the plugin inside your gruntfile:
grunt.loadNpmTasks('grunt-inline');
In your project's Gruntfile, add a section named inline to the data object passed into grunt.initConfig().
grunt.initConfig({
inline: {
dist: {
src: 'src/index.html',
dest: 'dist/index.html'
}
}
})
Which should turn this:
<link href="css/style.css?__inline=true" rel="stylesheet" />
Into this:
<style>
/* contents of css/style.css */
</style>`
In Web2py I am creating some email templates and want to include the tag with my css file LOAD'ed into the view.
How do I use the LOAD function in the view so that it doesn't use jquery as it is an email and pulls from static, css, base.css.
This is what I have now:
<link href="{{=URL('static', 'css/style.css', scheme='http')}}" rel="stylesheet" type="text/css" />
But with this requires that remote content be loaded and most email applications disable this loading.
I was wanting to do this:
{{=LOAD(url=URL('static', 'css/style.css', scheme='http'),ajax=False)}}
But it is returning this:
<script type="text/javascript"><!--
web2py_component('http://127.0.0.1:8000/iid_app/static/css/web2py.css','c382784163112');
//--></script><div id="c382784163112">loading...</div>
<script type="text/javascript"><!--
web2py_component('http://127.0.0.1:8000/iid_app/static/css/style.css','c3845864949');
//--></script><div id="c3845864949">loading...</div>
Any ideas on how to make this just include the test from the file?
If you want to include the content of a CSS file in the email template, just add the following to the template where you want the CSS included:
{{include '../static/css/styles.css'}}
The {{include}} directive looks for the template to be included relative to the application's "views" folder, so the "../" goes up one level from there in the folder structure, and from that point, you can just specify the path to the file you want to include.
how is at the rate import filename.css in style tag different from link tag to relate to css file.?
I'm confused and they both do the same thing of giving css file path.
I'm using this
<style>
#import "filename.css";
</style>
- Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet. It is added to the of your HTML document like this:
#import - Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. But if you include an #import in the head of your HTML document, it is written:
#import url("styles.css");
more info : http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
Never use #import for stylesheet because it's block parallel download which effect the page performance.
Always use <link rel="stylesheet" href="stylesheet.css" > for stylesheet.