search
LoginSignup
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Ransack sort_link 色の変更の仕方!

Ransack sort_linkでclassを指定することでcssを使って、色を変更する方法

ransackでのソート実装は下記URLを参考にしました
Rubyon Rails で検索機能を作ろう(ransack)

変更前の状態

スクリーンショット 2020-12-14 8.34.07.png

変更後の状態

スクリーンショット 2020-12-14 8.34.18.png

上記画像での、リツイート数ソート部分
デフォルトの青色を黒色に変更する!

index.html.erb

<%= sort_link(@q, :tweet_created_at, "投稿日時" ,{ default_order: :desc }, { class: "Editlink" }) %>

application.scss

// リンク色消す
.Editlink {
  text-decoration: none;
  color: #272343;
  &:link {
    text-decoration: none;
    color: #272343;
  }

  &:visited {
    text-decoration: none;
    color: #272343;
  }

  &:hover {
    text-decoration: none;
    color: #272343;
  }

  &:active {
    text-decoration: none;
    color: #272343;
  }

}

<%= sort_link(@q, 並べるカラム名, "リンクに表示する文字" ,{ 並べ方指定}, { Htmlのオプション }) %>
この書き方のhtmlオプション部分にて、classやidを指定すれば、cssを使って好きなようにsort_linkをカスタマイズできる!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0
Help us understand the problem. What are the problem?