Tutorial: Suchfeld ins Top-Menü verschieben

Aus Wiki | xtcModified eCommerce Shopsoftware

von Tomcraft, 07.2010

Eine einfache Anleitung um das Suchfeld ins Menü zu verschieben:

Suche in "/templates/xtc5/index.html": 

<div id="header">
    <div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
    <div id="search">{$box_SEARCH}</div>
</div>
<div id="topmenuwrap">
    <ul id="topmenu">
        <li><a href="{php}echo xtc_href_link(FILENAME_DEFAULT);{/php}">Home</a></li>
        <li><a href="{$cart}">{#link_cart#}</a></li>
        {if $account}
        <li><a href="{$account}">{#link_account#}</a></li>
        {/if}
         {php}if ($_SESSION['customers_status']['customers_status_id'] == 1) { {/php}
        <li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>
         {php}}{/php}
        <li><a href="{$checkout}">{#link_checkout#}</a></li>
        {php} if (isset($_SESSION['customer_id'])) { {/php}
        <li><a href="{$logoff}">{#link_logoff#}</a></li>
        {php} } {/php}
    </ul>
    <div id="languages">{$box_LANGUAGES}</div>
</div>

und ersetze gegen: 

<div id="header">
    <div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
</div>
<div id="topmenuwrap">
    <ul id="topmenu">
        <li><a href="{$index}">{#link_index#}</a></li>
        <li><a href="{$cart}">{#link_cart#}</a></li>
        {if $account}
        <li><a href="{$account}">{#link_account#}</a></li>
        {/if}
        {if $smarty.session.customers_status.customers_status_id == '1'}
        <li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>
        {/if}
        <li><a href="{$checkout}">{#link_checkout#}</a></li>
        {if $smarty.session.customer_id}
        <li><a href="{$logoff}">{#link_logoff#}</a></li>
        {else}
        <li><a href="{$login}">{#link_login#}</a></li>
        {/if}
    </ul>
    <div id="languages">{$box_LANGUAGES}</div>
    <div id="search">{$box_SEARCH}</div>
</div>

Suche in "/templates/xtc5/boxes/search.html": 

{config_load file="$language/lang_$language.conf" section="boxes"}
{$FORM_ACTION}
<table border="0" class="search_header" cellspacing="0" cellpadding="0">
     <tr>
          <td colspan="2"><strong>{#heading_search#}:</strong></td>
     </tr>
     <tr>
          <td>{$INPUT_SEARCH}</td>
          <td>{$BUTTON_SUBMIT}</td>
     </tr>
     <tr>
          <td colspan="2"><a href="{$LINK_ADVANCED}">{#text_advanced_search#}</a></td>
     </tr>
</table>
{$FORM_END}

und ersetze mit: 

{config_load file="$language/lang_$language.conf" section="boxes"}
{$FORM_ACTION}
<table border="0" class="search_header" cellspacing="0" cellpadding="0">
<!--
     <tr>
          <td colspan="2"><strong>{#heading_search#}:</strong></td>
     </tr>
//-->
     <tr>
          <td><strong>{#heading_search#}:</strong></td>
          <td>{$INPUT_SEARCH}</td>
          <td>{$BUTTON_SUBMIT}</td>
     </tr>
<!--
     <tr>
          <td colspan="2"><a href="{$LINK_ADVANCED}">{#text_advanced_search#}</a></td>
     </tr>
//-->
</table>
<div id="intelliSearchResult"></div>
{$FORM_END}

Suche in "/templates/xtc5/stylesheet.css": 

#header #search {
	width: 230px;
	height:75px;
	float:right;
	color:#fff;
	padding:30px 0px 0px 60px
}
#header #search a {
	color:#fff;
	font-size:11px;
}

und ersetze mit: 

/*
#header #search {
	width: 230px;
	height:75px;
	float:right;
	color:#fff;
	padding:30px 0px 0px 60px
}
#header #search a {
	color:#fff;
	font-size:11px;
}
*/

Suche in "/templates/xtc5/stylesheet.css": 

#topmenuwrap {
	background: #333 url(img/bg_topmenu.gif) repeat-x;
}

und ersetze mit: 

#topmenuwrap {
	background: #333 url(img/bg_topmenu.gif) repeat-x;
	height: 36px;
	position:relative;
	zoom:1;
}

Suche in "/templates/xtc5/stylesheet.css": 

#topmenuwrap {
	background: #333 url(img/bg_topmenu.gif) repeat-x;
	height: 36px;
	position:relative;
	zoom:1;
}

und füge danach ein: 

#topmenuwrap #search {
	text-align:right;
	height:26px;
	color: white;
	font-size:13px;
	padding: 6px 10px 4px 0px;
	margin:0;
	float: right;
}

Suche in "/templates/xtc5/stylesheet.css": 

#languages {
	text-align:right;
	height:26px;
	font-size:13px;
	background: url(img/bg_topmenu.gif) repeat-x;
	padding: 10px 10px 0px 0px;
	margin:0;
}

und ersetze mit: 

#languages {
	text-align:right;
	height:26px;
	font-size:13px;
	background: url(img/bg_topmenu.gif) repeat-x;
	padding: 10px 10px 0px 0px;
	margin:0;
	float: right;
}

So könnte es nach dem Umbau aussehen:


Suchleisteoben.png

Von „http://www.xtc-modified.org/mediawiki/index.php?title=Tutorial:_Suchfeld_ins_Top-Men%C3%BC_verschieben&oldid=1747“