Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

[SOLVED] New Widget Area Above Side Bar + Spaces In Side Bar


  #1  
Old Dec 23, 2009, 09:39 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
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.
animcareerpro.com/blog

Thanks,
Chris

Last edited by juggledad; Dec 24, 2009 at 08:11 AM.
  #2  
Old Dec 24, 2009, 08:34 AM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"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; Dec 24, 2009 at 08:38 AM.
  #3  
Old Dec 26, 2009, 11:12 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
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)?

Thanks,
Chris
  #4  
Old Dec 26, 2009, 11:29 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
Quote:
Originally Posted by ChrisPanimation
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)?

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

div#Header Widget {
width: 30%;
margin-right: auto;
margin-left: auto;
}
  #5  
Old Dec 27, 2009, 06:32 AM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Dec 27, 2009, 11:19 AM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
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?

Last edited by ChrisPanimation; Dec 27, 2009 at 03:32 PM.
  #7  
Old Dec 27, 2009, 04:38 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Dec 27, 2009, 11:44 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
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)?

Chris
  #9  
Old Dec 28, 2009, 12:07 AM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
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?

Thanks,
Chris
_________________________


<!-- 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>
<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>
<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>
<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>
<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>
<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>
<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)
</li>
</ul>
</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">
<div>

<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" />
</div>
</form>
<script type="text/javascript" src="http://www.google.ca/cse/brand?form=cse-search-box&amp;lang=en"></script>

</div>
</div>

</td>

<!-- / Right Sidebar -->
  #10  
Old Dec 28, 2009, 05:30 AM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Jan 12, 2010, 03:48 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
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>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>


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.
http://animcareerpro.com/blog/

Thanks,
Chris
  #12  
Old Jan 12, 2010, 04:22 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
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.

cheers!
  #13  
Old Jan 12, 2010, 07:11 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
?? create a new widget area inside the sidebar?? but the sidebar is where you can put widgets already
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Jan 14, 2010, 10:26 AM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
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)

animcareerpro.com/blog

Thanks,
Chris

[

Last edited by ChrisPanimation; Jan 14, 2010 at 11:06 AM.
  #15  
Old Jan 14, 2010, 11:57 AM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
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.

Chris
  #16  
Old Jan 14, 2010, 04:03 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #17  
Old Jan 14, 2010, 10:04 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
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.

HHHHHHHHHHHHHHHHHHHHHHH
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCNNNNNNN
LLLLLCCCCCCCCCCCCCCNNNNNNN - (in the middle)
LLLLLCCCCCCCCCCCCCCNNNNNNN
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr
LLLLLCCCCCCCCCCCCCCRRRrrrrrrr

"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.

Chris

Last edited by ChrisPanimation; Jan 14, 2010 at 10:11 PM.
  #18  
Old Jan 15, 2010, 05:19 AM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #19  
Old Jan 15, 2010, 10:25 AM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How can I make a wide side bar above Right-Inner Side bar and Right Side Bar darmanpurba@gmail.com Header configuration & styling 2 Jan 12, 2011 06:13 AM
[SOLVED] How to create spacing between page menu bar, side bar, and footer? ssoszka Atahualpa 3 Wordpress theme 4 Nov 29, 2009 11:39 AM
How can I make one column above Right Side bar and Inner Right side-bar? darmanpurba@gmail.com Sidebars & Widgets 1 Sep 14, 2009 05:56 AM
Text Widget will not be placed on side bar ladyhotchkiss Sidebars & Widgets 8 Jul 25, 2009 08:49 PM
Side bar widget - font-weight and background image? bamboojungles Sidebars & Widgets 1 Jun 2, 2009 09:32 AM


All times are GMT -6. The time now is 10:36 AM.


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