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
Related
I am building a Symfony 5 app and want to use CSS inside my twig templates. My stylesheet is at public/css/styles.css and so I try to use it in my twig template with the line <link href="{{ asset('css/styles.css') }}" rel="stylesheet" type="text/css"/>. This works locally but once I deploy it to the Google Cloud Platform the server can no longer find it. The console shows a 404 error when trying to find the stylesheet. Where does Symfony want me to put my css files?
This feels like it should be very simple but I'm totally at a loss and feel like I'm missing something stupid. The documentation only really talks about Encore and that seems like such overkill for using a single CSS file in a twig template.
(sorry i cant comment because low reputations, thatswhy i need to take an answer)
At first, the location of your css is correct. Also the usage of your link tag looks fine. Now the question is: what is the correct error message, or better where looks the browser to your file?
I think the browser want to take your file from root, not from public folder. If you can answer this with yes, you have to check your .htaccess file and/or linking from webspace to startfolder (public) in this cause.
It works in localhost because the symfony dev-server take this work for you.
Got the CSS working. I think what did it was telling app.yaml to put the css in the public folder.
handlers:
- url: /css
static_dir: public/css
Then instead of loading using the asset() function, I included the css with:
<link href="/css/styles.css" rel="stylesheet" type="text/css"/>
That way, the css folder I had in public locally was put in public when deployed to the GCP.
I created a .js and .css file from a project and added them to a github release
https://github.com/natearn/react-vim-tips/releases
I then attempted to add the code directly to a webpage using an external script and stylesheet (linking directly to the files in the release).
<script type="text/javascript" src="https://github.com/natearn/react-vim-tips/releases/download/1.0.0/VimTips.js"></script>
<link rel="stylesheet" type="text/css" href="https://github.com/natearn/react-vim-tips/releases/download/1.0.0/VimTips.css">
For context, the script creates a global function which renders a react component, which I execute elsewhere on the page.
The network requests for the files succeed after a redirect (so 302 then 200), the javascript loads and runs, but the css rules do not get added to the page.
When I copy the stylesheet and fetch it locally, it works. So I believe the problem is in the mechanism of delivery from the CDN.
Can someone tell me what might be happening here, and how I can fix it?
Remember that GitHub repos are different from web hosting services. You are correct that the issue is related to how the .css file is being served (or rather, in your case, not being served at all). There are a few options:
1) Create a gh-pages branch and reference your stylesheet from there i.e. https://natearn.github.io/react-vim-tips/stylesheets/VimTips.css. This should actually serve your CSS properly.
2) Use RawGit to generate a proper CDN link to your VimTips.css file. I gave this a shot and have a working example at this Stackblitz: https://stackblitz.com/edit/react-bcjjdo?file=index.js. Here's the CDN link I used: https://cdn.rawgit.com/natearn/react-vim-tips/32b5ee66/stylesheets/VimTips.css
The crucial point is that either of these strategies will serve your CSS with the correct Content-Type headers, enabling them to actually load as CSS in your page. Referencing the link to downloads from your release simply prompts a download of the binary data for your CSS file, which will not work. Hope this helps you out!
Use the raw version of the file from your repo,
I have this css file from an old Hello World repo,
using https://github.com/mcarpenterjr/Hello_World/blob/master/style.css you get the file in the repository.
Using https://raw.githubusercontent.com/mcarpenterjr/Hello_World/master/style.css
you get the raw file, which is what you're looking for. To get this simply click the raw button to the upper right of the file contents on a file's page from the repo.
I suppose you could also swap https://github.com for https://raw.githubusercontent.com and drop blob from the address.
Just use this -> https://rawgit.com/
Works flawlessly.
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
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
I got a PL/SQL Web Toolkit project not online (url : http://127.0.0.1:8080/dad/my_procedure).
And I just want to know how to import a local CSS file into this procedure...
I tried to do something like this :
htp.print('<link href="'C:/Users/Me/Desktop/css/filecss.css" rel="stylesheet" type="text/css" />');
or even
htp.print('<link href="/css/filecss.css" rel="stylesheet" type="text/css" />');
with no success...
In reality I don't know what's the root directory for a project like this.
The CSS file has to be within the HEAD area of the webpage. You should have your htp.print statement between the htp.headopen and htp.headclose calls.
Also, the CSS file path is relative to the web server processing the request, so the path should be to the directory on the web server that the CSS file resides.