16

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

2
  • 3
    Look at the theme’s rtl.css. It does that.
    – fuxia
    Jan 2, 2015 at 18:15
  • Is not sufficient. If I try with the RTL tester, the sidebar remains on the left side. When I copy/pasted the relevant section out of the RTL.css, the sidebar did indeed switch over, but it would get broken again while scrolling.
    – Anteru
    Jan 2, 2015 at 18:35

4 Answers 4

6

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.

7
  • 1
    Not sufficient for me. I also had to add: body { direction: rtl; } .sidebar, .site-content, .site-footer { direction: ltr; }
    – Anteru
    Jan 2, 2015 at 18:53
  • @Anteru I assume that you know how the SE network works: If you got an addition, file an edit and explain the why in an edit message. Thanks.
    – kaiser
    Jan 2, 2015 at 18:56
  • At least it wasn't enough in Firefox, when I would scroll down, the side bar would randomly disappear and reappear. The RTL/LTR trick seems to solve that. Oh and for the record: When putting this into a child theme, the !important are not needed.
    – Anteru
    Jan 2, 2015 at 18:56
  • Yep, get the same problem when i test it. Feb 6, 2015 at 17:54
  • @Anteru - thanks a lot, your additional codes helped me too ! Oct 23, 2015 at 15:41
4

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%;
    }
}
2
  • 1
    Works based on my testing. Feb 6, 2015 at 17:56
  • Doesn't work for me, as soon as I scroll and the JavaScript makes the sidebar sticky, it moves to the right. Probably because the JavaScript changes the position to "fixed", which together with the right:0 rule makes it stick to the right-hand side (and hence moves it, if window is wide enough.)
    – Anteru
    Feb 7, 2015 at 11:51
1

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.