I have updated a web page that I didn't create. I worked locally perfecting the new layout which was fine.
However when I moved it to the server, a lot of styles didn't apply.
In troubleshooting, I found that the styles that weren't working on the server were listed as "Author Stylesheet" styles locally (in Safari Dev Tools). There are no inline styles nor is there a style tag in the HTML. The other external stylesheets show the name of the stylesheet with the line of where to find the style.
How can figure out what the source of the Author Stylesheet actually is?
I'm not sure if this is 100% accurate, but I believe that Safari will not show the name of the css file if it is named default.css. In my case, Chrome tools displayed the file name (not just "Author Stylesheet").
Wayne, I don't think you might declare the author of CSS file on it. You must passing the wrong name or locale from CSS server, is there all your CSS found? Aren't u using css on your local or .min.css in your app? User google chrome in the console tab to look wgat is the problems with your stylesheet.
Related
I have a website that is not responsive. My task is to make it responsive. I didn't have source files, the client requires a CSS and js files that he will add to the website. I am doing it by editing live via chrome developer
I want to know that is there any extension or software which I can use to insert code live into the website.
Thanks
Sadly Nope!
But you can style it in (chrome developer mode mobile view) and paste its media query css in separate file and then send it to them so that he add that style in style sheet at the end. Added screenshot for reference.
https://www.screencast.com/t/vWhqsxVsq
What is the most efficient way to style components in the browser dev tools with the default view encapsulation (emulated)?
My current workflow involves a lot of tedious copying and pasting from the dev tools like this:
Chrome dev tools has the ability to save styling changes made on the DOM to the source css file (Save Changes To Disk With Workspaces), but I don't know if this will work with the way Angular and Webpack use emulated component styles.
There's got to be a quicker workflow than what I am currently doing. Any tips?
You can directly edit your css project files from chrome devtools. Follow this steps:
In angular.json add "extractCss": true like so:
This way you'll see the css files in inspection instead of inner style tags in header
(you can see an example image in step 3 below).
Open chrome devtools, Sources tab, Filesystem left tab and add your project folder:
This is the magic trick, this will let you edit your local files from devtools!
now when you inspect your html for css, you can click the css file and you'll be redirected to your local file:
Edit your changes to the file.
Save the file.
Magic! Your local file was modified!
I LOVE Chrome!
Cheers
...I don't know if this will work with the way Angular and Webpack use emulated component styles.
TL;DR: You can't do this quite in the way you'd like to.
Angular scopes styles to components, and thus the .some-class-name[ngcontent-c5] notation in the Chrome inspector. As such, dev tools has no way of knowing exactly where to trace the change you made back to, other than the file it originated from using the source map.
As you mention in your question, you can load the project working directory into dev tools (article you posted) and edit the file itself. On save, the angular watcher will register the change and reload. This will work with pure css/js, as well as pre-compiler scss, ts, etc.
So to answer the question: yes, webpack will still recompile when you do that, but not quite in the way you're looking for.
I've made all these little CSS modifications to my blog with Google Chrome's built in Developers tools to improve a +WordPress blog.
I'm using the context-sensitive Save As command on the revised style.css document. However, none of my changes are reflected in the replaced styles.css document on the server.
A few added details:
I am using FileZilla to connect and manually delete the old file, then upload the revision (I've found that replacing doesn't always work, for whatever reason.
I'm doing this within the main theme folder for the blog. I am unaware of any other possible location where this could reside.
Thoughts? My original G+ query (with accompanying screenshot) can be found here.
Many thanks, in advance, for your help.
Instead of overwriting the styles you should append them at the end of the style sheet. I usually create a comment the end something like /* New Styles Here */ Better yet you should create a child theme and all the styles to the child themes style.css
http://codex.wordpress.org/Child_Themes
I'am currently working on a website that is using the wordPress content managment system and i was trying to get rid of some inline style definitions for some inputs that i wanted to put into the css file.
I copied the exact inline style definition into the stylesheet in a class that targets input (i.e input.className, ClassName having the same elements as the inline style definition) and then added said class to the input.
What happened is the button was rendered with the browser's default appearance settings instead of the ones i defined in a class.
I did some testing and ctrl+f in the css file to see if there we're any more specific css definitions for inputs but there we're none.
Then i copied the whole css into a file and i created a quick html pointing to that local stylesheet, putting just an input with my newly create class on the page to see if it had anything to do with wordpress.
On my local machine the class is applied to the button, but on wordpress it does nothing.
Does anybody know where does the problem comes from or can anybody suggest some possible hints into where i should look.
Thank you in advance.
If the code works outside of Wordpress but doesn't work inside of Wordpress, what led you to the conclusion that the problem lies with the browser overriding something? Isn't it infinitely more likely that something Wordpress is doing is causing the issue?
Inline styles have high specificity. By moving the CSS rules to an external stylesheet, you lowered its specificity. It's likely that Wordpress' CSS includes rules that conflict with yours, and have a lower specificity than your inline styles, but a higher specificity than the same rules moved to an external stylesheet.
To fix this you need to raise your rules' specificities. The quick hack fix for this is to use !important, but you should really figure out what you are conflicting with and address it by tailoring your CSS to match.
To answer your question title, yes browsers can override CSS but only if you wittingly installed a plugin/extension to do so (eg facebook themes), but by default the browser does not do so.
You could check if your Wordpress install or browsers has cached the page (you can delete/remove the cache to do so), I know this is an issue while editing PHPBB themes while live, but I suggest go all out, create a separate CSS file and new unique class name in it (avoid any confliction) and double check to be absolutely sure
I would like to control which parts in Stackoverflow are visible to me by a css file.
There are about ten css -files in Firefox installation folder. I am not sure whether I should edit them or not.
How can I customize Stackoverflow by CSS in Firefox?
You can create a file called "userContent.css" in your profile folder and it will be loaded on each page. Here's more information: http://www.mozilla.org/unix/customizing.html
If you need to make changes which only affect one particular site instead of every site, then you can use this syntax:
#-moz-document domain(stackoverflow.com) {
body {
background-color:#f0f;
}
}
The CSS equivalent of GreaseMonkey is the Stylish extension which allows you to overwrite site CSS without modifying your userChrome.css file.
With Stylish installed, you can simply create a custom user style for stackoverflow containing your css overwrites without risking messing up userChrome.css. You can also disable or enable that particular stylesheet at any time. Also, make sure to use !important in your style declaration as CSS specificity comes into play.
Try using firebug from http://getfirebug.com
You can also use greasemonkey to do further customization.
You can get a very handy addon in Firefox, called GreaseMonkey. It executes a custom javascript after a page loads, and is able to modify the html on the client side. For example people use it to strip out various elements, change color, fonts, rearrange elements etc
There is also a book about it available online for free
You can get the Greasemonkey add-in here.