[TEMPLATE] Andreas 09 - Try to adapt to ModxCms

13 Posts

thernius Reply #1, 20 years, 7 months ago

Hello Everybody,

I try today to adapt the andreas09 template to modx. I’m very beginner with mX, but I’m not afrait, then I start this morning to adapt and the result is encouraging.
You can look at this moment at www.itanea.com I work on it !!!
Say me what you think about...

So, I have a problem. I try to adapt left menu of template with DropMenu. But as you can see, it is not successfull. In original template we have this :

<div id="leftside">
<h1>Included layouts</h1>
<p>
<a class="nav active" href="index.html">3 columns</a><span class="hide"> | </span>
<a class="nav" href="2col.html">2 columns</a><span class="hide"> | </span>

<a class="nav" href="no-img.html">No images</a><span class="hide"> | </span>
<a class="nav" href="#">Example menu</a><span class="hide"> | </span>
<a class="nav sub" href="#">Sub-page 1</a><span class="hide"> | </span>
<a class="nav sub" href="#">Active sub-page</a><span class="hide"> | </span>
<a class="nav sub" href="#">Sub-page 2</a>

</p>

<h1>Included colors</h1>
<img src="img/colors.jpg" height="104" width="125" class="thumbnail" alt="Included colors" />
</div>

with my adaptation I have this :

<div id="leftside">
<h1>Included layouts</h1>
<ul class="topnav">
<li class="#leftside nav active">Accueil</li>
<li><a href="itanea-contact-us.html" title="">Contacter Nous</a></li>
<li><a href="itanea-articles.html" title="">Nos articles</a>
<div class="#leftside nav sub">
<ul>
<li class="last"><a href="itanea-memento-rapide-sur-les-regex-pcre.html" title="Pour retrouver rapidement un masque particulier">Regex pcre</a></li>
</ul>
</div>
</li>
<li class="last"><a href="itanea-login.html" title="">Login</a></li>
</ul>
<p class="hide"><a href="#top">Back to top</a></p>
</div>

The original menu don’t use ’ul’ and ’li’. I try some configuration of DropMenu and I don’t found the good solution. I look to ListMenuX but without success.

If somebody can give me a track to be followed !!!! wink

Thank’s a lot !!!

Thernius

MODX Staff
1,535 Posts

Garry Nutting Reply #2, 20 years, 7 months ago

Hi thernius,

That’s exactly the template I’m using on my site! laugh

The leftmenu was definitely a bit fiddly to get working correctly, though.

I’m using a single level DropMenu for my main navigation (with the ListChildOrSibs snippet underneath to display sub navigations if required - I preferred this to the way that the original Andreas09 template displays the sub navigation).

My snippet call is:

[!DropMenu? &startDoc=0 &levelLimit=`1` &selfAsLink=`1`!]

and, CSS used for styling as follows:

#leftside ul.nav li {
background:#e8e9ea;
border:1px solid #b0b0b0;
color:#606060;
display:block;
margin-top:8px;
padding:5px 4px 4px 10px;
margin-left:-40px;
position:relative;
text-transform:uppercase;
width:160px;
}

#leftside ul.nav li:hover,#leftside ul.nav li.here{
background:#f8f9fa;
border:1px solid #909090;
color:#303030;
text-decoration:none;
}

#leftside ul.nav li a {display:block;}

The CSS will no doubt need a bit of tweaking but hopefully it helps you out a little.

Cheers, Garry

Garry Nutting
Senior Developer
MODX, LLC

Email: [email protected]
Twitter: @garryn
Web: modx.com

13 Posts

thernius Reply #3, 20 years, 7 months ago

Thanks very much Garry. You site shows a good integration of this template.
I do the modification you explain to main and it works. Now, I want to try to show in the left side bar only the subcategory of menu (if exists) and it’s parent category but not linkable.

When I finish to adapt this template I made a zip and I place in this forum.
Thanks to all for your reactivity.

See you later !!

++
Thernius

13 Posts

thernius Reply #4, 20 years, 7 months ago

Ok I integrated the ListChildOrSibs. And I think it is OK!! wink

So , now I want give the same effects to the main menu (horizontal) with various color when you navigate. And I want too that the menu item clicked stay with the colour (in the andreas model menu blue item stay blue when it is clicked).
I try with this but without results :

<div id="mainmenu"> [[DropMenu?levelLimit=`1`&selfAsLink=`true`&hereClass=`#mainmenu a:current`]]

With this in css :

#mainmenu a:current {
    background:#f0f0f0 url(../images/menuhover.jpg) top left repeat-x;
    color:#505050;
    text-decoration:none;
}

Have you an idea ?

Thanks !

283 Posts

OncleBen31 Reply #5, 20 years, 5 months ago

Hello,

I manage to use the Andreas09 template for my site and I have the two following problems :

like thernius : I tried to respect the hierarchy of the left side menu, but I didn’t succeed in with DropMenu. I think the DropMenu Mod 1.2 by ScottyDelicious can help me to succeed in but It didn’t succeed in installing correctly (see http://modxcms.com/forums/index.php/topic,3724.msg32308.html#msg32308)
The second is for a CSS expert (Andreas, do you hear me ?) .On this page http://www.abcdomotique.info/news.html , the text "Commentaires (0) | Voir la suite..." in the first news is not just behind the image like the other news. I don’t know why there is so many blank space :’(. Somebody can help me with this float stuff

Thanks

Follow my contributions to open source on Oncleben31.cc