Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

How to get a third sidebar above the two others


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jan 4, 2010, 02:19 AM
Danielwerner's Avatar
Danielwerner
 
85 posts · Jul 2009
Sorry if this has been brought up earlier, I couldn't find and/or understand any other threads about it.

I'm using the latest atahualpa-build, and I have two sidebars (inner and outer) on the right side of the center column. Now I want a third one above those two, one that spans BOTH of them. I don't want the third one to be above the header or something like that, it should still be a sidebar.

So one could say that I want my three sidebars to be like a pi-sign (π).

How do I do this? And please speak to me like to an idiot, I am completely rubbish at php/css/whatever.

HUUUUGE thanks in advance!
__________________
http://blogg.danielwerner.se/

Last edited by Danielwerner; Jan 4, 2010 at 02:21 AM.
  #2  
Old Jan 4, 2010, 06:47 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
the answer is 'sort of'

because the center area is a 1 row table and the sidebars are the cells of the row, you can't do it and get it to line up with the 'posts' column. So unless you want do dig into the code...

What you can do is add a new widget area to the bottom of the header area and define it's width as the width of the sidebar. So assuming your sidebars are 200px each add this to the end of the options at ATO->Style & edit HEADER AREA->Configure Header Area
HTML Code:
<br><?php bfa_widget_area('name=My widget area&cells=2&align=8&align_2=3&width_1=400&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=Widgets will go here</div>'); ?>
This will create two widget areas at the bottom of the header area, just above the sidebars and center area. The first of the two areas will be 400px wide just above the sidebar. so it will look like this

HHHHHHHH
HHHHHHHH
4444555555
1122ccccccc
1122ccccccc
1122ccccccc
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jan 4, 2010, 11:15 AM
Danielwerner's Avatar
Danielwerner
 
85 posts · Jul 2009
Thanks for the help, but it wasn't exactly what I had in mind. I want the center column to look the same way as before, without the 5-part on your picture. I want it to look something like this:

HHHHHHHHHH
HHHHHHHHHH
ccccccc3333
ccccccc1122
ccccccc1122
ccccccc1122

Is there a way without having to change too much code? Otherwise, thanks anyway.
__________________
http://blogg.danielwerner.se/
  #4  
Old Jan 8, 2010, 03:35 AM
justprettygirl's Avatar
justprettygirl
 
7 posts · Jan 2010
Quote:
Originally Posted by juggledad
the answer is 'sort of'

because the center area is a 1 row table and the sidebars are the cells of the row, you can't do it and get it to line up with the 'posts' column. So unless you want do dig into the code...

What you can do is add a new widget area to the bottom of the header area and define it's width as the width of the sidebar. So assuming your sidebars are 200px each add this to the end of the options at ATO->Style & edit HEADER AREA->Configure Header Area
HTML Code:
<br><?php bfa_widget_area('name=My widget area&cells=2&align=8&align_2=3&width_1=400&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=Widgets will go here</div>'); ?>
This will create two widget areas at the bottom of the header area, just above the sidebars and center area. The first of the two areas will be 400px wide just above the sidebar. so it will look like this

HHHHHHHH
HHHHHHHH
4444555555
1122ccccccc
1122ccccccc
1122ccccccc
Hi juggledad,

I think this is what Danielwerner mean. To have a vertical area above the sidebar. And I am having the question on how to configure the theme to allocate the vertical area. Pls refer to the attached picture link for more detail description of the failure we having.

http://i852.photobucket.com/albums/ab84/justprettygirl/Spanningareabetweensidebar.jpg


Thanks

JustPrettyGirl.com
  #5  
Old Jan 8, 2010, 06:38 AM
paulae's Avatar
paulae
 
1,332 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
I'd like to do that at the bottom of the 2 right sidebars.

HHHHHHHHHHHHHHHHHHHHHHH
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCNNNNNNN
LLLLLCCCCCCCCCCCCCCNNNNNNN
LLLLLCCCCCCCCCCCCCCNNNNNNN

"N" is the new widget area spanning the width of inner right and right sidebars. I'd use it for a random image or a wider ad.
  #6  
Old Jan 14, 2010, 09:13 AM
kookymom
 
1 posts · Jan 2010
Quote:
Originally Posted by justprettygirl
Hi juggledad,

I think this is what Danielwerner mean. To have a vertical area above the sidebar. And I am having the question on how to configure the theme to allocate the vertical area. Pls refer to the attached picture link for more detail description of the failure we having.

http://i852.photobucket.com/albums/ab84/justprettygirl/Spanningareabetweensidebar.jpg


Thanks

JustPrettyGirl.com
I am looking into how to do exactly what justprettygirl showed on the graphic. Is there any way to do this? Similar to what my blog looks like, with the ad area above the two sidebars here: http://wisdombegun.com/
Thanks!
  #7  
Old Jan 14, 2010, 02:14 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
This is exactly what I am looking for! I have a thread up for this but it is explained better here.

Chris
  #8  
Old Jan 14, 2010, 03:16 PM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
I'll repeat what I put in the other thread

This should be doable with changes to the code.

The middle of the page (area between the header and footer) is a one row table with 1 to 5 cells (L L-inner Center R-inner R). The way it woulld have to be done is to add code to replace the two cells R-inner and R, with one cell witch itself was a table.

this new table could have Two columns with several rows where the first row (if you wanted a new widget area at the top) would span the two columns. The next row would have two columns: R-inner and R, and finally a last row (if you wanted it) wich would span the two columns. then you would add teh code to close the inner table, close the original table's cell and close the table.

That's how I'd do it...on paper. anybody want to fund the development?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Jan 20, 2010, 11:19 PM
Rashell's Avatar
Rashell
 
67 posts · May 2009
You can try this too... I actually copied and pasted from another discussion but it should get you the results you're looking for.

If you download a plugin which allows you to add php in your sidebars you can use it to load the "new widget area" php command line into any one of your sidebars and you're good to go.

To explain the process a bit more. Let's say you have a right sidebar set to 200px. You add a 200px wide slideshow, then some featured content. Just below that you'd like a 2 column widget area for archives on a100px wide left side and a blogroll on a 100 px wide right side.
  1. So you load the slideshow, and the featured content widgets into the "right sidebar"...
  2. then that php executable widget (it's similar to the text widget but lets you add php code).
  3. Next you'll open that php widget and enter the "new widget area" command line.
  4. Load your home page,
  5. then refresh your widgets admin page and you should see the "new widget areas" you just created.
  6. Load the archives blah blah widgets in the "new widget area 1" or left new widget area
  7. and the blogroll blah blah widget in the "new widget area 2"/right side.

So you're basically putting widget areas into widget areas.

Just tried and it worked perfectly.

For some of you who've already configured your sidebars you might want to stick with the process mentioned above. But if you're just setting them up or you don't mind rearranging it's a fairly decent "quick fix".

With a few good plugins you can stick widget areas on the moon (slight exaggeration).

Rashell
  #10  
Old Jan 21, 2010, 12:10 AM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
Great idea Rashell. I just tested and it worked like a charm. Here is the code I used in the Advanced Text Widget for two 50px wide side by side widget areas.
HTML Code:
<div style="float:left;width:50px;" id="my_new_widget_area" class="bfa_widget_area"><?php bfa_widget_area('name=Left Lower'); ?></div>
<div style="float:right;width:50px" id="my_new_widget_area" class="bfa_widget_area"><?php bfa_widget_area('name=Right Lower'); ?></div>
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Jan 21, 2010, 05:25 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
actually you don't need two widget statements - you can have one with two areas
HTML Code:
<?php bfa_widget_area('name=sidebar_widget_area&cells=2&before_widget=<div id="%1$s" class="sidebar-widget %2$s">&after_widget=</div>'); ?>
this will create a 'sidebar_widget_area 1' and a 'sidebar_widget_area 2' sideby side. Using one new widget statement also allows you to control the size of the two areas, if the side bar is 400px, you could use this:
HTML Code:
<?php bfa_widget_area('name=sidebar_widget_area&cells=2&width_1=100&before_widget=<div id="%1$s" class="sidebar-widget %2$s">&after_widget=</div>'); ?>
to make the 'sidebar_widget_area 1' 100px and 'sidebar_widget_area 2' 300px

----------------
for a complete write up see http://forum.bytesforall.com/showthread.php?t=5419
----------------
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jan 21, 2010 at 06:08 AM.
  #12  
Old Jan 21, 2010, 06:39 AM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
I tried that and it worked but I wanted the left widget area aligned left and the right aligned right. Can you do that with the table code? For instance if the widget area was 400px and I wanted two 150px side be side widget areas with 100px between them.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old Jan 21, 2010, 06:59 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
The easiest way would be to define 3 areas in teh new widget area and give area 2 a width of 100 and just don't use it . For example
<?php bfa_widget_area('name=My widget area&cells=3&width_2=100&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>'); ?>
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Feb 2, 2010, 09:46 PM
juandrah
 
24 posts · Jul 2009
OK, so how about having the right column extend up to the top of the webpage effectively cutting off the header? Same theory using the table structure?

Looking for...

HHHHHH RR
HHHHHH RR
LL CCCC RR
LL CCCC RR
LL CCCC RR
  #15  
Old Feb 3, 2010, 04:24 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Nope won't work, The header, center area and footer are all rows in a table. What you're asking for would mean a rewrite of the code removing the right sidebar from it's current position as a cell in the center area table and then adding two cells in the main table so the header and center was one cell and the right sidebar was another. What about the footer.

See it gets complicated and is not likely to happen
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Feb 3, 2010, 10:12 PM
juandrah
 
24 posts · Jul 2009
So it sounds like you are describing the existing table structure as this:

Code:
<table>
     <tr>
          <td> Header</td>
     </tr>
     <tr>
          <td> Center</td>
     </tr>
     <tr>
          <td>Footer</td>
     </tr>
</table>
Could I accomplish what I want by hard code changing it to this? (new code in red):

Code:
<table>
     <tr>
          <td>

               <table>
                    <tr>
                         <td> Header</td>
                    </tr>
                    <tr>
                         <td> Center</td>
                    </tr>
               <table>

          </td>
          <td>
               New right column => construct the existing right sidebar the way I want it, view source code, copy and paste it here. then turn off the existing right sidebar in the ATO?
          </td>
     </tr>
     <tr>
          <td>

               <table>
                    <tr>
                         <td>Footer</td>
                    </tr>
               <table>

          </td>
    </tr>
</table>


This creates a shell table, putting the existing structure (minus the footer) in a row with a second cell as the new right widget side bar. Then it puts the footer in a new row below all but maintains the same table structure to preserve padding, margins, etc. Of course necessary 'span' constraints would apply. Also, it is understood that any changes in the new right sidebar would have to be hard coded again because it would not be editable through the ATO.

Or can I call the new right side bar from the new <td></td> containing it and turning off the existing right sidebar in the ATO will have no effect on the new side bar however the new right sidebar would remain editable from the ATO?

Or is it not that simple?

Thanks

Last edited by juandrah; Feb 3, 2010 at 10:16 PM.
  #17  
Old Feb 4, 2010, 05:00 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
actually the page is made up of a series of tables the first is

HHHHHHHHHH
HHHHHHHHHH
CCCCCCCCCCC
CCCCCCCCCCC
CCCCCCCCCCC
CCCCCCCCCCC
CCCCCCCCCCC
FFFFFFFFFFFFFF
FFFFFFFFFFFFFF

Three rows, header center and footer. The center is made up of a one row table with upto 5 cells

LLIICCCCCIIRR
LLIICCCCCIIRR
LLIICCCCCIIRR
LLIICCCCCIIRR

where you have Left sidebar, left Inner sidebar, Center, right Inner sidebar, Right sidebar

and then the footer (which is also a table)

What you are asking is how to take the CELL from one table and have it exceed it's table's boundries.
That would involve a lot of coding. So you would have a table that was

XXXXXXXXRR
XXXXXXXXRR
XXXXXXXXRR
XXXXXXXXRR
XXXXXXXXRR
XXXXXXXXRR

This would be a fundemental change in the code and would be a huge coding change
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

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


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