悪魔は優しい

なんでもやるし、なんにもできないIT屋メモ。

mastodonカスタマイズ

calendar

reload

白くしたくて白くした

https://draft.goat.me/6a3esTnU
のコピペ+改造で白くしてみた。
cssを作成後、

/home/mastodon/live/app/javascript/styles

以下にファイルを置き、

/home/mastodon/live/app/javascript/styles/application.scss

にそのファイルを追加。

RAILS_ENV=production bundle exec rails assets:precompile

でプリコンパイルして、

systemctl restart mastodon*

で再起動。無事白くなった。

React.jsのコメントアウト

mastodonのjsファイルをコメントアウトするのに苦労した。
React.jsというものが使われていてコメント文は {/* */}
で囲んでコメントアウトする。

React.js

React.jsとは、Facebookがオープンソースで提供しているUIの構成部品を作るためのライブラリ。html5が必須です。

JSX

React.jsでは、JSXというタグ技術(Facebookが開発している)を使います。これはプリコンパイルが必要です。そして、JSXのコメントアウトの形式が、{/* */}なので、mastodonもそうなるということです。

/home/mastodon/live/app/javascript/styles/mastodon
のforms.scssでcheckboxのcolorによりユーザ設定のカラー変更が可能。
けど、
app/javascript/styles/mastodon/variables.scss
のprimary-text-colorを変更するのが正しい気がする。

タイトル変更

例えば、
/home/mastodon/live/app/views/about/show.html.haml

- content_for :page_title do
= site_hostname

のsite_hostnameを任意の文字列に変更すると、タイトルが変更される。

メタタグ変更


- content_for :header_tags do
%meta{:name => "description", :content => "ここに文字列"}
%meta{:name => "keywords", :content => "ここにキーワード"}

とする。

@ユーザ名画面

@ユーザ名画面の上部に黒いところが残るのは、
/home/mastodon/live/app/javascript/styles/mastodon/landing_strip.scss


.landing-strip {
background: 色
}

を修正すれば変わる。

下部の「リモートフォロー」と書いてあるところは、「カード」と呼ぶらしい。
ここは、accounts.scssの

.card {
background-color: red;
}

で変更する。

また、

&::after {
background: rgba(darken($ui-base-color, 8%), 0.5);
}

も効いているので注意。

右側のプロフィール部分の背景は、

.card__bio {
background: rgba(darken($ui-base-color, 8%), 0.8);
}

が効いている。

/aboutの背景は、下部が
basics.scssの
&.about-body {
background: darken($ui-base-color, 8%);
}
上部は、
.header-wrapper {
background: $ui-base-color;
background: linear-gradient(150deg, lighten($ui-base-color, 8%), $ui-base-color);

が効いているけど、それだけではない。
判明仕切れなかった。

「ログイン」等のボタンの色は、$primary-text-colorの設定。
または、forms.scssの button, .button, .block-buttonの項目。

トゥート画面の写真選択ボタンの背景色は、custom.scssの
.compose-form__buttonsの変更による。

$ui-base-colorでトップ画面を薄くすると絵文字パレットの文字などが薄くなる問題。
$ui-text-colorをvaluables.scssで定義し、emoji_picker.scssのemoji-martのcolorを$ui-text-colorにした。

aboutページのH1の下のキャプションのような小さな文字が薄いので、
about.scssの
h1
->small
のcolorで調整した。

コメント欄のプルダウン内のラベルが薄くて見えなくなったので、
components.scssの
.privacy-dropdown__option__content
を$ui-text-colorに。


$classic-secondary-color
->

テキストエリアの文字が薄くてしょうがないので、
components.scssの
.spoiler-input__input{
color:
}
を変更した。

テーマカラーの変更はここが参考
https://qiita.com/tumujin/items/c0c9d39f05af4f52bfc7

Mastodonのカスタム方法


参考

config/locales
から表示ワードを変更

app/javascript/images
画像を変更
から

参考予定
http://www.dzeta.jp/~junjis/code_reading/index.php?Mastodon%E3%82%92%E8%AA%AD%E3%82%80%2F%E7%94%BB%E9%9D%A2%E6%8F%8F%E7%94%BB%E3%81%AE%E6%B5%81%E3%82%8C
http://www.dzeta.jp/~junjis/code_reading/index.php?Mastodon%E3%82%92%E8%AA%AD%E3%82%80%2F%E7%94%BB%E9%9D%A2%E6%8F%8F%E7%94%BB%E3%81%AE%E6%B5%81%E3%82%8C

この記事をシェアする

コメント

コメントはありません。

down コメントを残す