Làm cách nào để di chuyển thanh bên trong TwentyF15 sang phải?

16

Có thể di chuyển thanh bên trong chủ đề TwentyF15 sang bên phải chỉ bằng một chủ đề con và CSS, hoặc nó có yêu cầu thay đổi đối với chính chủ đề không? Vấn đề chính tôi gặp phải là tôi có thể có được thanh bên ở bên phải trong kịch bản "mặc định" hoặc "cuộn", nhưng không phải ở cả hai (mặc định sử dụng vị trí: tương đối và là những gì bạn nhận được khi trang tải, cuộn được đặt khi cuộn trang và thay đổi vị trí thanh bên thành tuyệt đối.)

themes child-theme theme-twenty-fifteen

— Anteru
nguồn

3

Nhìn vào chủ đề rtl.css. Nó làm điều đó.

— fuxia

Nó không thích đáng. Nếu tôi thử với trình kiểm tra RTL, thanh bên vẫn ở bên trái. Khi tôi sao chép / dán phần có liên quan ra khỏi RTL.css, thanh bên thực sự đã chuyển qua, nhưng nó sẽ bị hỏng lần nữa trong khi cuộn.

— Anteru

6

Tôi đã lấy những thứ sau từ rtl.cssvà áp dụng chúng thông qua Magic Widget với các !importanttừ khóa bổ sung cho một trang web tiếng Anh:

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;
}

Điều này dường như hoạt động, ngay cả khi bạn cuộn xuống.

— Fuxia
nguồn

1

Không đủ cho tôi. Tôi cũng đã phải thêm: body {direction: rtl; } .sidebar, .site-content, .site-footer {direction: ltr; }

— Anteru

@Anteru Tôi giả sử rằng bạn biết cách mạng SE hoạt động: Nếu bạn có một bổ sung, hãy gửi một chỉnh sửa và giải thích lý do trong một thông báo chỉnh sửa. Cảm ơn.

— kaiser

Ít nhất là nó không đủ trong Firefox, khi tôi cuộn xuống, thanh bên sẽ ngẫu nhiên biến mất và xuất hiện lại. Thủ thuật RTL / LTR dường như giải quyết điều đó. Oh và cho hồ sơ: Khi đưa điều này vào một chủ đề trẻ em, !importantkhông cần thiết.

— Anteru

Đúng, gặp vấn đề tương tự khi tôi kiểm tra nó.

— Brad Dalton

@Anteru - cảm ơn rất nhiều, mã bổ sung của bạn cũng giúp tôi!

— Igor Laszlo

4

Bạn có thể thêm mã dưới đây vào chủ đề con của bạn.

@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%;
    }
}

— dung môi
nguồn

1

Hoạt động dựa trên thử nghiệm của tôi.

— Brad Dalton

Không hoạt động đối với tôi, ngay khi tôi cuộn và JavaScript làm cho thanh bên bị dính, nó sẽ di chuyển sang phải. Có lẽ bởi vì JavaScript thay đổi vị trí thành "cố định", cùng với quy tắc bên phải: 0 làm cho nó dính vào phía bên tay phải (và do đó di chuyển nó, nếu cửa sổ đủ rộng.)

— Anteru 7/215

1

Giải pháp được chấp nhận phá vỡ tính đáp ứng của chủ đề khi được sử dụng từ điện thoại di động. Tôi đã phải bọc giải pháp được chấp nhận bởi toscho và Anteru theo @media screenmẫu hai mươi lăm ban đầu.

@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; }
}

— Tháng Tám
nguồn

0

Gần đây tôi đã mở rộng một chủ đề con từ các mẹo và thủ thuật cho chủ đề hai mươi mười lăm và tôi nghĩ tôi nên chia sẻ làm thế nào bạn có thể di chuyển thanh bên sang bên phải với các bạn. trong chủ đề con mở rộng, tôi đã loại bỏ hoàn toàn thanh bên khỏi chủ đề hai mươi mười lăm vì một số người thích sử dụng nó theo cách đó. Bạn có thể tải xuống chủ đề con tại đây và thay đổi mã để khôi phục thanh bên sang phải:

Thay đổi mã sau đây:

.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;
}

đến

.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);
}

— Vùng đất Djouonang
nguồn