Jump to content

How to move Search Box Classic Skin


Guest powerlifer
 Share

Recommended Posts

Guest powerlifer

Hello everyone well i already know that you need to move <div>{SEARCH_FORM}</div> to the relavant place but when i add the code for the boxes to put the search in, it screws up the layout. What im trying to do is get the search box in a green headed box like the rest then the welcome guest/login in another box.

This is the website here

Natu Health

Anyhelp is greatly appreciated.

Cheers

Chris

Link to comment
Share on other sites

Unfortunately your side boxes are not wide enough to accommodate (they are 160px) but there are some things you can do. You can add a box with your search or session within:

<div class="boxTitleRight">Search</div>

<div class="boxContentLeft">

{SEARCH_FORM}

<border="0" >

</div>

<div class="boxFootRight"> </div>

But you must either make your side boxes wider or edit the css and template for your form.

In style.css:

.searchBtn {

font-family: Arial, Helvetica, sans-serif;

font-size: 70%;

color: #FF3300;

background-color: #FFFFFF;

border: none;

height: 20px;

width: 30px;

}

.searchBox {

font-family: Arial, Helvetica, sans-serif;

font-size: 70%;

color: #FFFFFF;

background-color: #61A2DF;

border: 1px solid #FFFFFF;

and in index.tpl and cart.tpl you'll remove <div style="padding-top: 72px;">{SEARCH_FORM}</div>

The same can be done for {SESSION}

Link to comment
Share on other sites

Guest powerlifer

Thanks again mate you helped me last time with my other problem much appreciated, i changed the widths and everythings perfect.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...