FireFox WD tools Question

brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
edited August 23, 2013 in SmugMug Customization
Is there a way to view code other than the theme w/ FF WD "edit CSS"?

Comments

  • basfltbasflt Registered Users Posts: 1,882 Major grins
    edited August 18, 2013
    in menu , go to ; web developer extension > information

    if you only want CSS , go to ; web developer > style editor
    with style editor you can test your scripts and view the result real-time
    it also let you save your scripts

    web developer > inspector is also handy
    Bas

    /ɯoɔ˙ƃnɯƃnɯs˙ʇlɟsɐq//:dʇʇɥ
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited August 18, 2013
    I biggest draw back I see is that in the edit window the CSS is one long single line. Very difficult to work with.
    This is only in the combo CSS tabs so the CSS changes you add have no line breaks.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • basfltbasflt Registered Users Posts: 1,882 Major grins
    edited August 18, 2013
    Firebug is another great extension for FF
    https://www.getfirebug.com/
    i have 1.11.4 ATM
    Bas

    /ɯoɔ˙ƃnɯƃnɯs˙ʇlɟsɐq//:dʇʇɥ
  • BigRedBigRed Registered Users Posts: 288 Major grins
    edited August 18, 2013
    Allen wrote: »
    I biggest draw back I see is that in the edit window the CSS is one long single line. Very difficult to work with.
    This is only in the combo CSS tabs so the CSS changes you add have no line breaks.

    Yikes. What can be done about this? Does it need a bug report or feature request?
    http://www.janicebrowne.com - Janice Browne Nature Art & Photography
  • bwgbwg Registered Users, Retired Mod Posts: 2,119 SmugMug Employee
    edited August 18, 2013
    BigRed wrote: »
    Yikes. What can be done about this? Does it need a bug report or feature request?

    Not to SmugMug. This would be something to request of the Web Developer plugin.

    SmugMug minifes the css for performance reasons and we aren't gonna unminify just because the Web Developer plugin can't properly reformat.

    There are plenty of other browser tools that reformat properly: Firebug, the builtin Firefox Inspector, and the builtin inspectors in chrome, safari and IE9+ all reformat fine.
    Pedal faster
  • BigRedBigRed Registered Users Posts: 288 Major grins
    edited August 18, 2013
    bwg wrote: »
    Not to SmugMug. This would be something to request of the Web Developer plugin.

    SmugMug minifes the css for performance reasons and we aren't gonna unminify just because the Web Developer plugin can't properly reformat.

    There are plenty of other browser tools that reformat properly: Firebug, the builtin Firefox Inspector, and the builtin inspectors in chrome, safari and IE9+ all reformat fine.

    So please tell me if I understand this correctly (and I hope I'm wrong)... All comments and formatting in custom CSS widget blocks are stripped out, so it's basically not maintainable -- at least not without external tools & processes. We can see the standard-formatted version by using one of those browser tools, but still can't effectively edit it because there are no inline comments. The only way I can think of to retain comments would be to keep a backup text file of each CSS block, copy/paste that into a browser edit tool, edit/test, then copy/paste the new CSS back into the backup file, and then copy/paste the new CSS into the SM CSS content block. Whew. What am I missing?

    I think this illuminates these bug reports:
    NewSite - CSS comment tags
    Nav Menu customizations -- CSS is not minified in theme > advanced > CSS
    http://www.janicebrowne.com - Janice Browne Nature Art & Photography
  • paulbrockpaulbrock Registered Users Posts: 515 Major grins
    edited August 23, 2013
    bwg wrote: »
    Not to SmugMug. This would be something to request of the Web Developer plugin.

    SmugMug minifes the css for performance reasons and we aren't gonna unminify just because the Web Developer plugin can't properly reformat.

    does Smugmug remove comments from the code that you guys work on as well? ne_nau.gif
    London event photographer - www.paulbrockphotography.co.uk
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited August 23, 2013
    BigRed wrote: »
    So please tell me if I understand this correctly (and I hope I'm wrong)

    The topic at hand is inspecting CSS code that's running on the page using Web Developer / some other code inspector. There you will see the CSS code that has been minified for production, so that the webpage loads fast for your customers.

    No mention was made of the customiser, where SmugMug (should be) presenting the un-minified, original CSS.
    https://www.sherlockphotography.org/

    Please check out my gallery of customisations for the New SmugMug, more to come!
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited August 23, 2013
    I do a select all in the WebDev edit window and paste into notepad where I turn on word
    wrapping. At least I can see it all.

    Now I have to do the same thing in Smugmug customize CSS boxes.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • snakeey11snakeey11 Registered Users Posts: 88 SmugMug Employee
    edited August 23, 2013
    There was a bug that was fixed about a week ago where you wouldn't see your comments in the un-minified version of your CSS (what you see when you are editing a CSS content block or your theme's custom CSS). As bwg said, however, you'll always see the minified version (no comments) when you inspect the code running on a page.

    -Mike
    SmugMug Sorcerer
    (and an avid landscape photographer - view my website)
Sign In or Register to comment.