ナビゲーションバーの色について

ナビゲーションバーの色について

- 山本 太一 の投稿
返信数: 10

moodle のナビゲーションバー（サイトタイトルやチャットアイコンが表示されている部分）の色を、好きな色に変えたいのですが、どのようにすればよいでしょうか。

よろしくお願いします。

【利用しているサーバ・moodle】

  • Ubuntu 18.04
  • Moodle 3.10.8+ (Build: 20220107)
  • テーマ：Boost・Boost Campus（どちらでも利用できるようにしたいです）


評点平均: -
山本 太一 への返信

Re: ナビゲーションバーの色について

- Mitsuhiro Yoshida の投稿
画像 Developers 画像 Particularly helpful Moodlers 画像 Translators

以下の設定で変更できると思います。

  1. Moodleにサイト管理者としてログインする。
  2. 「サイト管理 > アピアランス > テーマ > Boost」に移動する。
  3. 「Boost」セクションの「高度な設定」をクリックする。
  4. 「生SCSS theme_boost | scss」テキストエリアにナビゲーションバー背景色を変えるためのSCSSを記述する。※1
  5. 「変更を保存する」をクリックする。
  6. 「サイト管理 > 開発 > テーマ > キャッシュを削除する」に移動する。
  7. 「すべてのキャッシュを削除する」をクリックする。
※1 ナビゲーションバー背景色を変えるためのSCSS
.bg-white {
       background-color: orange !important;
}

参考資料:
[Moodle in English: Re: Change top navigation bar color in Moodle 3.8.1+]
https://moodle.org/mod/forum/discuss.php?d=397601#p1603730


評点平均: -
Mitsuhiro Yoshida への返信

Re: ナビゲーションバーの色について

- 山本 太一 の投稿
返信ありがとうございます。

教えていただいた通りにしたら、無事ナビゲーションバーの背景色を変更することができました。

背景色を変えたことにより、サイトタイトル等が黒字のため、少し見にくくなってしまいました。
そこで、ナビゲーションバーの文字色も変更したいのですが、どのように記述すればよいでしょうか。

よろしくお願いします。
評点平均: -
山本 太一 への返信

Re: ナビゲーションバーの色について

- Mitsuhiro Yoshida の投稿
画像 Developers 画像 Particularly helpful Moodlers 画像 Translators

以下の設定で変更できると思います。

  1. Moodleにサイト管理者としてログインする。
  2. 「サイト管理 > アピアランス > テーマ > Boost」に移動する。
  3. 「Boost」セクションの「高度な設定」をクリックする。
  4. 「生SCSS theme_boost | scss」テキストエリアにナビゲーションバーの文字色および背景色を変えるためのSCSSを記述する。※1
  5. 「変更を保存する」をクリックする。
  6. 「サイト管理 > 開発 > テーマ > キャッシュを削除する」に移動する。
  7. 「すべてのキャッシュを削除する」をクリックする。
※1 ナビゲーションバーの文字色および背景色を変えるためのSCSS例
.bg-white {
       background-color: black !important;
}
.site-name {
       color: red !important;
}
.dropdown-toggle {
       color: white !important;
}
評点平均: -
Mitsuhiro Yoshida への返信

Re: ナビゲーションバーの色について

- 山本 太一 の投稿
返信ありがとうございます。

背景色・文字色共に変更することができました。

ありがとうございました。
評点平均: -
山本 太一 への返信

Re: ナビゲーションバーの色について

- 山本 太一 の投稿
文字色を変更したら、フロントページの設定アイコン（添付ファイルの赤部分）も白になってしまい、見えなくなってしまいました。（添付ファイルでは、文字色を黒にしているため、表示されています。）

文字色のみを白にして、設定アイコンは黒のままにしたいのですが、どう記述すればよいでしょうか。
また、チャットアイコンや通知アイコンも白色にしたいのですが、どう記述すればよいでしょうか。

よろしくお願いします。
添付 attachment.png
評点平均: -
山本 太一 への返信

Re: ナビゲーションバーの色について

- 山本 太一 の投稿
度々すいません。

活動リソース等を選択する画面で、背景色が変わってしまっていたのですが、この部分は白いままにしたいのですが、可能でしょうか。
（添付画像の青い部分です。）

よろしくお願いします。

添付 attachment2.png
評点平均: -
山本 太一 への返信

Re: ナビゲーションバーの色について

- Mitsuhiro Yoshida の投稿
画像 Developers 画像 Particularly helpful Moodlers 画像 Translators

以下の設定でご希望の設定に近いものになるかと思います。

  1. Moodleにサイト管理者としてログインする。
  2. 「サイト管理 > アピアランス > テーマ > Boost」に移動する。
  3. 「Boost」セクションの「高度な設定」をクリックする。
  4. 「生SCSS theme_boost | scss」テキストエリアにナビゲーションバーの文字色および背景色を変えるためのSCSSを記述する。※1
  5. 「変更を保存する」をクリックする。
  6. 「サイト管理 > 開発 > テーマ > キャッシュを削除する」に移動する。
  7. 「すべてのキャッシュを削除する」をクリックする。
※1 ナビゲーションバーの文字色および背景色を変えるためのSCSS例
.navbar-light {
       background-color: #5DA8E9 !important;
}
.site-name {
    color: white !important;
}
.usertext {
    color: white !important;
}
.nav-link {
    color: white !important;
}
[role=tab] {
         color: #0f6cbf !important;
}

評点平均: -
Mitsuhiro Yoshida への返信

Re: ナビゲーションバーの色について

- 山本 太一 の投稿
返信ありがとうございます。

度々すいません。
左上の三本線の色は黒のままで、チャット・通知アイコンは白色にしたいのですが、可能でしょうか。

.nav-link {
    color: white !important:

の部分で色を変更したところ、両方が同じ色になってしまいました。
（white にした場合、三本線とチャット・通知アイコン共に白色、黒色の場合も同様）

可能でしたら、記述方法を教えていただきたいです。

よろしくお願いします。



                                    

                
                
                
                                        
                
                
                                            

                                                    
評点平均: - 

                                                    
                                            

                
                                        
                                

                            

                        

                    

                
        

                

                    

                        
                
                        

                            

                                        

                                                
                                        

                                

                                        山本 太一 への返信
                                        
Re: ナビゲーションバーの色について

                                        

                                             - Mitsuhiro Yoshida の投稿
                        

                                

                
                                        

                                                        画像 Developers
                                                        画像 Particularly helpful Moodlers
                                                        画像 Translators
                                        

                            

                
                            

                
                                

                                    

                                        
以下の設定で「左上の三本線の色は黒のまま」にできると思います。


    

  1. Moodleにサイト管理者としてログインする。
    2. 

  2. 「サイト管理 > アピアランス > テーマ > Boost」に移動する。
    3. 

  3. 「Boost」セクションの「高度な設定」をクリックする。
    4. 

  4. 「生SCSS theme_boost | scss」テキストエリアにナビゲーションバーの文字色および背景色を変えるためのSCSSを記述する。※1
    5. 

  5. 「変更を保存する」をクリックする。
    6. 

  6. 「サイト管理 > 開発 > テーマ > キャッシュを削除する」に移動する。
    7. 

  7. 「すべてのキャッシュを削除する」をクリックする。
    8. 



※1 ナビゲーションバーの文字色および背景色を変えるためのSCSS例
.navbar-light {
     background-color: #5DA8E9 !important;
}
.nav-link {
     color: white !important;
}
.mr-1 {
     color: #0f6cbf !important;
}
.usertext.mr-1 {
     color: white !important;
}
.site-name.d-none.d-md-inline {
     color: white !important;
}
[role=tab] {
     color: #0f6cbf !important;
}


本件はこの投稿で終了させて頂きます。


以下のオンラインドキュメントを参考にMoodleテーマの色変更等に関しまして、ご自分でご研究頂ければと思います。


[ CSS Coding Style - MoodleDocs ]
 https://docs.moodle.org/dev/CSS_Coding_Style

                                    

                
                
                                                

                                                    添付 moodle CSS Coding.png
                                                

                
                                        
                
                
                                            

                                                    
評点平均: - 

                                                    
                                            

                
                                        
                                

                            

                        

                    

                
        

                

                    

                        
                
                        

                            

                                        

                                                
                                        

                                

                                        Mitsuhiro Yoshida への返信
                                        
Re: ナビゲーションバーの色について

                                        

                                             - 山本 太一 の投稿
                        

                                

                
                                        

                                        

                            

                
                            

                
                                

                                    

                                        
返信ありがとうございます。


無事意図していたとおりにできました。


ありがとうございました。

                                    

                
                
                
                                        
                
                
                                            

                                                    
評点平均: -