🎨 Personalización de las Páginas Internas de Botoscope

Botoscope crea páginas especiales (Política de Privacidad, Política de Envío, Detalles del Producto, etc.) que se abren en Telegram WebApp. Estas páginas tienen un estilo CSS predeterminado, pero puedes reemplazarlo completamente con tus propios estilos personalizados.

💡 Cómo Funciona: Botoscope utiliza un filtro de WordPress que te permite sobrescribir la ruta del archivo CSS predeterminado con tu propia hoja de estilos personalizada.

🔧 El Gancho Mágico

Botoscope carga los estilos de sus páginas usando este filtro:

botoscope_page_styles_link

Por defecto, apunta a BOTOSCOPE_ASSETS_LINK . 'css/page.css', pero puedes cambiar esto para cargar tu propio archivo CSS.

📝 Cómo Usarlo

Agrega este código al archivo functions.php de tu tema (o crea un plugin personalizado):

add_filter('botoscope_page_styles_link', function($default_css_url) {
    // Devuelve la ruta a TU archivo CSS personalizado
    return get_stylesheet_directory_uri() . '/css/botoscope-pages.css';
});

🎯 Ejemplos

Ejemplo 1: CSS Personalizado en Tu Tema

add_filter('botoscope_page_styles_link', function($default_css_url) {
    return get_stylesheet_directory_uri() . '/css/botoscope-pages.css';
});

Ubicación del archivo: /wp-content/themes/your-theme/css/botoscope-pages.css

Ejemplo 2: CSS Personalizado en Tema Hijo

add_filter('botoscope_page_styles_link', function($default_css_url) {
    return get_stylesheet_directory_uri() . '/botoscope-custom.css';
});

Ubicación del archivo: /wp-content/themes/your-child-theme/botoscope-custom.css

Ejemplo 3: CSS desde un Plugin

add_filter('botoscope_page_styles_link', function($default_css_url) {
    return plugin_dir_url(__FILE__) . 'css/botoscope-styles.css';
});

Ubicación del archivo: /wp-content/plugins/your-plugin/css/botoscope-styles.css

Ejemplo 4: CDN Externo

add_filter('botoscope_page_styles_link', function($default_css_url) {
    return 'https://your-cdn.com/botoscope-styles.css';
});
⚠️ Importante: Asegúrate de que tu archivo CSS realmente exista en la ruta que especifiques, de lo contrario, las páginas no tendrán estilo.

📋 Referencia del Archivo CSS Predeterminado

Esto es lo que incluye el CSS predeterminado de Botoscope (como punto de partida para tu archivo personalizado):

body{
    margin:0;
    padding:12px 20px;
    background:#fff;
    color:#111;
    font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
body::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url(../img/page-bg.svg) center repeat;
    background-size: 320px auto;
    opacity: 0.05;
    pointer-events: none;
}
img,video{
    max-width:100%;
    height:auto;
}
a{
    color:#0a84ff;
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
h1,h2,h3{
    line-height:1.25;
    margin:1.2em 0 .5em;
}
p,ul,ol,table{
    margin:0 0 1em;
}
footer, header, .woocommerce-breadcrumb {
    display: none;
}
.botoscope-telegram-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin: 20px 0;
}
.botoscope-product {
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s;
}
.botoscope-product > p{
    display: inline-block;
    max-height: 211px;
    overflow: hidden;
}
.botoscope-product:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.botoscope-product img {
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    margin-bottom: 10px;
}
.botoscope-product h2 {
    font-size: 16px;
    margin: 0 0 6px;
    color: #0077cc;
}
.botoscope-product span[itemprop="price"] {
    font-weight: bold;
    font-size: 14px;
}
.botoscope-pagination {
    margin-top: 30px;
    text-align: center;
}
.botoscope-pagination > ul{
    display: flex;
    list-style: none;
    justify-content: center;
}
.botoscope-pagination > ul > li{
    padding: 5px;
}
.wp-audio-shortcode.mejs-audio{
    margin-bottom: 5px !important;
}
💡 Consejo Profesional: Copia el CSS predeterminado como punto de partida, luego modifica solo lo que necesites. Esto asegura que todos los elementos permanezcan correctamente estilizados.

🎨 Ideas de Personalización

Aquí hay algunas cosas que puedes personalizar en tu archivo CSS:

  • 🎨 Colores: Cambia background, color, colores de enlaces
  • 📝 Fuentes: Reemplaza font-family con las fuentes de tu marca
  • 📐 Diseño: Ajusta padding, márgenes, ancho máximo
  • 🖼️ Cuadrícula de Productos: Cambia columnas y espacios de .botoscope-telegram-products
  • ✨ Efectos: Agrega sombras, bordes, efectos hover
  • 🎭 Fondo: Reemplaza o elimina el patrón de body::before

📱 Páginas Que Usan Este CSS

Tu CSS personalizado se aplicará a todas estas páginas de Botoscope:

  • 🔒 Política de Privacidad
  • 🚚 Política de Envío
  • 💰 Política de Reembolso
  • 📦 Detalles del Producto
  • 🎨 Galería de Variaciones
  • 💬 Chat de Soporte
  • 🎬 Transmisión de Medios
  • 🔍 Filtro de Productos

🚀 Guía de Inicio Rápido

  1. Crea tu archivo CSS en la carpeta de tu tema (por ejemplo, /css/botoscope-pages.css)
  2. Copia el CSS predeterminado de arriba como punto de partida
  3. Personaliza colores, fuentes y diseño para que coincidan con tu marca
  4. Agrega el filtro a tu functions.php
  5. Prueba abriendo cualquier página de Botoscope en Telegram WebApp
✅ Mejor Práctica: Usa un tema hijo o un plugin personalizado para agregar el filtro. Esto evita perder tu personalización al actualizar tu tema principal.

🔍 Solución de Problemas

¿CSS No Cargando?

  • ✓ Verifica que la ruta del archivo sea correcta
  • ✓ Asegúrate de que el archivo CSS exista
  • ✓ Limpia la caché de tu navegador
  • ✓ Verifica los permisos del archivo (debería ser legible)
  • ✓ Usa las herramientas de desarrollo del navegador para verificar qué archivo CSS se está cargando

📝 Ejemplo Completo

Aquí tienes un ejemplo completo para comenzar:

Paso 1: Agregar a functions.php

add_filter('botoscope_page_styles_link', function($default_css_url) {
    return get_stylesheet_directory_uri() . '/css/botoscope-pages.css';
});

Paso 2: Crear el Archivo CSS

Crea /wp-content/themes/your-theme/css/botoscope-pages.css con tus estilos personalizados:

/* Estilos Personalizados para Páginas de Botoscope */
body {
    margin: 0;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

a {
    color: #ffd700;
    text-decoration: none;
}

h1, h2, h3 {
    color: #ffffff;
}

.botoscope-telegram-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.botoscope-product {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 12px;
    padding: 15px;
}

/* Agrega tus estilos personalizados aquí */

¡Ahora puedes crear un diseño único para tus páginas de Botoscope! 🚀

0
¡Genial! 
¡Error!