charitable / includes / css-templates / frontend / simple-2-col.php

simple-2-col.php in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.12.3, at includes/css-templates/frontend/simple-2-col.php

284 lines 7.8 KB

Raw Download Zip

1	<?php
2
3	// Exit if accessed directly.
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit;
6	}
7
8	/**
9	* Display custom CSS for Club Organization campaign template.
10	*
11	* @package Charitable
12	* @author WP Charitable LLC
13	* @copyright Copyright (c) 2024, WP Charitable LLC
14	* @license GPL-2.0+
15	* @since 1.0.0
16	*/
17
18	header( 'Content-type: text/css; charset: UTF-8' );
19
20	require_once dirname( __DIR__, 2 ) . '/admin/campaign-builder/templates/functions-campaign-templates.php';
21
22	if ( ! function_exists( 'charitable_sanitize_hex_color' ) ) {
23	/**
24	* Sanitize a hex color.
25	*
26	* @param string $color The color to sanitize.
27	* @return string\|null The sanitized color or null if the color is invalid.
28	*/
29	function charitable_sanitize_hex_color( $color ) {
30	// Ensure the value is a string.
31	$color = trim( $color );
32
33	// Check if it's a valid 6-character hex color including the hash.
34	if ( preg_match( '/^#[a-fA-F0-9]{6}$/', $color ) ) {
35	return $color;
36	}
37
38	// Optionally return a default color or handle errors.
39	return null; // Or return default color.
40	}
41	}
42
43	if ( ! function_exists( 'charitable_esc_attr_php' ) ) {
44	/**
45	* Escapes a string for use in PHP.
46	*
47	* @param string $text The text to escape.
48	* @return string The escaped text.
49	*/
50	function charitable_esc_attr_php( $text ) {
51	return htmlspecialchars( $text, ENT_QUOTES, 'UTF-8' );
52	}
53	}
54
55	// @codingStandardsIgnoreStart
56
57	$primary = isset( $_GET['p'] ) ? '#' . preg_replace( '/[^A-Za-z0-9 ]/', '', $_GET['p'] ) : '#000000';
58	$secondary = isset( $_GET['s'] ) ? '#' . preg_replace( '/[^A-Za-z0-9 ]/', '', $_GET['s'] ) : '#2B66D1';
59	$tertiary = isset( $_GET['t'] ) ? '#' . preg_replace( '/[^A-Za-z0-9 ]/', '', $_GET['t'] ) : '#F99E36';
60	$accent = '#F99E36';
61	$button = isset( $_GET['b'] ) ? '#' . preg_replace( '/[^A-Za-z0-9 ]/', '', $_GET['b'] ) : '#5AA152';
62
63	$mobile_width = isset( $_GET['mw'] ) ? intval( $_GET['mw'] ) : 800;
64
65	$slug = 'simple-2-col';
66	$wrapper = '.charitable-campaign-wrap.template-' . $slug;
67	$preview_wrapper = '.charitable-campaign-wrap.is-charitable-preview.template-' . $slug;
68
69	/* what should change from admin vs. frontend */
70
71	// .charitable-field ----------> .charitable-campaign-field
72	// .charitable-preview-* ----------> .charitable-campaign-*
73
74	?>
75
76	/* this narrows things down a little to the preview area header/tabs */
77
78	<?php echo $wrapper; ?> {
79	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
80	}
81
82	/* aligns */
83
84
85	/* column specifics */
86
87
88	/* headlines in general */
89
90	<?php echo $wrapper; ?> h5.charitable-field-template-headline,
91	<?php echo $wrapper; ?> .charitable-campaign-title,
92	<?php echo $wrapper; ?> .charitable-field-template-headline {
93	color: <?php echo $primary; ?>;
94	}
95
96	/* field: campaign title */
97
98
99	/* field: campaign description */
100
101
102	/* field: campaign text */
103
104
105	/* field: html */
106
107
108	/* field: button */
109
110	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-donate-button button.charitable-button,
111	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-donate-button a.charitable-button {
112	background-color: <?php echo $button; ?> !important;
113	border-color: <?php echo $button; ?> !important;
114	color: <?php echo charitable_get_constracting_text_color( $button ); ?>;
115	text-transform: none;
116	border-radius: 0px;
117	margin-top: 0;
118	margin-bottom: 0;
119	width: 100%;
120	font-weight: 400;
121	font-size: 16px;
122	line-height: 25px;
123	display: flex; /* Changed from block to flex */
124	align-items: center; /* Vertically centers the text */
125	justify-content: center; /* Optionally centers the text horizontally too */
126	text-align: center !important;
127	text-decoration: none !important;
128	transition: filter 0.3s; /* Smooth transition */
129	}
130
131	/* field: photo */
132
133
134	/* field: photo */
135
136
137	/* field: progress bar */
138
139	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-progress-bar .progress-bar-info-row div.campaign-percent-raised {
140	color: <?php echo $primary; ?>;
141
142	}
143	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-progress-bar .progress-bar-info-row div.campaign-goal {
144
145	}
146	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-progress-bar .progress {
147
148	}
149	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-progress-bar .progress-bar {
150	background-color: <?php echo $secondary; ?>;
151	}
152	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-progress-bar .progress-bar span {
153
154	}
155
156	/* field: social linking */
157
158
159	/* social icons */
160
161	<?php
162	// Social media icons for frontend - using dark style
163	$social_icons = array(
164	'twitter', 'facebook', 'linkedin', 'instagram',
165	'pinterest', 'tiktok', 'mastodon', 'youtube',
166	'threads', 'bluesky'
167	);
168
169	foreach ( $social_icons as $icon ) {
170	$icon_url = charitable_get_campaign_builder_asset_url( "images/campaign-builder/fields/social-links/{$icon}-dark.svg" );
171	if ( ! empty( $icon_url ) ) {
172	?>
173	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-field-social-links .charitable-social-linking-preview-<?php echo esc_attr( $icon ); ?> .charitable-placeholder,
174	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-field-social-sharing .charitable-social-sharing-preview-<?php echo esc_attr( $icon ); ?> .charitable-placeholder {
175	background-image: url('<?php echo esc_url( $icon_url ); ?>');
176	}
177	<?php
178	}
179	}
180	?>
181
182	/* field: social sharing */
183
184
185	/* field: campaign summary */
186
187	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-campaign-summary div.campaign-summary-item {
188	color: <?php echo $primary; ?>;
189	}
190	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-campaign-summary div.campaign-summary-item span {
191	color: <?php echo $secondary; ?>;
192	}
193
194	/* field: donate amount */
195
196	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-donate-amount .charitable-template-donation-amount.selected {
197	border-color: <?php echo $tertiary; ?> !important;
198	}
199	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-donate-amount label,
200	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-donate-amount input.custom-donation-input[type="text"] {
201	color: <?php echo $primary; ?>;
202	border-color: <?php echo $primary; ?> !important;
203	}
204	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-donate-amount ul li.suggested-donation-amount.selected {
205	border-color: <?php echo $tertiary; ?>;
206	}
207	<?php echo $wrapper; ?> .charitable-campaign-field.charitable-campaign-field-donate-amount ul li.suggested-donation-amount.selected span.amount {
208	color: <?php echo $primary; ?>;
209	}
210
211	/* field: donate form */
212
213
214	/* field: shortcode */
215
216
217	/* tabs: container */
218
219
220	/* tabs: tab nav */
221
222
223
224
225	/* tabs: style */
226
227	<?php echo $wrapper; ?> article nav.tab-style-boxed li {
228
229	}
230	<?php echo $wrapper; ?> article nav.tab-style-boxed li a {
231
232	}
233	<?php echo $wrapper; ?> article nav.tab-style-rounded li {
234
235	}
236	<?php echo $wrapper; ?> article nav.tab-style-rounded li a {
237
238	}
239	<?php echo $wrapper; ?> article nav.tab-style-minimum li {
240
241	}
242	<?php echo $wrapper; ?> article nav.tab-style-minimum li a {
243
244	}
245
246	/* tabs: sized */
247
248	<?php echo $wrapper; ?> article nav.tab-size-small li {
249
250	}
251	<?php echo $wrapper; ?> article nav.tab-size-small li a {
252
253	}
254	<?php echo $wrapper; ?> article nav.tab-size-medium li {
255
256	}
257	<?php echo $wrapper; ?> article nav.tab-size-medium li a {
258
259	}
260	<?php echo $wrapper; ?> article nav.tab-size-large li {
261
262	}
263	<?php echo $wrapper; ?> article nav.tab-size-large li a {
264
265	}
266
267	/* field: donor wall */
268
269
270	/* field: organizer */
271
272	<?php echo $wrapper; // phpcs:ignore ?> .charitable-campaign-container {
273	container-type: inline-size;
274	container-name: campaign-<?php echo $slug; // phpcs:ignore ?>-area;
275	}
276
277	@container campaign-<?php echo $slug; // phpcs:ignore ?>-area (max-width: 700px) {
278	// ... container query styles ...
279	}
280
281	.charitable-preview.charitable-builder-template-<?php echo $slug; // phpcs:ignore ?> {
282	// ... preview styles ...
283	}
284	// @codingStandardsIgnoreEnd