[GH-ISSUE #1159] Custom CSS and Html

kerem commented

2026-02-28 01:28:01 +03:00

Owner

Originally created by @rohoop on GitHub (Dec 6, 2020).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1159

PLEASE TRY DEVELOPMENT BRANCH before submitting bugs on release or master, in case they were already fixed.

POST SERIAL OUTPUT !

Issues without basic info will be ignored or closed!

Please fill the info fields, it helps to get you faster support ;)

if you have a stack dump decode it:
https://github.com/esp8266/Arduino/blob/master/doc/Troubleshooting/stack_dump.rst

for better debug messages:
https://github.com/esp8266/Arduino/blob/master/doc/Troubleshooting/debugging.rst

----------------------------- Remove above -----------------------------

Basic Infos

Hardware

WiFimanager Branch/Release:

Master
Development

Esp8266/Esp32:

ESP8266
ESP32

Hardware: ESP-12e, esp01, esp25

ESP01
ESP12 E/F/S (nodemcu, wemos, feather)
Other

ESP Core Version: 2.4.0, staging

2.3.0
2.4.0
staging (master/dev)

Description

I need to put custom html and css code but i dont know in which code and which part of the code... Help! Friends!

Settings in IDE

Module: NodeMcu

Additional libraries:

Sketch


#include <Arduino.h>

void setup() {

}

void loop() {

}

Debug Messages

messages here

Originally created by @rohoop on GitHub (Dec 6, 2020). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1159 ## PLEASE TRY DEVELOPMENT BRANCH before submitting bugs on release or master, in case they were already fixed. ## ## POST SERIAL OUTPUT ! Issues without basic info will be ignored or closed! Please fill the info fields, it helps to get you faster support ;) if you have a stack dump decode it: https://github.com/esp8266/Arduino/blob/master/doc/Troubleshooting/stack_dump.rst for better debug messages: https://github.com/esp8266/Arduino/blob/master/doc/Troubleshooting/debugging.rst ----------------------------- Remove above ----------------------------- ### Basic Infos #### Hardware **WiFimanager Branch/Release:** - [ ] Master - [ ] Development **Esp8266/Esp32:** - [ ] ESP8266 - [ ] ESP32 **Hardware: ESP-12e, esp01, esp25** - [ ] ESP01 - [ ] ESP12 E/F/S (nodemcu, wemos, feather) - [ ] Other **ESP Core Version: 2.4.0, staging** - [ ] 2.3.0 - [ ] 2.4.0 - [ ] staging (master/dev) ### Description I need to put custom html and css code but i dont know in which code and which part of the code... Help! Friends! ### Settings in IDE Module: NodeMcu Additional libraries: ### Sketch ```cpp #include <Arduino.h> void setup() { } void loop() { } ``` ### Debug Messages ``` messages here ```

kerem added the

Question

label

2026-02-28 01:28:01 +03:00

kerem commented

2026-02-28 01:28:01 +03:00

Author

Owner

@charitha95 commented on GitHub (Dec 9, 2020):

You could simply add a style tag to the head like this.
wifiManager.setCustomHeadElement("<style>body {background-color: powderblue;}</style>");

@charitha95 commented on GitHub (Dec 9, 2020): You could simply add a style tag to the head like this. `wifiManager.setCustomHeadElement("<style>body {background-color: powderblue;}</style>");`

kerem commented

2026-02-28 01:28:01 +03:00

Author

Owner

@IcaroCreativa commented on GitHub (Feb 27, 2021):

Hi!

I would like to know how to changes text in buttons and the colors of the buttons.

Thanks!

@IcaroCreativa commented on GitHub (Feb 27, 2021): Hi! I would like to know how to changes text in buttons and the colors of the buttons. Thanks!

kerem commented

2026-02-28 01:28:02 +03:00

Author

Owner

@IcaroCreativa commented on GitHub (Feb 27, 2021):

Hi,

just modify the string_en file in the WiFimanager library in the arduino libraries file.
Attention better to make a copy of the original file.
you can change button colors, text etc

@IcaroCreativa commented on GitHub (Feb 27, 2021): Hi, just modify the string_en file in the WiFimanager library in the arduino libraries file. Attention better to make a copy of the original file. you can change button colors, text etc

kerem commented

2026-02-28 01:28:02 +03:00

Author

Owner

@ppytlarz commented on GitHub (Feb 11, 2024):

Hi,

i want to delete 2 buttons info and update where i can delete it?

@ppytlarz commented on GitHub (Feb 11, 2024): Hi, i want to delete 2 buttons info and update where i can delete it? ![image](https://github.com/tzapu/WiFiManager/assets/107877920/4699fede-2d47-469f-bd8c-3bf357e99f6f)

kerem commented

2026-02-28 01:28:02 +03:00

Author

Owner

@gokhanmeteerturk commented on GitHub (Jul 21, 2024):

@ppytlarz

i want to delete 2 buttons info and update where i can delete it?

That's more of a css question really. You can see the html template here:
https://github.com/tzapu/WiFiManager/blob/master/extras/WiFiManager.template.html

github.com/tzapu/WiFiManager@e978bc059c/extras/WiFiManager.template.html (L221-L231)

And use the code @charitha95 already provided, but with your custom css to hide the buttons.

In your case, this would be:

wifiManager.setCustomHeadElement("<style>form[action='/info'],form[action='/exit']:nth-of-type(2){display:none}</style>");

@gokhanmeteerturk commented on GitHub (Jul 21, 2024): @ppytlarz > i want to delete 2 buttons info and update where i can delete it? That's more of a css question really. You can see the html template here: [https://github.com/tzapu/WiFiManager/blob/master/extras/WiFiManager.template.html](https://github.com/tzapu/WiFiManager/blob/master/extras/WiFiManager.template.html) https://github.com/tzapu/WiFiManager/blob/e978bc059c522404c01e06cd136fcf23234eb784/extras/WiFiManager.template.html#L221-L231 And use the code @charitha95 already provided, but with your custom css to hide the buttons. In your case, this would be: ```c wifiManager.setCustomHeadElement("<style>form[action='/info'],form[action='/exit']:nth-of-type(2){display:none}</style>"); ```