如何将Twenty15中的侧边栏向右移动?

时间:2015-01-02 作者:Anteru

是否可以仅使用子主题和CSS将“二十一五”主题中的边栏向右移动,或者是否需要更改主题本身?我遇到的主要问题是,我可以在“默认”或“滚动”场景中获得右侧的边栏,但不能同时在这两种场景中获得(默认使用位置:相对,是页面加载时得到的,滚动是在页面滚动时设置的,并将边栏位置更改为绝对。)

4 个回复
最合适的回答,由SO网友:fuxia 整理而成

我从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;
}
这似乎是可行的,即使你向下滚动。

SO网友:amolveer

您可以向子主题添加以下代码。

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

SO网友:Augusto

当从手机上使用时,公认的解决方案会破坏主题的响应能力。我不得不将托肖和安特鲁接受的解决方案包装在@media screen 作为原始的215模板。

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

SO网友:Djouonang Landry

我最近扩展了一个儿童主题,从“提示和窍门”到“215”主题,我想我应该与大家分享如何将侧边栏向右移动。在扩展的儿童主题中,我将侧边栏从215主题中完全删除,因为有些人更喜欢这样使用它。您可以下载子主题here 并更改代码以将侧栏恢复到右侧:

更改以下代码:

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

结束

相关推荐

Responsive Admin Themes

我在看这个管理主题的示例(http://themepixels.com/main/themes/demo/webpage/shamcey/dashboard.html). 至于标签为“Navigation”的左侧管理栏,有没有一种方法可以在不使用插件的情况下实现这种类型的左侧仪表板管理菜单?我想用css、js或Jquery来实现这一点,任何处理编码的东西都可以。