0

Hopefully this question isn't too oddly specific. Let me know if it belongs on ProWebmasters instead...

I'm making some mock-ups in Photoshop, using screen shots from the site in its present state as a starting point.

I want to be able to change certain parts of the HTML/CSS before taking the screen shots. For example, the text tracking in this case. Reason being that if I add new text in Photoshop it will not rasterize quite the same way as the browser rendered it and it will look out of place.

I use Firefox as my primary browser, but there is something frustrating about Firefox's Developer Tools: it seems to limit the ways that a page's markup can be changed. I can't simply double-click and begin typing to add an inline style inside a tag wherever I want to - it will allow me to type but the changes won't stick.

For contrast, here is the desired behavior, working in Chrome's Developer Tools (the changes are reflected in the page):

Adding a new inline style via Chrome's Dev Tools

Is there a way to add new inline styles using Firefox's Developer Tools that I'm just not aware of? I've been searching all over but to no avail. Thanks in advance for any help.

Update

After adding CSS here, the style is affecting every instance of <span>

Inputting a new style with Firefox Dev Tools

What could be making it not behave as an inline style?

0

If you want to edit style property then you need to change from right side panel under style. Just click it and change the value.

enter image description here

  • Progress! It changed for me. I was able to take a screenshot, solving my immediate problem. The strange thing is, it appears to have changed every instance of span (not actually inline, even though the word "inline" is shown to the right of the style). Upvoting... will mark as accepted if you can include how to make it inline. I'll add another screenshot to my question so you can see what I'm seeing. – Mentalist Nov 13 '18 at 7:24
  • I got it! Needed to R-Click and choose "Edit as HTML" from the contextual menu. After editing the HTML in the area that appeared, instead of span it read as element. And everything is now working inline for real. Thanks! – Mentalist Nov 13 '18 at 7:52

Not the answer you're looking for? Browse other questions tagged or ask your own question.