Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

Moving sidebars left/right without changing source code ordering


  #1  
Old Aug 10, 2015, 08:13 PM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
Montezuma documentation is presently a little sketchy on source ordering how-to's. Users who want SEO benefits of content loading before any sidebars, but prefer sidebars on the left side have little info to go on.

But having spent an hour or so figuring this out (and having just tested it with good results), I think I'm on a good track, so I figured I'd share this for anyone new to this topic. If anyone on this forum who has some experience with source ordering can chime in and add anything I may have missed, please do so and I'll include that in this post for anyone looking for this info.

The Math
Let's say you have a default layout that has a content area on the left and a sidebar on the right. And let's also say, for the argument sake, that you changed your content area to take up 9 columns, and your sidebar to 3 (for a total of 12):

That means that you have to push the 9-collumn-wide content area by 3 columns, and pull the 3-column-wide sidebar by 9 columns.

In short, content = push3 and sidebar=pull9 (notice you're specifying the amount of pushing and pulling, as opposed to specifying the width of an element)

The code
In Montezuma Options > Main Templates locate the template you wish to modify (or create a copy and assign it to a testing page before you commit) and hunt down the opening <div> tags for each of these two elements. They will look something like this:
Code:
<div id="content" class="col9">
and
<div id="widgetarea-one" class="col3">
All you have to do is add push3 class to the first one and pull9 to the second so they look like this:
Code:
<div id="content" class="col9 push3">
<div id="widgetarea-one" class="col3 pull9">
The resulting page will look like this:

But most importantly, as far as search engines are concerned, the content will continue to load before the sidebar.

Last edited by flyboy; Aug 10, 2015 at 08:16 PM. Reason: Headline typo
  #2  
Old Aug 11, 2015, 02:15 AM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
Wow, thanks very much for the explanation (and the wonderful illustrations), I always wondered what those CSS classes were for. Makes it much easier to re-arrange the order of the sidebar, but more importantly, solves the problem of having the sidebar shift under the content on cell phone widths even if it's to the left of the content on a desktop. That is, when you want to move the sidebar to the left, the inclination is to switch the order of the divs so that the widget area div comes before the content div. However, when the screen is narrowed to cell phone width, the content shifts under the sidebar instead of the other way around. Using the push/pull classes instead gives the desired behavior of having the sidebar move under the content.

I haven't tested it, yet, but I'm guessing the same technique can be used with two sidebars, i.e., if you have a content div of col6 followed by two sidebars of col3, you would push the content div by 3 and pull the first sidebar div by 6 so you get a sidebar to the left of the content and another to the right.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!

Last edited by CrouchingBruin; Aug 11, 2015 at 02:17 AM.
  #3  
Old Aug 11, 2015, 03:14 PM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
Quote:
Originally Posted by CrouchingBruin
...I'm guessing the same technique can be used with two sidebars, i.e., if you have a content div of col6 followed by two sidebars of col3, you would push the content div by 3 and pull the first sidebar div by 6 so you get a sidebar to the left of the content and another to the right.
You nailed it. I haven't tested this, but that's how it should work, based on what I'm seeing in the grid file.

I have spent the remainder of my evening thinking about different ways to affect each viewport independently. Because adding the .push and .pull classes inside a template file affects the first two viewports (960 and 720), but not the mobile.

So if I wanted to affect the tablet viewport differently from the desktop view, I would have to change the grid CSS file itself (not the most ideal way). I wonder if there is a better way to deal with that, cause hacking grids makes my head hurt (speaking of hacking grids, here is a link to the post on how to save a custom grid to database, so it survives a theme update and can be exported)

Bookmarks

Tags
code ordering, moving sidebars, push/pull, sidebars, source ordering

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Moving left sidebar - CSS styling for td#left Wimbledon Sidebars & Widgets 4 Oct 26, 2010 10:39 PM
[SOLVED] Moving sidebars down igabriela Sidebars & Widgets 2 Aug 4, 2010 02:32 PM
Would like the option of moving all sidebars to the right in 3.5.1 Elms123 Sidebars & Widgets 2 Jul 17, 2010 06:08 AM
Moving Widgets from left to right? feastfresh Sidebars & Widgets 3 Jun 14, 2009 09:00 AM


All times are GMT -6. The time now is 04:09 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.