I’ve never liked themes with sidebars on the left – probably because we in the western world start reading on the left, and I’d like there to be as little clutter as possible. Or perhaps I’m used to navigation items on the right.
I was looking around for solutions to move the sidebar in Automattic’s TwentyFifteen theme to the right, and several options can be found on the internet. Here are two that worked for me:
Option 1: CSS Tweak
Thanks to the Stack Exchange community, this CSS tweak works a treat (for left-to-right languages):
body:before {
right: 0;
left: auto;
direction: ltr;
}
.sidebar {
float: right;
margin-right: auto;
margin-left: -100%;
direction: ltr;
}
.site-content {
float: right;
margin-right: 29.4118%;
margin-left: auto;
direction: ltr;
}
.site-footer {
float: right;
margin: 0 35.2941% 0 0;
direction: ltr;
}
Add these declarations to your own TwentyFifteen Child Theme and you’re good to go. If added via a CSS widget or to the bottom of the original theme (which is a really bad idea), additional “!important” statements may be necessary.
Kudos to toschero and Anteru for the combined solution to this puzzle. Check out the full discussion here:
Option 2: Pre-made Child Theme
Ruhul Amin from Tips and Tricks HQ has built a ready-to-use child theme and solved this puzzle in PHP. You can check it out here: