Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] Almost there but stuck.. Page menu bar icons on side (http://forum.bytesforall.com/showthread.php?t=7373)

marced May 31, 2010 03:32 PM

[SOLVED] Almost there but stuck.. Page menu bar icons on side
 
What I wanted is add social icons on the right in the page menu bar, because it's a spacesaver and great spot. The result is like this:
http://www.marced.com/socialpagemenu.png

I like it this way. Only problem is it lights up with the same background color as my page menu items, because the code is within <li> items, otherwise it wouldn't work.

How can I solve this? So the image is just like it is and doesn't change bgcolor when hovering? Or how can I avoid LI maybe? I included the used code within bfa_header_config below:

Quote:

$page_menu_bar .= '<li><img src="/nixel.gif" width="265"></img></li><li><img src="/icons/16/twitter.png"> </img><img src="/nixel.gif" width="10"><img src="/icons/16/linkedin.png"> </img><img src="/nixel.gif" width="10"><img src="/icons/16/rss.png"></img><img src="/nixel.gif" width="10"><img src="/icons/16/email.png"></li></ul></div>'
Thank you guys, final steps in my page!!

(btw, live example of how it behaves on http://www.marced.com)

juggledad May 31, 2010 05:43 PM

add a class="foobar" to each of the li's then you can use it in CSS to reset those LI's

marced Jun 1, 2010 05:09 AM

Hi JD (again :)), thnx for your help again. I added the class but now I don't know how to refer to the li and class and refer to hoover in CSS, got some basic knowledge on CSS but this goes a step too far. Can you tell me how to edit the hoover color for this LI class?

Thnx again (and again)

juggledad Jun 1, 2010 07:23 AM

do a google search using 'css hover pseudo' and read about it at w3schools.com

marced Jun 1, 2010 09:45 AM

I did some research, of course I want to look into it myself, but I see no effect in my page uptill now.

I tried a lot. And I referred to background color, background etc.

No effect. The referral to .foobar seems right when I look at explanation, I think something is wroing with li:hover, or maybe the variable but that's a Atahualpa thing how it is arranged.

I already have a CSS thing that IS working:
"div#menu1 ul#rmenu2 li a: hover"

But now I need to refer to this li with the class specifically, and it's an image not a link (so no 'a').
I understand you can't teach everyone CSS and you're not here for that, but I know you got the expertise ;)

Appreciate it if someone could help.

Donation no problem.

juggledad Jun 1, 2010 12:01 PM

your code won't work - all you have is the images. I assume that you want to be able to click on an image and link to twitter of face book or what ever, In that case your code must be
HTML Code:

<li class="foobar">
  <a href="http://address_of_where_you_want_to_link_to">
    <img src="/icons/16/twitter.png" />
  </a>
</li>

note: the class 'foobar' can be anything but should be meaningfull so 'menu_social_icons' might be a better name that 'foobar'

With this you can now code your CSS
.foobar a:hover {background: #000000;}

marced Jun 1, 2010 02:42 PM

JD,

I understand what you are saying, I know my html (done quitte a bit of tuning and adding) and I know I need to add <a href=""></a> links around the images to get it to link to the RSS feed. I just left them away because of the length of the code and because itīs work for later.

When I add an a i can refer to that, that worked (although it messes up my layout).

BUT, i need the image in between (with width="265px") to get the icons to the right. I don't want to make that a link (so no <a>). It should be possible to refer to an image or an LI hover without having a link in there, shouldn't it?
What about that?

Best way I guess should be that it should be possible to end the page menu bar somewhere, and start a new div or table on the same height to the right. Would that be easier? At least I would avoid all the page menu behaviour...

marced Jun 1, 2010 02:58 PM

Had a breakthrough. I used this code

div#menu1 ul#rmenu2 li.foobar
{
background: #E4ECF4;
}


And now when hovering over the images nothing background doesnīt become white like the normal menu, but stays the same color as background!

So thatīs ok now.

Only thing now left is when I add <a href=""></a> around the images, it links and all, but the images get all messed up, because they get the same layout as the rest of the menu-items, and all the images after this go to the next line :S

Next problem.. (in the end, we'll get there I hope). Should I still consider closing page menu bar and start new area on same height or is that not possible?

marced Jun 1, 2010 03:33 PM

Solved it!!!!!

I actually referred to my page menu styling more specifically by adding page_item to li, so it became:
Code:

div#menu1 ul#rmenu2 li.page_item a
Then I added this code to CSS to refer to the icons on the right:
Code:

div#menu1 ul#rmenu2 li.foobar
{
background: #E4ECF4;
margin: 0px 0px 2px -3px;
}

Then I made separate LI's around all the icons (images) and links, with class "foobar", and this has done the trick!! All working fine now, canīt test it in chrome and mozilla here but I think itīs fine!

result at http://www.marced.com.

You guys like it?

Rewarding this! Thnx JD for giving me the right thoughts and challenging me!

juggledad Jun 1, 2010 03:57 PM

Well...your not quite there, the last two icons are on the next line in Safari. Get rid of the
HTML Code:

<img src="http://www.marced.com/nixel.gif" width="302" class="menuimg"></li>
and add 'float:right;' to your 'div#menu1 ul#rmenu2 li.foobar '

marced Jun 2, 2010 03:00 AM

Didn't test it in Safari but you're right (again), thanks! Deleted the image, added the float (funny how it changes the sequence, changed it back), works great now, also in Safari.

Your help is the last 10% I am missing all the time ;) Made a donation!


All times are GMT -6. The time now is 05:08 PM.

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