Skip navigation
annestahl!
Currently Being Moderated

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

Aug 12, 2013 10:47 PM

Tags: #css #panel #customize

Creative Cloud DW has many changes to the CSS panel  something I used to use all the time. It doesn't open the CSS dialog when I double click the selector, I don't like how it displayes the properties, it wastes important 'real estate' with 'Sources' and '@Media' and I don't use them... pls pls don't make me hate the decision to have spent money to get this new version of Dreamweaver which has only made things worse... at least let users customize this panel to where it's usable again!

 
Replies
  • Currently Being Moderated
    Aug 13, 2013 4:14 AM   in reply to annestahl!

    I am in the same boat. Its even worse using it on a laptop.

     

     

    I went back to CS6 like many others. Unfortunately Adobe don't seem to care much anymore about what customers want.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2013 10:09 PM   in reply to solaced

    @annestah ,solaced

     

    Can you guys please log a request at https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform.

    We already have a few requests for the same and your requests would add more weight to the requests and help in prioritising this request in our enhancement request queue.

     

    In the mean time , I would suggest you to minimise the Sources and @media panes by clicking on them .

    I also hope you know that the  CSS Designer panel can work in a two column as well as  a single column layout as in the below screenshot

     

    CSS DEsigner.png

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2013 7:16 AM   in reply to annestahl!

    The attributes don't just autocomplete anymore like they do in ChromeDevTools, Firebug or even DW CS6. I feel like this panel should operate as responsively or intuitively as they do. This whole panel seems to be something that would be better off in Adobe Edge Reflow and not Dreamweaver. or at least the ability to switch to something more like the old. but even that wasn't as good as what is possible now. I though they'd get it right by CC

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2013 8:46 AM   in reply to annestahl!

    I've been using the CSS Designer panel for many months now (I had early access because I was presenting a lab at Adobe MAX in May). I've worked with it both on a large desktop monitor and on an 11-inch MacBook Air. Although the space on the laptop is cramped, I wouldn't go back to the old CSS Rule Definition dialog box or CSS Styles panel for anything.

     

    Don't get me wrong. I think there are many things that could be done to improve the usability of the CSS Designer, but I feel that once you get used to it, you'll find it far more efficient than the old panels. New workflows are always disruptive, and they're probably the last thing you want to cope with when you're under a deadline. But I do urge you to give it more time.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 26, 2013 5:32 PM   in reply to annestahl!

    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!

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 29, 2013 7:06 PM   in reply to annestahl!

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 29, 2013 11:35 PM   in reply to annestahl!

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 4, 2013 12:46 PM   in reply to annestahl!

    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:

    Real-Time-Visual-Css-Editor.png

    1. Select a class in code view
    2. CSS Designer updates on the fly, showing me the properties of the selected class
    3. I edit the desired property
    4. 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.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 4, 2013 8:21 PM   in reply to Web Magi

    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!

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 4, 2013 8:54 PM   in reply to kwgonline

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 4, 2013 9:20 PM   in reply to kwgonline

    kwgonline wrote:

     

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

    My guess is, there are many "seasoned CSS editors" who would agree, at least from the standpoint of having the option to switch between visual controls mode and text properties mode. For me, I prefer to work directly in the style sheet when the need arises.

     

    Message was edited by: Web Magi

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 6, 2013 7:28 AM   in reply to annestahl!

    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???

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 6, 2013 7:58 AM   in reply to Web Magi

    For us, the limitation when working with the style sheet is it isn't synced directly to the design and code view like the property editor is. This is the main reason we use DW over other CSS editors. With this we can quickly edit CSS properties by clicking on required areas in either view. This consolidates all the defined CSS in a concise list in the property editor without having to switch over and hunt around in the style sheet. This is very important for our team as we work on large shopping sites using style sheets assembled over time from many different developers. The style sheets are typically very messy and we don’t have the time or the authority to rewrite the styles in a more logical order. So this is the most efficient solution for us in this nature of editing; unless someone knows of a more efficient solution?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 6, 2013 8:26 AM   in reply to kwgonline

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 6, 2013 8:39 PM   in reply to David_Powers

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 6, 2013 8:46 PM   in reply to kwgonline

    Fantastic!!

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 6, 2013 9:08 PM   in reply to David_Powers

    Thank you for making light of the fact that even though the option to turn the old interface back on is there it will most likely be eliminated in the future.

     

    We haven't started using the new DW CC version yet, and because of this we will not move forward. Even though the option to turn the feature on is there, migrating now will most likely render our projects backwards incompatible with CS6 if forced to start using again.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 6, 2013 9:52 PM   in reply to kwgonline

    Dreamweaver will probably never be all things to all users. I've definitely lost features I felt were important to my workflow, which is why I still keep CS6 around, as well as older versions installed on secondary machines. I've taken hundreds of projects from concept, to design, to build, to production, to launch - and Dreamweaver CC is beginning to fit my needs better than any previous version. I think it's better than it's ever been. Is there room for improvement? Of course there is!

     

    I'm certainly not a coder elite, I'm more of a jack of all trades. So the more I can do in DW, the happier I am. CSS Designer allows me to layout my designs in short order, without having to rely on an outside editor. But it does make sense to keep DW relevant for CSS & code ninjas, so why remove the old CSS Styles panel? Can't the two continue to coexist?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 7, 2013 6:39 AM   in reply to kwgonline

    kwgonline wrote:

     

    Thank you for making light of the fact that even though the option to turn the old interface back on is there it will most likely be eliminated in the future.

    Just to clarify, I didn't say it will definitely be eliminated; but you should never rely on undocumented features in a program.

    We haven't started using the new DW CC version yet, and because of this we will not move forward. Even though the option to turn the feature on is there, migrating now will most likely render our projects backwards incompatible with CS6 if forced to start using again.

    There's no way that using Dreamweaver CC will make your projects backwards incompatible with CS6, particularly if you're using the old CSS Styles panel.

     

    Both the CSS Styles panel and the CSS Designer are simply interfaces to the style sheet, which is written in plain text. Both panels create 100% standards-compliant CSS.

     

    Reading through your other posts, I think you might find that version 13.1 of Dreamweaver CC actually helps rather than hinders the way you handle CSS. An important new feature in 13.1 is Live Highlight, which adds a light blue overlay to all elements affected by the currently selected selector in the CSS Designer. Clicking the selector again toggles the highlighting off. You can also disable the highlighting if it gets in the way. The CSS Designer also has a fuzzy search field that makes it easy to locate styles in long, disorganized style sheets.

     

    It takes time to learn how to use new features, but you might just find that it saves you time in the end. But if you want to stick with CS6, that's fine. Adobe has said it will continue to support it, at least for the forseeable future. I suppose the time will eventually come when it either turns off support or releases a new version on a perpetual licence. But judging from a chat I had with an Adobe exec a couple of days ago, the subscription model is here to stay.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 7, 2013 11:02 AM   in reply to David_Powers

    David:

     

    I appreciate your clarifying the backwards compatibility Deamweaver CC supports and that both panels create 100% standards-compliant CSS.

     

    With this and the other new features you mentioned “Live Highlight” and the ”Fuzzy Search Field” I will take a closer look at the potential moving forward offers.

     

    As creative director I have to be certain the training cost of moving foward with Dreamweaver CC are justified by increasing productivity and ultimately adding more creative potential to offer our clients and this sounds very promising - Thank you!

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2014 2:46 AM   in reply to kwgonline

    The new CSS designer panel is toy-time ... its aweful, seriuously little pictures showing padding, margin etc ...., makes you wonder where Adobe are going with Dreamweaver ... shame

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2014 9:04 AM   in reply to Energize

    I do a ton off hand coding, PHP and CSS. I actually, really like the new CSS designer panel for several reasons.

     

    1. It's an extremely efficient way to see what part of the CSS code is being used to control individual elements in your layout. This makes troubleshooting and finding broken div tags much faster.

     

    2. It makes working with fluid grid layouts much easier to organize.

     

    3. For several functions, the live update in design view helps me adjust features very very quickly. This does not work for everything, but for the things it does work for it is simply amazing.

     

    4. Have you tried using the CSS design panel to rearrange the order of your CSS code on the stylesheet? That in and of itself is an amazing tool.

     

    Expecting any design panel or interface to completely finish professional work is a bit of a stretch for me.

     

    Here is something I would really like to see implemented in Dreamweaver. Have you ever used the inspect element features in Chrome or Safari? Both of these browsers, and even Firefox, have an amazing ability to show you your actual CSS as it influences individual elements on the page in real time. This is where I fix 90% of any CSS issues I find in my site. You can add code, change code, do anything you want, and see the results in real time. There is also no guessing whatsoever as to which CSS styles are being overridden by the browser. This can be an incredibly powerful tool. After changes are made you can actually copy and paste the edited CSS document back to your site's CSS files.

     

    Can CSS, server behaviors, jquery and other tools be made better, easier to use, and in the end help us create better code, faster loading pages, and improve our salability as an expert? Sure, and I think Dreamweaver has made me a much better and much more salable talent. Does limiting yourself to one tool make you a better craftsman? Certainly not. Who would hire a carpenter that only knew how to use a hammer?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2014 7:02 PM   in reply to solaced

    I agree, I really dislike the new CSS panel. It's too cramped, I keep accidentally scrolling past the properties I want to adjust. Also, it seems to have a mind of its own, often times not showing me the CSS classes/id's that I am looking to adjust. I have to keep clicking on the page several times to get the right ones to show up. Also the form entry fields are unintuitive and cumbersome - sometimes they stubbornly are trying to auto suggest stuff to you and won't let you just simply enter in a value.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 1, 2014 8:42 AM   in reply to annestahl!

    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 '#'."

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 1, 2014 9:22 AM   in reply to Gary Sprung

    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!

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 1, 2014 9:35 AM   in reply to Gary Sprung

    Gary Sprung wrote:

     

    One cannot just click the +, type a selector, then add properties.

     

    The DW Help page more or less asserts this:

    You've misunderstood the Help page. In the old interface, you needed to choose Tag, ID, Class, or Custom before creating the selector. That's no longer necessary. You simply click the plus button.

     

    Dreamweaver inserts a suggested selector, but it's highlighted. So, you can just start typing. That deletes the suggestion, and inserts whatever you want.

     

    What's missing from the new interface are buttons to make the suggested selector more or less specific. But Adobe has been listening to feedback about the CSS Designer. I wouldn't be surprised to see some changes to how it works in the next release.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points