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
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
  #7  
Old Jun 1, 2010, 02:42 PM
marced
 
60 posts · Feb 2010
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...

Last edited by marced; Jun 1, 2010 at 02:44 PM.
  #8  
Old Jun 1, 2010, 02:58 PM
marced
 
60 posts · Feb 2010
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?
  #9  
Old Jun 1, 2010, 03:33 PM
marced
 
60 posts · Feb 2010
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!
  #10  
Old Jun 1, 2010, 03:57 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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 '
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Jun 2, 2010, 03:00 AM
marced
 
60 posts · Feb 2010
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!

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 08:30 AM.


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