如何将“二十十五”中的侧边栏向右移动？

16

是否可以仅使用子主题和CSS将TwentyFifteen主题中的边栏右移，还是需要更改主题本身？我遇到的主要问题是，在“默认”或“滚动”情况下，都可以在右侧获得侧边栏，但在两种情况下都不可以（默认情况下使用position：relative，这是您在页面上获得的内容）加载时，在滚动页面并将滚动条的位置更改为绝对时设置滚动。）

themes child-theme theme-twenty-fifteen

— 安特鲁
source

3

看一下主题的rtl.css。它做到了。

— fuxia

还不够。如果我尝试使用RTL测试仪，则侧栏将保留在左侧。当我从RTL.css中复制/粘贴相关部分时，侧边栏确实确实切换了，但是滚动时会再次损坏。

— Anteru 2015年

6

我从中获取了以下内容，rtl.css并通过Magic Widget将它们与其他!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;
}

即使向下滚动，这似乎仍然有效。

— 福厦
source

1

对我来说还不够。我还必须添加：body {方向：rtl; } .sidebar，.site-content，.site-footer {方向：ltr; }

— Anteru'1

@Anteru我假设您知道SE网络的工作原理：如果有添加，请进行编辑并在编辑消息中说明原因。谢谢。

— kaiser 2015年

至少在Firefox中还不够，当我向下滚动时，侧栏会随机消失并重新出现。RTL / LTR技巧似乎可以解决此问题。记录在案：将其作为儿童主题时，!important不需要。

— Anteru 2015年

是的，我测试时遇到同样的问题。

— 布拉德·道尔顿

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

— 阿莫尔韦尔
source

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

— 奥古斯托
source

0

最近，我从二十五个主题的技巧中扩展了一个儿童主题，我认为我应该与大家分享如何将侧边栏向右移动。在扩展子主题中，我完全从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);
}

— 朱昂南·兰德里
source