Webkit CSS Insert for VelocityCE

Version 8

    The purpose of this document is to briefly go over one type of Insert that can be used for editing text with in Velocity..

     

    Insert:

     

    <style type="text/css">

    body  {

                    -webkit-transform:matrix(1.0, 0, 0, 1.0, 0, 0);

    }

    </style>

     

     

    From here we will break down what each number represents: We will use the following to edit and see what it does

    metatext.JPG

     

    -webkit-transform:matrix(1.0, 0, 0, 1.0, 0, 0);

     

    This set of will stretch the text from left to right making it larger, but not higher for example

    -webkit-transform:matrix(2.0, 0, 0, 1.0, 0, 0);

    metatext1.JPG

     

    From here we would want to make the text a bit taller to even out the appearance:

    -webkit-transform:matrix(2.0, 0, 0, 2.0, 0, 0);

    metatext2.JPG

    As you can see the text appearance looks much better but is still not quite right as it is still off the page a bit..

     

    We will now move the text over so all of it is visible:

    -webkit-transform:matrix(2.0, 0, 0, 2.0, 330, 0);

     

    metatext3.JPG

     

    For the next set of instructions we will reset the default values back to 1 and make the next change. This next value will alter the angle at which the text appears.

    -webkit-transform:matrix(1.0, -.5, 0, 1.0, 0, 0);

    metatext5.JPG

     

    The next number we will change is the indent or column.

    -webkit-transform:matrix(1.0, 0, 0, 1.0, 20, 0);

    metatext6.JPG

     

    Next  is the row number

    -webkit-transform:matrix(1.0, 0, 0, 1.0, 0, 20);

    metatext7.JPG

     

    Lastly we can alter the amount of angle in the text:

    -webkit-transform:matrix(1.0, 0, 1, 1.0, 0, 0);

    metatext8.JPG

      1.1 MobileLabel

     

    MobileLabel is the class for static text like ‘Delivery’, ‘B.CODEQty’ and ‘Pallet’. In this case font and font size are changed:

     

    <style type="text/css">

    .MobileLabel {

         font-family:Times New Roman;

         font-size:16px;

    }</style>

     

      1.2 MobileEdit

     

    The edit boxes used are defined with two classes: MobileEdit when the content can be edited and MobileEditDisabled when the content cannot. Beside the font and font size the area around the element (margin) was too big.  The height of the edit box is changed to make the font better readable. As a cosmetic change the corners of the edit box are rounded a bit. Now the actual value of 40400 can be read again:

     

    <style type="text/css">

    .MobileEdit {

         margin: 0px;

         height: 22px;

         -webkit-border-radius: 3px;

         font-family:Arial;

         font-size:13px;

    }</style>

     

     

      1.3 MobileEditDisabled

     

    The properties of the disabled edit box (the first box after ‘B.CODEQty’) are changed to match that of MobileEdit:

     

    <style type="text/css">

    .MobileEditDisabled {

         margin: 0px;

         -webkit-border-radius: 3px;

         font-family:Arial Narrow;

         font-size:14px;

    }</style>

     

     

      1.4 MobileButton

     

    The height, font, font size, colour, border colour and border width have been changed to optimise the readability of the buttons and optimise the available space on the display. One great tool to (re-)design buttons can be found at http://www.cssbuttongenerator.com/.

    This generator generates code for IE, Mozilla and webkit. Obviously, for Velocity we only need the webkit specific code:

     

    <style type="text/css">

    .MobileButton {

         font-family:Arial monospaced for SAP;

         font-size:14px;

         color:#0000;

         height:23px;

         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #c9c9c9) );

         background-color:#ffffff;

         -webkit-border-top-left-radius:3px;

         -webkit-border-top-right-radius:3px;

         -webkit-border-bottom-right-radius:3px;

         -webkit-border-bottom-left-radius:3px;

     

         border:1px solid #4d4d4d;

    }</style>

     

     

    1.1 MobileButtonDisabled

     

    The style of the disabled button (‘F8 CONF’) is changed to match that of the enabled buttons:

     

    <style type="text/css">

    .MobileButtonDisabled {

         font-family:Arial monospaced for SAP;

         font-size:14px;

         height:25px;   

         -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;

    }</style>