🎨 Personalizando Páginas Internas do Botoscope

Botoscope cria páginas especiais (Política de Privacidade, Política de Envio, Detalhes do Produto, etc.) que abrem no Telegram WebApp. Essas páginas têm um estilo CSS padrão, mas você pode substituí-lo completamente por seus próprios estilos personalizados.

💡 Como Funciona: Botoscope usa um filtro hook do WordPress que permite substituir o caminho do arquivo CSS padrão pelo seu próprio stylesheet personalizado.

🔧 O Gancho Mágico

Botoscope carrega os estilos de suas páginas usando este filtro:

botoscope_page_styles_link

Por padrão, ele aponta para BOTOSCOPE_ASSETS_LINK . 'css/page.css', mas você pode mudar isso para carregar seu próprio arquivo CSS.

📝 Como Usar

Adicione este código ao arquivo functions.php do seu tema (ou crie um plugin personalizado):

add_filter('botoscope_page_styles_link', function($default_css_url) {
    // Retorne o caminho para o SEU arquivo CSS personalizado
    return get_stylesheet_directory_uri() . '/css/botoscope-pages.css';
});

🎯 Exemplos

Exemplo 1: CSS Personalizado no Seu Tema

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

Localização do arquivo: /wp-content/themes/your-theme/css/botoscope-pages.css

Exemplo 2: CSS Personalizado no Tema Filho

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

Localização do arquivo: /wp-content/themes/your-child-theme/botoscope-custom.css

Exemplo 3: CSS de um Plugin

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

Localização do arquivo: /wp-content/plugins/your-plugin/css/botoscope-styles.css

Exemplo 4: CDN Externo

add_filter('botoscope_page_styles_link', function($default_css_url) {
    return 'https://your-cdn.com/botoscope-styles.css';
});
⚠️ Importante: Certifique-se de que seu arquivo CSS realmente existe no caminho que você especificar, caso contrário, as páginas não terão estilo!

📋 Referência do Arquivo CSS Padrão

Aqui está o que o CSS padrão do Botoscope inclui (como ponto de partida para seu arquivo 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;
}
💡 Dica Pro: Copie o CSS padrão como ponto de partida, depois modifique apenas o que você precisa. Isso garante que todos os elementos permaneçam estilizados corretamente.

🎨 Ideias de Personalização

Aqui estão algumas coisas que você pode personalizar no seu arquivo CSS:

  • 🎨 Cores: Altere background, color, cores de links
  • 📝 Fontes: Substitua font-family pelas fontes da sua marca
  • 📐 Layout: Ajuste padding, margens, largura máxima
  • 🖼️ Grade de Produtos: Altere colunas e espaçamentos de .botoscope-telegram-products
  • ✨ Efeitos: Adicione sombras, bordas, efeitos de hover
  • 🎭 Fundo: Substitua ou remova o padrão de body::before

📱 Páginas Que Usam Este CSS

Seu CSS personalizado será aplicado a todas estas páginas do Botoscope:

  • 🔒 Política de Privacidade
  • 🚚 Política de Envio
  • 💰 Política de Reembolso
  • 📦 Detalhes do Produto
  • 🎨 Galeria de Variação
  • 💬 Chat de Suporte
  • 🎬 Transmissão de Mídia
  • 🔍 Filtro de Produto

🚀 Guia de Início Rápido

  1. Crie seu arquivo CSS na pasta do seu tema (por exemplo, /css/botoscope-pages.css)
  2. Copie o CSS padrão acima como ponto de partida
  3. Personalize cores, fontes e layout para combinar com sua marca
  4. Adicione o filtro hook ao seu functions.php
  5. Teste abrindo qualquer página do Botoscope no Telegram WebApp
✅ Melhor Prática: Use um tema filho ou plugin personalizado para adicionar o filtro hook. Isso evita perder sua personalização ao atualizar seu tema principal.

🔍 Solução de Problemas

CSS Não Carregando?

  • ✓ Verifique se o caminho do arquivo está correto
  • ✓ Certifique-se de que o arquivo CSS existe
  • ✓ Limpe o cache do seu navegador
  • ✓ Verifique as permissões do arquivo (deve ser legível)
  • ✓ Use as DevTools do navegador para verificar qual arquivo CSS está carregando

📝 Exemplo Completo

Aqui está um exemplo completo para você começar:

Passo 1: Adicione ao functions.php

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

Passo 2: Crie o arquivo CSS

Crie /wp-content/themes/your-theme/css/botoscope-pages.css com seus estilos personalizados:

/* Estilo Personalizado para Páginas 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;
}

/* Adicione seus estilos personalizados aqui */

Agora você pode criar um design único para suas páginas Botoscope! 🚀

0
Incrível! 
Erro!