CSS problem, could anyone help resolve this issue?

82 Posts

goldeagle Reply #11, 18 years, 8 months ago

Dimmy,

I have had a quick look at that config for wayfinder, but it does not match what I am wanting to do. It instead uses plain text and then displays a drop down menu where as I am wanting to display the text over an image and when selected have an alternate image appear to visually show that the link is active...

www.sdcromwell.co.uk shows this as being Home (active) whilst the other links are not active.

I know the other links are not hooked up to anything but this is the effect I am attempting to acheive.

No offence or anything, and many thanks for the help and suggestion

Regards,

Tom.

☆ A M B ☆
24,524 Posts

sottwell Reply #12, 18 years, 8 months ago

// --Config:--
// Insert what you would like to appear between
// the links in the " " below.

$seperator="  |  ";

// --End Config--

$children = $modx->getActiveChildren($id); $menu = ""; $childrenCount = count($children);
if($children==false) {
    return false;
}

for($x=0; $x<$childrenCount; $x++) {

$classname = ($children[$x]['id'] == $modx->documentIdentifier) ? "class='active'" : '';

//If its the last link/document, we don't want the seperator after it. (Thanks Alex)
	if($x==($childrenCount-1)){ 

$menu .= "<a href='[~".$children[$x]['id']."~]' $classname>".$children[$x]['pagetitle']."</a>";

	} else {

$menu .= "<a href='[~".$children[$x]['id']."~]' $classname>".$children[$x]['pagetitle']."</a>$seperator";
	
	}
}

return $menu;

Now the "active" link will have a classname of "active" and you can style it with the background of your choice.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

2,204 Posts

Dimmy Reply #13, 18 years, 8 months ago

Its easy to do that using wayfinder

this site is using images in wayfinder: www.kunstmagneetschool.nl
this one is using images also as background using sliding doors: www.drukwerkconsultant.nl
take al ook at the menu’s at www.cssplay.co.uk if you find any menu that suits your needs I can create a config for you.

Dimmy

follow me on twitter: @dimmy01

24,544 Posts

BobRay Reply #14, 18 years, 8 months ago

Quote from: Dimmy at Jan 19, 2008, 02:48 PM

Its easy to do that using wayfinder

this site is using images in wayfinder: www.kunstmagneetschool.nl

Dimmy

Dimmy, I hate to be the one that’s always pointing out quirks in your css but on that site in IE7, a large brown square shows up over and above each choice when you hover over the initial menu. The strange thing (and probably why you haven’t noticed it) is that it only happens the first time you hover over each choice. Once you’ve hovered over one, it looks as it should.

Bob

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

24,544 Posts

BobRay Reply #15, 18 years, 8 months ago

Quote from: goldeagle at Jan 19, 2008, 02:35 PM

Dimmy,

I have had a quick look at that config for wayfinder, but it does not match what I am wanting to do. It instead uses plain text and then displays a drop down menu where as I am wanting to display the text over an image and when selected have an alternate image appear to visually show that the link is active...

Regards,

Tom.

Tom,

Sometimes it’s tricky to get Wayfinder to show the menu items you want for each menu, but as far as *styling* the menu, it’s pretty much unlimited. Once you get the hang of it, it’s about as easy to style as any other menu. The trick is to get it to show the right menu items, then use "view source" in your browser to see what it’s producing, then alter your css accordingly.

Bob

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

958 Posts

motsmart Reply #16, 18 years, 8 months ago

Quote from: BobRay at Jan 19, 2008, 03:17 PM

Dimmy, I hate to be the one that’s always pointing out quirks in your css but on that site in IE7, a large brown square shows up over and above each choice when you hover over the initial menu. The strange thing (and probably why you haven’t noticed it) is that it only happens the first time you hover over each choice. Once you’ve hovered over one, it looks as it should.

Seems to me that the brown is the backgound color fix and if anyone wants to get rid of it should ommit the background color for the specific menu li/ul (hover) items, you see the brown color because the hover is anonther image and takes time to be downloaded, in case if you point the mouse over the menu and stay for a moment the hover image should be displayed, Hmm, another way is also using the half/hover background image trick (if i remember the name correctly) but it is the way actually the download button in modxcms.com is working.

[img]http://i10.tinypic.com/52c4eir.gif[/img][/td]
[td][Wiki] [Persian support forum]
[SVN] [RTL SVN Branch] [bugs] [FishEye+Crucible] [Learn MODx!] | [My Google Code]
[font=tahoma][برای دسترسی به راهنمای فارسی به [url=http://www.modxcms.ir]

2,204 Posts

Dimmy Reply #17, 18 years, 8 months ago

Quote from: BobRay at Jan 19, 2008, 03:17 PM

Quote from: Dimmy at Jan 19, 2008, 02:48 PM

Its easy to do that using wayfinder

this site is using images in wayfinder: www.kunstmagneetschool.nl

Dimmy

Dimmy, I hate to be the one that’s always pointing out quirks in your css but on that site in IE7, a large brown square shows up over and above each choice when you hover over the initial menu. The strange thing (and probably why you haven’t noticed it) is that it only happens the first time you hover over each choice. Once you’ve hovered over one, it looks as it should.

Bob

Hehe no problem I already noticed this one but just left it this way its ot only ie its in all browsers.
maybe I need a preloader for the images.

follow me on twitter: @dimmy01

82 Posts

goldeagle Reply #18, 18 years, 8 months ago

I have tried a number of ways now, and im afraid to say that perhaps the method is simply beyond me sad

Not to worry as I will have a word with my mate when he gets back home and we would hopefully be able to agree to alter it.

On additional notes, another reason for me to opt for wayfinder is that I have noticed that using the menu systems I have altered and brought over from etomite appear to ignore the "Dont list in menu" options, where as it doesnt in etomite.

Obviously both etomite and modx have come a long way since 2005 and they now, whilst remaining similar in areas will be different and use the API’s differently (not making out to be someone who knows a lot wink

lol).

This being said, how would I then get wayfinder to produce a bog standard horizontal menu as featured both at www.hsnetwork.org and www.hsnetwork.org/modx (the one right at the top towards the right).

I did last time seek council regarding the indentation issues with wayfinder and how to avoid these. My menu setup last time was somewhat different and made use of tables and cells, where as with the redesign of the site it is table less.
The menu is now constructed as follows

<dIv id="left">
  <h1>Main Menu</h1>
    [!Wayfinder etc etc!]
</div>

The first div is for the entire left column. How would I then remove the indents with wayfinder and have it act as it does on www.hsnetwork.org ?

Many thanks for all your ongoing help and support.

Regards,

Tom.

☆ A M B ☆
24,524 Posts

sottwell Reply #19, 18 years, 8 months ago

A simple Wayfinder call with no templates specified will provide a plain unordered list by default. The &level parameter will tell it how many levels to make it and the &startId parameter will tell it which folder (0 for the site root) to start with. It will also automatically include classes for "last" and for "current".

The styling of that list will be totally up to your css file.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

82 Posts

goldeagle Reply #20, 18 years, 8 months ago

Hi sottwell,

I do have the Wayfinder snippet up and running, but as was the case a little while back, its how to remove and get rid of the indents. I am assuming that by simply telling Wayfinder to use an alternate class should suffice, however that would then mean having to create a section reflecting the same properties as the id link properties.

Would I be right in this?

The other one being, how to get Way finder to list the links horizontally, as mentioned before the ul and li had appeared to break the quickedit menu up.