Jump to content



Photo
- - - - -

change/restyle the dropdown menu/selector

dropdown drop down dropdown menu

  • Please log in to reply
11 replies to this topic

#1   Tsimi

Tsimi
  • Members
  • 1,752 posts
  • Real Name:Lambros
  • Gender:Male
  • Location:Japan

Posted 05 March 2014 - 05:00

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.

Edited by Tsimi, 05 March 2014 - 05:03.


#2   eCommerce-Websites

eCommerce-Websites
  • Members
  • 10 posts
  • Real Name:Adeel Ather
  • Gender:Male

Posted 25 April 2014 - 11:49

Cool help! Thanks for the zip file as well.

Adeel Ather

eCommerce Website Designer

 


#3   Tsimi

Tsimi
  • Members
  • 1,752 posts
  • Real Name:Lambros
  • Gender:Male
  • Location:Japan

Posted 25 April 2014 - 11:53

You're welcome! :thumbsup:

#4   Tsimi

Tsimi
  • Members
  • 1,752 posts
  • Real Name:Lambros
  • Gender:Male
  • Location:Japan

Posted 23 June 2014 - 12:58

NOTE!

 

This tutorial is not working with the latest Firefox 30!



#5   joli1811

joli1811

    Anybody seen this leprechaun say yeah !!

  • Members
  • 2,384 posts
  • Real Name:john dunlop
  • Gender:Male
  • Location:Ireland

Posted 23 June 2014 - 13:03

: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.

#6   Tsimi

Tsimi
  • Members
  • 1,752 posts
  • Real Name:Lambros
  • Gender:Male
  • Location:Japan

Posted 23 June 2014 - 13:35

@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.


Edited by Tsimi, 23 June 2014 - 13:36.


#7   armandlee4

armandlee4
  • Members
  • 6 posts
  • Real Name:Amand Lee

Posted 15 October 2014 - 11:32

Does it not work with all browsers?


Centex Technologies, Atlanta


#8   Tsimi

Tsimi
  • Members
  • 1,752 posts
  • Real Name:Lambros
  • Gender:Male
  • Location:Japan

Posted 15 October 2014 - 11:52

 

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.



#9   wHiTeHaT

wHiTeHaT
  • Community Team
  • 1,135 posts
  • Real Name:Henry
  • Gender:Male
  • Location:Netherlands

Posted 15 October 2014 - 12:12

@Tsimi

 

Maybe this go help you out ;)


Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

#10   armandlee4

armandlee4
  • Members
  • 6 posts
  • Real Name:Amand Lee

Posted 17 October 2014 - 09:03

It means that I am good to go. Thanks for the help :)


Centex Technologies, Atlanta


#11   Tsimi

Tsimi
  • Members
  • 1,752 posts
  • Real Name:Lambros
  • Gender:Male
  • Location:Japan

Posted 30 January 2015 - 04:01

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.



#12   benmoore1st

benmoore1st
  • Members
  • 1 posts
  • Real Name:Ben
  • Gender:Male

Posted 20 April 2016 - 14:35

Thank you. That was useful


No outside links...






Also tagged with one or more of these keywords: dropdown, drop down, dropdown menu