i'm working on a bootstrap template locally on my dev server.. the template loads some resources via CDN..
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!--font-awesome-->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
Problem is this slows me down because everytime I hit refresh to check the changes on my page (localhost) the darn thing has to load the resources online again and again..
So i tried to open the resources via the link and save em locally. but this breaks because i guess there are more things to it than just the CSS code.
Is there an easy way to "localize" these things?
Thanks guys
This are the steps I followed to use CDN CSS resource locally:
Download and extract the font pack from here
Copy the ionicons.css to your project
Copy the fonts folder to your project
Ensure the font urls within ionicons.css properly reference the fonts path within your project.
Include a reference to the ionicons.css file from every webpage you need to use it.
In my case I include this in main.html
<link href="css/ionicons.css" rel="stylesheet" type="text/css" />
then simply add the icon and icon's classname to an HTML element.
<i class="icon ion-home"></i>
and folders are in this way:
- project_name
* css --> ionicons.css
* fonts --> ionicons.eot, ionicons.svg, ionicons.ttf, ionicons.woff
To preface this answer, I'm not sure that this solution is considered 'easy' but it will get you the ability to host locally vs. being dependent on the CDNs. The easy solution is using the CDNs. That being said:
The bootstrap.min.css file is easy to localize, you can go to getbootstrap.com and get it out of the Download Bootstrap option.
Localizing Font Awesome is a bit more work. Here you need to copy the entire font-awesome directory into your project. You can download it from this URL: http://fortawesome.github.io/Font-Awesome/ . You'll end up with a directory folder named something like font-awesome-4.2.0, which will contain a series of sub-folders: css, fonts, less and scss. You'll also need to call the local font-awesome.min.css file in the head section of your HTML. See the following GitHub link for more information on setting up Font Awesome locally: http://fortawesome.github.io/Font-Awesome/get-started/
Ionicons is similar to Font Awesome setup. From the following Ionicons web page, you'll need to Download the directory and include it in your project: http://ionicons.com/ . You'll need to call the local ionicons.min.css file in the head section of your HTML after you have the directory setup.
old question, but I think there's an easy solution now:
you can install the node package by using npm install ionicons
https://www.npmjs.com/package/ionicons
Save the css/js files locally from url and change path.
eg:- css/ionicons.min.css
http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css
http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css
http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css
Related
I am trying to use a single HTML stylesheet that I've created between multiple apps script web app projects. I have the HTML stylesheet hosted on an external site but cannot figure out the code to include that external stylesheet into my apps script projects.
I've currently got it working with the following code in my Index.html file:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<?!= include('stylesheet') ?>
The include function calls:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
And my stylesheet is a separate HTML file in my Apps Script.
This all works well, but I'd like to have a central repository elsewhere (I've read that I cannot link to an Apps Script file in another project) for my stylesheet so that whatever changes I make will update to all of my Apps Script projects automatically.
To do this, I've uploaded my stylesheet.html to a website and have taken the link that points to the file (i.e. http://www.test.com/stylesheet.html) and tried to do the following without success:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
I've placed this in the head element of my Index.html file, and I also tried it above the head element. Neither worked.
I've also tried to just use the include function that worked as mentioned above and modify my stylesheet.html to be blank except for:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
None of this seems to work, wondering if anyone else has any thoughts on how this might be possible.
Host CSS file in Google Drive
Create a .css stylesheet file and host it on Google Drive.
Change the uploaded file permissions to publish it on the Web.
Now copy the published file ID and use it to build the following URL:
https://drive.google.com/uc?export=view&id=FILE-ID-GOES-HERE
Now include the generated URL to your HTML page using the <link/> tag in this way:
<link rel="stylesheet" href="google_drive_link_goes_here">
Reference
Host CSS or JS file on Google Drive
For some reason, I can only access my CSS files in my Node.js app if they are located in the same folder or deeper than HTML.
Folder structure that works:
I can assess CSS here using the css/style.css path as it is located in the sub-folder of the HTML folder. It also works for the nested sub-folders.
Folder structure that doesn't work:
But when I try to move CSS on the level higher, it can't be accesses using ../css/style.css, an error message about the incorrect MIME type (text/html) appears and the style doesn't apply.
Am I missing something or this is intended?
The issue might be with path, it must be
<link rel="stylesheet" type="text/css" href="../css/style.css">
I have created a simple Dynamic Web Project in Eclipse Mars, using Spring. My JSP is referring to a CSS file but css file is not getting pickup.
Eclipse Project Folder Structure:
enter image description here
Here is how, I referring it in my JSP:
My project structure is same as yours and I refer css file via:
href="css/anotherStylesheet.css"
Use this to add the css file
<link href="folder/styleFile.css" rel="stylesheet" type="text/css" />
It may also work when you drag and drop the CSS file directly to your page.
Configure the spring.xml and add the css folder in the configuration.Also check the eclipse deployment assembly (include the your webcontent floder)
Simple as title says, how do I include a css file that is found two parent folders up from the actual web application itself?
I have tried adding the file as a link to the web project and then referencing it like that and it dose not work
<link rel="stylesheet" href="../../mystyle.css" /> would literally move up two folders on your server. You may be better off with using the full path: <linke rel="stylesheet" href="/folder1/folder2/mystyle.css" /> - which all assumes that the path you need to get to is accessible to the web server.
Since the page comes from the server I would read the physical file and stuff that onto the page as part of the server script such as:
<style>
<?= css_file_content ?>
</style>
If in a parent folder, it may be outside the hosted path making it inaccessible to the client. But it is not inaccessible to the server-side script.
Visit: http://www.w3schools.com/css/css_howto.asp
You can add inline css if external doesn't work
My magento site unable to load the CSS because of wrong path. the Path is:
<link rel="stylesheet" type="text/css" href="C:\Program Files (x86)\Zend\Apache2\htdocs\myecommerce_comhttp://myecommerce.com/skin/frontend/default/theme183v2/css/reset.css" media="all" />
and the Correct path is
<link rel="stylesheet" type="text/css" href="C:\Program Files (x86)\Zend\Apache2\htdocs\myecommerce_com\skin\frontend\default\theme183v2\css\reset.css" media="all" />
I already change the value of my DB table core_config_data, cleared cache, etc..
Still not working.
It's an old question, but mostly for my own documentation:
I've had this problem. There are some things to check:
Is the folder /media/ writable? This is where Magento stores the combined js and css files.
Is the folder /var/session and /var/cache writable? Caching needs to be stored somewhere.
Just to be sure: are the tables core_cache and core_cache_tag truncated?
Making /media/ writable solved the problem for me.
Try to go to the control centre
in the System menu, in fact i think this question has been asked before
well
System => Configuration => Web
The main point to watch out for is
i. Url options -> Add store code to Urls should be 'No'
ii. Unsecure -> Base Url should point to your own domain e.g http://mycommerce.com/
iii. Secure -> Base Url should point to your own domain e.g http://mycommerce.com/
also you should have
{{unsecure_base_url}}skin/
for your Base Skin
I had the same problem but found a different solution.
Are you using an Addon like GT Speed to combine or reduce your JS and CSS files?
I uninstalled this plugin and the problem was solved for me. Hope this helps.