Why is my main.css not updated ?
So far I have changed main.css to style.css following this advice:
Jekyll site works locally but not on Github Pages
As you can see I kept style.css in /css/ directory, as guidelines from different sources conflict each other I put it back to default.
https://github.com/bomengeduld/boilerplate/blob/master/css/style.css
I have tried running from master branch & gh-pages branch. Maybe I made a mistake here? Since it's now running from master, as I am building from master.
As an alternative I tryed using LIQUID without significant result
<link rel="stylesheet" href="{{ site.baseurl }}/style.css">
I put it back to default, but moved custom css above bootstrap core css
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ site.description }}">
<meta name="author" content="{{ site.author }}">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
Thanks to all the advice here on stackoverflow I have updated my config.yml file to the needs of GITHUBpages
url: https://bomengeduld.github.io/boilerplate/
baseurl: /boilerplate/
port: 4000
markdown: kramdown
permalink: pretty
I have followed several guidelines on stackoverflow without any succes.
As I am new to developing, I might miss something very simple.
EDIT 1:
I have added the css to a <style> tag in <head>. It solved everything except for my background image. Yet, this is not a long term solution.
I restarted this project.
I started a new repo, cloned it and downloaded html5 boilerplate & updating with bootstrap to the rootfile.
Then I copied most of existing html code from 1st project into the new project.
Because I needed a scrolling navbar. I restarted my project for the second time from https://github.com/BlackrockDigital/startbootstrap-scrolling-nav
I cloned it, and copied all my existing code.
In the meanwhile I was commiting every little step I took, to be sure the results on jekyll, where the same as on github-pages.
So far it worked like a charm.
There are some issues when adding images for instance. On jekyll localhost, it accepts any type of file.
On github pages You sometimes have to change png to jpg.
Also never use an underscore _ in the title of your files like photo_01.png
If you put a img tag, do it like this
<img class="img-responsive" alt="logo" src="img/mmlogo2.png">
To make some picture appear on mobile device I had to use <style> in <head>
Because it just wouldnt work on CSS
Related
I am testing out the bootstrap modal function using the bootstrap official documentation. I have copied the exact code from their website. Things I have tested:
Checking in the browser if js,jquery and css files src location is correct
Made a brand new file and only imported things that are needed for modal to work to make sure my own .css or js files are not interfering with this.
Tested this on chrome, ie and firefox inc. private browsing - Still same. It just displays the button link and when you click on it it doesn't popup anything.
Checking the console for any error logs. No errors.
I am kind of mind-blown what could cause this? Is there possible that some kind of server-side (using xampp v3.2.2 and running on port :8080) could cause this not to work?
- Since stackoverflow required some sort of code in here I included the head
Here is my full code: http://jsfiddle.net/bLajz5ud/
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="css/bootstrap.css">
<title></title>
</head>
make sure that you have an active internet connection. Jquery is included using a CDN URL
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
if you don't have active internet connection, no jquery code would run
I have a simple html page using font awesome css. Can anyone see why my font awesome check mark is not displaying, I cannot get the check mark to display and I cannot seem to figure out why.
I am using the .min.css link in my <Head> as such:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LoopLAB Theme</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
When I want to inject it into a <i> element in the DOM, I simply use this:
<i class="fa fa-check"></i>
As you can see above, the check mark does not display. Do you see anything obvious that I am doing wrong? This seems like a beginner's error but I can't find the problem.
Check your CSS. There are a few ways you can do that!
Simply check if font-awesome.min.css is indeed under your CSS folder. If it is, check your folder structure. Can your HTML access this folder using css/font-awesome.min.css? The CSS folder must be a child from the folder you are currently storing your HTML file. Finally, are you using the latest version of font-awesome-min.css? This specific icon might not be included in your CSS file if it's an older version.
Inspect your site using your favorite browser inspect tool and locate your CSS file on inside the inspector. Clicking on it should open your CSS code. The code should be minified. If there is nothing inside of it or some kind of error your website is failing to find your file on your server or computer.
Plus you can also add from a CDN, for example, https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css and import directly to your code.
I'm having quite the weird issue. My Django (1.10) app is functioning just fine. I initially set it up using bootstrap with my own style.css file to customize the rest of it. However, since then I've had some issues and lost my git commits, so I can only go back to about 10 days ago when it was stable in production. I thought all was well until I tried to style some new pages and change some existing css, and then I found I couldn't.
My app seems to have style.css files all over the place. There seems to be 4 total, and none of them do anything. I've tried deleting everything from each one individually, and then deleting everything from all of them at once, but no matter what my site stays with its styling. I've cleared the cache from my browser, used a different browser, used incognito mode, etc. No matter what, the styles persist. I initially used collectstatic. Now, I've tried to do it again, and I've also tried collectstatic --clear, but both have the same effect: my root static folder gets an entire copy of my app put in it and I have to delete the changes with git.
Here's a link to the github page for it. And I'll post some relevent snippets below. Please let me know if any other information will make it easier to help, and I will be happy to provide it.
settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
Top of my base.html file which every other template derives from (note the last two lines):
<!DOCTYPE html>
<html lang="en" id="divTheme" class="light-theme">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>OP Translations</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'translations/style.css' %}" />
When I run collectstatic, it tells me the files will be collected in the top level static folder, but that is one of the files that does nothing when I change it.
I'm not really sure what else to post, so please let me know. All the existing posts on this question say its a browser cache issue, but for some reason that doesn't work here. I must have something else wrong.
I can't write a comment to ask something but i think that you edit the wrong style.css file.
I take a look in your Github project and found out that the style.css in https://github.com/technicallyrice27/translation-site/tree/master/translations/static/translations was not updated since 11 days.
but this is the file you need to edit when using the collectstatic command.
Hope this help you.
Doing a website for a client and I merely changed the name of the css file in the folder and in the references on each page. And suddenly all my styling is gone. I've checked multiple times for spelling errors and it's all correct and I do believe I have referenced it correctly as it was working previously under a different name. My Question is How can the changing of the css file suddenly stop it working if it's still referenced correctly? Could it be that bootstrap is overriding it somehow?
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script><!--Reference Bootstraop.min before plugins.js but after jquery.js. We alterbootstrap javascript with plugins.js -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</head>
Here is the <head> for my index html file.
The problem only occurred when I changed the file names but I can't leave it as "TestLayout" when it is a completed project. Any help is appreciated and I can supply what I can to help find the solution. Thanks in advance.
First off, a small tip: Load your custom CSS-file AFTER the bootstrap.css file. This way you can ensure that your styles are easily overriding the defaults of Bootstrap, so you don't have to bash in !important in order to change something.
And for your question, have you accidentally removed css/ from the beginning of your style.css? Since all the other CSS styles you have linked are under the CSS-folder.
Double check that, otherwise it should work, the name is valid.
If the path to your CSS file is still correct (and you haven't inadvertently removed the folder from the file path as per ProDexorite's answer) then you might need to completely refresh your browser.
You can do this with CTRL+F5 or to be completely sure you can empty your browser cache, although I usually find this isn't necessary.
ProDexorite is also correct regarding the CSS files - it's called Cascading Style Script which means any styles in the files you load last will overwrite the files loaded before. Therefore any custom CSS (main.css and style.css for example) should be loaded AFTER the Bootstrap or any other library css files. This just means you need to reference them in the right order in your page that's all.
I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied.
This is even happening on subsequent page loads where everything should be cached - every time the page loads I see the unstyled content for a split-second, then everything settles in.
It's also worth noting (perhaps?) that the page is using #font-face to pull some Google fonts. They are stored in a separate stylesheet being pulled after the main responsive stylesheets and media queries.
I've tried a few different things, to no effect:
Rearranging order of CSS stylesheet links
Removing link to stylesheets with #font-face
Disabling Firebug? (Read on here somewhere...)
One other thing that may be worth mentioning is that I used quite a lot of Element Type CSS selectors in the page's CSS. Is it possible that this is slowing down the rendering process?
This seems unlikely as there is no problem immediately re-rendering the page upon changing the dimensions of the window - the responsive stuff renders fine immediately.
So this leads me to believe that there is some issue with how the CSS is being loaded.
Here is my HEAD code:
<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>
<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" />
<link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" />
<!-- custom fonts stylesheet -->
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<!-- favicon -->
<link rel="shortcut icon" href="resources/images/ui/favicon.ico">
<!--[if lt IE 9]>
<link rel="stylesheet" href="resources/css/960+.css" type="text/css"/>
<![endif]-->
</head>
WTF is going wrong with Firefox? It's driving me nuts!
If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded:
<body>
<script>0</script>
<!-- rest of the code -->
</body>
There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
I had the same problem with Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. showing in the console, and a visible flash of unstyled content upon page refresh, withouth (F5) or with clearing the cache (Ctrl + F5). Having the developer tools open does not made a difference either.
What helped me was declaring a variable in a script just before the </head> tag ended, so basically after all the <link> tags.
It's important to note, that an empty script (or with just a comment) or any random javaScript would not help, but declaring a variable worked.
<head>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/other.css" />
<script>
/*to prevent Firefox FOUC, this must be here*/
let FF_FOUC_FIX;
</script>
</head>
There was no need to rearrange links or not use imports within css or js files.
Please note that the issue will no longer be visible (FOUC is visibly gone), but the console might still show the same warning.
I was experiencing this error. A colleague has said that it's caused by the attribute, autofocus being added to a form field.
By removing this attribute and using JavaScript to set the focus the brief flash of unstyled content stops happening.
For what it's worth, I had this same problem and found that it was being caused by having poorly formatted <html>...</html> tags.
To be precise, in my code I accidentally closed the HTML tag too early, like this:
<!DOCTYPE html>
<html lang="en"></html>
<head>
<title>My title</title>
The code provided by the original poster is missing the opening <html> so I suspect that's probably what is happening there.
Filament Group share they way they load their fonts in detail,
http://www.filamentgroup.com/lab/font-loading.html
which is a nice modern approach to #font-face loading
Smashing magazine also review there website performance and came up with a different solution that stores the caches a base64 copy of the font in local storage. This solution may require a different licence for you font.
A gist can be found at:
https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
The original article detailing their decision can be fount at:
http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/#webfonts
Additional recommendation
The head of your document contains far to many individual stylesheets, all these css files should be combined into a single file, minified and gziped. You may have a second link for your fonts placed before you main stylesheet.
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />
I've had the same issue. In my case removing #import rule in the CSS file and linking all the CSS files in the HTML resolved it.
In my case the reason of FOUC in FF was the presence of iframe on page.
If I removing iframe from markup then FOUC disappears.
But I need iframe for my own hacking reasons so I changed this
<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>
into this
<script>
document.addEventListener('DOMContentLoaded', ()=>{
let nBody = document.querySelector('body')
let nIframe = document.createElement('iframe');
nIframe.setAttribute('name', "hidden-iframe");
nIframe.style.display = 'none';
nIframe.style.position = 'absolute';
nBody.appendChild(nIframe);
});
</script>
I've added this inline JS right in template just for readability: in my case this code runs once per page.
I know that it's dirty hack, so you can add this code in separated JS-file.
The problem was in Firefox Quantum v65.
I had the same problem (but also in chrome). Even if many of the existing answers provide clues to the reason for FOUC I wanted to present my problem and its solution.
As I said, I had FOUC in a fairly large project and already had the suspicion of a racecondition in some form.
In the project SASS is used and via a "bootstrap" file for the css a fontawesome free package was added via import.
#import "#fortawesome/fontawesome-free/css/all.css";
This import has increased the total size of the css file by a lot, which caused the file to take a long time to load, and the browser went and already loaded the following javascript.
The JS that was then executed forced the rendering of its content and thus created the FOUC.
So the solution in my case was to remove the big fontawesome package and insert the icons I used from it (~10) via an Icomoon custom font. Not only did this solve the FOUC but it also had the nice side effect that the delivered CSS files are much smaller.