TwentyFifteen의 사이드 바를 오른쪽으로 옮기는 방법?

16

하위 테마 및 CSS 만 사용하여 TwentyFifteen 테마의 사이드 바를 오른쪽으로 이동할 수 있습니까, 아니면 테마 자체를 변경해야합니까? 내가 겪고있는 주요 문제는 "기본"또는 "스크롤 된"시나리오에서 오른쪽에있는 사이드 바를 얻을 수 있지만 둘 다에서 그렇지는 않다는 것입니다. 페이지를 스크롤 할 때 스크롤이로드되고 사이드 바 위치가 절대로 변경됩니다.)

themes child-theme theme-twenty-fifteen

— 안 테루
소스

3

테마를보십시오 rtl.css. 그렇습니다.

— fuxia

충분하지 않습니다. RTL 테스터로 시도해도 사이드 바 는 왼쪽에 남아 있습니다. RTL.css에서 관련 섹션을 복사 / 붙여 넣을 때 사이드 바가 실제로 전환되었지만 스크롤하는 동안 다시 중단됩니다.

— Anteru

6

나는에서 다음을 가져 와서 Magic Widget 을 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;
}

아래로 스크롤해도 작동하는 것 같습니다.

— 푸시 아
소스

1

충분하지 않습니다. 또한 다음을 추가해야했습니다. body {direction : rtl; } .sidebar, .site-content, .site-footer {방향 : ltr; }

— Anteru

@Anteru 나는 당신이 SE 네트워크가 작동하는 방법을 알고 있다고 가정 : 당신이 또한있어 경우, 파일을 편집 하고 설명 하는 이유 편집 메시지. 감사.

— 카이저

적어도 Firefox에서는 충분하지 않았습니다. 아래로 스크롤하면 사이드 바가 무작위로 사라지고 다시 나타납니다. RTL / LTR 트릭이이를 해결하는 것 같습니다. 아, 그리고 기록 : 이것을 어린이 테마에 넣을 때 !important필요하지 않습니다.

— Anteru

네, 테스트 할 때도 같은 문제가 발생합니다.

— Brad Dalton

@Anteru-감사합니다. 추가 코드가 도움이되었습니다!

— Igor Laszlo

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

내 테스트를 기반으로 작동합니다.

— Brad Dalton

스크롤하지 않고 JavaScript가 사이드 바를 고정시키는 즉시 작동하지 않습니다. 오른쪽으로 이동합니다. 아마도 JavaScript가 위치를 "고정"으로 변경하기 때문일 수 있습니다.이 규칙은 right : 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

나는 최근에 25 가지 테마에 대한 팁과 요령으로 어린이 테마를 확장했으며, 사이드 바를 오른쪽으로 움직일 수있는 방법을 공유해야한다고 생각했습니다. 확장 된 하위 테마에서 일부 사람들은 그런 식으로 사용하는 것을 선호하기 때문에 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);
}

— 주 오낭 랜드 리
소스