You've seen how easy it is to add CSS to your Awesome Table template (within Google Sheets). An alternative to this is adding a custom CSS file. You can also use this method to add an external CSS library (like Materializecss or Pure.CSS for example).
not_interested CSS files must not be hosted on Google Drive as it will not be loaded inside the Awesome Table app. Google Drive is not meant to store content for web pages (including text files for CSS). You can upload your CSS file to free hosting sites like Github, Netlify, or Weebly, to name a few.
For this example, we are going to use an external CSS file hosted in GitHub Pages.
warning GitHub Pages usage is beyond Awesome Table's scope of support. We suggest reaching out directly to their official Online Help and Support Site for your GitHub Pages related concerns.
1. Copy the direct CSS url generated once the CSS file is uploaded (or created in GitHub). In our example, the direct CSS url is: https://darny.github.io/csstemplate/style.css.
2. Go to the Awesome Table sidebar menu, click Formatting.
3. Then paste your direct url link in the Custom CSS url field.
4. Finally, click Update app.
Comments
7 comments
Para agregar a una biblioteca CSS externa, debo usar el CDN?
Por ejemplo, MaterializeCss, debo agregar
en el input URL CSS personalizado? o como es el método?
Hello dario molina,
I suggest you link your CSS in your template sheet in a column with an empty header. Here is an article that could be useful for you.
You just need to link your file with this code:
Kind regards,
Thomas
Hi Thomas,
What should the syntax look like when I try to reference a css file located within Google Drive. As an example, my current shared link is https://drive.google.com/file/d/1mgynBCj1E6oizfRLG7GOFXg7QyrGKVVn/view?usp=sharing.
and, well.. nothings happening:)
All thoughts welcome. Many thanks
Hello Eugene,
It is not a recommended practice to store your CSS files in Google Drive. We recommend you using some other hosting service or to use Awesome Table templates.
Regards,
Nicolas
I second what @Nicolas suggested, @Eugene.
CSS file must never be hosted in Google Drive as it will not be loaded inside the Awesome Table view. Google Drive is not meant to serve content for web pages (including text files for CSS).
You can upload your CSS file to free hosting services like weebly and gitHub.
- Randy
Hello, I'm afraid this will be a very dumb question but can't find how to make things work!
I've added my complete css url in the "Custom CSS URL" field in formatting tab.
My CSS is located in my theme folder, so the file is nested in some folder sequence, but it is perfectly accessible from the web. The problem is that none of the rule I wrote there is working (those rules worked if loaded from the Template sheet of my Google Sheet).
Can anyone guess what is wrong?
Maybe the fact that, before adding this url, css was loaded directly from the sheet?
Thank you
########################
UPDATE (I knew it was dumb!!!)
Problem is the css is on a http server (not https). Ok, solved. I guess there is no work around here,
Yes, you are absolutely right Randolph Abelardo. Google Drive is not meant to store content for web pages. So, you must not host css file in google drive. Perhaps, the most optoion will be Google's GCE Cloud hosting.
Please sign in to leave a comment.