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
