Zack LiveTutorials | Best Premium WordPress Themes - Zack Live

Design a Master CSS Stylesheet

Zack — Mon, 22 Feb 2010 07:27:49 +0000

Every time we start a new website, we need to write our CSS code from the beginning. Actually, many of the codes are the same as our previous website, like settings of blockquote, title(

to

), etc. I was thinking that we can create a CSS template for all websites which containing most common CSS settings.

I lately found Kyle has done this, his master stylesheet has everything I need for a new website. I tried to add something to the stylesheet, but not much can be added, but the global browser setting I learn from Andrew, which may be useful:

* {
	padding:0;
	margin:0;
}

So here is my stylesheet:

/***** Browser Settings *****/
* {
	padding:0;
	margin:0;
}
/***** Global Settings *****/

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}

/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}

h3 {
font-size:1em;
font-weight:bold;
}

/***** Common Formatting *****/

p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}

ul, ol {
padding:0 0 1.25em 2.5em;
}

blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}

textarea {
width:100%;
line-height:1.25;
}

label {
cursor:pointer;
}

/***** Tables *****/

table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}

table tr td {
padding:2px;
}

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }

.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }

.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }

.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }

.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }

Let’s name this as version 0.1, we will improve it when we learn new technique.

You can also find more information about master stylesheet from this post.

Hello World Tutorial for Kohana

Zack — Tue, 01 Jul 2008 04:44:47 +0000

It seems unnecessary to write a Hello World tuorial for a PHP framework, because when someone comes to framework, he is no longer a beginner, can figure out his own Hello World. But this idea comes up in my brain, and I guess it might be helpful for someone who is the first time to work with MVC or OOP. It’s quite simple, let’s get started.

You should have installed Kohana correctly, now we create a hello.php in /application/controllers/, here is the content of the file:

/**
* Hello World controller
*/
class Hello_Controller extends Template_Controller
{
function __construct()
{
parent::__construct();
}

function index()
{
$this->template->title = “Hello World”;
$this->template->content = “Hello, welcome to Kohana World !!!”;
}
}
?>

We have a Hello Controller with a index method, so we can call this page in the URL: localhost/kohana/index.php/hello. If you cannot understand this, you may want to see ‘Show me, don’t tell me‘ section in Kohana 101. In the Hello Controller, we set the title and content of our Hello World page, of course you can change the title and content into anything.

Now we have a Controller, we also need a View to reveal the page. Create a template.php in /applicaion/views/, and type in the fellowing codes:

<?php echo $title ?>

Very simple HTML codes, echo the title and content set in the Hello Controller to the page, that’s all what it does. You can see how Kohana works, processing in Controller, sending the result to View, and the View exhibit the page.

Usually I’d like to add a profiler to a example page, so that we can see some system information. It’s very easy to do that, just add one line to the Construt function in the Controller:

$this->profiler = new Profiler;

So the Hello Controller file should look like this:

/**
* Hello World controller
*/
class Hello_Controller extends Template_Controller
{
function __construct()
{
parent::__construct();
$this->profiler = new Profiler;
}

function index()
{
$this->template->title = “Hello World”;
$this->template->content = “Hello, welcome to Kohana World !!!”;
}
}
?>

We can now visit localhost/kohana/index.php/hello, you will have a page the same as the image above.

You already have some basic concepts of Kohana now, I highly recommand you to read Kohana 101, or if you are even not sure how to setup your own Kohana, you can read my post, Install Kohana on Windows. Hope this can help you.

Install Kohana on Windows

Zack — Tue, 01 Jul 2008 01:49:12 +0000

I’m new to Kohana, making this tutorial just want to do something for the community. Please let me know, if you found any mistakes. Ok, let’s cut to the chase.

I suppose you have your server installed, if not I recommand AppServ. It’s better to use the latest version of Kohana from SVN, so you might need TortoiseSVN. I create a folder called Kohana in my webroot, check out the truck folder from SVN, it’s quite easy to do it, right click, select SVN Check…

Type http://svn.kohanaphp.com/trunk in URL of repository, click ok, and wait for the download.

And then you will have three folders: application, modules and system; and three files: index.php, kohana.png, Kohana License.html. To see if Kohana is installed properly, type localhost/Kohana, you will see the welcome page:

Now you may want to do some configuration. Open config.php in /application/config/ folder, the first setting is the site domain, we are using localhost here, so just leave it as ‘/kohana/’. For the second one site protocol, we mostly use ‘http’. That’s all what we do for this moment.

I would like to do some test now. Create a test.php file in /application/controllers/, type in the fellowing codes:

/**
* Test controller
*/
class Test_Controller extends Template_Controller
{
function __construct()
{

parent::__construct();
//Generate system information, you should try to comment this line to see what will the page be.
$this->profiler = new Profiler;
}

function index()

{
//Set the page title.
$this->template->title = ‘Test Page’;
}
}
?>

We also need to create a template.php in /application/views/, it looks like this:

<?php echo $title ?>

Back to the blowser, we have visited localhost/kohana, and now we go to localhost/kohana/index.php/test, you should have a page like this:

There are only two parts in this page, the first one is the title of the page, setting by ‘$this->template->title = “Test Page”;’ and the second part is a table of some system information generated by the profiler library: ‘$this->profiler = new Profiler;’

Ok, that’s all, for further issue, you should keep an eye on my blog and Kohana official website.