🎨 Dostosowywanie wewnętrznych stron Botoscope

Botoscope tworzy specjalne strony (Polityka prywatności, Polityka wysyłki, Szczegóły produktu, itp.), które otwierają się w Telegram WebApp. Te strony mają domyślny styl CSS, ale możesz go całkowicie zastąpić własnymi stylami.

🔧 Magiczny hak

Botoscope ładuje style swoich stron za pomocą tego filtra:

botoscope_page_styles_link

Domyślnie wskazuje na BOTOSCOPE_ASSETS_LINK . 'css/page.css', ale możesz to zmienić, aby załadować własny plik CSS.

📝 Jak z tego korzystać

Dodaj ten kod do pliku functions.php swojego motywu (lub stwórz własną wtyczkę):

add_filter('botoscope_page_styles_link', function($default_css_url) {
    // Zwróć ścieżkę do TWOJEGO własnego pliku CSS
    return get_stylesheet_directory_uri() . '/css/botoscope-pages.css';
});

🎯 Przykłady

Przykład 1: Własny CSS w Twoim motywie

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

Lokalizacja pliku: /wp-content/themes/your-theme/css/botoscope-pages.css

Przykład 2: Własny CSS w motywie potomnym

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

Lokalizacja pliku: /wp-content/themes/your-child-theme/botoscope-custom.css

Przykład 3: CSS z wtyczki

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

Lokalizacja pliku: /wp-content/plugins/your-plugin/css/botoscope-styles.css

Przykład 4: Zewnętrzne CDN

add_filter('botoscope_page_styles_link', function($default_css_url) {
    return 'https://your-cdn.com/botoscope-styles.css';
});

📋 Odniesienie do domyślnego pliku CSS

Oto, co zawiera domyślny CSS Botoscope (jako punkt wyjścia dla Twojego własnego pliku):

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;
}

🎨 Pomysły na personalizację

Oto kilka rzeczy, które możesz dostosować w swoim pliku CSS:

• 🎨 Kolory: Zmień background, color, kolory linków
• 📝 Czcionki: Zastąp font-family czcionkami swojej marki
• 📐 Układ: Dostosuj padding, marginesy, max-width
• 🖼️ Siatka produktów: Zmień kolumny i odstępy .botoscope-telegram-products
• ✨ Efekty: Dodaj cienie, obramowania, efekty hover
• 🎭 Tło: Zastąp lub usuń wzór body::before

📱 Strony używające tego CSS

Twój własny CSS zostanie zastosowany do wszystkich tych stron Botoscope:

• 🔒 Polityka prywatności
• 🚚 Polityka wysyłki
• 💰 Polityka zwrotów
• 📦 Szczegóły produktu
• 🎨 Galeria wariantów
• 💬 Czatu wsparcia
• 🎬 Odtwarzanie mediów
• 🔍 Filtr produktów

🚀 Szybki przewodnik startowy

1. Utwórz swój plik CSS w folderze motywu (np. /css/botoscope-pages.css)
2. Skopiuj domyślny CSS z powyższego jako punkt wyjścia
3. Dostosuj kolory, czcionki i układ, aby pasowały do Twojej marki
4. Dodaj filtr do swojego functions.php
5. Przetestuj otwierając dowolną stronę Botoscope w Telegram WebApp

🔍 Rozwiązywanie problemów

📝 Kompletny przykład

Oto kompletny przykład, aby zacząć:

Krok 1: Dodaj do functions.php

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

Krok 2: Utwórz plik CSS

Utwórz /wp-content/themes/your-theme/css/botoscope-pages.css z własnymi stylami:

/* Własne stylizacje stron 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;
}

/* Dodaj swoje własne style tutaj */

Teraz możesz stworzyć unikalny design dla swoich stron Botoscope! 🚀