While using the Twenty Fourteen theme (I’ve already created a child theme), I’m trying to move the whole left sidebar to the right and put the site content to the left.

Basically, I’m just trying to switch both areas positions (and remove the "site-description" which won’t be needed since it won’t be positioned under the "site-title" anymore).

All the topics I found only relate to the Twenty Fifteen Theme or to removing the sidebar but neither fully respond to this specific switching for the Twenty Fourteen theme that I'm trying to achieve.

I don't know much about css and php programmning so the changes that need to be done are a little bit out of my league on my own.

If somebody can help me achieve that, I’ll really appreciate it.

Here is the website concerned : https://www.digitalcine.fr/

Thanks a lot. Merry Christmas 😉

Best regards, Stephane.


try editing the current css stlyes to this

/* moves side block right */
.site::before {
   right: 0;
/* moves sideblock conent right*/
#secondary {
float: right;
/* pushes body content left  */
.site-content {
margin-left: -221px;
  • Hello @Brad Holmes, Thanks for your indication. We're getting somewhere. Here is what's happening when I tried your modification on a local version : screenshots.firefox.com/IoRLd79bCTY3uxSJ/localhost I'm not sure I made the changes on the proper lines : Line 4158 .site:before { width: 222px; } Changed to : right: 0px; Line 4167 #secondary { width: 162px; } Changed to : float: right; Line 3420 .site-content { margin-right: 33.33333333%; } Changed to : margin-left: -221px; – StfA Dec 26 '17 at 10:53
  • are you editing the css between this @media screen and (min-width:1008px) { } – Brad Holmes Dec 26 '17 at 12:44
  • Thank you @Brad Holmes, That's indeed much better now : screenshots.firefox.com/rFqiE15JUsYJyUIl/localhost The left sidebar is now properly set to the right. There's just the main content which hasn't moved to the left :) – StfA Dec 26 '17 at 22:02
  • /* pushes body content left */ .site-content { margin-left: -221px; } that should push you left – Brad Holmes Dec 27 '17 at 11:44
  • I've made the 3 changes you mentioned between the @media screen and (min-width: 1008px) {} but the site-content does not move to the left :( .site-content { margin-right: 29.04761904%; margin-left: -221px; } .site:before { background-color: #000; content: ""; display: block; height: 100%; min-height: 100%; position: absolute; top: 0; right: 0; width: 182px; z-index: 2; } #secondary { background-color: transparent; border: 0; clear: none; float: right; margin: 0 0 0 -100%; min-height: 100vh; width: 122px; } – StfA Dec 27 '17 at 12:57

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.