Highlighted

@media code coloring in Dreamweaver 2017 - no longer colored

Community Beginner ,
Nov 23, 2016

Copy link to clipboard

Copied

Among the many surprises I found in the new DW (including Live view and Live code being on by default, apparently) I discovered that my carefully edited code coloring in CSS (and possibly in HTML and PHP, but I haven't got that far) has been completely scrambled.

I followed the tutorial on how to change the colors by editing the Theme's main.less.css file, which I guess it's barely sufferable but Ok.

One thing I haven't been able to affect so far is the code coloring of the @media statements.

Old Dreamweaver by default colored @media statements and its closing tag with a dark brown, bold font. Beside that I got used to it, it made my life a lot easier and kept errors down because I really couldn't miss the @media visually. Now that has changed and I haven't been able to find how to affect it in the main.less.css file.

For those that are not aware of how it worked, let's take this example:

@media only screen (min-device-width : 320px) {
        #web_logo img {width: 70%;}
}

Dreamweaver used to use a Dark Brown to indicate the entire @media, including the closing tag, like this:

@media only screen (min-device-width : 320px) {
          #web_logo img {width: 70%;}
}

How do I recreate that effect? I see no mention of @media in the css file and I have no idea of how to add my own.

I read several tutorials but they all focused on changing the color of existing code. If the @media is there (and not only the @media, but the entire line) I have no idea how it is called. Google was no help on the matter.

Thank you for your help.

PS: Why does the window jump around in this forum? It's constantly resizing and bouncing around. Selecting text to edit it or correct a spelling wrror is like playing space invaders with my mouse.

Views

2.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

@media code coloring in Dreamweaver 2017 - no longer colored

Community Beginner ,
Nov 23, 2016

Copy link to clipboard

Copied

Among the many surprises I found in the new DW (including Live view and Live code being on by default, apparently) I discovered that my carefully edited code coloring in CSS (and possibly in HTML and PHP, but I haven't got that far) has been completely scrambled.

I followed the tutorial on how to change the colors by editing the Theme's main.less.css file, which I guess it's barely sufferable but Ok.

One thing I haven't been able to affect so far is the code coloring of the @media statements.

Old Dreamweaver by default colored @media statements and its closing tag with a dark brown, bold font. Beside that I got used to it, it made my life a lot easier and kept errors down because I really couldn't miss the @media visually. Now that has changed and I haven't been able to find how to affect it in the main.less.css file.

For those that are not aware of how it worked, let's take this example:

@media only screen (min-device-width : 320px) {
        #web_logo img {width: 70%;}
}

Dreamweaver used to use a Dark Brown to indicate the entire @media, including the closing tag, like this:

@media only screen (min-device-width : 320px) {
          #web_logo img {width: 70%;}
}

How do I recreate that effect? I see no mention of @media in the css file and I have no idea of how to add my own.

I read several tutorials but they all focused on changing the color of existing code. If the @media is there (and not only the @media, but the entire line) I have no idea how it is called. Google was no help on the matter.

Thank you for your help.

PS: Why does the window jump around in this forum? It's constantly resizing and bouncing around. Selecting text to edit it or correct a spelling wrror is like playing space invaders with my mouse.

Views

2.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 23, 2016 0
Adobe Community Professional ,
Nov 23, 2016

Copy link to clipboard

Copied

The code colouring is limited - for example you can't have language specific code colouring. The joke of all this is that brackets make use of something mode-aware colour coding but for some reason the Brackets integration in Dreamweaver doesn't have this feature! As usual the Adobe developers have made a mess of Dreamweaver and taken more useful features away and added buggy new features. If you want to make a vote for better code colouring options, see here:

Bring back custom code coloring. – Adobe Dreamweaver CC: Feature Ideas

Paul-M, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2016 0
Community Beginner ,
Nov 28, 2016

Copy link to clipboard

Copied

I posted in that thread already. I am so furious with these jokers, I can barely contain myself.

Luckily, I remembered that there was a way to install older versions of the Adobe cloud app, and sure enough I went to the Creative Cloud app "Find additional Apps", and there I found DW 2015. I am installing it now and hopefully I can put this nightmare behind me.

It's obvious these guys have rocks for brains. How do you release a major code editor without code coloring? I might as well use notepad at that point.

What's next? Getting rid of page wrap? Call every menu item "Generic feature"? How about black text on black background? The ultimate minimalist approach.

And don't get me started on that "TokenInspector" piece of crap.

But after all, it is Dreamweaver we are talking about here.  The application that won't let you search inside .ini files unless you go mess around with its core files. Like the folks at Adobe never heard of .ini, .md or other files that these days are all over the place.

I used to have to add those files in the search manually, but I got tired of it and now I just use Notepad++. Now I have it set up with FTP, projects, etc. and I am starting to think that the money I give Adobe every month could be better used to buy a couple of cases of Mexican Coca Cola instead.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2016 1
Adobe Employee ,
Nov 29, 2016

Copy link to clipboard

Copied

I apologize for your frustration. The product team is looking to improve the experience in a future update until which you can continue using the previous version. Am sorry that this experience has been so disruptive for you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2016 0
Adobe Employee ,
Dec 19, 2016

Copy link to clipboard

Copied

Can you check if some of your issues have been addressed in the later update?

See Dreamweaver 2017.0.1 is now live  for more info.

This document  https://helpx.adobe.com/dreamweaver/using/customize-code-coloring.html has been updated to reflect changes.

Thanks,

Preran

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 19, 2016 0
Community Beginner ,
Mar 01, 2017

Copy link to clipboard

Copied

Hi Preran, I am still doing the bulk of my work in DW2015, but I have been checking out how this issue is being handled in 2017. Things are better, but still far from ideal.

For starters, I am not crazy about having to edit a .less file in order to color my code. Surely, it can't be impossible to create an interface similar to DW2015 where colors are chosen from a form-like interface. I already am up to my neck in code, and the .less file is anything but intuitive, at least the last time IO dealt with it. At the very least, I would expect some comments in the file to guide me, since the definitions of the items I need to edit seem unrelated to the item's names.

Additionally, the issue with the brackets has not been addressed. Even with the proper code (and bracket) coloring, it's still easy to miss an @media closing bracket and confuse it with the code contained therein, when they are all the same color it makes it too easy to mess up.

I did find a workaround though. On the @media closing brackets I add this:

@media call {

          .someClass {

                   someStuff:10px;

            }

     } /*EOF@media*/

That way, I can recognize the closing bracket and even search for the string "EOF@media".

Still, it's a pain I'd rather not to have to go through.

On the good news front, I am getting used to the new CSS editor. It's actually quite brilliant, but still not as fast as the older one for simple css. It is invaluable for the more complex one that the old editor couldn't even handle, so having a choice would have been great.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2017 0
LEGEND ,
Mar 02, 2017

Copy link to clipboard

Copied

marco12241959  wrote

Hi Preran, I am still doing the bulk of my work in DW2015, but I have been checking out how this issue is being handled in 2017. Things are better, but still far from ideal.

I agree with you on the @media query { } When it was in that brownish color you could immediately identify it as you scrolled through the css code. I have yet to come across any other editor that can do that though. In most you can change the @media to a different color but I'm with you, it would be nice to be able to change the whole line plus the closing bracket to a different color.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 02, 2017 0
Adobe Employee ,
Mar 06, 2017

Copy link to clipboard

Copied

Thank you for your feedback, and the request makes a lot of sense to me. I suggest letting the team know of your feature request directly using this link Adobe Dreamweaver CC: Feature Ideas

Meanwhile, I will share this forum post with them for their observations.

Thanks,

Preran

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 06, 2017 0
Adobe Employee ,
Mar 07, 2017

Copy link to clipboard

Copied

Sharing the response from the team

Currently if we make the @media line come in red(ex below line), other part of the CSS will also be displayed in Red as they use the same styles.

@media screen and (orientation:landscape) and (min-width:200px) and (max-width:100px){

}

They don't have any immediate plans to change the way this feature works. I suggest using Adobe Dreamweaver CC: Feature Ideas to post your feature request for tracking purposes.

Thanks,

Preran

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2017 0
Community Beginner ,
Mar 12, 2017

Copy link to clipboard

Copied

Has anyone figured out a way to change the @media css and bracket coloring yet?? Please!

Dreamweaver 2017 is so frustrating I can't go back to the  previous version anymore for some reason.

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 12, 2017 0
Adobe Community Professional ,
Mar 12, 2017

Copy link to clipboard

Copied

mkpoppie  wrote

Has anyone figured out a way to change the @media css and bracket coloring yet?? Please!

No.  As stated above, there is no provision for it currently.

I can't go back to the  previous version anymore for some reason.

I have no trouble accessing older versions of the CC software from my Creative Cloud Desktop App.  See screenshot.   You can have multiple versions installed side-by-side.  You just can't use them all at the same time.

CC-DesktopApp.jpg

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 12, 2017 0
LEGEND ,
Mar 12, 2017

Copy link to clipboard

Copied

mkpoppie  wrote

Has anyone figured out a way to change the @media css and bracket coloring yet?? Please!

Dreamweaver 2017 is so frustrating I can't go back to the  previous version anymore for some reason.

Thanks

It can't be done as far as I know. the best you can do is just change the word '@media' to another color which kind of helps but is no where near as obvious as being able to allocate a specific color to the whole media line and the end bracket. You can tell whoever produces this stuff doesn't spend much time writing any code. Having said that I have not come across any other bits of software that can do it either.

DW was one of the best at identifying specific coding such as form input fields, php tags etc. Now all the coding looks the same lol and hard to identify. I keep flitting backwards and forwards to this program and that one trying to work out which I feel more comfortable using, they are all inadequate when it comes to color coding.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 12, 2017 1
LEGEND ,
Mar 13, 2017

Copy link to clipboard

Copied

The solution would be to use a javascript file that modifies what the css is applied to, that way the color that one at the moment can only apply to the initial @media, one could make it apply to the entire statement and the closing brace, ('}') and leave the css properties color coding within the rule unchanged.

As I have pointed out though, if one wishes a modern code editor, (which includes making it fast) this would slow it down, and if too many rules are created that must be modified via javascript are included, then users would then start to complain about the speed.

But it could be done, and that is my point about providing a solution to the original question, and not a 'workaround'.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 13, 2017 1
New Here ,
Mar 17, 2017

Copy link to clipboard

Copied

No offence but the product team should have planned ahead and properly user tested this. Considering that many are now having to spending what should have been billable hours messing with DW just to have something as simple as code coloring changed back to how it was in a previous version.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2017 0
LEGEND ,
Mar 17, 2017

Copy link to clipboard

Copied

It was tested, and the problems with code coloring noted.

The problem is that Dw is now looking to fit in with the other Adobe products, not with what 'older' users think it should retain, or have as improvements.

Dw will never be a front or backend IDE, and much of what was previously thought to make Dw popular, I think will be left to die, (CSS Designer for example). Instead it is looking at what the person who wants something more than Muse has to offer, but less than what would make it a serious contender in web development. This means it is looking at what is quick and easy to incorporate, bring it up-to-date in some areas, and will appeal to those who wish to create small semi-custom sites. This means that users of a popular 3rd part open source framework, and associated tools are its target user.

Whilst I can see the logic in this from an Adobe product user point of view, I think it is a road to disaster for Dw itself, as those who do wish to do more than create sites for IE8 era browsers, have or will look elswhere, and never consider Dw again once they do, (I'm one of those).

The only thing you can do if you wish to change this is to file Feature Requests, or even say what is wrong with Dw now, (in your opinion) by filing FR's at -

https://dreamweaver.uservoice.com/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2017 0
New Here ,
Mar 17, 2017

Copy link to clipboard

Copied

Of course DW was run through a QA/QC process, i guess my statement really speaks to the decisions which are made based on the outcome of said process and how management decided to handle the discrepancy reports which are inevitable generated through acceptance testing. You're response to my statement does validate the assumption i alluded to that DW 2017 was still rushed through release despite the problem being noted. (Management pressure i presume)

I whole hardheartedly agree that a future forward outlook is a positive one (I personally no longer support legacy browsers such as the IE-8 you alluded to unless forced to by extraneous circumstances), applications shouldn't become too anchored in the past. The problem however is that many believe (a statement that can be validated by googling it and the dreamweaver.uservoice.com site) that not maintaining basic user conventions such as configuration settings or at least keeping their migration in mind between versions is bad form on Adobe's behalf. I shouldn't have had to spend the last hour messing with the open source framework (brackets) that Adobe injected into it's application. These things should have been done by default, correctly the first time! (They were in all previous versions of DW CC)

Ultimately, as you state unless we speak up using portals such as the Adobe Forum or the Uservoice sites we the paying customers won't be given appropriate consideration. Adobe has some great tools, but they also seem to (more recently that previously) to be dropping the ball when it comes to their releases. A trend which honestly worries more than just myself.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2017 0
Adobe Community Professional ,
Mar 17, 2017

Copy link to clipboard

Copied

I just looked at the list of products and services Adobe has both on & off the Creative Cloud.  Some of these I'd never heard of before.   When a company has it's interests spread out in so many different directions, some things are bound to suffer.   

I like DW and I regularly use it in combination with other tools.  But DW feels more & more like the neglected child in a bad reality TV show about a family of 150+.  It's not getting the same love and care that other Adobe products receive.  And when a product isn't loved enough by the family who makes it, how soon will it be before it's unloved by its principal users?   

Open Adobe's flagship product, Photoshop.  Go to Help > About Photoshop and let the credits scroll to the bitter end.  Seriously, it goes on & on for like 10 minutes.  Then do the same thing in Dreamweaver.  It's no contest.  Photoshop is the clear winner here with more talent & support people than you can shake a stick at.   That's why Photoshop is where it is and Dreamweaver isn't.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2017 0
LEGEND ,
Mar 17, 2017

Copy link to clipboard

Copied

It's not just in Photoshop that you should look at the 'About' team members in, even almost unknown beta only products have larger teams. Edge Animate even had 3 times the development team size, and that was abandoned.

As for it being unloved, for many developers it is to late for Dreamweaver to win them back. I'm sorry Preran, but until the Dw team interact more with users, (and 'others') then i cannot see the situation improving, and bad decisions will be continually made.

Adobe Max last year, forced the team to release Dw 2017 when it was not ready, but i have doubts about just how 'unready' it actually was.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2017 0
Adobe Community Professional ,
Mar 17, 2017

Copy link to clipboard

Copied

Face it.   Design & Animation tools are sexy.   Web authoring  / coding tools aren't sexy. 

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2017 0
LEGEND ,
Mar 17, 2017

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

Face it.   Design & Animation tools are sexy.   Web authoring  / coding tools aren't sexy.

The stupid thing about Edge Animate, was that the original prototype was developed by the Dw team for inclusion at some point in the future in Dw. using css transforms, css transitions, and in the future css animations.

Instead it became a program that lost all contact with reality, and tried to become a replacement for flash content.

Dw ended up with the silly transforms panel, that has not been touched since it was introduced in CS6.

Edit: I should point out that the above was not covered by nda, as the prototype was originally shown in the Dw blog, and I posted a link to it in a discussion about html 5 and css3. The demo was removed shortly afterwards, and when asked why we were told about Edge Animate. This was very shortly after an Adobe executive issued that famous statement about Adobe not ignoring html 5, css3 and mobile devices.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2017 0
kratika LATEST
New Here ,
Jun 28, 2020

Copy link to clipboard

Copied

Hi All,

 

We have started working on “Code Color Customization” improvements by adding support for customization of generic and language specific colors.


We have further stabilized the code coloring feature in our latest Prerelease build 15333.


You can refer to below thread for more details on code coloring customization improvements.
https://forums.adobeprerelease.com/dwalpha/discussion/467/dreamweaver-build-15333-is-now-available#l...

 

Please join Dreamweaver beta program from below link and try out the feature.

https://www.adobeprerelease.com/beta/9EB451B5-D2E8-46E5-AFA2-78C85442FFA2/participate/CD0C95AA-6274-...

 

Please go ahead and try out the build and let inflow your thoughts/suggestions. Looking forward to your valuable feedback.

 

Thanks


Dreamweaver Team

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2020 0
Adobe Community Professional ,
Nov 23, 2016

Copy link to clipboard

Copied

I'm pretty sure the main.less file uses the same color for matching brackets { { } } throughout.

I have not done extensive work yet with the Token Inspector described below.  Maybe after the Thanksgiving Holiday, I'll have more time.

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

In the meantime, the theme I grabbed from GitHub called RubyBlue, expresses brackets in these selectors.

.CodeMirror-matchingbracket {

        color: @rb-magenta !important;

        background-color: transparent;

}

.cm-meta,.cm-keyword,.cm-bracket {

    color: @rb-magenta;

}

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2016 1
Adobe Community Professional ,
Dec 19, 2016

Copy link to clipboard

Copied

It doesn't look like they have included the Brackets mode-aware styles in the less theme file for code colouring, code colouring according to a file type is NOT the same thing.

Paul-M, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 19, 2016 0