🎨 Customizing Botoscope Internal Pages

Botoscope creates special pages (Privacy Policy, Shipping Policy, Product Details, etc.) that open in Telegram WebApp. These pages have a default CSS styling, but you can completely replace it with your own custom styles.

💡 How It Works: Botoscope uses a WordPress filter hook that allows you to override the default CSS file path with your own custom stylesheet.

🔧 The Magic Hook

Botoscope loads its page styles using this filter:

botoscope_page_styles_link

By default, it points to BOTOSCOPE_ASSETS_LINK . 'css/page.css', but you can change this to load your own CSS file instead.

📝 How to Use It

Add this code to your theme’s functions.php file (or create a custom plugin):

add_filter('botoscope_page_styles_link', function($default_css_url) {
    // Return the path to YOUR custom CSS file
    return get_stylesheet_directory_uri() . '/css/botoscope-pages.css';
});

🎯 Examples

Example 1: Custom CSS in Your Theme

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

File location: /wp-content/themes/your-theme/css/botoscope-pages.css

Example 2: Custom CSS in Child Theme

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

File location: /wp-content/themes/your-child-theme/botoscope-custom.css

Example 3: CSS from a Plugin

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

File location: /wp-content/plugins/your-plugin/css/botoscope-styles.css

Example 4: External CDN

add_filter('botoscope_page_styles_link', function($default_css_url) {
    return 'https://your-cdn.com/botoscope-styles.css';
});
⚠️ Important: Make sure your CSS file actually exists at the path you specify, otherwise the pages will have no styling!

📋 Default CSS File Reference

Here’s what the default Botoscope CSS includes (as a starting point for your custom file):

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;
}
💡 Pro Tip: Copy the default CSS as a starting point, then modify only what you need. This ensures all elements remain styled correctly.

🎨 Customization Ideas

Here are some things you can customize in your CSS file:

  • 🎨 Colors: Change background, color, link colors
  • 📝 Fonts: Replace font-family with your brand fonts
  • 📐 Layout: Adjust padding, margins, max-width
  • 🖼️ Product Grid: Change .botoscope-telegram-products columns and gaps
  • ✨ Effects: Add shadows, borders, hover effects
  • 🎭 Background: Replace or remove the body::before pattern

📱 Pages That Use This CSS

Your custom CSS will be applied to all these Botoscope pages:

  • 🔒 Privacy Policy
  • 🚚 Shipping Policy
  • 💰 Refund Policy
  • 📦 Product Details
  • 🎨 Variation Gallery
  • 💬 Support Chat
  • 🎬 Media Casting
  • 🔍 Product Filter

🚀 Quick Start Guide

  1. Create your CSS file in your theme folder (e.g., /css/botoscope-pages.css)
  2. Copy the default CSS from above as a starting point
  3. Customize colors, fonts, and layout to match your brand
  4. Add the filter hook to your functions.php
  5. Test by opening any Botoscope page in Telegram WebApp
✅ Best Practice: Use a child theme or custom plugin to add the filter hook. This prevents losing your customization when updating your main theme.

🔍 Troubleshooting

CSS Not Loading?

  • ✓ Check the file path is correct
  • ✓ Make sure the CSS file exists
  • ✓ Clear your browser cache
  • ✓ Check file permissions (should be readable)
  • ✓ Use browser DevTools to verify which CSS file is loading

📝 Complete Example

Here’s a complete example to get you started:

Step 1: Add to functions.php

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

Step 2: Create the CSS file

Create /wp-content/themes/your-theme/css/botoscope-pages.css with your custom styles:

/* Custom Botoscope Pages Styling */
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;
}

/* Add your custom styles here */

Now you can create a unique design for your Botoscope pages! 🚀

0
Awesome! 
Error!