Author Topic: Small problem with portal menu block and expand gif (Read 5870 times)

boo2 · « **on:** September 08, 2012, 03:40:34 AM »

The popup that extends links from a menu item is too far away, by the time your mouse gets over it it changes and it becomes frustrating to try to click a link on it, is there a way to being that popup white box closer to the menu so you can actually grab the link? Hope I am explaining it right. Also in certain areas the white box is transparent, as you can see items from other areas bleed through it.

And one other item, is there a way to make the expand gif move left more so that it fits the design of my site better?

I have attached a print screen of both issues, I have not found a way to fix either problem.

Chen Zhen · « **Reply #1 on:** September 08, 2012, 01:47:22 PM »

boo2,

Quote

The popup that extends links from a menu item is too far away, by the time your mouse gets over it it changes and it becomes frustrating to try to click a link on it, is there a way to being that popup white box closer to the menu so you can actually grab the link? Hope I am explaining it right. Also in certain areas the white box is transparent, as you can see items from other areas bleed through it.

Imo on your forum there is some javascript & a <div> inserted between the </head> and <body> tags that needs to be moved (uncle jim code??). For js code you can add it in the head or body.. might as well make it body therefore move those after the <body> tag. This is not what is causing the issue although I thought I would mention it as it may cause others.

For the forum menu it is actually a drop down that uses the portal style sheet for special positioning mostly because it's designed to show it horizontally instead of underneath. Most likely the reason it is so far to the right is because it positions that box right of the longest text which in your case is Features and Options. You can adjust the positioning percentage to not be so far to the right in the portal css file but for it to look proper it should still appear right of that longest text (You can also shorten the text to maybe just Features or perhaps Options which will stop it from going so far to the right).

File: /Themes/default/css/portal.css
find:

Code: [Select]

#sp_menu li ul
{
	position: absolute;
	top: 0;
	left: 75%;
	width: 200px;
	background: #FFFFFF;
	border: 1px solid #AAA;
}

You can edit the above for width percentage & make it a lower number to move the box to the left.
You have a light/off-white background for your theme which the background setting you see in the code above is probably the same or similar so you can make it more aesthetic by changing the background color to something that suits your taste. The border background color for the box can also be adjusted above.
Make sure to use hex color codes.

Hex color code chart: http://html-color-codes.com/

Quote

And one other item, is there a way to make the expand gif move left more so that it fits the design of my site better?

The 2 css elements for the position of that collapse icon are sp_right and sp_fullwidth from that same css file. Although altering them will affect other places where those classes are used for Simple Portal. Imo edit the portal template file directly & add style attributes directly to it to adjust the positioning of that image to suit your taste.

File: /Themes/default/Portal.template.php

find:

Code: [Select]

		echo '
	<div class="sp_right sp_fullwidth">';

Replace with:

Code: [Select]

		echo '
	<div class="sp_right sp_fullwidth" style="position: absolute; right: 10%;">';

Adjust the right percentage value to suit your taste. The higher the number the more it will push to the left. To make it go right try using a negative value.. px can also be used instead of percentage.
You also have the option of disabling side collapsing altogether in Simple Portal's Admin settings.

Note: Your browser cache enables it to load pages quicker because it stores style attributes without having to reload them again until the cache is cleared. In some cases to view your style attribute edits you may have to clear your browser cache.

boo2 · « **Reply #2 on:** September 08, 2012, 05:00:29 PM »

Than you so much for your help Underdog.

I changed 75% to 45% and that brought it over to the left more as well as changing features and options to just feature options. So that's great now, but it can be very frustrating for users because you still can't grab a link from it easily unless you mouse is place toward the right of the drop down menu.

If you don't have your mouse exactly in the right place over that drop down and you try moving from one selection to the next on that drop down, it will switch to the next drop down on the main menu and show that drop down instead and the very same thing will happen on that one if your mouse isn't placed just right.

I should be able to move my mouse to the right anywhere over that drop down and have it stay there until I have made a selection from it, but try running your mouse up and down the choices if you mouse isn't placed just so and you will lose that drop down.

Chen Zhen · « **Reply #3 on:** September 08, 2012, 06:57:13 PM »

I think I see what you are saying but let me clarify.
If you hover over the links themselves then the drop menu works fine but if the mouse cursor is on the bullet (which people may have a tendency to do) & one tries to move down the menu it skips to the next selection of the parent menu.

Is this what you're referring to?

boo2 · « **Reply #4 on:** September 08, 2012, 07:59:35 PM »

Yes exactly what I am saying but you said it much better. But not just on the bullet, you really have to go to the end of the link before you can travel down the links on that drop down.

boo2 · « **Reply #5 on:** September 09, 2012, 01:53:37 PM »

Hi underdog, have had some frustrating hours with this drop down but did find a solution. I looked at the ul li thing in the main smf css file and found z-index: 90; in that section, didn't know what it meant but it wasn't in portal.css, so I tried it and I thrilled to see it worked. Now the dang drop down doesn't disappear when you try to grab a link on it. Hope it doesn't affect anything else but I will probably soon find out.

So now it looks like this:

Code: [Select]

#sp_menu li ul
{
	position: absolute;
	z-index: 90;
	top: 0;
	left: 45%;
	width: 200px;
	background: #C8D5DA;
	border: 1px solid #AAA;
}

Chen Zhen · « **Reply #6 on:** September 09, 2012, 02:07:28 PM »

boo2,
Glad to hear you found a solution & z-index is for overlap. No it will not affect anything else as that class set of style attributes is only for the portal menu.

boo2 · « **Reply #7 on:** October 07, 2012, 09:33:05 PM »

Quote from: Underdog on September 09, 2012, 02:07:28 PM

boo2,
Glad to hear you found a solution & z-index is for overlap. No it will not affect anything else as that class set of style attributes is only for the portal menu.

I thought I answered this.. Yes I am glad that so far it has affected nothing else, thanks Underdog.

Simple Portal Archived Forum

User Info

Who's Online

Shoutbox

Team Blog

Recent Posts

Author Topic: Small problem with portal menu block and expand gif (Read 5870 times)

boo2

Small problem with portal menu block and expand gif

Chen Zhen

Re: Small problem with portal menu block and expand gif

boo2

Re: Small problem with portal menu block and expand gif

Chen Zhen

Re: Small problem with portal menu block and expand gif

boo2

Re: Small problem with portal menu block and expand gif

boo2

Re: Small problem with portal menu block and expand gif

Chen Zhen

Re: Small problem with portal menu block and expand gif

boo2

Re: Small problem with portal menu block and expand gif