Help with Firebug Margins and Padding

[mahoney...@gmail.com]

Hi There

Firstly let me just say how amazing Firebug is, it has saved me so much time when developing my sites!! Very highly recommended.

I am still quite new to this extension and I am having trouble when it comes to altering the 'Layout' section of my site - meaning the margins and padding.

I am going to try explain this the best I can but please feel free to ask anything you are not sure of.

I want to change the layout of a webpage on my website. I load it up in Firefox Browser and use Firebug to change the position of selected components. This is the easy part. I can make the page look exactly how I want to with the 'Layout' option, by changing the margins and padding. This part I am totally fine with.

I then have a problem when it comes to implementing these changes.

Lets say that I change the space between some text by simply adding a margin of 15px (this is just an example). When I click back to 'Style' the only change I find in the css is the following:

element.style {

      margin-top: 15px

}

I can see the changes in the HTML however I have no idea what I need to copy from the css to my child theme in order for these changes to take effect, as element.style doesn't work.

I have searched over and over for the answer to this for the past 4 weeks but to no avail. I can find endless videos informing me of how to use the 'Layout' tab to change the margins and padding but none which show me how to implement the changes.

If it makes it any easier I am using Wordpress, Firebug and a Simple CSS Editor for the child theme alterations.

Everything else works perfectly other than the Layout, Margins and Padding.

Any help would be greatly appreciated.

Thanks

[JP Charrier]

Try highlighting the element you wish to make changes to in the HTML pane, in the Style pane then right click on some empty white space and select add rule. 

You want to add a CSS rule to your theme that targets the element (check for class="class-name" or an ID on the elements you select), you could also use CSS descendent selectors with types (ie .header h3)

When you click add rule it will follow the info above as best it can, it doesn't use the element.style syntax. 

Hope that helps

Regards,

JP Charrier

Sent from my iPhone

--
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/ac3dec68-4174-4f2f-9c55-c7da872b405c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sebastian Zartner]

Also note that the element.style rule is an artificial CSS rule representing the styles specified within the element's style HTML attribute.

Sebastian