Blank - Elegant Minimalist Blog WordPress Theme
Built With :
Wordpress
Last Update :
9 March 2023
Software :
WordPress 6.8.x, ,, WordPress 6.7.x, ,, WordPress 6.6.x, ,, WordPress 6.5.x, ,, WordPress 6.4.x, ,, WordPress 6.3.x, ,, WordPress 6.2.x, ,, WordPress 6.1.x, ,, WordPress 6.0.x, ,, WordPress 5.9.x
Documentation :
Well Documented
Layout :
Responsive
Browsers :
Firefox, ,, Safari, ,, Opera, ,, Chrome, ,, Edge
Files :
PHP Files, ,, CSS Files, ,, JS Files

Blank - Elegant Minimalist Blog WordPress Theme

Live Preview Download
$69 USD
withemes By withemes
Created: 12 years ago
(4.65)
942 Sales
Version: 6.1.1

Check out our latest blog theme The Fox (5,800 customers) with minimal design and 30+ prebuilt websites to get started with. Blank latest version 2.2.3 – (March 08, 2023) Blank is an elegant, minimalistic WordPress theme with ultra-clean design and strongly focusing on content.

Key features

  • WordPress 6.x ready & Gutenberg Editor ready
  • Responsive: looks well on all devices like iPhone, iPad or large screen. Sliders also work well with touch and swipe gesture.
  • Retina ready: It looks beautiful on high-resolution screens like those found on the iPad, Kindle Fire HD, Nexus 10, and MacBook Pro with Retina Display
  • Translation ready: Blank has included default.po and default.mo files. You can easily open and edit to turn your site into any language you want.
  • Extensive options: Nearly 100+ options, change the color and font on the fly. You can enable or disable almost everything.
  • SEO Optimized: Designed in HTML 5 and CSS3 with optimized code. Not only your visitors but Google loves this theme awesome fast speed.
  • Clean and elegant design: Minimalistic design focused on readability. It’s really effective for blog with long posts/heavy content.
  • 2 layouts: Both of hidden or visible sidebar looks great! It’s up to you.
  • Useful shortcodes: Easy to insert with TinyMCE button integrated.
  • 4 portfolio layouts: 2, 3 or 4 columns and you can choose to crop thumbnail or not.
  • Video Supported: Both in blog and portfolio.
  • Vertical Featured Image supported. Indeed, you have option to crop or not your featured image in each post. Thus, it looks beautiful regardless your featured image size. It’s great even your post has no featured images!
  • JetPack compatible: Has been tested with JetPack. Bring all great features of JetPack to your site with no troubles.
  • Unlimited colors: With color picker in admin panel, you can change the color easily.
  • Wide & Boxed layout: You can choose wide or boxed layout and in boxed mode, body background color and body background image are ready.
  • 2 Header Styles: Logo on the left or centered logo. Logo with and height are flexible.
  • Sticky header option: Easy to navigate with sticky header.
  • 500+ Google fonts: Just choose the font you love.
  • Custom Logo upload: Header and Footer logo and their Retina version as well. Also, you can upload favicon, Apple touch icons…
  • Post types supported: Standard, video, audio, gallery, link, quote, status. EVERYTHING you need for a blog.
  • Social Impact: Share buttons for each blog post
  • Related Posts: Built-in related posts design based on tag score.
  • 6 widgets included: including Tweet widget with updated v1.1 Twitter API. All widgets are polished so they look greatly!
  • Colorbox lightbox integrated
  • Icons: Nearly 400 icons in use width 33 social icons.
  • Awesome dropcap with “Alphabet of Children” font.
  • Built with Bootstrap: Using popular Bootstrap framework, you can easily edit if you have some coding skill.
  • One click installation: This theme has been included a demo.xml file, that helps you to you turn your site amazing as the demo site by one click.
  • Well documented
  • Dedicated Support and lifetime upgrade. Visit our support desk.

Credits

  • Special thanks to Pixabay, Jørgen Grotdal and Nicolas Jolly for images used on the demo site. These images are NOT included in the theme.

More Themes

  • The Fox – Modern & Minimal Newspaper WordPress theme – made with built-in page builder, ultrafast & lightweight, 30+ demos, 1,500+ options to build any type of blog/magazine.
  • Dine – Exquisite Restaurant WordPress theme made with Elementor, 1,000+ options and unlimited header/footer builder. Make your business professional. Designed for bistros, bars, pubs, restaurants, cafes, wine shops.

Change log

  • Version 2.2.3 – March 08, 2023
    • wp 6.1.1
    • fix: pencil icon issue
  • Version 2.2.2 – September 09, 2022
    • wp 6.x
    • fix: sticky header issue
  • Version 2.2.1 – June 16, 2022
    • fix minor issues
  • Version 2.2 – May 26, 2022
    • fix: all theme check issues
    • fix: validation issues
    • fix: secure wpdb query
    • fix: esc_attr, esc_html
  • Version 2.1.1 – September 05, 2020
    • Compatible with WordPress 5.5.x
  • Version 2.1 – June 12, 2019
    • Fix Theme Option SSL issue
    • Gutenberg & WP 5.x ready
    • Remove Google+ widget while Google+ stopped
  • Version 2.0 – December 12, 2015
    • Update TGM Activation to 2.5
    • Move required plugins to external
    • Not include plugin: "Better Feedburner Widget" by default, for those who needs it can download it here: https://wordpress.org/plugins/better-feedburner-widget/
    • Make theme compatible with WP 4.3, 4.4
    • Change thumbnail 940px --> 1100px to fit wide screens
    • Change Default primary color from #12dada to #0dad9d
    • Change the default option "Use Old Triangle Sidebar button" to true
    • Remove Favicon options while it's the job of WordPress
    • Organize Options in a tab view
    • Make the single image fullwidth anyway
    • Update widgets to compatible with WP 4.3+
    • Update plugins
    • Update the *po file for translation
    • Update the demo.xml file
    • Improve theme check result (remove thumbs.db, ds_store, add more css...)
    • Update Isotope to 2.2.2 to improve Portfolio Experience
    • Fix [email protected] issue
  • Version 1.9.1 – May 02, 2015
    • Fix issues concerning wp_kses() function
  • Version 1.9 – April 25, 2015
    • Update TGM Activation
    • Improve Code Quality
    • Fix style.css Retina widget link issue
    • Enqueue style instead of importing
    • Update Google fonts list
  • Version 1.8 – July 17, 2014
    • Social share on blog posts
    • Related Posts on blog posts
    • Fix small issues
      • Sticky Header
      • Social Icons
      • Boxed Layout
      • Retina issue
    • Loading effect for portfolio items
    • Redesign Portfolio Template: Allow post content and decoration
    • Design Portfolio Category
    • Add option to link image to the post
    • boxed layout wider than 20px each side
    • pagination option for portfolio
  • Version 1.7.1 – June 13, 2014
    • make it compatible backward, page-portfolio.php template comes back
    • option for old design of sidebar toggle button
    • fix boxed layout issue on mobile
    • fix pagination retina issue
  • Version 1.7 – June 03, 2014
    • redesign pagination buttons
    • make it compatible with WP 3.9 (shortcode generator)
    • make single thumbnail larger
    • add status post format
    • redesign the sidebar toggle button
    • develop portfolio shortcode and stop supporting portfolio template
    • add option: social icon option at top
    • add option: infinite scroll
    • update contact form 7 latest version
    • fix header logo height issue
    • fix gallery post format issue
    • fix mCSB_button.png missing file issue
    • fix some responsive issues
  • Version 1.6 – December 19, 2013
    • add custom footer background pattern option
    • add custom sidebar background option
    • add an option for tagline
    • add option to hide permalink
    • add option for uppercase/lowercase
    • add option for blog title and small text
    • add many font size options
    • add footer padding option
    • add google font preview in options
    • add custom decoration for portfolio page
    • fix triangle top position in WP 3.8 (admin bar 32px)
    • fix with Wordpress SEO by Yoast</li> <li>resize portfolio default default decoration in image folder</li> <li>fix portfolio all text in shortcode</li> <li>make it compatible with WP 3.8</li> <li>fix sticky header menu on mobile view</li> <li>fix custom separator pattern</li> <li>make it compatible with Blogroll plugin</li> <li>fix blog title line height</li> </ul> </li> <li>Version 1.5 – November 20, 2013 <ul> <li>fix .article clear both</li> <li>fix small issues</li> <li>fix sidr issue</li> <li>add option for decoration</li> <li>add sticky option for centered logo</li> <li>remove 1:11 proportion for navigation menu</li> <li>update contact form 7 to v 3.5.4</li> <li>update admin panel to SMOF 1.5.2</li> <li>fix child theme footer background path</li> <li>add option for content width up to 1100px</li> <li>add footer custom icon option</li> </ul> </li> <li>Version 1.4.3 – October 14, 2013 <ul> <li>update Wi:Portfolio plugin: add ability to add multi portfolios</li> <li>fix retina logo issue</li> <li>remove redundant script at the end of functions.php file</li> </ul> </li> <li>Version 1.4.2 – September 30, 2013 <ul><li>fix default value for header layout option.</li></ul> </li> <li>Version 1.4.1 – September 23, 2013 <ul> <li>fix boxed layout css</li> <li>fix footer icons issue</li> <li>fix blog font size options</li> </ul> </li> <li>Version 1.4 – September 05, 2013 <ul> <li>visible sidebar supported</li> <li>fix small issues</li> <li>2 header styles</li> <li>option for logo and navigation menu ratio</li> <li>option for sticky header</li> <li>option for page layout (small or fullwidth)</li> <li>option for boxed/wide layout</li> <li>option for header code</li> <li>option for navigation custom font</li> <li>option for body background color/image</li> </ul> </li> <li>Version 1.3 – August 01, 2013 <ul> <li>add many options for portfolio: layout, video, thumbnail...</li> <li>add metabox plugin to Wi:Portfolio shortcode</li> <li>move portfolio options from theme options to page options</li> <li>add iconbox, recent posts, recent portfolio shortcodes</li> <li>update demo.xml, language file and documentation</li> </ul> </li> <li>Version 1.2 – July 21, 2013 <ul> <li>Include portfolio plugin in theme via TGM</li> <li>Redesign Portfolio</li> <li>New demo.xml file</li> <li>Options for portfolio</li> </ul> </li> <li>Version 1.1 – July 19, 2013 <ul><li>Add portfolio plugin</li><li>Fix small issues</li><li>Update demo.xml</li></ul> </li> <li>Version 1.0 – July 17, 2013 <ul><li>Initial Release</li></ul> </li> </ul> </section></div> </div> </div> <!-- End Description Panel --> </div> <!-- End Tab Content --> <!-- 相似主题模块 --> <div class="similar-items-section"> <div class="container"> <div class="similar-items-header d-flex align-items-center justify-content-between"> <div> <h3 class="similar-items-title">Similar Items</h3> </div> <div> <button type="button" id="carouselBackToStart" class="btn btn-link">Back to first item</button> </div> </div> <div class="similar-carousel-container"> <button class="carousel-arrow left" aria-label="Previous similar items">‹</button> <div class="similar-carousel-track" id="similarCarousel" tabindex="0" role="list"> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/read-wp-minimalist-wordpress-blog-theme/"> <img src="https://images.themeslines.com/images/read-wp-minimalist-wordpress-blog-theme_main.jpg" class="similar-product-img" alt="Read WP 6.9 - Minimalist WordPress Blog Theme" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/read-wp-minimalist-wordpress-blog-theme/">Read WP 6.9 - Minimalist WordPress Blog Theme</a> </h5> <div class="similar-product-meta"> by: <span>pixelwars</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$49</div> </div> </div> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/typology-minimalist-blog-text-based-theme-for-wordpress/"> <img src="https://images.themeslines.com/images/typology-minimalist-blog-text-based-theme-for-wordpress_main.jpg" class="similar-product-img" alt="Typology - Minimalist Blog & Text Based Theme for WordPress" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/typology-minimalist-blog-text-based-theme-for-wordpress/">Typology - Minimalist Blog & Text Based Theme for WordPress</a> </h5> <div class="similar-product-meta"> by: <span>meks</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$59</div> </div> </div> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/laurent-elegant-restaurant-wordpress-theme/"> <img src="https://images.themeslines.com/images/laurent-elegant-restaurant-wordpress-theme_main.jpg" class="similar-product-img" alt="Laurent 3.7 Elegant Restaurant WordPress Theme" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/laurent-elegant-restaurant-wordpress-theme/">Laurent 3.7 Elegant Restaurant WordPress Theme</a> </h5> <div class="similar-product-meta"> by: <span>Elated-Themes</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$75</div> </div> </div> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/savoy-minimalist-ajax-woocommerce-theme/"> <img src="https://images.themeslines.com/images/savoy-minimalist-ajax-woocommerce-theme_main.jpg" class="similar-product-img" alt="Savoy 3.1.3 - Minimalist AJAX WooCommerce Theme" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/savoy-minimalist-ajax-woocommerce-theme/">Savoy 3.1.3 - Minimalist AJAX WooCommerce Theme</a> </h5> <div class="similar-product-meta"> by: <span>NordicMade</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$59</div> </div> </div> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/kleanity-minimalist-wordpress-theme-creative-portfolio/"> <img src="https://images.themeslines.com/images/kleanity-minimalist-wordpress-theme-creative-portfolio_main.jpg" class="similar-product-img" alt="Kleanity 6.0 Minimalist WordPress Theme Creative Portfolio" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/kleanity-minimalist-wordpress-theme-creative-portfolio/">Kleanity 6.0 Minimalist WordPress Theme Creative Portfolio</a> </h5> <div class="similar-product-meta"> by: <span>GoodLayers</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$64</div> </div> </div> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/vlog-video-blog-podcast-wordpress-theme/"> <img src="https://images.themeslines.com/images/vlog-video-blog-podcast-wordpress-theme_main.jpg" class="similar-product-img" alt="Vlog 6.8 - Video Blog & Podcast WordPress Theme" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/vlog-video-blog-podcast-wordpress-theme/">Vlog 6.8 - Video Blog & Podcast WordPress Theme</a> </h5> <div class="similar-product-meta"> by: <span>meks</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$59</div> </div> </div> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/lets-blog-wordpress/"> <img src="https://images.themeslines.com/images/lets-blog-wordpress_main.jpg" class="similar-product-img" alt="Lets 3.4.5 Blog WordPress" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/lets-blog-wordpress/">Lets 3.4.5 Blog WordPress</a> </h5> <div class="similar-product-meta"> by: <span>ThemeGoods</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$49</div> </div> </div> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/15zine-magazine-newspaper-blog-news-wordpress-theme/"> <img src="https://images.themeslines.com/images/15zine-magazine-newspaper-blog-news-wordpress-theme_main.jpg" class="similar-product-img" alt="15Zine 3.3 - Magazine Newspaper Blog News WordPress Theme" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/15zine-magazine-newspaper-blog-news-wordpress-theme/">15Zine 3.3 - Magazine Newspaper Blog News WordPress Theme</a> </h5> <div class="similar-product-meta"> by: <span>codetipi</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$59</div> </div> </div> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/backpack-traveler-modern-travel-blog-wordpress-theme/"> <img src="https://images.themeslines.com/images/backpack-traveler-modern-travel-blog-wordpress-theme_main.jpg" class="similar-product-img" alt="Backpack Traveler 2.11 Modern Travel Blog WordPress Theme" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/backpack-traveler-modern-travel-blog-wordpress-theme/">Backpack Traveler 2.11 Modern Travel Blog WordPress Theme</a> </h5> <div class="similar-product-meta"> by: <span>Mikado-Themes</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$69</div> </div> </div> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/zeen-newspaper-magazine-news-blog-wordpress-theme-woocommerce/"> <img src="https://images.themeslines.com/images/zeen-newspaper-magazine-news-blog-wordpress-theme-woocommerce_main.jpg" class="similar-product-img" alt="Zeen 2.9.4 - Newspaper Magazine News Blog WordPress Theme WooCommerce" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/zeen-newspaper-magazine-news-blog-wordpress-theme-woocommerce/">Zeen 2.9.4 - Newspaper Magazine News Blog WordPress Theme WooCommerce</a> </h5> <div class="similar-product-meta"> by: <span>codetipi</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$69</div> </div> </div> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/wanium-a-elegant-multi-concept-theme/"> <img src="https://images.themeslines.com/images/wanium-a-elegant-multi-concept-theme_main.jpg" class="similar-product-img" alt="Wanium 2.0 A Elegant Multi-Concept Theme" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/wanium-a-elegant-multi-concept-theme/">Wanium 2.0 A Elegant Multi-Concept Theme</a> </h5> <div class="similar-product-meta"> by: <span>THEMELOGI</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$16</div> </div> </div> <div class="similar-product-card" role="listitem"> <div class="similar-product-img-wrap"> <a href="/item/magplus-blog-magazine-elementor-wordpress-theme/"> <img src="https://images.themeslines.com/images/magplus-blog-magazine-elementor-wordpress-theme_main.jpg" class="similar-product-img" alt="MagPlus 6.3 - Blog Magazine Elementor WordPress Theme" width="360" height="240" loading="lazy" decoding="async" onerror="this.src='/static/images/no-image.svg';"> </a> </div> <div class="similar-product-body"> <h5 class="similar-product-title"> <a href="/item/magplus-blog-magazine-elementor-wordpress-theme/">MagPlus 6.3 - Blog Magazine Elementor WordPress Theme</a> </h5> <div class="similar-product-meta"> by: <span>theme_bubble</span> in <a href="/cat/wordpress-themes/">WordPress</a> </div> <div class="similar-product-price">$59</div> </div> </div> </div> <button class="carousel-arrow right" aria-label="Next similar items">›</button> </div> <div style="text-align: center; margin-top: 30px; color: #6c757d; font-size: 0.9rem;"> The page will be updated as soon as new data is available. </div> </div> </div> <script> // Similar items carousel behavior: arrows, keyboard, drag-to-scroll (deferred to improve TTI) function initSimilarCarousel() { const container = document.getElementById('similarCarousel'); if (!container) return; const prevBtn = container.parentElement.querySelector('.carousel-arrow.left'); const nextBtn = container.parentElement.querySelector('.carousel-arrow.right'); function scrollByPage(direction = 1) { const card = container.querySelector('.similar-product-card'); const cardWidth = card ? card.getBoundingClientRect().width + 18 : container.clientWidth * 0.8; container.scrollBy({ left: direction * cardWidth * 3, behavior: 'smooth' }); } prevBtn && prevBtn.addEventListener('click', function (e) { scrollByPage(-1); }); nextBtn && nextBtn.addEventListener('click', function (e) { scrollByPage(1); }); // Back to first carousel item (select by ID to be robust) const backBtn = document.getElementById('carouselBackToStart'); if (backBtn) { backBtn.addEventListener('click', function () { console.log('carouselBackToStart clicked'); container.scrollTo({ left: 0, behavior: 'smooth' }); // move focus back to container for keyboard navigation container.focus(); }); } else { console.debug('carouselBackToStart not found in DOM'); } // Fallback: event delegation in case the button is overlaid or added later document.addEventListener('click', function (e) { const btn = e.target.closest && e.target.closest('#carouselBackToStart'); if (!btn) return; // Prevent double-handling if original listener already handled it try { e.preventDefault(); } catch (err) {} container.scrollTo({ left: 0, behavior: 'smooth' }); container.focus(); }); // Keyboard navigation when focused container.addEventListener('keydown', function (e) { if (e.key === 'ArrowRight') { e.preventDefault(); scrollByPage(1); } else if (e.key === 'ArrowLeft') { e.preventDefault(); scrollByPage(-1); } }); // Pointer drag to scroll (mouse & touch) let isDown = false; let startX; let scrollLeft; container.addEventListener('pointerdown', (e) => { // If the user clicked on an interactive element (link/button/input), do not start dragging if (e.target.closest('a, button, input, textarea, select')) { return; } isDown = true; try { container.setPointerCapture(e.pointerId); } catch (err) { // ignore if setPointerCapture not available } startX = e.clientX; scrollLeft = container.scrollLeft; }); container.addEventListener('pointermove', (e) => { if (!isDown) return; const x = e.clientX; const walk = (startX - x); container.scrollLeft = scrollLeft + walk; }); container.addEventListener('pointerup', (e) => { isDown = false; try { container.releasePointerCapture(e.pointerId); } catch (err) {} }); container.addEventListener('pointercancel', () => { isDown = false; }); } document.addEventListener('DOMContentLoaded', function () { if (typeof requestIdleCallback !== 'undefined') { requestIdleCallback(function () { initSimilarCarousel(); }, { timeout: 2000 }); } else { setTimeout(function () { initSimilarCarousel(); }, 1); } }); </script> <script> // Collapse/expand for specific attributes (Compatible With, Software Version) document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('.attr-collapse-toggle').forEach(function (btn) { btn.addEventListener('click', function () { const targetId = btn.getAttribute('data-target'); const el = document.getElementById(targetId); if (!el) return; const expanded = btn.getAttribute('aria-expanded') === 'true'; if (expanded) { // collapse el.classList.add('collapsed'); btn.setAttribute('aria-expanded', 'false'); btn.textContent = 'Show more'; } else { // expand el.classList.remove('collapsed'); btn.setAttribute('aria-expanded', 'true'); btn.textContent = 'Show less'; } }); }); }); // Sticky sidebar functionality function initStickySidebar() { const sidebar = document.getElementById('detailSidebarWrap'); const similarItemsSection = document.querySelector('.similar-items-section'); const navBar = document.querySelector('.tab-navigation-container'); if (!sidebar || !similarItemsSection) return; const placeholder = document.createElement('div'); placeholder.style.display = 'none'; sidebar.parentNode.insertBefore(placeholder, sidebar); const navHeight = (navBar ? navBar.offsetHeight : 44) + 20; let initialSidebarTop = sidebar.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop); function updateStickyBehavior() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const viewportWidth = window.innerWidth || document.documentElement.clientWidth; if (viewportWidth < 992) { if (placeholder.style.display !== 'none') placeholder.style.display = 'none'; sidebar.style.position = ''; sidebar.style.top = ''; sidebar.style.left = ''; sidebar.style.width = ''; sidebar.classList.remove('is-fixed', 'stop-sticky'); return; } const similarStart = similarItemsSection.offsetTop; const sidebarHeight = sidebar.offsetHeight; const shouldFix = (scrollTop + navHeight >= initialSidebarTop) && (scrollTop + navHeight + sidebarHeight < similarStart); if (shouldFix) { if (placeholder.style.display !== 'block') { placeholder.style.display = 'block'; placeholder.style.width = sidebar.offsetWidth + 'px'; placeholder.style.height = sidebarHeight + 'px'; } const placeholderRect = placeholder.getBoundingClientRect(); sidebar.style.position = 'fixed'; sidebar.style.top = navHeight + 'px'; sidebar.style.left = placeholderRect.left + 'px'; sidebar.style.width = placeholderRect.width + 'px'; sidebar.classList.remove('stop-sticky'); sidebar.classList.add('is-fixed'); } else { if (placeholder.style.display !== 'none') placeholder.style.display = 'none'; sidebar.style.position = ''; sidebar.style.top = ''; sidebar.style.left = ''; sidebar.style.width = ''; sidebar.classList.remove('is-fixed'); sidebar.classList.add('stop-sticky'); } } window.addEventListener('resize', function () { initialSidebarTop = sidebar.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop); if (sidebar.style.position === 'fixed') { sidebar.style.left = ''; sidebar.style.width = ''; } updateStickyBehavior(); }); let scrollTimeout; window.addEventListener('scroll', function() { if (scrollTimeout) clearTimeout(scrollTimeout); scrollTimeout = setTimeout(updateStickyBehavior, 10); }); updateStickyBehavior(); } document.addEventListener('DOMContentLoaded', function () { if (typeof requestIdleCallback !== 'undefined') { requestIdleCallback(function () { initStickySidebar(); }, { timeout: 2000 }); } else { setTimeout(function () { initStickySidebar(); }, 1); } }); </script> <script> // 点击 Tab 时滚动到对应 Tab 面板顶部（考虑固定的 Tab 导航高度） document.addEventListener('DOMContentLoaded', function () { const tabNavContainer = document.querySelector('.tab-navigation-container'); const tabButtons = document.querySelectorAll('#detailTabs [data-bs-toggle="tab"]'); if (!tabButtons || tabButtons.length === 0) return; tabButtons.forEach(function (btn) { btn.addEventListener('shown.bs.tab', function (e) { try { const targetSelector = btn.getAttribute('data-bs-target'); if (!targetSelector) return; const panel = document.querySelector(targetSelector); if (!panel) return; const navHeight = tabNavContainer ? tabNavContainer.offsetHeight : 0; const panelTop = panel.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop); const scrollTo = Math.max(0, panelTop - navHeight); window.scrollTo({ top: scrollTo, behavior: 'smooth' }); } catch (err) { console.debug('tab scroll error', err); } }); }); }); </script> <!-- Footer --> <footer class="footer"> <div class="footer-top"> <span class="footer-text">ThemesLines.com does not sell anything.<br> We promote <a class="tf-link" href="https://1.envato.market/c/3546921/651726/4415?subId1=themeforest_bestsellers" rel="noreferrer noopener nofollow" target="_blank">ThemeForest.net</a> products.</span> <nav class="footer-nav"> <a href="/blog/">Blog</a> <a href="/hosting/">Hosting</a> <a href="/about/">About</a> <a href="/privacy/">Privacy Policy</a> <a href="/terms/">Terms of Use</a> </nav> </div> <div class="footer-bottom"> <div class="footer-social"> <a href="https://x.com/themeslines"> <svg class="kadence-svg-icon kadence-twitter-x-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 23 24"><title>X
© 2026 ThemesLines