Stuccoでv9.1.1にした時FontAwesome5の一部のアイコンが・・・

画像添付できなかったので、追伸です。

@Jun1chi 取り急ぎ、FontAwesome の部分を先に書きます。

FontAwesome 4 から 5 にアップデートしたことによって、表示が異なったり、表示ができなくなってます。

数ヶ月前に大岩さんのインタビュー動画を撮りました。
以下の 4:03 より FontAwesome 対応をされた話をされています。

こちらを参考に2行の書き換えをお願いできますか?

css,less,scssおよび phpの格納フォルダが異なります。
これは、影響しないのでしょうか?

影響します。

フォルダの位置が変わるのは、メジャーバージョンアップはよくあることで、
今回の Concrete CMS V9 アップデートでも起こりました。
影響があるので、修正を加えないといけないです。

Stucco の V9 対応はもろもろのこともあってちょっと停滞中ですが、いずれかは対応する予定です。

katz515 さん

お世話様です。 Youtubeの案内ありがとうございます。

確認させてください。


   FontAwesomeの対応分は、(動画:4:03 ~)
    ["FontAwesome" ➡ "**Font Awesome 5 Free**" & **font-weight: 400;** で編集を済ませています。」
    と**既に報告した通り**です。


**p.s.**

   2箇所(**2行**)の**置き換えが必要**とのことですが、

まず、1つめ

    動画1:59~2:33の間の
    イメージスライダの画像呼び出しTAGの置換えが必要との事ですが、
    画像にある.phpファイルのFile名を教えて戴けますか?
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    $tag - Core::make('html/img', array($f, false)) -> getTag();
    $tag - Core::make('html/img', ['f' => $f]) -> getTag();
    でも、これは、**イメージスライダの画像そのものは表示されている**ので、
    **問題はないかと?**
  =========== (.phpファイルを確認してみますので、**File名を教えて**戴けますか?)
  あとは、FontAwe some 5 の件なので。

 続いて2つめ
  ページリストブロック(動画 2:53 ~ 2:60
  これは、**正に同じ問題**で、ページリストブロック内の**サムネイル画像が表示されない**件)

  これの、.phpファイルの**FIle名を教えて戴けますか?**
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  $img - Core::make('html/image' , array($thumbnail)) ;
  $img - Core::make('html/image' , ['f' => $thumbnail]) ;

  ここは、アレイの書き方の修正が必要ですね。
    
3つめ(動画 3:14~3:31 )
 ogタグについては、よく聞き取れず、意味が理解できないのですが、
 **どこの修正が必要**でしょうか?
    ~~~~~~~~~~~~~~~

お世話様です。

上記2点については、
“Core::make('html/im” 文字列Grepでconcrete配下8階層下まで Scanして対象の.phpファイル名を特定できたかと思います。

ただ、添付Core__make.jpgにある
黄色マーカーの
view.php
hero_slider.php が文字列(ストリング)から判断すると、対象だと思いますが、

薄い黄色マーカーの*stucco*_thumbnail_grid 分の view.php も対象でしょうか??

また、3点目の箇所は未だわかりませんので、
こちらの方も教えて戴ければ幸いです。

途中経過報告

結果的に、\stucco_thumbnail_grid 分の view.php も対策して
ページリストブロック内のサムネイル画像が表示される様になりました。

逆に、updates\concrete-cms-9.1.1\concrete\themes\atomik\は、
テーマatomikを使用していないので不要だと思います。
(いずれにしてもバックアップを取っているので、いつでも戻せます)

また、
まだ、"Font Awesome 5"部分は、一部のアイコンが表示されないので、
戴いたアドバイスを踏まえ、(Stucco以外の
"Font Awesome 5 Free"
"Font Awesome 5 Brands" 部分に対応漏れがないか確認していきたいと思います。

p.s.
依然として、**3点目の箇所は未だわかりません


**

こんにちは、
"Font Awesome 5 Free” と "Font Awesome 5 Brands” を全て見直し、
font-weight: 400; または、 font-weight: 900; を確認した、ハズなんですが、

依然、一部のアイコンフォントが表示されません。
何が、原因なんでしょうね????

・・・もしかして、php ? :arrow_right: 確認してみます。!

elementalは使っていないので、関連はないとは思いながら、
font-family: “Font Awesome 5 Free”;
font-weight: 700;
content: “\f064”;
の様になっているところが多数あり、念のため、 **font-weight: 700;**をfont-weight: 900; や400に変更して試したものの変わらず。

記憶では、FreeとBrandsで使用できるのは、font-weight: 900; または、400のハズ!!!。

p.s.
念のため、elementalを使用されている人たちの為**?**に、記述されている
lessとPathを記載しておきます。

header.less [font-weight: 700;] updates\concrete-cms-9.1.1\concrete\themes\elemental\css\build

image-slider.less [font-weight: 700;] updates\concrete-cms-9.1.1\concrete\themes\elemental\css\build\blocks

navigation.less [font-weight: 700; ] updates\concrete-cms-9.1.1\concrete\themes\elemental\css\build\mobile

page-list-template-thumbnail-grid.less [font-weight: 700;] updates\concrete-cms-9.1.1\concrete\themes\elemental\css\build\blocks

2022/09/16

v9.1.1Stuccoが使えた :arrow_right: v9.1.2にバージョンアップ OK
skin(Akane,Sumizone,Hisui,Ruri,Tomekon)の変更もでき、背景色の変更もできた。Ruri(Modified)

v9への残る課題は2つ(今のところ)
・依然、FontAwesome5のアイコン文字が表示されない部分があるのは変わらず(一体何なんだろう。? もっと・・・根本的な事???)
・予約フォームで、レイアウト崩れ(選択プルダウンの時分欄)。これはcssが当たっていないだけの様だけど、css名がわからない
(添付:画像)

新たに、“Font Awesome 5 Free” 対応漏れが見つかり、対応したが、依然未解決。
原因は、"Font と 'Font で、Grepして調査していたが、

まさかの落とし穴・・・・素の FontAwesome があった。("で括るのでも、'で括るのでもなく)
(本体でも、“FontAwesome”'FontAwesome’


があったのを見つけていたのが)
この辺は、コーディング基準で本体も含め統一してもらいたいところ。

v9(v9.1.2)でも
Stuccoテーマが働き、全体のスタイルや色合い(スキン)があたっていますが、

依然として、"Font Awesome 5 Free"の一部アイコンが表示されないままです。
(画像スライダー、パンくずリスト、ページリスト、トピックリストなど)

以下のフォルダにある
.lessファイルは(font-family: “Font Awesome 5 Free”; と font-weight: 400; に編集済み)で、
"Font Awesome 5 Free"対策済と認識していますが、

これらの.lessファイルが.cssファイルに変換されていないこと
(または、読み込まれていないこと)がアイコンが表示されない原因だと思っています。
/application/themes/stucco/css/main.less
/application/themes/stucco/css/build/breadcrumb.less
/application/themes/stucco/css/build/common.less
/application/themes/stucco/css/build/pagination.less
/application/themes/stucco/css/build/blocks/express_entry_detail.less
/application/themes/stucco/css/build/blocks/express_entry_list.less
/application/themes/stucco/css/build/blocks/faq.less
/application/themes/stucco/css/build/blocks/image-slider.less
/application/themes/stucco/css/build/blocks/next-previous.less
/application/themes/stucco/css/build/blocks/page-list.less
/application/themes/stucco/css/build/blocks/topic-list.less
/application/themes/stucco/css/build/mobile/navigation.less

これら12個を処理しているであろう.phpあるいは.jsがどれなのか?

Theme.phpやmode-less.jsなどを見ては見ましたが、
どう繋がるか・どの様に関連しているのかか見当がつきません

この辺りのヒントを戴けませんか?

stuccoのFontAwesome5対応(上記).lessの読み込みと展開がどこでされているかは、分かりました。
( @ < > の文字は、それぞれ@<>に変更しています。(この投稿に表示させる為))

main.lessは、header_top.php
<?php echo $html->css($view->getStylesheet(‘main.less’))?>と定義(記述)されています。

そして、このmain.lessの中で、
@import “build/blocks/image-slider.less”;
@import “build/blocks/topic-list.less”;
@import “build/blocks/next-previous.less”;
などでインポートされ、main.lessに取り込まれmain.cssとして変換されている様に理解しました。

<?php echo $html->css($view->getStylesheet(‘main.less’))?>から、結果的に
<link href="/concrete/application/files/cache/css/stucco/main.css?ts=1664324816" rel=“stylesheet” type=“text/css” media="all">

と展開された形でLinkされています。(hrefの先頭の"/concreteは、Local(MAMP)環境のものです。)

この圧縮されたmain.css?ts=1664324816を確認すると、
添付画像の様に、イメージスライダや、トピックリストの"Font Awesome 5 Free"が有効になっているのが分かります。

しかし、実際のページではFont Awesome5のアイコン文字が表示されません

これは、一体どういう事でしょうか???

の課題2つの内の1つ Font Awesome 5アイコン表示については解決(後述)

残る課題は **予約フォームで、レイアウト崩れ(選択プルダウンの時分欄)。

これはcssが当たっていないだけの様だけど、css名がわからない**こと

-----------------------

Font Awesome 5アイコン表示については、共有したいのでお知らせします。

最大の問題だったのは、
content: "\f0c9"の様に、<i class=“fa-solid fa-bars”>と<i class=“fa-regular fa-bars”>の様に、
FreeでSolidとRegularの2つが用意されているのにかかわらず、
この場合、Solidに合わせ、font-weight: 900;にしなければならなかったこと(400では表示されない)
これが、アイコンの1部は表示されているのに部分的に表示されていなかったこと。

これについては、"\f0c9"の様に、
1つづつ検索して、最初に表れるものがSolidなのかRegularなのかで、
font-weight: 900;にするか、font-weight:400;にするか
(結果論で最初に表示された方を選択することで解決)


つづいて、blockquoteで使っている、
content: “\f10d”; とcontent: “\f10e”; については、
共にfont-weight: 900;でなければアイコンが表示されないことが判明。


最後に残ったのが、
image-slider.lessで使っている
content: “\f32a”;(右 >)とcontent: “\f32b”;(左 <)
これら2つについては、
先の検索ではヒットせず、代替文字を探すことになった。

\f32a :arrow_right: \f054 で<i class=“fa-solid fa-chevron-right”>
\f32b :arrow_right: \f053 で<i class=“fa-solid fa-chevron-left”>

ーーーーーーーーー

もう一つ
main.less と
image-slider.less の最後にある
.fa,.fas {
font-family: “Font Awesome 5 Free” ;
font-weight: 900; }

ここは、900でなければ、
「ようこそ」のアイコンclass="fa fa-users fa-fw"や、
カスタマイズした、
<i class=“fa fa-angle-double-down”>目次に進む
<i class=“c_lime fa fa-cog fa-spin fa-2x”>⚙スピン、
<i class=“fa fa-arrow-up”>Topに戻る、
<i class=“fa fa-angle-double-up”>目次に戻る などが、表示されない

以上の結果になりました。


残り課題のフォームのレイアウト崩れが解消したら
v9.1.2でStucco使用に問題がないことに
なると思っています。

Font Awesome 5化、 追伸

追加で、特色ブロックの直接編集についても
お知らせしておきます。


特色ブロック(<div class="stucco-card-feature-item">)は、
(/application/themes/sttucco/css/blocks/ffeature.less)で
.icon {
        margin: -27px auto 0;
        text-align: center;
    }
の為(アイコンをここで指定できない)、

表示できなくなったアイコンは、編集画面で直接選択するしかない
今回、Font Awesome 5 となったため、
編集時に、選択肢に必要となる為、以下をfeature.less最後尾に追加したが、

.fa,.fas {
    font-family: "Font Awesome 5 Free" ;
    font-weight: 900; } 
.fab {font-family: "Font Awesome 5 Brands" ;
        font-weight: 400;}  

上記を追加後に(キャッシュクリアも当然行い)
Youtubeアイコンを選択しても□文字化け状態だった。
\f431 <i class=“fab fa-youtube-square”> brands:font-weight:400

仕方なく、他の Font Awesome 5 アイコンを使用することとした。
(添付画像)

ここは、他に方法があるのだろうか?

訂正です。
main.less に以下を追加することで、
.fab {font-family: “Font Awesome 5 Brands” ;
font-weight: 400;}

ブランドアイコンも選択できる様になりました。

最初のタイトル( v8.5.9からv9.1.1にバージョンアップした場合、一部のFontAwesome5の一部のアイコンが表示されない)から

ずいぶんかけ離れてしまった。
FontAwesome5の一部のアイコン表示の問題ではなくなって来た。

予約フォームのレイアウト崩れは、
\application\themes\stucco\css\build\common.lessの修正で何とか収まった。


大まかな変更(修正)点は以下の様な内容です。
1 .ccm-input-dateと

input[type=“text”],
input[type=“email”],
input[type=“tel”],
input[type=“url”] {
の共通定義を分離して
.ccm-input-date を別にセレクタの内容を変えて再定義。

2 .ccm-input-time-wrapper,
.ccm-input-date-wrapper {
display: block;

とは別に、
3で .ccm-input-time-wrapper {
margin-left: 4px;
display: inline-flex;

を追加再定義など、

テーマからハズレて来ているので、完了したらBlogに経緯をアップしようと思います。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
しかし、今度は\common.lessの修正で(多分共通で使用しているクラスの影響で:)
ーーーーーー-------------------------------------------------------------------
3つ特色カードの重なり、などの不都合がでてきた。
:arrow_right:
:arrow_right: 画面を横方向に縮小した場合、カードが重なって表示されるは、
コンテナを3分割にして、
3っつのカードを設置しているもので、
v8時代から元々そうであったことで、v9の問題ではないことが判明。
(これは置いておくことにして)
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
もう一つの課題を発見したので、それの対処方法を模索中。

課題は、transition効果を保持できない事。

FontAwesomeアイコンのhoverもしくはfocus時の動作で、
各アイコンの直上に降りてきていた<div ~~ title=" ”)の
titleの吹き出し内表示が、アイコンの位置に関係なく左端に降りてきて、表示も直ぐに消えてしまうこと(本環境v8では表示保持)

「transitionは基本的にdisplayプロパティには効かない様な仕様、
この場合は、displayを使用するのではなく、opacityとvisibilityを併用することでtransitionを効かせることができる」との情報を見つけ実施してみたものの不発。

セレクタ記述もtransitionの親要素から、移動してみたもののこれも変わらず。

そして、実行するブラウザによっても表示が異なるなどの問題も
ベンダープレフィックスを付けても変わらず。

訂正、\application\files\cache フォルダの削除で、Firefoxの動作も他のブラウザと同じ動作になりました。
(ブラウザのスーパーリロード:Shift+F5だけでは変わらなかった)
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
v9対応Stucco改修はなかなか大変。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
===============================
このスレッドの
タイトルの変更が出来たので、替えました

マウスオーバーで出てくる。trasitionでフェードインがうまく行かないのは、
<div class=“ccm-block-feature-item-hover-wrapper” data-toggle=“tooltip” data-placement=“top” title=" ~~~で記載されている部分。

この内、 data-toggle=“tooltip” data-placement=“top” title=" は、Bootstrapの問題かな?

v8では、Bootstrap v3.3.5 だったのに対し、
v9では、Bootstrap v5になった関係かも、この辺りで、JavaScliptの変更が必要なのかも・・・

依然、模索中・・・・・・・・・・・・

\packages\theme_stucco\blocks\featureの配下
\feature\templates\stucco_card_description\view.php と
\feature\templates\stucco_hover_description\ 配下に
view.php
view.css
view.js

が、どうも関係しているぽい。

特に、stucco_hover_descriptionの方が、
先に上げた、 data-toggle=“tooltip” data-placement=“top” title=" のプロパティが含まれている・・・・・・・

stucco_card_descriptionの方は、特徴カードの為のものらしい、、、、

ただ、これらが、
\application\themes\stucco\配下に無い(v8時点でも)

これらが、どのように関係しているのか不明

あともう少し・もう一歩かも知れない!
Bootsttrap3からBootsttrap5になったための変更を行ったところ、で少し改善された。

FontAwesomeアイコンのホバーで、吹き出しが下りて来て、表示保持までできた。
でもまだ以下の問題が残る

・どの位置のアイコンのホバーでも、
吹き出しが下りて来るのは左側で途中まで
(Firefoxでは、一瞬アイコンの直上に表示されるが、固定は左側。chromeでは一瞬アイコンの直上に表示され消えた後は左側の表示も無い)
・・・ベンダープレフィックスは、まだ未確認

・吹き出しの背景が黒色、本来は群青の背景色

「bootstrap3とbootstrap5の違い」で検索し、以下を適用してみた結果であり、更に編集が必要な様です。

・bootstrap3では、
jquery-1.12.4.min.js(JQuery)、 bootstrap.min.css、 bootstrap-theme.min.css、 bootstrap.min.js
・bootstrap5では、
JQueryが不要になった。cssは bootstrap.min.cssのみ、ほかに bootstrap.bundle.min.js

そして、header_top.phpの編集
<link rel=“stylesheet” href="<?php echo $view->getThemePath()?>/css/bootstrap.min.css">

<script src="<?php echo $view->getThemePath()?>/js/bootstrap.bundle.min.js"></script>

<!–link rel=“stylesheet” href="<?php echo $view->getThemePath()?>/css/bootstrap-theme.min.css"–>
<!–link rel=“stylesheet” href="<?php echo $view->getThemePath()?>/css/bootstrap.css"–>

ただ、Stuccoでは、jquery-1.12.4.min.jsも bootstrap.min.jsも使われていなかったので、
他の.jsが使われている模様、この.jsを探し編集が必要なのかも知れない。

※bootstrap5のCDN取得先は以下
h ttps://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css
h ttps://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js

「経過」報告です。
未だ、フェードインがうまく行かない状況です。
動作状況(下記添付.gifアニメ)
fadein-1024-682-3.44M
お分り頂けますでしょうか?
下記画像の様に一瞬だけ正しい位置に吹き出しが現れ

その後すぐに、
下記画像の様に左端に吹き出しが固定表示(どのアイコンのhoverでも)

「試行経緯」
phpから生成されたソース.htmlから
bootstrap3で使用される「data-toggle」を発見
<div class=“ccm-block-feature-item-hover-wrapper” data-toggle=“tooltip” data-placement=“top” title="~~~

「data-toggle」でGrep検索をかけ、元々のソース.phpを探す。

結果、
\packages\theme_stucco\blocks\feature\templates\stucco_hover_description\の
view.phpであることを突き止める。

「data-toggle」は、Bootstrap3での仕様で、
bootstrap5では、[data-bs-toggle]に変更されたとのこと
故に、view.phpの「data-toggle」を[data-bs-toggle]に編集
合わせて[data-placement]を[data-bs-placement]に編集する。

さらに、view.phpでオーバーライドを掛ける必要がある為、
\application\blocks\配下に
featureフォルダ、featureフォルダ配下に、templatesフォルダ、templatesフォルダ配下に
さらにstucco_hover_descriptionフォルダとstucco_card_descriptionを作成し
(\application\blocks\feature\templates\stucco_hover_description\)

stucco_hover_descriptionフォルダ配下に、view.css、view.js、view.phpをCopyする。

「stucco_hover_descriptionフォルダ」は、(ホバー動作)用

同様に
\packages\theme_stucco\blocks\feature\templates\stucco_card_descriptionからview.phpを
\application\blocks\feature\templates\stucco_card_description にCopyする。

「stucco_card_description」は、(特徴カードブロック)用と判断

サイトを起動しview.phpから生成されたhtmlソースに
<div class=“ccm-block-feature-item-hover-wrapper” data-bs-toggle=“tooltip” data-bs-placement=“top” title="~~~が反映されていることを確認

header_top.phpをbootstrap5用に編集

bootstrap5用のbootstrap.css設置
<link rel=“stylesheet” href="<?php echo $view->getThemePath()?>/css/bootstrap.css">

以前のv3のbootstrap.css(Stuccoでカスタマイズ)をbootstrap_Stucco.cssにリネームして設置
<link rel=“stylesheet” href="<?php echo $view->getThemePath()?>/css/bootstrap_Stucco.css">

v5のpopper(hover等)がバンドルされたbootstrap.bundle.jsを設置
<script src="<?php echo $view->getThemePath()?>/js/bootstrap.bundle.js">

bootstrap.cssを編集(背景色、角丸、等)
bootstrap_Stucco.cssの編集(bootstrap.css定義で重複分を削除、他)

ここまでです。

あとは、どこを修正しなければならないのか・・・

1 Like

ありがとうございます。

メモ: Elemental でも FontAwesome のアップグレードがうまくいっていない

ちなみにですが、 Stucco は v9 未対応で、Font Awesome の対応もしないといけないです。

現在 GitHub のオープンソースとしてアップロードし、v9 の対応をすすめていこうと準備中です。

承知しています。
既にFontAwesome5対応を終了済Sep 25Sep 28Oct 2)です。
中には、”Font Awesome 5 Free”とBrandsを指定して、Font-widgetを"400”にしても"900"にしても表示されないアイコンがあったりして非常にやっかいです(スライダーブロックの<や>など)これらは、最終的にはコード(\fxxx)を変更しました。

(必要であれば対応が必要な個所のリストの提供も可能ですが、・・・・)

他にも、問い合わせフォームのプルダウン選択部分 Sep 16も対応が必要だったため、この部分も対応済です( Oct 5

あと少しbootstrap5への対応が必要な様(hoverでフェードインが所定の位置に吹き出しが下りてこない)で、
この部分の一部が未対応(変更が必要な個所を見つけきれていないため)の状況で、この件を、先の Nov 1スレッドでgifアニメでアップしています。

うーーーん・・・・
単に吹き出しを出すだけなら、
class="tooltip"とclass="description_top”を指定して
たとえば、
<p>補足説明1<span class=“tooltip”>baloon<span class=“description_top”>説明・・・・・1</span></span></p>
として、あとはCSSで.tooltipと.description_topの指定だけですむのだが、
そうすると吹き出しのフェードインが実現できない。
「フェードインは多分bootstrapで実現していると思われるが、その部分を見つけられずにいる」
(bootstrap.css)bootstrap.bundle.js(bootstrap_stucco.css)
Help