Inspiring

Answered

css Apply Source Formatting DW 2017

Forum|Forum|9 years ago
November 8, 2016
16 replies
26260 views

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 }

Correct answer Preran

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.

Hi Okoth,

This feature has been deprecated in DW CC 2017.

Thanks,

Preran

K

Kratika Agarwal

Community Manager

Hi Okoth1,

Thanks for reporting.

We are happy to inform you that we have done some improvements in CSS code formatting in our latest Prerelease drop Dreamweaver CC Next 15104.Please give it a try and share your feedback.

Prerelease Invite link:
Adobe Prerelease /external-link.jspa?url=https%3A%2F%2Fwww.adobeprerelease.com%2Fbeta%2F9EB451B5-D2E8-46E5-AFA2-78C85442FFA2%2Fparticipate%2FDD4EB148-308D-435D-930A-92C1167C8304

You can also customize CSS formatting by editing the file ".jsbeautifyrc" in site root folder.
1) create a new file and save it with .jsbeautifyrc in your site root folder where your css files are present for which you want to do fcode formatting
Paste below content in the above created file and save it
{
"css": {
        "selector_separator_newline" : true,
        "end_with_newline": false,
        "newline_between_rules": false,
         "space_around_selector_separator": true
    }
}
2) Edit this file for the different rules (with value "true" or "false"), according to their description mentioned below
3) Save the file after making changes and relaunch Dreamweaver
4) The changes will be reflected in the code formatting
{
"css": {
        "selector_separator": " ",
// any changes made in this flag won't be reflected in the formatted CSS
        "selector_separator_newline" : true,
// Whether to put a newline between comma separated selectors (e.g. ".div,\n.p" or ".div,.p")
        "end_with_newline": false,
// Whether to end the file with an empty line
        "newline_between_rules": false,
// Whether to add a new line after every css rule
"space_around_selector_separator": true
// To ensure space around selector separators: '>', '+', '~' (e.g. "a>b" would become "a > b" on applying source formatting)
    }
}

Thanks

Dreamweaver Team

E

edsonsenac

Participating Frequently

Anyone, any news about this issue? Because I have Dreamweaver 2020 and I didn´t see any step further from Adobe until now. Or, if there is a solution, it´s hidden or in a different place.

Adobe, we want the feature back! Is this that hard to do? C´mon!

Nancy OShea

Community Expert

The default formatting is all you need. My final CSS code is minified. So formatting is irrelevant.

See Using CSS Preprocessors in Dreamweaver

https://helpx.adobe.com/dreamweaver/using/css-preprocessors.html

Nancy O'Shea— Product User & Community Expert

A

Alek24

Participating Frequently

+1 to get this feature back.

ZoomlaCMS

Participant

it's easy.

1、open

C:\Users\admin\Application Data\Adobe\Dreamweaver CC 2017\cloudpref\Adobe Dreamweaver CC 2015\AdobeDreamweaverSettingsPrefs.xml.tmp

or

C:\Users\admin\Application Data\Adobe\Dreamweaver CC 2018\cloudpref\Adobe Dreamweaver CC 2018\AdobeDreamweaverSettingsPrefs.xml.tmp

edit

to：

then

edit

Registry

/HKEY_USERS/S-1-5-21-2974007363-4150737019-3812494026-1000/SOFTWARE/Adobe/Dreamweaver CC 2018/Source Format

CSS Props On New Line

to FALSE

is ok!

中文来了：

改为：

同时更改注册表中

/HKEY_USERS/S-1-5-21-2974007363-4150737019-3812494026-1000/SOFTWARE/Adobe/Dreamweaver CC 2018/Source Format中

CSS Props On New Line 值为FALSE

重启DW就解决了。

如果用得好，欢迎进入我们官网www.z01.com帮宣传下免费强大的国产Zoomla!逐浪CMS，谢谢。

J

jeremypinson

Participating Frequently

Thanks, @zoomlacms!

DW Team - are you really forcing us to go into the registry to perform a valuable task that DW used to support? I still need this functionality back... sometimes we need to minify CSS and have everything on one line; what then? Go back into the registry, again?! Come on. Please bring this feature back.

B i r n o u

Legend

like many threads that mentioned it before, it is important that the code format can be independent for each of the main languages namely HTML, CSS, JS, PHP but also Sass, Less, Json, XML ... and furthermore each team does not work with the same rules , some opt for TAB, other for space... some want the curly bracket on the same line than the rule or function, some prefer the block on the next following line... and so on.... so, it is important that each of the preferences can be adjustable project by project

Y

YANJEP2020

Participant

For what it's worth...

http://www.cssportal.com/format-css/index.php

Copy and paste your multi-line code and it will reformat it based on the settings you choose.

This make formatting a breeze, once you get the settings correct.

Cheers!

P

Paris Giovanni

Participating Frequently

Can't imagine why they need to remove a feature that is actually used. So stuck with Adobe because that is what the boss bought. I sometimes have to deal with CSS that is 4-10 years old and that feature really helped me get a handle on poorly written CSS from last decade.

I

IronADDT

Known Participant

Remember that 2017 version is not more Dreamweaver but a new app (using DW name, Adobe has created a big confusion in the community).

DW 2017 version is more close to Brackets and I think that Adobe in the next version will lunch Muse Editor and kill Dreamweaver definitively.

"CSS Apply Source Formatting" was a primary feature but Adobe killed it (as well as others big features).

Now is only a basic (and expensive) HTML editor (with a lot of bugs).

J

jeremypinson

Participating Frequently

Seems like others are lamenting the removal of this key feature; good to know! Personally, I have stuck with Dreamweaver over the years for two main reasons;

1. Find & Replace; I love this feature, especially Regex capabilities. I work in large sites requiring us to 'sweep' thousands of pages and update naming references, etc and this feature has proved invaluable. I felt the previous release regressed in this regard but the most recent version seems to be much faster.

2. Code formatting; Like @wthhaknudsen, I'm often tasked with working on poorly formatted code that could be up to 10 years old. The ability to customise code formatting and in particular, CSS is something I rely on daily. If this feature has been removed for good then unfortunately I am finally going to have to look for another editor because I can't live without it.

Ps. I actually really like the auto CSS style popup suggester thing (sorry, not sure exact name). I find it very helpful in not having to type out style rules manually every time... Great addition to DW... But please bring back CSS custom formatting!

supergood

Participant

This is another problem in the new version.

Developers, do you really use DW?

I was using it from the very first Macromedia version and know what I want.

I want to write code as well as I used to write and auto-formatting helped to correct mistakes in someone else's code.

You can imagine that what you did is correct from some point of view, but real life is that this feature was one of the most used.

You can remove a ton of unnecessary junk, but why would you remove basic functionality and offer nothing in return?

platypusman

Participating Frequently

This seems to be working again!...

(Not sure if the feature was brought back in a recent update or what? Try updating the app and see...)

Hurrah!!

If this is the case, major props to Adobe for listening/responding to users' feedback.

A

ayy56742987

Participant

are you sure? i haven't got any options..

A

ayy56742987

Participant

what a joke, why this feature has been deprecated in DW CC 2017? It was really useful. I'm wasting lots of time now.

P

Paul-M

Legend

I posted a solution to this here:

Re: CSS Code Formatting Options??

Paul-M - Community Expert

R

RichExperiences

Known Participant

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

Community Expert

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

Nancy O'Shea— Product User & Community Expert

R

RichExperiences

Known Participant

Hi Nancy - sorry for the delay. Thanks.

That worked. So, where did you find that? How is one supposed to know how to select these attribute of the UI and formatting?

Show more replies

DW 2015: Set CSS code formatting preferences

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded