I'm working on a wordpress website on my local machine (vagrant homestead). It works perfectly, all the styling is loaded.
But when I place this online, the theme doesn't work correctly. Console is not showing errors (only warnings). This is the online version.
What could be the problem here?
With the information provided, I would say the stylesheet directory is incorrect or perhaps being overridden by something else. The order of your stylesheets can affect this as well. If this doesn't help, upload a screenshot of all your stylesheets you are including so we can find out which one isn't loading and why.
Related
I've built a website in HTML, CSS, Bootstrap 4 etc. etc. through Atom. Every time I make changes and upload the new version to the hosting platform (HostPresto in my case) browsers load the previous (presumably cached) version. I know browsers use the cached data for loading and data efficiency etc. However, my aim is to force any browser to reload from scratch, ONLY if some part of the website has changed. How do I do this?
I've seen some answers on stackoverflow to similar queries over the years, where people have suggested using code in the website header to effectively wipe the cookies and cached data each time it is loaded. I don't want to do this all the time, since more often than not, no changes will be made and my website will be less efficient.
My hosting provider has said that it would help if I upload ALL website files each time only a bit has changed. I tried this today and it doesn't work - I still have to clear the cache for it to load properly.
Can anyone help me work out what to do, to get any browser to identify when changes have been made to my site, so that it will load them automatically? Thanks!
I've cracked my own issue, so to speak, so I thought I'd post the answer here, in-case it helps others.
Basically, I noticed that the HTML files would always reflect the latest changes. However, it was the CSS files that wouldn't. The CSS files were the culprits for loading from the browser cache.
To correct this, I have started adding versioning to my CSS files to force the browser to load the new CSS file, ONLY when the CSS is updated. it works like this:
The name of the CSS file isn't changed. That is, and always was styles.css. You might call it something else.
The old call I would make for my CSS file, in the head of the HTML file, was: <link rel="stylesheet" href="css/styles.css">.
The new call is: <link rel="stylesheet" href="css/styles.css?version=1.0">
All I have done is add ?version=1.0 to the end of the CSS file name in the HTML header. If the version number changes, the browser will load the newest version. If the version number is the same, it won't load the newest one.
I imagine this would be quite straightforward for some but since I have managed to sort it myself, I thought it might be useful to share with others. There's now no need for adding hard code into the HTML header that causes efficiency-losing reloads from scratch unnecessarily!
Hi I am an android developer and haven't much knowledge about web, I purchased this App and it has a web back-end, it working pretty fine when I run it local like this,
but when I run this via hosting , I am getting this. link
After going through some search I found that these are some sort of Angular tags, as I already have mentioned that I haven't knowledge about this, How do I solve this?
It's happening due to hosting or path resolution issues.
None of the JavaScript files are getting loaded due to which the page is breaking and hence you are seeing raw code.
Fixing the proper loading of JS should fix the page. You might need to tweak it further in case relative path's are not loaded correctly.
Overall, it is not a code level issue yet.
Below is the screenshot of the hosted link you shared.
For some reason, when I link to CSS in SharePoint, it renders incorrectly. However, when I place the CSS directly in the page or link to it raw through BitBucket, GitHub, or via CDN, it renders the page correctly. Can SharePoint not be used to host Intranet design files like js and css?
Turns out, I needed to host it from the Style Library, where no meta gets attached. Now everything is working perfectly! Thanks for everyone’s help! Hopefully if someone else comes along with the same issue, they’ll see how much thought we went through to troubleshoot it! Appreciate all the effort, everyone! :D
I'd like to make a disclaimer that I'm brand new to both CSS and Wordpress.
I've been using "Google Inspect" to edit the CSS of my Wordpress site. Everything looks like it is working well as I'm making the changes but the second I refresh the page it reverts it back to it's original formatting.
I am using this resource but the solution he came up with still doesn't seem to work for me.
Right now I am:
Saving my CSS
Making changes to the CSS
Saving my CSS again
Refreshing the page with no luck...
I'm not sure if there is any other information that I can provide. Let me know if there is and I'll update this post.
Any help would be greatly appreciated.
after reloading your change CSS code not working because it's either not saving to your CSS file or you may have to clear your browser data
Try viewing your page in another browser or incognito mode. This will force your browser to refrain from using any pre-cached versions.
Additionally, I would highly recommend using child themes when modifying your wordpress CSS. This will prevent your stylesheets from being overwritten when wordpress updates.
ok, maybe I'm wrong here, but it sounds to me like you are just not saving the stylesheet (which holds all the CSS of your site) correctly.
Perhaps I can summarize the technique from the other post quickly:
Open the browser element inspector and make your css edits.
Navigate to the css style sheet in the inspector and save the file
to your computer as style.css in your theme folder
Refresh the page and hope to see the changes.
This is making some assumptions I'm not sure are happening in your case:
This will only work if you are doing this in a local development
environment OR you are FTP'ing this style.css file to your server.
You aren't making any changes to currently unstyled elements. The
web inspector will add these as inline styles and they won't be in
said stylesheet.
I don't mean any disrespect by this whatsoever, but you will save yourself a ton of pain and suffering by learning how to do this right the first time.
Download:
Atom - Code editor
Desktop Server - The free version
Learn how to use those to create a local development environment and then use Atom to change your CSS.
I had a website hacked a while back and I've been cleaning out the server, changing / updating things, changing passwords etc and one of the things i cant figure out is, why when this website (http://prestigesolar.net/) is viewed on a mobile, the site loads but no style or images come through.
I've checked the header areas of the site for possible mobile stylesheets, .htaccess files, css files themselves for possible #meta screen code or #import etc....hoping id find maybe a bad/hacked path or...or anything to give me a clue, but overall I've mostly found nothing or corrected/removed weird paths etc.
After all this, the site started behaving semi normal but then when viewing the site on a mobile, i would get redirected to a porn site. I kept looking and found other .htaccess files
that when i put onto my system to edit gave me massive trojan warnings etc. I've since removed them all and placed a normal lean one.
Now the site itself is fixed (at least for now) but, when viewing the site on a mobile, it now displays only text.
As far as the website is concerned, its a wordpress based website, standard win server. normal plugins etc and is based on the WP 2010 default theme.
Any ideas as to other things i can look at to correct this issue?
Thanks in advanced.
In the <head> section when you call CSS try instead media="all" to put media="screen".