Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm setting up a uscreen website, but have problems adjusting the template font colors with css. I'm trying to change the color of the text "Unohditko salasanasi?" on this page: https://rawinto.uscreen.io/sign_in
This is the CSS I have added (copied from dev tools local changes):
.variant-text.color-primary[data-v-17fd35e2] {
color: #1a202c !important;
}
I must be doing it wrong - new to css. Help please?
The CSS code was correct, I got that confirmed. Should someone else stumble on this same problem in the future with Uscreen, I will paste the instructions from uscreen tech support here:
"When customizing your site using CSS, please make sure to create a backup and add your CSS inside the of the theme.liquid file, the Common Pages CSS or the Head Code Snippet using as well. It might be dangerous to edit the theme CSS as that is a minified CSS file and could break other parts of the site."
CSS not getting reflected as browser it getting that file from cache.
You can solve this issue in 2 way.
Disable the Cache using dev tool.
Try Empty cache and Hard Reload.
Disable Cache in your browser and refresh. it should work
try deleting your cache and run page again
or open page in private window
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 months ago.
Improve this question
When I'm working on a website, I check the changes on my browser (Google Chrome), and since usually the browser doesn't register the changes I make into the CSS file, I usually just work into an incognito window to avoid the hassle of deleting the cache manually. The downside is that I have to close it and open it often, and I have to log again in the app I'm working on every single time.
This is relatively quickly but it adds up over time when done hundreds of times.
There has to be a better way. What do most programers do?
On the network tab of the developer tool in google chrome, you should be able to disable cache (the highlighted box). The setting will be saved and automatically applied every time you use google chrome.
One way to get the browser to reload external css files, is to 'trick' the browser into interpretting the link to the file as having changed. This is achieved by adding a query string to the reference to the file in the html head and modifying it each time you want to reload.
<link rel="stylesheet" href="path/to/styles.css?v1">
will always load styles.css regardless of whatever follows the '?' but the browser parses the href attribute as having changed.
You just change the query string and save the html file each time.
I actually use a plugin that clears the cache from the site i am currently on when i hit the F9 button.
At least on Firefox, the "clear cache" on the network tab doesn't always seem to work for me
If you dont mind reloading cache for your site only, I often press ctrl+f5 (or for mac users, cmd+shift+r), which refreshes the page, and cache on the specific page youre on.
Is it possible to style a chrome extension using some sort of custom stylesheet, without having to edit the extension?
I have tried using CSS editor extensions, such as StyleBot, and they do not work.
This question is the exact same as mine, but the only answer provided is no longer applicable, as Chrome 33 removed custom.css support, and as far as I can tell from reading the the Chromium issue about it, it hasn't been added back in.
So, is there currently a way to do this in Chrome?
Thanks!
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
Okay I need help. I have broken my head back and forth and I cant solve the issue.
I created my comments.php file in my theme it contains the following:
<?php wp_list_comments(); ?>
<br />
<br />
<?php comment_form(); ?>
When I call for it everything works fine. My issue is when I click in the textarea to leave a comment it triggers my page and the whole page goes blank. Not sure what is causing this? Any suggestions??
You can check it our here: http://labpixls.com/nulla-sagittis-convallis-arcu-9/
You haven't provided enough information for a comprehensive answer but here are some suggestions for you, may be it can help.
First of all, turn on Wordpress Debugging by changing 'WP_DEBUG' option from false to true in wp-config.php, it will display errors encountered on page
Secondly, i think it would be some sort of javascript conflict issue. Try loading site without extra .js files like if you are using some plugins, try deactivating them and check if it helps because it seems to me a js issue that triggers that blank page
Once again, your question didn't provide enough information, so please try these & debug as well. Once you do debugging, post those details & may be i can help more.
I hope it helps -
Interesting bug! It appears that something is actually deleting the entire <body> element onclick. It's not tied to the comment form because the same issue occurs when you click the Category dropdown on the right and some other places on the page. It's definitely an issue with FancyBox because, if you set event listeners for onClick and mousedown, you can get it to spit out a Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. before it deletes everything.
I can track it back to this line plugins.js:3155:
if (F.open(what, options) !== false) {
e.preventDefault();
}
From here, however, I'm unsure. My recommendation would be to make sure that you're using the latest version of FancyBox, see if they have any similar reported issues, and try and find a replacement if all else fails.
Hope that was helpful.
Edit I don't know what changed, but I'm not able to reproduce the error now. If you fixed it, please let us know what you did.
Okay everyone. I have finally track down the issue. I was using .single as my class on my anchor tag which held the image path to the full size image. I overlooked that wordpress creates a "single" class in the body. So that was causing the issue. When you would click anywhere in the body it would trigger fancybox. Solution rename my class to lrgimg
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
Closed 9 years ago.
Improve this question
When coding my website, I save HTML and CSS docs then refresh my browser to see the changes. However when I refresh the HTML changes are seen but the CSS changes aren't. Instead what I would have to do is close the window and reopen it again to see my CSS changes.
Any ideas why I cant just refresh and see the CSS changes instead of closing the window and reopening?
Try a "hard" refresh of your browser...
http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache
The idea is to bypass your browser's cache. Different browsers handle this differently, and this wiki article has a nice walk-through for each major browser on how to do this.
Alternatively, you could clear your browser's cache, which is also covered by the wiki article.
I think it's the cache problem.
How to locate the problem
If you are using Chrome or Firefox or Safari, just right click on the page and choose inspect element, and choose network tab.
Now refresh your page as usual, and you'll see all http request like this:
If the css file status is 304, means browser ask the server the css file, and server says: "no, you don't need to ask me, I gave you the css file before, it has not changed."
If the css file status is 200, but the size is from cache, it means the browser do not even ask the server for the file, the browser think he has the newest file.
I think you are in the second condition(200 from cache).
How to solve this:
you can always clear the browser cache to see the changes. Or you can disable browser cache for debugging purpose.
But you can't always tell your visitors to clear the cache, so the second method:
if you are using PHP or whatever as server language, append a query string to the css file name:
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=time()?>" />
99% of the time, this will work.
if it's a static html page, you can change the css query string manually(or even the css file name, if you like).
Depending on the browser, it might be a caching problem.
There may be a setting in your browser that is preventing the Cache from updating.
Have you tried to reset your browser to defaults?
The reason I ask, is Firefox and Chrome handle this way differently.
If you clear the cache+cookies in Firefox, it might not take effect until you close ALL Browser windows.
Chrome will refresh the cache with each individual tab.
I would suggest maybe re-installing your browser because this definitely appears to be a local issue, but not affiliated with the css itself.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm a web developer/designer, and I need my code-illiterate clients to be able to easily mess with the colors of particular elements, save these CSS changes, and send them to me. I'll be guiding them over the phone, but I still need it to be easier than expecting them to locate CSS selectors in a theme sheet, and write hex codes.
I need an in-browser inspector that can allow a code-illiterate individual to:
Easily manipulate colors on a web page's elements, with a GUI color-picker.
(+) Chrome does this perfectly. It's exactly what I want.
(-) Firefox's otherwise gorgeous inspector seems not to have this basic capability.
Save the affected stylesheet, so they can send it to me.
(?) Firefox's Style Editor makes saving sheets easy, however changes to inspected elements - strangely - do not seem to be applied.
(-) Chrome may supposedly be able to do this, deep within the Sources panel, but it seems you need to be a hacker to figure it out, because I'm the code-literate one, and I haven't yet figured it out.
I find the existence of this conundrum very baffling -- why have browser vendors bothered making such a rich web-page editing suite, where one can manipulate CSS, but not include a basic "save changes" feature? Am I missing something?
Edit 01:
I have found, in Chrome, that one can freely manipulate an element's CSS with the inspector, then click on the CSS sheet associated with each rule (in the top-right corner of the rule) to take you to the Modified CSS Sheet in the Sources tab. This is what I want to save.
From here, one can right-click anywhere in this modified source code, and then Save-As -- but strangely, unfortunately, and unintuitively, Chrome saves the wrong source code. It saves the original, unmodified source code -- not the modified source code you had right-click save-as'd. Very frustrating, and I'm currently trying to find a way around this bug. I'm so close!
Edit 02:
Okay, I've figured it out. When you save a file in Chrome's Sources tab, you're not just saving that file -- you're actually setting Chrome to constantly auto-save that file upon every change you make to it.
This is actually kind of cool, but very misleading.
So, after you save a CSS file, Every change you make to an element's CSS in the inspector, will auto-save to that file. This persists even if you restart the browser.
Confusion arose, because when you have a file marked for auto-saving, and you then Save-As a modified file, Chrome weirdly writes the original file, not the one you right-clicked. As soon as you make any change after that, when Chrome will auto-write every current modification to that file. I regard this to be a bug in Chrome.
Lesson be learned, First, Save-As the file. Second, make your changes.
Presto, your modified CSS theme awaits you on your hard disk.
To be clear, if you Save, then make changes, then save again -- Chrome will have saved the Original Source, not your Modified Source. This makes the order of things important.
I do not know of a way to see a list of files currently marked for auto-saving, or how to unmark them.
How to use Chrome to play with CSS and Save it
Determine which Stylesheet you will make changes to. Be sure to only affect rules associated with this stylesheet.
Navigate to this stylesheet in the Sources panel of the Developer Tools, Right-click it, and Save-As this file to your computer. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.
Freely make changes to CSS Rules associated with your chosen-and-saved stylesheet. Chrome will automatically save each change to the stylesheet you saved on your computer.
Keep in mind, however, that you must do things in this order. If you save the stylesheet, then make your CSS changes, then save again, Chrome will oddly write the original unmodified source to file (until you make one more change, which causes Chrome to auto-save all changes to file).
How to use this with your clients and friends
Set up a theme stylesheet with blank (or default-ish) CSS rules (that have top precedence) for every element you intend to let them play with.
Over the phone, guide them to Save-As this theme stylesheet from within the Sources panel.
Guide them in inspecting elements, and using the the Chrome inspector's GUI color-picker to meddle around and find the exact colors they want.
Have them send you the saved stylesheet :)
It's a good idea for you to verify that the modifications are in the file they sent you, before they close their browser window :P
i use this Chrome extension to save the files i modify directly in Chrome DevTools.
Seems hard to configure it, but it does his job. Plus i think it's a must-have for web-developers/designers.
Maybe with some tweak you can make it do what your trying to do.
Sitemod.io allows you to use Chrome Developer Tools to edit any HTML, CSS or JS code on any live or local web page. After you finished working, you can save the edits and get a unique URL to the modified version so you can share your mod with your clients.
Here is an example that illustrates how the above can be done.
I'm one of the developers of this tool so please feel free to ask me anything 🤓