*

WordPressの最強無料セット BizVektorテーマでWelcartを搭載してみる

公開日: : 最終更新日:2013/06/19 WordPress ,

かなり高機能でレスポンシブな無料のWordpressテーマ「BizVektor」。こいつに無料なのに高性能なWelcartショッピングプラグインをインストールしてゴニョゴニョしてみた。

まずはカゴのページのデザイン修正。黄色がベースになっているのはアレなので。

201302071744208b4

修正するファイルはここに説明されている。
http://www.welcart.com/community/archives/233

利用中のテーマのstyle.css と同じ場所にusces_cart.css のファイル名で設置することで上書きされるようなので、この方法が今後も考えるとベスト。

該当部分のソースを確認。

<div class=”usccart_navi”>
<ol class=”ucart”>
<li class=”ucart usccart usccart_cart”>カートの中</li>
<li class=”ucart usccustomer”>お客様情報</li>
<li class=”ucart uscdelivery”>発送・支払方法</li>
<li class=”ucart uscconfirm”>内容確認</li>
</ol>
</div>

一応「usces_cart.css」内の状況も確認してみる。526行目あたりから

div.usccart_navi ol.ucart {
 list-style-image: none;
 list-style-type: none;
 display: block;
 height: 31px;
 width: 100%;
以下省略

参考にするため、このままコピーしてテーマファイルの中に置くファイルに貼り付ける。
themes/biz-vektor/usces_cart.css

実際には子テーマを作ってこちらにおくのが普通かな?
themes/child/usces_cart.css

上の画像を見るとわかるが、リストマーカー(番号)が表示されている。「カートの中 2」とかいう部分。これはcssファイルの div.usccart_navi li.ucart に display: block; を指定すれば消える。また、黄色いグラデーションは画像なので、background-image: none; を指定して該当部分をクリアしないと消えてくれない。

div.usccart_navi li.usccart_customer {
	background-color: #243B79;
	background-image: none;
}

只今、カートに商品はございません。の部分は

#inside-cart .no_cart {
	text-align: center;
	width: auto;
	margin-top: 30px;
	font-size: 1.2em;
	font-weight: bold;
	color: #243B79;
	margin-bottom: 40px;
}

こんな感じで指定した。#inside-cart が無いと聞かないので、やはり元ファイルを確認して持ってきて修正って流れが良いでしょう。#inside-cart 入れなくて反映しなくて泣いたし。

ボタン上の横棒は

#inside-cart .send {
	text-align: center;
	width: auto;
	margin-top: 15px;
	padding-top: 15px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ccc;
}

20130207203247e9d

少しは統一された感じになってきました。

日本のビジネス向けWordPressテーマ「BizVektor」
http://bizvektor.com/

無料なのに高機能 Welcart
http://www.welcart.com/


Sponsored Link


 
 

関連記事

WordPress用プラグインで使う宿泊予約用カレンダーをPHPで書くぜ

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作るシリーズで使う、空き部

記事を読む

WordPressのオリジナルプラグインにショートコード機能を持たせる

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る連載で、ショートコード

記事を読む

ワードプレス用宿泊予約プラグイン開発「空室カレンダー表示」

前回ネットで検索して見つけた calendar($year = "", $month = "") 関

記事を読む

ワードプレス用宿泊予約プラグイン開発「空室情報読み込み」

前回までに作ったカレンダーに空室状況を表示させます。最初に表示欄を作って確認してからデータベースの読

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(11)空室管理画面 B

空室管理画面の2回目。今回は空室状況の入力欄と月が変わった時の処理を加えてみます。今回は一覧表示なの

記事を読む

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

簡単にSONYカメラとURSA mini 4.6Kの色を合わせる LUTS

少し色々試してみて、とっても気に入ったので改めてご紹介してみます。

MOZA AirCrossのPIDを調整してみる美少女

最初に MOZA AirCrossをPCに繋いで調整する手順を簡単に紹

JJC 液晶シェード(液晶フード) SONY α6000 α6300 α6500 用を試す!

おじさんが液晶フードを試してみたけど...というお話をしまーす!

MOZA AirCross 3軸手持ちジンバルを買ってみた【動画編】

Amazon様で「4,990円OFFのクーポンが適用されています」とい

無料の動画素材サイトをメモ

自分用の動画素材サイトをメモ。 ライセンス等は当然ですが自己責任。良

→もっと見る




  •  

PAGE TOP ↑