158 lines
6.4 KiB
PHP
158 lines
6.4 KiB
PHP
<?php
|
|
/**
|
|
* Styling Settings Tab
|
|
*
|
|
* @package Instagram_Gallery_Sync_Pro
|
|
*/
|
|
|
|
// Prevent direct access
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
?>
|
|
|
|
<form method="post" action="options.php" class="igsp-settings-form">
|
|
<?php settings_fields('igsp_styling_settings'); ?>
|
|
|
|
<div class="igsp-section">
|
|
<h2>
|
|
<?php esc_html_e('Colors', 'instagram-gallery-sync-pro'); ?>
|
|
</h2>
|
|
|
|
<table class="form-table">
|
|
<tr>
|
|
<th scope="row">
|
|
<label for="igsp_primary_color">
|
|
<?php esc_html_e('Primary Color', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</th>
|
|
<td>
|
|
<input type="text" id="igsp_primary_color" name="igsp_primary_color"
|
|
value="<?php echo esc_attr(get_option('igsp_primary_color', '#e1306c')); ?>"
|
|
class="igsp-color-picker" data-default-color="#e1306c">
|
|
<p class="description">
|
|
<?php esc_html_e('Used for buttons and highlights.', 'instagram-gallery-sync-pro'); ?>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<label for="igsp_hover_color">
|
|
<?php esc_html_e('Hover Color', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</th>
|
|
<td>
|
|
<input type="text" id="igsp_hover_color" name="igsp_hover_color"
|
|
value="<?php echo esc_attr(get_option('igsp_hover_color', '#c13584')); ?>"
|
|
class="igsp-color-picker" data-default-color="#c13584">
|
|
<p class="description">
|
|
<?php esc_html_e('Used for overlay and hover effects.', 'instagram-gallery-sync-pro'); ?>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<label for="igsp_text_color">
|
|
<?php esc_html_e('Text Color', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</th>
|
|
<td>
|
|
<input type="text" id="igsp_text_color" name="igsp_text_color"
|
|
value="<?php echo esc_attr(get_option('igsp_text_color', '#ffffff')); ?>"
|
|
class="igsp-color-picker" data-default-color="#ffffff">
|
|
<p class="description">
|
|
<?php esc_html_e('Used for caption and overlay text.', 'instagram-gallery-sync-pro'); ?>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="igsp-section">
|
|
<h2>
|
|
<?php esc_html_e('Typography', 'instagram-gallery-sync-pro'); ?>
|
|
</h2>
|
|
|
|
<table class="form-table">
|
|
<tr>
|
|
<th scope="row">
|
|
<?php esc_html_e('Caption Font Size', 'instagram-gallery-sync-pro'); ?>
|
|
</th>
|
|
<td>
|
|
<div class="igsp-slider-wrapper">
|
|
<input type="range" id="igsp_caption_font_size" name="igsp_caption_font_size" min="10" max="24"
|
|
value="<?php echo esc_attr(get_option('igsp_caption_font_size', 14)); ?>">
|
|
<span class="igsp-slider-value">
|
|
<?php echo esc_html(get_option('igsp_caption_font_size', 14)); ?>px
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="igsp-section">
|
|
<h2>
|
|
<?php esc_html_e('Advanced Styling', 'instagram-gallery-sync-pro'); ?>
|
|
</h2>
|
|
|
|
<table class="form-table">
|
|
<tr>
|
|
<th scope="row">
|
|
<label for="igsp_css_prefix">
|
|
<?php esc_html_e('CSS Class Prefix', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</th>
|
|
<td>
|
|
<input type="text" id="igsp_css_prefix" name="igsp_css_prefix"
|
|
value="<?php echo esc_attr(get_option('igsp_css_prefix', 'igsp')); ?>" class="regular-text">
|
|
<p class="description">
|
|
<?php esc_html_e('Prefix for all CSS classes. Change only if you have conflicts with your theme.', 'instagram-gallery-sync-pro'); ?>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<label for="igsp_custom_css">
|
|
<?php esc_html_e('Custom CSS', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</th>
|
|
<td>
|
|
<textarea id="igsp_custom_css" name="igsp_custom_css" rows="10" class="large-text code"
|
|
placeholder="/* Add your custom CSS here */"><?php echo esc_textarea(get_option('igsp_custom_css', '')); ?></textarea>
|
|
<p class="description">
|
|
<?php esc_html_e('Add custom CSS to override default styles. Use cautiously.', 'instagram-gallery-sync-pro'); ?>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="igsp-section igsp-preview-section">
|
|
<h2>
|
|
<?php esc_html_e('Live Preview', 'instagram-gallery-sync-pro'); ?>
|
|
</h2>
|
|
<div class="igsp-style-preview">
|
|
<div class="igsp-preview-item" style="--primary: <?php echo esc_attr(get_option('igsp_primary_color', '#e1306c')); ?>;
|
|
--hover: <?php echo esc_attr(get_option('igsp_hover_color', '#c13584')); ?>;
|
|
--text: <?php echo esc_attr(get_option('igsp_text_color', '#ffffff')); ?>;">
|
|
<div class="igsp-preview-image">
|
|
<div class="igsp-preview-overlay">
|
|
<span class="igsp-preview-caption"
|
|
style="font-size: <?php echo esc_attr(get_option('igsp_caption_font_size', 14)); ?>px;">
|
|
<?php esc_html_e('Sample Caption', 'instagram-gallery-sync-pro'); ?>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button class="igsp-preview-button">
|
|
<?php esc_html_e('Sample Button', 'instagram-gallery-sync-pro'); ?>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php submit_button(); ?>
|
|
</form>
|