Styleguide: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
Cbarr (talk | contribs)
Cbarr (talk | contribs)
Line 14: Line 14:


==Payment==
==Payment==
The template that mainly ties together the payment form on the right is [[Template:2011FR/Form-template-default]]. The country specific details are set by the template [[Template:2011FR/Form-countryspecific-control]].
The template that ties together the payment form on the right of the page is [[Template:2011FR/Form-template-default]]. The country specific details are set by the template [[Template:2011FR/Form-countryspecific-control]].

===Form-countryspecific-control example===
This is example code from [[Template:2011FR/Form-countryspecific-control/AU]].
The following CSS is used to enable or disable payment methods for each country by commenting out either the "display: 'status';"(on) or the "display: none;"(off).
<pre>
<html>
<style type="text/css">
#CC-donate-button{
display: </html>{{CC-status}}<html>;
/*display: none;*/
}
#Ideal-donate-button{
/*display: </html>{{RT-status}}<html>;*/
display: none;
}
#eps-donate-button{
/*display: </html>{{RT-status}}<html>;*/
display: none;
}
#sofort-donate-button{
/*display: </html>{{RT-status}}<html>;*/
display: none;
}
#DD-donate-button{
/*display: </html>{{DD-status}}<html>;*/
display: none;
}
#PP-donate-button{
display: </html>{{PP-status}}<html>;
/*display: none;*/
}
#PP-USD-donate-button{
/*display: </html>{{PP-status}}<html> !important;*/
display: none;
}
#RPP-donate-button{
/*display: </html>{{PP-status}}<html>;*/
display: none;
}
#YD-donate-button{
/*display: </html>{{YD-status}}<html>;*/
display: none;
}
#MB-donate-button{
/*display: </html>{{MB-status}}<html>;*/
display: none;
}
#BP-donate-button{
/*display: </html>{{BP-status}}<html>;*/
display: none;
}
#BT-donate-button{
display: </html>{{BT-status}}<html>;
/*display: none;*/
}

#BP-donate-button{
display: </html>{{Bpay-status}}<html>;
/*display: none;*/
}
</style>
</html>
</pre>



<pre>
{{2011FR/Form-section-processing
| uselang = {{{uselang}}}
| country = {{{country}}}
| currency = {{2011FR/core-currency-code|{{{country}}}}}
| handler = GC
| appeal = {{{appeal}}}
| GC-CC-ffname = cc-vmaj
}}
{{2011FR/Form-section-radiobuttons
| country = {{{country}}}
| uselang = {{{uselang}}}
| currency = {{2011FR/core-currency-code|{{{country}}}}}
| donate-amount-0 = 5
| donate-amount-1 = 10
| donate-amount-2 = 20
| donate-amount-3 = 25
| donate-amount-4 = 50
| donate-amount-5 = 100
| donate-amount-6 = 250
}}
</pre>


==Helper Templates==
==Helper Templates==

Revision as of 18:27, 10 January 2012

Landing Page example with template areas highlighted.
Fig. 1: An example of a Landing Page with boxed areas added in order to highlight the different templates that set the look and functionality of various areas.

Banner settings completely determine which landing page is displayed, in which language, and where the page runs. All banners call the Lp-layout-default template and pass it the names of 4 templates. The default values follow:

Appeal

The "2011FR/Appeal-default" is used by Template:2011FR/Appeal-template-default to call the following 2 templates:

Payment

The template that ties together the payment form on the right of the page is Template:2011FR/Form-template-default. The country specific details are set by the template Template:2011FR/Form-countryspecific-control.

Form-countryspecific-control example

This is example code from Template:2011FR/Form-countryspecific-control/AU. The following CSS is used to enable or disable payment methods for each country by commenting out either the "display: 'status';"(on) or the "display: none;"(off).

<html>
<style type="text/css">
#CC-donate-button{
display: </html>{{CC-status}}<html>;
/*display: none;*/
}
#Ideal-donate-button{
/*display: </html>{{RT-status}}<html>;*/
display: none;
}
#eps-donate-button{
/*display: </html>{{RT-status}}<html>;*/
display: none;
}
#sofort-donate-button{
/*display: </html>{{RT-status}}<html>;*/
display: none;
}
#DD-donate-button{
/*display: </html>{{DD-status}}<html>;*/
display: none;
}
#PP-donate-button{
display: </html>{{PP-status}}<html>;
/*display: none;*/
}
#PP-USD-donate-button{
/*display: </html>{{PP-status}}<html> !important;*/
display: none;
}
#RPP-donate-button{
/*display: </html>{{PP-status}}<html>;*/
display: none;
}
#YD-donate-button{
/*display: </html>{{YD-status}}<html>;*/
display: none;
}
#MB-donate-button{
/*display: </html>{{MB-status}}<html>;*/
display: none;
}
#BP-donate-button{
/*display: </html>{{BP-status}}<html>;*/
display: none;
}
#BT-donate-button{
display: </html>{{BT-status}}<html>;
/*display: none;*/
}

#BP-donate-button{
display: </html>{{Bpay-status}}<html>;
/*display: none;*/
}
</style>
</html>


{{2011FR/Form-section-processing
| uselang = {{{uselang}}}
| country = {{{country}}}
| currency = {{2011FR/core-currency-code|{{{country}}}}}
| handler = GC
| appeal = {{{appeal}}}
| GC-CC-ffname = cc-vmaj
}}
{{2011FR/Form-section-radiobuttons
| country = {{{country}}}
| uselang = {{{uselang}}}
| currency = {{2011FR/core-currency-code|{{{country}}}}}
| donate-amount-0 = 5
| donate-amount-1 = 10
| donate-amount-2 = 20
| donate-amount-3 = 25
| donate-amount-4 = 50
| donate-amount-5 = 100
| donate-amount-6 = 250
}}

Helper Templates

Switch templates

The following is a list of templates templates that are used to change page content based on language, country, etc.

Payment method status

The following is a list of templates that can be use to turn on and off their respective payment methods by toogling the value stored inside the template between "block"(on) and "none"(off).

Flow

Flow cart showing how information goes from banner to template to template generating a Landing Page.
Fig. 2: A flow cart showing how information goes from banner to template to template generating a Landing Page.