Move search field from breadrmb to menu

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
magicpio
Forum Members
Forum Members
Posts: 30
Joined: Mon Dec 05, 2005 7:54 pm

Move search field from breadrmb to menu

Post by magicpio »

Hi all,

since I don´t have sub-menues I dropped the breadcrumbs from my layout (adjusting "CSSMenu top + 2 columns"- template and attached stylesheets
from the original 1.9.2 CMSMS install).
Now I´m struggling in getting the search field into the menu div right side.
Placing {search} and enclosing div inside the menu div is something I tried, but this does not work.
The search field is still showing below the menu area.

Code: Select all

 ..................
      </div>
{* End Header *}

{* Start Navigation *}
      <div id="menu_vert">
{* stylesheet  "Navigation: CSSMenu - Horizontal" *}
        <h2 class="accessibility">Navigation</h2>
        {menu loadprops=0 template='cssmenu.tpl'}
{* Start Search, the input "Submit" is using an image, CSS: input.search-button *}
              <div id="search">
               {search}
              </div>
{* End Search *}
        <hr class="accessibility" />
      </div>
{* End Navigation *}

{* Start Content *}
      <div id="content">
..............

It seems, as if the menu stylesheet reserves the full page widht but I cannot figure it out.
For the moment I´m "just" working with FF3.6.13.
Could somebody point me to the right direction please?

Thanks.
Pio
magicpio
Forum Members
Forum Members
Posts: 30
Joined: Mon Dec 05, 2005 7:54 pm

[SOLVED] Move search field from breadrmb to menu

Post by magicpio »

OK, solved.
After using Firebug, I found, that the embracing div (menu_vert) was not responsible for positioning to the right on the same line, but div#menuwrapper.
This div is attached to the menu template "cssmenu.tpl" which is one of the (and the) default template for menus after installing CMSMS.
To be able to edit this template, I had to open from the admin panel layout->menumanager,
import template "cssmenu.tpl" into the database using the "import icon" on the right side of the line, which asks you for a new name for this copy (e.g. 'mynew_cssmenu.tpl'; the original is still present and read only).
After this I set the copied template as default and cachable.
Don´t forget to call it in your page templates, i.e. replace the original

Code: Select all

{menu template=template='cssmenu.tpl'}
with

Code: Select all

{menu template=template='mynew_cssmenu.tpl'}
I cut (removed) the code for the search field from the original page template "CSSMenu top + 2 columns".
Then I opened template "mynew_cssmenu.tpl" for editing an inserted the search field code just before line <div class="clearb"></div> . Now my template is like:

Code: Select all

{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>

{* Start Search, the input "Submit" is using an image, CSS: input.search-button *}
      <div id="search">
      {search}
      </div>
{* End Search *}


<div class="clearb"></div>
</div>
{* above /div marks the end of div "menuwrapper" *}
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Move search field from breadrmb to menu

Post by Dr.CSS »

That was not necessary if you had moved the search div above the menu and float:right then took the width:100% out of the menuwrapper div it would have worked, I'm surprised it didn't give you an error...
Locked

Return to “Layout and Design (CSS & HTML)”