Difference between revisions of "Template:RBX"

From Dissent
Jump to navigation Jump to search
(Documenting this so that more people than just me can use it)
(Listing defaults in documentation)
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>border:1px {{{border|#3F3F3F}}} solid; background:{{{legacy|#EFEFEF}}}; background-color:{{{legacy|#EFEFEF}}}; background:-moz-linear-gradient(top,{{{topcolor|#DFDFDF}}} 6%, {{{botcolor|#FFFFFF}}} 88%); background:-webkit-gradient(linear,left top,left bottom,color-stop(6%,{{{topcolor|#DFDFDF}}}), color-stop(88%,{{{botcolor|#FFFFFF}}})); background: -webkit-linear-gradient(top, {{{topcolor|#DFDFDF}}} 6%, {{{botcolor|#FFFFFF}}} 88%); background:-o-linear-gradient(top, {{{topcolor|#DFDFDF}}} 6%, {{{botcolor|#FFFFFF}}} 88%); background:-ms-linear-gradient(top, {{{topcolor|#DFDFDF}}} 6%, {{{botcolor|#FFFFFF}}} 88%); background:linear-gradient(top, {{{topcolor|#DFDFDF}}} 6%, {{{botcolor|#FFFFFF}}} 88%); -moz-border-radius:{{{radius|1em}}}; -khtml-border-radius:{{{radius|1em}}}; -opera-border-radius:{{{radius|1em}}}; border-radius:{{{radius|1em}}}; -webkit-border-radius: {{{webkit|1em}}}; -webkit-box-shadow:0.5em 0.5em 1em #000000; -moz-box-shadow: 0.5em 0.5em 1em #000000; box-shadow: 0.5em 0.5em 1em #000000; </includeonly><noinclude>
+
<includeonly>border:1px {{{border|#53565A}}} solid; background-color:{{{legacy|#D9D9D6}}}; background:{{{legacy|#D9D9D6}}}; background:-moz-linear-gradient(top,{{{topcolor|#D9D9D6}}} 6%, {{{botcolor|#FFFFFF}}} 88%); background:-webkit-gradient(linear,left top,left bottom,color-stop(6%,{{{topcolor|#D9D9D6}}}), color-stop(88%,{{{botcolor|#FFFFFF}}})); background: -webkit-linear-gradient(top, {{{topcolor|##D9D9D6}}} 6%, {{{botcolor|#FFFFFF}}} 88%); background:-o-linear-gradient(top, {{{topcolor|#DFDFDF}}} 6%, {{{botcolor|#FFFFFF}}} 88%); background:-ms-linear-gradient(top, {{{topcolor|#D9D9D6}}} 6%, {{{botcolor|#FFFFFF}}} 88%); background:linear-gradient(top, {{{topcolor|#D9D9D6}}} 6%, {{{botcolor|#FFFFFF}}} 88%); -moz-border-radius:{{{radius|1em}}}; -khtml-border-radius:{{{radius|1em}}}; -opera-border-radius:{{{radius|1em}}}; border-radius:{{{radius|1em}}}; -webkit-border-radius: {{{webkit|1em}}}; -webkit-box-shadow:0.5em 0.5em 1em #000000; -moz-box-shadow: 0.5em 0.5em 1em #000000; box-shadow: 0.5em 0.5em 1em #000000; </includeonly><noinclude>
  
 
CSS styling template.  Place inside a style attribute.
 
CSS styling template.  Place inside a style attribute.
 +
 +
Draws a rounded box with a 1px border and a gradient with a shadow.
 
__NOTOC__
 
__NOTOC__
 
==Settings==
 
==Settings==
*border: border color
+
*border: border color (Default: Cool Gray 11C)
*legacy: background color for non-CSS3 browsers
+
*legacy: solid background color for non-CSS3 browsers (Default: Cool Gray 1C)
*topcolor: color at the top of the background gradient
+
*topcolor: color at the top of the background gradient (Default: Cool Gray 1C)
*botcolor: color at the bottom of the background gradient
+
*botcolor: color at the bottom of the background gradient (Default: white)
*radius: radius of corners
+
*radius: radius of corners (Default: 1 em)
*webkit: radius of corners for browsers that respond to -webkit-border-radius
+
*webkit: radius of corners for browsers that respond to -webkit-border-radius (Default: 1 em)
 +
 
 +
Separate Webkit control is a bugfix for an early gradient and rounded corner bug that only affects transitional CSS3 Webkit browsers; try setting to zero or the same as the normal radius.
 +
 
  
 
==Examples==
 
==Examples==

Latest revision as of 23:08, 8 August 2017


CSS styling template. Place inside a style attribute.

Draws a rounded box with a 1px border and a gradient with a shadow.

Settings

  • border: border color (Default: Cool Gray 11C)
  • legacy: solid background color for non-CSS3 browsers (Default: Cool Gray 1C)
  • topcolor: color at the top of the background gradient (Default: Cool Gray 1C)
  • botcolor: color at the bottom of the background gradient (Default: white)
  • radius: radius of corners (Default: 1 em)
  • webkit: radius of corners for browsers that respond to -webkit-border-radius (Default: 1 em)

Separate Webkit control is a bugfix for an early gradient and rounded corner bug that only affects transitional CSS3 Webkit browsers; try setting to zero or the same as the normal radius.


Examples

Defaults

Taxation
is
Theft

<DIV style="width: 25em; text-align:center; {{RBX}}">
'''Taxation<BR/>is<BR/>Theft'''
</DIV>

Customized

Taxation
is
Theft

<DIV style="width: 25em; text-align:center; {{RBXNS | border=#FF007F | legacy=#DFDFDF | topcolor=#BF7F17 | botcolor=#177FBF | radius=2em | webkit=0}}">
'''Taxation<BR/>is<BR/>Theft'''
</DIV>