Enhancing Your Service Catalog and Service

Items with CSS

Unus GaffoorKinetic Data

22

Welcome from the Top of the World

33

Agenda

Importance of standardization

Breakdown of Kinetic use of CSS

Applying CSS with samples

44

Standardization

Importance of Standardization/Theme

Embrace Corporate Standards

Satisfy Business StandardsFind FontsGet SamplesStyle Guide – Marketing

55

Benefits

Easy Maintenance

Organizational Styles

Re-use

Reduce effort of re-styling

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

77

CSS order of application

99

Consistent Layout

Jsp organized simpler and customizable

1010

Consistent Header Footer

Setting up the jsp

Refer to a header.jsp and footer.jspEg. display.jsp, console.jsp review.jsp

1111

Consistent Header Footer

Setting up the jsp

1212

Consistent Header Footer

1313

Consistent Sections

Sections group elements, styling sections create a consistent feel

1414

Consistent Sections

1515

Consistent Question Formatting

Create default layout

1616

Consistent Question Formatting

1717

Consistent Question Formatting

Overriding default layout

1818

Consistent Question Formatting

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.

2020

The Power of FLOAT

2121

The Power of FLOAT

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)

2323

Required Field Checking

The IE 6 and 7 gotcha

Can’t use the :before css convention

2424

Required Field Checking

2525

Required Field Checking

Required classes

requiredLabel and (requiredLabel_select _text _textarea _radio)

requiredField and (requiredField_select _text _textarea _radio)

2626

Required Field Checking

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(“”);

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)

2929

Let’s Play