css Apply Source Formatting DW 2017

[Okoth1]

In DW 2015 I used to be able to format the css code by pressing the Apply Source Formatting button. Each property will end up on one line after the tag.

How can I do this in DW 2017?

So from

.entry p {
  line-height: 180%;
  margin: 5px 0;
  padding: 5px 0
}

to

.entry p { line-height: 180%; margin: 5px 0; padding: 5px 0 }

[BenPleysier]

Edit > Code > Apply Source Formatting

To make it easier, you can apply a Keyboard Shortcut

[Okoth1]

Sorry, Ben, but that doesn't answer my question. See the example format in my question.

You have just explained to me where to find The Apply Source Format, but I already know that. I am looking for a way to customize that format to all properties on one line. This was possible in DW 2015 but it looks like not any more in DW 2017.

[Okoth1]

In Dreamweaver 2015 I did this to set the css code preferences. And when I pressed the Apply Source Formatting I got all properties nicely behind the ID or class tag on the same line. So, no hard enter after the semicolon.

DW 2015: Set CSS code formatting preferences

• Select Edit > Preferences.

• In the Preferences dialog box, select the Code Format category.

• Next to Advanced Formatting, click the CSS button.

• In the CSS Source Format Options dialog box, select the options that you want to apply to your CSS source code. A preview of the CSS as it would look according to the options you’ve selected appears in the Preview window below.

  Indent Properties WithSets the indentation value for properties within a rule. You can specify tabs or spaces.

  Each Property On A Separate LinePlaces each property within a rule on a separate line.

  Opening Brace On Separate LinePlaces the opening brace for a rule on a separate line from the selector.

  Only If More Than One PropertyPlaces single-property rules on the same line as the selector.

  All Selectors For A Rule On Same LinePlaces all selectors for the rule on the same line.

  Blank Line Between RulesInserts a blank line between each rule.

• Click OK.

[Preran · Accepted solution]

Hi Okoth,

This feature has been deprecated in DW CC 2017.

Thanks,

Preran

[Okoth1]

There goes my most-used tool...

I hope we'll get it back in the next version.

[Jon Fritz]

Maybe a partial deprecation?

The action still exists under Edit > Code > Apply Source Formatting and still appears to be pulling formatting from somewhere (I'm guessing an XML file in the AppData folder).

The Tag Libraries Preferences menu item appears to have been lost though.

I noticed the program auto inserts while hand coding, where is that preference coming from and how do we change it to something we want?

This would be a definite step backwards from the last version of DW if we lose the ability to indent the way we want.

[LuisCarlos5046]

Precisamos de uma função para minimizar o CSS no DW.

[BenPleysier]

Rename the file with a .scss extension, setup the CSS Preprocessor process and every time you save the scss file you will automatically create the version of your choice.

Who knows, this may be a path to learning Sass as you go.

[martin_r_pepper]

Preran, thank you for explaining that this feature has been deprecated in DW CC 2017. Can you elaborate on why it was removed, and suggest an alternative solution?

As a front-end designer, I frequently need to clean up old (or badly written) HTML that includes in-page CSS. Why were tag library formatting preferences retained while CSS formatting preferences have been removed?

[platypusman]

Are you kidding me???

Where is the Dislike button...

It's cool that Dreamweaver now includes preprocessor functionality. But users should not HAVE to use a preprocessor just to apply source formatting to basic standard CSS.

[jeremypinson]

Please bring this feature back!

Our organisation uses massive stylesheets, worked on by many people, yet we do not use any preprocessing technology. The CSS code formatter was an extremely useful tool but now, using the default (and only) DW2017 CSS source formatting, every style is on a separate line and it is adding huge weight to our CSS files. We need the ability to compress CSS as before and I can't for the life of me firgure out why you would remove this feature but keep the ability to edit HTML/ASP/JSP/PHP/etc tags. Not everyone is using, or wants to use preprocessors.

[awezoom_studios]

WHY???? This was one of the most useful tools in Dreamweaver, and it exists in any other html editors I've tried. Why deprecating it????

[briankjohnson]

Really would like to have that feature back, it was very helpful. Yet another reason never ot upgrade Adobe products anymore.

[alexllanes]

This answer is better then the one Adobe's staff provided

[Malcolm1961]

You are a star. Thanks.

[raghib_suleman]

Woohoo... Thanks for you help

[kseymore]

Yeah, I got so frustrated with this formatting problem that I quit using Dreamweaver for the time being and just switched to a text editor... and was pleasantly surprised by how much better/smoother/quicker it is, even though I do like the visual editing at times. Oh well, it'll be nice if they bring it back, but for now just skipping it for css isn't as bad as I expected.

[whamalamaboom]

I just signed in to ask about this.  noticed after I upgraded that apply source formatting wasn't working anymore. Now I know why. Sucks when useful things get removed. Ah well. In the meantime, for anyone interested, I like to use things like www.cleancss.com/css-beautify/ as well.

[SteelRob]

Losing the ability to format CSS how I need is particularly frustrating for me as an html email developer (embedded CSS).

I - like many - have Dreamweaver on 2 Macs - office and home - both of which now "apply source formatting" entirely differently from each other - as they have each inherited the (configurable) settings from the previous version of DW.

Unfortunately - at the point of upgrading - my settings were very different on the 2 machines - and now we've lost the ability to configure them easily - I'm stuck that way, making DW rather frustrating.

I suppose I could remove the Adobe suite entirely and reinstall to get a "factory" re-set... but then I'm still stuck with my CSS formatting as Adobe think it should. Not cool.

[RichExperiences]

Deprecated??? What?  Where is the Product Manager here. Are you kidding me?

I updated to the latest sub-version of DW 2017 this morning right before a coding test and it about killed me. You can't be serious that this is a use case -- half the developers I know put CSS attributes on separate lines. 

If I lose this job opportunity because of this I am going to pretty mad.

[RichExperiences]

Also, what's up with the tag highlighting defaulting to light green with white text??? Really. I was tossed into this 30 min coding challenge and it reset all my formatting settings. The auto indent after hitting enter is ridiculous. Selecting a tag and then not being able to read it is silly... it's not effective or usable and in the end extremely bad UX in my case.

Why in the world lose user's settings in the first place???

[Nancy OShea]

what's up with the tag highlighting defaulting to light green with white text???

Yeah, an unfortunate color choice.   You can change code color Themes or edit the Light Theme LESS file in DW.

Learn how you can customize the colors of your code elements in Dreamweaver.

Nancy

[RichExperiences]

Thanks. Yeah, I tried the dark theme, but then the dark background is too much. I can't change that without editing a bloody text file (less, I know). I tried that but the first directive for background doesn't work. I've made it #FFF and it doesn't change the background. Barring that working, I have very little energy to try and track down which of the "code-mirror" (????) settings might actually apply to the Selected Tag setting.

It's a bit like saying, here, you can't read our website, and if you don't like it you can go edit the CSS. How does this make any sense?

Thanks,

Rich

[Nancy OShea]

That's how Brackets works.  And since this new & improved DW is based on Brackets code, it follows the same methods.

Add this to the bottom of your Light based Theme's LESS file.

/* Custom code colors or overrides should start after this line */

.CodeMirror-matchingtag {

    color: blue;

    background: rgba(0, 0, 0, 0.70);

}

Adjust values to suit.

Nancy