Lost on CSS live editors

33 views
Skip to first unread message

Christina Sosa

unread,
Nov 1, 2014, 11:39:26 PM11/1/14
to fir...@googlegroups.com
I am learning how to use fire bug, and I have now know there is no way to see where the HTML location is for changes made in fire bug on a page. Is there a way to find the css location for changes to a page that does not have a line number beside it?
I am trying to add a 15 px margin to images in some of my banners and in the css on the right it says element and gives margin top but no line number where I should add the changes. I had no luck with using the css live extensions so I am completely lost now.  When I ask questions in wordpress they always ask for my site so one of the pages I am trying to edit is http://revolutionhtx.com/ministries/life-groups/.

JP Charrier

unread,
Nov 2, 2014, 1:53:33 PM11/2/14
to fir...@googlegroups.com
The "element" rule at the top of the css sidebar is for you to add styles. The styles are applied to whatever is currently selected in the html window pane. 

Regards,
JP Charrier

Sent from my iPhone

On 2/11/2014, at 4:39 pm, Christina Sosa <guid...@gmail.com> wrote:

I am learning how to use fire bug, and I have now know there is no way to see where the HTML location is for changes made in fire bug on a page. Is there a way to find the css location for changes to a page that does not have a line number beside it?
I am trying to add a 15 px margin to images in some of my banners and in the css on the right it says element and gives margin top but no line number where I should add the changes. I had no luck with using the css live extensions so I am completely lost now.  When I ask questions in wordpress they always ask for my site so one of the pages I am trying to edit is http://revolutionhtx.com/ministries/life-groups/.

--
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/05a3d13d-f4a1-427e-ae51-42e24f61f3c0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Sebastian Zartner

unread,
Nov 2, 2014, 4:36:26 PM11/2/14
to fir...@googlegroups.com
My understanding of WordPress is not really deep, though I'd first have a look at how CSS is integrated in WordPress. What you need to do to get that margin for your images, is to create a CSS rule with a class selector and then assign that class to the HTML elements, which should have that margin. E.g.

In the CSS:
.imageWithMargin {
  margin: 15px;
}


In the HTML:
<img src="..." alt="..." class="imageWithMargin"/>

Just to clarify what JP Charrier means: Firebug's Style side panel displays an element.style rule, which represents the CSS styles assigned to an HTML element through its style attribute. These are so-called 'inline styles' and they just apply to the current element.

Sebastian


On Sunday, November 2, 2014 7:53:33 PM UTC+1, JP Charrier wrote:
The "element" rule at the top of the css sidebar is for you to add styles. The styles are applied to whatever is currently selected in the html window pane. 

Regards,
JP Charrier

Sent from my iPhone
Reply all
Reply to author
Forward
0 new messages