• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Community Beginner ,
Jun 23, 2013 Jun 23, 2013

Copy link to clipboard

Copied

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

Views

38.9K

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
community guidelines

correct answers 1 Correct answer

LEGEND , Jun 23, 2013 Jun 23, 2013

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.

Votes

Translate

Translate
LEGEND ,
Jun 23, 2013 Jun 23, 2013

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Beginner ,
Jun 24, 2013 Jun 24, 2013

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Beginner ,
Jun 29, 2013 Jun 29, 2013

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Beginner ,
Jul 03, 2013 Jul 03, 2013

Copy link to clipboard

Copied

@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

Votes

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
community guidelines
New Here ,
Oct 29, 2016 Oct 29, 2016

Copy link to clipboard

Copied

I am trying to use this feature for school and It is not showing up when I hit edit rule. Did you find a way to get back to it.

Votes

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
community guidelines
Community Expert ,
Oct 29, 2016 Oct 29, 2016

Copy link to clipboard

Copied

Which version of Dreamweaver do you have?  You'll find it under Help > About Dreamweaver.

Your school book is probably written for a different version of the software.  As such, the software you have may be quite different from the tutorials in your book.  It would help if we knew which version the book is written for, too.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
Oct 29, 2016 Oct 29, 2016

Copy link to clipboard

Copied

Thanks Nancy. I have the newest version of Dreamweaver. I just loaded an older version that the school is using and problem solved.

Votes

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
community guidelines
Community Expert ,
Oct 29, 2016 Oct 29, 2016

Copy link to clipboard

Copied

sworeanisepic​, this topic has not only been answered, but started over 3 years ago.

Unless you have more value to add, it is better to start a new topic. When you do start a new discussion, please state your operating system and the version of Dreamweaver that you are using. Of course, you also need to state the problem.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Explorer ,
Dec 06, 2015 Dec 06, 2015

Copy link to clipboard

Copied

Thanks foreverahippy, now I don't have to rollback to DW2014

Votes

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
community guidelines
New Here ,
Sep 27, 2017 Sep 27, 2017

Copy link to clipboard

Copied

LATEST

@foreveryahippy

Thank you !! I upgraded to CC 2017 version and this drove me nuts that double clicking wouldn't edit the rule. Thanks you for your answer, I very much prefer the compact CSS Rule Definition dialog box, it saves me time. As ohio818 said "Not all of us are preschool-level designers who need visual guides for all CSS rules."

Votes

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
community guidelines
Community Beginner ,
Nov 17, 2015 Nov 17, 2015

Copy link to clipboard

Copied

yes, I am with you on this. I would like to keep the tools that I am used to using. they work and are quick.

Votes

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
community guidelines
Community Expert ,
Nov 17, 2015 Nov 17, 2015

Copy link to clipboard

Copied

I would like to keep the tools that I am used to using.

Then you must revert to an older version of the software.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Beginner ,
Nov 17, 2015 Nov 17, 2015

Copy link to clipboard

Copied

No, it is there. After a couple of dozen tries, I see how it works and how to gt my selection appear in the CSS DEFINITION BOX  where I like to edit.

Easy enough now, And if working in the CSS style sheet - by double clicking on a style the CSS  Designer List, is visible one can doubleclick on a style to edit and the CSS DEFINITION BOX comes right up or selecting the pencil at the bottom to the box comes up to Edit rule.

Properties Panel will also allow the user to edit some CSS style classes. (not sure why all don't show up? parent?child?)

Now I can use my old "tools" and get used to the new tools.Besides there is no easy way to switch back: that itself presents problems.

yahhhh.

Votes

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
community guidelines
Adobe Employee ,
Jun 24, 2013 Jun 24, 2013

Copy link to clipboard

Copied

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

Votes

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
community guidelines
New Here ,
Sep 27, 2017 Sep 27, 2017

Copy link to clipboard

Copied

This answer is useless and doesn't answer the question. I strongly dislike the Css designer panel and prefer to use the edit using the "CSS Rule Definition dialog box".

Votes

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
community guidelines
Community Beginner ,
Jun 25, 2013 Jun 25, 2013

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Explorer ,
Oct 17, 2013 Oct 17, 2013

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Beginner ,
Jan 10, 2014 Jan 10, 2014

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Jan 10, 2014 Jan 10, 2014

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Beginner ,
Jan 14, 2014 Jan 14, 2014

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Beginner ,
Jan 15, 2014 Jan 15, 2014

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Jan 15, 2014 Jan 15, 2014

Copy link to clipboard

Copied

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Beginner ,
Jan 15, 2014 Jan 15, 2014

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Mentor ,
Jan 15, 2014 Jan 15, 2014

Copy link to clipboard

Copied

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.

Votes

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
community guidelines