Events Manager(イベント一覧①)

Events Managerのは、プレースフォルダが用意されています。
ログイン後の左側、イベントの中にヘルプがありますが、その中に書いてあります。英語ですが。。。
今回、私が作成したのは、
トップページのイベント一覧と他のページにイベント一覧を載せるというもの。
必要なのは。
#_EVENTIMAGE : イベントのイメージ
#_EVENTURL : イベント詳細へのURL
#_{Y年n月j日(D)}#@_{-n月j日(D)} : イベントの開催日
#_EVENTTIMES : イベントの時間
#_LOCATIONLINK : 開催地のリンク
#_EVENTPRICERANGEALL : イベント料金
です。
これを、HTMLの中に入れていけば、OK!
で!作ったのがコレ(トップページ)
ショートコード[events_list]で表示させる為、イベント→ 書式設定 → イベント一覧のここに↓
以下の内容を記述
<div class="box"> <a href="#_EVENTURL"> <figure class="event-thumb"> {has_image}#_EVENTIMAGE{/has_image} {no_image}画像はありません{/no_image} </figure> </a> <h1 class="event-list-title"> <a href="#_EVENTURL"> {is_future}近日開催{/is_future} {is_current}開催中{/is_current} {fully_booked}content{/fully_booked} {is_past}終了{/is_past} </a> </h1> <div class="event-meta-box"> <dl> <dt>日時</dt> <dd>#_{Y年n月j日(D)}#@_{-n月j日(D)} #_EVENTTIMES</dd> </dl> <dl> <dd>場所 : #_LOCATIONLINK</dd> </dl> <dl> <dt>料金 : {is_free}無料{/is_free}{not_free}#_EVENTPRICERANGEALL{/not_free}</dt> <dd> <div class="event-btn"> <a href="#_EVENTURL">詳しく見る</a> </div> </dd> </dl> </div> <div class="box_ribbon"></div></div>
cssはこちら
.box{ margin: 0px 0px 3px 17px; width:90%; min-height: 100px; float:left; padding: 3%; position:relative; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3)); border-top: 1px solid white; border-right: 1px solid #ccc; -webkit-border-bottom-right-radius: 60px 60px; -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); } .box:before{ content:''; width: 25px; height: 20px; background: white; position: absolute; bottom:0; right:0; background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff)); -webkit-border-bottom-right-radius: 30px; border-bottom-right-radius: 30px; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); } .box:after{ content: ''; z-index: -1; width: 100px; height: 100px; position:absolute; bottom:0; right:0; background: rgba(0, 0, 0, 0.2); display: inline-block; -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); } .box_ribbon{ position:absolute; top:-25px; left: 35%; width: 130px; height: 40px; background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); z-index:1000; } .event-thumb img{ width:258px; max-height: 150px; overflow: hidden; text-align: center; float:left; }
cssを変更する事でお好きなデザインに出来ますね💛
通常の固定ページや投稿に上記のテンプレートを使わずに表示したい場合は
[events_list]ここにHTMLを書く[/events_list]
で、書くことが出来ます。
はじめまして、
Events Managerの使い方を調べていたのでとても参考になりました。ありがとうございます。
1つ質問があるのですが、CSSはどこに記述すればよいのでしょうか?
ご返信が遅くなり申し訳ありません!!
まさか、メッセージが来るとは思っていなくて。。。
cssは任意のファイルを作って記述すれば良いと思います。
私は、テンプレートのcssに記述しています。
参考になれば良いのですが。。。
不明な点等があれば、hana@hanawebnet.comに直接ご連絡頂ければ回答が早いです!
遅くなってごめんなさい。