Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Change Width Of Keyword Search Here Box- In My Sidebox

Change Width Of Keyword Search Here Box- In My Sidebox

Views: 2,787

Results 1 to 20 of 23
1 Jan 2011, 6:32 PM
#1
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Change Width Of Keyword Search Here Box- In My Sidebox

Hi there folks!! Happy new Year!!!

I've been puttering with site again- and decided to tackle the search box- that is now again in my left sidebox...

I've managed to figure out how to get my button in there- and align it all to the left- BUT- I for the life of me- cannot figure out how to code the file to just shorten the length of the "keyword search here" box....

I am not so good at php coding- and have been fighting my way through this...

Site is http://www.justforkeeps.net

And... the file I was trying to alter is in my custom folder- sideboxes- tpl_search.php file...

I tried a couple things- and it did alter it- but it was crazy not right!!

Any help from you fabulous coders would be greatly appreciated.. I've been at this for 2 days... :)

Thanks bunches...

1 Jan 2011, 6:57 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Change Width Of Keyword Search Here Box- In My Sidebox

That's the right file. Find this:

** $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px"') . '<br** />' .

and change the '30' value. Increasing the number makes the box smaller.

1 Jan 2011, 7:12 PM
#3
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Oh geeeeze!!!!!!! I tried lowering it!!! DUH!!!!

Stevesh!!! You are the man!! You've come to my resucue oober times!! Smiles And its always something relatively "common" that I just coudln't get past!!!

Thank you- Thank You- Thank You!!!!!

Fixing Now!!!

Niki

5 Jan 2011, 4:15 AM
#4
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Okay!! I've decided to completely get rid of a LOT of things going on in the sidebox- and do a nice header under my logo.. I have lots of stuff I'm working on- and an open thread- on a few things- called "before i screw anything else up"...

I'm gaining- but was hoping that maybe Stevesh- who helped me before- or somebody else can take a look at what I am doing wrong...

I've got the search bar added into my header- but it's ALL WRONG.. As a matter of fact- it's not even working..... I'm trying to work in a few folders- but think I'm way off again...

Right now- I've the tpl_header open- but have wrong code????

Here's what I have- if anyone can tell me where I am doing this wrong.. ANd not only is it not working- it's not lining up- so text box is low- the search button high... UG!!! One of these days.....

Thanks in advance.. Here's "some" of the code in the tpl_header.php file I have so far....

</ul> </div> <div id="navMainSearch"><form name="quick_find_header" action="http://www.justforkeeps.net/index.php?main_page=advanced_search_result" method="get"><input type="hidden" name="main_page" value="advanced_search_result" /><input type="hidden" name="search_in_description" value="1" /><input type="text" name="keyword" size="6" class="search-header-box" maxlength="30" style="width: 100px" value="Enter search here" onfocus="if (this.value == 'Enter search keywords here') this.value = '';" onblur="if (this.value == '') this.value = 'Enter search here';" /> <input type="image" src="includes/templates/custom/buttons/english/button_search.gif" value="" class="search-header-button" style="width: 95px" /></form></div> </div>

In advance- Thanks!!

5 Jan 2011, 4:16 AM
#5
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Forgot to say- that once I get the code fixed- I'd like to center everything in the header- and tighten it all up!! ANy help appreciated... smiles

5 Jan 2011, 6:22 AM
#6
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Got the search bar added- but everything still doesn't "look right"....

Boy oh boy.. Anyone take a look.. I think I'm gaining.... Search bar is working- but everything just looks out of place.... Need a tidy code- and I think Im' tinkering with the wrong files... Not sure...

Thanks Bunches... I'll keep trying....

5 Jan 2011, 7:54 AM
#7
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Posted this in another thread- here: http://www.zen-cart.com/forum/showthread.php?t=171467 because I seriously need some help.... I have been going back and forth between these two threads- and with several different customization issues- ( my fault- I know )..... So- am keeping it open between the two...

This is what i posted...

I know- I am talking to myself- or you all are just trying to figure out "WHAT IS THIS LADY DOING".. lol... But I am just gonna cry!!! Holy Hanna... Just when I think I am gaining- I screw something more up???

I am using two threads- because I've had many issues... But- this is where I am at...

Editing my tpl_header.php file... And this is my code:

<?php /** * Common Template - tpl_header.php * * this file can be copied to /templates/your_template_dir/pagename<br /> * example: to override the privacy page<br /> * make a directory /templates/my_template/privacy<br /> * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br /> * to override the global settings and turn off the footer un-comment the following line:<br /> * <br /> * $flag_disable_header = true;<br /> * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $ */ ?> <?php // Display all header alerts via messageStack: if ($messageStack->size('header') > 0) { echo $messageStack->output('header'); } if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) { echo htmlspecialchars(urldecode($_GET['error_message'])); } if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) { echo htmlspecialchars($_GET['info_message']); } else { } ?> <!--bof-header logo and navigation display--> <?php if (!isset($flag_disable_header) || !$flag_disable_header) { ?> <div id="headerWrapper"> <!--bof-branding display--> <div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
<div id="taglineWrapper">
<?php if (HEADER_SALES_TEXT != '') { ?>
  <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php } ?> <?php if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) { if ($banner->RecordCount() > 0) { ?>
  <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php } } ?>
</div>

<?php require(DIR_WS_MODULES . 'sideboxes/' . 'login_header.php'); ?>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?> </div> <!--eof-branding display--> <!--bof-navigation display--> </div> <div id="navMainWrapper"> <div id="navMain"> <div id="navMainSearch"> <ul class="back"> <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a> | </li> <?php if ($_SESSION['customer_id']) { ?> <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a> | </li> <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> | </li> <?php } else { if (STORE_STATUS == '0') { ?> <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a> | </li> <?php } } ?> <li><img src="includes/templates/custom/images/cart.gif" class="cart-image" alt="the shopping cart" /><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?> - <?php echo $_SESSION['cart']->count_contents();?> item(s) - <?php echo $currencies->format($_SESSION['cart']->show_total());?></a> | </li> <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a> | </li> <?php if ($_SESSION['cart']->count_contents() != 0) { ?> <?php }?> <li> <form name="quick_find_header" action="http://www.justforkeeps.net/index.php?main_page=advanced_search_result" method="get"><input type="hidden" name="main_page" value="advanced_search_result" /><input type="hidden" name="search_in_description" value="1" /> <input type="text" name="keyword" size="6" class="search-header-box" maxlength="30" style="width: 100px" value="Enter search keywords here" onfocus="if (this.value == 'Enter search keywords here') this.value = '';" onblur="if (this.value == '') this.value = 'Enter search keywords here';" />  <input type="image" src="includes/templates/custom/buttons/english/button_search.gif" value="" class="search-header-button" style="width: 70px" /></form></li> </div></div> <!--eof-navigation display--> <!--eof-header logo and navigation display--> <!--bof-optional categories tabs navigation display--> <?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?> <!--eof-optional categories tabs navigation display--> <!--bof-header ezpage links--> <?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?> <?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?> <?php } ?> <!--eof-header ezpage links--> </div> <?php } ?>

What am I doing wrong with all these div tags... The emphasis- is so I can get the whole "header" space up under logo- not too tight- but up under the logo pic- and have all of the options in line- and one of these days- centered...

Just when I at least get them left to right- for now- and next to each other- NOW- I've got a space under logo.. Big time...

Please help this frustrated- non coding- mumbling around fool!!! :) I need a coder... I am trying- but just have failed about 20000 times.. * kidding* but it seems that way.....

Thanks bunches!!

5 Jan 2011, 12:29 PM
#8
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Change Width Of Keyword Search Here Box- In My Sidebox

You've lost me completely, but you can snug that up toward the header image by making the height smaller here:

#headerWrapper {
background-color: transparent;
background-position: center;
text-align: center;
height: 265px;
margin: 0em;
padding: 0em;
}

Also try adding this to line the search stuff up:

#navMainSearch input{vertical-align:bottom;}

How else do you want it to be different ?

5 Jan 2011, 2:42 PM
#9
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Oh dear... It must have been a late night- if I added all that and lost you!!! Sorry!!!! blushing

Okay- the header wrapper fix- worked again- to get my content tightened up to the logo!!

What I want to do- is add a color to the header bar. When I added color- it changed the whole top portion. Not just the header content. I put color behind my logo too.

I also want to center those links in the header... I want home- log in- shop cart- etc. etc.. in the middle....

And- for some reason- the little green search button is not right next to the text box- but slighlty above it. Can't figure that out either....

I entered in the whole code for the tpl_header because I thought I screwed it all up by adding in a search and shop cart and checkout- with div tags- li tags etc.. But in fact- I finally got it right- and just needed to re-adjust the dang header wrapper in the style sheet again!!!

Sorry for confusion- but I was lost myself...

Thanks bunches!! Just trying to make the site nicer Stevesh ( by the way- what is real name? if you don't mind sharing that :) ) And trying to get it more modernized without losing the style I need for our types of products...

Still working on bravenet thing as well...

THANK YOU!!!! A LifeSaver....

5 Jan 2011, 3:17 PM
#10
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Change Width Of Keyword Search Here Box- In My Sidebox

You missed this:

Also try adding this to line the search stuff up:

#navMainSearch input{vertical-align:bottom;}

#navMain ul {margin: 0 0 0 6em; background-color:#ff0000; padding:0 2em 0 2em;}

Adjust the margin and padding values untill it looksthe way you want it to.

stevesh is my real name - my parents were DOS coders.

5 Jan 2011, 3:26 PM
#11
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

stevesh:

You missed this:

Also try adding this to line the search stuff up:

#navMainSearch input{vertical-align:bottom;}

#navMain ul {margin: 0 0 0 6em; background-color:#ff0000; padding:0 2em 0 2em;}

Adjust the margin and padding values untill it looksthe way you want it to.

stevesh is my real name - my parents were DOS coders.
Okay- I did miss that.... Does it go in my css Stevesh?? It doesn't look like something I could add to a php file.. ????

And I will go find he navmain ul- and make adjustments!!! I have talked to myself for days- even in my sleep :) Smiles to try and get this...

Let me have another go at it....

And Stevesh is a kewl name... I just wanted to make sure I was properly addressing you :) Some folks on here- I have no idea what their real names are ;) smiles....

Mine- well- Just plain Nik- aka- Nichole- but that's only when I am usually in trouble with someone- or don't want to be on a personal basis.. Just kidding....

Going to go and try and fix!!!!

Again- my hero for your helping me find things that "should" be easier ......

niki

5 Jan 2011, 3:45 PM
#12
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Kaniki:

Okay- I did miss that.... Does it go in my css Stevesh?? It doesn't look like something I could add to a php file.. ????

And I will go find he navmain ul- and make adjustments!!! I have talked to myself for days- even in my sleep :) Smiles to try and get this...

Let me have another go at it....

And Stevesh is a kewl name... I just wanted to make sure I was properly addressing you :) Some folks on here- I have no idea what their real names are ;) smiles....

Mine- well- Just plain Nik- aka- Nichole- but that's only when I am usually in trouble with someone- or don't want to be on a personal basis.. Just kidding....

Going to go and try and fix!!!!

Again- my hero for your helping me find things that "should" be easier ......

niki
ADDED : Got help to center the contents- but still working on a few tweaks.. This is what I did in css stylesheet:

Okay... That didn't work- but this centered the whole thing here.. Instead of adding it in as it's own separte tag in stylesheet- this is where I added it- and added extra px....

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0 0 0 83px;
padding: 0em 0em;
list-style-type: inline;
}

Now- to get that little green search button lined up with the search text box- and perhaps throw some color behind this new header bar....

We are gaining....

Thanks to everyone!!! The things I miss!!!! Smiles
Niki

5 Jan 2011, 3:46 PM
#13
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Both would go in the stylesheet - I usually put stuff that I add at the bottom.

5 Jan 2011, 3:49 PM
#14
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Okay!! Gonna work on the color- and the lining up of that silly search button!!!

Back into me stylesheet- she goes....

smiles

5 Jan 2011, 3:57 PM
#15
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Okay- in stylesheet- added this: #navMainSearch input{vertical-align:bottom;}

And tada!!! Stevesh- YODA!!! Yoda man...

This lined up my silly little green button with the text search box!!!

I know- it's all trivial- but I do want it look good!!!

Now- on to the rest of my "makeover"

Need to buy your guys coffee!!!!!

Oober Thanks!!!!!

5 Jan 2011, 5:57 PM
#16
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

For anyone else reading this... This is what I did to give me a nice ( I think ) colored header bar....

I entered this in my css style sheet-

#navMain ul, #navSupp ul, #navCatTabs ul {
margin-top: 3px;
margin-bottom: 5px;
margin-left: 8px;
margin-right: 0px;
width: 950px;
padding-left: 43px;
padding-right: 0px;
list-style-type: inline;
background-color: #bca66c;

And in my tpl_header.php file- wellll- I did a lot in there to get the links.. I'd be happy to repost my code for anyone wishing to do this- or tweak their own!!!

WHEW!!! I might change the color of the bar- might not.... Stilllllll Tweaking....

I suck at zen css... BUT- I am gaining!!! Trial and error- ha ha.. Lots of errors!!! And lots of help!!!

Back at the next things I'd doing!!!!

5 Jan 2011, 5:59 PM
#17
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Ohhh- and I bumped the margin bottom to 15 px so that my nav bread crumb stays away from the header bar.....

Whew!!

5 Jan 2011, 7:08 PM
#18
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Oops. Your search button is wrapping in IE8.

When I remove the padding here:

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
padding: 0em 0.5em;
margin: 0;
}

it fixes it, so you'll need to play with that, maybe by separating the right and left padding.

5 Jan 2011, 7:19 PM
#19
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Stevesh- I'm not seeing what you are seeing.... I am using both IE8 and Fox- latest- and on my end- it is perfectly centered.. Both the colored bar- and the links/content in it.....

I don't know how to fix- if I can't see it........

?????

5 Jan 2011, 7:28 PM
#20
kaniki avatar

kaniki

Zen Follower

Join Date:
Sep 2010
Posts:
111
Plugin Contributions:
0

Re: Change Width Of Keyword Search Here Box- In My Sidebox

Okay!! I removed the padding where you told me to- and holy!! It went haywire again!!

Sooo- this is the new style for this part- and it looks good in both browsers!!

#navMain ul, #navSupp ul, #navCatTabs ul {
margin-top: 3px;
margin-bottom: 15px;
margin-left: 8px;
margin-right: 0px;
width: 910px;
padding-left: 83px;
padding-right: 0px;
list-style-type: inline;
background-color: #bca66c;
}

#navMainSearch input{vertical-align:bottom;}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
padding: 0em;
margin: 0;
}

Can you look again- and tell me if it looks all centered and all good on your end please?? :) Thanks!!!!