Hi everyone I am very new in joomla and i a little confuse for create the menu.
fisrt a create in the administrator site a menu of type mainmenu with categories and articles. And it is fine.
second I create a template the position in my template is this
<positions>
<position>izquierdo</position>
<position>extranet</position>
<position>menuPrincipal</position>
<position>carrusel</position>
<position>noticias</position>
<position>footer</position>
<position>debug</position>
</positions>
I want my menu in this position <position>menuPrincipal</position>
and this is the body in the index of my template
<body class="cabecera <?php ($portada)? "" : "_otra" ?> ">
<div id="wrapper-top" class="fondo <?php ($portada)? "": "_otra" ?> ">
<div class="row">
<jdoc:include type="modules" name="mod_izquierdo" style="none"/>
<div id="wrapper-header-right" class="column grid_10">
<jdoc:include type="modules" name="mod_extranet" style="none"/>
<div id="Menu_Principal">
<ul class="menu">
<jdoc:include type="modules" name="mod_menuPrincipal" style="none"/>
</ul>
</div>
</div>
</div>
</div>
<div id="wrapper-body" class="row">
<div id="content" class="column grid_16">
<jdoc:include type="component" />
<jdoc:include type="modules" name="mod_noticias" style="none"/>
</div>
<div class="clr"></div>
<jdoc:include type="modules" name="mod_carrusel" style="none"/>
<div class="clr"></div>
</div>
<jdoc:include type="modules" name="mod_pie" style="none"/>
</body>
this is work fine, but I don´t undestand very well
this is my menu
<div id="Menu_Principal">
<ul class="menu">
<jdoc:include type="modules" name="mod_menuPrincipal" style="none"/>
</ul>
</div>
I public my menu like that
Main Menu (Public in mod_menuPrincipal)
if I errase this line <jdoc:include type="modules" name="mod_menuPrincipal" style="none"/> don´t show me the menu, but what is the functionality of "mod_menuPrincipal" I create this module to put inside the menu, but at the end I moved the menu to my index and now this module is empty.
what is the proper performance?
Thanks
First, you need to fix the code in your template. The position for your menu should look like this -
<jdoc:include type="modules" name="menuPrincipal" style="none"/>
Next, in the admin, find Module Manager in the Extensions menu. In the module parameters, there is a parameter that allows you to select the module position you want the module to display in. Select menuPrincipal for the menu module. Last, you want to make sure that the module is assigned to at least one menu item. You probably want it to display on All menu items though, that is an option as well.
The
<jdoc:include type="modules" name="mod_menuPrincipal" style="none"/>
is a syntax to show your particular module in specific position in your template.And mod_menuPrincipal is a module, from where your menu code has been generated and displayed in your template position.
For more detail see this link
Related
I am currently making a template in Joomla using Materialize CSS as the framework. I get stuck with the part where I make a dropdown menu in Joomla. The HTML should go as followed (as explained on the documentation page of Materialize)
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<li>
<a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a>
</li>
My index.php goes as follows:
<!-- Start Navbar -->
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="index.php" class="brand-logo">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
<ul class="right hide-on-med-and-down">
<jdoc:include type="modules" name="position-1" style="none" />
</ul>
<ul id="nav-mobile" class="side-nav">
<li class="material-menu">
<a href="index.php">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
</li>
<jdoc:include type="modules" name="position-1" style="none" />
</ul>
<i class="mdi mdi-menu"></i>
</div><!-- /nav-wrapper container -->
</nav>
<!-- End Navbar -->
The problem is that I use the menu module twice because of the mobile menu. An ID tag can only be used once so the dropdown doesn't work.
Does anyone know how I can fix this?
Its not a good idea to have the same module position duplicated in the template multiple times as it will render the same markup every time.
Instead, the best approach is to create a copy of the menu module and publish it to your mobile menu position.
In Joomla Admin, duplicate the current menu module
Publish the duplicated menu module to a new position e.g. "mobile-nav". All other settings for this duplicated module can be identical to the original (desktop) menu module.
Update your template code to include position for "mobile-nav" where the mobile navigation should be displayed.
Update template code for new module position (just swap out position-1 with mobile-nav):
<ul id="nav-mobile" class="side-nav">
<li class="material-menu">
<a href="index.php">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
</li>
<jdoc:include type="modules" name="mobile-nav" style="none" />
</ul>
I am using CI with Twitter Bootstrap for a basic site:
In my main layout view this is how the main content area is setup:
<div class="container-fluid">
<div class="row-fluid">
<div class="span1"></div>
<div class="span8">
<?php echo $this->load->view($subview); ?>
</div>
<div class="span3" id="sidebar">
<?php echo $this->load->view($this->global_data['sidebarview']); ?>
</div>
</div>
</div>
One sidebar view is this:
<div class="container-fluid" id="sidebar-about">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header"><i class="icon-info-sign"></i> More about us</li>
<li class="active">Who are we?</li>
<li>Why we did it?</li>
<li>What we promise?</li>
<li class="nav-header"><i class="icon-asterisk"></i> Services</li>
<li>Free</li>
<li>Premium</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
Every link in this sidebar i want to update the div with class="span8" from my main layout.
How should i do that? Should i use ajax calls to update the content of the span8 div? or just create more methods in about controller?
I am using joomla 2.5 and I want to modified a <div> tag with ajax and mootools
In my index.php file I have this:
<div id="content" class="column grid_16">
<div id="content" class="column grid_4">
<jdoc:include type="modules" name="menuHardware" style="none"/>
<jdoc:include type="modules" name="menuArq" style="none"/>
</div>
<div id="content" class="column grid_9">
<jdoc:include type="modules" name="mod_arq" style="none"/>
</div>
<jdoc:include type="component" />
<jdoc:include type="modules" name="mod_fabricante" style="none"/>
<jdoc:include type="modules" name="mod_noticias" style="none"/>
</div>
This is my code in <jdoc:include type="modules" name="menuArq" style="none"/>:
<div id="content" class="column grid_4">
<ul class="menu">
<li class="item-129">Descripción</li>
<li class="item-130">Descripción</li>
<li class="item-131">Descripción</li>
<li class="item-132">Descripción</li>
<li class="item-133">Descripción</li>
</ul>
</div>
And my module <jdoc:include type="modules" name="mod_arq" style="none"/> have this:
<div id="myDivTobeChanged">some text for change</div>
So finally my page is:
<div id="content" class="column grid_16">
<div id="content" class="column grid_4">
<ul class="menu">
<li class="item-129">
Descripción
</li>
<li class="item-130">
<li class="item-131">
<li class="item-132">
<li class="item-133">
</ul>
</div>
<div id="content" class="column grid_9">
<div id="myDivTobeChanged">some text for change</div>
</div>
when I click here <li class="item-129">Descripción</li> I want to change this
<div id="myDivTobeChanged">some text for change</div>
This is my script to call ajax:
$$('.item-129').addEvent('click', function(event){
event.stop();
var req= new Request({
method: 'get',
url: '<?php echo JURI::root()?>index.php',
data: {'do': '1'},
onComplete: function(responseText){
$('myDivTobeChanged').set('html', responseText);
}
}).send();
});
But this don´t work only change to description page but not inside the <div> tag.
I see the div in your code has class 'grid_4', but the one you try to modify has 'column grid_9'. If you want to change the contents of a particular div it would be much better to refer to it by id or you will have to fetch an array of elements having particular class via $$('.grid-9').
Another problem is that you mix pure JavaScript with MooTools, that is generally a bad idea. If a MooTools library provide a function to solve your problem, it is better to use it rather than standard JavaScript. For example to change HTML contents of an element, use set('html', someHTML) rather than innerHTML method.
So, try giving your div to be changed an id and changing you line
document.getElementsByClassName('column grid_9').innerHTML= responseText;
to something like this:
document.id('#myDivTobeChanged').set('html', responseText);
This is a complete solution for illustration purposes that works. You can use it for reference:
//javascript
<script type="text/javascript">
window.addEvent('domready', function(){
$$('.item-129').addEvent('click', function(event){
event.stop();
var req = new Request({
method: 'get',
url: 'http://someurl.com/test.php',
data: { 'do' : '1' },
onComplete: function(responseText) {
$('myDivTobeChanged').set('html', responseText);
}
}).send();
});
});
</script>
//sample html
<div id="content" class="column grid_4">
<ul class="menu">
<li class="item-129">Descripción</li>
<li class="item-130">Descripción</li>
<li class="item-131">Descripción</li>
<li class="item-132">Descripción</li>
<li class="item-133">Descripción</li>
</ul>
</div>
<div id="myDivTobeChanged">som text for change</div>
Just make change the address the Request is send to and customize the id of the target HTML div to be changed
I use joomla 2.5, I create a menu to put inside a module.
In the index of my template I have this
<div id="wrapper-header-left" class="column grid_6">
<?php if ($this->countModules('mod_imagenMenu')): ?>
<jdoc:include type="modules" name="mod_imagenMenu" style="none"/>
<?php endif; ?>
<?php if ($this->countModules('mod_izquierdo')): ?>
<jdoc:include type="modules" name="mod_izquierdo" style="none"/>
<?php endif; ?>
</div>
<div id="wrapper-header-right" class="column grid_10">
<?php if ($this->countModules('mod_extranet')): ?>
<jdoc:include type="modules" name="mod_extranet" style="none"/>
<?php endif; ?>
<div id="Menu_Principal">
<ul class="menu">
<?php if ($this->countModules('mod_menuPrincipal')): ?>
<jdoc:include type="modules" name="mod_menuPrincipal" style="none"/>
<?php endif; ?>
</ul>
</div>
</div>
mod_izquierdo inside this module I want to show a menu
In the default.php file of this module I call the menu
<div class="conozca">
<p>Conozca más sobre Arq/p>
<ul>
<!--<li>¿Cómo adquirir Arq?</li>
<li>¿Qué equipos componen Arq?</li> -->
</ul>
</div>
But when I render the page I don't see the menu, if I put this line
<jdoc:include type="modules" name="mod_ar_menu" style="none"/>
in the index I show the menu duplicate.
What is my error, can I put the menu inside the module?
You really shouldn't be calling specific modules in your template like that, it is going to make your life a lot harder if you ever have to make changes. First thing you need to understand is that the index.php in your template should only contain module positions. It should look more like this -
<div id="wrapper-body" class="row">
<jdoc:include type="modules" name="top" style="none"/>
<div class="clr"></div>
<div id="content" class="column grid_16">
<jdoc:include type="modules" name="top-middle" style="none"/>
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom-middle" style="none"/>
</div>
<div class="clr"></div>
<jdoc:include type="modules" name="left-column" style="none"/>
<div class="clr"></div>
<jdoc:include type="modules" name="right-column" style="none"/>
<div class="clr"></div>
<jdoc:include type="modules" name="bottom" style="none"/>
<div class="clr"></div>
</div>
This page is supposed to be used to create the basic structure of the site. If you want to really get fancy, you would make each module position collapsible so that any position not being used does on a particular page does no output any code. That would look something like this -
<?php if ($this->countModules('top')) : ?>
<div id="top"><jdoc:include type="modules" name="top" style="none" /></div>
<?php endif; ?>
Once you have your positions worked out, you can now create instances of modules and assign them to the position you want them to display in as well as the page or pages you want it to display on. In the Extensions Menu, click the Module Manager link. There you will create new modules. In the module parameters there is a selection for which module position you want to display the module in. Below that, you can also select which menu items you want the module to display on. You can select All, None, Exclude Selection, or Only on Selection.
Doing it this way makes it very easy to manage your modules. It allows you to put more than one module in a particular position, then select the order they are in within that position. For example you could put a menu module, login module, and image rotator module all in the left column. It also makes you code a lot cleaner since you are not having to call a module within a module like you are trying to do. That is only going to make your site hard to manage and it will slow down performance.
I'm used to using Joomla 1.5, and am trying to switch to 2.5.
I have 2 modules in the right position, I expect that there would be 2 boxes (which is what I want), one box for each module. But for some reason it's just adding the second module to the first box.
It's not copying the divs (main_top_box, main_mid_box, main_bottom_box) inside the if statement: <?php if($this->countModules('right')) { ?>, instead it's just putting the <jdoc:include type="modules" name="right"/> commands side by side.
You were able to do this with the code I've used in Joomla 1.5. Have they removed this functionality?
Here's what I see:
Here's what I should see:
Joomla Code:
<?php if($this->countModules('right')) { ?>
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<jdoc:include type="modules" name="right"/>
</div>
</div>
</div>
<?php } ?>
Code Output(Source):
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<div class="custom" >
<h3>Services</h3>
<ul>
<li>Family Law</li>
<li>Collaborative Law</li>
<li>Real Estate</li>
<li>Wills</li>
<li>Estate Planning</li>
<li>Estates</li>
</ul>
<p> </p>
</div>
<div class="custom" >
<h3>Test</h3>
<p>Testing the Right Box</p>
</div>
</div>
</div>
</div>
Should Be(Source):
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<h3>Services</h3>
<ul>
<li>Family Law</li>
<li>Collaborative Law</li>
<li>Real Estate</li>
<li>Wills</li>
<li>Estate Planning</li>
<li>Estates</li>
</ul>
</div>
</div>
</div>
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<h3>Test</h3>
<p>Testing the Right Box</p>
</div>
</div>
</div>
You can do this by these to methods
Either Change the order of display the module in the same position in the module manager.
Create separate module position for both the modules and assign them accordingly.