Horizontal menu not horizontal and other menu problems

8/8/2011 10:08:35 AM

john_scvo

Total Posts 133

View Posts

J

Horizontal menu not horizontal and other menu problems

Latest Artisteer 3 export using latest mojo code from HG in VC2010.

Now that I am adding pages to the site I have this immediate issue

The horizontal menu (top level only) is not displaying horizontally. It is vertical roughly centered on the page (the position makes sense as it is meant to be centered on the page). The hmenu part from my theme's layout.master looks like this.

This is identical to the menu wrappers in my Art exported index.html.

The css is a bit long to post here but I have verified that the style.css from my Art export is identical to the one in my new skin. The export displays just fine. So I am guessing that there is something I need to do to get Mojo to use my css for the hmenu.

Here's a snippet from the page source running from VS

<li>

<span class="l"></span><span class="r"></span><span class="t">about us</span></a>

</li>

Clues?

Have multiple problems with the settings for ChildPageSiteMaps but I will leave them till I get the main horizontal parent menu sorted out.

I thought this would be easy as I have built a number of sites with Artisteer generated designs integrated into another old CMS so I know the Artisteer side of things OK - I guess I am missing something about the way Mojo works with CSS. I have checked the CSS overrides file, searched in here and read all the docs and see nothing there that would be relevant.

Cheers

John - beginning to tear my hair out ;)

8/8/2011 11:59:42 AM

Joe Davis

Total Posts 2253

View Posts

Re: Horizontal menu not horizontal and other menu problems

Hi John,

Do you have this in your theme.skin file? If not, you should add it.

        <portal:mojoMenu runat="server" SkinID="SiteMenu"
           RenderContainerCssClass="true"
           RenderImages="false"
           UseMenuTooltipForCustomCss="true"
           RenderCustomClassOnLi="true"
           RenderCustomClassOnAnchor="false"
           RenderLiSelectedCss="false"
           RenderAnchorSelectedCss="true"
           UlCssClass="art-hmenu"
           LiCssClassWithChildren=""
           LiCssClassWithoutChildren=""
           LiSelectedCssClassWithChildren=""
           LiSelectedCssClassWithoutChildren=""
           LiChildSelectedCssClass=""
           LiParentSelectedCssClass=""
           AnchorCssClass=""
           AnchorSelectedCssClassWithChildren="active"
           AnchorSelectedCssClassWithoutChildren="active"
           AnchorChildSelectedCssClass=""
           AnchorParentSelectedCssClass=""
           InnerSpanMode="Artisteer"

       />

HTH,
Joe D.

8/9/2011 5:44:49 AM

john_scvo

Total Posts 133

View Posts

J

Re: Horizontal menu not horizontal and other menu problems

Thanks for getting back to me Joe. Yes that section is there in my custom skin's theme.skin - it is just a copy of the one from the latest astisteer-30verticalmenu1 which I think is th eone I should be using.

Any other ideas?

John

8/9/2011 9:05:34 AM

Joe Davis

Total Posts 2253

View Posts

Re: Horizontal menu not horizontal and other menu problems

Hi John,

If you can post a link to your site, I might be able to help you more. If not, you'll need to use the FireBug add-on for FireFox to look at the CSS that is being applied to the menu.

Thanks,
Joe D.

8/9/2011 11:19:32 AM

john_scvo

Total Posts 133

View Posts

J

Re: Horizontal menu not horizontal and other menu problems

Thanks Joe - at the moment I am behind firewalls and do not want to post it to our servers yet. However I have been up to my ears in it all day and have made a small amount of progress. I have been using firebug and dev tools in chrome which I prefer and have sussed at least one of the issues. The menu is now showing horizontally but offset 50% to the right.

I now have 3 skins based on my design - and I did a full refresh from HG this morning and built fresh from the latest copies of of the ..30verticalmenu1 skin. Didn't resolve anything but I wasn't expecting it as I had refreshed the source recently.

Its the end of the day here now - if I do not make a breakthrough in the morning - I'll document what my problem(s) are tomorrow. (expect a very long post!).

Cheers

John

8/9/2011 11:24:13 AM

Joe Audette

Total Posts 18439

View Posts

Re: Horizontal menu not horizontal and other menu problems

Hi John,

If you email me your .artx file I might have time to look at it this afternoon. I'm fairly certain I could solve it fairly quickly and send you back a skin as a .zip.

joe dot audette at g mail dotcom

Best,

Joe

8/9/2011 12:53:23 PM

Joe Audette

Total Posts 18439

View Posts

Re: Horizontal menu not horizontal and other menu problems

Hi John,

I just emailed you back the skin.

The things I had to do are

edit the layout.master so the skeleton markup matches what you see in index.html. I didn't even use Firebug I just viewed the source to compare to the layout.master. Firebug is only needed really when some javascript is changing the markup after the page loads.
the main thing I think that affected the menu was that this design has an extra div surrounding the menu with <div class="art-nav-center"> but the menu is configured by default to render a div with <div class="art-nav-outer">, so what I did was put the <div class="art-nav-outer"> directly in layout.master surrounding the menu and then I changed a setting in theme.skin from this:
<portal:mojoMenu runat="server" SkinID="SiteMenu"
   RenderContainerCssClass="true"
   ContainerCssClass="art-nav-outer"
   RenderImages="false"
   UseMenuTooltipForCustomCss="true"
   RenderCustomClassOnLi="true"
   RenderCustomClassOnAnchor="false"
   RenderLiSelectedCss="false"
   RenderAnchorSelectedCss="true"
   UlCssClass="art-hmenu"
   LiCssClassWithChildren=""
   LiCssClassWithoutChildren=""
   LiSelectedCssClassWithChildren=""
   LiSelectedCssClassWithoutChildren=""
   LiChildSelectedCssClass=""
   LiParentSelectedCssClass=""
   AnchorCssClass=""
   AnchorSelectedCssClassWithChildren="active"
   AnchorSelectedCssClassWithoutChildren="active"
   AnchorChildSelectedCssClass=""
   AnchorParentSelectedCssClass=""
   InnerSpanMode="Artisteer"

/>

to this
<portal:mojoMenu runat="server" SkinID="SiteMenu"
   RenderContainerCssClass="true"
   ContainerCssClass="art-nav-center"
   RenderImages="false"
   UseMenuTooltipForCustomCss="true"
   RenderCustomClassOnLi="true"
   RenderCustomClassOnAnchor="false"
   RenderLiSelectedCss="false"
   RenderAnchorSelectedCss="true"
   UlCssClass="art-hmenu"
   LiCssClassWithChildren=""
   LiCssClassWithoutChildren=""
   LiSelectedCssClassWithChildren=""
   LiSelectedCssClassWithoutChildren=""
   LiChildSelectedCssClass=""
   LiParentSelectedCssClass=""
   AnchorCssClass=""
   AnchorSelectedCssClassWithChildren="active"
   AnchorSelectedCssClassWithoutChildren="active"
   AnchorChildSelectedCssClass=""
   AnchorParentSelectedCssClass=""
   InnerSpanMode="Artisteer"

/>

Other than that I commented some stuff out in style-artisteeroverrides.css and made one small change in stylemojo.css because the top nav links were white on a white background, I just copied the color from one of the heading to make them green.

Of course all the stuff in the middle of the page is not really part of the design but part of the content so those parts don't really go into the skin even though it looks like you've put real example content in your design. You would need to create that using mojoPortal features like the html feature.

Hope that helps,

Joe

8/9/2011 1:05:13 PM

Joe Audette

Total Posts 18439

View Posts

Re: Horizontal menu not horizontal and other menu problems

Update, after I mailed you the skin I noticed there was still a problem in the menu and this was caused by the menu javascript. I was able to solve it by adding this in style-artisteeroverrides.css

.art-nav-center {float: right!important; }

all I did was notice that it had style="float:left;" (using Firebug) which was added by the javascript but the style.css said it should be float right so I just made the css setting more important to overcome the javascript.

Hope that helps,

Joe

8/10/2011 6:15:38 AM

john_scvo

Total Posts 133

View Posts

J

Re: Horizontal menu not horizontal and other menu problems

Great - many thanks Joe - I had realised that is was the art-nav-center that was causing the problem but I didn't understand how to fix it. Been offline all morning due to network maintenance from my cable service will get on and study the changes and get this installed. Yes I know that artx has loads of stuff in it that I will need to recreate as content - it was all just in there to show the client before the design was signed off.

Very grateful for the help

John

8/10/2011 8:15:46 AM

john_scvo

Total Posts 133

View Posts

J

Re: Horizontal menu not horizontal and other menu problems

Got all that set now as my skin and it's just fine - need to study some about .skin files.

Thanks again

j

PS just in case anyone else is reading this for ideas you do need a space between the value and !important in css rules ;)

8/17/2011 7:54:11 PM

Totem

Total Posts 51

View Posts

Re: Horizontal menu not horizontal and other menu problems

Hi, I´m having a similar problem and tried to solve it but without success.

Here´s my menu:

And here´s what I see in view source:

</div>

</div>
</div>
</div>
</div>

Thanks for your help.

8/18/2011 7:08:32 AM

Joe Audette

Total Posts 18439

View Posts

Re: Horizontal menu not horizontal and other menu problems

try removing <div class="art-nav-inner" from layout.master and specify it in theme.skin as the container class for your menu like this in theme.skin:

<portal:mojoMenu runat="server" SkinID="SiteMenu"
   RenderContainerCssClass="true"
   ContainerCssClass="art-nav-inner"
   RenderImages="false"
   UseMenuTooltipForCustomCss="true"
   RenderCustomClassOnLi="true"
   RenderCustomClassOnAnchor="false"
   RenderLiSelectedCss="false"
   RenderAnchorSelectedCss="true"
   UlCssClass="art-hmenu"
   LiCssClassWithChildren=""
   LiCssClassWithoutChildren=""
   LiSelectedCssClassWithChildren=""
   LiSelectedCssClassWithoutChildren=""
   LiChildSelectedCssClass=""
   LiParentSelectedCssClass=""
   AnchorCssClass=""
   AnchorSelectedCssClassWithChildren="active"
   AnchorSelectedCssClassWithoutChildren="active"
   AnchorChildSelectedCssClass=""
   AnchorParentSelectedCssClass=""
   InnerSpanMode="Artisteer"

/>

this is assuming that is the correct structure as seen in the index.html exported by Artisteer.

Hope that helps,

Joe

8/18/2011 1:12:37 PM

Totem

Total Posts 51

View Posts

Re: Horizontal menu not horizontal and other menu problems

Hi Joe and thanks for the reply.

I build the skin again based on artisteer-24verticalmenu1 from mojoportal-2-3-6-6 and it works whithout having to change anything, but now the menu is not centered as in index.html. It´s rather on the far left.

I tried .art-nav-inner {float: right !important; } or .art-nav-outer {float: right !important; } without success.

Here´s the markup:

</div>

Thanks

8/18/2011 3:38:32 PM

Totem

Total Posts 51

View Posts

Re: Horizontal menu not horizontal and other menu problems

It works!

Thanks a lot Joe -;)