I'm mostly certain that I set up my HTML script correctly, and made sure that the needed CSS file would be hosted in a shared folder on Google Drive, correctly cited, etc.
However, when I copy my HTML code into the box, and save it all, the editor always throes this error: 1+12 - 125: failed to load external url navigator.css
While I would think that linking the CSS file to the HTML code regularly, as I posted below, I only see so many issues coming up with CSS linking, and even more worrying, is that the Google support documentation (here) says that an HTML box can't 'refer' to external code, including what I believe may be such a CSS file.
<link href="http://[mixed aplhanumeric subdomain].googledrive.com/host/[shared folder's 'mixed' address]/navigator.css" rel="stylesheet" type="text/css">
Given that, would anyone know a simple workaround to linking the HTML to the CSS code in the Google sites HTML box?
The documentation shows an example with the CSS in <script> tags. I don't perceive any indication that including CSS from an external file is allowed. The documentation explicitly states that <link> tags are not allowed. The reason why Google Sites can't load CSS in a linked file, is because link tags are not allowed. You're only choice is to include the CSS in <style> tags.
There is an alternative though. You can create an Apps Script HTML Service application with separate HTML and CSS files, and then put the Apps Script application into your Google Site.
Apps Script HTML Service
If you want to use Css on Google SItes , you can use directly. not to use link.
Related
I have very little demandaware knowledge as my boss who was supposed to train me this year ended up quitting so now I am in the dark. I am attending workshops later this year but until then Google and stackover is my teacher. I am editing a content asset and at the top of the code there is a link to an external CSS sheet. All of the work I have done in the content asset pages, the CSS and html have all been on one page and I have no idea how to get to that external CSS sheet. Any help would be greatly appreciated. This is what the link looks like
<link href="test/fitting/css/test-fitting.css?$staticlink$" rel="stylesheet" type="text/css" />
That is referencing a file in the content library. You can browse those files by going to the Import/Export module within the Content section of Business Manager. Within the Import/Export Mosule is a link to manage content images. Click that. This should open a window that allows you to browse, upload, and delete the files. You can simply upload a file with the same name in the same location to replace the existing file.
I've created a micro page with absolutely no external references, even without any favicon.ico.
Instead I'm using base64 inline images.
The only CSS I'm using is inline of a <div> element.
The following code is not part of my source, so I don't know where it becomes generated.
Where and how does the following code come from?
What is it's meaning? What consequences does it have?
Fulltext for copy&paste:
<style type="text/css" style="display: none !important;">object:not([type]),object[classid$=":D27CDB6E-AE6D-11cf-96B8-444553540000"],object[classid$=":d27cdb6e-ae6d-11cf-96b8-444553540000"],object[codebase*="swflash.cab"],object[data*=".swf"],embed[type="application/x-shockwave-flash"],embed[src*=".swf"],object[type="application/x-shockwave-flash"],object[src*=".swf"],object[codetype="application/x-shockwave-flash"],iframe[type="application/x-shockwave-flash"],object[classid$=":166B1BCA-3F9C-11CF-8075-444553540000"],object[codebase*="sw.cab"],object[data*=".dcr"],embed[type="application/x-director"],embed[src*=".dcr"],object[type="application/x-director"],object[src*=".dcr"],object[classid$=":15B782AF-55D8-11D1-B477-006097098764"],object[codebase*="awswaxf.cab"],object[data*=".aam"],embed[type="application/x-authorware-map"],embed[src*=".aam"],object[type="application/x-authorware-map"],object[src*=".aam"],object[classid*="32C73088-76AE-40F7-AC40-81F62CB2C1DA"],object[type="application/ag-plugin"],object[type="application/x-silverlight"],object[type="application/x-silverlight-2"],object[source*=".xaml"],object[sourceelement*="xaml"],embed[type="application/ag-plugin"],embed[source*=".xaml"]{display: none !important;}</style>
I can think of two possibilities:
1) Added by a browser plugin or extension.
Try running in Incognito mode with all extensions disabled, and if it's due to a plugin or extension the additional content will go away.
2) Added by the web server that is serving the web page
To see if it's #2, load the HTML file in your browser using a local file:// URL and check if it's still there.
Most likely it's related to an Ad-Blocking type of browser plugin that is setting { display: none !important } CSS attribute for all Flash, Shockwave, Silverlight, etc. content on the page.
I've recently started learning to code HTML and CSS by hand for the first time since the mid 90s (last time I tried to build a site, Netscape Communicator Gold 3.0 was out--so bear with me here).
I cannot get my CSS to link up with my HTML. I am using HTML5 conventions and following the code examples in the popular book "Learning Web Design," 4th edition, by Jennifer Robbins. Many of the code examples I see use conventions that are no longer required in HTML 5.0, so my code may be a bit sparse.
I have tried to directly embed the styles in the HTML and they work. However, they do not work when in a CSS sheet. I have tried to load the page in both IE11 and the newest version of Chrome and the page displays in white with default browser settings. My HTML file and my CSS file are in the same directory: c:/RogersReviews. There is an images folder in the directory, c:/RogersReviews/Images. I have linked to an image file in that folder and my code works.
However, I cannot change the background color of my page using a linked CSS style sheet. I have tried to make it red to prove that the link is working. Below is my CSS code followed by my HTML code.
I have used Eric Meyer's browser reset code in the CSS to clear out any browser settings that might be messing things up. I have omitted it for your convenience.
It is probably something minor that I have missed. Thank you in advance for your help.
EDIT: The page seems to be linking just fine when I post it here, but not when I run it from my hard drive by opening the HTML file. I would like to be able to see the page as it would look online, but from my hard drive.
body {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Rogers Reviews: Academic Book Reviews </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<img src="Images/Rogers-Reviews-logo-3.gif" alt="Rogers%20Reviews">
<ul id="menu">
<li>Home</li>
<li>Authors</li>
<li>Subjects</li>
</ul>
</header>
<h1> Welcome </h1>
<p> This site is a collection of academic book reviews, mostly in the humanities and the social sciences. </p>
<p> The purpose of this site is to assist high school, undergraduate, and graduate history students with choosing appropriate secondary sources for their research papers. An emphasis is placed on older works written before 1960.</p>
<p> Back to home </p>
<footer>
<p> © 2014 </p>
<p> About </p>
<p> Contact </p>
</footer>
</body>
</html>
I inserted your code, verbatim, into a JSFiddle, and the background is red, as you wanted.
The code is not the issue, then. Instead, its a problem of the stylesheet loading properly. Try some or all of the following:
Check your stylesheet name, and that it is the same in the directory as it is in your HTML code; make sure stylesheet.css exists properly.
Double-check that the file exists in the right place, which is in the same directory as your index that you are opening.
Make sure the stylesheet is loading. In Chrome, if you right-click -> inspect element and go to the sources tab, you can see all loaded resources, including your CSS. If it's not loading here, it could be that it tries to load from your cache. You can force Chrome to load sites without the cache by opening the inspector again, clicking on the gear menu, and checking "Disable cache (while DevTools is open)', and reloading your site.
Check your local apache/webhost server to make sure that it doesn't have any settings blocking the loading of certain files or types of files. This is assuming you are running one and not just opening the file in Chrome/IE. If that is the case, you should have no problems with the file loading.
Make sure you saved the file. It's silly, but I can personally vouch for the time when I couldn't make my site update, and I forgot to save/update the file I was viewing.
Hello, perhaps it helps to someone:
css files have to be transmitted stating "text/css" as content type (while your html page content is usually "text/html").
It is important to state the right value for transmission, because browsers check it.I had this problem with Delphi, trying to state "DOCTYPE HTML" in a WebBroker application to use HTML5, and the problem has been solved setting it in the variable reponse.contenttype. If you use a web server, I suppose you have to put the file in the right folder for example, or set this attibute in the right place to instruct your server to send the right contenttype.Have a nice day!
Instead of href="stylesheet.css", try href="/stylesheet.css".
I had the same issue and this worked for me.
Simple solution: no changes to you html code.
Procedure:
1) Log into Ubuntu as a root user
2) Go the /var/www directory and right click on the www folder, then click Properties, change the following permission as follow:
view content: anyone
change content: anyone
access content: anyone
3) Restart apache2 server type service apache2 restart
4) Finally, test the webpage
Hope this helps
Just ran into same issue. It was browser cache. Ctrl-F5 helped to fix it.
I assume that you have created your file in NOTEPAD & not used any editor. While saving the css file, the file type has remained as .txt which leads to saving of the file as Text Document type.
Open a new notepad file, copy & paste your CSS code. Save the file in Notepad under "Save As" menu, enter your css file name with.css extension & select "Save as type" as "All Files" documents. After saving, in the explorer the file type should be displayed as Cascading Style Sheet Document.
Hope it solves your problem.
I ran into a similar issue where the css file changes are not reflected in the webpage styling.
Here where the concept of hard-reload helped me. Hard reload can be done by
shift+ctrl+R
This happens when the browser serves a cached CSS file from that of yours.
To invalidate the cache and serve your latest CSS file, you can perform a hard reload on the browser.
Refer this For more info on such problems.
https://friends-with-you.myshopify.com/
I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.
<link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
What am I doing wrong at the above URL, and why isn't the css loading?
thanks!
Can you load your CSS file over both http and https? If so, change your tag to look like this:
<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).
A little more background: http://paulirish.com/2010/the-protocol-relative-url/
Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.
Change your link tag to use a secure URL:
<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
^
The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.
I just checked and pagodabox serves the CSS file just fine over SSL.
In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).
I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.
I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.
Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.
Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As #Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.
the font of the content of my facebook app keeps getting italicized even when i've removed the italics from the css file. if i make minor changes in the css file and upload it to the server, the firebug shows the unedited previous css file and hence, the app keeps showing unformatted content. what exactly is going wrong here?
i made a new css file and copied the contents of the previous css exactly as it was, and i linked it in all the files which require css. but when i upload these files to the server, facebook canvas doesn't show any css at all. i replaced the css filename with the previous one, and it works. why is this?
Actually it looks like facebook is currently experiencing some weird problems with styling. It doesn't cache any new styles, only displays what was previously cached (from yesterday). If you provide a new stylesheet url it will not be able to pull it up (like that url doesn't exist).
During normal conditions what others already suggested should work.
Facebook does like to cache things. Persistently. I don't know why the new file wouldn't have worked, by I can recommend 'spoofing' your css filename with a spurious querystring variable, and incrementing it each time you make an update.
eg
href="my_css_file.css?x=1"
Sounds like the browser is caching your CSS file, which is why even Firebug sees the older version.
There are numerous ways you can prevent the browser from caching your CSS file during development (once in production mode, you probably want it to remain in the cache). The most common technique used by web frameworks like Ruby on Rails is to append a random query string to the URL, like so:
<link rel="stylesheet" type="text/css" href="style.css?96234987" />
...but the trick is that it should be different every time, so the browser thinks it's a different file.
Here are links to a simple trick for PHP, a JSP example, and other possible methods.
According to Include files on facebook developer wiki:
Stylesheet includes are cached automatically by Facebook. Just include a tag like:
<link rel="stylesheet" type="text/css" media="screen"
href="http://yourapp.com/stylesheets/style.css?v=1.0" />
Increment the version number upon each change to your style sheet, as specified above.