♥Tsimi Posted March 5, 2014 Share Posted March 5, 2014 I never liked the browser default arrow down selectors. That is the reason i created this small tutorial that will show you how to change/restyle your dropdown selectors. for example inside the create_account.php (country selector) first open the file catalog/includes/functions/html_output.php and look for Output a form pull down menu (around line 292) now there is probably more then just one way to do this i personally just copied the whole code from line 291 - 323 and renamed tep_draw_pull_down_menu to tep_draw_pull_down_menu2 the reason why i did that is, i don't want to change "all" dropdown selectors. now inside the copied tep_draw_pull_down_menu2 code look for $field = '<select name="' . tep_output_string($name) . '"'; and change it to $field = '<select class="dropdown" name="' . tep_output_string($name) . '"'; then look for Creates a pull-down list of countries (original line 326) find this code return tep_draw_pull_down_menu($name, $countries_array, $selected, $parameters); and change it to return tep_draw_pull_down_menu2($name, $countries_array, $selected, $parameters); now we have to set the definitions inside the css file .dropdown { padding: 4px 0 3px 3px; height: auto; width: 299px; border: solid 1px #e0e0e0; background: url(images/icons/ddarrow_down.png) no-repeat; background-position: 275px 6px; /*Position of the arrow-image*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-appearance: none; /* Removes default chrome and safari style*/ -moz-appearance: none; /* Removes default Firefox style*/ text-indent: 0.01px; /* Removes default arrow from firefox*/ text-overflow: ""; /* Removes default arrow from firefox*/ } .dropdown::-ms-expand { /* Removes Default IE style*/ display: none; } the css code above is the one i am using so you have to change/adjust it to match your shop design. as you can also see i removed the default browser created arrow down and added my own arrow down icon inside the image/icons folder. (the icon is attached) *regarding that icon, "I" created that icon myself so YOU have the rights to do with it as you please! sell it, change it, use it, hell do what ever you want with it, i don't mind at all. or create your own one. Link to comment Share on other sites More sharing options...
eCommerce-Websites Posted April 25, 2014 Share Posted April 25, 2014 Cool help! Thanks for the zip file as well. Adeel Ather eCommerce Website Designer Link to comment Share on other sites More sharing options...
♥Tsimi Posted April 25, 2014 Author Share Posted April 25, 2014 You're welcome! :thumbsup: Link to comment Share on other sites More sharing options...
♥Tsimi Posted June 23, 2014 Author Share Posted June 23, 2014 NOTE! This tutorial is not working with the latest Firefox 30! Link to comment Share on other sites More sharing options...
♥joli1811 Posted June 23, 2014 Share Posted June 23, 2014 :thumbsup: thought it was my fault had a few updates and the arrow went behind the original selector could not z-index strange john To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
♥Tsimi Posted June 23, 2014 Author Share Posted June 23, 2014 @@joli1811 unfortunately there is no solution so far. i just made my arrows a bit narrower so that they can hide behind the FF default arrow. So now i have nice looking arrows in IE and Chrome and in FF the default arrows. Let's just hope FF reconsider their changes and revert back to as it was, till then we have to live with it i guess. Link to comment Share on other sites More sharing options...
♥Tsimi Posted October 15, 2014 Author Share Posted October 15, 2014 NOTE! This tutorial is not working with the latest Firefox 30! As far i know the latest Firefox is the only one that won't dance to the music, the other browser like Internet Explorer and Chrome should still be OK. Don't know about Safari or Opera. Link to comment Share on other sites More sharing options...
oscMarket Posted October 15, 2014 Share Posted October 15, 2014 @@Tsimi Maybe this go help you out ;) Link to comment Share on other sites More sharing options...
♥Tsimi Posted January 30, 2015 Author Share Posted January 30, 2015 It looks like Firefox (ver. 35.0.1) sorted it out and now it works again. Tested with Internet Explorer 11, Chrome (ver. 40.0.2214.94 m) and Firefox (ver. 35.0.1) and all seems to be fine. Link to comment Share on other sites More sharing options...
benmoore1st Posted April 20, 2016 Share Posted April 20, 2016 Thank you. That was useful No outside links... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.