From portal-commits at lists.jboss.org Thu Apr 26 08:08:40 2007 Content-Type: multipart/mixed; boundary="===============2945437432062947565==" MIME-Version: 1.0 From: portal-commits at lists.jboss.org To: portal-commits at lists.jboss.org Subject: [portal-commits] JBoss Portal SVN: r7067 - docs/trunk/referenceGuide/en/modules. Date: Thu, 26 Apr 2007 08:08:39 -0400 Message-ID: --===============2945437432062947565== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: julien(a)jboss.com Date: 2007-04-26 08:08:39 -0400 (Thu, 26 Apr 2007) New Revision: 7067 Removed: docs/trunk/referenceGuide/en/modules/themeStyleGuide.xml Modified: docs/trunk/referenceGuide/en/modules/themeandlayouts.xml Log: added section on new ajax CSS in the theme guide Deleted: docs/trunk/referenceGuide/en/modules/themeStyleGuide.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- docs/trunk/referenceGuide/en/modules/themeStyleGuide.xml 2007-04-26 11:= 27:50 UTC (rev 7066) +++ docs/trunk/referenceGuide/en/modules/themeStyleGuide.xml 2007-04-26 12:= 08:39 UTC (rev 7067) @@ -1,1580 +0,0 @@ - - JBoss Portal - Theme Style Guide (based on the Industrial theme)= - - Overview - - This document outlines the different selectors used to handle the= layout and look/feel of the Industrial theme - included in the JBoss portal. - - - A couple of things to know about the theming approach di= scussed below: - Main premise behind this approach was to provide a c= lean separation between the business and - presentation layer of the portal. As we go through each sel= ector and explain the relation to the visual - presentation on the page, this will become more apparent. - - The flexibility of the selectors used in the theme s= tylesheet allow a designer to very easily - customize the visual aspects of the portal, thereby taking = the responsibility off of the developers hands - through allowing the designer to quickly achieve the desire= d effect w/out the need to dive down into code - and/or having to deploy changes to the portal. This saves t= ime and allows both developers and designers - to focus on what they do best. - - This theme incorporates a liquid layout approach whi= ch allows elements on a page to - expand/contract - based on screen resolution and provides a consistent look a= cross varying display settings. However, the - stylesheet is adaptable to facilitate a fixed layout and/or= combination approach where elements are pixel - based and completely independent of viewport. - - The pieces that make up the portal theme consist of = at least one stylesheet and any associated - images. - Having a consolidated set of files to control the portal lo= ok and feel allows administrators to - effortlessly - swap themes on the fly. In addition, this clean separation = of the pieces that make up a specific theme - will enable sharing and collaboration of different themes b= y those looking to get involved or contribute - to the open source initiative. - - - - - - - Main Screen Shot - - Screen shot using color outline of main ID selectors used to cont= rol presentation and layout: - - - - - - - - Key - - - - - - - - - - - - - - - - - - - - - - - - -
Color OutlineCorresponding Selector
Red Borderportal-container
Yellow Borderheader-container
Orange Bordercontent-container
Blue BorderregionA / regionB
Green Borderportlet-container
- - - - - - List of CSS Selectors - - - The following is a list of the selectors used in the the= me stylesheet, including a brief - explanation of how each selector is used in the portal: - - - - - Portal Body Selector - - - #body { - background-image: url(images/portal_background.gif); - margin: 0px; - padding: 0px; - } - - - Usage: - This selector controls the background of the page, and c= an be modified to set a base font-family, - layout margin, etc. that will be inherited by all child = elements that do not have their own individual - style applied. By default, the selector pulls an image b= ackground for the page. - - - - - - Portal Header Selectors - - - #spacer { - width: 1024px; - line-height: 0px; - font-size: 0px; - height: 0px; - } - - - Usage: - Spacer div used to keep header at certain width regardle= ss of display size. This is done to - avoid overlapping of tab navigation in header. To accoun= t for different display sizes, this - selector can be modified to force a horizontal scroll in= the browser which eliminates any issue - with overlapping elements in the header. - - - #header-container { - background-image: url(images/portal_background.gif); - background-repeat: repeat-y; - height: 100%; - min-width: 1000px; - width: 100%; - /* test to reposition header on page - position: absolute; - bottom: 5px;*/ - } - - - Usage: - Wrapper selector used to control the position of the hea= der on the page (see yellow border in screen - shot). This selector is applied as an ID on the table us= ed to structure the header. You can adjust - the attributes to reposition the header location on the = page and/or create margin space on the top, - right, bottom and left sides of the header. - - - Screenshot: - - - - - - - - - #header { - background-image: url(images/header.gif); - background-repeat: repeat-x; - height: 100px; - padding: 0px; - /*margin: 0 25% 0 25%;*/ - } - - - Usage: - This selector applies the header background image in the= portal. It can be adjusted to accommodate a - header background of a certain width/height or, as it cu= rrently does, repeat the header graphic so - that it tiles across the header portion of the page. - - - #logoName { - background-image: url(images/JBossLogo.gif); - background-repeat: no-repeat; - width: 187px; - height: 35px; - position: absolute; - left: 15px; - top: 16px; - z-index: 2; - } - - - Usage: - Logo selector which is used to brand the header with a s= pecific, customized logo. The style is applied - as an ID on an absolutely positioned DIV element which e= nables it to be moved to any location on the - page, and allows it to be adjusted to accommodate a logo= of any set width/height. - - - - - - Portal Layout Region Selectors - - - #portal-container { - /*width: 100%;*/ - - /*IE specific approach to preserve min-width for port= let regions */ - padding: 0 350px 0 350px; - } - - - Usage: - Wrapper for entire portal which starts/ends after/before= the BODY tag (see red border in screen shot). - The padding attribute for this selector is used to prese= rve a minimum width setting for the portlet - regions (discussed below). Similar to body selector, thi= s style can modified to create margin or - padding space on the top, right, bottom and left section= s of the page. It provides the design - capability to accommodate most layouts (e.g. a centered = look such as the phalanx theme where - there is some spacing around the content of the portal, = or a full width look as illustrated in - the Industrial theme). - - - Screenshot: - - - - - - - - - - /* min width for IE */ - #expander { - margin: 0 -350px 0 -350px; - position: relative; - } - - /* min width for IE */ - #sizer { - width: 100%; - } - - /* IE min width \*/ - * html #portal-container, - * html #sizer, - * html #expander { height: 0; } - - - Usage: - These selectors are used in conjunction with the above, = portal-container, selector to preserve a - minimum width setting for the portlet regions. This was = implemented to maintain a consistent - look across different browsers. - - - - /*table that contains all regions. does not include h= eader*/ - #content-container { - height: 100%; - text-align:left; - max-width: 1600px; - min-width: 800px; - } - - - Usage: - Wrapper that contains all regions in portal with the exc= eption of the header (see orange border - in screen shot). Its attributes can be adjusted to creat= e margin space on page, as well as - control positioning of the area of the page below the he= ader. - - - Screenshot: - - - - - - - - - - #regionA { - /* test to swap columns with regionB... - float: right; */ - - width: 30%; - float: left; - margin: 0px; - padding: 0px; - min-width: 250px; - } - - - Usage: - First portlet region located within the content-containe= r (see blue border in screen shot). This - selector controls the width of the region as well as its= location on the page. Designers can - very easily reposition this region in the portal (e.g. s= wap left regionA with right regionB, - etc.) by adjusting the attributes of this selector. - - - #regionB { - /*test to swap columns with regionA... - margin: 0 30% 0 0; */ - - /* two column layout*/ - margin: 0 0 0 30%; - padding: 0; - width: 69%; - - /* test to add 3rd region in layout... - width: 40%; - float: left;*/ - } - - - Usage: - Second portlet region located within the content-contain= er (see blue border in screen shot). - Similar to regionA, this selector controls the width of = the region as well as its location - on the page. - - - - #regionC { - /* inclusion of 3rd region - comment out for 2 region= testing - padding: 0px; - width: 27%; - float: left;*/ - display: none; - } - - - Usage: - Third portlet region located within the content-containe= r (please refer to blue border in screen - shot representing regionA and regionB for an example). U= sed for 3 column layout. Similar to - regionA and regionB, this selector controls the width of= the region as well as its location - on the page. - - - /* give a maximized portlet more space */ - #regionMaximized { - width: 100%; - float: left; - margin: 0px; - padding: 0px; - min-width: 400px; - } - - - Usage: - Portlet region located within the content-container (ple= ase refer to blue border in screen - shot representing regionA and regionB for an example). U= sed for a one column layout to allow one - portlet to take over the entire page. Similar to regionA= , regionB, and regionB, this selector - controls the width of the region as well as its location= on the page. - - - Screenshot: - - - - - - - - - hr.cleaner { - clear:both; - height:1px; - margin: -1px 0 0 0; - padding:0; - border:none; - visibility: hidden; - } - - - Usage: - Used to clear floats in regionA, regionB and regionC DIV= s so that footer spans bottom of page. - - - #footer-container { - margin: 30px 25% 0 25%; - text-align: center; - } - - - Usage: - Footer region located towards the bottom of the content-= container (see above screen shot). This - region spans the entire width of the page, but can be ad= justed (just like regionA, regionB - and regionC) to take on a certain position and width/hei= ght in the layout. - - - #navigation-container {} - - - Usage: - Unused at this time. - - - #sub-navigation-container {} - - - Usage: - Unused at this time. - - - - - - Tab Navigation Selectors for Header - - - - UL#tabsHeader { - margin: 0; - padding-left: 300px; - min-width: 550px; - } - - - Usage: - Used to provide position (through padding attribute) of = tabbed navigational items in header. A - padding-left of 300px gives space for the left hand logo= area and can be adjusted as needed to - set the desired location for the navigation. - - - UL#tabsHeader li { - list-style: none; - float: left; - margin-left: 0px; - margin-top: 74px; - margin-right: 0px; - line-height: 24px; - padding: 0px; - border-left: 1px solid #72828E; - } - - - Usage: - Selector used to style list items as horizontal navigati= on and to set the spacing and position - of each nav item that's available. - - - UL#tabsHeader li:hover { - background-image: url(images/highlightedTab.gif); - background-repeat: repeat-x; - } - - - Usage: - Used to provide hover pseudo class on navigation items s= o that the tab background will change - upon mouseover. Note that currently IE only supports the= hover pseudo class on links, so this - selector will only affect non-IE browsers (e.g. FireFox,= etc.). - - - UL#tabsHeader li.hoverOn { - background-image: url(images/highlightedTab.gif); - background-repeat: repeat-x; - } - - UL#tabsHeader li.hoverOff { - background-image:none; - } - - - Usage: - These two selectors are implemented to account for the f= act that IE cannot understand the use - of a pseudo class on the LI element. They provide the sa= me mouseover effect as the - =E2=80=9CUL#tabsHeader li:hover=EF=BF=BD? selector when = hovering the navigation item in IE, and are used in - combination with onmouseover/onmouseout event handlers i= n the header navigation: - - - Tab Nav - - ]]> - - - UL#tabsHeader a { - display: block; - float: left; - padding: 4px 15px 5px 15px; - text-decoration: none; - font: 13px/normal Verdana, Arial, Helvetica, Geneva, = Swiss, SunSans-Regular; - background: 100% 0 no-repeat; - color: #596874; - } - - - Usage: - This selector styles the navigational links, indicating = padding surrounding the link as well as - font family, color and text-decoration. - - - UL#tabsHeader a:hover { - text-decoration: underline; - } - - - Usage: - Used to underline navigational links when hovering with = mouse. Unlike the li:hover pseudo class, - IE does support the hover effect on links, so there is n= o need for a separate set of selectors - to deal with this effect. - - - UL#tabsHeader #current, UL#tabsHeader #current a { - font: 13px/normal Verdana, Arial, Helvetica, Geneva, = Swiss, SunSans-Regular; - font-weight: 600; - color: #EBEAEA; - background-image: url(images/activeTab.gif); - background-repeat: repeat-x; - border-right: 0px; - border-left: 0px; - } - - - Usage: - This selector is set on the current/selected navigation = item to style both the background of - the tab as well as font properties such as color and wei= ght. Example: - - - Tab Nav - - ]]> - - - /* backslash for IE5-Mac \*/ - UL#tabsHeader a {float: none;} /* End Mac Hack */ - html>body UL#tabsHeader a {width: auto;} /* fixes IE = issues */ - - - Usage: - Also known in the industry as an example of the =E2=80= =9CHolly Hack=EF=BF=BD?, the above is added to the stylesheet - to handle certain buggy issues with IE. This section of = the stylesheet should be left alone as - subsequent changes can effect the way things behave in I= E. - - - li.currentTabBackground { - background: #fff; - } - - li.currentTabBackgroundSubNav { - background: #eeeeef; - } - - - Usage: - The above two selectors are not currently in use. Includ= ed to account for future changes to the - navigation where multiple tiers/levels might be incorpor= ated. - - - - - - Portlet Container Window Selectors - - - .portlet-container { - padding: 10px; - } - - - Usage: - Wrapper that surrounds the portlet windows (see green bo= rder in screen shot). Currently, this - selector is used to create space (padding) between the p= ortlets displayed in each particular region. - - - Screenshot: - - - - - - - - - .portlet-titlebar-title { - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 11px; - font-weight: 500; - color: #596874; - white-space: nowrap; - line-height: 100%; - float: left; - text-indent: 15px; - } - - - Usage: - Class used to style the title of each portlet window. At= tributes of this selector set font - properties, indentation and position of title. - - - .portlet-titlebar-decoration { - background-image: url(images/portlet-win-decoration.g= if); - background-repeat: no-repeat; - height: 11px; - width: 11px; - float: left; - position: relative; - top: 6px; - } - - - Usage: - Used to display top left portlet window decoration (e.g.= sphere icon in Industrial theme). - Attributes for this selector set position and dimensions= of this decoration. - - - .portlet-mode-container { - float: right; - } - - - Usage: - Wrapper that contains the portlet window modes that disp= lay in the top right section of the - portlet windows. - - - .portlet-titlebar-left { - background-image: url(images/portlet-top-left.gif); - background-repeat: no-repeat; - width: 9px; - height: 33px; - background-position: right; - min-width: 9px; - } - - - Usage: - Used to style the top left corner of the portlet window.= Each portlet window consists of one - table that has 3 columns and 3 rows. This selector style= s the first column (TD) in the first - row (TR). - - - Screenshot: - - - - - - - - - .portlet-titlebar-center { - background-image: url(images/portlet-top-middle.gif); - background-repeat: repeat-x; - height: 33px; - } - - - Usage: - Used to style the center section of the portlet title ba= r. Each portlet window consists of one - table that has 3 columns and 3 rows. This selector style= s the second column (TD) in the first - row (TR). - - - Screenshot: - - - - - - - - - .portlet-titlebar-right { - background-image: url(images/portlet-top-right.gif); - background-repeat: no-repeat; - width: 10px; - height: 33px; - min-width: 10px; - } - - - Usage: - Used to style the top right corner of the portlet window= . Each portlet window consists of one - table that has 3 columns and 3 rows. This selector style= s the third column (TD) in the first row (TR). - - - Screenshot: - - - - - - - - - .portlet-content-left { - background-image: url(images/portlet-left-vertical.gi= f); - height: 100%; - background-repeat: repeat-y; - background-position: right; - width: 9px; - min-width: 9px; - } - - - Usage: - Used to style the left hand vertical lines that make up = the portlet window. Each portlet window - consists of one table that has 3 columns and 3 rows. Thi= s selector styles the first column (TD) - in the second row (TR). - - - Screenshot: - - - - - - - - - .portlet-content-center { - background-color: #f7f7f7; - background-repeat: repeat; - vertical-align: top; - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 13px; - } - - - Usage: - Used to style the center, content area where the portlet= content is injected into the portlet - window (see below screen). Attributes for this selector = control the positioning of the portlet - content as well as the background and font properties. E= ach portlet window consists of one table - that has 3 columns and 3 rows. This selector styles the = second column (TD) in the second row (TR). - - - Screenshot: - - - - - - - - - .portlet-body { - background-color: #f7f7f7; - } - - - Usage: - An extra selector for controlling the content section of= the portlet windows (see below screen). - This was added to better deal with structuring the conte= nt that gets inserted/rendered in the - portlet windows, specifically if the content is causing = display problems in a portlet. - - - Screenshot: - - - - - - - - - .portlet-content-right { - background-image: url(images/portlet-right-vertical.g= if); - height: 100%; - background-repeat: repeat-y; - background-position: left; - width: 10px; - min-width: 10px; - } - - - Usage: - Used to style the right hand vertical lines that make up= the portlet window. Each portlet - window consists of one table that has 3 columns and 3 ro= ws. This selector styles the third - column (TD) in the second row (TR). - - - Screenshot: - - - - - - - - - .portlet-footer-left { - background-image: url(images/portlet-bottom-left.gif); - width: 9px; - height: 9px; - background-repeat: no-repeat; - background-position: top right; - min-width: 9px; - } - - - Usage: - Used to style the bottom left corner of the portlet wind= ow. Each portlet window consists of one - table that has 3 columns and 3 rows. This selector style= s the first column (TD) in the third row (TR). - - - Screenshot: - - - - - - - - - .portlet-footer-center { - background-image: url(images/portlet-bottom-middle.gi= f); - height: 14px; - background-repeat: repeat-x; - } - - - Usage: - Used to style the bottom, center of the portlet window (= i.e. the bottom horizontal line in the - Industrial theme). Each portlet window consists of one t= able that has 3 columns and 3 rows. - This selector styles the second column (TD) in the third= row (TR). - - - Screenshot: - - - - - - - - - .portlet-footer-right { - background-image: url(images/portlet-bottom-right.gif= ); - width: 10px; - height: 9px; - background-repeat: no-repeat; - min-width: 10px; - } - - - Usage: - Used to style the bottom right corner of the portlet win= dow. Each portlet window consists of - one table that has 3 columns and 3 rows. This selector s= tyles the third column (TD) in the - third row (TR). - - - Screenshot: - - - - - - - - - - - - Portlet Window Mode Selectors - - - .portlet-mode-maximized { - background-image: url(images/maximize.gif); - width: 16px; - height: 23px; - background-repeat: no-repeat; - float: left; - display: inline; - cursor: pointer; - } - - - Usage: - Selector used to display the portlet maximize mode. Attr= ibutes for this selector control the - display and dimensions of the maximize icon, including t= he behavior of the mouse pointer when - hovering the mode. - - - .portlet-mode-minimized { - background-image: url(images/minimize.gif); - width: 16px; - height: 23px; - background-repeat: no-repeat; - float: left; - display: inline; - cursor: pointer; - } - - - Usage: - Selector used to display the portlet minimize mode. Attr= ibutes for this selector control the - display and dimensions of the minimize icon, including t= he behavior of the mouse pointer when - hovering the mode. - - - .portlet-mode-normal { - background-image: url(images/normal.gif); - width: 16px; - height: 23px; - background-repeat: no-repeat; - float: left; - display: inline; - cursor: pointer; - } - - - Usage: - Selector used to display the portlet normal mode (i.e. t= he icon that when clicked, restores the - portlet to the original, default view). Attributes for t= his selector control the display and - dimensions of the normal icon, including the behavior of= the mouse pointer when hovering the mode. - - - .portlet-mode-help { - background-image: url(images/help.gif); - width: 16px; - height: 23px; - background-repeat: no-repeat; - float: left; - display: inline; - cursor: pointer; - } - - - Usage: - Selector used to display the portlet help mode. Attribut= es for this selector control the display - and dimensions of the help icon, including the behavior = of the mouse pointer when hovering the mode. - - - .portlet-mode-edit { - background-image: url(images/edit.gif); - width: 16px; - height: 23px; - background-repeat: no-repeat; - float: left; - display: inline; - cursor: pointer; - } - - - Usage: - Selector used to display the portlet edit mode. Attribut= es for this selector control the display - and dimensions of the edit icon, including the behavior = of the mouse pointer when hovering the mode. - - - .portlet-mode-remove { - background-image: url(images/remove.gif); - width: 16px; - height: 23px; - background-repeat: no-repeat; - float: left; - display: inline; - cursor: pointer; - } - - - Usage: - Currently not available. But here is the intended use: - Selector used to display the portlet remove mode. Attrib= utes for this selector control the - display and dimensions of the remove icon, including the= behavior of the mouse pointer when - hovering the mode. - - - .portlet-mode-view { - background-image: url(images/view.gif); - width: 16px; - height: 23px; - background-repeat: no-repeat; - float: left; - display: inline; - cursor: pointer; - } - - - Usage: - Selector used to display the portlet view mode. Attribut= es for this selector control the display - and dimensions of the view icon, including the behavior = of the mouse pointer when hovering the mode. - - - .portlet-mode-reload { - background-image: url(images/reload.gif); - width: 16px; - height: 23px; - background-repeat: no-repeat; - float: left; - display: inline; - cursor: pointer; - } - - - Usage: - Currently not available. But here is the intended use: - Selector used to display the portlet reload mode. Attrib= utes for this selector control the - display and dimensions of the reload icon, including the= behavior of the mouse pointer when - hovering the mode. - - - - - - Copyright Selectors - - - .portal-copyright { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - color: #5E6D7A; - } - - a.portal-copyright { - color: #768591; - text-decoration: none; - } - - a.portal-copyright:hover { - color: #96A5B1; - text-decoration: none; - } - - - Usage: - The above three selectors are used to style copyright co= ntent in the portal. The portal-copyright - selector sets the font properties (color, etc.), and the= a.portal-copyright/a.portal-copyright:hover - selectors style any links that are part of the copyright= information. - - - - - - Element Selectors - - - a { - color: #768591; - text-decoration: none; - } - a:hover { - color: #96A5B1; - text-decoration: none; - } - - - Usage: - The above two selectors style all anchor elements that d= o not have their own class/selector applied. - - - - INPUT { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 10px; - } - - - Usage: - The above selector styles all INPUT elements that do not= have their own class/selector applied. - - - SELECT { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 10px; - } - - - Usage: - The above selector styles all SELECT elements that do no= t have their own class/selector applied. - - - FONT { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 10px; - color: #768591; - } - - - Usage: - The above selector styles all FONT elements that do not = have their own class/selector applied. - - - FIELDSET { - background-color: #f7f7f7; - border:1px solid #BABDB6; - padding: 6px; - } - - - Usage: - The above selector styles all FIELDSET elements that do = not have their own class/selector applied. - - - LEGEND { - background-color: transparent; - padding-left: 6px; - padding-right: 6px; - padding-bottom: 0px; - font-size: 14px; - } - - - Usage: - The above selector styles all LEGEND elements that do no= t have their own class/selector applied. - - - - - - Table Selectors - - - .portlet-table-header {} - - - Usage: - Not currently in use. Intended for styling tables (speci= fically, the TH or table header elements) - that get rendered within a portlet window. - - - .portlet-table-body {} - - - Usage: - Not currently in use. Intended for styling the table bod= y element used to group rows in a table. - - - .portlet-table-alternate {} - - - Usage: - Not currently in use. Used to style the background color= (and possibly other attributes) for - every other row within a table. - - - .portlet-table-selected {} - - - Usage: - Not currently in use. Used to style text, color, etc. in= a selected cell range. - - - .portlet-table-subheader {} - - - Usage: - Not currently in use. Used to style a subheading within = a table that gets rendered in a portlet. - - - .portlet-table-footer {} - - - Usage: - Not currently in use. Similar to portlet-table-header an= d portlet-table-body, this selector is - used to style the table footer element which is used to = group the footer row in a table. - - - .portlet-table-text {} - - - Usage: - Text that belongs to the table but does not fall in one = of the other categories (e.g. explanatory - or help text that is associated with the table). This se= lector can also be modified to provide - styled text that can be used in all tables that are rend= ered within a portlet. - - - - - - FONT Selectors - - - .portlet-font { - color:#000; - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 10px; - } - - - Usage: - Used to style the font properties on text used in a port= let. Typically this class is used for - the display of non-accentuated information. - - - .portlet-font-dim { - color:#888385; - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 10px; - } - - - Usage: - A lighter version (color-wise) of the portlet-font selec= tor. - - - - - - FORM Selectors - - - .portlet-form-label { - color:#4A4A4A; - text-decoration:none; - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - } - - - Usage: - Text used for the descriptive label of an entire form (n= ot the label for each actual form field). - - - .portlet-form-button { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - font-weight: bold; - color: #270F07; - } - - - Usage: - Used to style portlet form buttons (e.g. Submit). - - - .portlet-icon-label {} - - - Usage: - Not currently in use. Text that appears beside a context= dependent action icon. - - - .portlet-dlg-icon-label {} - - - Usage: - Not currently in use. Text that appears beside a "standa= rd" icon (e.g Ok, or Cancel). - - - .portlet-form-field-label { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - color: #4A4A4A; - } - - - Usage: - Selector used to style portlet form field labels. - - - .portlet-form-field { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - color: #4A4A4A; - margin-top: 10px; - } - - - Usage: - Selector used to style portlet form fields (i.e. INPUT c= ontrols, SELECT elements, etc.). - - - - - LINK Selectors - - - .portal-links:link { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - font-weight: bold; - color: #242424; - text-decoration: none; - } - - .portal-links:hover { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - font-weight: bold; - color: #5699B7; - text-decoration: none; - } - - .portal-links:active { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - font-weight: bold; - color: #242424; - text-decoration: none; - } - - .portal-links:visited { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - font-weight: bold; - color: #242424; - text-decoration: none; - } - - - Usage: - The above four selectors are used to style links in the = portal. Each pseudo class (i.e. hover, active, - etc.) provides a different link style. - - - - - MESSAGE Selectors - - - .portlet-msg-status { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 10px; - font-style: normal; - color: #788793; - } - - - Usage: - Selector used to signify the status of a current operati= on that takes place in the portlet (e.g. - =E2=80=9Csaving results=EF=BF=BD?, =E2=80=9Cstep 1 of 4= =EF=BF=BD?). - - - .portlet-msg-info { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - font-style: italic; - color: #000; - } - - - Usage: - Selector used to signify general information in a portle= t (e.g. help messages). - - - .portlet-msg-error { - color:red; - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - font-weight: bold; - } - - - Usage: - Selector used to signify an error message in the portlet= (e.g. form validation error). - - - .portlet-msg-alert { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - font-weight: bold; - color: #821717; - } - - - Usage: - Selector used to style an alert that is displayed to the= user. - - - .portlet-msg-success { - font-family: Verdana, Arial, Helvetica, Geneva, Swiss= , SunSans-Regular; - font-size: 9px; - font-weight: bold; - color: #359630; - } - - - Usage: - Selector used to indicate successful completion of an ac= tion in a portlet (e.g. =E2=80=9Csave successful=EF=BF=BD?). - - - - - SECTION Selectors - - - .portlet-section-header { - font-weight: bold; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 13px; - color: #768591; - background-color: #f7f7f7; - } - - - Usage: - Table or section header. - - - .portlet-section-body { - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 10px; - } - - - Usage: - Normal text in a table cell. - - - .portlet-section-alternate { - background-color: #ececed; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 9px; - } - - - Usage: - Used to style background color and text in every other t= able row. - - - .portlet-section-selected { - background-color: #89AEC6; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 9px; - } - - - Usage: - Used to style background and font properties in a select= ed cell range. - - - .portlet-section-subheader { - font-weight: bold; - font-size: 10px; - font-family: Verdana, Arial, Helvetica, sans-serif; - color: #000; - } - - - Usage: - Used to style a subheading within a table/section that g= ets rendered in a portlet. - - - .portlet-section-footer { - font-family: Verdana, Arial, Helvetica, sans-serif; - background-color: #f7f7f7; - font-size: 8px; - } - - - Usage: - Used to style footer area of a section/table that gets r= endered in a portlet. - - - .portlet-section-text {} - - - Usage: - Not currently used. Text that belongs to a section but d= oes not fall in one of the other categories. - This selector can also be modified to provide styled tex= t that can be used in all sections that are - rendered within a portlet. - - - - - MENU Selectors - - - .portlet-menu {} - - - Usage: - Not currently used. General menu settings such as backgr= ound color, margins, etc. - - - .portlet-menu-item { - color: #242424; - text-decoration: none; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 9px; - } - - - Usage: - Not currently used. Normal, unselected menu item. - - - .portlet-menu-item:hover { - color: #5699B7; - text-decoration: none; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 9px; - } - - - Usage: - Not currently used. Used to style hover effect on a norm= al, unselected menu item. - - - .portlet-menu-item-selected {} - - - Usage: - Not currently used. Applies to selected menu items. - - - .portlet-menu-item-selected:hover { - - } - - - Usage: - Not currently used. Selector styles the hover effect on = a selected menu item. - - - .portlet-menu-cascade-item {} - - - Usage: - Not currently used. Normal, unselected menu item that ha= s sub-menus. - - - .portlet-menu-cascade-item-selected {} - - - Usage: - Not currently used. Selected sub-menu item. - - - .portlet-menu-description {} - - - Usage: - Not currently used. Descriptive text for the menu (e.g. = in a help context below the menu). - - - .portlet-menu-caption {} - - - Usage: - Not currently used. Selector used to style menu captions. - - - - - WSRP Selectors - - - .portlet-horizontal-separator {} - - - Usage: - Not currently used. A separator bar similar to a horizon= tal rule, but with styling matching the page. - - - .portlet-nestedTitle-bar {} - - - Usage: - Not currently used. Allows portlets to mimic the title b= ar when nesting something. - - - .portlet-nestedTitle {} - - - Usage: - Not currently used. Allows portlets to match the textual= character of the title on the title bar. - - - .portlet-tab {} - - - Usage: - Not currently used. Support portlets having tabs in the = same style as the page or other portlets. - - - .portlet-tab-active {} - - - Usage: - Not currently used. Highlight the tab currently being sh= own. - - - .portlet-tab-selected {} - - - Usage: - Not currently used. Highlight the selected tab (not yet = active). - - - .portlet-tab-disabled {} - - - Usage: - Not currently used. A tab which can not be currently act= ivated. - - - .portlet-tab-area {} - - - Usage: - Not currently used. Top level style for the content of a= tab. - - - - - - \ No newline at end of file Modified: docs/trunk/referenceGuide/en/modules/themeandlayouts.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- docs/trunk/referenceGuide/en/modules/themeandlayouts.xml 2007-04-26 11:= 27:50 UTC (rev 7066) +++ docs/trunk/referenceGuide/en/modules/themeandlayouts.xml 2007-04-26 12:= 08:39 UTC (rev 7067) @@ -27,7 +27,7 @@ portlets. Themes, on the other hand, are responsible to style and= enhance this markup. In JBoss Portal, layouts are implemented as a JSP or a Servlet= . Themes are implemeted - using CSS Style sheets, java script and images. The binding eleme= ment between layouts and + using CSS Style sheets, javascript and images. The binding elemem= ent between layouts and themes are the class and id attributes of the rendered markup. JBoss Portal has the concept of regions on a page. When a page= is defined, and portlet @@ -642,7 +642,7 @@ and feel of the portal response. Through clean separation of m= arkup and styles a much more flexible and powerfull approach to theming portals is pos= sible. While this approach is not enforced, it is strongly encouraged. If you follow the = definitions of the - ThemeStyleGuide (see later), it is not necessary to change the= layout or the strategy, + Theme Style Guide (see later), it is not necessary to change t= he layout or the strategy, or the RenderSet to achieve very different look and feels for = the portal. All you need to change is the theme. Since the theme has no binary dependen= cies, it is very simple to swapt it, or change individual items of it. No compile or rede= ploy is necessary. Themes @@ -816,7 +816,7 @@ How to write your own Theme - Ask your favorite web designer and/or consult the ThemeStyl= eGuide in this document + Ask your favorite web designer and/or consult the Theme Sty= le Guide in this document ;) @@ -2179,4 +2179,68 @@ + + Additional Ajax selectors + Since 2.6 JBoss Portal has ajax features. Those features intro= duce a couple of + CSS selectors that enables further customization of the visual look = and feel. Indeed by default + those CSS styles are provided by ajaxified layouts but it may not fi= t with some themes. It is possible + to redefine them in the stylesheet of the themes. + + + + .dyna-region {} + + + Usage: + Not currently used. Denotes a dynamic region which can be subj= ect to ajax capabilities. + + + + .dyna-window {} + + + Usage: + Not currently used. Denotes a dynamic window which can be subj= ect to ajax capabilities. + + + + .dyna-decoration {} + + + Usage: + Not currently used. Denotes a dynamic decorator which can be s= ubject to ajax capabilities. + + + + .dyna-portlet {} + + + Usage: + Not currently used. Denotes a dynamic content which can be sub= ject to ajax capabilities. + + + + .dnd-handle { + cursor: move; + } + + + Usage: + Denotes the handle offered by draggable windows. By default it= changes the mouse shape to indicate + to the user that his mouse is hovering a draggable window. + + + + .dnd-droppable { + border: red 1px dashed; + background-color: Transparent; + } + + + Usage: + Denotes a zone where a user can drop a window during drag and = drop operations. This selector is added + and removed dynamically at runtime by the ajax framework and i= s not present in the generated markup. + + + --===============2945437432062947565==--