Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 06739db

Browse files
N6REJN6REJ
committed
Basic layout
1 parent 96a019c commit 06739db

File tree

3 files changed

+380
-0
lines changed

3 files changed

+380
-0
lines changed

‎css/newborn.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/*
2+
* Bears Pricing Tables - newborn Template
3+
* Version: 2025.06.01
4+
* Created by: N6REJ
5+
* Email: [email protected]
6+
* URL: http://www.hallhome.us
7+
* License GPLv3.0 - http://www.gnu.org/licenses/gpl-3.0.html
8+
*/
9+
10+
/* newborn Template - Template-specific styles */
11+
12+
/* Template-specific CSS Variables */
13+
.template-newborn .bears_pricing_tables {
14+
/* Layout & Structure */
15+
--bears-num-columns: 4;
16+
--bears-column-margin-y: 10px;
17+
--bears-column-margin-x: 10px;
18+
--bears-header-height: 200px;
19+
20+
/* Typography */
21+
--bears-title-font-family: 'Open Sans', sans-serif;
22+
--bears-price-font-family: "Open Sans", Arial, sans-serif;
23+
--bears-title-font-weight: 600;
24+
--bears-price-font-weight: 600;
25+
--bears-title-font-size: var(--bears-h4);
26+
--bears-price-font-size: var(--bears-h2);
27+
--bears-subtitle-font-size: var(--bears-h4);
28+
--bears-features-font-size: var(--bears-body);
29+
--bears-button-font-size: var(--bears-body);
30+
31+
/* Colors - Standard Elements */
32+
--bears-column-background: #ffffff;
33+
--bears-header-background: #fff;
34+
--bears-features-background-odd: #fff;
35+
--bears-features-background-even: color-mix(in srgb, var(--bears-features-background-odd) 100%, rgba(0, 0, 0, 0)) !important;
36+
37+
/* Colors - Text */
38+
--bears-title-color: #888;
39+
--bears-price-color: #333333;
40+
--bears-subtitle-color: var(--bears-price-color);
41+
--bears-features-text-color: #000;
42+
--bears-button-text-color: #fff;
43+
44+
/* Colors - Featured Elements */
45+
--bears-column-featured-background: #222222;
46+
--bears-header-featured-background: #222222;
47+
--bears-featured-title-color: #ffffff;
48+
--bears-featured-price-color: #ffffff;
49+
--bears-featured-features-text-color: #fff;
50+
--bears-featured-features-background-odd: #222222;
51+
--bears-featured-features-background-even: color-mix(in srgb, var(--bears-featured-features-background-odd) 75%, rgba(255, 255, 255, 0.25));
52+
53+
/* Colors - Buttons */
54+
--bears-button-background-color: #333333;
55+
--bears-button-hover-color: #555555;
56+
--bears-featured-button-background: #ffffff;
57+
--bears-featured-button-text-color: #222222;
58+
59+
/* Borders - Standard */
60+
--bears-border-style: solid;
61+
--bears-border-width: 2px;
62+
--bears-border-radius: 8px;
63+
--bears-border-color: #e0e0e0;
64+
--bears-header-border: 1px solid rgba(0, 0, 0, .15);
65+
66+
/* Borders - Buttons */
67+
--bears-button-border-radius: 4px;
68+
69+
/* Borders - Featured */
70+
--bears-featured-border-radius: 8px;
71+
--bears-featured-border-width: 2px;
72+
--bears-featured-border-style: var(--bears-border-style);
73+
--bears-featured-border-color: rgba(255, 255, 255, 0.05);
74+
75+
/* Effects & Animation */
76+
--bears-accent-color: #333333;
77+
--bears-featured-accent-color: #ffffff;
78+
--bears-transition-speed: 0.25s;
79+
--bears-scale-amount: 1.0;
80+
--bears-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
81+
--bears-featured-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
82+
83+
/* Icons */
84+
--bears-header-icon-color: var(--bears-price-color);
85+
--bears-featured-header-icon-color: var(--bears-featured-price-color);
86+
--bears-features-icon-color: var(--bears-features-text-color);
87+
--bears-featured-features-icon-color: var(--bears-featured-features-text-color);
88+
--bears-header-icon-size: 24px;
89+
}
90+
91+
/* Template-specific styles */
92+
.template-newborn .bears_pricing_tables {
93+
letter-spacing: 1px;
94+
display: flex;
95+
align-items: center;
96+
justify-content: center;
97+
}
98+
99+
.template-newborn .bears_pricing_tables header {
100+
height: var(--bears-header-height);
101+
}
102+
103+
.template-newborn .bears_pricing_tables .plan-header-icon.icon-top-center {
104+
position: relative;
105+
width: 180px;
106+
height: 180px;
107+
border-radius: 50%;
108+
display: flex;
109+
align-items: center;
110+
justify-content: center;
111+
z-index: 1;
112+
font-color: #1887FB;
113+
font-size: 11.25rem;
114+
background: white;
115+
margin-top: 25px;
116+
}
117+
118+
.template-newborn .bears_pricing_tables .plan-header-icon.icon-top-center::before {
119+
content: '';
120+
position: absolute;
121+
top: 50%;
122+
left: 50%;
123+
transform: translate(-50%, -50%);
124+
width: 80px;
125+
height: 80px;
126+
border-radius: 50%;
127+
background: rgba(51, 51, 51, 0.10); /* Single color ring */
128+
box-shadow: 0 0 16px 8px rgba(51, 51, 51, 0.18);
129+
z-index: 0;
130+
}
131+
132+
.template-newborn .bears_pricing_tables .plan-title {
133+
position: absolute;
134+
top: 165px;
135+
z-index: 2;
136+
}

‎mod_bears_pricing_tables.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
<option value="red">11 - Red version of default ( Large Accent - red)</option> <!-- 1276-red -->
5050
<option value="white">12 - White ( simple Black and White - white)</option><!-- custom -->
5151
<option value="Green">13 - Green ( simple Green and White - Green)</option><!-- custom -->
52+
<option value="newborn">14 - Newborn ( simple Blue and White - newborn)</option><!-- custom -->
5253

5354
</field>
5455
<field name="bears_num_columns" type="radio" default="3" label="MOD_BEARS_NUMCOLUMNS" description="MOD_BEARS_NUMCOLUMNS_DESC"

‎tmpl/newborn.php‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
<?php
2+
/**
3+
* Bears Pricing Tables - white Template
4+
* Version : 2025.5.15
5+
* Created by : N6REJ
6+
* Email : [email protected]
7+
* URL : www.hallhome.us
8+
* License GPLv3.0 - http://www.gnu.org/licenses/gpl-3.0.html
9+
*/
10+
11+
// no direct access
12+
defined('_JEXEC') or die('Restricted access');
13+
14+
// Update for Joomla 5: Use namespaced classes
15+
use Joomla\CMS\Application\CMSApplication;
16+
use Joomla\CMS\Factory;
17+
use Joomla\CMS\HTML\HTMLHelper;
18+
use Joomla\CMS\Uri\Uri;
19+
use Joomla\Registry\Registry;
20+
21+
// Make sure $app is defined
22+
$app = Factory::getApplication();
23+
24+
// Make sure $document is defined
25+
$document = Factory::getDocument();
26+
27+
// Make sure $module is defined
28+
if (!isset($module)) {
29+
$module = $app->input->get('module');
30+
}
31+
32+
// Make sure $params is defined
33+
if (!isset($params)) {
34+
if (isset($module->params)) {
35+
$params = new Registry($module->params);
36+
} else {
37+
$params = new Registry();
38+
}
39+
}
40+
41+
// Include the helper file
42+
require_once dirname(__DIR__) . '/helper.php';
43+
44+
// Make sure we have a valid module ID
45+
$bears_moduleid = $module->id;
46+
47+
$baseurl = Uri::base(); // Updated from JURI::base()
48+
49+
// Get processed parameters
50+
$params_array = ModBearsPricingTablesHelper::getParams($params);
51+
52+
// Add moduleId to params_array for use in the template
53+
$params_array['moduleId'] = $bears_moduleid;
54+
55+
// Get column references
56+
$column_ref = array_keys(array_filter($params_array['bears_title']));
57+
58+
// Load module CSS with moduleId to ensure proper specificity
59+
ModBearsPricingTablesHelper::loadModuleCSS($params, $bears_moduleid);
60+
61+
// IMPORTANT: All CSS is now loaded through the helper, so we remove all inline CSS that was here before
62+
?>
63+
<div class = "template-newborn">
64+
<div class = "bears_pricing_tables-outer bears_pricing_tables-<?php
65+
echo $bears_moduleid; ?>">
66+
<!-- Add data-columns attribute for CSS targeting -->
67+
<div class = 'bears_pricing_tables-container' data-columns = "<?php
68+
echo $params_array['bears_num_columns']; ?>">
69+
<?php
70+
// Loop through the number of columns to display
71+
for ($i = 0; $i < $params_array['bears_num_columns']; $i++) {
72+
// Skip if this column index doesn't exist in our reference array
73+
if (!isset($column_ref[$i])) {
74+
continue;
75+
}
76+
77+
// Get the actual column number from our reference array
78+
$cur_column = $column_ref[$i];
79+
80+
// Check if this column is marked as featured
81+
$is_featured = isset($params_array['bears_featured'][$cur_column]) && $params_array['bears_featured'][$cur_column] == 'yes';
82+
83+
// Add column-specific class for styling
84+
$columnClass = 'bears-column-' . $cur_column;
85+
?>
86+
<div class = "bears_pricing_tables">
87+
<div class = "plan<?php
88+
echo $is_featured ? ' featured' : ''; ?> <?php
89+
echo $columnClass; ?>">
90+
<header>
91+
<?php
92+
if (!empty($params_array['header_icon_class'][$cur_column]) && str_starts_with($params_array['header_icon_position'][$cur_column], 'top-')) {
93+
// Prepare inline style for header icon if color is set
94+
$header_icon_color = !empty($params_array['header_icon_color'][$cur_column]) ?
95+
' style="color: ' . htmlspecialchars($params_array['header_icon_color'][$cur_column]) . ';"' : '';
96+
?>
97+
<div class = "plan-icon icon-<?php
98+
echo htmlspecialchars($params_array['header_icon_position'][$cur_column]); ?> <?php
99+
echo $columnClass; ?>">
100+
<i class = "<?php
101+
echo htmlspecialchars(ModBearsPricingTablesHelper::formatIconClass($params_array['header_icon_class'][$cur_column])); ?>"<?php
102+
echo $header_icon_color; ?>></i>
103+
</div>
104+
<?php
105+
} ?>
106+
107+
<h4 class = "plan-title">
108+
<?php
109+
echo htmlspecialchars($params_array['bears_title'][$cur_column] ?? ''); ?>
110+
</h4>
111+
112+
<?php
113+
if (!empty($params_array['header_icon_class'][$cur_column]) && str_starts_with($params_array['header_icon_position'][$cur_column], 'bottom-')) {
114+
// Prepare inline style for header icon if color is set
115+
$header_icon_color = !empty($params_array['header_icon_color'][$cur_column]) ?
116+
' style="color: ' . htmlspecialchars($params_array['header_icon_color'][$cur_column]) . ';"' : '';
117+
?>
118+
<div class = "plan-icon icon-<?php
119+
echo htmlspecialchars($params_array['header_icon_position'][$cur_column]); ?> <?php
120+
echo $columnClass; ?>">
121+
<i class = "<?php
122+
echo htmlspecialchars(ModBearsPricingTablesHelper::formatIconClass($params_array['header_icon_class'][$cur_column])); ?>"<?php
123+
echo $header_icon_color; ?>></i>
124+
</div>
125+
<?php
126+
}
127+
?>
128+
</header>
129+
130+
<?php
131+
// Determine if we should use FontAwesome list format based on whether an icon class is specified
132+
$icon_class = !empty($params_array['features_icon_class'][$cur_column]) ?
133+
ModBearsPricingTablesHelper::formatIconClass($params_array['features_icon_class'][$cur_column]) : '';
134+
$icon_color = !empty($params_array['features_icon_color'][$cur_column]) ?
135+
$params_array['features_icon_color'][$cur_column] : '';
136+
137+
// Prepare inline style for icon if color is set
138+
$icon_style = !empty($icon_color) ? ' style="color: ' . htmlspecialchars($icon_color) . ';"' : '';
139+
140+
// Always use plan-features class and add fa-ul only if icon class is specified
141+
$list_class = !empty($icon_class) ? 'plan-features fa-ul centered-features' : 'plan-features';
142+
?>
143+
<div class = "features">
144+
<ul class = "<?php
145+
echo $list_class; ?>">
146+
<?php
147+
if (!empty($params_array['bears_features'][$cur_column])) {
148+
$features = $params_array['bears_features'][$cur_column];
149+
150+
// Handle the features data from the subform
151+
$features_items = is_string($features) ? json_decode($features) : $features;
152+
153+
// Ensure we have an iterable
154+
if (!is_array($features_items) && !is_object($features_items)) {
155+
$features_items = [$features_items];
156+
}
157+
158+
// Render each feature
159+
foreach ($features_items as $item) {
160+
$feature_text = '';
161+
162+
// Get the text (always from bears_feature property when using subform)
163+
if (is_object($item) && isset($item->bears_feature)) {
164+
$feature_text = $item->bears_feature;
165+
} elseif (is_string($item)) {
166+
$feature_text = $item;
167+
}
168+
169+
// Output the feature text if not empty
170+
if (!empty($feature_text)) {
171+
echo '<li>';
172+
173+
// Create a span to wrap the content for centering
174+
echo '<span class="features-content">';
175+
176+
// Add icon with fa-li span if icon class is specified
177+
if (!empty($icon_class)) {
178+
echo '<span class="fa-li"><i class="' . htmlspecialchars($icon_class) . '"' . $icon_style . '></i></span>';
179+
}
180+
181+
echo htmlspecialchars($feature_text);
182+
echo '</span>';
183+
echo '</li>';
184+
}
185+
}
186+
}
187+
?>
188+
</ul>
189+
</div>
190+
<div class = 'price'>
191+
<?php
192+
if (!empty($params_array['header_icon_class'][$cur_column]) && $params_array['header_icon_position'][$cur_column] === 'price-left') {
193+
// Prepare inline style for header icon if color is set
194+
$header_icon_color = !empty($params_array['header_icon_color'][$cur_column]) ?
195+
' style="color: ' . htmlspecialchars($params_array['header_icon_color'][$cur_column]) . ';"' : '';
196+
?>
197+
<div class = "plan-icon price-left <?php
198+
echo $columnClass; ?>">
199+
<i class = "<?php
200+
echo htmlspecialchars(ModBearsPricingTablesHelper::formatIconClass($params_array['header_icon_class'][$cur_column])); ?>"<?php
201+
echo $header_icon_color; ?>></i>
202+
</div>
203+
<?php
204+
} ?>
205+
206+
<div class = "plan-cost">
207+
<h2 class = "plan-price"><?php
208+
echo htmlspecialchars($params_array['bears_price'][$cur_column] ?? ''); ?></h2>
209+
<small class = "plan-type"><?php
210+
echo htmlspecialchars($params_array['bears_subtitle'][$cur_column] ?? ''); ?></small>
211+
</div>
212+
213+
<?php
214+
if (!empty($params_array['header_icon_class'][$cur_column]) && $params_array['header_icon_position'][$cur_column] === 'price-right') {
215+
// Prepare inline style for header icon if color is set
216+
$header_icon_color = !empty($params_array['header_icon_color'][$cur_column]) ?
217+
' style="color: ' . htmlspecialchars($params_array['header_icon_color'][$cur_column]) . ';"' : '';
218+
?>
219+
<div class = "plan-icon price-right <?php
220+
echo $columnClass; ?>">
221+
<i class = "<?php
222+
echo htmlspecialchars(ModBearsPricingTablesHelper::formatIconClass($params_array['header_icon_class'][$cur_column])); ?>"<?php
223+
echo $header_icon_color; ?>></i>
224+
</div>
225+
<?php
226+
} ?>
227+
</div>
228+
<div class = "plan-select">
229+
<a class = "btn" href = "<?php
230+
echo htmlspecialchars($params_array['bears_buttonurl'][$cur_column] ?? '#'); ?>">
231+
<?php
232+
echo htmlspecialchars($params_array['bears_buttontext'][$cur_column] ?? ''); ?>
233+
</a>
234+
</div>
235+
</div>
236+
</div>
237+
<?php
238+
}
239+
?>
240+
</div>
241+
<div class = "clear"></div>
242+
</div>
243+
</div>

0 commit comments

Comments
 (0)