Versions Compared

Old Version 1

changes.mady.by.user Matthew Polizzotti

Saved on

compared with

New Version 2

changes.mady.by.user Matthew Polizzotti

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

h3.

Customize

skin

h5.

CSS
stack
#
  1. CSS
  1. stack
  1. is
  1. defined
  1. in
*
  1. skin.xml
* #
  2. Styles
  1. common
  1. to
  1. all
  1. skins
  1. are
  1. imported
  1. from
*
  1. common_skin.xml
*
  1. to
*
  1. skin.xml
* #
  2. Third-party
  1. libraries
  1. (Fluid,
  1. jQuery)
  1. live
  1. in
  1. the
*
  1. ResourceServingWebapp
*
  1. within
  1. Tomcat
#
  2. Most
  1. development
  1. occurs
  1. in
*
  1. portal.css
* h5. CSS stack illustrated {mockup:css-stack|8} h5. Demo # Header # Page Bar # Web Search # Tabs # Portlet Containers # Footer
CSS stack illustrated

Image Added

Demo
  1. Header
  2. Page Bar
  3. Web Search
  4. Tabs
  5. Portlet Containers
  6. Footer
Panel
borderColor#333333
bgColor#FFFFFF
titleBGColor#859ef3
titleSection Notes: Customize skin
borderStylesolid
Wiki Markup


Panel
borderColor#333333
bgColor#FFFFFF
titleBGColor#859ef3
titleSection Notes: Create child skin
borderStylesolid

Create child skin

What is a child skin?
  1. A child skin is a variation of an existing skin
  2. A child skin inherits style definitions from the parent skin
  3. A child skin overrides styles defined by the parent
Demo
  1. Copy stable skin as a starting point
  2. Rename new skin
  3. Register new skin (skinList.xml)
  4. Adjust skin configuration (skin.xml)
  5. Add CSS overrides
  6. Deploy new skin to Tomcat (ant deploy-war)
  7. View & select new skin in the gallery
  8. Create alias, short-cuts & copy commands for faster development
Panel
borderColor#333333
bgColor#FFFFFF
titleBGColor#859ef3
titleSection Notes: Examine theme
borderStylesolid

Examine theme

What is a theme?
  1. A theme provides structure or layout for the portal
  2. Similar to a skeleton, a blueprint or the framework of a building
  3. It is the underlying HTML code of the portal, which is developed using XSLT technology
What is a theme?

What is XSLT?
  1. XSLT stands for XSL Transformations
  2. XML-based language used for the transformation of XML documents into other documents such as HTML
  3. XSLT uses XPath to navigate XML
How does XSLT work?

Suggested work flow
  1. Work in the uPortal source code
  2. Copy changed files from your source code to your deployed code
  3. Copy changed files from your source code to your deployed code
  4. Setup up alias / copy commands for faster development
Demo
  1. Location:
    1. /uportal-war/src/main/resources/layout/theme/universality
  2. Theme consists of 7 major files:
    1. universality.xsl
    2. page.xsl
    3. navigation.xsl
    4. components.xsl
    5. columns.xsl
    6. content.xsl
    7. preferences.xsl
  3. Change the portal through configuration:
    1. Show or hide tab flyout menus
    2. Add a sidebar to the portal
    3. Add a page title to the portal
    4. Add additional links
    5. Remove the web search from the header

...