How to add a new CSS statement on top of an existing CSS in Firebug? Just temp. to try it out?

[Ben]

Assume I loaded a web page with CSS stylesheet in Firefox.

Now I want to add another CSS statement on top of the existing CSS stylesheet.

The existing CSS stylesheet should neither be changed nor edited in place.

Instead I want to add a statement e.g. with the "!important" appendix e.g.

   #print-wrapper div { font-size: 12px !important; line-height: 14px !important; }

Ok, I could enter such a CSS statement in Firebug console.
but how can I really add it?

Hitting "Run" results in an error statement

Ben

[Sebastian Zartner]

To edit the CSS of the page (temporarily) you should use the CSS panel or the Style side panel within the HTML panel.

Sebastian

[Ben]

@Sebastian Zartner:

your suggestion is NOT working.

Have look at the attached snapshot for a simplified example web page.

.

There I tried to add in the "CSS Panel" on the right side a NEW CSS instruction which should be applied ON TOP of the existing CSS styleshet.

But it is NOT accepted by Firebug.

Again: I don't want to directly edit the CSS on the left side but add a new CSS on top of an existing.

Any other suggestion?

[JP Charrier]

Switch to the HTML tab, on the right side should be the style pane (left HTML), right click in the style pane in an empty space (ie not directly on a rule name or property/value) and select "add rule"

Regards,

JP Charrier

--
You received this message because you are subscribed to the Google Groups "Firebug" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebug+u...@googlegroups.com.
To post to this group, send email to fir...@googlegroups.com.
Visit this group at http://groups.google.com/group/firebug.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebug/1dd1186c-6218-447a-905b-d8c4d1536827%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[JP Charrier]

Also whatever changes you make only persist for that "load" hitting refresh or navigating to a new page will result in your changes being lost. 

Regards,

JP Charrier

On 21/05/2015, at 9:04 pm, 'Ben' via Firebug <fir...@googlegroups.com> wrote:

--

[Sebastian Zartner]

Thank you JP Charrier for explaining in more detail what I meant.

Ben, you were working within the Selectors side panel, which is wrong for your purpose. As JP said you need to add a CSS rule within the Style side panel. See https://getfirebug.com/wiki/index.php/Style_Side_Panel for more info about that panel.

Sebastian

[Ben]

Thank you for the hint.

However I am unsure about the general procedure.

As I found out the rule is always added at the top (not where the cursor is placed) of the CSS stylesheet.

As far as I know the rendering engine processes CSS statements in the order of appearance.

So when I add "body { font-size: 11px }" at the top followed by the old, original  "body { font-size: 16px}" then the old 16px should be still (sometimes) effective.

How can I tell Firebug: "Take my CSS rule(s) always as primary rule"?

Furthermore it is annoying the have first insert "Add rule" and then (in a second step) "New property".

Since I want oftentimes to copy & paste these complete rules from text files I would appreciate to do this in ONE step.

Is this possible?

On Thursday, 21 May 2015 11:22:33 UTC+2, JP Charrier wrote:

[JP Charrier]

You could amend the property value of a rule that is already working (ie change 16px to 11px to "see" what it looks like). Otherwise it should add a rule relative to what is selected in the HTML pane. Atleast my setup does (does ff dev edition, ff38, fb2.0.9 and latest fb3(unsure exact version at time of writing)). 

Depending what rule you are trying to override a combination of adding a new rule, adding inline styles and amending values of existing rules should achieve the results you want. Like anything think outside the box. 

Further than that you might need to look at local development perhaps. 

I'm not a firebug dev so unfortunately I can't comment on the possibility of pasting in a whole rule set of CSS using the styles pane - personally my projects allow local development so I have no need for this. I'm aware however there are other tools specific for editing and saving CSS online - that may be another option for you...?

Regards,

JP Charrier

--

You received this message because you are subscribed to the Google Groups "Firebug" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebug+u...@googlegroups.com.
To post to this group, send email to fir...@googlegroups.com.
Visit this group at http://groups.google.com/group/firebug.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebug/c58a29b2-42a9-4a47-bf9e-6daace0dba7b%40googlegroups.com.