Manage Styles Tool window

Manage Styles Tool window

Rate This
  • Comments 9

This tool window provides a tree hierarchy view of all CSS selectors available from the current page. Users can navigate and find CSS style definitions in source code with this tool window.

 ManageStyle

Developers can change the layout of the tree view with the Options button. The first three context menu items will categorize the CSS selector in different ways.  The next three context menu items will modify what the tree show - all Styles available to the current page, styles that have been used somewhere on this page, or styles used on the selection, if a control is selected in the designer.

  OptionButton

 

The tool window provides top level nodes for style block(s) in the current page and external style sheet in cascading order.  Inline styles will not be displayed in this window, since inline styles are not “manageable”. Tool window will also list the @import directives.

The icons are used to differentiate the various types of styles as shown below.

Icon

Style Type

blue

Elements

green

Classes

red

IDs

Style in use (color applies as above)

 

With this tool windows, developers can move the CSS styles among current page, master page and external style sheet.

If a developer drags and drops within the current page, the orders of the CSS tags will be reordered. This is useful for precedence reasons as CSS uses ordering as part of its precedence algorithms,  when drag and drop with the ctrl key press, tool window will create a copy wherever developer drop the style. This is a quick way to duplicate a style.

Developers can drag and drop multiple styles at one time by select them by ctrl + mouse click, then drag drop selected styles.

Developers can drag and drop a CSS style to/from external style sheet, the style declaration will be moved to/from external style sheet

Developers can also drop a CSS style from master page to content page, but the style declaration will be copied from master page to content page, the style declaration in master will remain in the master page, also the style in the content page cannot be dragged and dropped to master, this is because if style declaration is removed from master page it might accidentally change the layout of other content page which uses this master page.

Developers can view the CSS declaration by hovering the mouse over the CSS selector in the tool window, or right clicking the selector and select the “Go to Code”. “Go to Code” will show the corresponded CSS declaration in the main pane and put the cursor in the CSS declaration.

Another context menu Item “Select All Instance” is very useful too. The tool window will highlight the control(s) which has the selected CSS style applied on the current page. If you want to change the CSS style of these controls, you do not have to find them one by one and change the styles for them one by one. You can use “Select All Instance” to select all controls and then apply new CSS style to all of these control at once.

Leave a Comment
  • Please add 1 and 8 and type the answer here:
  • Post
  • From where we can get these tool window

    thanks

    Khuzema

  • currently you can get it from Format->Css Style...->Manage Style. you have to open the aspx file in design view or design pan in split to make it work.

  • 摘要本期共有4篇文章(目前ASP.NET日渐凋敝阿,这么少东西都不好意思拿出来,以后不如改成两周推荐一次了):如何根据需要加载某一Tab中的内容ManageStylesTool窗口让Gr...

  • The Orcas beta1 docs have topics on the new features for Orcas. They're a bit hard to find on MSDN, but here's a link to a several of them.

    On the Manage Styles and Apply Styles tools:

    http://msdn2.microsoft.com/en-us/library/bb398979(VS.90).aspx

    On using the CSS Property Grid:

    http://msdn2.microsoft.com/en-us/library/bb398902(VS.90).aspx

    On the Application Style toolbar:

    http://msdn2.microsoft.com/en-us/library/bb398977(VS.90).aspx

  • VS2008WebDesignerandCSSSupport Oneofthebigfeaturesthatwebdeveloperswillquickl...

  • 这几天看了VS2008 beta2 release的消息,一直想download一个下来玩玩看,3.多G的东西今天从九点download到中午才ok。

  • Why it does not display/use stylesheets located in currently used theme? (located in that theme folder)

  • I am interested in an answer to vlado's question:  How do you Manage Styles when the style sheet is located in the App_Themes folder?

  • 摘要

    本期共有4篇文章(目前ASP.NET日渐凋敝阿,这么少东西都不好意思拿出来,以后不如改成两周推荐一次了): 如何根据需要加载某一Tab中的内容

    ManageStylesToo...

Page 1 of 1 (9 items)