Tiesingejug
New Member
** Please note I am using this " http://andymatthews.net/read/2012/02/13/New-jQuery-Mobile-theme:-Twitter-Bootstrap " **So this is what the standard button "embed" if you will looks like, just a simple a element.\[code\]<a href="http://stackoverflow.com/mobile/daily.cfm" data-rel="dialog" data-role="button" data-transition="pop" data-ajax="false" data-theme="b" class="">Daily Progress</a>\[/code\]Now I'm not sure if any of you are familiar with Bootstrapper but it comes with some predefined button styles. Although I cannot figure out how to add custom ones. I figured it would be a walk in the park but it turns out it is not... or at least I made a stupid mistake or forgot about something.The gradient I want to use is this\[code\]background: #fa5976; /* Old browsers */background: -moz-linear-gradient(top, #fa5976 0%, #fa5573 13%, #fa4c6b 30%, #f6374e 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa5976), color-stop(13%,#fa5573), color-stop(30%,#fa4c6b), color-stop(100%,#f6374e)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #fa5976 0%,#fa5573 13%,#fa4c6b 30%,#f6374e 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #fa5976 0%,#fa5573 13%,#fa4c6b 30%,#f6374e 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #fa5976 0%,#fa5573 13%,#fa4c6b 30%,#f6374e 100%); /* IE10+ */background: linear-gradient(to bottom, #fa5976 0%,#fa5573 13%,#fa4c6b 30%,#f6374e 100%); /* W3C */filter: progid
XImageTransform.Microsoft.gradient( startColorstr='#fa5976', endColorstr='#f6374e',GradientType=0 ); /* IE6-9 */\[/code\]This gradient was generated using a gradient generator. The gradient is just a mediumish pink style.Now I thought this would just be as easy as copy the "b" style and make a new "x", "z", "p", etc style but apparently that does not work.Here is what the "b" style looks like its pretty long so I will just post a link to pastebin. ( http://pastebin.com/Jz0JhsPq ).Now I figured I could just do something like this ( http://pastebin.com/4h4rhscH ), and then change the menu items to something like this\[code\]<a href="http://stackoverflow.com/mobile/daily.cfm" data-rel="dialog" data-role="button" data-transition="pop" data-ajax="false" data-theme="p" class="">Daily Progress</a>\[/code\]But that didn't work it just made them whitish grey. I could really use some help here, any support would be more than appreciated.Big Thanks in Advance!
XImageTransform.Microsoft.gradient( startColorstr='#fa5976', endColorstr='#f6374e',GradientType=0 ); /* IE6-9 */\[/code\]This gradient was generated using a gradient generator. The gradient is just a mediumish pink style.Now I thought this would just be as easy as copy the "b" style and make a new "x", "z", "p", etc style but apparently that does not work.Here is what the "b" style looks like its pretty long so I will just post a link to pastebin. ( http://pastebin.com/Jz0JhsPq ).Now I figured I could just do something like this ( http://pastebin.com/4h4rhscH ), and then change the menu items to something like this\[code\]<a href="http://stackoverflow.com/mobile/daily.cfm" data-rel="dialog" data-role="button" data-transition="pop" data-ajax="false" data-theme="p" class="">Daily Progress</a>\[/code\]But that didn't work it just made them whitish grey. I could really use some help here, any support would be more than appreciated.Big Thanks in Advance!