How to move the sidebar in TwentyFifteen to the right?

Question

How to move the sidebar in TwentyFifteen to the right?

Anteru

2015年12月6日 11:52

Is it possible to move the sidebar in the TwentyFifteen theme to the right using a child theme and CSS only, or does it require changes to the theme itself? The main issue I'm running into is that I can get the sidebar on the right side in either the "default" or the "scrolled" scenario, but not in both (default uses position: relative and is what you get when the page loads, scrolled is set when the page is scrolled and changes the sidebar position to absolute.)

Topic theme-twenty-fifteen child-theme themes Wordpress

Category Web

Augusto · Accepted Answer · 2015年12月6日 11:52

The accepted solution breaks the responsiveness of the theme when used from a mobile. I had to wrap the accepted solution by toscho and Anteru in a @media screen as the original twentyfifteen template.

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

Djouonang Landry · Accepted Answer · 2015年8月6日 17:18

I recently extended a child theme from tips and tricks for the twenty fifteen theme and i thought i should share how you can move the sidebar to the right with you guys. in the extended child theme i removed the sidebar completely from the twenty fifteen theme as some people prefer to use it that way. You can download the child theme here and change the code to restore the sidebar to the right:

Change the following code:

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

to

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

amolveer · Accepted Answer · 2015年2月6日 12:27

You can add below code to your child theme.

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

fuxia · Accepted Answer · 2015年1月2日 18:39

I took the following from the rtl.css and applied them via Magic Widget with additional !important keywords to an English site:

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

This seems to work, even when you scroll down.

How to move the sidebar in TwentyFifteen to the right?

About