What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Antihost offers Linux VPS plans with full root access, unlimited traffic on a 1 Gbps port and a 14-day free trial.
To style an Uptime Kuma status page, open Dashboard → Status Pages, select the page, choose Edit Status Page, scroll to Custom CSS, paste your stylesheet, and click Save. Then test the public /status/<slug> URL, not only the editor preview. Uptime Kuma caches status-page results for five minutes and refreshes the page every five minutes, so a saved change may not appear immediately.
What Uptime Kuma custom CSS changes
Uptime Kuma provides a Custom CSS text area on each status-page configuration. The CSS is stored with that page and is intended to change its presentation: colors, typography, spacing, borders, visibility, and responsive layout. It does not change monitor checks, notification rules, incident history, or the data returned by the application.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →The stylesheet is applied to the HTML that Uptime Kuma renders for the public status page. CSS only works when its selectors match that markup. A rule copied from an older theme, a different Uptime Kuma release, or an unrelated page can therefore do nothing even though the syntax is valid. Treat class names as implementation details: inspect the current page and verify each important selector after upgrades.
Custom CSS is configured per status page. The dashboard itself has no single documented “global status-page CSS” setting, and Uptime Kuma has no documented field for attaching one external stylesheet to several pages.
#1 Best Overall
- Powerful Turbo Fan:CAGIWIRU Electric Air Duster have reached speed up to 130000RPM,Can efficient remove dust and debris.With LED light and Three Adjustable Speed to meet with different cleaning tasks.
- With Attached USB C Fasting Charging cable.Charing 3 hours,Enjoy up to 240 minutes of use on the lowest setting, For third speed can use for 25mins.with four charging options to meet with your needs.
- Wide Application:Upgraded attached 5 different nozzles,making it suitable for a variety of scenes, such as car,pet, pc, keyboards, and other electronic devices. It also serves for office and home clean duster.
- Handy Design & Portable:Cordless air duster electric nozzle is Light weight and small size, design and comfortable to hold and space saving, convenient to carry around. You can put it in your room or inside the car without taking up space.
- Warranty & Support: Our Electric air duster comes with 5 years warranty and 24/7 customer service. During this period, if you have any questions,pls kindly feel free to contact us.
Prepare before editing
Record the running version
Check the version shown by your Uptime Kuma installation before troubleshooting. CSS behavior has changed between releases. A historical issue reported that a rule worked on the public page in 1.18.3 but failed after an upgrade to 1.18.4. That report dates from 2022 and is evidence of a version-specific regression, not proof of a current universal bug. If your behavior differs from the editor preview, the exact installed version is one of the first facts to record.
Keep a recoverable copy
Copy the existing Custom CSS into a text file before replacing it. Add one small change at a time so that you can identify the rule that causes a layout problem. A plain-text copy also makes it easier to repeat the same design on another page, since there is no supported shared stylesheet field.
Free tools Windows power users keep installed
One-click scans. No signup required.
Know the public address
Write down the page slug and its public address, normally /status/<slug>. The editor is useful for saving configuration, but the public URL is the authoritative place to check the final cascade, responsive behavior, and cache state.
Paste CSS into a status page
- Sign in to the Uptime Kuma dashboard with an account that can edit status pages.
- Open Status Pages in the dashboard navigation.
- Select the status page you want to change.
- Click Edit Status Page.
- Scroll to the Custom CSS field.
- Paste valid CSS into that field. Do not paste a complete HTML document, a
<style>wrapper, or Markdown. - Click Save.
- Open the page’s public
/status/<slug>URL in a new tab or private window. After saving, allow for Uptime Kuma’s documented five-minute cache and five-minute refresh cycle before deciding that the rule failed.
For an initial test, use a conspicuous but reversible declaration such as a background color. Once that appears on the public page, add branding, layout, and visibility rules in separate groups.
body {
background-color: #f4f7fb;
}
If this test does not appear after the cache interval, do not immediately build a larger theme. Confirm that the CSS was pasted into this page’s Custom CSS field, saved successfully, and is being tested at the correct public URL.
Build a stylesheet that is easy to maintain
Centralize brand values with :root
Put colors, spacing, corner radii, and font stacks in custom properties near the top of the stylesheet. This makes a copied stylesheet easier to retune and follows the approach documented by the community Cute Kuma theme, which recommends editing its :root {} variables.
Rank #2
- Screen Cleaner is Your Screen’s New Bestfriend! - EVEO is proud to present a screen cleaner that’s perfectly suited for your TV. Meet your new screen cleaner, computer screen cleaner, laptop cleaner, iPad cleaner, Macbook,tv cleaner or any other electronic device. Our screen cleaner spray and wipe along with the included plush microfiber cloth, easily removes dust, fingerprints & other smudges on the screen’s surface. Clean effectively for a streak-free screen
- Gentle on your Screens - Our screen cleaner spray and wipes is compatible to be used even for the most sensitive LCD, LED, CRT, and OLED screens in proper use. Be at ease knowing that this product is compatible with all the major brands: LG, SONY, Samsung, Sharp, iPad, iPhone, Android screens, Kindle, PC monitors - we’ve got you covered! Can be used as LCD screen cleaner, tv cleaner, smart tv screen cleaner, and more
- Premium Super Soft Plush Microfiber Cloth - Included in this efficient screen cleaning kit. This screen cleaner spray and wipe has our signature plush microfiber cloth specially designed to comply with screens and monitors and leave them streak-free. Has been shown to effectively absorbs stubborn stains, zero streaks, and no fiber shedding. Always use this together with our screen cleaner for the best results
- Easy-to-Use Screen Cleaner Kit + microfiber cleaning cloth - The EVEO Screen Cleaning Kit will easily be your new favorite tool when it comes to taking care of the things you love most, quick and easy solution for a streak-free screen. Simply screw on the sprayer gun on the screen cleaner bottle. Spray the cleaning liquid onto the microfiber cloth, then wipe the screen until desired cleanliness & shine is achieved.
- Quality Screen Care Kit Worth Purchasing - Enjoy a convenient Screen Cleaner anytime, anywhere you need it. Your satisfaction is our top priority. We stand behind the quality of our products and that’s why, you shouldn’t be worrying at all. We manufacture the Best Screen Cleaner. and can be used for laptop cleaning kit, laptop screen cleaner, tv screen cleaner for smart tv. MacBook screen cleaner, monitor cleaner or screen cleaner spray for electronic devices with microfiber cleaning cloth
:root {
--brand-blue: #1956a6;
--brand-blue-dark: #123d78;
--page-background: #f4f7fb;
--card-background: #ffffff;
--text-color: #1d2733;
--muted-color: #5e6b78;
--border-color: #d8e0ea;
--card-radius: 12px;
--card-gap: 1rem;
--font-stack: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
body {
background: var(--page-background);
color: var(--text-color);
font-family: var(--font-stack);
}
Custom properties do nothing by themselves; they must be consumed by selectors that match the rendered page. If a variable appears to have no effect, inspect whether the declaration using it is actually applied.
Set colors, text, borders, and spacing in small groups
Branding usually involves four independent decisions: the page background, the text hierarchy, the border or divider color, and the spacing around status cards. Keep those declarations separate so a contrast problem can be corrected without undoing the layout.
/* Illustrative selectors: verify them against your rendered markup. */
.status-card {
background: var(--card-background);
border: 1px solid var(--border-color);
border-radius: var(--card-radius);
color: var(--text-color);
margin-bottom: var(--card-gap);
}
.status-card a {
color: var(--brand-blue);
}
.status-card a:hover {
color: var(--brand-blue-dark);
}
The .status-card example is intentionally illustrative rather than a guaranteed Uptime Kuma API. Use browser developer tools to identify the classes in your release and replace example selectors that do not occur in the page.
Change layout only after the single-column version works
A community theme demonstrates a two-column arrangement on wide screens and a one-column arrangement on narrow screens. A two-column layout can make a page shorter on desktop, but it can become difficult to scan when monitor tags are enabled. The Cute Kuma guidance strongly recommends one column when tags are shown.
/* Apply a multi-column layout only on wider screens. */
@media (min-width: 900px) {
.status-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--card-gap);
}
}
Again, .status-list is an example selector. If the page uses a different container, locate that element in developer tools. To return to a single column, remove or comment out the grid rule rather than trying to override several child widths.
Hide an element with a narrow selector
Visibility rules should target one known component, not broad selectors such as every div or every heading. The historical issue that reproduced a public-page problem used .overall-status { display: none; }. That example is useful for explaining the technique, but the issue concerned version 1.18.4 and does not guarantee that the same class, or the same behavior, exists in your release.
Rank #3
- 【Large size】：Measuring 800 x 300 mm/ 31. 5×12 inches, which is wider and taller than others. Large mouse pad can perfectly fit your keyboard and mouse of any size, and there is also ample space for peripherals such as phones, tablets, etc.
- 【LED backlight mouse pad】：Blade Hawks RGB mouse pad provides 7 static modes and 7 dynamic modes will give you the options you are looking for. Power-off memory function remembers the last lighting mode you selected. The super glow fiber Chroma will give you a colorful gaming setup that you want.
- 【Anti-slip rubber base】：Made from Natural rubber, this gaming mousepad will firmly grip your desktop, allowing you to enjoy the ultimate precision in the games you are most passionate about. It also comes with a texture that enhances this ability even further.
- 【Smooth and waterproof surface】: Micro-textured cloth surface, for extremely precise mouse control and a smooth movement. When liquid splashes on the gaming mouse pad, it forms water droplets and slides down. Will not delay your work or gameplay.
- 【Plug and play】: This mouse and keyboard pad is powered by USB, plug and play, no driver required. One button control light modes. Press one time to change the lighting mode, press twice to change the brightness, press and hold about 3 seconds turn ON/OFF.
/* Only use after confirming the class in your page. */
.overall-status {
display: none;
}
Hiding the overall status can remove useful context for visitors. Before doing so, check the page with a screen reader or keyboard and ensure that the remaining monitor information still explains the service state.
Control the refresh timer deliberately
The Cute Kuma theme hides the refresh timer by default with a rule targeting .refresh-info. Its documentation explains that removing or commenting out display: none; restores the timer.
Recommended Free Tools
/* Theme-style example: confirm the selector in your release. */
.refresh-info {
display: none;
}
A visible timer can reassure visitors that the page is updating; a hidden timer can produce a cleaner, less technical presentation. Do not hide it accidentally while copying a theme, and remember that the status page still refreshes every five minutes according to the Uptime Kuma wiki.
Use a community theme without losing control
Cute Kuma is a community theme that can be copied into Uptime Kuma’s Custom CSS field and then adapted. Its documented options include light and dark appearances, responsive columns, and the refresh-timer rule described above. Treat the copied file as a starting point, not as a permanent contract with your Uptime Kuma version.
- Copy the theme CSS into the target page’s Custom CSS field.
- Locate its
:root {}block before changing individual selectors. - Change the color, spacing, radius, and font variables to your brand values.
- Test both a wide desktop viewport and a narrow mobile viewport.
- If monitor tags are enabled, test a one-column layout first; only retain two columns if labels remain readable.
- Decide whether the refresh timer should remain hidden. Remove or comment out the
display: none;declaration in.refresh-infoif visitors should see it. - Save and verify the public URL after the cache interval.
When Uptime Kuma changes its markup, a copied theme may need selector updates. Keep your customized variables and your local changes documented so you can reapply them to a newer theme version instead of replacing the entire stylesheet blindly.
Why CSS can work in edit mode but not on the public page
The public page is cached
The Uptime Kuma wiki states that status-page results are cached for five minutes and that the page refreshes every five minutes. A successful save can therefore appear unchanged for several minutes. Open the public URL in a fresh tab, wait through that interval, and reload before declaring the CSS ineffective.
Rank #4
- 【Softer and More Comfortable】Vaydeer wrist rest has unique diamond pattern, which is the combination of softness and aesthetics. The materials of wrist rest are improved into higher quality memory foam and covered with silky smooth lycra. The computer wrist rest makes you as comfortable and cushiony as like rest your wrists on clouds.
- 【Ergonomic Wrist Saver】The wrist rests for keyboard and mouse comes with a 17.32×3.15×0.83 inch keyboard wrist pad and a 5.94×3.15×0.83 inch mouse wrist support. Based on ergonomic design, the unique concave shape is the perfect fit for your wrist joints. The wrist rest pad fits most computer keyboards and laptops, improve hand and wrist posture, release your wrist and arm stress.
- 【Non-Slip Rubber Bottom】Featuring an anti-skid silicone base on the bottom, this wrist keyboard support stays firmly in place on your desk, preventing the padding from sliding around, ensuring stable and consistent wrist support during extended computer sessions.
- 【Better Experience & Pain Relief】Our keyboard arm rest is beneficial to alleviate the soreness caused by direct contact and friction between your arm and a hard desk surface, reducing the risk of wrist fatigue or carpal tunnel. The soft texture of memory foam can evenly distribute the pressure around your wrists and provide good support with just enough give.
- 【Helpful in Multiple Scenarios】Whether you're working, studying, writing, typing, gaming, this keyboard and mouse rest combo is an essential accessory to add comfort and support to your hands and wrists. It’s also a great gift for men, women, family, friend, coworker, gamer, teacher, etc.
The rule was saved to the wrong place
Custom CSS belongs to the selected status page under Edit Status Page → Custom CSS. A rule pasted into a dashboard customization area, a browser extension, or a different status page will not style the intended public URL.
A selector does not match the current markup
Use the browser’s developer tools on the public page, inspect the element you want to change, and check whether the class or element named in your stylesheet exists. If it does not, find the current container and update the selector. This is ordinary CSS debugging guidance rather than a special Uptime Kuma feature.
Another rule has greater specificity
In developer tools, look at the Styles and Computed panels. A crossed-out declaration is present but losing the cascade; a missing declaration usually means the selector did not match or the stylesheet was not delivered. Prefer a more precise selector, move your rule later in the stylesheet, or remove the conflicting declaration. Use !important only when you understand which rule it is overriding, because it makes later maintenance harder.
The running release has a regression
Issue 2207 recorded CSS working in 1.18.3 but not on the public page after an update to 1.18.4. If your symptoms resemble that report, note the exact release, reproduce the problem with one obvious rule, and check current project issue history or release notes before rewriting an otherwise valid stylesheet. Do not assume that an old workaround applies to current releases.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11A large stylesheet obscures the failure
Reduce the Custom CSS to one background-color rule, save, wait for the public cache to expire, and test again. Add typography, spacing, layout, and visibility rules one group at a time. This isolates syntax errors, unsupported selectors, and unintended overrides much faster than debugging a complete theme at once.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Can one external stylesheet serve several status pages?
Not through a documented Uptime Kuma feature. Issue 7339 describes the current limitation: users paste raw CSS into a text area, and the entire stylesheet must be duplicated for every status page. The request for an external reference such as @import url(...) or a dedicated external-CSS field is marked Closed as not planned.
Best Value
- 【No Drill Mounted】Cable management tray can be assembled in as little as 3 minutes or less-simply. Side clips easily clampe the edge of desk, pass through the holes on the sides, and secure excess cables with baskets. Desk cable management supports inward or outward installation to meet your needs in different scenarios, and provides you with great convenience when collecting and organizing wires.
- 【Rubber Pad Protects Desk】Wire organizer under desk built-in soft rubber pads on the clamp protect your desk from scratches, so you will not damage your furniture or office.
- 【Sturdy and Beautiful】Cord management under desk is made of high-quality carbon steel and holds about 15 lbs. The wire basket has 2 holes on each side of the tray to enable your cables to pass freely. Cable baskets are suitable for desk thickness use from 0.4" to 2.4".
- 【Space Saving & Keep Organized】Desk cable management tray holds all your power cords, outlet strips, USB hubs and computer transformers hidden from your feet, and the data cables will not enter the vacuum cleaner to keep your desk clean and tidy. Desk wire organizer is also suitable for use in the kitchen and outdoors.
- 【Reduce Safety Risks】Cable tray under desk keeps all plugs away from your kids, no more worry about tripping. Using 2 holes wire tray saves extra space, helps you easily cabling and wire protection. The mesh design is not easy to accumulate dust, but avoids safety accidents caused by messy wires.
You can still maintain consistency operationally:
- Keep a master CSS file in your configuration repository.
- Copy its contents into each page’s Custom CSS field.
- Record which pages received each revision.
- After an update, test every public URL because a selector change can affect pages differently.
An external @import line is not a supported substitute. Even if a browser happens to fetch it, network availability, content-security policy, caching, and page markup can make the result unreliable. Use duplicated, version-controlled CSS when you need predictable behavior.
Embedding a status page in an iframe
Styling the status page itself is different from embedding it inside another site. The official Uptime Kuma wiki documents an iframe workaround that requires setting the environment variable UPTIME_KUMA_DISABLE_FRAME_SAMEORIGIN=true. This disables the same-origin frame protection so the page can be framed.
The wiki warns that enabling this setting permits framing and makes the deployment vulnerable to clickjacking. Only use it after evaluating who can frame the page, whether the surrounding site is trusted, and whether the operational benefit justifies the security change. Do not enable the variable merely to solve a color or spacing problem; direct Custom CSS does not require it.
Choosing the right customization approach
| Approach | Best use | Maintenance | Responsive considerations | Security profile |
|---|---|---|---|---|
| Small, page-specific CSS | Brand colors, fonts, spacing, or one visibility change | Lowest risk; edit only the selected page | Test desktop and mobile after each layout rule | No additional framing exposure |
| Copied community theme | Complete light/dark styling and a ready-made layout | Requires reviewing :root variables and updating selectors after Uptime Kuma changes |
Supports responsive columns; one column is preferable when monitor tags are shown | No iframe setting required |
| Duplicated master stylesheet | Several pages that should share a visual system | Update the source file, recopy it to every page, and track revisions | Each public URL still needs its own verification | No additional framing exposure |
| Iframe embedding | A surrounding application must contain the status page | More deployment configuration and security review | Outer-container dimensions can affect perceived layout | Requires UPTIME_KUMA_DISABLE_FRAME_SAMEORIGIN=true and introduces clickjacking risk |
Version and feature milestones to keep in mind
The Uptime Kuma wiki documents multiple status pages from version 1.13.0 and domain-name status pages from version 1.14.0. Those milestones matter when comparing an older installation with a current one: a page structure, available status-page options, or selector set may differ. Always test the release that is actually serving your page rather than relying on a theme written for an earlier version.
| Version or date | What the source records | How to use that information |
|---|---|---|
| 1.13.0 | The wiki documents multiple status pages from this version. | Older installations may have fewer page-management options than current releases. |
| 1.14.0 | The wiki documents domain-name status pages from this version. | Confirm the URL form and page configuration available in your installation. |
| 1.18.3 and 1.18.4 (2022 issue report) | Issue 2207 reports public-page CSS success in 1.18.3 and failure after moving to 1.18.4. | Use the report as historical evidence of a regression, not as a current diagnosis. |
| 2026 wiki guidance | Status-page results cache for five minutes and the page refreshes every five minutes. | Include the cache interval in every save-and-test cycle. |
A repeatable test checklist
- Confirm the intended page and its
/status/<slug>URL. - Record the installed Uptime Kuma version.
- Back up the existing Custom CSS.
- Start with one unmistakable, reversible rule.
- Save from Edit Status Page → Custom CSS.
- Open the public page in a fresh tab and wait for the five-minute cache/refresh interval.
- Inspect the target element and verify that the selector matches the current markup.
- Check the cascade for a more-specific or later declaration overriding your rule.
- Test wide and narrow viewports, including pages with monitor tags.
- Add the next group of rules only after the previous group is confirmed.
- Repeat the public-URL test for every page receiving copied CSS.
- Before enabling iframe support, complete a separate clickjacking and trusted-frame review.
Practical limits to remember
Custom CSS is a presentation layer, not a stable plugin API. Uptime Kuma can change its rendered classes and nesting in a later release, and a community theme can make assumptions that no longer hold. Keep selectors narrow, avoid unnecessary structural hacks, and retest after upgrades.
The most dependable workflow is therefore deliberately conservative: make the smallest change that achieves the design goal, save it on the specific page, verify it at the public URL after caching, and keep a known-good copy. That process gives you branded colors and layout without confusing an editor preview with what visitors actually receive.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
