RESOLVED: Styling wrappers HELP

834 Posts

MarkG Reply #1, 18 years, 4 months ago

Hate to ask, but I’m really having a hard time getting my head around styling wrappers and inner tpls etc.

I can get Wayfinder to work, and I can apply some style to the overall menu, I just can’t seem to figure out how to do the internal stuff.

I know this has probably been asked countless times, and there are lots of words written on it, but I’ve read and reread all the posts and documentation i can find, and i still can’t figure it out.

What I need is either some visual demonstration or if someone is kind enough, tell me how to convert the following into a wayfinder menu.

If you can do that then I’ll write up the visual demonstration

Here’s the original html

<div class="menu">
<div class="SMStaticMenu" id="ctl0" style="">
<span class="SMStaticMenu">
<a id="ctl0_0" href="/home" class="">
Home
</a>
</span>
<span class="SMStaticMenu">
<a id="ctl0_1" href="/how_to_get_into_aquaculture/" class="">
How To Get Into Aquaculture
</a>
</span>
<span class="SMStaticMenu">
<a id="ctl0_2" href="/online_directories/" class="">
Online Directories
</a>
</span>
<span class="SMStaticMenu">
<a id="ctl0_3" href="/government_&_law/" class="">
Government & Law
</a>
</span>
<span class="SMStaticMenu">
<a id="ctl0_4" href="/aquaculture_&_the_environment/" class="">
Aquaculture & the environment
</a>
</span>
<span class="SMStaticMenu">
<a id="ctl0_5" href="/investment_centre/" class="">
Investment Centre
</a>
</span>
<span class="SMStaticMenu">
<a id="ctl0_6" href="/sponsors/" class="">
Sponsors
</a>
</span>
</div>
</div>
<div class="submenu">
<div class="SMStaticMenu" id="ctl1">
<span class="SMStaticMenu">
<a id="ctl1_0" href="/how_to_get_into_aquaculture/how_to_make_a_small_fortune_in_aquaculture" class="Selected">
How to make a small Fortune in Aquaculture
</a>
</span>
<span class="SMStaticMenu">
<a id="ctl1_1" href="/how_to_get_into_aquaculture/industry_sector_associations" class="">
Industry Sector Associations
</a>
</span>
</div>
</div>

Here’s what it should look like

http://www.aquaculturecouncilwa.com/how_to_get_into_aquaculture/

Here’s as far as I got with the snippet call.

<div class="menu">[!Wayfinder? &startId=`0`!] </div>

The attached screenshot shows the result, I’m close, but no cigar.

Many, many thanks in advance.

Content Creator and Copywriter

24,544 Posts

BobRay Reply #2, 18 years, 4 months ago

Don’t feel bad. Almost everyone here has wrestled with Wayfinder at one time or another.

The best place to start is here:

http://www.muddydogpaws.com/development/wayfinder/examples.html

Find an example that looks like what you want and copy it exactly. Then you can usually tweak it to do exactly what you want by making minor changes to the Wayfinder call and adapting the .CSS.

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

834 Posts

MarkG Reply #3, 18 years, 4 months ago

Yeh Bob, I looked there already.

But it’s still beyond me.

The "dropline" example looked kinda close so I copied over all the files, followed the instructions as I understood them but I just couldn’t get them to work at all.

There must be something I’m missing or not being told that would make all the difference.

Content Creator and Copywriter

1,024 Posts

Frank Reply #4, 18 years, 4 months ago

as the above speaker, I also approached it the same way except, I dont copy anything as the files are allready in wayfinder:

assets\snippets\wayfinder\examples\cssplay

Check the chunks text (for the chunks) and the templates.html (for the instructions)
Bassicly you just need to create the chunks and alter the links to the css used. In your case dropline.css and dropline_ie.css.

<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/dropline.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/dropline_ie.css" />

So there is really not much to it. I then start altering the images, changing the colors, etc.
Try that and let me know if that is still a problem,

Frank.

1,024 Posts

Frank Reply #5, 18 years, 4 months ago

Quote from: markg at May 23, 2008, 12:12 AM

Hate to ask, but I’m really having a hard time getting my head around styling wrappers and inner tpls etc.
.......
<div class="menu">[!Wayfinder? &startId=`0`!] </div>

Lets also try to figure it out without these example files.
What does your CSS look like? Can you send that? Should be something like this

/* common styling */
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e url(drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

834 Posts

MarkG Reply #6, 18 years, 4 months ago

Frank

It just doesn’t work. This is driving me nuts.

I must be doing something wrong somewhere, but for the life of me I can’t see where.

As far as I can tell I’m following the instructions to the letter, but it just won’t display as it should.

All I get is the basic unordered list menu.

Yes the styling does look like what you posted.

I don’t even know what to tell you in order to sort this out.

Content Creator and Copywriter

1,024 Posts

Frank Reply #7, 18 years, 4 months ago

well why dont you just show the all you got sofar, your call as you show it wíll just make a unstyled menu.
Call should at least be

[!Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`wfParentRow` &outerTpl=`wfOuter` &innerTpl=`wfInner` &rowTpl=`wfRow`]]

All the chunks should be there, you could add

&debug=`1`

to your call see what happens. I you get any output from the debug, make a screenshot and post it or pm and you can email it if you preffer,

frank.

834 Posts

MarkG Reply #8, 18 years, 4 months ago

Frank,

my call is exactly the same as you have listed, and I still get an unstyled menu.

Clearly wayfinder is not connecting to the stylesheet.

I’ve tried putting it in various places but it can’t seem to find it.

Anyway screen shot attached of how far I’ve got, with debug info.

Also attached is all the relevant code I can think of, main template, chunks etc.

Hope you can decipher it.

Content Creator and Copywriter

1,024 Posts

Frank Reply #9, 18 years, 4 months ago

Okay some things I would change:

your first link I would change that to:

<link rel="stylesheet" media="all" type="text/css" href=" assets/snippets/wayfinder/examples/cssplay/dropline.css" />

Your wayfinder call to:

[!Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`wfParentRow` &outerTpl=`wfOuter` &innerTpl=`wfInner` &rowTpl=`wfRow` &debug=`1`!]

you opened the call

[!

.....and ended

]]

Where is the wayfinder call, in the {{acwamenu}} chunk?

I suppose the chunks are created, not just text somewhere in your template.
What does the CSS around that chunk look like, the one around the menu class div?

Edit: the wf outer chunk also uses a menu class, maybe change yours to menu01?
Not sure but I would try that.

834 Posts

MarkG Reply #10, 18 years, 4 months ago

Frank,

yes I tried that line before. I wondered about the extra ] but when I removed it, it doesn’t work at all.

I opened and ended the call that way ’cos that’s exactly what the instructions told me to do.

Adding the ! makes no difference either, nor does putting back the ] with it.

I also tried it without any main template, and I still just get the unstyled menu.

The wayfinder call is in the document all by itself.

The acwamenu chunk is just a hardcoded html chunk of what the final result should look like. There are no calls or anything in it. It’s not related to wayfinder.

I tried taking the whole thing out, just to see if there was any conflict, no change.

Wayfinder just doesn’t seem to be finding the css.

Is there anyway we can hardcode the css to wayfinder, or the call, or the chunks?

Screenshots attached of the list of chunks and how they look in the resources manager.

Content Creator and Copywriter