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
}
Related
I'm trying to make a Google userstyle based on Discord's color scheme. Even though I have no programming experience whatsoever, it has been pretty straightforward (Inspect element > Copy-paste to Stylus) but now there's an element that I can't edit. It's the "next" arrow in the video cards that appear in the results for a search. Here it is: The button on the right.
When inspecting it, the selector just shows up as "element", that didn't work, right-clicking and copying the selector (I'm using FIrefox) also didn't work, and using live CSS editors didn't work either.
I'm guessing it's because they use a fake html element called g-right-button. Just change it to div and you'll be fine.
(You can also just make a g-right-button { .. } selector)
You can also see and change properties from inspector.
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.
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.
Anyone know of a tool/Firefox Plugin that would allow me to click on a DOM object in a page and give me the CSS inheritances that Is needed to style that element?
So if there are a bunch of nested elements ol li ol li etc... what should my CSS look like to style said element?
The Web Developer extension is excellent at this as well. The shortcut is Ctrl+Shift+F to activate the click interface...click on any element to see a full inheritance tree.
Firebug will show you the full path to any element (on top of the HTML tab), but it won't automatically generate a CSS selector.
Have a look at firequark .. It is an extension for firebug that extracts css selector for a single or multiple html nodes
There's no one way to create a selector. Ultimately, doing a full ancestry chain for your selectors is asking for trouble, because whenever your document structure changes, your selectors will break. My rule of thumb is to use #id selectors for singleton elements in your document (i.e. #mainNav or #content) and .class selectors for elements that repeat or for mix-ins (i.e. .menuItem, .external).
You want Firebug.
Once you install it, you can right click on any element in the page and choose "Inspect Element" from the context menu. This shows everything you need to know about the element, including a list of all the CSS styles that are acting upon it. For your purposes, you would probably want to use the first selector in the list.
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.