25 Replies Latest reply: Aug 2, 2015 8:33 AM by Nancy O. RSS

    On Dreamweaver CC how do I get to the css rule definition box?

    Nuno Arraia Community Member

      On the other Dreamweavers when I wanted to edit a css, I selected the css and clicked on the pencil icon to open the css rule definition box.

      The only way I find to get acess to the css rule definition box on the new CC is when I am creating a new div and then there is a option for a new style and it opens the box.

      My question is how do I get to the box once the rule is created? the pencil icon is not there anymore.

      Not good breaking workflows Adobe, some folks have work in progress...

      Please help, thanks.

       

       

      https://dl.dropboxusercontent.com/u/105870069/img/ask.png

        • 1. Re: On Dreamweaver CC how do I get to the css rule definition box?
          sudarshan.t Community Member

          The new CSS Designer in CC has a lot more features and has a different interface to that of the previous versions of DW.

           

          To edit styles for a chosen selector, you need to first highlight the selector in the 'Selectors' panel. In your case, select '#wrapper' from Selectors panel first. Then, the 'Properties' panel below it will display all available customizations you can make to that selector.

          • 2. Re: On Dreamweaver CC how do I get to the css rule definition box?
            bgupta16 Adobe Employee

            Please refer to the help document explaining the details on the new CSS Designer Panel.

             

            http://helpx.adobe.com/dreamweaver/using/css-designer.html

             

            Thanks

            Bhawna

            • 3. Re: On Dreamweaver CC how do I get to the css rule definition box?
              Nuno Arraia Community Member

              Hi, thanks for the answer.

              I get the new features and the minimal inferface design, my point is that the css rule definition box exists on Dreamweaver CC, by inserting a new div and chosing -> new style, ok it has a new interface, but it has no reason to remove acess to the css rule definition box once the rule is primary created.

              Yes I can style the CSS on the Properties box and the changes are live, but do I have to change the way I work only because they want me too?

              They didn´t remove the css rule definition box, they only removed the acess to it, and with that forcing me and maybe others to change the workflow.

              What I want to know is if there is a way to call the css rule definition box, I tried on settings -> css the double click option and nothing.. double clicking on rule does nothing.

              • 4. Re: On Dreamweaver CC how do I get to the css rule definition box?
                ohio818 Community Member

                I absolutely despise the new CSS Designer.  I just uninstalled CC and reverted to CS6.  It's awful.  Just awful.  Why wouldn't we just be given the option to use the properties box we've been using for so many years?

                 

                Also, I can't stand that certain interactions in CC applications require that I actually press down the physical button on my MacBook Pro trackpad.  Tapping won't work anymore.  I have to physically press down the button.  Why on earth would tapping functionality be altered?  That shouldn't even be allowed.  The OS-level settings should always override. 

                 

                Overall, very disappointed with some of the "enhancements" in the CC versions of the Adobe apps.

                • 5. Re: On Dreamweaver CC how do I get to the css rule definition box?
                  foreverahippy Community Member

                  I'm thinking the fact that double clicking in the CSS Designer does NOT open the CSS Rule Definition box is a bug.

                  There is a workaround, even though it's a bit tedious to have to move your mouse across the whole screen instead of just double clicking.

                   

                  Click on the rule you want to edit in CSS Designer, then on the left side of the property inspector (bottom of the screen), click 'Edit Rule'.

                   

                  Voila, this will give you the CSS Rule Definition box.

                  • 6. Re: On Dreamweaver CC how do I get to the css rule definition box?
                    Nuno Arraia Community Member

                    @foreverhippy

                     

                    Edit Rule button opens CSS Rule Definition Box.

                     

                    Thanks, that was the answer I was looking for my question, it really is a workaround, but makes me gain acess again to the CSS Rule Definition box once the rule is primary created. For me that is the correct answer, and not the "do it another way and live with it" answers.

                    Cheers!

                     

                    https://dl.dropboxusercontent.com/u/105870069/img/solution.png

                    • 7. Re: On Dreamweaver CC how do I get to the css rule definition box?
                      sedesign Community Member

                      this workaround only seems available if you're working on the visual page... i cannot access the "edit rule" dialog when working strictly with the .css file... which was extremely helpful (tho yes, admittedly lazy and not brain-taxing). I cannot see the colours anymore... so when i'm tring to work quickly, i'm completely stymied... the properties panel does not seem to display the colour swatch like it used to for, say, background, or color properties. THIS IS NOT HELPFUL.

                       

                      IS THERE SOMEWHERE i need to turn it ON?? or is this a bug?? (i'm using pc version, not mac)

                      i don't know about the rest of you, but i cannot memorize the hexcodes for 120 different designs... and what colour they actually are...

                      i really LIKED being able to SEE the colour in the properties box when editing the .css file...

                       

                      please help. this is screwing with my workflow... hopefully i'm just missing something, and adobe didn't just arbitrarily get rid of that.

                      • 8. Re: On Dreamweaver CC how do I get to the css rule definition box?
                        cknyght Community Member

                        I agree, please bring back the CSS Rule Definition dialog box! At least make it an option in the preferences. I dislike having to click and unclick that "Show Set" thing too.

                        • 9. Re: On Dreamweaver CC how do I get to the css rule definition box?
                          Jon Fritz II MVP

                          cknyght wrote:

                           

                          I agree, please bring back the CSS Rule Definition dialog box! At least make it an option in the preferences. I dislike having to click and unclick that "Show Set" thing too.

                           

                          It still exists in CC, though it's undocumented and may not stay.

                           

                          Hit Ctrl + Alt +Shift + P and the CSS Designer will turn into the old CSS Panel.

                          • 10. Re: On Dreamweaver CC how do I get to the css rule definition box?
                            cknyght Community Member

                            Great tip, it works, thank you! The only weird thing it that you can't double click a rule like you used to, you have to right click and select edit to view the dialog box.

                            • 11. Re: On Dreamweaver CC how do I get to the css rule definition box?
                              ohio818 Community Member

                              Thanks for this.  I'm on a Mac though and I figured out that I needed to do Command + Option + Shift + P.

                               

                              I would really hope Adobe keeps this as an option.  I've been using CS6 up until today because of this.  Not all of us are preschool-level designers who need visual guides for all CSS rules.  The old system works perfectly—it's easy to work with and saves me a lot of time, as compared to manually editing CSS files.  Sure, it requires a fairly thorough knowledge of CSS, but Adobe needn't punish me for knowing my CSS.

                              • 12. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                Nancy O. MVP

                                I can't remember the last time I used DW's CSS panels. If you know CSS, why not use code view?  DW's Code Hinting is very good &  it's much quicker to edit code directly in the style sheet than it is in CSS panels.  

                                 

                                 

                                Nancy O.

                                • 13. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                  ohio818 Community Member

                                  Nancy O. wrote:

                                   

                                  I can't remember the last time I used DW's CSS panels. If you know CSS, why not use code view?  DW's Code Hinting is very good &  it's much quicker to edit code directly in the style sheet than it is in CSS panels.  

                                   

                                   

                                  Nancy O.

                                   

                                  I like to modify CSS as I'm coding the HTML side of things, and I like to have the HTML code consume most of my screen. I don't like to flip back and forth between scripts to make a quick change to the CSS. This is just how I work best. I find the old-fashioned CSS Styles panel to have the perfect blend of raw editability and code hinting.

                                  • 14. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                    Herbert2001 Community Member

                                    Nancy O. wrote:

                                     

                                    I can't remember the last time I used DW's CSS panels. If you know CSS, why not use code view?  DW's Code Hinting is very good &  it's much quicker to edit code directly in the style sheet than it is in CSS panels.  

                                     

                                     

                                    Nancy O.

                                     

                                    That depends a bit on the situation. For example, in Netbeans I use the live connection with Chrome (embedded view or not) and I can then select an item in the live view in Chrome, which opens the css properties panes. These are quite similar to DW.

                                    By changing the values in the css properties pane the changes in values are automatically saved in the css file, and visually updated in realtime in Chrome.

                                     

                                    It can be very handy to quickly change the position or margin/padding/size of an element this way without having to switch back and forth to your css. Bit similar to the inspect element pane in FF and Chrome, and the changes are immediately saved.

                                     

                                    When I still used DW I used it in the same manner for quick visual changes - and no reason to rummage through my css code.

                                     

                                    In short, those css inspector panes can work quite efficiently when you need to polish the css code.

                                     

                                    Granted, I would never use it while working on the main css code - but for slight and quick changes it can be a very handy feature.

                                    • 15. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                      Nancy O. MVP
                                      In short, those css inspector panes can work quite efficiently when you need to polish the css code.

                                      For quick edits, sure.  But I don't rely on them much.  For majority of my CSS revisions, I use Firefox with the Web Developer Toolbar.  Same workflow as yours.  You can edit CSS in real time.  Copy & paste revised code into DW & save.

                                       

                                       

                                      Nancy O.

                                      • 16. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                        Herbert2001 Community Member

                                        That's what I used to do - but the copying and pasting part just broke my workflow.

                                         

                                        Are you aware of the style editor in FF's web developer tools? Very handy, since it allows you to change the css code in any of the css files, while it updates the screen instantly.

                                         

                                        Tools->Web Developer->Style Editor.

                                         

                                        Major selling point: you can save those changes, and the css style editor allows you to turn css style sheet on or off in a layer-like fashion.

                                        • 18. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                          Rick Gerard MVP

                                          You want to hear something really weird? I do most of my CSS editing in chrome using the inspect feature or in Safari on a Mac. You can edit the CSS code right on the webpage using the inspect code tool, watch the changes, and then just copy and paste the entire CSS document into your original.

                                           

                                          Most of my original CSS is written my hand, but the web inspector in chrome or Safari is a marvelous and handy tool to help you figure out where your CSS has gone wrong.

                                          • 19. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                            MurraySummers ACP/MVPs

                                            Rick - I agree with you. The style editors in Safari, Chrome, Opera or FF are an indispensible tool for me.

                                            • 20. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                              deltacharliegolf Community Member

                                              Thank you, Thank you, Thank you, Thank you, Thank you, Thank you, Thank you, Thank you, and Thank you, for the CTRL+ALT+SHIFT+P reply. I needed that!

                                              • 21. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                                eriqc Community Member

                                                @Jon Fritz THANK YOU YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

                                                 

                                                I upgraded to Dreamweaver CC only to be driven mad by the new Designer panel which is plain awful to use compared to CS6. That was the only issue that caused me to cancel and go back to CS6 since last year. I searched extensively about this before and just gave up as there were many complaints I found, but no solution. Decided to query it again today just to see if there were any updates, and found this thread with your solution.  I'm so happy.

                                                 

                                                Adobe needs to document this and make it a VISIBLE OPTION in the settings. They better not fully remove it!

                                                • 22. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                                  LeeBow Community Member

                                                  Oh thank GOD that I found this post!!!

                                                   

                                                  The new css properties editor is one of the WORST updates ever made to software since - the only thing I can think of that comes close is the change from windows 7 to windows 8 and the removal of the start menu.

                                                   

                                                   

                                                   

                                                   

                                                  Adobe -- BRING BACK THE ORIGINAL CSS EDITOR - we pay your wages with our subscriptions. If the original editor is ever removed - I will have to start looking for other software.

                                                   


                                                  Thanks to Jon Fritz II! It's not 100% the same as in cs6 - but its close enough until Adobe fix their mistake.

                                                  • 23. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                                    Nancy O. MVP

                                                    Many people actually like the CSS Designer.  But I understand change is hard.  Don't hold your breath for a return to the old panels.  I'm afraid that ship has sailed... 

                                                     

                                                    DW has excellent CSS code hinting features in Code View. Have you tried it?  I prefer to work directly with code because it's so much faster than editing in panels.

                                                     

                                                    Nancy O.

                                                    • 24. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                                      N_Ray007 Community Member

                                                      To Nancy

                                                       

                                                      I think you are not telling the truth, find one person who likes it, just one. I think you have just been told to say what you said and have no idea just how upset everyone is

                                                       

                                                      I hate what you have done, WordPress in moving forwards and you are moving backwards
                                                      Its all about simplicity and not making your clients jump through hoops


                                                      I just hope adobe still allow me to download CS6 (which I cant find on the cloud) or I will cancel my membership and buy the old software second hand

                                                       

                                                      Very annoyed
                                                      Nick Ray Ball

                                                      • 25. Re: On Dreamweaver CC how do I get to the css rule definition box?
                                                        Nancy O. MVP

                                                        N_Ray007 wrote:

                                                         

                                                        To Nancy

                                                         

                                                        I hate what you have done, WordPress in moving forwards and you are moving backwards
                                                        Its all about simplicity and not making your clients jump through hoops

                                                        This is a user-to-user forum. I don't work for Adobe.  I have no input in Adobe's decision making. I'm just a product user like you.

                                                         

                                                        With rare exceptions, very few Adobe employees spend time on this user forum. Unless you see an Adobe Staff badge by the person's name, you are being helped by an unpaid volunteer.

                                                         

                                                        If you want to drop back to CS6, log-in to your Creative Cloud desktop app. Click on Filters & Versions > Click on Previous Versions.  You should see a drop-down list of versions: CS6, CC 2014.1, CC 2015.

                                                         

                                                        Nancy O.