| |

WordPress Customization: Bunch Theme – Move Sidebar to Left

WordPress theme to customize: Bunch v1.0 by Daniel Kratky of BeaTheme

Changes to make: Move the sidebar from the right to the left.
Criteria: New left-hand sidebar is just for the inside, Blog and Contact pages. The Index page must maintain its default layout.

(Content section of Page):

PAGES

File: page.php (line 6)
File: single.php (line 6)
File: template-blog.php (line 17)
File: template-contact.php (line 13)

Change: div class=”post specialtwo first”

To: div class=”post specialtwoSidebarLT firstSidebarLT

CSS

File: style.css

In the CSS “cells” section:
Copy the full class: .first; Paste just below and rename it to: .firstSidebarLT

  • Change: margin-left:0 !important; To: margin-right:0 !important;
  • Change: float: left; To: float: right;

In the CSS “cells” section:
Copy the full class: .specialtwo; Paste just below and rename it to: .specialtwoSidebarLT

  • Change: margin:0 0 0 50px; To: margin:0 50px 0 0;
  • Change: padding:0 50px 0 0; To: padding:0 0 0 50px;
  • Change: float:left; To: float:right;
  • Change: border-right:1px solid #e5e5e5; To: border-left:1px solid #e5e5e5;

————————————————————
(Sidebar section of Page):

PAGE

File: sidebar.php (line 1)

Change: div id=”sidebar” class=”special last”

To: div id=”sidebarSidebarLT” class=”specialSidebarLT lastSidebarLT

CSS

File: style.css

1. In the CSS “cells” section (there are 2 of these .last classes):
Copy the full class: .last; Paste just below and rename it to: .lastSidebarLT

  • Change: margin-right:0 !important; To: margin-left:0 !important;
  • Add: “clear: left”

2. In the CSS “cells” section (this is the 2nd instance of the .last class):
Copy the full class: .last; Paste just below and rename it to: .lastSidebarLT

  • Change: margin-right:0 !important; To: margin-left:0 !important;
  • Change: padding-right:0 !important; To: padding-left:0 !important;
  • Change: float:left; To: float:right;
  • Change: border-right:none !important; To: border-left:none !important;

3. In the CSS “cells” section:
Copy the full class: .special; Paste just below and rename it to: .specialSidebarLT

4. In the CSS “sidebar” section:
Copy the full id: #sidebar; Paste just below and rename it to: #sidebarSidebarLT

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *