[PR #1767] [MERGED] Add CSS body classes for each page #1824

New issue

Closed

opened 2026-02-28 02:13:07 +03:00 by kerem · 0 comments

kerem commented

2026-02-28 02:13:07 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/tzapu/WiFiManager/pull/1767
Author: @dmadison
Created: 10/23/2024
Status: ✅ Merged
Merged: 12/11/2024
Merged by: @tablatronix

Base: master ← Head: page-classes

📝 Commits (4)

f5f3496 Add body classes argument
45a56bf Add page-specific classes
5e23c61 Change root CSS class to 'home'
27ed8f2 Use conditional body class spacing

📊 Changes

4 files changed (+49 additions, -22 deletions)

View changed files

📝 WiFiManager.cpp (+22 -21)
📝 WiFiManager.h (+1 -1)
📝 wm_consts_en.h (+13 -0)
📝 wm_consts_fr.h (+13 -0)

📄 Description

This PR adds classes to the body element for each individual page, so that it's easier to style pages differently:

Title (en)	Route	Class
WiFiManager	/	home
Config ESP	/wifi	wifi
Credentials saved	/wifisave	wifi
Info	/info	info
Setup	/param	param
Setup saved	/paramsave	param
Restart	/restart	restart
Exit	/exit	exit
Close	/close	close
Erase	/erase	erase
Update	/update	update
options	/u	update

This is accomplished by modifying the getHTTPHead() function to add an optional String argument for classes to add, and a set of constant class strings in the wm_consts header. The class strings are then invoked in each respective route "handle" function when the head is generated.

I did not add separate classes for the "saved" pages, as that seemed excessive. But I'm happy to go in and add them if you think it would be beneficial.

This change does not break the current API and should add minimal overhead.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/tzapu/WiFiManager/pull/1767 **Author:** [@dmadison](https://github.com/dmadison) **Created:** 10/23/2024 **Status:** ✅ Merged **Merged:** 12/11/2024 **Merged by:** [@tablatronix](https://github.com/tablatronix) **Base:** `master` ← **Head:** `page-classes` --- ### 📝 Commits (4) - [`f5f3496`](https://github.com/tzapu/WiFiManager/commit/f5f34962eaafdd191a1ef1afe5d04520cc429b36) Add body classes argument - [`45a56bf`](https://github.com/tzapu/WiFiManager/commit/45a56bfa35c20325b738024ac09799e90f0938d3) Add page-specific classes - [`5e23c61`](https://github.com/tzapu/WiFiManager/commit/5e23c6102fd7fa4093d4f98bcf9d650308c102d9) Change root CSS class to 'home' - [`27ed8f2`](https://github.com/tzapu/WiFiManager/commit/27ed8f20e645f8ff52d3d2361bb441980da0695f) Use conditional body class spacing ### 📊 Changes **4 files changed** (+49 additions, -22 deletions) <details> <summary>View changed files</summary> 📝 `WiFiManager.cpp` (+22 -21) 📝 `WiFiManager.h` (+1 -1) 📝 `wm_consts_en.h` (+13 -0) 📝 `wm_consts_fr.h` (+13 -0) </details> ### 📄 Description This PR adds classes to the body element for each individual page, so that it's easier to style pages differently: | Title (en) | Route | Class | |-------------------|------------|---------| | WiFiManager | / | home | | Config ESP | /wifi | wifi | | Credentials saved | /wifisave | wifi | | Info | /info | info | | Setup | /param | param | | Setup saved | /paramsave | param | | Restart | /restart | restart | | Exit | /exit | exit | | Close | /close | close | | Erase | /erase | erase | | Update | /update | update | | options | /u | update | This is accomplished by modifying the `getHTTPHead()` function to add an optional `String` argument for classes to add, and a set of constant class strings in the `wm_consts` header. The class strings are then invoked in each respective route "handle" function when the head is generated. I did not add separate classes for the "saved" pages, as that seemed excessive. But I'm happy to go in and add them if you think it would be beneficial. This change does not break the current API and should add minimal overhead. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>