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 »

Numerous Nav buttons in side bar?


  #1  
Old Sep 22, 2010, 04:50 PM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
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 03:43 PM. Reason: Solved
  #2  
Old Sep 22, 2010, 06:32 PM
lmilesw's Avatar
lmilesw
 
10,174 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, 08: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, 11:49 PM
lmilesw's Avatar
lmilesw
 
10,174 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, 06: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, 10:10 AM
lmilesw's Avatar
lmilesw
 
10,174 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.
  #7  
Old Sep 23, 2010, 03:01 PM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
OK Larry
So I got ONE button in and working! I put this in the text widget:

<div
id="Auto">
<a href="http://autosnetwork.com" target= "blank"><img src="./wp-content/themes/atahualpa353/images/auto_blank.gif" ></a>
</div>


and this in CSS Inserts:

div#Auto {z-index: 4; position: top left; float: center; width: auto; margin-right: 0px; margin-left: 73px;
margin-top: 0px;
}
/*--------------------------------------------*/
/*-- This defines the space for the buttons --*/
/*--------------------------------------------*/
div#Auto {
height: 53px; width: 53px; border-width: 0; z-index:999;}
/*--------------------------------------*/
/*-- This is the normal buttons image --*/
/*--------------------------------------*/
div#Auto img {
background: url(./wp-content/themes/atahualpa353/images/Auto_normal.png) top left no-repeat;}
/*-------------------------------------*/
/*-- This is the hover buttons image --*/
/*-------------------------------------*/
div#Auto :hover img {
background: url(./wp-content/themes/atahualpa353/images/Auto_hover.png) top left no-repeat;}


I am able to move the button around with the Margin Left, margin right values. So to add buttons and build the grid, I assume (unless I went with a table) I would duplicate both sections (with new id) and adjust the margins. Correct? I realize this would looooong and probably not the most efficient, but it should work.
  #8  
Old Sep 23, 2010, 03:11 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
And you will have to get into floating the divs and then clearing the floats to start a new row. So if you had auto1 auto2 auto3 auto4 auto5 auto6 for IDs the float for two rows would be
HTML Code:
div#auto1 {float:left;}
div#auto2 {float:left;}
div#auto3 {float:left;clear:right;}
div#auto4 {float:left;}
div#auto5 {float:left;}
div#auto6 {float:left;clear:right;}
I think the clear:right is correct.
__________________
~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.
  #9  
Old Sep 23, 2010, 04:30 PM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
This works:
Using your example (auto1, auto2, auto3) would be in the first row. 4/5/6 in the second.

For whatever reason auto2/auto5 go on their own, but auto3/auto6 I had to use negative top margin to force it up. But it works! All the rollovers work. Now just four more rows!

div#auto1 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 10px; margin-top: 0px;}

div#Auto2 {z-index: 4; position: top left; float: center; width: auto; margin-right: 0px; margin-left: 68px; margin-top: 0px;}

div#Auto3 {z-index: 4; position: top left; float: right; clear:right; width: auto; margin-right: 10px; margin-left: 0px; margin-top: -53px;}

div#Auto4 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 10px; margin-top: 5px;}

div#Auto5 {z-index: 4; position: top left; float: center; width: auto; margin-right: 0px; margin-left: 68px; margin-top: 5px;}

div#Auto6 {z-index: 4; position: top left; float: right; clear:right; width: auto; margin-right: 10px; margin-left: 0px; margin-top: -53px;}
  #10  
Old Sep 23, 2010, 06:28 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
There is no float:center which probably part of the reason you are having to use negative margins. Also using float right can be problematic as you might have something like the follwoing happen in some cases.

xxxx xxxx xxxx
xxxx xxxx xxxx
xxxx xxxx xxxx


I typically use float:left as I showed you. Did you try that and it not work?
__________________
~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 Sep 23, 2010, 06:53 PM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
I think I tried it, but now can't remember. I will plug it in and let you know.

I would let you look at the site, but it's a localhost at this point.

Stay tuned...
  #12  
Old Sep 23, 2010, 08:18 PM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
OK... Yes, that worked my friend! I think the first time I tried it I had the margins way off. Learning everyday!!
Thanks for your help on this Larry!
This is what I have:

div#auto1 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 10px; margin-top: 0px;}

div#Auto2 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 5px; margin-top: 0px;}

div#Auto3 {z-index: 4; position: top left; float: left; clear:right; width: auto; margin-right: 0px; margin-left: 5px; margin-top: -53px;}

div#Auto4 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 10px; margin-top: 5px;}

div#Auto5 {z-index: 4; position: top left; float: left; width: auto; margin-right: 0px; margin-left: 5px; margin-top: 5px;}

div#Auto6 {z-index: 4; position: top left; float: left; clear:right; width: auto; margin-right: 0px; margin-left: 5px; margin-top: 5px;}


I'm designing this on localhost otherwise I would show you, but attached is a screen grab. All the buttons are the same right now because I wanted to make sure I could get it to work before creating all the different buttons. Rollover turns it to a bright yellow gold.

I have another question though. All these buttons will take the viewer to another area. Right now the buttons have normal and hover view. How would I code a "selected" button? So if the viewer was on page "auto1" that button would be a different color than all others.
Attached Thumbnails
Click image for larger version

Name:	Button-grid.jpg
Views:	445
Size:	18.6 KB
ID:	767  
  #13  
Old Sep 23, 2010, 11:03 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
That's a bit more complicated and I have not used that kind of conditional logic. Here is an article that could help you build that logic though if you think you really need it.

After I read the article I got intrigued and started playing around. First you will need a php aware widget. I currently like My Custom Widgets. In that widget I put the following which rendered Page One according to some css I had written to make the text red if I am on the home page. #current {color:red;}
HTML Code:
<div<?php 
if (is_home())
{ 
echo " id=\"current\"";
}
?>><a href="#">Page One</a></div>
With your situation you would need to use something like the following.
HTML Code:
div<?php
if (is_page(99))
{
echo " id=\auto1on\""'
}
elseif
{
echo " id=\"auto1off\""
?>><a href="http://autosnetwork.com" target= "blank"><img src="./wp-content/themes/atahualpa353/images/auto_blank.gif" ></a>
I THINK that's right. Then you would create 2 different css entries for the selector auto1on for when you are on the page and auto1 off when not. Then just repeat for all the pages.

I hope that helps and doesn't confuse. My little test worked for me. You can see my teeny tine test on my super ugly test site. On the home page the words "Page One" on the right are red. On any other page there are not.

One other way of accomplishing what you want is to create 18 widgets with the code in each to highlight one particular button. Then use widget logic plugin or something of that sort to only show that widget on that particular page.

Good Luck.
__________________
~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.
  #14  
Old Sep 24, 2010, 07:21 AM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
Thanks Larry
I'll look at the article and your info. I need to decide if I really need to do it or not (still try to figure out the site). Hope you did not spend a lot of time on it.

Thanks for all your help.

I PM'd you as well.

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
Why won't next/previous nav buttons actually nav?? Jeff G Post-Kicker, -Byline & -Footer 4 Aug 9, 2010 07:51 PM
[SOLVED] New Widget Area Above Side Bar + Spaces In Side Bar ChrisPanimation Sidebars & Widgets 18 Jan 15, 2010 10:25 AM
IE ruins aligned images in header & center column, & doesn't size nav menu buttons viewdesigninc Header configuration & styling 0 Dec 11, 2009 02: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 05:56 AM


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


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