Presentation is loading. Please wait.

Presentation is loading. Please wait.

Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data.

Similar presentations


Presentation on theme: "Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data."— Presentation transcript:

1 Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data

2 2 2 Welcome from the Top of the World

3 3 3 Agenda  Importance of standardization  Breakdown of Kinetic use of CSS  Applying CSS with samples

4 4 4 Standardization  Importance of Standardization/Theme  Embrace Corporate Standards  Satisfy Business Standards  Find Fonts  Get Samples  Style Guide – Marketing

5 5 5 Benefits  Easy Maintenance  Organizational Styles  Re-use  Reduce effort of re-styling

6 6 6 CSS Storage  Jsp file references  CSS files (*.css) stored on web server  Included within.jspf files .css files are referenced  Hard coded with tags  CSS files attached to template  As part of Advanced Tab (Add File)  Styles entered directly  Template, Page, Section, Element (Text/Questions)  Custom Header Content

7 7 7 CSS order of application  !important style values – (specificity)  …  Inline Style (inside HTML element)  …  Inherits style from nearest parent  Last declared style is applied .myClass{color: blue;}  …… .myClass{color: red;}

8 8 8 Template Components HTML/BODY FORM {pageQuestionsForm} PAGE {templateContent} SECTION {templateSection} QLAYER {questionLayer} QLABEL {questionLabel} QANSWER {questionAnswer} DYNAMIC_TEXT {dynamicText} Submit { templateButtonLayer submitButton } CUSTOM HTML or TEXT Input / TextArea / Select {answerValue} {answerText/ answerTextArea/ answerSelect} Previous { templateButtonLayer previousButton }

9 9 9 Consistent Layout  Jsp organized simpler and customizable

10 10 Consistent Header Footer  Setting up the jsp  Refer to a header.jsp and footer.jsp  Eg. display.jsp, console.jsp review.jsp

11 11 Consistent Header Footer  Setting up the jsp

12 12 Consistent Header Footer

13 13 Consistent Sections  Sections group elements, styling sections create a consistent feel

14 14 Consistent Sections

15 15 Consistent Question Formatting  Create default layout

16 16 Consistent Question Formatting

17 17 Consistent Question Formatting  Overriding default layout

18 18 Consistent Question Formatting

19 19 The Power of FLOAT  Useful for automatically aligning elements based on their widths and width of the elements container (parent).  Float : left | right | none  Clear: left | right | both  With IE, you must apply consistently  Eg.  4 elements that have a width of 200px, will align if the container has a width of greater than 800px  If all sections have a width of 99%, then all sections will align underneath each other.

20 20 The Power of FLOAT

21 21 The Power of FLOAT

22 22 Required Field Checking  preRequired classes  preRequired  preRequiredLayer and (preRequiredLayer_select _text _textarea _radio)  preRequiredLabel and (preRequiredLabel_select _text _textarea _radio)  preRequiredAnswer and (preRequiredAnswer_select _text _textarea _radio)  preRequiredInput and (preRequiredInput_select _text _textarea _radio)

23 23 Required Field Checking  The IE 6 and 7 gotcha  Can’t use the :before css convention

24 24 Required Field Checking

25 25 Required Field Checking  Required classes  requiredLabel and (requiredLabel_select _text _textarea _radio)  requiredField and (requiredField_select _text _textarea _radio)

26 26 Required Field Checking

27 27 The Power of Javascript and CSS  Kinetic already does this for you  Do it yourself for a great user experience  jQuery  $(“#myDiv”).addClass(“myClass”); $(“#myDiv”).removeClass(“myClass”);  YUI  obj=Dom.get(“myDiv”);  YAHOO.util.Dom.addClass(obj, “myClass"); YAHOO.util.Dom.removeClass(obj, “myClass");  Base javascript  myObj=document.getElementById(“myDiv”);  myObj.className(“myClass”); myObj.className(“”);

28 28 Dev Tools to Use  Use tools to help play with style options and learn options  Firefox – Firebug (My favorite)  Chrome Dev  IE9 (emulates IE6/7/8)

29 29 Let’s Play


Download ppt "Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data."

Similar presentations


Ads by Google