mirror of
https://hk.gh-proxy.com/https://github.com/NodeBB/nodebb.org.git
synced 2025-10-03 08:43:39 +08:00
168 lines
10 KiB
HTML
168 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Bringing Back Better Bootswatch! - NodeBB - Modern Community Forum Software</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="Blog of NodeBB Forum Software - The Modern Discussion Platform">
|
|
<meta name="author" content="NodeBB Inc.">
|
|
<meta name="keywords" content="nodebb, node.js, forum, discussion, community, software, hosting, blog">
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/16x16.png">
|
|
<link rel="shortcut icon" href="/images/icons/favicon.ico">
|
|
|
|
<!-- Google Fonts: Inter & Poppins -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
|
|
|
|
<!-- Font Awesome -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
<!-- our css-->
|
|
<link href="/css/style.css" rel="stylesheet">
|
|
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-V0P62EB8Q6"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-V0P62EB8Q6');
|
|
</script>
|
|
</head>
|
|
<body class="p-0 py-5 p-lg-5">
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg bg-body fixed-top shadow-sm">
|
|
<div class="container-lg">
|
|
<a class="navbar-brand py-2" href="/">
|
|
<img src="/images/brand/nodebb-logo.svg" style="height: 36px; width: auto;" alt="NodeBB Logo" />
|
|
</a>
|
|
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse justify-content-end" id="navbarMenu">
|
|
<ul class="nav nav-underline gap-4 flex-column flex-lg-row align-items-end align-items-lg-center mt-4 mt-lg-0">
|
|
<li class="nav-item">
|
|
<a href="/" class="nav-link active text-reset fw-semibold">HOME</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/product" class="nav-link text-reset fw-semibold">PRODUCT</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/pricing" class="nav-link text-reset fw-semibold">PRICING</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/services" class="nav-link text-reset fw-semibold">SERVICES</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a href="#" target="_blank" role="button" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link dropdown-toggle text-reset fw-semibold">RESOURCES</a>
|
|
<ul class="dropdown-menu dropdown-menu-end border-0 shadow p-1">
|
|
<li><a href="https://community.nodebb.org/" class="dropdown-item rounded-1" target="_blank">Community</a></li>
|
|
<li><a href="https://try.nodebb.org/" class="dropdown-item rounded-1" target="_blank">Demo Site</a></li>
|
|
<li><a href="https://community.nodebb.org/category/28/answers" class="dropdown-item rounded-1" target="_blank">Answers</a></li>
|
|
<li><a href="https://docs.nodebb.org/" class="dropdown-item rounded-1" target="_blank">Documentation</a></li>
|
|
<li><a href="/bounty" class="dropdown-item rounded-1">Bug Bounty</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/contact" class="btn btn-warning rounded-pill">Contact Us</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="https://manage.nodebb.org/register" class="btn btn-primary"><i class="fa-solid fa-rocket"></i> Start Free Trial</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Page Content -->
|
|
<div class="container-lg mt-5">
|
|
<!-- Home -->
|
|
<div id="home-tab-pane">
|
|
<div class="row pt-2 pt-lg-5">
|
|
<div class="col-12 d-flex flex-column gap-4">
|
|
<h1 class="display-1 fw-bold fs-1">
|
|
Bringing Back Better Bootswatch!
|
|
</h1>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- blog post -->
|
|
<div class="py-5">
|
|
<div class="d-flex gap-2 align-items-center mb-4">
|
|
<a href="https://community.nodebb.org/user/julian"><img class="rounded-circle" width="32" src="https://community.nodebb.org/assets/uploads/profile/uid-2/2-profileavatar-1738544541106.jpeg"></a> <a href="https://community.nodebb.org/user/julian" class="fw-semibold">Julian Lam</a> <span class="text-secondary">9/27/2022, 10:51:14 AM</span>
|
|
</div>
|
|
<div class="">
|
|
<h4>This blog post is the second in a series of posts related to the release of NodeBB v3</h4>
|
|
<p><p>Please see our other articles related to v3:</p><ul><li><a href="https://nodebb.org/blog/meet-vlad-gerasimov-product-designer/">Meet the Designer (Vlad Gerasimov)</a></li><li>Bringing Back Better Bootswatch! (👈 You are here)</li><li><a href="https://nodebb.org/blog/nodebb-specific-bootstrap-3-to-5-migration-guide/">NodeBB Specific Bootstrap 3 to 5 Migration Guide</a></li><li><a href="https://nodebb.org/blog/migration-guide-for-v3/">Migration Guide for v3</a></li></ul></p>
|
|
<p>The NodeBB team has been working feverishly to bring the Persona theme up to date with Bootstrap 5, and part of that update is going through and resolving a lot of long-standing issues with the theme.</p><p>A particular pain-point has always been our Bootswatch theme integration, in that due to the way Persona was themed, the Bootswatch integration was not always 100% compatible. Occasionally, you would see flashes of white, or incorrect greys, in places where text colours or background colours were clearly chosen for a non-dark theme, causing a clash in styling.</p><p>With Boostrap 5 encouraging the liberal use of helper classes instead of stylesheets, we now had the opportunity here to update a lot of Persona's LESS, which had built-up over the years. At the same time, we could evaluate whether our hardcoded colour decisions were in need of rewriting. Baris took it upon himself to go through all of the skins to make sure they were all compatible, and his dedication clearly shows!</p><p>Great job Baris!</p>
|
|
<img class="img-fluid mb-3" src="https://community.nodebb.org/assets/uploads/files/1664814096507-skins.gif" alt="An animation showing various Bootswatch skins selectable in NodeBB" loading="lazy" />
|
|
<p><strong>Hint</strong>: This is actually a v3-compatible fork of Baris' <a href="https://community.nodebb.org/topic/6556/nodebb-theme-peace-peace-theme-for-nodebb">Peace theme</a>, which will be released alongside v3 of NodeBB.</p><h2>Notes</h2><ul><li>Photo by <a href="https://unsplash.com/@starrynite?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Zhang Xinxin</a> on <a href="https://unsplash.com/s/photos/palette?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></li></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-5"/>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="d-flex flex-column flex-md-row gap-5 justify-content-between mb-5 flex-wrap">
|
|
<div class="d-flex flex-column">
|
|
<h5 class="fw-bold">Get Started</h5>
|
|
<ul class="list-unstyled">
|
|
<li><a href="/product" class="link-secondary text-decoration-none">PRODUCT</a></li>
|
|
<li><a href="/pricing" class="link-secondary text-decoration-none">PRICING</a></li>
|
|
<li><a href="/services" class="link-secondary text-decoration-none">SERVICES</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="d-flex flex-column">
|
|
<h5 class="fw-bold">Resources</h5>
|
|
<ul class="list-unstyled">
|
|
<li><a href="https://community.nodebb.org/" class="link-secondary text-decoration-none" target="_blank">COMMUNITY</a></li>
|
|
<li><a href="https://try.nodebb.org/" class="link-secondary text-decoration-none" target="_blank">DEMO SITE</a></li>
|
|
<li><a href="https://community.nodebb.org/category/28/answers" class="link-secondary text-decoration-none" target="_blank">ANSWERS</a></li>
|
|
<li><a href="https://docs.nodebb.org" class="link-secondary text-decoration-none" target="_blank">DOCUMENTATION</a></li>
|
|
<li><a href="/bounty" class="link-secondary text-decoration-none">BUG BOUNTY</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="d-flex flex-column">
|
|
<h5 class="fw-bold">Company</h5>
|
|
<ul class="list-unstyled">
|
|
<li><a href="/about" class="link-secondary text-decoration-none">ABOUT</a></li>
|
|
<li><a href="/blog" class="link-secondary text-decoration-none">BLOG</a></li>
|
|
<li><a href="/contact" class="link-secondary text-decoration-none">CONTACT</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="d-flex flex-column">
|
|
<a href="https://manage.nodebb.org/register" class="btn btn-primary"><i class="fa-solid fa-rocket"></i> Start Free Trial</a>
|
|
<div class="d-flex gap-3 mt-3 justify-content-between px-2">
|
|
<a title="NodeBB Github Page" href="https://github.com/nodebb/nodebb" class="link-secondary text-decoration-none"><i class="fab fa-github"></i></a>
|
|
<a title="NodeBB Twitter Page" href="https://twitter.com/nodebb" class="link-secondary text-decoration-none"><i class="fab fa-twitter"></i></a>
|
|
<a title="NodeBB Mastodon Page" href="https://fosstodon.org/@nodebb" class="link-secondary text-decoration-none"><i class="fa-brands fa-mastodon"></i></a>
|
|
<a title="NodeBB Facebook Page" href="https://www.facebook.com/NodeBB" class="link-secondary text-decoration-none"><i class="fab fa-facebook"></i></a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-wrap justify-content-between gap-5 small">
|
|
<span class="text-secondary text-nowrap">©2025 NodeBB, Inc. — Made in Canada with <i class="fa-solid fa-heart text-danger"></i>.</span>
|
|
<div class="d-flex gap-3">
|
|
<a href="/tos" class="link-secondary text-nowrap text-decoration-none">Terms of Service</a>
|
|
<a href="/privacy" class="link-secondary text-nowrap text-decoration-none">Privacy Policy</a>
|
|
<a href="/gdpr" class="link-secondary text-nowrap text-decoration-none">GDPR</a>
|
|
<a href="/dmca" class="link-secondary text-nowrap text-decoration-none">DMCA</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Bootstrap 5 JS Bundle (includes Popper) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|
