1. KB#10389 explains how to turn your menu items into buttons in Presto. This KB article will explain how to add your own custom style to them.
2.  
3. Step 01 - Determine how you want your buttons to look
4.  
5. There are many web sites that will help you generate the CSS for a stylized button. If you search “css button generator” you will find a good list of sites.
6.  
7. One that we’ve found helpful is http://www.cssbuttongenerator.com/ which we will use in this KB.
8.  
9. On this website you can use a GUI interface to style your button and see instantly what it will look like.
10.  
11. To optimize the button for use with Presto we’ve found that it helps to set the following values:
12.  
13.  
14.  
15. Button Height: 20px
16. Button Width: 200px;
17. Font Size: 13px;
18.  
19.  
20. You’ll want to be sure to set the CSS Class Name to “MenuLinksEvent”.
21.  
22. Feel free to experiment with the other settings until the button looks the way you like.
23.  
24. Step 02 - Obtain the CSS code.
25.  
26. Once the button looks the way you like, click on the “Get the code” button/tab on the page. Uncheck the “Show <style> tag?” checkbox.
27.  
28. Copy the generated CSS code in the text box. Here’s the generated code we created for this KB:
29.  
30. .MenuLinksEvent  {
31.         -moz-box-shadow:inset 0px 1px 0px 0px #5275ff;
32.         -webkit-box-shadow:inset 0px 1px 0px 0px #5275ff;
33.         box-shadow:inset 0px 1px 0px 0px #5275ff;
34.         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4b5fc4), color-stop(1, #4fd6ff) );
35.         background:-moz-linear-gradient( center top, #4b5fc4 5%, #4fd6ff 100% );
36.         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b5fc4', endColorstr='#4fd6ff');
37.         background-color:#4b5fc4;
38.         -webkit-border-top-left-radius:9px;
39.         -moz-border-radius-topleft:9px;
40.         border-top-left-radius:9px;
41.         -webkit-border-top-right-radius:9px;
42.         -moz-border-radius-topright:9px;
43.         border-top-right-radius:9px;
44.         -webkit-border-bottom-right-radius:9px;
45.         -moz-border-radius-bottomright:9px;
46.         border-bottom-right-radius:9px;
47.         -webkit-border-bottom-left-radius:9px;
48.         -moz-border-radius-bottomleft:9px;
49.         border-bottom-left-radius:9px;
50.         text-indent:0;
51.         border:1px solid #6863ff;
52.         display:inline-block;
53.         color:#ffffff;
54.         font-family:Arial;
55.         font-size:13px;
56.         font-weight:bold;
57.         font-style:normal;
58.         height:20px;
59.         line-height:20px;
60.         width:200px;
61.         text-decoration:none;
62.         text-align:center;
63.         text-shadow:-1px 0px 16px #000000;
64. }
65. .MenuLinksEvent :hover {
66.         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4fd6ff), color-stop(1, #4b5fc4) );
67.         background:-moz-linear-gradient( center top, #4fd6ff 5%, #4b5fc4 100% );
68.         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4fd6ff', endColorstr='#4b5fc4');
69.         background-color:#4fd6ff;
70. }.MenuLinksEvent :active {
71.         position:relative;
72.         top:1px;
73. }
74. /* This button was generated using CSSButtonGenerator.com */
75. Step 04 - Paste this code into stylesheet.css
76.  
77. Open the Presto IDE.
78.  
79. Go to Tools -> Modify Skin -> stylesheet.css
80.  
81. Paste the CSS code you copied to the very bottom of stylesheet.css
82.  
83.  
84.  
85. Step 05 - Modify the selectors in the CSS code.
86.  
87. In the CSS code that you pasted in you will notice there are 3 selectors used:
88.  
89. .MenuLinksEvent
90.  
91. .MenuLinksEvent :hover
92.  
93. .MenuLinksEvent :active
94.  
95. Modify these selectors by prepending “input” to them. This makes the selectors more specific and will override any default Presto styles so that they won’t interfere with our new style.
96.  
97. The final CSS code should look like this:
98.  
99. input.MenuLinksEvent {
100.         -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
101.         -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
102.         box-shadow:inset 0px 1px 0px 0px #ffffff;
103.         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
104.         background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
105.         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
106.         background-color:#ededed;
107.         -webkit-border-top-left-radius:6px;
108.         -moz-border-radius-topleft:6px;
109.         border-top-left-radius:6px;
110.         -webkit-border-top-right-radius:6px;
111.         -moz-border-radius-topright:6px;
112.         border-top-right-radius:6px;
113.         -webkit-border-bottom-right-radius:6px;
114.         -moz-border-radius-bottomright:6px;
115.         border-bottom-right-radius:6px;
116.         -webkit-border-bottom-left-radius:6px;
117.         -moz-border-radius-bottomleft:6px;
118.         border-bottom-left-radius:6px;
119.         text-indent:0;
120.         border:1px solid #dcdcdc;
121.         display:inline-block;
122.         color:#777777;
123.         font-family:arial;
124.         font-size:13px;
125.         font-weight:bold;
126.         font-style:normal;
127.         height:20px;
128.         line-height:20px;
129.         width:200px;
130.         text-decoration:none;
131.         text-align:center;
132.         text-shadow:1px 1px 0px #ffffff;
133. }
134. input.MenuLinksEvent:hover {
135.         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
136.         background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
137.         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
138.         background-color:#dfdfdf;
139. }input.MenuLinksEvent:active {
140.         position:relative;
141.         top:1px;
142. }
143. /* This button was generated using CSSButtonGenerator.com */
144.  
145.  
146. Step 06 - Test it out
147.  
148. Restart your Presto session by clicking the house icon in the tool bar or reload your Presto session in the browser.
149.  
150. Once you sign in your menu buttons should have the new style applied.
151.