46

Style sheets

Layout and head of a document  |  Controlling actions

Create site5 by copying site4.

  1. /cms
    1. ...
    2. site4
    3. site5

In this chapter, we are going to organize CSS files and see how style sheets can be added dynamically to a document.

To test the result online, enter http://www.frasq.org/cms/site5 in the address bar of your navigator.

Create the folder css in site5.

  1. /cms/site5
    1. css

Style sheets are added by the view head.phtml which generates the <head> section of a document.

  1. <?php if (true): ?>
  2. <link href="<?php echo $base_path; ?>/css/zero.css" rel="stylesheet" type="text/css" media="screen" />
  3. <?php endif; ?>
  4. <link href="<?php echo $base_path; ?>/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
  5. <link href="<?php echo $base_path; ?>/css/theme.css" rel="stylesheet" type="text/css" media="screen" />
  6. <link href="<?php echo $base_path; ?>/css/print.css" rel="stylesheet" type="text/css" media="print" />
  7. <?php if (isset($stylesheets)): ?>
  8. <?php foreach ($stylesheets as $css) : ?>
  9. <link href="<?php echo $base_path; ?>/css/<?php echo $css['name']; ?>.css" rel="stylesheet" type="text/css" media="<?php echo $css['media']; ?>" />
  10. <?php endforeach; ?>
  11. <?php endif; ?>

The code starts by including the 4 files zero.css, screen.css, theme.css and print.css, then all the files in the array $stylesheets which is built dynamically by the function head defined in head.php:

  1.         case 'stylesheet':
  2.             $name=$args[0];
  3.             $media=isset($args[1]) ? $args[1] : 'all';
  4.             if (!isset($head['stylesheets'])) {
  5.                 $head['stylesheets'] = array(compact('name', 'media'));
  6.             }
  7.             else {
  8.                 foreach ($head['stylesheets'] as $css) {
  9.                     if ($css['name'] == $name) {
  10.                         break 2;
  11.                     }
  12.                 }
  13.                 $head['stylesheets'][]=compact('name', 'media');
  14.             }
  15.             break;

EXAMPLE: Calling head('stylesheet', 'php', 'screen') adds the file php.css associated to the media screen to the list of style sheets in $head. Notice that the code is careful not to add the same file twice.

Copy all the style sheets files in the folder css.

  1. /cms/site5
    1. css
      1. zero.css
      2. screen.css
      3. theme.css
      4. print.css
zero.css
  1. html, body, div, span, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, code,
  4. del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
  5. fieldset, form, label, legend,
  6. table, caption, tbody, tfoot, thead, tr, th, td
  7. {font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
  8.  
  9. caption, th, td {text-align:left;font-weight:400;}
  10.  
  11. blockquote:before, blockquote:after, q:before, q:after {content:"";}
  12. blockquote, q {quotes:"" "";}
  13.  
  14. h1 {font-size:170%;}
  15. h2 {font-size:160%;line-height:130%;}
  16. h3 {font-size:140%;}
  17. h4 {font-size:110%;}
  18. h5 {font-size:110%;}
  19. h6 {font-size:100%;}
  20.  
  21. ul, pre {margin-top:1em;}
  22.  
  23. form {margin:0;}
  24.  
  25. input, select {vertical-align:middle;}
  26.  
  27. p, dl, multicol {margin:1em 0;}
  28.  
  29. a img {border:0;vertical-align:middle;margin:0;}
  30.  
  31. a:link, a:visited {text-decoration:none;}
  32. a:hover {text-decoration:underline;}

zero.css tries to normalize some properties which navigators set differently by default.

screen.css
  1. body {width:960px;margin:5px 0 0 50px;}
  2.  
  3. body {font-family:sans-serif;font-size:medium;}
  4.  
  5. h1, h2, h3, h4, h5, h6, label, caption, #rate-it legend {font-family:Helvetica, "Helvetica Neue", Arial, sans-serif;}
  6.  
  7. code {font-family:"Courier New", Courier, monospace;}
  8. pre code {font-size:10pt;}
  9.  
  10. h1,h2,h3,h4,h5,h6 {font-weight:bold;}
  11.  
  12. h1,h2,h3,h4,h5,h6 {margin:1em 0 0.5em 0;}
  13.  
  14. label, legend {font-size:80%;}
  15.  
  16. table th, table td {padding:5px;margin:0;}
  17.  
  18. form p {vertical-align:top;}
  19.  
  20. input {margin-top:0;margin-bottom:0;vertical-align:middle;}
  21.  
  22. img {vertical-align:middle;}
  23.  
  24. .hidden {display:none;}
  25. .invisible {visibility:hidden;}
  26.  
  27. .left {float:left;margin:0 1em 0 0;}
  28. .right {float:right;margin:0 0 0 1em;}
  29.  
  30. .x-large {font-size:x-large;}
  31. .large {font-size:large;}
  32. .medium {font-size:medium;}
  33. .small {font-size:small;}
  34. .x-small {font-size:x-small;}
  35.  
  36. .smaller {font-size:smaller;}
  37. .larger {font-size:larger;}
  38.  
  39. .emphasis {font-style:italic;}
  40. .superscript {vertical-align:super;}
  41.  
  42. .aleft {text-align:left;}
  43. .aright {text-align:right;}
  44. .acenter {text-align:center;}
  45.  
  46. #content {margin:1em 0 1em 0;clear:both;}
  47.  
  48. #footer {font-size:small;margin:2em 0 1em 0;clear:both;}
  49. #footer p {margin: 0.5em 0 0.5em 0;}
  50. #footer p img {vertical-align:middle;}

screen.css defines properties which are identical for all the site's themes.

theme.css
  1. a:link, a:visited {color:#ec902d;}
  2. a:hover {color:#2c430d;}
  3.  
  4. body {color:#333333;font-family:Verdana, sans-serif;font-size:100%;}
  5.  
  6. h1,h2,h3 {color:#aec14e;}
  7. h4 {color:#aec14e;}
  8. h5 {color:#df6f6f;}
  9. h6 {color:#666666;}
  10.  
  11. h4 a:link {color:#aec14e;text-decoration:none;}
  12. h4 a:hover {color:#ec902d;text-decoration:none;}
  13.  
  14. h3 {line-height:24px;background:transparent url(../images/heading.png) no-repeat;text-indent:30px;margin:0 0 0.5em 0;}
  15.  
  16. pre {border:1px dashed #808080;padding:3px;background-color:#ffffe0;color:#333333;overflow:auto;}

theme.css adds properties which are specific to a theme.

Add the decoration for the <h3> titles in the folder images:

  1. /cms/site5
    1. images
      1. heading.png
heading.png

print.css
  1. * {background-color:white !important;}
  2.  
  3. body {line-height:1.5;font-family:inherit;color:#000;background:none;font-size:10pt;}
  4. .container {background:none;}
  5. hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}
  6. hr.space {background:#fff;color:#fff;}
  7. h1, h2, h3, h4, h5, h6 {font-family:inherit}
  8. code {font:.9em "Courier New", Courier, monospace;}
  9. a img {border:none;}
  10. p img.top {margin-top:0;}
  11. blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}
  12. a {color:#fff;text-decoration:none;}
  13.  
  14. h1, h2, h3, h4, h5, h6 {page-break-after:avoid;page-break-inside:avoid}
  15. blockquote, table, pre {page-break-inside:avoid}
  16. ul, ol, dl {page-break-before:avoid}
  17. img {page-break-inside:avoid; page-break-after:avoid; float:none}
  18.  
  19. .pagebreak {page-break-before:avoid}
  20.  
  21. .hidden {display:none;}
  22. .noprint {display:none;}

print.css tries to make printing pages on paper more readable.

site5.zip

Comments

Your comment:
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip help 2000

Enter a maximum of 2000 characters.
Improve the presentation of your text with the following formatting tags:
[p]paragraph[/p], [b]bold[/b], [i]italics[/i], [u]underline[/u], [s]strike[/s], [quote]citation[/quote], [pre]as is[/pre], [br]line break,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]command[/code], [code=language]source code in c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].