Button Generator Live Template

Custom Button %%name%%

This button was created by %%created_by%%.

To use this button on your wikidot site, copy the code below, and add it to your site's CSS. The new button will then be used on all wikidot buttons throughout your site (e.g. at the bottom of the wikidot editor). If you'd like to use the button for a custom link, just wrap the link in a span element with the class custom-button like this:

[[span class="custom-button"]][http://example.com Your Link Here][[/span]]

If you'd like to come back and edit this button in the future, you might like to bookmark this page, or alternatively copy this link: %%link%%. Your button will always be here, waiting for you…

====
[[form]]
fields:
  staticHeader:
    type: static
    value: "[[span class=\"header\"]]BMC Button Generator[[/span]]
  staticIntro:
    type: static
    value: "For the colour fields, only 3 or 6 digit hexadecimal colour codes are accepted, preceded by a hash (**#**). For example, **#fff** for white, or **#000** for black. Can't find the colour you're after? Try [http://0to255.com 0to255.com] to help choose a colour."
  backgroundColorTop:
    type: text
    label: Background - top gradient colour:
    hint: e.g. \#39c
    match: /^#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$/
    match-error: Please enter a valid hexadecimal colour code.
  backgroundColorBottom:
    type: text
    label: Background - bottom gradient colour:
    hint: e.g. \#3198dd
    match: /^#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$/
    match-error: Please enter a valid hexadecimal colour code.
  backgroundColorTopHover:
    type: text
    label: Hover state background - top gradient colour:
    hint: e.g. \#3232ff
    match: /^#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$/
    match-error: Please enter a valid hexadecimal colour code.
  backgroundColorBottomHover:
    type: text
    label: Hover state background - bottom gradient colour:
    hint: e.g. \#3322ee
    match: /^#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$/
    match-error: Please enter a valid hexadecimal colour code.
  textColor:
    type: text
    label: Text colour:
    hint: e.g. \#000
    match: /^#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$/
    match-error: Please enter a valid hexadecimal colour code.
  textColorHover:
    type: text
    label: Hover state - Text colour:
    hint: e.g. \#000
    match: /^#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$/
    match-error: Please enter a valid hexadecimal colour code.
  textSize:
    type: select
    label: Text size:
    values:
      10: 10
      12: 12
      14: 14
      16: 16
      18: 18
      20: 20
      22: 22
      24: 24
      26: 26
      28: 28
      30: 30
  font:
    type: select
    label: Font:
    values:
      Arial: Arial
      Helvetica: Helvetica
      Georgia: Georgia
      Verdana: Verdana
      Lucida: Lucida
      Courier: Courier
  borderWidth:
    type: select
    label: Display border?
    values:
      1: Yes
      0: No
  borderColor:
    type: text
    label: Border color:
    hint: e.g. \#de0000
    match: /^#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$/
    match-error: Please enter a valid hexadecimal colour code.
  borderRadius:
    type: select
    label: Border radius:
    values:
      0: none
      1: 1px
      2: 2px
      3: 3px
      4: 4px
      5: 5px
      6: 6px
      7: 7px
      8: 8px
      9: 9px
      10: 10px
  shadowOffset:
    type: select
    label: Shadow offset:
    values:
      0: 0
      1: 1px
      2: 2px
      3: 3px
      4: 4px
      5: 5px
      6: 6px
      7: 7px
      8: 8px
      9: 9px
      10: 10px
  shadowBlur:
    type: select
    label: Shadow blur:
    values:
      0: 0
      1: 1px
      2: 2px
      3: 3px
      4: 4px
      5: 5px
      6: 6px
      7: 7px
      8: 8px
      9: 9px
      10: 10px
  shadowDarkness:
    type: select
    label: Shadow darkness:
    values:
      0: 0
      1: 1
      2: 2
      3: 3
      4: 4
      5: 5
      6: 6
      7: 7
      8: 8
      9: 9
  paddingSize:
    type: select
    label: Padding size:
    values:
      0: 0
      1: 1
      2: 2
      3: 3
      4: 4
      5: 5
      6: 6
      7: 7
      8: 8
      9: 9
  buttonDepress:
    type: select
    label: make button depress when clicked?
    values:
      1: Yes
      0: No 
[[/form]]

Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.