I use the Web Developer Toolbar in FireFox to test CSS-edits. I want to do the same in IE, and I can somewhat do that with IE8's Developer Tool.
However I can't add a style in Developer Tools, only edit existing styles - does any of you guys know of a way to edit the CSS like you can do with Chris Pedericks Web Developer Toolbar?
You can:
add a style attribute (right click the html tag and click add attribute (with the name style, and then edit the style attribute once its added)
Click the CSS tab, right click the empty space, and add a rule (this is like adding a line to your css file)
Adding to what Gabriel mentioned above.
For a quick addition to test and see the effect I do it a bit differently.
With the HTML tab selected choose the "Attributes" panel next to Style, Trace Styes and Layout.
Click the "+" button and begin typing the css style you would like to add. The new style attribute is added automatically in the DOM view panel.
Hope this helps.
I'm on my Mac right now, but I remember running into that.
When looking at the right side of the Developer Tool, you see a list of CSS styles. Above that you see a few 'tabs': Style, Trace Styles, Layout, Attributes. If I remember correctly you can't change them in the style tab. But you can change them in one of the other tabs. You might have to edit them through the style attribute.
You could try firebug lite but it's a little work to get it setup.
Follow following steps:
1. Click on Developers Tool
2. In Html select element for which you want to add css
3. Select attribute tab present on right side
4. Add Name and Value.
Check your style is applied to html element.
Related
It's easy enough in Chrome Developer Tools to inspect an element and edit an existing CSS rule applying to that element but what if you want to create a whole new style rule?
In my case what I wanted to do was apply the following style rules:
br {display: none}
hr {margin-top: 20px}
font {font-size: 18px}
To the Principles behind the Agile Manifesto so that I could print it out on one A4 sheet of paper directly from the browser.
The official document on Chrome Developer Tools that I've already linked to does have a section on Adding New Rules and Properties but it's out of date and doesn't work like that in the latest version of Chrome.
There is now a dedicated button in the Styles pane for "New Style Rule". It looks like a plus (+):
This will create a new style block which will allow you to define the selector yourself:
This is handy for little amendments on the fly, however it doesn't work well for CSS3 media queries that need extra curly brackets, or for pasting whole sections of CSS in to test.
The solution to that is to first click on the + button to add a new style, then hit enter (or click in the adjacent whitespace).
This will now show a link to the inspector stylesheet called inspector-stylesheet:1
If you click that link, it opens a whole live stylesheet that you can write complex rules in, as well as paste a whole external stylesheet into for testing.
Try using CSS Brush, a chrome plugin to create CSS live. You can create selectors from the page. You can have the complete CSS path or filter it up to make a shorter one. The context-sensitive menu is quite helpful while editing CSS properties live. You can even switch on/off properties or selectors.
I have a CSS file which is not written by me, but I have to change stuff. My problem is a line like this:
list-style-image: url("../images/pfeil.png");
The path to the image is correct, but it's not displayed. I used Firebug to check which styles are applied and I see the line is stroke through. According to the documentation, that means that it's overwritten by another rule.
Is there a way / tool to find out, which rule is overwriting the line above?
They are not disabled. These entries have a strike through them to signify they have been reset or overwritten by a newer rule (one loaded after this style sheet for instance).
CSS styles are loaded in order of inclusion on the html page, with inline styles taking priority over CSS sheet definitions.
Firebug will show you which one has overwritten this one if you just review all CSS acting on that element. Just look for any other list-style-image: listed.
Open your page in chrome, hit ctrl, shift I to open developers console. On the right, there should be an accordion thingy with one of the options being "Computed Style". Open that, click on show inherited, find the setting your concerned about, click the little arrow next to it and it should open up and tell you where the computed setting is coming from.
Let me know if that does it for you.
I am using Firebug to inspect the elements of a webpage. On the right hand of the page there is a "style" tab that list all the CSS styling for a given tag. These CSS styling are coming from a linked CSS page.
What I am looking to do is somehow copy a set of divs with the CSS hardcoded in the div. This way I can copy and paste the elements and have the exact same styling. Is this possible to do with Firebug or perhaps another tool?
I used IE9 to accomplish this.
Open a page where you want to grab a style in IE9
Press F12 to display Developer Toolbar
In the Developer Toolbar press Find and select "Select element by click"
Then go to "View" > "Source" and select "Element source with style"
I don't know about Firebug, but you could build a script to do it.
List the CSS you want to copy (every property you believe is required to make it portable) and then loop through in JS and getComputedStyle(). Then build a ; delimited list of property:value pairs, and assign it to the style attribute if your element and all children.
This doesn't look like an easy task - and you will no doubt run into problems.
I'm not sure what exactly you're trying to do here but are you trying to apply the same style to multiple elements (divs)? If so you should use a css class. So your html will be
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
and css will be
.myClass
{
height:whatever;
width:whatever;
etc
}
Is there a firefox addon or is there a way to use firebug such that you can select some text on the website and it will tell you what styles are being used for that bit of text?
At the moment if I select a bit of text that is styled using css imported from elsewhere I would have to go digging manually to find out what style is being used. Is there an easier way?
Both FireBug and Web Developer addons can be used for this.
Just right click it in Firebug, choose HTML, and in the right pane, select Style>Show User Agent CSS. This will show a list of CSS rules that are being applied on the selected element.
I am using the AJAX Control Toolkit Popup Calendar Control in a datagrid. When it is in the footer it looks fine. When it is in the edit side of the datagrid it is inheriting the style from the datagrid and looks completely different (i.e. too big).
Is there a way to alter the CSS so that it does not inherit the style from the datagrid?
Open the page in firefox. However, first, download the firebug extension. Then, right click on the offending version and go down to inspect element.
Firebug is awesome because it let's you navigate the css of any element. You have two options here:
1) Assign the topmost element an css class and work it that way.
or
If that's not an option, you can use firebug to get the xpath to the offending element.
Xpaths look like body/table/tr/td/table/tr[2]
what you want to do with that in css is
body table tr td table tr {
/*css goes here */
}
Option 1 is definitely the better pick. Option 2 is more of a dirty way of getting things
done when things like asp.net doesn't let us have the fine grain of control we want.
It would be really awesome if you used a pastebin and posted the link to your rendered page's html.
It uses the style from the grid, because it's in it. If you want to change it's style, change the style of the control. What do you want it to do?
Here is the pastebin link:
http://pastebin.com/m17d99f8a
I am using a stylesheet for the grid that I got from Matt Berseth's blog located here:
http://mattberseth.com/blog/2007/10/a_yui_datatable_styled_gridvie.html
I am using a similar stylesheet for the calendar that I cannot find the link for anymore.