Jello Exposure

Submitted by zany on Fri, 2008-08-22 23:17
in
Sliding Doors

A very light and bright Drupal theme using the Zen framework. The main color is pure white with delicate gray highlights.

The main feature here is a Jello-style layout for Zen. Based on Jello Mold the behaviour is like Garland / Minnelli.

The theme for this site uses the layout.css, try resizing the browser to get an impression of the Jello effect.

The actual theme specific css is just lightly themed to present it in a nice way.

There is one simple change to the page.tpl.php file, a div#float-wrap is added to wrap the main content and left sidebar so they can be grouped against the right sidebar.

The bulk of code is in the layout.css, here are the main changes to the zen/layout-liquid.css as pseudo diff:

  1.    body
  2.    {
  3.      margin: 0;
  4. -    padding: 10px;
  5. +       padding: 0 25em; /* all above 21.875em is padding */
  6. +       text-align: center; /* centering hack for IE5.x/Win */
  7.    }
  8.  
  9.    #page
  10.    {
  11. +       width: 50%; /* this value controls liquidity; 0% = full rigid, 100% = full liquid */
  12. +       margin: 0 auto; /* standard centering method */
  13. +       padding: 0;
  14. +       text-align: left; /* resets centering hack to default */
  15.    }
  16.  
  17.    #page-inner
  18.    {
  19. +       position: relative;
  20. +       margin: 0 -25em;
  21. +       min-width: 50em;
  22. +       text-align: left; 
  23. +       min-height: 1px; /* This harmless declaration gives Layout to IE7, which can't read the Holly hack below */
  24.    }
  25.  
  26. +  /* Holly hack for IE \*/
  27. +  * html body,
  28. +  * html #page,
  29. +  * html #page-inner { height: 0; }
  30. +  /* */
  31.  
  32.   #main
  33.   {
  34. -     position: relative;
  35.   }
  36.  
  37. +  #main,
  38. +  .two-sidebars #main
  39. +   {
  40. +    margin-left: 18em; /* The width of #sidebar-left */
  41. +    margin-right: 18em; /* Negative value of #content's width + left margin. */
  42. +   }
  43.  
  44. +  .sidebar-left #main
  45. +   {
  46. +    margin-left: 18em; /* The width of #sidebar-left */
  47. +    margin-right: 0; /* Negative value of #content's width + left margin. */
  48. +   }
  49.  
  50. +  .sidebar-right #main
  51. +   {
  52. +    margin-left: 0; /* The width of #sidebar-left */
  53. +    margin-right: 18em; /* Negative value of #content's width + left margin. */
  54. +  }
  55.  
  56. +  .no-sidebars #main
  57. +  {
  58. +    margin-left: 0; /* The width of #sidebar-left */
  59. +    margin-right: 0; /* Negative value of #content's width + left margin. */
  60. +   }
  61.  
  62. +  #float-wrap
  63. +   {
  64. +     float: left;
  65. +     width: 100%;
  66. +   }
  67.  
  68.   #content
  69.    {
  70. -     float: left;
  71. +     float: right;
  72.     width: 100%;
  73. -    margin-left: 0;
  74. -    margin-right: -100%; /* Negative value of #content's width + left margin. */
  75.     padding: 0;
  76.    }
  77.  
  78. -   .two-sidebars #content-inner
  79. -   {
  80. -     padding-left: 200px; /* The width + left margin of #sidebar-left. */
  81. -     padding-right: 200px; /* The width + right margin of #sidebar-right. */
  82. -   }
  83.  
  84. -   .sidebar-left #content-inner
  85. -   {
  86. -     padding-left: 200px; /* The width + left margin of #sidebar-left. */
  87. -     padding-right: 0;
  88. -   }
  89.  
  90. -   .sidebar-right #content-inner
  91. -   {
  92. -     padding-left: 0;
  93. -     padding-right: 200px; /* The width + right margin of #sidebar-right. */
  94. -   }

There is some more rigid vs. elastic positioning, but that’s about it.

AttachmentSize
exposure-1.0.zip33.93 KB

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You can use BBCode tags in the text.
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".

More information about formatting options