concrete5 5.7でテーマ作ってみよう超初級編

•
•
•
•
•
•
•
•
•
広島でコンクリ Vol.6 3

upload_max_filesize = 20M
post_max_size = 20M
memory_limit = 96M
safe_mode=Off
cgi.fix_pathinfo = 1
date.timezone = Asia/Tokyo

ルートディレクトリ/themes

ルートディレクトリ/application/themes

description.txt default.php header.php footer.phpthumnail.png

description.txt thumnail.png
default.php header.php footer.php
Page_theme.
php

<?php
namespace Application¥Theme¥Hana;
class PageTheme extends¥Concrete¥Core¥Page¥Theme¥Theme {
protected $pThemeGridFrameworkHandle = 'bootstrap3';
}

namespace Application¥Theme¥Test;
↓
フォルダ名：test
“

http://getbootstrap.com/

description.txt
Sample
Sample theme for HIROSHIMA de CONCRE
thumnail.png
360×270

Page_theme.
php
<?php
namespace Application¥Theme¥Sample;
class PageTheme extends¥Concrete¥Core¥Page¥Theme¥Theme {
protected $pThemeGridFrameworkHandle = ‘bootstrap3’;
//bootstrap3のグリッドレイアウトを使えるようにする
public function getThemeName()
{
return t(‘サンプル’);//テーマ名
}
public function getThemeDescription()
{
return t(‘コンクリのサンプル');//テーマの説明
}
}

Page_theme.
php
thumnail.png
360×270

default.php
Page_theme.
php
thumnail.png
360×270

“

@themecolor:#c00000;
↓
backgroound: @themecolor;
color: @themecolor;
.borderRadius {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
↓
#main{
Background:@themecolor
.borderRadius();
}
http://ascii.jp/elem/000/000/668/668205/

main.less theme.less
残りのless残りのless
残りのless

@import “○○.less";
↓
@import "build/mixins.less";
@import “theme.less“;

<?php defined('C5_EXECUTE') or die("Access Denied.");?>
<?php echo $this->getThemePath()?>/～ディレクトリ

header.php footer.php

<?php Loader::element('header_required');?>
</head>
<?php echo $html->css($view->getStylesheet('main.less'))?>
<html lang=“en”> → <html lang="<?php echo Localization::activeLanguage()?>">

<?php Loader::element('footer_required'); ?>
</body>

<div class="<?php echo $c->getPageWrapperClass()?>">
</div>

<?php
$u = new User();
if (!$u->isRegistered()) { ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php echo $this->getThemePath()?>/js/bootstrap.min.js"></script>
<?php } ?>

header.php

<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
//Bootstrapサンプルサイトの残りのソース
<?php $this->inc('elements/footer.php'); ?>

<?php if (id(new User)->isLoggedIn()) { ?>
<style>
body{
margin-top:99px!important;
}
nav.navbar.navbar-inverse.navbar-fixed-top{
margin-top:50px!important;
}
</style>
<?php } ?>

<?php
$a = new GlobalArea(‘エリア名');
$a->display();
?>
<?php
$a = new Area('Main');
$a->display($c);
?>

<?php
$a->enableGridContainer();
$a->display($c);
?>

<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
…省略
</div>
→ここに右のソースを追加してみよう
…省略
<div class="row">
<div class="col-md-12">
<?php
$a->enableGridContainer();
$a->display($c);
?>
</div>
</div>
</div>

concrete5 5.7でテーマ作ってみよう 超初級編

More Related Content

Viewers also liked

More from Yuriko Kamimori

Recently uploaded