[PR #919] [CLOSED] Improved UI of configuration page #1693

New issue

Closed

opened 2026-02-28 02:12:41 +03:00 by kerem · 0 comments

kerem commented

2026-02-28 02:12:41 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/tzapu/WiFiManager/pull/919
Author: @vishalroygeek
Created: 7/31/2019
Status: ❌ Closed

Base: master ← Head: master

📝 Commits (4)

af2764b Update WiFiManager.template.html
747cd39 Added HTML page screenshot
add4039 Delete HTML Template Screenshot.png
9918e0e Update template.h

📊 Changes

2 files changed (+12 additions, -3 deletions)

View changed files

📝 extras/WiFiManager.template.html (+11 -2)
📝 extras/template.h (+1 -1)

📄 Description

This is a second pull request for the same update. In the previous pull request #910, I forgot to update one of the required files.

@tzapu I have applied some cool CSS to make the configuration page to look great and have some feel. I am already using it in many of my projects. Here is the preview of the same -

Those who want to apply the CSS on their existing project right now, can simply copy & paste the line below in their projects 😄

wifiManager.setCustomHeadElement("<style>body{background: #f7f5f5;}button{transition: 0.3s;opacity: 0.8;cursor: pointer;border:0;border-radius:1rem;background-color:#1dca79;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;}button:hover {opacity: 1}button[type=\"submit\"]{margin-top: 15px;margin-bottom: 10px;font-weight: bold;text-transform: capitalize;}input{height: 30px;font-family:verdana;margin-top: 5px;background-color: rgb(253, 253, 253);border: 0px;-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);}div{color: #14a762;}div a{text-decoration: none;color: #14a762;}div[style*=\"text-align:left;\"]{color: black;}, div[class*=\"c\"]{border: 0px;}a[href*=\"wifi\"]{border: 2px solid #1dca79;text-decoration: none;color: #1dca79;padding: 10px 30px 10px 30px;font-family: verdana;font-weight: bolder;transition: 0.3s;border-radius: 5rem;}a[href*=\"wifi\"]:hover{background: #1dca79;color: white;}</style>");

_{🔄 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/919 **Author:** [@vishalroygeek](https://github.com/vishalroygeek) **Created:** 7/31/2019 **Status:** ❌ Closed **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (4) - [`af2764b`](https://github.com/tzapu/WiFiManager/commit/af2764b9d82606827a7a1bf33c4885aeaff56b0d) Update WiFiManager.template.html - [`747cd39`](https://github.com/tzapu/WiFiManager/commit/747cd39472a9618a21bbce4abb0839840ed393e8) Added HTML page screenshot - [`add4039`](https://github.com/tzapu/WiFiManager/commit/add4039d91421b314d73c323a37d8748976af222) Delete HTML Template Screenshot.png - [`9918e0e`](https://github.com/tzapu/WiFiManager/commit/9918e0e91d19d911e9c3631ab87d7cf065ab54c7) Update template.h ### 📊 Changes **2 files changed** (+12 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `extras/WiFiManager.template.html` (+11 -2) 📝 `extras/template.h` (+1 -1) </details> ### 📄 Description > This is a second pull request for the same update. In the previous pull request #910, I forgot to update one of the required files. @tzapu I have applied some cool CSS to make the configuration page to look great and have some feel. I am already using it in many of my projects. Here is the preview of the same - ![HTML Template Screenshot](https://user-images.githubusercontent.com/34614798/62183858-66493800-b379-11e9-9db8-1234cf9856fd.png) Those who want to apply the CSS on their existing project right now, can simply copy & paste the line below in their projects 😄 `wifiManager.setCustomHeadElement("<style>body{background: #f7f5f5;}button{transition: 0.3s;opacity: 0.8;cursor: pointer;border:0;border-radius:1rem;background-color:#1dca79;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;}button:hover {opacity: 1}button[type=\"submit\"]{margin-top: 15px;margin-bottom: 10px;font-weight: bold;text-transform: capitalize;}input{height: 30px;font-family:verdana;margin-top: 5px;background-color: rgb(253, 253, 253);border: 0px;-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);}div{color: #14a762;}div a{text-decoration: none;color: #14a762;}div[style*=\"text-align:left;\"]{color: black;}, div[class*=\"c\"]{border: 0px;}a[href*=\"wifi\"]{border: 2px solid #1dca79;text-decoration: none;color: #1dca79;padding: 10px 30px 10px 30px;font-family: verdana;font-weight: bolder;transition: 0.3s;border-radius: 5rem;}a[href*=\"wifi\"]:hover{background: #1dca79;color: white;}</style>");` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>