How can you make a wayfinder snippet to adapt the design of your css?

Hi, I’m new in cms development particularly in modx(and in web development hehe). I was asked to migrate a website into modx. My problem is this, How can I make the wayfinder snippet to adapt the existing design of the menu?

*************************************************************
CSS CODE:

div.button_container{
position:absolute;
top:90px;
right:30px;
width:700px;
height:400px;

}

a.header_button:link, a.header_button:visited{
position:absolute;
width:85px;
right:10px;
padding:5px;
color:white;
text-decoration:none;
font-size:14px;
font-weight:bold;
}

a.header_button:hover, a.header_button:active{
color:#999999;
***************************************************
HTML CODE:
<div class="button_container">
<a href="contact.html" class="header_button">Contact Us</a>
<a href="about.html" class="header_button" style="right:125px;">About Us</a>
<a href="forms.html" class="header_button" style="right:240px;">Forms</a>
<a href="blogs.html" class="header_button" style="right:355px;">Blogs</a>
<a href="news.html" class="header_button" style="right:470px;">News</a>
<a href="home.html" class="header_button" style="right:585px; color:#999999;">Home</a>
</div>
******************************************************************************

Thank you guys and more power

Are you making a horizontal menu or a vertical?

The wayfinder uses <li> and <ul> by default to compile it’s lists, so if you’re just making a vertical menu, then you might just be able to get away with defining or editing your <li> and <ul> classes in your css.
That’s all I did to get the result on my site. http://www.themovietimeline.net for the vertical sidebar, but for the horizontal menu’s I had to do something similar to below.

If you’re gonna get fancy with the menu (horizontal), you will probably need to declare the templates to use in the wayfinder callout itself, something like:

[[Wayfinder? &startId=`1` &level=`2` &parentRowTpl=`myparentRow` &outerTpl=`myouter` &innerTpl=`myinner` &rowTpl=`myrow` &outerClass=`menu` &cssTpl=`mycss`]]

and then define each template in a series of chunks. Example, 1 would be called {{myparentRow}} and would look like:

<li id="div.button_container"[+wf.classes+]><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
<!--[if lte IE 6]>
<a class="button_container" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
<table><tr><td>
<![endif]-->
[+wf.wrapper+]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>

I’m not sure if you would need to remake every template, but I think it would depend on what you’re trying to do.

Post the site or the old site and what the menu looked like.

Thanks for the help wirkkalaj, The menu is horizontal. I will try the code that you suggested. If only I can post the website just to give you guys a better view but unfortunately it’s on intranet. I’ll give you feedback on how it will turn out.

You could always set up a free site somewhere that allows 1 MYSQL database.

Just a thought.

People here are very willing to help.

You can also do a "view source" and copy/paste the menu structure so we can see what it’s doing.

Hi guys thanks for the help I’d figured out on what to do with this. I just added a parameter in the wayfinder snippet %rowClass=`menu` and edit the menu class on the css file and it worked! Thanks guys you’ll be reading a lot of me because we will use modx for future projects. MODX the greatest CMS there is! and has the fastest helpful forum community. cheers!!!

[[Wayfinder?startId=`0` &level=`1` %rowClass=`menu`]]

Just so you’re aware that it’s & and not %

noted susan thank’s, i have another problem please see my post: http://modxcms.com/forums/index.php/topic,49345.msg287992/topicseen.html#msg287992