mod_search in menu, where ?

hi

i'm trying to find a good spot for the joomla search mod and i decided that the main menu is a good spot since i dont use the right half of it.. now the problem is that i cant find any mod for the main menu nor can i find any position to put it, ive looked everywhere..

any one have any idea how i can put the search box on the right side of the main menu?

Could You provide an ID of an element, in which You would like to place `joomla search mod` or a screenshot with highlighted exact spot?

Could You provide an ID of an element, in which You would like to place `joomla search mod` or a screenshot with highlighted exact spot?

Hi!
on the grey menu where ive put a empty "search box" below advert, thats exactly where I want it, thanks

You need to edit few files to do it correctly:

/templates/gk_gamenews/templateDetails.xml
after line 86 add:

Code: Select all

<position>searchpos</position>

so it should look like:

Code: Select all

            
            <position>topnav</position>
            <position>footer_nav</position>
            <position>topmenu</position>
            <position>searchpos</position>
            
            <!-- STANDARD Module Positions -->
            <position>sidebar</position>
            <position>mainbody</position>

Next edit the file:
/templates/gk_gamenews/layouts/default.php
search for line number 82 and add there:

Code: Select all

         
<?php if($this->API->modules('searchpos')) : ?>
<div id="searchpos">
   <jdoc:include type="modules" name="searchpos" style="" />
</div>
<?php endif; ?>


so it should look like:

Code: Select all

          <div id="gkMainMenu">
             <?php
                $this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));
                 $this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
             ?> 
             <?php if($this->API->modules('searchpos')) : ?>
            <div id="searchpos">
               <jdoc:include type="modules" name="searchpos" style="" />
            </div>
            <?php endif; ?>
          </div>


Now You have new position named searchpos, but still to finish it all, You need to edit few styles:
/templates/gk_gamenews/css/menu/menu.css

changee starts at line numbe 11:

Code: Select all

/* Base for all menus */
#gkMainMenu {
   clear: both;
   margin: 0;
   padding: 0;
   width: auto;
}
#gkMainMenu .gkMenu {
   display: block;
}


to:

Code: Select all

/* Base for all menus */
#gkMainMenu {
   position:relative;
   clear: both;
   margin: 0;
   padding: 0;
   width: auto;
}
#gkMainMenu #searchpos {
   position: absolute;
   top: 6px;
   right: 10px;
   z-index: 1010;
}
#gkMainMenu .gkMenu {
   display: block;
}


Now You can put search module in newly created seachpos module area.

Please write back If You were able to make those changes.

It worked perfectly, you're a saint!

By the way, i made a replica of that new section just to the left of the searchpos, how would i make a refresh in that particular <div> ? is it too complicated? ive seen some javascript and jquery codes on the web doesnt look that complicated but to integrate it with joomla/this template maybe its difficult ?


Thanks again, much appreciated!

Please try to describe what You would like to do more precisely. I might be able to give You some tips to help.

Please try to describe what You would like to do more precisely. I might be able to give You some tips to help.

I managed, thanks to your code!! to create a spot for the jomsocial notify thing thats included in their package and it works fine no problem there.

I would like to auto refresh that section only, for e.g. every 10s auto refresh, not the whole page..

I found scripts online, around 20 lines more or less that works to auto refresh a <div> and not the whole page so the function seems not to be too complicated and it works.. so either i integrate this piece of script inside the php code of the "notify module" or maybe there is a easier way to achieve what i want?

Thanks again

Could You post a link to a solution You have found?
Ps. Please post also a link to source of module You are trying to use (Social Notify)

Based on info provided in PM it seems that module You are using is not prepared to be used with Ajax requests.

This mod is able to provide necessary data when page is loaded, but to "refresh" a part of a site with JS/jQuery you need to make a direct request to a module, and then based on info it returns - replace current part with new one. This module doesn't provide that functionality.

hmm i'll look around if there is some extension then, thanks a lot for the help!

By the way, i have responsive layout off in the template settings. I've tried with on as well. My problem is that on my tablet the black top bar (same as on gavick.com) is now on the bottom of the web, with a bit different configuration. I've tried several tips seen in the other threads but I cant manage to make it default, any ideas? Thanks.

Is there a way to access Your site online so I can check it on my tablet?

yeah, link is sent as pm thx again!

Edit the file:
templates/gk_gamenews/css/template.css

around line 1071 find:

Code: Select all

/* fix for the tablets */
body[data-tablet="true"] #gkTopBar {
   height: auto!important;
   min-height: 40px!important;
   overflow: hidden;
   position: static!important;
   width: auto!important;
}


and replace it with:

Code: Select all

/* fix for the tablets */
body[data-tablet="true"] #gkTopBar {
   height: auto!important;
   min-height: 40px!important;
   overflow: hidden;
}


Finally there are still few lines of css that are made only for tablets, and You might like to change them, so layout looks better:
starting in line 1078:

Code: Select all

body[data-tablet="true"] #gkTopBar > div > nav {
   float: right!important;
}
body[data-tablet="true"] #gkTopBar nav#gkTopBarUsermenu {
   clear: both;
   float: left!important;
}
body[data-tablet="true"] #gkTopBarUsermenu,
body[data-tablet="true"] #gkTopBarUsermenu ul,
body[data-tablet="true"] #gkTopBarUsermenu ul > li {
   width:100%;
}
body[data-tablet="true"] #gkTopBarUsermenu ul > li a,
body[data-tablet="true"] #gkTopBarUsermenu ul > li span {
   float: none!important;
   padding: 0!important;
   text-align: center!important;
   width:100%;
}


Make some changes to width and floats so it looks like You would like, or remove those lines completely to get exact same result as on gavick.com site.

If You know FireBug, or Chrome WebDeveloperTool, try installing safari which enables You to mimic tablets behavior on browser and debug elements without any problems.

i removed all of the lines hehe i'd prefer it to look exactly like on my laptop, and it worked!! thanks again.

By the way I put the search on top where #social is instead, ive added some other stuff to the "searchpos" instead.

this is the css, i've tried changing top and bottom, but the searchbox is still glued to the top, if you see the check the site you'll know what i mean. Thanks!

#gkSocial {
width: 100%;
position: absolute;
top: 6px;
}

You could either edit tempate.css and change line 209 to:

Code: Select all

#gkTopBar .social-icons {
   margin: 2px 0 0 0;
   float: left;
}


Or add code to override.css (remember to turn it on in template settings):

Code: Select all

#gkTopBar .social-icons {
   margin: 2px 0 0 0;
}


nice thanks alot, i mean it! Really appreciate it

i got a few more issues but ill discuss them in a new post, thanks again!