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.)
4 Answers
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.
-
1Not sufficient for me. I also had to add: body { direction: rtl; } .sidebar, .site-content, .site-footer { direction: ltr; }– AnteruCommented Jan 2, 2015 at 18:53
-
-
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
!importantare not needed.– AnteruCommented Jan 2, 2015 at 18:56 -
-
@Anteru - thanks a lot, your additional codes helped me too ! Commented Oct 23, 2015 at 15:41
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
-
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.)– AnteruCommented Feb 7, 2015 at 11:51
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; }
}
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);
}
rtl.css. It does that.