TwentyFifteenのサイドバーを右に移動する方法は？

16

子テーマとCSSのみを使用して、TwentyFifteenテーマのサイドバーを右に移動することは可能ですか、またはテーマ自体の変更が必要ですか？私が実行している主な問題は、「デフォルト」または「スクロール」シナリオのいずれかで右側にサイドバーを取得できることですが、両方ではありません（デフォルトではposition：relativeを使用し、ページが表示されるときに取得するものですロードされ、ページがスクロールされるとscrolledが設定され、サイドバーの位置が絶対に変更されます。

themes child-theme theme-twenty-fifteen

— アンテル
ソース

3

テーマを見てくださいrtl.css。それをします。

— FUXIA

十分ではありません。私は、RTLテスター、サイドバーにしようと遺骨左側にあります。関連するセクションをRTL.cssからコピー/貼り付けすると、サイドバーは実際に切り替わりましたが、スクロール中に再び壊れます。

— アンテル

6

私はから次を取っrtl.cssを介してそれらを適用する魔法のウィジェットの追加と!important英語のサイトにキーワード：

body:before {
    right: 0 !important;
    left: auto !important;
}
.sidebar {
    float: right !important;
    margin-right: auto !important;
    margin-left: -100% !important;
}
.site-content {
    float: right !important;
    margin-right: 29.4118% !important;
    margin-left: auto !important;
}
.site-footer {
    float: right !important;
    margin: 0 35.2941% 0 0 !important;
}

これは、下にスクロールしても機能するようです。

— fuxia
ソース

1

私には十分ではありません。私も追加する必要がありました：body {direction：rtl; } .sidebar、.site-content、.site-footer {方向：ltr; }

— アンテル

@Anteru SEネットワークがどのように機能するかを知っていると思います。追加情報を入手した場合は、編集を提出し、編集メッセージで理由を説明してください。ありがとう。

— カイザー

少なくともFirefoxでは十分ではありませんでした。下にスクロールすると、サイドバーがランダムに消えて再表示されました。RTL / LTRトリックはそれを解決するようです。ああ、記録のために：これを子テーマに入れるとき、!important必要ありません。

— アンテル

はい、テストすると同じ問題が発生します。

— ブラッドダルトン

@Anteru-ありがとう、追加のコードも助けてくれました！

— イゴールラズロ

4

以下のコードを子テーマに追加できます。

@media screen and (min-width: 59.6875em) {
    .site-content {
        float: left;
        margin-left: 0px;
        width: 70.5882%;
    }   
    .sidebar {
        float: right;
        right:0;
        margin-right: 0px;
        max-width: 413px;
        width: 29.4118%;
    }   
    body:before {
        right: 0;
        left:auto;
    }       
    .site-footer {
        margin: 0 0 0 6.1%;
    }
}

— アモルベア
ソース

1

私のテストに基づいて動作します。

— ブラッドダルトン

スクロールしてJavaScriptがサイドバーをスティッキーにするとすぐに、右に移動します。JavaScriptは一緒に右で「固定」に位置変化するせい：0ルールは、それが右側に付着させる（したがって、ウィンドウが十分に広い場合には、それを移動する。）

— Anteru

1

受け入れられたソリューションは、モバイルから使用するとテーマの応答性を損ないます。私は、toschoとAnteruによって受け入れられた解決策を@media screen元の25のテンプレートとしてラップする必要がありました。

@media screen and (min-width: 59.6875em) {
  body:before {
    right: 0 !important;
    left: auto !important;
  }

  .sidebar {
    float: right !important;
    margin-right: auto !important;
    margin-left: -100% !important;
  }
  .site-content {
    float: right !important;
    margin-right: 29.4118% !important;
    margin-left: auto !important;
  }
  .site-footer {
    float: right !important;
    margin: 0 35.2941% 0 0 !important;
  }

  body { direction: rtl; }
  .sidebar, .site-content, .site-footer { direction: ltr; }
}

— アウグスト
ソース

0

私は最近、15のテーマのヒントとコツから子のテーマを拡張しました。サイドバーを右に移動する方法を皆さんと共有すべきだと思いました。拡張された子テーマでは、一部の人々がそれをそのように使用することを好むので、サイドバーを25のテーマから完全に削除しました。ここから子テーマをダウンロードし、コードを変更して右側のサイドバーを復元できます。

次のコードを変更します。

.sidebar {
    float: none !important;
    margin-right: 0px;
    max-width: 413px;
    position: relative !important;
    width: 29.4118%;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    display: none;
}

に

.sidebar {
    float: right;
    margin-right: 0px;
    max-width: 413px;
    position: relative !important;
    width: 29.4118%;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

— ジョウナンランドリー
ソース