I can't stand the new CSS Designer panel. Can I customize it to work like the old CSS panel?

subhadeep_banerjee

Participating Frequently

@LeeBow,

Switch back to the CSS Designer using Ctrl+Shift+Alt+P

Tell us what you hate & like.

-Subhadeep

L

LeeBow

Known Participant

Hi,

I have switched back to the "CSS Designer using Ctrl+Shift+Alt+P" -- the problem is - none of the css properties are shown.

You get the list of the css rules - but when you click on an item - you don't see the properties.

In this image Dreamweaver CS6 - someone has clicked "ul.MenuBarHorizonal li" - and it shows all the properties to do with that...

In this image -- I've clicked ".header" - and in Dreamweaver CC - and it wont show you the properties, it just stays blank. You also cant double click a css rule to see the properties - you've got to right-click and "Edit..."

It's just these little things that have made Dreamweaver just more of a hassle - when the old designer was so good (especially for people who have used it for years). It's annoying when its so close to still being included in CC - but the functionality is missing.

D

Designer5847

Participating Frequently

Boy I have to agree. I spent several days working with the new DW and it's pretty bad. It's has fiddly feel to it now... if that's even a word. Way too much information the css designer panel. They seem to be catering to the novice rather than designers or developers now with big illustrations of what padding and margin is???? Fluid grid layouts is difficult to work in as well. Not very happy with it. We went back to 12.2. I agree with a classic view option.

Jon Fritz

Community Expert

I heard the Ctrl + Alt + Shift + P shortcut was working again in the latest version to turn the CSS Designer back into the older CSS Panel.

I haven't updated that far (I'm still in CC2014.0 and it exists there) but 2014.1.1 apparently has it again according to other posters here in the forum.

L

LeeBow

Known Participant

The "Classic" CSS Designer is kind-of there in version 2014.11 -- but NOT in a very handy usable way - like it was in CS6.

If you click on a style - you will not see any properties - so all it really does is let you click and link back to the classic style editor

Being able to directly edit the css properties while viewing the split preview/html view window - let you do all things at once - quickly see the set selected css style properties - and still see the html code and a bit of a preview of the page.

Now you actually have to keep going to the css file to make changes to the css styles.

Adobe -- PLEASE FIX THIS PROBLEM!!!

It's us paying for your software - long time users of dreamweaver - who want it to work how its always worked. Maybe your new users like the new design - but it must be clear to you that your long-time users don't!

subhadeep_banerjee

Participating Frequently

Hi All,

We have introduced some workflow improvements to the CSS Designer Panel in the release of Dreamweaver CC 2014, which is now available for download.

Download it from https://creative.adobe.com/ or directly through the Creative Cloud desktop app.

For a list of what's new, check out this link: https://helpx.adobe.com/dreamweaver/using/whats-new.html#CSS Designer enhancements

Make sure to take a look at it whenever you get time. We’re eagerly awaiting your feedback.

P

Paul-M

Legend

Is the ability to revert to the old classic CSS panel going to be fazed out? The CSS designer panel is terrible and totally out of place in what is supposed to be a professionals level editor ... where are you going with Dreamweaver, it appears you are turning it into an entry-level WYSIWIG for novice web designers??/

Paul-M - Community Expert

Gary Sprung

Known Participant

Another issue with the Designer panel, as far as I can tell, is that you cannot create a new style independent of the HTML code. The Format->CSS Styles->New Style command is gone, as is the button on the bottom of the Styles panel. The new + symbol on the Selectors bar in Designer appears to be totally context dependent. You must have an HTML element selected for it to work at all. One cannot just click the +, type a selector, then add properties.

The DW Help page more or less asserts this:

Define Selectors

In the CSS Designer, select a CSS source in the Sources pane or a media query in the @Mediapane.
In the Selectors pane, click . Based on the element selected in the document, CSS Designersmartly identifies and prompts you with the relevant selector.

The Help goes on to say,

"Unlike the CSS Styles panel, you cannot directly select a Selector Type in CSS Designer. You have to type the name of the selector along with the denotion for the Selector Type. For example, if you are specifying an ID, prefix the name of the selector with a '#'."

Participating Frequently

This new interface is a specialized WYSIWYG CSS editor. It lacks the direct editing functionality with the CSS style sheet as the previous interface provides. Although it's useful for specialized workflows, such as fluid grid layouts, it isn't a go-to-for-all interface, to say the least. All our coders gave it a serious try and found it to be very limited in our daily workflow. All our coders use the old interface, as it's still available for now!!! However, this may not be available independently. We do have an employee who really likes the new interface though, one of our secretary’s, she's currently taking an interest in coding and finding it fun to work with. So I do see it attractive for new novice users! Maybe this is the market Adobe is moving towards. In my experience, it does seem as though, as users advance in their skills, they typically migrate away from Dreamweaver. So it's probably a good idea to focus more on acquiring new and getting them hooked on the new WYSIWYG CSS editor, while removing the direct coding interface as much as possible to limit the rate at which they’ll become more advanced users...just an intuitive guess!

kwgonlineCorrect answer

Participating Frequently

Nithya.MV Wrote:

You can always switch back to the old panel. Ctrl+Shift+Alt+P

Thank you so much!

This works perfectly!!!

Now...why hasn't this been previously noted here???

David_Powers

Inspiring

kwgonline wrote:
Now...why hasn't this been previously noted here???

Probably because it's an undocumented feature. It's doubtful that the option to turn the old panel back on will always be there. Nithya MV is an Adobe employee, and it's interesting to note that her original message has been deleted, indicating perhaps that the information wasn't intended to be public.

I suggest that you follow vharis's advice earlier in this thread to submit a request through the form at https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform, either for the restoration of the old panel, or for ways to improve the CSS Designer. Explaining your needs in this forum is less likely to get noticed by the relevant people in the product team than by submitting requests through the official form.

Participating Frequently

There is no way to improve the new designer interface to be what is already there and working perfectly for us. Attempting to do so would simply be incorporating the original method as an option to edit with. Any type of interface that ads more labeling and separates the property values out further across the screen will be less efficient to our workflow. Also, we have to maintain the original ordered structure of the style sheets we work with and the new designer interface rewrites the code into its own new structured placement. The lack of the original list style property editor will force us to work directly in the style sheet with greatly reduced efficiency, therefore, losing the main benefit of using DW as our CSS editor of choice.

I do post opinions and feature requests via the wishform as well as here in the forum. Hopefully this will build more active awareness towards the need to keep a highly efficient method for editing CSS.

Web Magi

Participating Frequently

Dreamweaver has needed a real-time visual CSS editor for as long as I can remember. For me, a "real-time visual CSS editor" looks and works something like this:

Select a class in code view
CSS Designer updates on the fly, showing me the properties of the selected class
I edit the desired property
Live View updates on the fly, showing me the results of my changes.

This workflow allows me to troubleshoot complex structures visually, in real time, very quickly. A huge time saver!! The old CSS Styles panel had its uses, but it is not a real-time visual CSS editor by any stretch.

There is always room for improvement, like having a "Put" button directly within the CSS Designer panel so that I do not have to switch to the CSS file in question for uploading, but CSS Designer is a necessary component of Dreamweaver going forward.

Participating Frequently

I agree, there is a need for the new drag-n-drop editor.

However, there is still and will always be a viable need for a flat-view direct property editor which focuses on just the CSS properties the user is working with without all the other controls and labels separating the properties considerably apart and preventing the direct typing in of CSS as written in the style sheet.

A further limitation with these type of real-time drag-n-drop editors is they deviate new to novice users from learning and understanding how the actual CSS code is written and functions as the editor is doing all the code writing for the them.

My vote is: both editing approaches are viable in today’s production environment!

BenPleysier

Community Expert

What CSS Designer panel???

I have removed it from my work space and now use SASS. This gives me a much faster workflow. Just have a look at the following SCSS code

$mainColor = #333;
$defaultSpacing = 10px;
.news {
margin-bottom: $defaultSpacing;
background-color: $mainColor;
h1 {
padding: $defaultSpacing/2;
}
}

Which is compiled to CSS as

.news {
margin-bottom: 10px;
background-color: #333;
}
.news h1 {
padding: 5px;
}

If I need to change the colour or the spacing, I do that once and the CSS changes automatically.

I think it is time for DW to accomodate the likes of SASS and/or LESS

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

sob508508

Participating Frequently

Thanks David for feedback above.

However though this change in focus of what the css editor should be, and the fact that this seems to show that Dreamweaver is headed in that more drag and drop, novice user direction, and not moving in the direction of the more advanced code editing stuff like code folding, code block rulers, custom colouring, etc. I have always loved the cool drag and drop functionality and panel inspectors that allow us to qucikly input attributes, like in the CSS and Properties panels, but this is now coming at too big a sacrifice for the very fluid code/text editting features that another coding IDE gives me (won't mention here). So for now I am going to have to stop my 10 year relationship with DW. It's been a good run

D

denelson1

Participant

I am the same. Absolutely cannot stand the new CC CSS Designer panel.

It slows down the process of editing CSS to a crawl... Honestly there is just no way I can continue to use it.

Participating Frequently

I'm in total agreement with you here!

This new designer feature is targeted towards beginner and novice users. I work with a team of seasoned CSS editors and every one of them refuses to use this and have stayed with CS6 until this is fixed or they are forced into something else.

David Powers suggest - It just takes time to get used to it. With all respect David, this is not the case; you can never edit CSS as efficiently as directly typing it in a property box or in the style sheet. And via the style sheet requires switching back and forth, etc.

I hope this feature is restored as an option before CS6 is unavailable!

Paevo_Kelley

Inspiring

This doesn't make sense. If the new CSS Designer panel is geared toward novices, then why would you remove the CSS Rule Definitions dialogue which actually makes it easier to choose CSS rules by simply selecting them from a drop down list?