15

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

  • 3
    Look at the theme’s rtl.css. It does that. – fuxia Jan 2 '15 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 '15 at 18:35
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.

  • 1
    Not sufficient for me. I also had to add: body { direction: rtl; } .sidebar, .site-content, .site-footer { direction: ltr; } – Anteru Jan 2 '15 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 '15 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 '15 at 18:56
  • Yep, get the same problem when i test it. – Brad Dalton Feb 6 '15 at 17:54
  • @Anteru - thanks a lot, your additional codes helped me too ! – Igor Laszlo Oct 23 '15 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%;
    }
}
  • 1
    Works based on my testing. – Brad Dalton Feb 6 '15 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 '15 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.