Fundraiser Widget

Link to article: Fundraiser Widget.

/* Copied from https://scp-wiki.wikidot.com/theme:black-highlighter-theme Page Source */

@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");

a[rel="license"]::after {
    content: ".";
}

/* Custom Page Specific Code */

.rec-table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0.5em 0.25em;
}
.rec-table td {
  border: 1px solid #888;
  padding: 0.3em 0.7em;
}
.rec-table th {
  border: 1px solid #888;
  padding: 0.3em 0.7em;
  background-color: #eee;
}
.opt-table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0.5em 0.25em;
}
.opt-table td {
  border: 1px solid #888;
  padding: 0.3em 0.7em;
}
.opt-table th {
  border: 1px solid #888;
  padding: 0.3em 0.7em;
  background-color: #eee;
}
.help-cont {
  font-size: 77%;
  line-height: 1.55;
  padding: 0.5rem 0.25rem 0.5rem 0.5rem;
  margin: 0.25rem 0;
  text-align: right;
  display: block;
}
@media (max-width: 600px ) {
  .help-cont {
    display: none;
  }
}
.code-cell, 
.page-source {
  border: 1px dashed #ddd;
  background-color: #f7f7f7;
  font-family: var(--mono-font, Recursive), Consolas, 
    'Andale Mono', 'Courier New', Courier, monaco, monospace;
  font-size: 77%;
  padding: .125rem;
}
.page-source {
  padding-left: .5rem;
  padding-right: .5rem;
}
.code {
  font-size: 77%;
  padding: 0.5rem;
  margin: 0.25rem 0;
}
.warning-banner {
  background: 
    url("https://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png") 
    center no-repeat; 
  float: center; 
  border: solid 2px #000; 
  padding: 1px 15px; 
  box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
}

```
display: none
```
```
display: none
```
```
vertical-align: top;
```
```
vertical-align: top;
```

```
blockquote
```
```
warning-banner
```
```
help-cont
```
```
rec-table
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
opt-table
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
opt-table
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
opt-table
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```
```
code-cell
```

[[iftags +component]]

[!-- ... --]

[[module CSS]]
/* Copied from https://scp-wiki.wikidot.com/theme:black-highlighter-theme Page Source */

@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");

a[rel="license"]::after {
    content: ".";
}

/* Custom Page Specific Code */

.rec-table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0.5em 0.25em;
}
.rec-table td {
  border: 1px solid #888;
  padding: 0.3em 0.7em;
}
.rec-table th {
  border: 1px solid #888;
  padding: 0.3em 0.7em;
  background-color: #eee;
}
.opt-table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0.5em 0.25em;
}
.opt-table td {
  border: 1px solid #888;
  padding: 0.3em 0.7em;
}
.opt-table th {
  border: 1px solid #888;
  padding: 0.3em 0.7em;
  background-color: #eee;
}
.help-cont {
  font-size: 77%;
  line-height: 1.55;
  padding: 0.5rem 0.25rem 0.5rem 0.5rem;
  margin: 0.25rem 0;
  text-align: right;
  display: block;
}
@media (max-width: 600px ) {
  .help-cont {
    display: none;
  }
}
.code-cell, 
.page-source {
  border: 1px dashed #ddd;
  background-color: #f7f7f7;
  font-family: var(--mono-font, Recursive), Consolas, 
    'Andale Mono', 'Courier New', Courier, monaco, monospace;
  font-size: 77%;
  padding: .125rem;
}
.page-source {
  padding-left: .5rem;
  padding-right: .5rem;
}
.code {
  font-size: 77%;
  padding: 0.5rem;
  margin: 0.25rem 0;
}
.warning-banner {
  background: 
    url("https://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png") 
    center no-repeat; 
  float: center; 
  border: solid 2px #000; 
  padding: 1px 15px; 
  box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
}
[[/module]]

[!-- Copied from https://scp-wiki.wikidot.com/component:interwiki-style Page Source --]
[!-- As used within https://scp-wiki.wikidot.com/theme:black-highlighter-theme Page Source --]
[[embed]]
<iframe src="//interwiki.scpwiki.com/styleFrame.html?priority=1&theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css" style="display: none"></iframe>
[[/embed]]
[[embed]]
<iframe src="//interwiki.scpwiki.com/styleFrame.html?priority=2&theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css" style="display: none"></iframe>
[[/embed]]

[[>]]
[[module Rate]]
[[/>]]

[[note]]
**Author:**
[[*user ChaosMageX]]
----
**With help from:**
[[*user aismallard]]
----
**With input from:**
[[*user stormbreath]], [[*user Woedenaz]] and [[*user CityToast]]
[[/note]]
----

[[<]]
[[div class="blockquote"]]
+++* Table of Contents
* [[size 110%]] [#introduction Introduction] [[/size]]
* [[size 110%]] [#blank-template Blank Template] [[/size]]
* [[size 110%]] [#params-list Parameters] [[/size]]
 * [#tier1params 1st Tier Parameters]
 * [#tier2params 2nd Tier Parameters]
 * [#tier3params 3rd Tier Parameters]
* [[size 110%]] [#examples-list Examples] [[/size]]
 * [#example1 Example 1]
 * [#example2 Example 2]
 * [#example3 Example 3]
* [[size 110%]] [#themes-list Alternate Themes] [[/size]]
 * [#theme-bhl Black Highlighter Theme]
 * [#theme-gfm GoFundMe Theme]
 * [#theme-igg IndieGoGo Theme]
 * [#theme-kstr Kickstarter Theme]
 * [#theme-kofi Ko-Fi Theme]
 * [#theme-custom Your Own Theme]
[[/div]]
[[/<]]

[[# introduction]]
+ Introduction

Behold, the **Fundraiser Widget**, for all your digital panhandling needs!

This Component is meant to be a really fancy looking, super customizable link to your money fundraiser hosted on an external, third-party website. It comes with a Progress Bar to mark the amount of money you've raised so far towards your ultimate financial goal. From simple occasional donations and tips to a full-blown project or campaign, this Component seeks to provide a visually appealing way to link to it on your own WikiDot page(s).

[[=]]
[[div class="warning-banner"]]
+* ATTENTION: READ BEFORE USE
----
+++* All use of this component must comply with \
the SCP Wiki's [[[donations-policy | Donations Policy]]]

**Please read that policy carefully before using this component on your page, \
and don't be afraid to [[[contact-staff#toc1 | Ask the Staff]]] \
to make sure your use of this component fully complies with the \
[[[donations-policy | Donations Policy]]].**
[[/div]]
[[/=]]

I initially designed this Component to be visually similar GoFundMe's own embed Widget for a fundraising campaign of mine that was running at the time I coded it. Instead of using GoFundMe's embed Widget, which contains social media trackers and other unwanted bloatware, I decided to create my own WikiDot Component that's visually inspired by the GoFundMe Widget and has similar functionality.

This is the result, which has gone far beyond making an imitation of the GoFundMe Widget. This component should now be versatile and customizable enough to be used for any fundraiser on any third party website.

----

[[# blank-template]]
+ Blank Template

Below is the most basic code needed to create the Fundraiser Widget on your page. 

Simply copy-paste the code and provide values for the first four parameters.

[[table]]
[[row]]

[[cell style="vertical-align: top;"]]
[[div_ class="help-cont"]]
Current amount of money raised ↦
Total amount of money desired ↦
Name of the Fundraiser ↦
Link to its website / main page ↦
Currency Symbol & Thousands Separator ↦
Image symbolizing the Fundraiser ↦
Link to its donation form page ↦
Name of the website hosting it ↦
**Short** description of its purpose ↦
[[/div]]
[[/cell]]

[[cell style="vertical-align: top;"]]
[[code]]
 [[include component:fundraiser-widget amt= 
 |goal= 
 |title= 
 |main_url= 
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= none
 |logo_text= @@@@
 |description= @@@@
 ]]
[[/code]]
[[/cell]]

[[/row]]
[[/table]]

----

[[# params-list]]
+ Parameters

The parameters are divided into three tiers, with **Tier 1** being required parameters, 
**Tier 2** being semi-optional parameters, and **Tier 3** being fully optional parameters.

----

[[# tier1params]]
++ 1st Tier Parameters:

These parameters are the core parameters of the Component, which define its purpose. 

They are **required** to have unique values specific to your fundraiser.

[[table class="rec-table"]]
[[row]]
[[hcell]] Parameter [[/hcell]]
[[hcell]] Description [[/hcell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] amt [[/cell]]
[[cell]]
The amount currently raised towards the goal amount, \
which controls the **Progress Bar** and appears in the **Progress Message**.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] goal [[/cell]]
[[cell]]
The ultimate goal amount of money for your fundraiser, \
which controls the **Progress Bar** and appears in the **Progress Message**.

If set to a negative number or zero, \
the **Progress Bar** and **Progress Message** will disappear.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] title [[/cell]]
[[cell]]
The name of your fundraiser, which is used for the **Title** text \
that also acts as the main link to the 3rd party website that hosts your fundraiser.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] main_url [[/cell]]
[[cell]]
The link to your fundraiser's main page on the 3rd party website hosting it. 
[[/cell]]
[[/row]]
[[/table]]

----

[[# tier2params]]
++ 2nd Tier Parameters:

These parameters must be included for the Component to function, \
but can be left with their default values, unless you want to override them.

**Semi-Optional** is simply my term for parameters that are still required to be included, \
but have been provided values in the [#blank-template Blank Template] that don't need to be changed, \
unless you want or need to change them.

That's why this table includes a **Default Value** column.

[[table class="opt-table"]]
[[row]]
[[hcell]] Parameter [[/hcell]]
[[hcell]] Default [[/hcell]]
[[hcell]] Description [[/hcell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] curr_sym [[/cell]]
[[cell class="code-cell"]] $ [[/cell]]
[[cell]]
The currency symbol that's prepended to the amount raised \
and the goal amount in the **Progress Message**. 

Examples include the USD ([[span class="code-cell"]] $ [[/span]]), \
the GBP ([[span class="code-cell"]] £ [[/span]]), \
and the Euro ([[span class="code-cell"]] € [[/span]]).
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] num_sep [[/cell]]
[[cell class="code-cell"]] , [[/cell]]
[[cell]]
The separator for thousands and millions on the amount raised \
and the goal amount in the **Progress Message**. 

Examples include the comma ([[span class="code-cell"]] , [[/span]]) \
and the period ([[span class="code-cell"]] . [[/span]]) for some.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] image_url [[/cell]]
[[cell class="code-cell"]] none [[/cell]]
[[cell]]
The link to an online image file of a picture that represents your fundraiser.

This image will also serve as a \
[[span class="code-cell"]] main_url [[/span]] link when clicked.

If you don't have or want an image, use a value of \
[[span class="code-cell"]] none [[/span]] to make it disappear.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] donate_url [[/cell]]
[[cell class="code-cell"]] none [[/cell]]
[[cell]]
The link to your fundraiser's donation page on the 3rd party website hosting it, \
which the **Donate Button** will link to. 

If you don't have a direct donation link, use a value of \
[[span class="code-cell"]] none [[/span]] and the **Donate Button** will link to the \
[[span class="code-cell"]] main_url [[/span]] instead.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] logo_text [[/cell]]
[[cell class="code-cell"]] @@@@@@@@ [[/cell]]
[[cell]]
The name of the fundraising website that you're using, \
which appears next to the **Donate Button**.[[footnote]]

**Disclaimer:** The Fundraiser Widget's "**Logo**" is just some colored text with a freely available font and not any kind of visually distinct (or licensed) imagery. It's simply an optional way of giving credit to the 3rd party website hosting your fundraiser without using any imagery from that website, which would likely be licensed exclusively to that website.
[[/footnote]]

If you don't want a logo, use a value of \
[[span class="code-cell"]] @@@@@@@@ [[/span]] to make it blank.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] description [[/cell]]
[[cell class="code-cell"]] @@@@@@@@ [[/cell]]
[[cell]]
A **short** description of your fundraiser, \
which will be placed between the **Progress Message** and the **Donate Button**.

If you don't want a description, use a value of \
[[span class="code-cell"]] @@@@@@@@ [[/span]] to make it blank.
[[/cell]]
[[/row]]
[[/table]]

----

[[# tier3params]]
++ 3rd Tier Parameters:

These parameters are truly **optional**, and can be completely omitted from the 

[[span class="code-cell"]] @@ [[include component:fundraiser-widget]] @@ [[/span]] 

statement on your page without any adverse effects, \
unless you want to give them unique values.

[[table class="opt-table"]]
[[row]]
[[hcell]] Parameter [[/hcell]]
[[hcell]] Description [[/hcell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] shape [[/cell]]
[[cell]]
Use this parameter to adjust this Component's shape and structure.

Use a value of [[span class="code-cell"]] BHL [[/span]] \
to adjust the Widget's shape to more closely match that of the \
[[[theme:black-highlighter-theme | Black Highlighter Theme]]], \
which removes the rounded corners and exterior shadow, \
and adds a sliding hover overlay to the **Donate Button** \
(and the Title Button if [[span class="code-cell"]] title_button= true [[/span]]).

See the [#themes-list Alternate Themes] section for more details and examples.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] theme [[/cell]]
[[cell]]
Use this parameter to change this Component's color scheme from the default theme \
to one that matches the 3rd party website hosting your fundraiser, or \
to one that matches the [[[theme:black-highlighter-theme | BHL theme]]] or \
to the [[[black-highlighter-themes | BHL-derived theme]]] \
you're using for the page that will contain this Widget.

See the [#themes-list Alternate Themes] section for more details and examples.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] title_button [[/cell]]
[[cell]]
Use a value of [[span class="code-cell"]] true [[/span]] \
to style this Component's Title to look like a button.

This is combined with the [[span class="code-cell"]] @@--fr-title-bg-@@ [[/span]] and \
[[span class="code-cell"]] @@--fr-title-border-@@ [[/span]] optional style variables, \
which are overridden by the Themes and you can override as well.

See the [#themes-list Alternate Themes] section for more details and examples.

See the [#theme-custom Your Own Theme] section for specific details about the \
[[span class="code-cell"]] @@--fr-title-bg-@@ [[/span]] and \
[[span class="code-cell"]] @@--fr-title-border-@@ [[/span]] optional style variables, \
which you can also override and specify yourself, if you know how to use CSS.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] hide_desc [[/cell]]
[[cell]]
Use a value of [[span class="code-cell"]] true [[/span]] \
to completely hide the description.

Useful for hiding the whitespace between the **Progress Message** and **Donate Button** \
that's created by a blank [[span class="code-cell"]] @@@@@@@@ [[/span]] description.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] hide_donate [[/cell]]
[[cell]]
Use a value of [[span class="code-cell"]] true [[/span]] \
to completely hide the **Donate Button** and the "Logo" next to it.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] aux_class [[/cell]]
[[cell]]
An additional **auxiliary** class added to \
major elements of this Component, which allows you to further override \
the style and behavior of a specific instance of this Component.

Use white-spaces to add multiple classes.

This parameter is really only for people who know how to use CSS, \
and useful for when you have multiple instances of the widget on the same page, \
but need them to have a differing appearance beyond what's specified by the \
[[span class="code-cell"]] shape [[/span]] and \
[[span class="code-cell"]] theme [[/span]] parameters.
[[/cell]]
[[/row]]
[[/table]]

These parameters pertain to the optional **Title** and **Donate Button** Icons.

This optional feature was inspired by the animated icon in the Ko-Fi Donate Button embed.

[[table class="opt-table"]]
[[row]]
[[hcell]] Parameter [[/hcell]]
[[hcell]] Description [[/hcell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] title_icon_name [[/cell]]
[[cell]]
Use a value consisting of **letters and numbers only** to create a \
unique name with **NO whitespaces or special characters**, which will \
cause an icon to be placed to the left of the **Title / Title Button** text.

This icon's appearance depends on the values of the next two parameters.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] title_icon_anim [[/cell]]
[[cell]]
The animation applied to the icon, which must follow the syntax of the CSS3 \
[[[https://www.w3schools.com/css/css3_animations.asp | animation:]]] property, \
and use a defined CSS3 [[span class="code-cell"]] @keyframes [[/span]] Rule.

Use a value of [[span class="code-cell"]] icon-wiggle 3s infinite [[/span]] \
to use this Widget's one pre-defined animation, which makes the icon grow slightly, \
shake twice, and then shrink back down every 3 seconds.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] title_icon_url [[/cell]]
[[cell]]
The link to the **Title / Title Button** Icon's image file, \
which will be shrunken down to about 30 × 30 pixels.

If this parameter is omitted or invalid, \
you'll just get a blank space to the left of the **Title** text.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] donate_icon_name [[/cell]]
[[cell]]
Use a value consisting of **letters and numbers only** to create a \
unique name with **NO whitespaces or special characters**, which will \
cause an icon to be placed to the left of the **Donate Button** text.

This icon's appearance depends on the values of the next two parameters.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] donate_icon_anim [[/cell]]
[[cell]]
Similar to the [[span class="code-cell"]] title_icon_anim [[/span]] parameter, \
but applied to the icon in the **Donate Button** instead.

See the above description of the \
[[span class="code-cell"]] title_icon_anim [[/span]] parameter \
for instructions on how to use this parameter.
[[/cell]]
[[/row]]
[[row]]
[[cell class="code-cell"]] donate_icon_url [[/cell]]
[[cell]]
The link to the **Donate Button** Icon's image file, \
which will be shrunken down to about 20 × 20 pixels.

If this parameter is omitted or invalid, \
you'll just get a blank space to the left of the **Donate Button** text.
[[/cell]]
[[/row]]
[[/table]]

----

[[# examples-list]]
+ Examples

Below are examples showing how the Fundraiser Widget will appear \
with its default theme, based on the parameter values given.

**Note:** Some examples use the [[span class="code-cell"]] @@ \ @@ [[/span]] character \
at the end of some lines in the [[span class="code-cell"]] description [[/span]] \
parameter value. This is WikiDot's newline character, which allows you to write multiple \
lines of code that will be compiled into a single line/paragraph in the resulting page. \
This character is not necessary for the Component to function properly when given \
a multi-line value for any parameter, and I've merely used it some of the examples \
in order to make their code easier to read and copy.

----

[[# example1]]
++ Example 1:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 1000
 |goal= 10000
 |title= Medical Bills
 |main_url= https://www.gofundme.com/f/medical-bills
 |curr_sym=$|num_sep=,
 |image_url= http://scp-wiki.wikidot.com/local--files/your-page/MedicalBills.png
 |donate_url= https://www.gofundme.com/f/medical-bills/donate
 |logo_text= GoFundMe
 |description= Please help me pay what my health insurance won't pay.
 ]]
[[/code]]

[[/collapsible]]

Creates the full widget, which closely resembles GoFundMe's own embed Widget.

[[include component:fundraiser-widget-source amt= 1000
|goal= 10000
|title= Medical Bills
|main_url= https://www.gofundme.com/f/medical-bills
|curr_sym=$|num_sep=,
|image_url= 
http://scp-wiki.wikidot.com/local--files/component:fundraiser-widget/MedicalBills.png
|donate_url= https://www.gofundme.com/f/medical-bills/donate
|logo_text= GoFundMe
|description= Please help me pay what my health insurance won't pay.
]]

----

[[# example2]]
++ Example 2:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 2000
 |goal= 1500
 |title= Help Me Buy a New Stove
 |main_url= https://www.gofundme.com/f/new-stove
 |curr_sym=€|num_sep=.
 |image_url= none
 |donate_url= https://www.gofundme.com/f/new-stove/donate
 |logo_text= @@@@
 |description= @@@@
 |hide_desc= true
 ]]
[[/code]]

[[/collapsible]]

Creates a minimalist widget without an image, logo, or description, \
but with a custom currency symbol and number separator.

[[include component:fundraiser-widget-source amt= 2000
|goal= 1500
|title= Help Me Buy a New Stove
|main_url= https://www.gofundme.com/f/new-stove
|curr_sym=€|num_sep=.
|image_url= none
|donate_url= https://www.gofundme.com/f/new-stove/donate
|logo_text= @@@@
|description= @@@@
|hide_desc= true
]]

----

[[# example3]]
++ Example 3:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 173
 |goal= 17300
 |shape= BHL
 |title= Fund My Art Project
 |main_url= https://www.gofundme.com/f/art-project
 |curr_sym=£|num_sep=,
 |image_url= none
 |donate_url= https://www.gofundme.com/f/art-project/donate
 |logo_text= GOFUNDME
 |description= Help fund my latest artist endeavor! \
 I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
 It promises to entice and delight!
 See the links on the fundraiser page to my online portfolios for proof of my skills.
 ]]
[[/code]]

[[/collapsible]]

Creates a widget without an image, with a custom currency symbol, \
and with an altered shape that's similar to the \
[[[theme:black-highlighter-theme | Black Highlighter Theme]]].

[[include component:fundraiser-widget-source amt= 173
|goal= 173000
|shape= BHL
|title= Fund My Art Project
|main_url= https://www.gofundme.com/f/art-project
|curr_sym=£|num_sep=,
|image_url= none
|donate_url= https://www.gofundme.com/f/art-project/donate
|logo_text= GOFUNDME
|description= Help fund my latest artist endeavor! \
I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.
]]

----

[[# themes-list]]
+ Alternate Themes

Below are examples of alternate themes that can match the color schemes \
of various well-known 3rd Party Fundraiser Websites, or match the color scheme of the \
[[[theme:black-highlighter-theme | BHL theme]]] or the \
[[[black-highlighter-themes | BHL-derived theme]]] \
you're using for the page that will contain this Component.

----

[[# theme-bhl]]
++ Black Highlighter Theme:

Set [[span class="code-cell"]] theme [[/span]] to any of these values:
* [[span class="code-cell"]] Black-Highlighter [[/span]]
* [[span class="code-cell"]] BlackHighlighter [[/span]]
* [[span class="code-cell"]] BHL [[/span]]

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 500
 |goal= 17300
 |shape= BHL
 |theme= BHL
 |title= Fund My Art Project
 |main_url= https://www.gofundme.com/f/art-project
 |curr_sym=£|num_sep=,
 |image_url= none
 |donate_url= https://www.gofundme.com/f/art-project/donate
 |logo_text= GoFundMe
 |description= Help fund my latest artist endeavor! \
 I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
 It promises to entice and delight!
 See the links on the fundraiser page to my online portfolios for proof of my skills.
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 500
|goal= 17300
|shape= BHL
|theme= BHL
|title= Fund My Art Project
|main_url= https://www.gofundme.com/f/art-project
|curr_sym=£|num_sep=,
|image_url= none
|donate_url= https://www.gofundme.com/f/art-project/donate
|logo_text= GoFundMe
|description= Help fund my latest artist endeavor! \
I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.
]]



And if you're curious what happens if you set \
[[span class="code-cell"]] theme= BHL [[/span]], but don't set \
[[span class="code-cell"]] shape= BHL [[/span]], here's the code and result:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 963
 |goal= 17300
 |theme= Black-Highlighter
 |title= Fund My Art Project
 |main_url= https://www.gofundme.com/f/art-project
 |curr_sym=£|num_sep=,
 |image_url= none
 |donate_url= https://www.gofundme.com/f/art-project/donate
 |logo_text= GoFundMe
 |description= Help fund my latest artist endeavor! \
 I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
 It promises to entice and delight!
 See the links on the fundraiser page to my online portfolios for proof of my skills.
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 963
|goal= 17300
|theme= Black-Highlighter
|title= Fund My Art Project
|main_url= https://www.gofundme.com/f/art-project
|curr_sym=£|num_sep=,
|image_url= none
|donate_url= https://www.gofundme.com/f/art-project/donate
|logo_text= GoFundMe
|description= Help fund my latest artist endeavor! \
I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.
]]

----

[[# theme-gfm]]
++ GoFundMe Theme:

For GoFundMe, your [[span class="code-cell"]] main_url [[/span]] \
is your GoFundMe Fundraiser main page, and your \
[[span class="code-cell"]] donate_url [[/span]] is your \
[[span class="code-cell"]] main_url [[/span]] with \
[[span class="code-cell"]] /donate [[/span]] appended to the end of it.

Set [[span class="code-cell"]] theme [[/span]] to any of these values:
* [[span class="code-cell"]] GoFundMe [[/span]]
* [[span class="code-cell"]] GFM [[/span]]

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 1730
 |goal= 17300
 |theme= GoFundMe
 |title= Fund My Art Project
 |main_url= https://www.gofundme.com/f/art-project
 |curr_sym=£|num_sep=,
 |image_url= none
 |donate_url= https://www.gofundme.com/f/art-project/donate
 |logo_text= gofundme
 |description= Help fund my latest artist endeavor! \
 I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
 It promises to entice and delight!
 See the links on the fundraiser page to my online portfolios for proof of my skills.
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 1730
|goal= 17300
|theme= GoFundMe
|title= Fund My Art Project
|main_url= https://www.gofundme.com/f/art-project
|curr_sym=£|num_sep=,
|image_url= none
|donate_url= https://www.gofundme.com/f/art-project/donate
|logo_text= gofundme
|description= Help fund my latest artist endeavor! \
I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.
]]



With the [[[theme:black-highlighter-theme | BHL Theme]]] shape adjustment enabled:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 2254
 |goal= 17300
 |shape= BHL
 |theme= GFM
 |title= Fund My Art Project
 |main_url= https://www.gofundme.com/f/art-project
 |curr_sym=£|num_sep=,
 |image_url= none
 |donate_url= https://www.gofundme.com/f/art-project/donate
 |logo_text= gofundme
 |description= Help fund my latest artist endeavor! \
 I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
 It promises to entice and delight!
 See the links on the fundraiser page to my online portfolios for proof of my skills.
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 2254
|goal= 17300
|shape= BHL
|theme= GFM
|title= Fund My Art Project
|main_url= https://www.gofundme.com/f/art-project
|curr_sym=£|num_sep=,
|image_url= none
|donate_url= https://www.gofundme.com/f/art-project/donate
|logo_text= gofundme
|description= Help fund my latest artist endeavor! \
I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.
]]

----

[[# theme-igg]]
++ IndieGoGo Theme:

For IndieGoGo, both your [[span class="code-cell"]] main_url [[/span]] \
is your IndieGoGo Project main page, and your \
[[span class="code-cell"]] donate_url [[/span]] is \
[[span class="code-cell"]] none [[/span]], \
because IndieGoGo doesn't have a separate donation form page, \
at least to my knowledge, instead opting to put that form in a modal dialog.

Set [[span class="code-cell"]] theme [[/span]] to any of these values:
* [[span class="code-cell"]] IndieGoGo [[/span]]
* [[span class="code-cell"]] IGG [[/span]]

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 3000
 |goal= 17300
 |theme= IndieGoGo
 |title= Statue Art Project
 |main_url= https://www.indiegogo.com/projects/art-project/
 |curr_sym=€|num_sep=.
 |image_url= none
 |donate_url= none
 |logo_text= INDIEGOGO
 |description= Help fund my latest artistic endeavor! \
 I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
 It promises to entice and delight!
 See the links on the fundraiser page to my online portfolios for proof of my skills.
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 3000
|goal= 17300
|theme= IndieGoGo
|title= Statue Art Project
|main_url= https://www.indiegogo.com/projects/art-project/
|curr_sym=€|num_sep=.
|image_url= none
|donate_url= none
|logo_text= INDIEGOGO
|description= Help fund my latest artistic endeavor! \
I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.
]]



With the [[[theme:black-highlighter-theme | BHL Theme]]] shape adjustment enabled:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 4840
 |goal= 17300
 |shape= BHL
 |theme= IGG
 |title= Statue Art Project
 |main_url= https://www.indiegogo.com/projects/art-project/
 |curr_sym=€|num_sep=.
 |image_url= none
 |donate_url= none
 |logo_text= INDIEGOGO
 |description= Help fund my latest artistic endeavor! \
 I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
 It promises to entice and delight!
 See the links on the fundraiser page to my online portfolios for proof of my skills.
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 4840
|goal= 17300
|shape= BHL
|theme= IGG
|title= Statue Art Project
|main_url= https://www.indiegogo.com/projects/art-project/
|curr_sym=€|num_sep=.
|image_url= none
|donate_url= none
|logo_text= INDIEGOGO
|description= Help fund my latest artistic endeavor! \
I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.
]]

----

[[# theme-kstr]]
++ Kickstarter Theme:

For Kickstarter, your [[span class="code-cell"]] main_url [[/span]] \
is your Kickstarter Project main page, and your \
[[span class="code-cell"]] donate_url [[/span]] is your \
[[span class="code-cell"]] main_url [[/span]] with \
[[span class="code-cell"]] /pledge/new?clicked_reward=false [[/span]] \
appended to the end of it.

Set [[span class="code-cell"]] theme [[/span]] to any of these values:
* [[span class="code-cell"]] KickStarter [[/span]]
* [[span class="code-cell"]] KS [[/span]]

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 6090
 |goal= 17300
 |theme= KickStarter
 |title= Statue Art Project
 |main_url= https://www.kickstarter.com/projects/ikky/art-project
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= 
 https://www.kickstarter.com/projects/ikky/art-project/pledge/new?clicked_reward=false
 |logo_text= KICKSTARTER
 |description= Help fund my latest artistic endeavor! \
 I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
 It promises to entice and delight!
 See the links on the fundraiser page to my online portfolios for proof of my skills.
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 6090
|goal= 17300
|theme= KickStarter
|title= Statue Art Project
|main_url= https://www.kickstarter.com/projects/ikky/art-project
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= 
https://www.kickstarter.com/projects/ikky/art-project/pledge/new?clicked_reward=false
|logo_text= KICKSTARTER
|description= Help fund my latest artistic endeavor! \
I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.
]]



With the [[[theme:black-highlighter-theme | BHL Theme]]] shape adjustment enabled:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 6666
 |goal= 17300
 |shape= BHL
 |theme= KS
 |title= Statue Art Project
 |main_url= https://www.kickstarter.com/projects/ikky/art-project
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= 
 https://www.kickstarter.com/projects/ikky/art-project/pledge/new?clicked_reward=false
 |logo_text= KICKSTARTER
 |description= Help fund my latest artistic endeavor! \
 I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
 It promises to entice and delight!
 See the links on the fundraiser page to my online portfolios for proof of my skills.
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 6666
|goal= 17300
|shape= BHL
|theme= KS
|title= Statue Art Project
|main_url= https://www.kickstarter.com/projects/ikky/art-project
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= 
https://www.kickstarter.com/projects/ikky/art-project/pledge/new?clicked_reward=false
|logo_text= KICKSTARTER
|description= Help fund my latest artistic endeavor! \
I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.
]]

----

[[# theme-kofi]]
++ Ko-Fi Theme:

For Ko-Fi, to get your donation link, \
first create your **Ko-Fi Button** elsewhere using their embed code.

Then right-click on it, choose "Copy link address" in the drop-down menu, \
and paste this link into the [[span class="code-cell"]] main_url [[/span]] parameter.

Keep the [[span class="code-cell"]] none [[/span]] value for the \
[[span class="code-cell"]] donate_url [[/span]] parameter.

Don't forget to set the [[span class="code-cell"]] goal [[/span]] parameter \
to zero to hide the progress bar, since Ko-Fi doesn't support monetary goals. \
However, I've created a progess bar color palette that matches the Ko-Fi color scheme, \
if you still want to set up a monetary goal. \
Just keep in mind that you'll have to track the progress towards that goal manually, \
on your own, in a ledger somewhere.

Set [[span class="code-cell"]] theme [[/span]] to any of these values:
* [[span class="code-cell"]] Ko-Fi [[/span]]
* [[span class="code-cell"]] KoFi [[/span]]

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 0
 |goal= 0
 |theme= Ko-Fi
 |title= Support Me on Ko-Fi
 |title_button= true
 |main_url= https://ko-fi.com/ZzZzZzZzZ
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= none
 |logo_text= Ko-Fi
 |description= @@@@
 |hide_desc= true
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 0
|goal= 0
|theme= Ko-Fi
|title= Support Me on Ko-Fi
|title_button= true
|main_url= https://ko-fi.com/ZzZzZzZzZ
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= none
|logo_text= Ko-Fi
|description= @@@@
|hide_desc= true
]]



With the [[[theme:black-highlighter-theme | BHL Theme]]] shape adjustment enabled:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 0
 |goal= 0
 |shape= BHL
 |theme= KoFi
 |title= Support Me on Ko-Fi
 |title_button= true
 |main_url= https://ko-fi.com/ZzZzZzZzZ
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= none
 |logo_text= Ko-Fi
 |description= @@@@
 |hide_desc= true
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 0
|goal= 0
|shape= BHL
|theme= KoFi
|title= Support Me on Ko-Fi
|title_button= true
|main_url= https://ko-fi.com/ZzZzZzZzZ
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= none
|logo_text= Ko-Fi
|description= @@@@
|hide_desc= true
]]



With the **Title** not turned into a button, and the **Progress Bar** enabled, \
for those curious about the appearance:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 76
 |goal= 100
 |theme= KoFi
 |title= Support Me on Ko-Fi
 |main_url= https://ko-fi.com/ZzZzZzZzZ
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= none
 |logo_text= Ko-Fi
 |description= @@@@
 |hide_desc= true
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 76
|goal= 100
|theme= KoFi
|title= Support Me on Ko-Fi
|main_url= https://ko-fi.com/ZzZzZzZzZ
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= none
|logo_text= Ko-Fi
|description= @@@@
|hide_desc= true
]]



With the [[[theme:black-highlighter-theme | Black Highlighter Theme]]] fully enabled:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 0
 |goal= 0
 |shape= bhl
 |theme= BHL
 |title= Support Me on Ko-Fi
 |title_button= true
 |main_url= https://ko-fi.com/ZzZzZzZzZ
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= none
 |logo_text= Ko-Fi
 |description= @@@@
 |hide_desc= true
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 0
|goal= 0
|shape= bhl
|theme= BHL
|title= Support Me on Ko-Fi
|title_button= true
|main_url= https://ko-fi.com/ZzZzZzZzZ
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= none
|logo_text= Ko-Fi
|description= @@@@
|hide_desc= true
]]



With the **Donate Button** hidden:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 0
 |goal= 0
 |theme= Ko-Fi
 |title= Support Me on Ko-Fi
 |title_button= true
 |main_url= https://ko-fi.com/ZzZzZzZzZ
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= none
 |logo_text= Ko-Fi
 |description= @@@@
 |hide_desc= true
 |hide_donate= true
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 0
|goal= 0
|theme= Ko-Fi
|title= Support Me on Ko-Fi
|title_button= true
|main_url= https://ko-fi.com/ZzZzZzZzZ
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= none
|logo_text= Ko-Fi
|description= @@@@
|hide_desc= true
|hide_donate= true
]]



With the **Donate Button** hidden and an additional wiggling icon:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 0
 |goal= 0
 |theme= Ko-Fi
 |title= Support Me on Ko-Fi
 |title_button= true
 |main_url= https://ko-fi.com/ZzZzZzZzZ
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= none
 |logo_text= Ko-Fi
 |description= @@@@
 |hide_desc= true
 |hide_donate= true
 |title_icon_name= kofi2
 |title_icon_anim= icon-wiggle 3s infinite
 |title_icon_url= 
 http://scp-wiki.wikidot.com/local--files/component:fundraiser-widget/scp-heart.svg
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 0
|goal= 0
|theme= Ko-Fi
|title= Support Me on Ko-Fi
|title_button= true
|main_url= https://ko-fi.com/ZzZzZzZzZ
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= none
|logo_text= Ko-Fi
|description= @@@@
|hide_desc= true
|hide_donate= true
|title_icon_name= kofi2
|title_icon_anim= icon-wiggle 3s infinite
|title_icon_url= 
http://scp-wiki.wikidot.com/local--files/component:fundraiser-widget/scp-heart.svg
]]



With the [[[theme:black-highlighter-theme | BHL Theme]]] style adjustment enabled, \
an animated icon on the **Title** button, and a static icon on the **Donate Button**:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 0
 |goal= 0
 |shape= BHL
 |theme= Ko-Fi
 |title= Support Me on Ko-Fi
 |title_button= true
 |main_url= https://ko-fi.com/ZzZzZzZzZ
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= none
 |logo_text= Ko-Fi
 |description= @@@@
 |hide_desc= true
 |title_icon_name= kofi3
 |title_icon_anim= icon-wiggle 3s infinite
 |title_icon_url= 
 http://scp-wiki.wikidot.com/local--files/component:fundraiser-widget/scp-dollar.svg
 |donate_icon_name= kofi3
 |donate_icon_url= 
 http://scp-wiki.wikidot.com/local--files/component:fundraiser-widget/scp-heart.svg
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 0
|goal= 0
|shape= BHL
|theme= Ko-Fi
|title= Support Me on Ko-Fi
|title_button= true
|main_url= https://ko-fi.com/ZzZzZzZzZ
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= none
|logo_text= Ko-Fi
|description= @@@@
|hide_desc= true
|title_icon_name= kofi3
|title_icon_anim= icon-wiggle 3s infinite
|title_icon_url= 
http://scp-wiki.wikidot.com/local--files/component:fundraiser-widget/scp-dollar.svg
|donate_icon_name= kofi3
|donate_icon_url= 
http://scp-wiki.wikidot.com/local--files/component:fundraiser-widget/scp-heart.svg
]]



With the **Progress Bar** enabled, and a wiggling icon on the **Donate Button**:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 120
 |goal= 500
 |theme= Ko-Fi
 |title= Support Me on Ko-Fi
 |main_url= https://ko-fi.com/ZzZzZzZzZ
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= none
 |logo_text= Ko-Fi
 |description= @@@@
 |hide_desc= true
 |donate_icon_name= kofi4
 |donate_icon_anim= icon-wiggle 3s infinite
 |donate_icon_url= 
 http://scp-wiki.wikidot.com/local--files/component:fundraiser-widget/scp-diamond.svg
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 120
|goal= 500
|theme= Ko-Fi
|title= Support Me on Ko-Fi
|main_url= https://ko-fi.com/ZzZzZzZzZ
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= none
|logo_text= Ko-Fi
|description= @@@@
|hide_desc= true
|donate_icon_name= kofi4
|donate_icon_anim= icon-wiggle 3s infinite
|donate_icon_url= 
http://scp-wiki.wikidot.com/local--files/component:fundraiser-widget/scp-diamond.svg
]]

----

[[# theme-custom]]
++ Your Own Theme

Below are the CSS style variables used by this widget, \
which are overridden by the above **Themes** \
to give the widget a unique set of fonts and colors.

If you know how to use CSS modules in your page, \
and wish to create your own color scheme for this widget, \
you can override these variables within the \
[[span class="code-cell"]] :root { } [[/span]] rule \
of one of your page's CSS modules.

Simply copy the parts of the code below that you wish to change, \
and change the variable values appropriately.

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code type="css"]]
:root {

/* Widget Typefaces */
--fr-title-font: verdana, arial, helvetica, sans-serif;
--fr-body-font: verdana, arial, helvetica, sans-serif;
--fr-logo-font: verdana, arial, helvetica, sans-serif;

/* BHL Title Typeface, used for the title link when BHL= true */

/* Widget Base Colors */
--fr-widget-bg-color: 255, 255, 255;
--fr-widget-border-color: 102, 0, 0;

/* Title Link Text Colors */
--fr-title-color: 187, 0, 17;
--fr-title-hover: 212, 0, 18;

/* Title Button Colors when Inactive, when title_button= true */
--fr-title-btn-color: 187, 0, 17;
--fr-title-btn-color-border: 102, 0, 0;
--fr-title-btn-color-bg1: 255, 240, 240;
--fr-title-btn-color-bg2: 247, 233, 236;
--fr-title-btn-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-color-bg1)) 40%,
  rgb(var(--fr-title-btn-color-bg2)) 140%);

/* Title Button Colors when Hovered Over, when title_button= true */
--fr-title-btn-hover: 212, 0, 18;
--fr-title-btn-hover-border: 102, 0, 0;
--fr-title-btn-hover-bg1: 204, 192, 192;
--fr-title-btn-hover-bg2: 196, 185, 188;
--fr-title-btn-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-hover-bg1)) 40%,
  rgb(var(--fr-title-btn-hover-bg2)) 140%);

/* Title Button Sliding Hover Overlay, when title_button= true & shape= BHL */
--fr-title-btn-accent: 133, 0, 5;

/* Progress Bar Colors */
--fr-progress-bar-color: 102, 0, 0;
--fr-progress-bar-bg-color: 230, 246, 239;

/* Text Color of the current Amount Raised */
--fr-progress-text-color: 102, 0, 0;

/* Text Color of the rest of the Progress Message */
--fr-progress-goal-color: 150, 150, 150;

/* Text Color of the Description */
--fr-description-color: 50, 50, 50;

/* Donate Button Colors when Inactive */
--fr-donate-color: 170, 0, 17;
--fr-donate-color-border: 102, 0, 0;
--fr-donate-color-bg1: 255, 240, 240;
--fr-donate-color-bg2: 247, 233, 236;
--fr-donate-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-color-bg1)) 40%,
  rgb(var(--fr-donate-color-bg2)) 140%);
  
/* Donate Button Colors when Hovered Over */
--fr-donate-hover: 196, 0, 20;
--fr-donate-hover-border: 102, 0, 0;
--fr-donate-hover-bg1: 204, 192, 192;
--fr-donate-hover-bg2: 196, 185, 188;
--fr-donate-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-hover-bg1)) 40%,
  rgb(var(--fr-donate-hover-bg2)) 140%);

/* Donate Button Sliding Hover Overlay, when shape= BHL */
--fr-donate-accent: 133, 0, 5;

/* Text Color of the "Logo" next to the Donate Button */
--fr-logo-color: 0, 73, 119;

}
[[/code]]

[[/collapsible]]

You can also create multiple new themes for different instances, \
by putting the altered variables inside a selector block named \
[[span class="code-cell"]] @@.fr-widget.theme-fr-@@ [[/span]], \
followed by the name of your theme, instead of the \
[[span class="code-cell"]] :root [[/span]] selector block, \
and then set the [[span class="code-cell"]] theme [[/span]] \
parameter to your theme's name.

+++ Example:

Create a [[span class="code-cell"]] latte [[/span]] theme with earth tones:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

Include this code inside a [[span class="code-cell"]] @@[[module CSS]]@@ [[/span]] \
block somewhere on your page:

[[module CSS show="true"]]
@import url('https://fonts.googleapis.com/css2?family=Georama&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Palette+Mosaic&display=swap');

.fr-widget.theme-fr-latte {

/* Widget Typefaces */
--fr-title-font: Georama, verdana, arial, helvetica, sans-serif;
--fr-body-font: Georama, verdana, arial, helvetica, sans-serif;
--fr-logo-font: Palette Mosaic, classic-comic, Comic Sans MS, Comic Sans, cursive;

/* BHL Title Typeface, used for the title link when BHL= true */

/* Widget Base Colors */
--fr-widget-bg-color: 255, 238, 204; /* hsv: 40°, 20%, 100% */
--fr-widget-border-color: 51, 34, 10; /* hsv: 35°, 80%, 20% */

/* Title Link Text Colors */
--fr-title-color: 102, 77, 41; /* hsv: 35°, 60%, 40% */
--fr-title-hover: 153, 115, 61; /* hsv: 35°, 60%, 60% */

/* Title Button Colors when Inactive, when title_button= true */
--fr-title-btn-color: 51, 30, 0; /* hsv: 35°, 100%, 20% */
--fr-title-btn-color-border: 51, 34, 10; /* hsv: 35°, 80%, 20% */
--fr-title-btn-color-bg1: 255, 153, 51; /* hsv: 30°, 80%, 100% */
--fr-title-btn-color-bg2: 230, 107, 46; /* hsv: 20°, 80%, 90% */
--fr-title-btn-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-color-bg1)) 40%,
  rgb(var(--fr-title-btn-color-bg2)) 140%);

/* Title Button Colors when Hovered Over, when title_button= true */
--fr-title-btn-hover: 102, 60, 0; /* hsv: 35°, 100%, 40% */
--fr-title-btn-hover-border: 102, 68, 20; /* hsv: 35°, 80%, 40% */
--fr-title-btn-hover-bg1: 204, 123, 41; /* hsv: 30°, 80%, 80% */
--fr-title-btn-hover-bg2: 179, 84, 36; /* hsv: 20°, 80%, 70% */
--fr-title-btn-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-hover-bg1)) 40%,
  rgb(var(--fr-title-btn-hover-bg2)) 140%);

/* Title Button Sliding Hover Overlay, when title_button= true & shape= BHL */
--fr-title-btn-accent: 128, 64, 0; /* hsv: 30°, 100%, 50% */

/* Progress Bar Colors */
--fr-progress-bar-color: 128, 51, 13; /* hsv: 20°, 90%, 50% */
--fr-progress-bar-bg-color: 204, 190, 184; /* hsv: 20°, 10%, 80% */

/* Text Color of the current Amount Raised */
--fr-progress-text-color: 128, 51, 13; /* hsv: 20°, 90%, 50% */

/* Text Color of the rest of the Progress Message */
--fr-progress-goal-color: 102, 82, 71; /* hsv: 20°, 30%, 40% */

/* Text Color of the Description */
--fr-description-color: 51, 17, 0; /* hsv: 20°, 100%, 20% */

/* Donate Button Colors when Inactive */
--fr-donate-color: 51, 30, 0; /* hsv: 35°, 100%, 20% */
--fr-donate-color-border: 51, 34, 10; /* hsv: 35°, 80%, 20% */
--fr-donate-color-bg1: 255, 153, 51; /* hsv: 30°, 80%, 100% */
--fr-donate-color-bg2: 230, 107, 46; /* hsv: 20°, 80%, 90% */
--fr-donate-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-color-bg1)) 40%,
  rgb(var(--fr-donate-color-bg2)) 140%);
  
/* Donate Button Colors when Hovered Over */
--fr-donate-hover: 102, 60, 0; /* hsv: 35°, 100%, 40% */
--fr-donate-hover-border: 102, 68, 20; /* hsv: 35°, 80%, 40% */
--fr-donate-hover-bg1: 204, 123, 41; /* hsv: 30°, 80%, 80% */
--fr-donate-hover-bg2: 179, 84, 36; /* hsv: 20°, 80%, 70% */
--fr-donate-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-hover-bg1)) 40%,
  rgb(var(--fr-donate-hover-bg2)) 140%);

/* Donate Button Sliding Hover Overlay, when shape= BHL */
--fr-donate-accent: 128, 64, 0; /* hsv: 30°, 100%, 50% */

/* Text Color of the "Logo" next to the Donate Button */
--fr-logo-color: 204, 173, 20; /* hsv: 50°, 90%, 80% */

}
[[/module]]

Then insert this code to create the **latte**-themed Fundraiser Widget, \
wherever you want the widget to appear on your page:

[[code]]
 [[include component:fundraiser-widget amt= 10000
 |goal= 17300
 |theme= latte
 |title= Statue Art Project
 |main_url= https://www.kickstarter.com/projects/ikky/art-project
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= 
 https://www.kickstarter.com/projects/ikky/art-project/pledge/new?clicked_reward=false
 |logo_text= KICKSTARTER
 |description= Help fund my latest artistic endeavor! \
 I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
 It promises to entice and delight!
 See the links on the fundraiser page to my online portfolios for proof of my skills.
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 10000
|goal= 17300
|theme= latte
|title= Statue Art Project
|main_url= https://www.kickstarter.com/projects/ikky/art-project
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= 
https://www.kickstarter.com/projects/ikky/art-project/pledge/new?clicked_reward=false
|logo_text= KICKSTARTER
|description= Help fund my latest artistic endeavor! \
I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.
]]



With the [[[theme:black-highlighter-theme | BHL Theme]]] shape adjustment enabled:

[[collapsible show="+ Show Code +" hide="- Hide Code -"]]

[[code]]
 [[include component:fundraiser-widget amt= 10101
 |goal= 17300
 |shape= BHL
 |theme= latte
 |title= Statue Art Project
 |main_url= https://www.kickstarter.com/projects/ikky/art-project
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= 
 https://www.kickstarter.com/projects/ikky/art-project/pledge/new?clicked_reward=false
 |logo_text= KICKSTARTER
 |description= Help fund my latest artistic endeavor! \
 I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
 It promises to entice and delight!
 See the links on the fundraiser page to my online portfolios for proof of my skills.
 ]]
[[/code]]

[[/collapsible]]

Result:

[[include component:fundraiser-widget-source amt= 10101
|goal= 17300
|shape= BHL
|theme= latte
|title= Statue Art Project
|main_url= https://www.kickstarter.com/projects/ikky/art-project
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= 
https://www.kickstarter.com/projects/ikky/art-project/pledge/new?clicked_reward=false
|logo_text= KICKSTARTER
|description= Help fund my latest artistic endeavor! \
I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. \
It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.
]]

[[/iftags]]

[[iftags -component]]

[[include :scp-wiki:component:fundraiser-widget-source amt={$amt}
|goal={$goal}
|title={$title}
|main_url={$main_url}
|curr_sym={$curr_sym}       |curr_sym=$
|num_sep={$num_sep}         |num_sep=,
|image_url={$image_url}     |image_url=none
|donate_url={$donate_url}   |donate_url=none
|logo_text={$logo_text}     |logo_text=@@@@
|description={$description} |description=@@@@
|shape={$shape}
|theme={$theme}
|title_button={$title_button}
|hide_desc={$hide_desc}
|hide_donate={$hide_donate}
|aux_class={$aux_class}
|title_icon_name={$title_icon_name}
|title_icon_anim={$title_icon_anim}
|title_icon_url={$title_icon_url}
|donate_icon_name={$donate_icon_name}
|donate_icon_anim={$donate_icon_anim}
|donate_icon_url={$donate_icon_url}
]]

[[/iftags]]

Fundraiser Widget

Module Styles

Inline Styles

Includes

CSS Classes

Page Source