Themes default Yii

Kali ini kita bahas cara menggunakan themes pada Yii. Sebelum kita lanjut ada yang mengenal istilah themes (tema) ?

Tema adalah sekumpulan css, javascript yang bertujuan untuk mempercantik tampilan web. (lihat gambar dibawah ini)

Theme Default Yii

Yii, pada saat kita melakukan instalasi web applikasi, sudah menyediakan theme classic, coba dilihat folder themes.

Berikut struktur folder themes

classic/
            views/
                .htaccess
                layouts/
                    column1.php
                    column2.php
                    main.php
                site/
                    index.php

classic/

views/

.htaccess

layouts/

column1.php

column2.php

main.php

site/

index.php

kalau kita bedah satu per satu isi file

column1.php

<?php /* @var $this Controller */ ?>
<?php $this->beginContent('//layouts/main'); ?>
<div id="content">
	<?php echo $content; ?>
</div><!-- content -->
<?php $this->endContent(); ?>

<?php /* @var $this Controller */ ?>

<?php $this->beginContent('//layouts/main'); ?>

<?php echo $content; ?>

</div>

<?php $this->endContent(); ?>

column2.php

<?php /* @var $this Controller */ ?>
<?php $this->beginContent('//layouts/main'); ?>
<div class="span-19">
	<div id="content">
		<?php echo $content; ?>
	</div><!-- content -->
</div>
<div class="span-5 last">
	<div id="sidebar">
	<?php
		$this->beginWidget('zii.widgets.CPortlet', array(
			'title'=>'Operations',
		));
		$this->widget('zii.widgets.CMenu', array(
			'items'=>$this->menu,
			'htmlOptions'=>array('class'=>'operations'),
		));
		$this->endWidget();
	?>
	</div><!-- sidebar -->
</div>
<?php $this->endContent(); ?>

<?php /* @var $this Controller */ ?>

<?php $this->beginContent('//layouts/main'); ?>

<?php echo $content; ?>

</div>

</div>

<?php

$this->beginWidget('zii.widgets.CPortlet', array(

'title'=>'Operations',

));

$this->widget('zii.widgets.CMenu', array(

'items'=>$this->menu,

'htmlOptions'=>array('class'=>'operations'),

));

$this->endWidget();

</div>

</div>

<?php $this->endContent(); ?>

main.php

<?php /* @var $this Controller */ ?>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="language" content="en">

	<!-- blueprint CSS framework -->
	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/screen.css" media="screen, projection">
	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/print.css" media="print">
	<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection">
	<![endif]-->

	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/main.css">
	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/form.css">

	<title><?php echo CHtml::encode($this->pageTitle); ?></title>
</head>

<body>

<div class="container" id="page">

	<div id="header">
		<div id="logo"><?php echo CHtml::encode(Yii::app()->name); ?></div>
	</div><!-- header -->

	<div id="mainmenu">
		<?php $this->widget('zii.widgets.CMenu',array(
			'items'=>array(
				array('label'=>'Home', 'url'=>array('/site/index')),
				array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
				array('label'=>'Contact', 'url'=>array('/site/contact')),
				array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
				array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
			),
		)); ?>
	</div><!-- mainmenu -->
	<?php if(isset($this->breadcrumbs)):?>
		<?php $this->widget('zii.widgets.CBreadcrumbs', array(
			'links'=>$this->breadcrumbs,
		)); ?><!-- breadcrumbs -->
	<?php endif?>

	<?php echo $content; ?>

	<div class="clear"></div>

	<div id="footer">
		Copyright &copy; <?php echo date('Y'); ?> by My Company.<br/>
		All Rights Reserved.<br/>
		<?php echo Yii::powered(); ?>
	</div><!-- footer -->

</div><!-- page -->

</body>
</html>

<?php /* @var $this Controller */ ?>

<!DOCTYPE html>

<html>

<head>

<!--[if lt IE 8]>

<![endif]-->

<title><?php echo CHtml::encode($this->pageTitle); ?></title>

</head>

<body>

</div>

<?php $this->widget('zii.widgets.CMenu',array(

'items'=>array(

array('label'=>'Home', 'url'=>array('/site/index')),

array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),

array('label'=>'Contact', 'url'=>array('/site/contact')),

array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),

array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)

)); ?>

</div>

<?php if(isset($this->breadcrumbs)):?>

<?php $this->widget('zii.widgets.CBreadcrumbs', array(

'links'=>$this->breadcrumbs,

)); ?>

<?php endif?>

<?php echo $content; ?>

<?php echo Yii::powered(); ?>

</div>

</div>

</body>

</html>

File CSS

body
{
	margin: 0;
	padding: 0;
	color: #555;
	font: normal 10pt Arial,Helvetica,sans-serif;
	background: #EFEFEF;
}

#page
{
	margin-top: 5px;
	margin-bottom: 5px;
	background: white;
	border: 1px solid #C9E0ED;
}

#header
{
	margin: 0;
	padding: 0;
	border-top: 3px solid #C9E0ED;
}

#content
{
    padding: 20px;
}

#sidebar
{
	padding: 20px 20px 20px 0;
}

#footer
{
	padding: 10px;
	margin: 10px 20px;
	font-size: 0.8em;
	text-align: center;
	border-top: 1px solid #C9E0ED;
}

#logo
{
	padding: 10px 20px;
	font-size: 200%;
}

#mainmenu
{
	background:white url(bg.gif) repeat-x left top;
}

#mainmenu ul
{
	padding:6px 20px 5px 20px;
	margin:0px;
}

#mainmenu ul li
{
	display: inline;
}

#mainmenu ul li a
{
	color:#ffffff;
	background-color:transparent;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	padding:5px 8px;
}

#mainmenu ul li a:hover, #mainmenu ul li.active a
{
	color: #6399cd;
	background-color:#EFF4FA;
	text-decoration:none;
}

div.flash-error, div.flash-notice, div.flash-success
{
	padding:.8em;
	margin-bottom:1em;
	border:2px solid #ddd;
}

div.flash-error
{
	background:#FBE3E4;
	color:#8a1f11;
	border-color:#FBC2C4;
}

div.flash-notice
{
	background:#FFF6BF;
	color:#514721;
	border-color:#FFD324;
}

div.flash-success
{
	background:#E6EFC2;
	color:#264409;
	border-color:#C6D880;
}

div.flash-error a
{
	color:#8a1f11;
}

div.flash-notice a
{
	color:#514721;
}

div.flash-success a
{
	color:#264409;
}

div.form .rememberMe label
{
	display: inline;
}

div.view
{
	padding: 10px;
	margin: 10px 0;
	border: 1px solid #C9E0ED;
}

div.breadcrumbs
{
	font-size: 0.9em;
	padding: 5px 20px;
}

div.breadcrumbs span
{
	font-weight: bold;
}

div.search-form
{
	padding: 10px;
	margin: 10px 0;
	background: #eee;
}

.portlet
{

}

.portlet-decoration
{
	padding: 3px 8px;
	background: #B7D6E7;
	border-left: 5px solid #6FACCF;
}

.portlet-title
{
	font-size: 12px;
	font-weight: bold;
	padding: 0;
	margin: 0;
	color: #298dcd;
}

.portlet-content
{
	font-size:0.9em;
	margin: 0 0 15px 0;
	padding: 5px 8px;
	background:#EFFDFF;
}

.portlet-content ul
{
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin: 0;
	padding: 0;
}

.portlet-content li
{
	padding: 2px 0 4px 0px;
}

.operations
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.operations li
{
	padding-bottom: 2px;
}

.operations li a
{
	font: bold 12px Arial;
	color: #0066A4;
	display: block;
	padding: 2px 0 2px 8px;
	line-height: 15px;
	text-decoration: none;
}

.operations li a:visited
{
	color: #0066A4;
}

.operations li a:hover
{
	background: #80CFFF;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

body

{

margin: 0;

padding: 0;

color: #555;

font: normal 10pt Arial,Helvetica,sans-serif;

background: #EFEFEF;

}

#page

{

margin-top: 5px;

margin-bottom: 5px;

background: white;

border: 1px solid #C9E0ED;

}

#header

{

margin: 0;

padding: 0;

border-top: 3px solid #C9E0ED;

}

#content

{

padding: 20px;

}

#sidebar

{

padding: 20px 20px 20px 0;

}

#footer

{

padding: 10px;

margin: 10px 20px;

font-size: 0.8em;

text-align: center;

border-top: 1px solid #C9E0ED;

}

#logo

{

padding: 10px 20px;

font-size: 200%;

}

#mainmenu

{

background:white url(bg.gif) repeat-x left top;

}

#mainmenu ul

{

padding:6px 20px 5px 20px;

margin:0px;

}

#mainmenu ul li

{

display: inline;

}

#mainmenu ul li a

{

color:#ffffff;

background-color:transparent;

font-size:12px;

font-weight:bold;

text-decoration:none;

padding:5px 8px;

}

#mainmenu ul li a:hover, #mainmenu ul li.active a

{

color: #6399cd;

background-color:#EFF4FA;

text-decoration:none;

}

div.flash-error, div.flash-notice, div.flash-success

{

padding:.8em;

margin-bottom:1em;

border:2px solid #ddd;

}

div.flash-error

{

background:#FBE3E4;

color:#8a1f11;

border-color:#FBC2C4;

}

div.flash-notice

{

background:#FFF6BF;

color:#514721;

border-color:#FFD324;

}

div.flash-success

{

background:#E6EFC2;

color:#264409;

border-color:#C6D880;

}

div.flash-error a

{

color:#8a1f11;

}

div.flash-notice a

{

color:#514721;

}

div.flash-success a

{

color:#264409;

}

div.form .rememberMe label

{

display: inline;

}

div.view

{

padding: 10px;

margin: 10px 0;

border: 1px solid #C9E0ED;

}

div.breadcrumbs

{

font-size: 0.9em;

padding: 5px 20px;

}

div.breadcrumbs span

{

font-weight: bold;

}

div.search-form

{

padding: 10px;

margin: 10px 0;

background: #eee;

}

.portlet

{

}

.portlet-decoration

{

padding: 3px 8px;

background: #B7D6E7;

border-left: 5px solid #6FACCF;

}

.portlet-title

{

font-size: 12px;

font-weight: bold;

padding: 0;

margin: 0;

color: #298dcd;

}

.portlet-content

{

font-size:0.9em;

margin: 0 0 15px 0;

padding: 5px 8px;

background:#EFFDFF;

}

.portlet-content ul

{

list-style-image:none;

list-style-position:outside;

list-style-type:none;

margin: 0;

padding: 0;

}

.portlet-content li

{

padding: 2px 0 4px 0px;

}

.operations

{

list-style-type: none;

margin: 0;

padding: 0;

}

.operations li

{

padding-bottom: 2px;

}

.operations li a

{

font: bold 12px Arial;

color: #0066A4;

display: block;

padding: 2px 0 2px 8px;

line-height: 15px;

text-decoration: none;

}

.operations li a:visited

{

color: #0066A4;

}

.operations li a:hover

{

background: #80CFFF;

}

Nah file-file inilah yang kita edit agar aplikasi kita menjadi cantik, silahkan dicoba, nanti kita bahas mengenai memasukkan themes diluar yang cantik, misalkan Admin LTE, Hebo dan lain-lain

Theme Default Yii

Leave a reply Cancel reply

Recent Posts

Recent Comments

Categories

Themes default Yii

Theme Default Yii

Related Posts

Yii Reporting, Membuat laporan PDF dengan Yii

Gii, Yii Code Generator

Extension, Widget dan Component, Membuat Yii Makin Keren

Start Your Engine, Membuat Web Aplikasi dengan Yii

Leave a reply Cancel reply

Recent Posts

Recent Comments

Categories