*

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

公開日: : 最終更新日:2015/03/11 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の最強無料セット BizVektorテーマでWelcartを搭載してみる2

前回で色合いは一応統一できた。しかしよく見ると左右が揃っていない。 そこでCSSを修正。下記のファ

記事を読む

すごく面白くて、とってもくだらないのに効果のある広告が話題

「いまだにこれを越える折り込みチラシを見たことがない」とTwitterで話題になっている広告がありま

記事を読む

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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど

録音ミニスタジオ完成の図と12色のリモコンLED電球

構想10年・制作3日の自宅音声収録スタジオの完成です。 ご覧の通

録音(撮影)ミニスタジオの制作DIY

そんな訳で吸音スポンジを壁に取り付けてみた続きです。 調子に乗っ

YAMAHA MG10UXミキサー到着

2018年 物置(事務所or作業場or遊び部屋)の一角を音声収録&撮影

そしてzbrush coreをインストールしてみる話

Blenderに挫折してから一気に3Dにのめり込んでいます。 ま

録音環境を改善する!吸音パネルをDIYとか

久々に更新! すっかり更新グセが抜けてしまい、イマイチやる気が出

→もっと見る




  •  

PAGE TOP ↑