Forum
J! JAPAN TOP
ようこそ, ゲスト
ユーザ名: パスワード: 自動ログイン

トピック: .lessについて

.lessについて 1 年 3 ヶ月 ago #5033

  • hitoridake
  • hitoridake さんのアバター
  • Offline
  • Senior Boarder
  • 投稿数: 48
  • カルマ: 0
何度も質問を投稿してしまって申し訳ありません。

できる限り自力で、と努力して入るのですが

今回、初めて

.lessという存在をしり戸惑っております。

Joomla Joomla! 3.4.8を使用しています。日本語化もしております。

テンプレートにはJOOMLARTのpurity_IIIというものを使用しております。

purity_IIIを使用するにあたってT3 Frameworkもインストールしております。

また

モジュールでroksprocketというものを使用しております。


こちらのぺーじですが

test.shaberizon.jp/index.php/ja/

検索モジュールと多言語モジュールを

head-seach

というポジションに置いております。

すると

検索モジュールの下に多言語モジュールが来てしまいます。

この現象はpurity_IIIの公式でも確認されているようです。

www.joomlart.com/documentation/purity-ii...module-configuration

そして

.lessについても、調べてみました。「コンパイル」という作業が必要なんですよね?

なので

公式で書かれている

templates/purity_iii/less/style.less

のファイルを

「エクステンション」>「テンプレート」>「テンプレート」>「Purity_IIIの詳細とファイル」とクリックし

templates/purity_iii/less/style.less

を探し

この.lessファイルの一番下に

公式にあるように

// language switcher module
//
.mod-languages {
position: absolute;
left: -100px;
top: 20px;
// more style comes here
}

を追加し

保存し

「LESSをコンパイル」ボタンを押しましたが

何も変化有りませんでした。

-100を-200に変えたり

20を100や-100に変えたり

色々チャレンジしましたがダメでした。

この

.lessというファイルは、どのように扱えば良いのでしょうか?

最終的には

公式のドキュメントにあるように

検索アイコンの左側に多言語モジュールを配置したのですが

アドバイスをいただけると助かります

よろしくお願いいたします
最終編集: 1 年 3 ヶ月 ago : hitoridake.
ゲストの書き込みは許可されていません。

.lessについて 1 年 3 ヶ月 ago #5034

  • siraisi
  • siraisi さんのアバター
  • Offline
  • Platinum Boarder
  • 投稿数: 452
  • 感謝を受け取りました 43
  • カルマ: 32
1.モジュールポジションの確認。position(languageswitcherload)は設定されてるようです。
/templates/purity_iii/templateDetails.xml
<positions>
<position>languageswitcherload</position>
<position>head-search</position>


2.モジュールポジション(languageswitcherload)の配置
templates/purity_iii/tpls/blocks/header.php

<?php if ($this->countModules('head-search')) : ?>
<!-- HEAD SEARCH -->
<div class="head-search<?php $this->_c('head-search')?>">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
<!-- //HEAD SEARCH -->
<?php endif ?>

</div>
<!-- //NAVBAR HEADER -->

↓↓

<?php if ($this->countModules('head-search')) : ?>
<!-- HEAD SEARCH -->
<div class="head-search<?php $this->_c('head-search')?>">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
<!-- //HEAD SEARCH -->
<?php endif ?>

<?php if ($this->countModules('languageswitcherload')) : ?>
<!-- //languageswitcherload -->
<div class="languageswitcherload<?php $this->_c('languageswitcherload')?>">
<jdoc:include type="modules" name="<?php $this->_p('languageswitcherload') ?>" style="raw" />
</div>
<!-- //languageswitcherload -->
<?php endif ?>

</div>
<!-- //NAVBAR HEADER -->

3.モジュール: 言語スイッチャーで、表示位置を(languageswitcherload)に設定する

4.CSSの設定
templates/purity_iii/css/template.css

2631行目付近

@media screen and (min-width: 991px) {
.head-search,
.navbar-toggle + .head-search {
right: 80px;  ←適当に変更する
top: 0;
max-width: none;
}

下記を適当な所に追加する。top right など適当に変更する。
.languageswitcherload {
height: 55px;
position: absolute;
top: 30px;
right: 0px;
margin: 0;
}

templateのアップデート時に、ファイルを上書きされますので注意が必要です。

.lessについては、ボチボチと調べていただければと思います。

追記 スマートフォンでは メニューモジュールと重なってしまいました。もう少し編集が必要ですね。
mail: このメールアドレスはスパムボットから保護されています。閲覧するにはJavaScriptを有効にする必要があります。
最終編集: 1 年 3 ヶ月 ago : siraisi.
ゲストの書き込みは許可されていません。
次のユーザが感謝しました: hitoridake

.lessについて 1 年 3 ヶ月 ago #5035

  • hitoridake
  • hitoridake さんのアバター
  • Offline
  • Senior Boarder
  • 投稿数: 48
  • カルマ: 0
Platinum Boarder さま

アドバイスありがとうございます。

なぜだかGoogle Chromeでこのサイトを見ることができず
しばらくの間
返信をいただいたことに気づいていませんでした。
お返事が遅れてしまい、申し訳ありません。

.lessですが
コンパイルボタンがテンプレートの設定の中にもあり
それを押すことで解決をしました。
しかし
結果
Platinum Boarder様と同じように
スマートフォンでは メニューモジュールと重なってしまいました(笑)
たぶん
どの方法でも、そうなってしまうような気がしました。
なので
off-canvasというポジションに表示させることにしました。

せっかくのアドバイスをいただいたのに
活かすことができず
申し訳ございませんでした。

しかし
Platinum Boarder さまからアドバイスをいただいたことで
新しいポジションの作り方、勉強になりました。
今後に活かしていきたいと思います

ありがとうございました
ゲストの書き込みは許可されていません。