UIkitを活用したベーシックなGeeklog2.1.1対応テーマHorizon

Geeklog 2.1.1 jpで同梱を開始したテーマHorizonは、UIkitを活用した最もベーシックなテーマです。 このテーマをベースに、あらゆるデザインに展開していってください。

• css_ltr/theme.css
• javascript/theme.js

このふたつがこのテーマのカスタマイズCSS, JavaScriptファイルですが、最少限度の追加となっています。

テーマの開発は以下を参照してください。

Geeklog 2.1.1 テーマ開発方法

本サイトは、さらに、初回訪問時に、寄付を依頼するフォームを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/geeklog222/public_html/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で呼ぶように追加しています。

jquery.cookie.js

ダウンロードはGitHubから