enhancing your service catalog and service items with css unus gaffoor kinetic data
TRANSCRIPT
![Page 1: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/1.jpg)
Enhancing Your Service Catalog and Service
Items with CSS
Unus GaffoorKinetic Data
![Page 2: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/2.jpg)
22
Welcome from the Top of the World
![Page 3: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/3.jpg)
33
Agenda
Importance of standardization
Breakdown of Kinetic use of CSS
Applying CSS with samples
![Page 4: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/4.jpg)
44
Standardization
Importance of Standardization/Theme
Embrace Corporate Standards
Satisfy Business StandardsFind FontsGet SamplesStyle Guide – Marketing
![Page 5: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/5.jpg)
55
Benefits
Easy Maintenance
Organizational Styles
Re-use
Reduce effort of re-styling
![Page 6: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/6.jpg)
66
CSS StorageJsp file references
CSS files (*.css) stored on web server Included within .jspf files
.css files are referenced Hard coded with <style> 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
![Page 7: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/7.jpg)
77
CSS order of application
![Page 8: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/8.jpg)
99
Consistent Layout
Jsp organized simpler and customizable
![Page 9: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/9.jpg)
1010
Consistent Header Footer
Setting up the jsp
Refer to a header.jsp and footer.jspEg. display.jsp, console.jsp review.jsp
![Page 10: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/10.jpg)
1111
Consistent Header Footer
Setting up the jsp
![Page 11: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/11.jpg)
1212
Consistent Header Footer
![Page 12: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/12.jpg)
1313
Consistent Sections
Sections group elements, styling sections create a consistent feel
![Page 13: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/13.jpg)
1414
Consistent Sections
![Page 14: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/14.jpg)
1515
Consistent Question Formatting
Create default layout
![Page 15: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/15.jpg)
1616
Consistent Question Formatting
![Page 16: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/16.jpg)
1717
Consistent Question Formatting
Overriding default layout
![Page 17: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/17.jpg)
1818
Consistent Question Formatting
![Page 18: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/18.jpg)
1919
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.
![Page 19: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/19.jpg)
2020
The Power of FLOAT
![Page 20: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/20.jpg)
2121
The Power of FLOAT
![Page 21: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/21.jpg)
2222
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)
![Page 22: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/22.jpg)
2323
Required Field Checking
The IE 6 and 7 gotcha
Can’t use the :before css convention
![Page 23: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/23.jpg)
2424
Required Field Checking
![Page 24: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/24.jpg)
2525
Required Field Checking
Required classes
requiredLabel and (requiredLabel_select _text _textarea _radio)
requiredField and (requiredField_select _text _textarea _radio)
![Page 25: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/25.jpg)
2626
Required Field Checking
![Page 26: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/26.jpg)
2727
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(“”);
![Page 27: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/27.jpg)
2828
Dev Tools to Use
Use tools to help play with style options and learn optionsFirefox – Firebug (My favorite)Chrome Dev IE9 (emulates IE6/7/8)
![Page 28: Enhancing Your Service Catalog and Service Items with CSS Unus Gaffoor Kinetic Data](https://reader030.vdocuments.net/reader030/viewer/2022032702/56649cd65503460f9499e0ac/html5/thumbnails/28.jpg)
2929
Let’s Play