Forums: Index > Script suggestions > Generic Gradient Template
I've been working on a template that gives a page a background with curved corners, gradient background (that you could type the same color into twice if you don't want gradient), text color, and optional glow and border. But the important thing is for it to work on all browsers. My knowledge of coding is limited, and this was made from just splicing together other people's code. Here's what I currently have:
<div style="border: 3px {{{Rim}}} {{{Rim Colour}}}; color: {{{Text Colour}}}; border-radius: 3ex; box-shadow: 0 0 10px 3px {{{Glow Colour}}}; padding:10px; padding-bottom:15px; background-image:-moz-linear-gradient(top, {{{Background Colour 1}}} 25%, {{{Background Colour 2}}} 75%); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, {{{Background Colour 1}}}), color-stop(75%, {{{Background Colour 2}}}));">
It works on Mozilla Firefox and Google Chrome. It doesn't work on Internet Explorer, and I'm not sure about Safari.
-R.A.B. 01:14, May 7, 2014 (UTC)
- Make sure your version of Internet Explorer is 10 or higher. -- sqm talk 05:56, 05.07.2014
- You need more than the older webkit and firefox syntax. You can use http://www.colorzilla.com/gradient-editor/ to generate an example gradient that you can copy paste over and substitute your parameters into. Don't enable ie9 support, you can't use url() in inline css because mediawiki will remove it due to security concerns. Note, any version of ie less than 10 has practically non-existent css3 support, so making this work for them is nigh impossible cqm 13:16, 7 May 2014 (UTC)
Do you mean that the code would be:
<div style="border: 3px {{{Rim}}} {{{Rim Colour}}};
color: {{{Text Colour}}};
border-radius: 3ex;
padding: 10px;
box-shadow: 0 0 10px 3px {{{Glow Colour}}};
-moz-linear-gradient(top, {{{Background Colour 1}}} 0%, {{{Background Colour 2}}} 100%);
-webkit-gradient(linear, left top, left bottom, color-stop(0%,{{{Background Colour 1}}}), color-stop(100%,{{{Background Colour 2}}}));
-webkit-linear-gradient(top, {{{Background Colour 1}}} 0%,{{{Background Colour 2}}} 100%);
-o-linear-gradient(top, {{{Background Colour 1}}} 0%,{{{Background Colour 2}}} 100%);
-ms-linear-gradient(top, {{{Background Colour 1}}} 0%,{{{Background Colour 2}}} 100%);
linear-gradient(to bottom, {{{Background Colour 1}}} 0%,{{{Background Colour 2}}} 100%);
progid:DXImageTransform.Microsoft.gradient( startColorstr='{{{Background Colour 1}}}', endColorstr='{{{Background Colour 2}}}',GradientType=0 );">