UIkitを活用したベーシックなGeeklog2.1.1対応テーマHorizon
- 2015/12/15 22:46 JST
- 投稿者: Ivy
- 表示回数 1,554
Geeklog 2.1.1 jpで同梱を開始したテーマHorizonは、UIkitを活用した最もベーシックなテーマです。 このテーマをベースに、あらゆるデザインに展開していってください。
- css_ltr/theme.css
- javascript/theme.js
このふたつがこのテーマのカスタマイズCSS, JavaScriptファイルですが、最少限度の追加となっています。
テーマの開発は以下を参照してください。
本サイトは、さらに、初回訪問時に、寄付を依頼するフォームをModal表示しています。JavaScript開発はWinkeyひろろんさんです。
<div id="paypal" class="uk-modal">
<div class="uk-modal-dialog ">
<a class="uk-modal-close uk-close"></a>
<div class="uk-grid">
<div class="uk-width-1-2 uk-container-center">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" class="uk-form">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="8Z292C2JSXZRS">
<table>
<tr><td><input type="hidden" name="on0" value="ご寄付">ご寄付</td></tr><tr><td><select name="os0">
<option value="ご寄付">ご寄付 ¥100 JPY</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="ひとこと">ひとこと</td></tr><tr><td><input type="text" name="os1" maxlength="200" ></td></tr>
<tr><td><input type="hidden" name="on2" value="公開可能なお名前またはニックネーム">公開可能なお名前またはニックネーム</td></tr><tr><td><input type="text" name="os2" maxlength="200" ></td></tr>
</table>
<input type="hidden" name="currency_code" value="JPY">
<input type="image" src="https://www.geeklog.jp/images/library/Image/logo_donate.png" border="0" name="submit" alt="PayPal - オンラインでより安全・簡単にお支払い" style="max-width:100%">
<img alt="" border="0" src="https://www.paypalobjects.com/ja_JP/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
<div class="uk-width-1-1 uk-text-center">
お役にたてたら
Geeklog JapanにPayPalで寄付
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
if(!$.cookie("access")){
$(document).ready(function(){
$.UIkit.modal('#paypal').show();
});
}
$(window).load(function(){
$.cookie("access","foo", { expires: 1 });
})
});
</script>
codeのhightsは、UIkitのリポジトリに追加されているvendor/highlightを活用しています。
なお、ヘッダでcookieを処理するJavaScript をfunctions.phpで呼ぶように追加しています。
ダウンロードはGitHubから
