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 » Page & Category Menu Bars »

[SOLVED] Almost there but stuck.. Page menu bar icons on side


  #1  
Old May 31, 2010, 03:32 PM
marced
 
60 posts · Feb 2010
[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:


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)
  #2  
Old May 31, 2010, 05:43 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
add a class="foobar" to each of the li's then you can use it in CSS to reset those LI's
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jun 1, 2010, 05:09 AM
marced
 
60 posts · Feb 2010
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)
  #4  
Old Jun 1, 2010, 07:23 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
do a google search using 'css hover pseudo' and read about it at w3schools.com
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jun 1, 2010, 09:45 AM
marced
 
60 posts · Feb 2010
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.

Last edited by marced; Jun 1, 2010 at 10:00 AM.
  #6  
Old Jun 1, 2010, 12:01 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

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
Add widgetized area to the righthand side of the Page Menu Bar kiratiana Page & Category Menu Bars 1 Apr 17, 2010 12:46 PM
[SOLVED] New Widget Area Above Side Bar + Spaces In Side Bar ChrisPanimation Sidebars & Widgets 18 Jan 15, 2010 09:25 AM
[SOLVED] How to create spacing between page menu bar, side bar, and footer? ssoszka Atahualpa 3 Wordpress theme 4 Nov 29, 2009 10:39 AM
how to shift the text in menu bar without shifting the entire side bar? collymore Page & Category Menu Bars 10 May 9, 2009 06:29 PM


All times are GMT -6. The time now is 11:34 PM.


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