I just started working on a Wordpress theme, but it won't reload the stylesheet after I update. I searched throughout here and tried the common remedies, including:
Reload holding ctrl/shift
Reload while Developer Tools is open
Reload twice quickly in a row
Get firefox/firebug
Add the timestamp generator to the end of the href
Install an extension, specifically this one: https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?utm_source=chrome-app-launcher-info-dialog\
It seems like it only reloads every once in a while, and it really impedes my ability to write CSS...
Does anyone here have any ideas to fix this?
Thanks.
edit: I think it may have something to do with my host (it's free). I'm just going to move offline for development, I think.
You can always go into Incognito which does not use any chached data. It also does not save any history information.
To use it you can press Crtl+Shift+N then navigate to the page / website that you want to see.
You can also access Incognito by pressing the ☰ icon in the top right of your chrome window and click on New incognito window:
If your page is still not updating I would make sure that the file is even being saved. Because at this point your issue would not be because of files being cached..
My only other thought is that it could be your CSS itself... Sometimes your CSS is not applied due to an error in your code, another piece of code counteracting it, etc...
So see what is being applied:
press F12
OR
right click somewhere on your page and press Inspect Element.
You should see something like this (except with your code / webpage):
The parts of the "Inspect Element" will be sized slightly different but you can change those around...
Essentially click on the html element that you are trying to change the css on...
You will now see what css elements are being displayed... If they are crossed out, it most likely means that there is some other parent (or just some other property) that is canceling out the css you are adding.
These are just some of the reasons why the CSS may not be working! But I hope this helps!
When working with child theme, make sure you are loading the right css file. Sometimes you load the parent's css file.
Make sure to disable cache plugin in development time.
Related
I have tried all the possibilities but surely somewhere I am mistaking. I am creating a bootstrap website (http://design.logohour.com) site seems ok as well as aligned well in center, but when I am trying to change the screen size lesser than 850px or more less, all the content goes to the left.
I know there is something wrong with CSS but unable to find out since I want all my content in the center without overflow-x ... need an expert opinion.
Everything looks fine on my end!
Your cache is probably outdated. Try these things to see if it solves:
1) Assuming you're using Google Chrome, open an incognito window and view the site.
Why? Incognito mode will allow you to view your site without using cache
2) Refresh your cache using the web inspector.
If you open up the web inspector (Right click and click "Inspect") you unlock a magical way to clear your cache. With the web inspector open, right click the reload button and empty the cache.
Good luck solving the issue!
I was making some changes on the header.php file of my wordpress site, related to the flag icons displayed on the top of the webpage.
After that, I loaded back the page and suddenly it all appeared messed. I undoed all the changes I've previosly done, saved and I don't know why but the page is still messed.
Just so you can see how it should be and how it's actually looking like.
I'm sort of desperate because of it, so any clue in what could be causing this is gonna be extremely helpful.
Thanks!
Sometimes with wordpress it needs a bit of time until it's changing. Also try pressing F5 to force refresh, or clear your cache.
Also, you might forgot to add some styles or other file.
I've created a HTML + PHP simple page with some javascript that provide from google like adsense and google plus button.
The thing is the page is very short. I meant like not much content on it and I'm curious that why when the page is fully loaded like everything appeared and nothing missing, but the bar on google chrome or like firefox is still loading?
I did test removed the javascript for ads and button and it still having the samething
Is this normal? or maybe something wrong in my code that I should look at?
Open the developers tools (Ctrl-Shift-I in Chrome), go to the network tab and load your page, you'll see exactly what component is taking what time.
Most clever add-ons / plugins like google+, Analytics, etc. load when your own content is completely loaded so you might see some action after the page is visually done.
Edit: The developers tools in Chrome can easily be reached from the menu as well...
Check out http://tools.pingdom.com/fpt/
It will let you know what is still loading.
If nothing pops out then your JavaScript is probably in an infinite loop.
I am working on a page and having problem with the Fancybox close action for the Image gallery in the first button at the bottom, the gallery is closed but overaly is still there. Here is the test link
How ever the same settings are working for the second link "Floor Plan".
Secondly I am using a Tiny Scrollbar plugin for the gallery on the page. The thumbs on the left side have blue scroll bar if they are larger in contents. This scroll bar does not appear in Google Chrome, and sometime don't show up even in other browser if the page loads first time, then I have to refresh the page to show it. Any idea about the problem will be greatly helpful.
Thank you!
First off, I noticed you're suing jQuery 1.3, why?
Here's 1.6:
http://jquery.com/
It isn't that much larger, and its an updated library. That may fix your problem.
If that didn't work, then delete the fancybox.js, re-downlod and put it in again, same with css. Make sure the css is called at the end of your css document.
If that doesn't work, I suggest getting rid of your javascript files one by one until there is only fnaycbo xleft, it's obviously some conflicting code at this point, so you'll have to troubleshoot by trial and error, going through one by one to findout what script is preventing close. I don't have access to your server, so I can't test it.
It's most likely in main.js, so remove that first, and see if fancybox works then!
ETA: Scrollbar fix.
The problem is something is adding a disabled selector, it's javascript. But you could change up tinyscrollbar.js to fix it, or you could go to your css, find the line:
'#scrollbar1 .disable {display:none}
and remove that line entirley, it's causing your scrollbar not to appear in browsers the javascript is (for some reason) disabling in.
In my case I solved with the next modification:
$(document).bind("load", function() { $('#myTinyScrollbar').tinyscrollbar(); });
Well you have an error in console:
d.onClosed is not a function
It could be because:
Your using an old version of jQuery possibly not supported by Fancybox. Try updating to 1.6, though beware legacy plugins or code that could break due to the steep upgrade.
A compression issue. It's possible i.e. the Google Closure could of removed what it saw as "unneeded" code and therefore broke the functionality. Try using uncompressed Fancybox to see if it fixes it, if it does then you know this the issue, rather than your jQuery version.
I have wordpress installed on my system. I am using twentyten theme, in the theme directory there is style.css file. In that file I tried
body {
background-color: red;
}
but nothing happens, no matter what change in style.css it does not reflects in browser.
Please help.
Have you cleared your browser's cache? Often the browser will cache the css files to be more efficient, so any changes you make to it require you to clear the cache.
If you're using a windows machine: ctrl + shift + del should bring up the clear cache dialog
Edit: it appears that your css was in the #media print section of the stylesheet - which only applies to printed material
The best way to figure this stuff out is to install Firebug in Firefox or use the built-in Inspector in Chrome.
Right-click on the page, do 'Inspect Element' and check what the Inspector tells you. Probably the background-color you're setting is being overruled by another style rule (Inspector will tell you this) or there are other elements with another background-color which are placed on top of the body, thus hiding the red background-color.
Either way, doing an 'Inspect Element' will make this clear. We can only guess from here.
First of all ensure that you're editing the right style sheet. For example try to erase all the styling code inside this file and refresh your website. If you loose your style then you're in the right place.
Second try to use Firebug Addon it will help you to inspect the html Element then you can show the corresponding CSS for this element. you can change whatever you want and see the effects directly on your page then you can write these changes to the style sheet.
hope it helps you.
Maybe that style is overwritten by another background attribute on the body a few lines below (browser will always render the last css attributes of elements). Something you can check easily with firebug.
If you have plugins, disable them just to be sure.
Other then that and the suggestions already made I'm not entirely sure what could cause this