Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   [SOLVED] New Widget Area Above Side Bar + Spaces In Side Bar (http://forum.bytesforall.com/showthread.php?t=5000)

ChrisPanimation Dec 23, 2009 08:39 PM

[SOLVED] New Widget Area Above Side Bar + Spaces In Side Bar
Hello! I just changed my center area from two side bars (on either side) to one on the right.(with posts on left side) I'm wondering if it's possible to add a new widget area above my right side bar...I'm trying to get a search box at the top of the right bar and have the cats and recent posts side by side underneath the search bar.

Also how do I make spaces underneath widget areas - say if I want to place another widget underneath cats but don't want it to be butt up against it?

here's my site for ref.


juggledad Dec 24, 2009 07:34 AM

You are actually using the right and right-inner sidebar areas. So what you want is a widget area that spans the top of the two sidebar areas.

this is not avaliable in an option or by using the new widget areas, but you can edit the code and create your own. You would need to work in bfa_footer.php and you should an area where it lays out the two sidebars. You'll probably have to add a <TD colspan=2> .....</td> to get it to work.

to get a space between widgets gpo to ATO->Automatically close comments on articles older than days->Widget Container and play with the third number in the 'margin: 0 0 15px 0;' rule, (the numbers are top, right, bottom, left) - if you change a number from 0, you need teh PX after it.

ChrisPanimation Dec 26, 2009 10:12 PM

Hey Juggledad, that affected all the widgets - as you know. How can I just affect the one widget in the right side bar - (to create a space above it)?


ChrisPanimation Dec 26, 2009 10:29 PM


Originally Posted by ChrisPanimation (Post 21536)
Hey Juggledad, that affected all the widgets - as you know. How can I just affect the one widget in the right side bar - (to create a space above it)?


Style Widgets> Widgets Container - area, I have this...

div#Header Widget {
width: 30%;
margin-right: auto;
margin-left: auto;

juggledad Dec 27, 2009 05:32 AM

Take a look at the source of the page, find the widget you want, look at the class and/or the ID for a unique name and use that in the CSS selector

ChrisPanimation Dec 27, 2009 10:19 AM

Apologies, I don't really understand what your saying here. Where do I look at the source of the page. Is this in the ATO's? Do I have to go into edit themes?

juggledad Dec 27, 2009 03:38 PM

sorry, what you do is display one of your pages, like the homepage. Each browser has the ability to view the source of the page being displayed. In Safari, it's in the 'View' tab and is called 'View Source', so check the 'View' or 'Edit' tab in your browser.

Now you should see the HTML that was generated to create the page you are viewing.

ChrisPanimation Dec 27, 2009 10:44 PM

Hi Juggledad,

I tried adjusting ATO>Style Widgets>Widget Container. And adjusted the ... margin: 0 0 15px 0;...I changed the third value (bottom...as you suggested in an earlier post) and that work this time.

How come it didn't affect my widgets in the header (which are new widgets I created)?


ChrisPanimation Dec 27, 2009 11:07 PM

Hi Juggledad,

Ok, so below is the right side bar section - in red at the bottom is a widget for a google search box. What would I do with that widget to create a space above or below it? And where would I place it (or where do I actually make the change) - in ATO>Add html/CSS inserts? - if not, where?


<!-- Right Sidebar -->
<td id="right">

<div id="categories-372500141" class="widget widget_categories"><div class="widget-title"><h3>Categories</h3></div> <ul>
<li class="cat-item cat-item-30"><a href="http://animcareerpro.com/blog/category/animation-school/" title="View all posts filed under Animation School">Animation School</a> (3)

<li class="cat-item cat-item-16"><a href="http://animcareerpro.com/blog/category/animation-terms/" title="View all posts filed under Animation terms">Animation terms</a> (5)
<li class="cat-item cat-item-28"><a href="http://animcareerpro.com/blog/category/at-work/" title="View all posts filed under At Work">At Work</a> (6)
<li class="cat-item cat-item-26"><a href="http://animcareerpro.com/blog/category/animation-job/" title="View all posts filed under Getting a Job">Getting a Job</a> (2)
<li class="cat-item cat-item-7"><a href="http://animcareerpro.com/blog/category/getting-started/" title="View all posts filed under Getting Started">Getting Started</a> (4)

<li class="cat-item cat-item-27"><a href="http://animcareerpro.com/blog/category/animation-employment/" title="View all posts filed under Staying Employed">Staying Employed</a> (1)
<li class="cat-item cat-item-29"><a href="http://animcareerpro.com/blog/category/tips-and-insights/" title="View all posts filed under Tips and Insights">Tips and Insights</a> (6)
</div><div id="text-496634523" class="widget widget_text"> <div class="textwidget"><form action="http://www.google.ca/cse" id="cse-search-box" target="_blank">

<input type="hidden" name="cx" value="partner-pub-9646683386372166:nmzlnf-uvh8" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="20" />
<input type="submit" name="sa" value="Search" />
<script type="text/javascript" src="http://www.google.ca/cse/brand?form=cse-search-box&amp;lang=en"></script>



<!-- / Right Sidebar -->

juggledad Dec 28, 2009 04:30 AM

what you do is create a CSS selector and rule and put it in ATO->Add HTML/CSS Inserts->CSS Insert

You can define the CSS selector using the information from the <DIV> since it has a unique ID. You can use a CSS rule 'margin-top: 20px;' so it would be:
HTML Code:

div#text-496634523 { margin-top: 20px;}

ChrisPanimation Jan 12, 2010 02:48 PM

Hi Juggledad, hope you're holidays were great!

I'm still trying to create space above a side bar widget. I tried the above suggestion with this widget...

</div><div id="text-496634525" class="widget widget_text"> <div class="textwidget"><script type="text/javascript"><!--
google_ad_client = "pub-9646683386372166";
/* ACPblog_200x200_text&amp;image */
google_ad_slot = "4233736820";
google_ad_width = 200;
google_ad_height = 200;
<script type="text/javascript"

This is what I put into ATO > CSS Insets
div#"text-496634525" {margin-top: 20px;}
but it's not working for me.

I can't get it to shift down for the life of me - I'm just trying to get things to line up horizontally in the right bars. Here's my site if you want to have a look. I am using the right and inner right side bars. I'm wondering if there's a better way to do this, like - Can I create new widget areas in a side bar, and use cells? If not than I'll just use spacing.


ChrisPanimation Jan 12, 2010 03:22 PM

Aaaa, I got the spaces to work! This should work out ok.

But is it possible to create new widget areas inside sidebars? I'm thinking not but let me know.


juggledad Jan 12, 2010 06:11 PM

?? create a new widget area inside the sidebar?? but the sidebar is where you can put widgets already

ChrisPanimation Jan 14, 2010 09:26 AM

Sorry, that wasn't very clear. Currently we can stack widgets on top of one another in the side bar. Is it possible to stack them horizontally (or have a widget split into cells horizontally). Like it is in my header.

For example, if I had the cats and recent posts beside each other at top (as they are now) then under that I would like to place a large video(or image) which fills the width of the side bar.

You will notice I am currently using right and right inner to get widgets to sit side by side(horizontally). I'm sure I would have to switch to one wide side bar to achieve this. (using tables maybe? would I have to hard-code it)




ChrisPanimation Jan 14, 2010 10:57 AM

I just read the thread entitled:
Third sidebar above the two others? by Daniel Werner

This is exactly what I am asking - I actually want to do what Paula is referring to, with the new area at the bottom.


juggledad Jan 14, 2010 03:03 PM

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.

ChrisPanimation Jan 14, 2010 09:04 PM

I would have to re-insert the piece of code with every version update though right? I could just copy and paste it into a notepad with a reminder of where it goes.........

Yeah, I'll fund you for that. I'll put in my regular amount. I Hope the others will contribute too since they all want it.

I'm looking for this.


"N" is the new widget area or cell spanning the width of inner right and right sidebars. I'd actually want two on top of one another I'd use it for embedded videos.


juggledad Jan 15, 2010 04:19 AM

If this was implimented I don't think what you want would be possible since the RRRrrrrrr is a single table cell and they each become a table themselves to accommodate the widgets you drop in there.

If people are serious, then I suggest you all figure a way to pay Flynn for a week of coding and I bet he would take a week break from ThemeFrame and do this. I could probably do it also, but I think he would be much more efficent doing it.

ChrisPanimation Jan 15, 2010 09:25 AM

I suppose it's a wish list item, but it would be a great improvement for the next version of Atahualpa!

Wide bars on the left or right seems to be a very popular configuration these days and people would like the ability to place items side by side and stacked on top of one another in the same bar.

Thanks anyways JD

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

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