[Resolved] Moving Kurouto Search Box

[jkmorganpets]

I would like to move the search to the right side boxes instead of in the top of the template. I thought there would be tons of requests for this but I only found one and it was for cc6. Tried it anyway but didn't work.

 

Jill

[bsmither]

For the Kurouto skin:

In main.php:

Find:
    <div id="header">
      {$SEARCH_FORM}
      <p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></p>
    </div>

Change to:
    <div id="header">
      <p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></p>
    </div>

Find:
        <div class="sidebar" id="sidebar_right">
            {$SHOPPING_CART}

Change to:
        <div class="sidebar" id="sidebar_right">
            {$SHOPPING_CART}
            {$SEARCH_FORM}

Make a backup of box.search.php. Replace its contents with:

<div>
    <h3>{$LANG.common.search}</h3>
    <form action="{$ROOT_PATH}index.php" method="get">
    <ul id="quick_search">
        <li><span class="search"><input name="search[keywords]" type="text" id="keywords" title="{$LANG.search.input_default}" size="18" class="textbox ajax" rel="product"/></span></li>
        <input type="hidden" id="result_issue" name="search[product_id]" value="" />
        <li><a href="{$SEARCH_URL}" class="search">{$LANG.search.advanced}</a></li>
        <input type="hidden" name="_a" value="category" />
    </ul>
    </form>
</div>

In common.css:

Find:
#quick_search {
	color: #FFF;
	float: right;
	position: relative;
	right: 0px;
	top: 90px;
	width: 320px;
}
#quick_search span.search {
	background-color: #2C6A83;
	border: 1px solid #4195B7;
	display: inline-block;
	padding: 6px;
}
#quick_search span.search > input {
	background: #FFF url(../images/common/background_icon_search.png) no-repeat;
	color: #717171;
	height: 15px;
	padding-top: 1px;
	text-indent: 20px;
	width: 200px;
}

#quick_search p.advanced {
	font-size: 10px;
	margin-top: 3px;
	text-indent: 5px;
}

Change to:
#quick_search {
	color: #FFF;
	list-style: none outside !important;
	margin: 0px; margin-top: 1px;
}
#quick_search span.search {
	background-color: #2C6A83; border: 1px solid #4195B7;
	display: inline-block; padding: 6px;
}
#quick_search span.search > input {
	background: #FFF url(../images/common/background_icon_search.png) no-repeat;
	color: #717171;
	height: 15px;
	width: 184px;
	padding-top: 1px;
	text-indent: 20px;
}
#quick_search p.advanced {
	font-size: 10px; margin-top: 3px; text-indent: 5px;
}
#quick_search ul {
	background-color: #FFF;
	list-style: none outside !important;
	padding-left: 7px;
}
#quick_search li {
	min-height: 20px;
}
#quick_search li > a {
	display: block;
	line-height: 20px;
	text-indent: 0px;
}
#quick_search > li > a {
	color: #FFF;
	text-indent: 15px !important;
}

In /blue/layout.css (pay attention to the colors -- yours will not be the same as given below!!!):

Find:
#quick_search span.search {
	background-color: #2C6A83;
	border: 1px solid #4195B7;
}
#quick_search input.search {
	background: transparent no-repeat;
	background-image: url(../../images/blue/button_search.png);
	border: 0px;
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
	height: 30px;
	text-shadow: #6374AB 2px 2px 2px;
	width: 90px;
}

Change to:
#quick_search span.search {
	background-color: #70822C;
	border: 1px solid #91A939;
	padding: 0;
}
#quick_search span.search > input {
	width: 196px;
}
#quick_search li > a {
	border-bottom: 1px solid #9AA86B;
}
#quick_search > li > a {
	background-color: #70822C !important;
	border-bottom: 1px solid #809143;
	border-top: 1px solid #9AA86B;
}

 

[jkmorganpets]

My

In /blue/layout.css (pay attention to the colors -- yours will not be the same as given below!!!):

Find:
#quick_search span.search {
	background-color: #2C6A83;
	border: 1px solid #4195B7;
}
#quick_search input.search {
	background: transparent no-repeat;
	background-image: url(../../images/blue/button_search.png);
	border: 0px;
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
	height: 30px;
	text-shadow: #6374AB 2px 2px 2px;
	width: 90px;
}

Change to:
#quick_search span.search {
	background-color: #70822C;
	border: 1px solid #91A939;
	padding: 0;
}
#quick_search span.search > input {
	width: 196px;
}
#quick_search li > a {
	border-bottom: 1px solid #9AA86B;
}
#quick_search > li > a {
	background-color: #70822C !important;
	border-bottom: 1px solid #809143;
	border-top: 1px solid #9AA86B;
}

 

My colours are the same as in the original file. Do I change them in the bottom set? Not sure which to change. Fun way to spend New Years Eve!

The search box has moved without changing the layout css file. Is it necessary?

Jill

Edited January 1, 2016 by jkmorganpets

[bsmither]

The CSS rules that you will change to in layout.css come from a green skin (I had already moved the search field in that experiment). So, the colors are for green while your subskin is blue.

[jkmorganpets]

Now on the site, the first image you hover over pops up. This happens on each page. I thought it may have been the layout.css as I didn't notice it before, but when I reinstalled the origianal layout.css file it still happens. I figure it is probably the box.header.php changes but I haven't changed it back yet.

As well, I get a flash of white every time I do a page change. So you can see these things I have left them ther for the moment. You can check them on the site at http://jkmorganpets.com

Is there a way to remove the gradient colours on the side of the actual site. 

Jill

[bsmither]

"the first image you hover over pops up"

On what page? Would this be the View Product pages? Such as: index.php?_a=product&product_id=47

The "Magnify on Hover" effect is a feature of the Kurouto skin.

"I get a flash of white every time I do a page change."

At only a specific area of the page? Or is the entire browser's viewport blanked white before any part of the incoming page gets drawn onto it?

I have no answer for that, but I do not see this effect with my Firefox.

(As an aside, visiting any random site using the Foundation skin, I do see a weird effect where the page gets drawn starting down the center, then rapidly expands outwards in both directions. I think that may be caused by the CSS-heavy Foundation skin such that the browser has to make billions of width computations based on the size of the font.)

"Is there a way to remove the gradient colours on the side of the actual site."

In layout.css:

Find:
body {
    background-image: url("../../images/blue/background_gradient.png");
}

Change to:
body {
    /* background-image: url("../../images/blue/background_gradient.png"); */
}

 

[jkmorganpets]

It seems this is just happening to me. Doesn't do it on my tablet, and when talking to my sister had her go over to the site and it wasn't happening to her. Must be something in my cache. And when I use the Edge browser, it doesn't do it there either. Seems to be just doing in Chrome on my computer.

Thanks for all the help. I"m sure I'll be back for more.

Jill