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 » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

Numerous Nav buttons in side bar?


  #1  
Old Sep 22, 2010, 03:50 PM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
[Solved]Numerous Nav buttons in side bar?

I want to put a "Grid" of square nav buttons (with rollover) in the right side bar. I did a search and found:
"Sidebar buttons HTML & CSS not showing" and,

Juggledad's: HOWTO: float a button over the header and have it change when hovering.

The "how to" was very helpful and I was able to get a button (with hover/rollover) I wanted in the header, But I am not smart enough to figure out how to apple that to a Text widget in the side bar.

My Side bar will be 200px wide, I want to have a grid of 18 (54px x 54px) buttons (six rows deep of three across). They would have 10px space between (so padding on all sides of 5px for each button?).

I have tried a few things from the two above threads but just keep getting myself lost.

I'm on ata353 and wordPress3.01. But still a rookie!!

Thanks for any help!!

Last edited by 49Monsters; Nov 4, 2010 at 02:43 PM. Reason: Solved
  #2  
Old Sep 22, 2010, 05:32 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
What have you tried that hasn't worked? Maybe I can look at the code and give you some ideas. Building one from scratch could get kind of involved.
__________________
~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.
  #3  
Old Sep 22, 2010, 07:02 PM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
Well I tried the html code from Juggledad's "How-to" but put it in the text widget instead of header area. That placed the transparent gif and the link worked. But I don't know how to work with the code for CSS Insert to get the up and down button images to show.

If someone could get me started with one or two buttons, I think I could figure all the putzy Placement of the other buttons to form the grid.

Hey Imilesw,
On another note, back on thread http://forum.bytesforall.com/showthread.php?t=8658 You were talking about custom Links in the page menu. I see were I can create a custom link & add it to the menu. But how can you force that link to open into a new window?

Thanks
  #4  
Old Sep 22, 2010, 10:49 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
On the menu page click on "Screen Options" at the top right. Put a check in the "Link Target" box. Now you will have a choice in each menu to choose "Same Window" or "New Window"
__________________
~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.
  #5  
Old Sep 23, 2010, 05:26 AM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
Thanks Larry.

As far as the buttons, I placed this code in the text widget:

<div id="CN_Test">
<a id="CN_Test_image" href="http://mydomain.com"><img src="./wp-content/themes/atahualpa353/images/CN_blank.gif" ></a>
</div>

The link works... But then I don't really know what to place in html/Css Inserts...
Could it be some version of this:

div#CN_Test {z-index: 4; position: relative; float: left; width: auto; margin-right: 50%; margin-left: 50%;
margin-top: -100px;
}
/*--------------------------------------------*/
/*-- This defines the space for the buttons --*/
/*--------------------------------------------*/
a#CN_Test_image img {
height: 300px; width: 200px; border-width: 0; z-index:999;}
/*--------------------------------------*/
/*-- This is the normal buttons image --*/
/*--------------------------------------*/
a#CN_Test_image img {
background: url(./wp-content/themes/atahualpa344/images/CN_normal.jpg) top left no-repeat;}
/*-------------------------------------*/
/*-- This is the hover buttons image --*/
/*-------------------------------------*/
a#CN_Test_image:hover img {
background: url(./wp-content/themes/atahualpa344/images/CN_hover.jpg) top left no-repeat;}
/*------------------------------------------------------------*/
/*---------------- MY login button CSS - END ----------------*/
/*------------------------------------------------------------*/

I tried it and tried to figure out how to adjust the margins to find it, never got anything to show.
  #6  
Old Sep 23, 2010, 09:10 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
It looks like you are defining a single 200px by 300px image instead of 18 single images. Have you tried a table?

With regards to your code a couple of things I would suggest. Instead of defining an ID for the <a> tag use the div ID + a to define. For example
HTML Code:
<div id="CN_Test">
<a href="http://mydomain.com"><img src="./wp-content/themes/atahualpa353/images/CN_blank.gif" ></a>
</div>
would be what you put in the text widget and
HTML Code:
div#CN_Test a
OR
div#CN_Test img
would go in CSS inserts

This has nothing to do with how you accomplish your grid but is just a though in passing. The grid would either need to be a table as mentioned or a bunch of floating divs.

I THINK all of what I just wrote is accurate. If anyone sees issues please chime in.
__________________
~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.

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 05:13 AM
Why won't next/previous nav buttons actually nav?? Jeff G Post-Kicker, -Byline & -Footer 4 Aug 9, 2010 06:51 PM
[SOLVED] New Widget Area Above Side Bar + Spaces In Side Bar ChrisPanimation Sidebars & Widgets 18 Jan 15, 2010 09:25 AM
IE ruins aligned images in header & center column, & doesn't size nav menu buttons viewdesigninc Header configuration & styling 0 Dec 11, 2009 01:07 PM
How can I make one column above Right Side bar and Inner Right side-bar? darmanpurba@gmail.com Sidebars & Widgets 1 Sep 14, 2009 04:56 AM


All times are GMT -6. The time now is 07:19 PM.


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