♥Tsimi Posted November 5, 2013 Posted November 5, 2013 Hi, i have a search input field in my header which i would like to restyle/change. I don't like the basic square design and the white background is also not really matching with my background. The search input field from following site ( nice shop btw.! done by multimixer maybe? ) looks very nice with rounded corners and lot more height than what i have right now. echo-guns.com/index.php Searching for a solution here at the forum or through google didn't bring up any useful results. A person mentioned following: Find this: CHECKBOX, INPUT, RADIO, SELECT { font-family: Verdana, Arial, sans-serif; font-size: 11px; } in the stylesheet and add background-color: *yourcolorhere*; before the } If i do this it changes the beckground BUT for all input fields. So i guess i have to define a new input/form or class for the search only, right? If yes where can i do that? and how the hell can i change the height of that field? width is no problem but height just won't work.
♥Tsimi Posted November 5, 2013 Author Posted November 5, 2013 the quote i postet before is the right spot if i want to change the height, corners and background. if i add following code there -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; height: 20px; i get finally the height i want and round corners. the only problem is that this class/id ( ? ) is for all input field in the shop. so i tried to copy the tep_draw_input function inside the html_ouput.php file and give it a new name like input2 or something and then add the same class/id inside the stylesheet but with no success so far. this is the code inside the html_output.php file that i have to duplicate, right? //// // Output a form input field function tep_draw_input_field($name, $value = '', $parameters = '', $type = 'text', $reinsert_value = true) { global $HTTP_GET_VARS, $HTTP_POST_VARS; $field = '<input type="' . tep_output_string($type) . '" name="' . tep_output_string($name) . '"'; if ( ($reinsert_value == true) && ( (isset($HTTP_GET_VARS[$name]) && is_string($HTTP_GET_VARS[$name])) || (isset($HTTP_POST_VARS[$name]) && is_string($HTTP_POST_VARS[$name])) ) ) { if (isset($HTTP_GET_VARS[$name]) && is_string($HTTP_GET_VARS[$name])) { $value = stripslashes($HTTP_GET_VARS[$name]); } elseif (isset($HTTP_POST_VARS[$name]) && is_string($HTTP_POST_VARS[$name])) { $value = stripslashes($HTTP_POST_VARS[$name]); } } if (tep_not_null($value)) { $field .= ' value="' . tep_output_string($value) . '"'; } if (tep_not_null($parameters)) $field .= ' ' . $parameters; $field .= ' />'; return $field; }
burt Posted November 5, 2013 Posted November 5, 2013 Work in the box module. Add ui-corner-all to get rounded corners. tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: 75%"') to tep_draw_input_field('keywords', '', 'size="10" class="searchbox ui-corner-all" maxlength="30" style="width: 75%"') You notice I also added "searchbox". Now use this to give the box other style. .searchbox { background: blue; color: white; height: 40px; text-indent: 10px; } as an example.
♥Tsimi Posted November 5, 2013 Author Posted November 5, 2013 hi burt thank you so much! i can't believe that it was so easy. sometimes the solution is easier than one might think, i should remember that. i didn't know that i can add a class just "inside" the tep_draw_input function code itself. *slap on head* another lesson learnt today. thanks again burt.
burt Posted November 5, 2013 Posted November 5, 2013 Almost everyone, pro coders included, overthink and overengineer code changes. There is little point in doing more than the minimum to get the effect/change you need, as this keeps the codebase as clean as possible. This is another reason why you should add as few addons as possible to your shop - everytime you add something else, the codebase becomes more mangled.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.