I am using the same style sheet for 2 pages (index.html & contact.html). All styling has been applied to index.html. Now I have copied and pasted the same code into contact.html, but have found that the new CSS styling I have tried to use will not apply to this page. The pathfile to the style.css sheet has not been changed. What I don't understand is why some of the styling is being applied from the other page but when trying to add new styling it does not?
Have you tried clearing your browser cache or going incognito/private browsing
Are you applying new styles using classes or ids? Id is unique, while classes are reusable. Also if you have inline styling it will override the stylesheet. Can you post your code as an example?
Well there can be a couple of reasons for this:
Make sure that your stylesheet is properly loading. I don't know if you are using in page styling or an external stylesheet but make sure that it actually exists there.
How can you do that? When you open the contact.html page in the browser, hit Ctrl + U if you are using windows or Command + U if you are using Mac. If it is an internal styling, you will be able to see the actual code there. If you are using an external stylesheet make sure that the <link> tag exists in the page. If it exists the right click on it and select Open file in a new tab. If you see can see the code in the next tab. It means that your styles are properly loading.
Make sure that your elements in the html page and stylesheet file have the same appropriate names. For example # of id's and . for classes.
If everything is okay then it can be a cache issue. Since browsers cache the static assets, you should consider refreshing the cache by Hard Reloading the page. How can you do that? It's simple, just hit Ctrl + Shift + R if you are using windows or Command + Shift + R if you are using Mac. If these keys don't work, just click and hold the reload button on the browser until it shows a dropdown. Then simply select Hard Reload.
In case it doesn't work, then send us a link to your webpage. I'm here to help you. Just let me now :-)
Related
I'm working on a complicated site that has a lot of css files and js files that load on every page. I'm working on a single css using Chrome's developer tools. Once the css is mostly correct in developer tools, (Element tab, Styles side bar), the css is copied to a local css file and then uploaded to the web server. Since only a single css file has been modified it would be faster to reload a single css file instead of hard refreshing and reloading the entire site including images, js, and css, etc.
The site has an option to minify the css file and combine it with the other css files, creating one single very large css file. That option is turned off while in development mode. Adding a version number to the css file name isn't the trick I'm looking for.
Is it possible in Chrome Developer tools to click on a source file and refresh only that file?
This is a bit of a hack, but I think it'll work for your scenario.
When I initially load an example page, you can see three CSS requests:
I want to refresh the devsite-googler-buttons.css file, so I find it in my DOM Tree:
(Command+F on Mac or Control+F on Windows / Linux opens up that search panel at the bottom of the Elements panel... makes it easier to find stuff in a big DOM)
Right-click, select Edit as HTML, and then append a random query string to the end of the link:
And in the Network panel, you can see that the file was re-downloaded:
See also: Konrad's answer provides some handy code for automating this via a Snippet.
It might be handy, in your situation, to automate it a bit:
function reloadCSS() {
const links = document.getElementsByTagName('link');
Array.from(links)
.filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
.forEach(link => {
const url = new URL(link.href, location.href);
url.searchParams.set('forceReload', Date.now());
link.href = url.href;
});
}
reloadCSS();
What this function does is it forces all CSS files to be reloaded by appending current time to their URLs.
You can modify it to target a specific file. You can run it from console, via DevTools 'snippets' functionality or make it into an extension.
If you don't mind refreshing the page, but don't want to re-download all resources, try the following.
Open the css file in a new tab. (You can right click css files from the Chrome developer tools and choose "open in new tab");
Hard-refresh this tab (ctrl/cmd + f5);
Soft-refresh the page (f5 or ctrl/cms + r).
According to me only Live editing is the only possible way what you are looking for I suppose. There is no way to refresh a single css file.
After I preview my website, the CSS code suddenly disappear and was saved. Does anyone know how to recover it?
I still have the website correctly preview in Chrome. Is there any way that I could get the code from there?
I was almost ending the website, so another 3 weeks battling.
View the source code with Ctrl + U, then click external stylesheet link, copy the code and paste it in a new stylesheet.
NOTE: Don't refresh before doing this.
If you have it on a separate css file, you should be able to go into Chrome developer tools and select Sources. This will show you the attached css files. You can then copy and paste it.
I have a website and I want hide the CSS and script files address from source, when user clicked right and press "view source", CSS and script files address were changed. (as well as in firebug).
Like google! please go to google.com and press right click, then "Inspect Element With Firebug", see Style in right box. You will see "www.google.com #2 (line 9)" for example! and you won't see any address for CSS files!
How is this possible?
If you meant viewing the page source and not seeing any style links there, that's because Google uses some JavaScript framework, perhaps GWT: https://developers.google.com/web-toolkit/ . You can see a lot of JavaScript gibberish on the page, right? That JavaScript creates all the style elements etc. in the DOM. And you indeed can see the resulting style definitions when inspecting the elements, be it Firefox or Chrome.
You can do the same. But that design is quite different from classic HTML + JavaScript.
But others are right, you can't hide anything that way, and you shouldnt. It's security by obscurity at best.
As far as I know, you cant prevent users from seeing these files. They can see these files as well as can also download them if they want.
All you can do is to minify these files using some kind of minifier like JS Minifier for JavaScript code.
You can place your css in inline tags. Simply copy/paste the contents into your .html document in a ... block. Then you won't have an external .css file.
The advantage is that you save an http hit. The disadvantage is that you have to download the full css every time because you can't cache it.
You can also minify your css which will obfuscate it to a certain extent. But you can never really hide css from someone who downloads it.
I am developing a feature where I want to increase the size(width and height) of Facebook Like button which is getting rendere on my page.
I have tried overidding the css but it is not working as my css is loading very late.
Help required.
Are you sure you're using the correct overrides in your CSS? If I'm not mistaken, it doesn't matter when the CSS is loaded, just that it is loaded.
Be sure to check your CSS includes in the header file to make sure you're using the latest version. Also double check the classes or ids you need to override.
Perhaps you could post the code containing the like button you're trying to manipulate. If you're loading it in via Javascript you can use Firebug or other Web Inspectors to find out the actual HTML that gets inserted.
First of all, the css MUST be interpreted by the browser before the html element it refers to is loaded...
Second, the reason you can't select the button through CSS directly, is because it is rendered inside an iFrame that is controlled by the Facebook framework (you can check this out with firebug or any other inspector).
I'm not sure if it's feasible, but you have two possible ways to do it:
use javascript and the DOM to access inside that iFrame, select the button and style it.
create a button yourself, and give it the same href as the one generated originally, thus losing the fan-counter capabilities and whatever else is part of their framework
I'm confused by some behavior in Firebug.
I'm trying to update my CSS and I made changes to the actual CSS file and saved them.
If I update a directive on an existing selector, those changes will be rendered when I reload the page.
However, if I add a new class ( e.g. boxQuestion ), and create a new selector, it won't render at all.
The new selector doesn't seem to be displaying at all. Neither in the rendered HTML or in what Firebug is displaying.
I have tried clearing the cache and restarting my development server, but it still won't add the new selectors.
What am I doing wrong?
I'm developing in Django and using runserver.
Things to try
double clicking the browser refresh button to get the new css
restarting the development server
quit Firebug and restart the browser
see if your development server is server the correct CSS file and selectors
http://localhost:8000/media/liquid.css
The Most Import thing is to:
5. Validate your CSS with the CSS validator:
http://jigsaw.w3.org/css-validator/
I had some comments in the CSS file immediately before the class selector. I had just used # to annotate the comments. This is incorrect syntax for CSS
When I surrounded the comments with /* #comment */ the problem went away.
possibly your CSS is incorrect. Do your changes appear in source view?