tzapu / WiFiManager

ESP8266 WiFi Connection manager with web captive portal
http://tzapu.com/esp8266-wifi-connection-manager-library-arduino-ide/
MIT License
6.63k stars 1.98k forks source link

Custom CSS and Html #1159

Open rohoop opened 3 years ago

rohoop commented 3 years ago

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:

Esp8266/Esp32:

Hardware: ESP-12e, esp01, esp25

ESP Core Version: 2.4.0, staging

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
charitha95 commented 3 years ago

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

IcaroCreativa commented 3 years ago

Hi!

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

Thanks!

IcaroCreativa commented 3 years ago

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

ppytlarz commented 9 months ago

Hi,

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

image

gokhanmeteerturk commented 4 months ago

@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/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:

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