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?
Related
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 :-)
The current workflow for our designer is:
Opens web page and edit the CSS
Write up all the CSS changes in an issue
Is there a way for chrome to save the 'diff' of the CSS and export it without using workspaces?
As of Chrome 65, Local Overrides can help with this. Check your Chrome version at chrome://version. If you don't have 65 yet, you can use Chrome Canary.
Open Sources.
Click Local Overrides tab.
Click Select folder for overrides and choose a destination.
Make your changes in the Styles pane on Elements panel or Editor pane in Sources panel. Chrome saves the changed files to the specified location.
GOTCHAS!!!
Changes made in the DOM Tree on the Elements panel don't get saved.
Neither do changes made in the Styles pane when the source of the CSS rules is a <style> tag in HTML. At least in Chrome 65. There's rumors that this may get fixed in 66.
Not sure if that's what you want, but...
You can edit the page from inspector (ctrl+shift+I) and after done with all your changes, just click on the stylesheet link at your left and copy everything you need
I have seem a lot of videos in which developers are changing CSS on the fly in chrome. I tried the same thing but chrome did not allow me to change the code. I can't write on the style sheet.
Is there any specific setting to do this? Kindly help.
EDIT: To edit the CSS, I right click on an element, select inspect element. It will open the console. I select the id of the element and go to style.css in Resources and try to change the CSS. It does not allow me to write there.
You are doing it wrong... the resources panel is not there for live edit, if you want to change the css associated with an HTML element, right click on that element and then in the right panel you will see the css styles associated with the selected element. You can edit that rules and you will see the changes in real time.
Maybe you can check some videos to learn some basics about the Chrome Developer Tools, and after that if you want to learn more, you can check this question:
Chrome Developer Tools: Best resource for learning advanced features?
Here is a great tool for Google Chrome called Stylebot.
In this you can change the style sheet and save your own styles to any website for your own custom website theme!
Here is the link for Stylebot
Check it out and to put the icing on the cake, it's free!
This should not be used to work on your own website projects since the CSS file saves local on your browser!
In Chrome, clicking on something like "all.css:1" in the Styles pane of the Elements tab of DevTools takes one to the Sources tab of DevTools. If you're looking at code on remote server, the CSS rules in this source view are not live-editable (unlike the live-editing Style Editor tab of Firefox*) unless you're:
viewing the "inspector-stylesheet" -- a temporary stylesheet containing new style rules you created with the "+" button in the Styles pane of the Elements tab. Clicking on a new rule's "inpector-stylesheet:1" link will take you to the editable source of the temporary rules you've created.
viewing a persistent local workspace. Setting this up takes a few extra steps, described here: "Set Up Persistence with DevTools Workspaces" .
Basically, you make a local folder on your machine where you can save local copies that you direct Chrome to use in in lieu of the version on the internet. See the instructions at that link. Note that, as it says there, "If you are mapping files from a remote server instead of a local server, when you refresh the page, Chrome reloads the page from the remote server. Your changes still persist to disk and are reapplied if you continue editing in Workspaces." (So just type a space character into the source local CSS file to see your alterations applied again, if you've refreshed or navigated to a different page that uses the same stylesheet.)
* In Firefox, if you right-click on an element on a remote webpage, select Inspect Element, then in the Rules pane of the Inspector tab, click on a link on the right like "all.css:1", you are taken to a "Style Editor" tab where you can immediately live-edit, in contrast to Chrome's requirement of making you map to a local file. This may cause some people some confusion, if they expect the same behavior from Chrome's DevTools.
Another Chrome extension that is similar to Stylebot is Code Cola. It has an inspector that allows selecting elements, and a visual editor which does not require typing the CSS by hand. To see the generated CSS code click the curly brackets icon in the toolbar.
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 am having an issue with IE (9 in this case) where I have uploaded a new CSS file for a page and it works just fine when I go to the page. The problem I am having is when I browse to any another page, if I then hit the back button it renders my page using a previous version of the CSS file. I verified this using the F12 tool to see that the css file only had the entries from the previous version. In this case, i was styling 'ol' and 'li' elements if that matters.
Is there anything I can do to make IE load the most current version of a css file when the browsers back button is used?
Again, the page loads perfectly if I browse to it in any "forward" manner, I also have my browser set to check for new versions every visit. Its when I hit the back button it has problems. Also every other browser ive tested has no problem using the back button.
you could add a parameter when calling the stylsheet...
?version=2
...after you .css extension
If you are clicking back to return to a page that you have previously visited with the old stylesheet, then yes, it will load the old stylesheet. A simple refresh should fix this.
The reason is that the back button is not meant to reload old pages, but to preserve the pages exact state and return the user back to that page.
If indeed you have loaded the new stylesheet on page A and then move forward to page B, then click back to go to page A and an old version of the style has been loaded, there might be something going seriously wrong with IE's cache. It might be a bug. Maybe changing the filename or adding something to the query string will force it to recognise your stylesheet as a newer version eg:
style.css?v2
will make sure the browser treats your style as a completely new file and disregard any old cached versions.