Making Main Menu navigation hortizonal instead of vertical

rowby · #1 (**permalink**) 06-22-2007, 06:57 PM

First of all, I just purchased this system a day ago and I can say it's the best investment I have made in Joomla. I've been working in Joomla about a year and the tutorial and system has really helped clarify what a template is and how it works.

The tutorial and system is really first class. After I have learned and used it well I will add my review to the Joomla Extension site.

Now for my problem. ANd it may have nothing to do with the template system. I want the mainmenu to be hortizonal instead of vertical. I've set the main menu module to be hortizonal in the admin panel but it still shows up it to vertical on the page.

It seems so basic I can't understand what I am doing wrong.

THanks

Rowby

admin · #2 (**permalink**) 06-22-2007, 07:39 PM

Hello Rowby,

Thank you there will more videos coming in the future.

As for your menu issue I know I have posted it on the forum before if you do a search it should come up.

See this article to add the changes need.
by default Joomla 1.12.x horizontal menus are only one level in Horizontal mode.
If you need deeper menus you will have to use a third party extension.

Media 65 Article:
http://www.m65.net/articles-joomla!-...b-menu-50.html

Joomla Menu Extensions:
Joomla! Extensions Directory - Menu Systems
SWmenu is not bad.

Cheers,
Brian Diaz
Media 65

rowby · #3 (**permalink**) 06-25-2007, 04:38 PM

Hi

Here is a link to the problem page:

JFK Airport - Home

The position code for the module (mainmenu) is if (mosCountModules('legals')>0) mosLoadModules('legals',1);

As you can see it is vertical instead of hortizonal. Is my position code wrong? I set the mainmenu module to be hortizonal.

????

THanks
Rowby

admin · #4 (**permalink**) 06-25-2007, 06:07 PM

Hello rowby,

1. remove this when your done making the Template and you go live with it.
this code is so you can see the css in DW.


<link href="css/template_css.css" rel="stylesheet" type="text/css" media="all" />

2.
You have not applied the css code as per last post.
see this article.

/* Add here Custom Modules */

/* End Custom Modules */

http://www.m65.net/articles-joomla!-...b-menu-50.html

3. Have not added a module wrapper to the module.
like a Div Wrapper : -2
http://www.m65.net/article-pages-pro...-1-39.html#1_1

Module Output Code:
<div>
<h3>Title</h3>
Module Data
</div>

because you have a 100% table as a wrapper and tables have rows.

let me know.

Cheers,
Brian Diaz
Media 65

rowby · #5 (**permalink**) 06-25-2007, 07:54 PM

I started from scratch.

It's as if the template is not seeing the stylesheet.

Revised version: JFK Airport - Home

Here's my index.php code.

<?php
/**
* @Template Name:
* @Version: 1.12
* @Package: A Joomla 1.0.X template
* @Copyright: (C) 2007 by Brian Diaz Media 65
* @License: http://www.m65.net/
**/

defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
$iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php if ($my->id) {initEditor();}?>
<link href="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css";?>" rel="stylesheet" type="text/css" media="all" />
<link rel="shortcut icon" href="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/favicon.ico"; ?>" />

</head>
<body>
<table width="1020" border="0" align="center" cellpadding="0">
<tr>
<td><img src="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/"; ?>header-jfk-new.jpg" width="1024" height="149" /></td>
</tr>
</table>
<table width="1020" border="0" align="center" cellpadding="0">
<tr>
<td><div id=”tablist”>
<?php if (mosCountModules('legals')>0) mosLoadModules('legals',-2); ?>
</div></td>
</tr>
</table>
<p> </p>
</body>
</html>

admin · #6 (**permalink**) 06-25-2007, 08:04 PM

In Dw or on your site?

This code links to the style locally
<link href="css/template_css.css" rel="stylesheet" type="text/css" media="all" />

Because DW can't read the php code path that Joomla uses.
it needs to be there when your editing the template.
you can link to it via DW Css panel > link to css.

Just add your layout as you like then the Module positions.
the one with the menu make user that you give it a wrapper setting of div -2
then as per the article add the css code to the style sheet.
then add the setting to the module via the Joomla back-end.

After you have it set up. edit the style sheet to get the colors as you like.
If you are having an issue with DW and CSS use this editor.
Topstyle
TopStyle for Windows - HTML, xHTML, CSS editing in a single program

they have a trail
http://www.newsgator.com/download/products/topstyle.exe
and a free version.

Let me know,
Brian

rowby · #7 (**permalink**) 06-25-2007, 08:23 PM

Hee hee

Now it seems to be seeing the stylesheet on the live site:

BUt the menu is still not hortizonal. Here's a link to a screen capture of the module

http://jfkairport-jfk.com/mainmenuuu.pdf

And here is a copy and paste of the live site style sheet:

/* Design by Brian Diaz of Media 65 @ http://www.m65.net All Rights Reserved */

/* ####################### GENERAL SETTINGS ############################ */
html.body{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #666;
margin-top: 0px;
}

body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #666;
margin-top: 0px;
}

/* Global Formatting */
h1 {font-size:16px;line-height: 1em;font-weight: 900;}
h2 {font-size:15px;line-height: 1em;font-weight: 900;}
h3 {font-size:14px;line-height: 1em;font-weight: 900;}
h4 {font-size:13px;line-height: 1em;font-weight: 900;}
h5 {font-size:12px;line-height: 1em;font-weight: 900;}
h6 {font-size:11px;line-height: 1em;font-weight: 900;}
td{font-size: 12px;}
th{font-size: 12px;}
a {color: #CC6600;}
a:hover {color: #659FDE;}
a:visited {color: #CC6600;}
a.image, a.image:hover {border:0;}
li{ list-style: square;}
ul { list-style: square;}

/* ####################### END GENERAL SETTINGS ############################ */

/* ###################### LAYOUT SETTINGS ############################## */
/* Add here Div Wrappers of table formatting to layouts custom stuff*/
/* ###################### LAYOUT SETTINGS ############################## */

/*##################### NAVIGATION SECTION #####################*/
/* Pathway Breadcrumbs */
.pathway {font-size: 11px;color:#333;}
a.pathway:link {color:#659FDE;}
a.pathway:visited {color:#659FDE;}
a.pathway:active {color:#659FDE;}
a.pathway:hover {color:#659FDE;text-decoration:underline;}

/* Mainlevel menu */
.mainlevel {height: 18px;}

a.mainlevel {display: block;
background: #2F3E57;
color: #FFFFFF;
padding: 5px 0 5px 19px;
margin: 0 0 1px 0;
text-decoration: none;
}

a.mainlevel:hover {
color: #FFFFFF;
background: #A0A0A0;
}
/* End Mainlevel menu */

/* Sub Menu */
.sublevel{height: 18px;}

a.sublevel{ display: block;
background: #A0A0A0;
color: #FFFFFF;
padding: 5px 0 5px 19px;
margin: 0 0 1px 0;
text-decoration: none;
}

a.sublevel:hover {
display: block;
color: #FFFFFF;
background: #822C0F;}
/* End Sub Menu */

/* Add Custom Menus */

/* Add Custom Menus */

/*##################### NAVIGATION SECTION #####################*/

/* ##################### STANDARD MODULE TABLE #################*/
table.moduletable {
width: 100%;
padding: 0px;
margin: 0px;
}

table.moduletable th {
background: #2F3E57;
height: 18px;
color: #FFFFFF;
}

table.moduletable td {height: 18px;}

/* Add here Custom Modules */

/* End Custom Modules */

/* ##################### END STANDARD MODULE TABLE #################*/

/* ############# CONTENT - SECTIONS & CATEGORIES ###########################*/
.contentheading {
font-size: 16px;
width: 100%;
font-weight: bold;
color: #659FDE;
}

/* content title and links */
.contentpagetitle {background-color : White; }
a.contentpagetitle,a.contentpagetitle:link, a.contentpagetitle:visited
{text-decoration: none;font-weight: normal; color: #FF6600;border-bottom: 0px;}
a.contentpagetitle:hover {color: #000;border-bottom: 0px dashed #CCCCCC;text-decoration: none;}

/* top box like a category description */
.contentdescription {background-color : White;}

/* Main Body Text */
.contentpane {background: White;}
.contentpaneopen {background-color: White;}
/* Main Body Text */

/* article rating */
.content_rating {font-weight: normal;font-size:.8em;}
.content_vote {font-weight: normal;font-size: .8em;}

/* icons */
.buttonheading{font-size: 12px;}
.pop-ups {float: right;}
a.pop-up {border-bottom: 0;}

/* Dates */
.createdate {color: #666; font-size:.8em; font-weight: normal;}
.modifydate {font-size: 10px;color: #666;text-decoration: none;font-weight: normal;}
.newsfeeddate {font-size: 10px;color: #FF6600;font-weight: normal;}
/* Dates */

/* Writen by Authors name */
.small {color: #666;}

/* Page navigation links "<<< 1 of 10 next >>>" */
.pagenav{font-size: 14px; color: #CC6600; }
.pagebar{font-size: 12px;}
.pagenav_prev{font-size: 14px; color: #FF6600; }
.pagenav_next{font-size: 14px; color: #FF6600; }
a.pagenav {color: #CC6600; border-bottom: 0;}
a.pagenav:hover {color: #659FDE; border-bottom: 0;}
.pagenavcounter{ height: 15px; }
.back_button{font-size: 12px; height: 15px; }

/* Read more link */
.readon{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px; color:#FF6600;font-weight: bold;
}

/* Article index {mospagebreak} */
table.contenttoc {
padding: 0px;
margin: 2px;
font-size: 12px;
}

table.contenttoc th {
background: #2F3E57;
color: White;
}

table.contenttoc td {padding: 2px;}

/* Links article index */
a.toclink:hover, a.toclink:visited, a.toclink:link { height: 18px; }
/* End Article index */

/* component heading */
.componentheading {
font-size: 1.5em;
font-weight: bold;
color: #659FDE;
text-align:left;
margin-top: 1.5em;
background-color: White;
}

/* Sectiontable Table types listings Faqs's, weblink etc..*/
.sectiontableheader {
background-color : #D3D3D3;
color : #333;
font-weight : bold;
border-collapse: collapse;
font-size: 11px;
}

/* Table odd and Even Rows */
.sectiontableentry1 {background-color : #FFFFFF;font-size: 11px;}
.sectiontableentry2 {background-color : #EBEBEB;font-size: 11px;}
.sectiontablefooter{ height: 18px; }
/* End Sectiontable */

/* Category */
.category {color:#333;}
a.category:link, a.category:visited, a.category:hover { height: 15px; }
/* End category */

/* blogsection */
.blog {background-color : #FFFFFF;}
.blogsection{ height: 18px; }
.blog_more{ height: 18px; clear: both;}
.blog_heading { height: 18px; }
/* space from bottom of article */
.article_seperator{background-color : #FFFFFF;}
/* End blogsection */

/* Search Form Module*/
.search {height: 18px;}
/* results if not search google */
.searchintro{height: 18px;}
/*Search Form keyword highlight*/
.highlight {
border: 1px dashed #010101;
background: #DDEEFF;
padding: 0px 2px 0px 2px;}
/* End Search Form */

/* wrapper title */
.wrapper{background-color : #FFFFFF;}
/* ############# END CONTENT - SECTIONS & CATEGORIES ###########################*/

/* ##################### FORM SECTION #####################*/
form{font-size: 12px}
input {
font-family: Arial, Verdana, Helvetica, sans-serif;
background-color:#FFFFFF; font-size: 13px; color: #333;
}
.inputbox {background: White;}
.text_area {background: White;}
/* Pull down menu */
.selectbox {width: 100%;}
/* Submit Button */
.button {border: 1px solid #999; background: #333;color: White;}

/* Contact Email Form */
.contact_email {margin: 0px;padding: 5px;}
/* ##################### END FORM SECTION ##################### */

/* ###################### TABBED EDITING ###################### */
/*When user login to edit or sumbit articles*/
/* for modifying {moscode} output. Don't set the colour! */
.moscode {
background-color: #f0f0f0;
}

.code {
font-family: courier, serif;
font-size: 1.2em;
padding: 2px;
background-color: #f0f0f0;
color: blue;
border: 1px solid #d5d5d5;
margin: 0px;
width: 90%;
}

/* Text passed with mosmsg url parameter */
.message {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 1em;
color : #666;
text-align: center;
}

/* Styles for dhtml tabbed-pages */
.ontab {
background-color: #666666;
border-left: outset 1px #666;
border-right: outset 1px #333;
border-top: outset 1px #666;
border-bottom: solid 1px #333;
text-align: center;
cursor: default;
font-weight: bold;
color: #FFFFFF;
padding: .2em;
}

.offtab {
background-color : #cccccc;
border-left: outset 1px #666;
border-right: outset 1px #333;
border-top: outset 1px #666;
border-bottom: solid 1px #333;
text-align: center;
cursor: default;
font-weight: normal;
padding: .2em;
}

.edit-tabs {
padding: 1em;
background: none;
}

.tabpadding {padding:1px;}

.tabheading {
background-color: #FF6600;
text-align: left;
}

.pagetext {
visibility: hidden;
display: none;
}

/*Body of the form*/
.adminform{background-color : #FFFFFF;}
/* ###################### End TABBED EDITING ###################### */

/* Add Custom Menus Without Round conners */
/*Eric Meyer's based CSS tab*/
#tablist{
padding: 4px;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#tablist li{
list-style: none;
display: inline;
margin: 0px;
}
#tablist li a{
color: #FFFFFF;
padding: 4px;
margin: 0px;
background: #CC6600;
border-right:solid #FFF;
}
#tablist li a:link, #tablist li a:visited{
color: White;
background: #CC6600;
}
#tablist li a:hover{
color: #FFF;
background: #659FDE;
}
#tablist li a.current{
background: #646464;
}
/* End Add Custom Menus */

P.S. I will check out that stylesheet program you mentioned...

admin · #8 (**permalink**) 06-25-2007, 09:21 PM

rowby email the template via the support ticket.
http://www.m65.net/publicsupport/ind...=&mod_id=4&q=2

admin · #9 (**permalink**) 06-25-2007, 10:04 PM

It works on my end. I have not gotten your email.
But the thing I can see is that did not select "all" in your PDF screen shoot.

is my attachments

rowby · #10 (**permalink**) 06-28-2007, 08:49 PM

I fixed the navigation (hortizonal) by using a nice little Joomla menu program called LxMenu.

Getting more and more the hang of the Media 65 template system. Will finally take time to review the tuturil and read the knowledge base.

Already working on my second template for another client. Great to be able to create exactly what I want instead of having to rework an existing template to fit my layout needs.

Rowby

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode