Posts Tagged ‘Layout’
CakePHP Layout/Template
Template for main page:
app/views/pages/home.ctp
Layout for main page:
app/view/layouts/default.ctp
CSS styles:
app/webroot/css
Convert Joomla Template into CakePHP Layout
Copy Template Files
1. Copy Joomla Template’s css/* file to your CakePHP’s webroot/css directory.
2. Copy Joomla Template’s images directory to your CakePHP’s webroot directory
3. Copy Joomla Template’s index.php file to your CakePHP’s views/layout/default.ctp
Modify the default.ctp to meet CakePHP’s requirements
1. Replace:
<?php mosShowHead(); ?>
With:
<title><?php echo $title_for_layout;?></title>
2. Replace $mosConfig_live_site with $this->webroot
3. Replace mosLoadModules with $this->renderElement
4. Replace:
mosMainBody();
With:
echo $content_for_layout;
Customizing Drupal’s user profile layout
1. Override the default User Profile page layout
Edit themes/xxx/template.php:
<?php
/**
* Catch the theme_profile_profile function, and redirect through the template api
*/
function phptemplate_user_profile($user, $fields = array()) {
// Pass to phptemplate, including translating the parameters to an associative array. The element names are the names that the variables
// will be assigned within your template.
/* potential need for other code to extract field info */
return _phptemplate_callback('user_profile', array('account' => $user, 'fields' => $fields));
}
?>
2. Edit the user_profile.tpl.php template file
Edit themes/xxx/user_profile.tpl.php.
DIV/CSS Common Layout
The float way
The float property sets where an image or a text will appear in another element.
Possible Values:
left: The image or text moves to the left in the parent element
right: The image or text moves to the right in the parent element
none: Default. The image or the text will be displayed just where it occurs in the text
The position Way
The position property places an element in a static, relative, absolute or fixed position.
Possible Values:
static: Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations)
relative: An element with position: relative moves an element relative to its normal position, so “left:20″ adds 20 pixels to the element’s LEFT position
absolute: An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties
fixed: An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)
1 Row 1 Column
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px;}
2 Rows 1 Column
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; }
#content-end {margin-left:auto; margin-right:auto; width: 400px; }
3 Rows 1 Column
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px;}
#content-mid { margin-left:auto; margin-right:auto; width: 400px;}
#content-end { margin-left:auto; margin-right:auto; width: 400px; }
1 Row 2 Columns
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}
2 Rows 2 Columns
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}
3 Rows 2 Columns
#header {width: 700px;margin-right: auto; margin-left: auto;}
#bodycenter {width: 700px; margin-right: auto; margin-left: auto;}
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right; width: 410px;}
#footer {width: 700px; margin-right: auto; margin-left: auto; overflow: auto;}
1 Row 3 Columns(position way)
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}
1 Row 3 Columns(float way)
xhtml:
<div id="warp">
<div id="column">
<div id="column1">This is column 1</div>
<div id="column2">This is column 2</div>
<div class="clear"></div>
</div>
<div id="column3">This is column 3</div>
<div class="clear"></div>
</div>
CSS:
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
1 Row 3 Columns(float way 2)
xhtml:
<div id="center" class="column">
<h1>This is the main content.</h1>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
</div>
CSS:
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}
2 Rows 3 Columns
xhtml:
<div id="header">This is the header</div>
<div id="warp">
<div id="column">
<div id="column1">This is the column 1</div>
<div id="column2">This is the column 2</div>
<div class="clear"></div>
</div>
<div id="column3">This is the column 3</div>
<div class="clear"></div>
</div>
CSS:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
3 Rows 3 Columns
xhtml:
<div id="header">This is the header</div>
<div id="warp">
<div id="column">
<div id="column1">This is the column 1</div>
<div id="column2">This is the column 2</div>
<div class="clear"></div>
</div>
<div id="column3">This is the column 3</div>
<div class="clear"></div>
</div>
<div id="footer">This is the footer</div>
CSS:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}