Learn Yii: June 2011

Wednesday, June 29, 2011

CClientScript positioning

CClientScript is useful for including css files and javscript files, while avoiding duplication.

Things to know:

1. Yii injects css files just above the <title> tag. So, if you want to always override some included yii style, put your <styles> or <link rel=stylesheets> AFTER the <title> tag, and it will get loaded after the yii styles.

2. I recommend putting all your <styles> and <link rel=stylsheets> in the <head> and all your <scripts> just before </body>. <scripts> are blocking, so your page will load faster if the <scripts> are at the bottom. use:

Yii::app()->getClientScript()->coreScriptPosition = CClientScript::POS_END;

3. if you want to include some inline javascript in a view, but make it load at the bottom, after say jquery, use the registerScript() method. To format your js nicely, you can use the Heredoc syntax:

/* load some formatted js into a php variable: */
$js = <<<EOF
var = 'some javascript here!';
function() { return 'you can format it as you like, and include php $variables'; };
EOF;

/* write the script at the bottom of the document */
Yii::app()->getClientScript()->registerScript("some id", $js, CClientScript::POS_END);

Thursday, June 16, 2011

Shades of Grey (or Gray :)

black(Safe 16 SVG Hex3) #000000	gray1 #030303	gray2 #050505
gray3 #080808	gray4 #0A0A0A	gray5 #0D0D0D
gray6 #0F0F0F	gray7 #121212	gray8 #141414
gray9 #171717	gray10 #1A1A1A	gray11 #1C1C1C
gray12 #1F1F1F	gray13 #212121	gray14 #242424
gray15 #262626	gray16 #292929	gray17 #2B2B2B
gray18 #2E2E2E	gray19 #303030	gray20(Safe Hex3) #333333
gray21 #363636	gray22 #383838	gray23 #3B3B3B
gray24 #3D3D3D	gray25 #404040	gray26 #424242
gray27 #454545	gray28 #474747	gray29 #4A4A4A
gray30 #4D4D4D	gray31 #4F4F4F	gray32 #525252
gray33(Hex3) #555555	gray34 #575757	gray35 #595959
gray36 #5C5C5C	gray37 #5E5E5E	gray38 #616161
gray39 #636363	gray40(Safe Hex3) #666666	dimgrey(SVG) #696969
dimgray(SVG) #696969	gray42 #6B6B6B	gray43 #6E6E6E
gray44 #707070	gray45 #737373	gray46 #757575
gray47 #787878	gray48 #7A7A7A	gray49 #7D7D7D
grey(16 SVG) #808080	gray50 #7F7F7F	gray(16 SVG) #808080
gray51 #828282	gray52 #858585	gray53 #878787
gray54 #8A8A8A	gray55 #8C8C8C	gray56 #8F8F8F
gray57 #919191	gray58 #949494	gray59 #969696
gray60(Safe Hex3) #999999	gray61 #9C9C9C	gray62 #9E9E9E
gray63 #A1A1A1	gray64 #A3A3A3	gray65 #A6A6A6
darkgray(SVG) #A9A9A9	gray66 #A8A8A8	darkgrey(SVG) #A9A9A9
gray67 #ABABAB	sgilightgray(Hex3) #AAAAAA	gray68 #ADADAD
gray69 #B0B0B0	gray70 #B3B3B3	gray71 #B5B5B5
gray72 #B8B8B8	gray73 #BABABA	gray74 #BDBDBD
silver(16 SVG) #C0C0C0	gray #BEBEBE	gray75 #BFBFBF
gray76 #C2C2C2	gray77 #C4C4C4	gray78 #C7C7C7
gray79 #C9C9C9	verylightgrey #CDCDCD	gray80(Safe Hex3) #CCCCCC
gray81 #CFCFCF	gray82 #D1D1D1	gray83 #D4D4D4
lightgrey(SVG) #D3D3D3	lightgray(SVG) #D3D3D3	gray84 #D6D6D6
gray85 #D9D9D9	gainsboro(SVG) #DCDCDC	gray86 #DBDBDB
gray87 #DEDEDE	gray88 #E0E0E0	gray89 #E3E3E3
gray90 #E5E5E5	gray91 #E8E8E8	gray92 #EBEBEB
gray93 #EDEDED	gray94 #F0F0F0	gray95 #F2F2F2
whitesmoke(SVG) #F5F5F5	gray97 #F7F7F7	gray98 #FAFAFA
gray99 #FCFCFC	white(Safe 16 SVG Hex3) #FFFFFF

Cross-Browser CSS Horizontal Centering



/* use for inline (such as text or images) children */

.hcenter-child

{

text-align:center;

}

/*reset the text align, as it inherits*/

.hcenter-child *

{

text-align:left;

}



/* use for block children (ex divs) */

.hcenter

{

width:96%; /*needs any width other than auto*/

margin-left:auto;

margin-right:auto;

}

Cross-Browser CSS Border Radius



.round-borders

{

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;



/*see http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed*/

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

 /*use a behavior file for border radius for IE6-8. see http://www.impressivewebs.com/css3-rounded-corners-in-internet-explorer/

or try the jquery corner plugin */



}

Cross-Browser CSS Opacity

.opacity

{

opacity:.5; /*50%*/

filter:alpha(opacity=50);

zoom:1; /*iefix*/

}

Cross-Browser CSS Linear Gradients



.gradient

{  



background-color: #DDDDDD; /*fallback*/

background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC)); /*safari4+,chrome*/

background-image: -webkit-linear-gradient(top, #FFFFFF, #CCCCCC); /*chrome10+,safari5.1+*/

background-image: -moz-linear-gradient(top, #FFFFFF, #CCCCCC); /*ff3.6+*/

background-image: -ms-linear-gradient(top, #FFFFFF, #CCCCCC); /*ie10*/

background-image: -o-linear-gradient(top, #FFFFFF, #CCCCCC); /*opera11.1+*/

background-image: linear-gradient(top, #FFFFFF, #CCCCCC);



zoom:1; /*iefix*/    

/*GradientType  0=vertical, 1=horizontal*/  

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorStr='#FFFFFF', EndColorStr='#CCCCCC'); 



}

Cross-Browser CSS Box Shadows

I'm starting a series on cross-browser CSS.

Here's how to make a box shadow in Safari, Chrome, Firefox, Opera, and IE5.5+



.box-shadow

{

    

    /* parameters: horizontal-offset vertical-offset blur-radius color*/

    

    -moz-box-shadow:5px 5px 5px #cccccc; /*ff3.5+*/

    

    -webkit-box-shadow:5px 5px 5px #cccccc; /*safari3.2+*/

    

    box-shadow:5px 5px 5px #cccccc; /*chrome3+, opera10.5+, ie9+*/ 

    

    /* strength=shadow length. direction=angle in degrees clockwise from midnight. color=name or #nnnnnn*/

    

    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color=#cccccc); /*ie5.5-8*/

    

    zoom:1; /*iefix*/

    

}

Tuesday, June 14, 2011

How to fix font and color issues when you put a yii widget inside a jquery widget

If you put a Yii widget inside a jQueryUI widget, then it doesn't look quite right. Here's how to fix it

put this style sheet after you load jQueryUI's style sheet:



<style>

  /*use your site's font and font size*/

  .ui-widget {font-family:inherit; font-size:inherit;}



  /* make form controls inside jqueryui widgets use site font */

  .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-family:inherit; }



  /* links go black inside jqueryui. this changes colour of autocomplete however... */

  .ui-widget-content a {color:#06C;}

</style>

Alternatively, you could just edit jQueryUI's style sheet, or roll your own theme.

Also, the blueprint css framework makes jQueryUI's datepicker look wrong. Look for the typography section of screen.css, and comment out this section:



/* thead th      { background: #c3d9ff; } */

Pages

Wednesday, June 29, 2011

Thursday, June 16, 2011

Tuesday, June 14, 2011