FlProg

форум
https://forum.flprog.ru/

WEB интерфейс - стили

https://forum.flprog.ru/viewtopic.php?t=7694

Страница 3 из 3

WEB интерфейс - стили

Добавлено: 21 июн 2019, 00:18
ivanpost
Помогите сделать минимально адаптивный интерфейс. Главное, чтобы изменялся размер шрифта, в зависимости от платформы и размера экрана... Ну может еще меню чтобы переехало на верх...

WEB интерфейс - стили

Добавлено: 23 июн 2019, 22:03
ivanpost
Хотя бы как задать стиль параметра? Почему то из общих стили не вставляются...

WEB интерфейс - стили

Добавлено: 24 июн 2019, 06:16
Evgesha
[ref]ivanpost[/ref], может это чем то поможет.

viewtopic.php?t=5053

WEB интерфейс - стили

Добавлено: 08 июл 2019, 14:35
UB6AFB
Приветствую всех!
Делаю Web Server (мониторинг потребляемой мощности генератора, температуры и т.д). Помогите загрузить картинки в ESP8266, так чтобы при обращении к странице изображения грузились из ESP8266. Если использовать небольшие картинки, что можно легко поместиться в 4мб. Есть примеры реализации:

http://digitrode.ru/computing-devices/m ... 23:1,24:16

Особенно хотелось бы повторить на Flprog что-то такое:

https://circuits4you.com/2018/02/03/esp ... ial-gauge/

Может кто подскажет как это сделать? :smile469:

WEB интерфейс - стили

Добавлено: 13 апр 2020, 22:54
Rovki
Выкладываю свой стиль (цвет фиолетовый) [spoiler] body {
background-color: #cc71d1;
}
.header
{
padding: 10px;
left: 0px;
right: 0px;
top: 0px;
background: #330433;
color: rgb(224, 255, 255);
text-align: center;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
font-size: 250%;
}
.menu
{
float:left;
padding: 1%;
margin: 1%;
width:16%;
background: #B1B0B0;
border: 1px solid black;
border-radius: 8px;
}
.menuItem
{
background: #B1B0B0;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
}
.content
{
float:right;
width:78%;
background: #cc71d1;
color: rgb(46, 4, 46);
}
.footer
{
float:left;
padding: 1%;
width:98%;
background: #330433;
margin-top: 1%;
color: rgb(224, 255, 255);
text-align: center;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
font-size: 150%;
}
.buttonFlp
{
width:150px;
border-radius:20px;
background:#330433;
color: rgb(224, 255, 255);
font-size:12px;
cursor:pointer;
float:left;
padding: 1%;
margin: 1%;
}
.buttonFlp:hover
{
background:#330433;
}
.buttonFlp:focus
{
outline:none;
}[/spoiler]

WEB интерфейс - стили

Добавлено: 26 апр 2020, 04:01
belyx
Rovki писал(а): 13 апр 2020, 22:54 Выкладываю свой стиль (цвет фиолетовый)
а приложить скриншот для наглядности ?

WEB интерфейс - стили

Добавлено: 27 апр 2020, 23:24
belyx
Запарился сегодня.
Сотворил свой стиль с костылями.
к этому проекту
[spoiler]
101.jpg
103.jpg
[/spoiler]
костыль отсюда - добавлял (вместо названия "moskou" в примере) стиль под названием "pole",но
Evgesha писал(а): 04 апр 2019, 19:13 далее указать в стиле самого параметра "moskou"
Спойлер
тут ничего не указывал (пустое поле оставлял).
когда вставлял то получалось такая байда
[spoiler]
51.jpg
53.jpg
[/spoiler]

Не получилось увеличить чек боксы и убрать белый фон слева и под подвалом.
Как сделать не знаю - сдался.
Сам стиль вставлял в общий стиль.
Подправил
стиль зелёный текст_.txt

Код: Выделить всё

 body {
 background-color: #0d0d0d;
} 
 .menu 
	{
	float:left;    
	padding: 1%;    
	 margin: 1%;
	width:16%;   
	background: #ffea00;
	 border: 1px solid black;
	border-radius: 8px;
	} 
.menuItem 
	{    
	font-weight: 600;
	background: #ffea00;
	font-family: 'Times New Roman', Times, serif;
	font-size: 110%;
	} 
 .header 
	{    
	padding: 10px;     
	left: 0px;    
	right: 0px;     
	top: 0px;      
	background: #00FFFF; 
	color: rgb(0, 0, 0); 
	text-align: center;
	font-weight: 600;
	font-family: 'Times New Roman', Times, serif;
	font-size: 250%; 
	}   
.content 
	{    
	float:right;    
	width:78%;
	background: #000033;
	color: rgb(0,253,0); 
	font-size: 40px;
	}   
.pole
	{    
	float:right;    
	width:78%;
	background: #ffea6c; 
	color: rgb(205,0,16); 
	font-size: 40px;
	}   
.footer
	{   
	float:left;   
	padding: 1%;    
	width:98%;    
	background: #00FFFF;  
 	margin-top: 1%; 
	color: rgb(0, 0, 0); 
 	text-align: center;
	font-weight: 600;
	font-family: 'Times New Roman', Times, serif;
	font-size: 150%;
	}
.buttonFlp 
	{
	width:160px;
	border-radius:40px;
	background:#358DE5;
	color:#ffffff;
	font-size: 16px;
	cursor:pointer;
	float:left;    
	padding: 1%;    
	 margin: 1%;
	}
.buttonFlp:hover
	{
	background:#E60000;
	}
.buttonFlp:focus
	{
	outline:none;
	}

WEB интерфейс - стили

Добавлено: 28 апр 2020, 13:54
Dev1
Темный стиль для планшета(на мобильном глаза не видят), с измененной разметкой(как в сообщении 34) по сравнению с дефолтной. На планшете выглядит более сочно чем на скрине :(
[spoiler]
Screenshot_20200428-070202.png
Screenshot_20200428-070154.png
[/spoiler]
[spoiler]

Код: Выделить всё

 body {
 background-color: #230023;
}
 .header 
	{    
	margin: 1%; 
	padding: 1%;
	border-radius: 5px;
	background: #230023;
	background: radial-gradient(#470047, #27236F);
	color: #FEFFE7;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 200%; 
	}   
 .menu 
	{
	float:left;    
	padding: 1%;    
	margin: 1%;
	width:16%;    
	background: #F7F9E4;
	border: 1px solid black;
	border-radius: 5px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 120%;	
	} 
.menuItem 
	{  
	background: #F7F9E4;
	font-weight: 500;
	} 
.content 
	{    
	float:right;    
	width:78%;
	background: #230023;
	color: #FEFFE7;
	font-weight: 500;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 120%;
	}   
.footer
	{   
	float:left;   
	margin: 1%;
	padding: 1%;
	width:96%; 
	border-radius: 5px;
	background: #230023;
	background: radial-gradient(#470047, #27236F);
	color: #FEFFE7;
 	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 150%;
	}
.buttonFlp 
	{
	width:150px;
	border-radius:5px;
	background:#470047;
	color: rgb(224, 255, 255);
	font-size:18px;
	cursor:pointer;
	float:left;    
	padding: 1%;    
	}
.buttonFlp:hover
	{
	background:#27236F;
	}
.buttonFlp:focus
	{
	outline:none;
	}
[/spoiler]

WEB интерфейс - стили

Добавлено: 28 апр 2020, 14:05
Dev1
belyx писал(а): 27 апр 2020, 23:24 background-color: ##0d0d0d;
У вас 2 # а нужно 1
background-color: #0d0d0d;
И не совсем понял зачем чек-боксы Установка и Запись, есть переменные Будильник часы и минуты их и вводите, по нажатию кнопки сохранить переменные запишутся. А чек-боксом будете вкл и выкл будильник. Как то так :smile44:

WEB интерфейс - стили

Добавлено: 28 апр 2020, 14:28
belyx
Dev1 писал(а): 28 апр 2020, 14:05 И не совсем понял зачем чек-боксы Установка и Запись, есть переменные Будильник часы и минуты их и вводите, по нажатию кнопки сохранить переменные запишутся.
Да я знаю, что они как бы лишние, но лень было переделывать - изначально делал под ремоте, да и это больше всё-таки пример
Dev1 писал(а): 28 апр 2020, 14:05 У вас 2 # а нужно 1
background-color: #0d0d0d;
.
Спасибо - посмотрю.......подправил.

WEB интерфейс - стили

Добавлено: 03 май 2020, 16:58
belyx
Доделал стиль к этому сообщению
new стиль зелёный текст.txt
не забываем про костыль - вставляем в иде в нужном месте class=\"pole\"
Выглядит на телефоне так, проект лежит тут
[spoiler]
new WEB ориг.jpg
[/spoiler]

WEB интерфейс - стили

Добавлено: 03 май 2020, 17:58
rw6cm
belyx писал(а): 03 май 2020, 16:58 не забываем про костыль
Не пойму зачем нужен этот костыль?
И зачем менять общий стиль? есть же стиль страницы вносите в него свои изменения.

WEB интерфейс - стили

Добавлено: 03 май 2020, 18:17
belyx
Ну вот лично меня не устроил общий стиль с теми полями ввода и объяснений (какого либо урока) как это сделать я лично не нашёл. Вот поэтому и появляются костыли - от недостатка информации.А вот то что я нашёл, то и использовал !
[ref=#ff8000]rw6cm[/ref], вот покажите , как это сделать штатными средствами !

WEB интерфейс - стили

Добавлено: 03 май 2020, 18:37
rw6cm
belyx писал(а): 03 май 2020, 18:17 как это сделать штатными средствами
Посмотрите этот проект.
В нем не было цели изменять общий фон, (это можно и общим стилем)
Внимание обратите на стиль страницы и стилей параметров в проекте
[spoiler title=Пример без костылей]
2020_05_03_18_53_38_Mozilla_Firefox.png
[/spoiler]

WEB интерфейс - стили

Добавлено: 03 май 2020, 23:31
belyx
rw6cm писал(а): 03 май 2020, 18:37 Посмотрите этот проект.
Посмотрел - в проекте только вывод параметров, ввода нет. Но я ещё раз попробую.
Как по науке я понимаю и даже попытка была , но с вставкой в код.
[ref=#ff8000]rw6cm[/ref], сходу не нашел,что у вас означает
[spoiler] .meteocontent
{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1f;
}[/spoiler]
особенно вот это 1fr 1fr 1fr 1fr :smile171: и последнее 1f;(без r)

WEB интерфейс - стили

Добавлено: 04 май 2020, 00:41
Dev1
belyx писал(а): 03 май 2020, 23:31
rw6cm писал(а): 03 май 2020, 18:37 Посмотрите этот проект.
Посмотрел - в проекте только вывод параметров, ввода нет. Но я ещё раз попробую.
Как по науке я понимаю и даже попытка была , но с вставкой в код.
[ref=#ff8000]rw6cm[/ref], сходу не нашел,что у вас означает
[spoiler] .meteocontent
{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1f;
}[/spoiler]
особенно вот это 1fr 1fr 1fr 1fr :smile171: и последнее 1f;(без r)
Это css...

WEB интерфейс - стили

Добавлено: 04 май 2020, 01:08
rw6cm
belyx писал(а): 03 май 2020, 23:31 сходу не нашел,что у вас означает
Эти две строки роли уже не играют, помню что их удалял, да видно уснул после первой буквы :smile171: а утром выложил не посмотрев ))
Означали они деление на 4 равных фракции по столбцам и строкам, но после захотел еще вставить место под график, и раскрой стал другой.
Эти значения потеряли свой приоритет.
Вообще на изучение верстки потратил всего пару вечеров, и не чувствую себя гуру в этом темном деле )), подсказку дал только по флпрог.

WEB интерфейс - стили

Добавлено: 13 май 2020, 13:35
belyx
rw6cm писал(а): 03 май 2020, 17:58 Не пойму зачем нужен этот костыль?
rw6cm писал(а): 03 май 2020, 17:58 есть же стиль страницы вносите в него свои изменения.
belyx писал(а): 03 май 2020, 18:17 меня не устроил общий стиль с теми полями ввода
rw6cm писал(а): 03 май 2020, 18:37 обратите на стиль страницы и стилей параметров в проекте
belyx писал(а): 03 май 2020, 23:31 Посмотрел - в проекте только вывод параметров, ввода нет. Но я ещё раз попробую.
НУ вот занялся, попытался сделать поле ввода штатными средствами
[spoiler title=результат и сравнение]
СРАВНЕНИЕ.png
[/spoiler]
задача просто не решается

WEB интерфейс - стили

Добавлено: 14 май 2020, 06:30
rw6cm
belyx писал(а): 13 май 2020, 13:35 задача просто не решается
Мат часть под учите, тогда и будет задача просто решаться :yes:
Стиль часов.flp

WEB интерфейс - стили

Добавлено: 14 май 2020, 13:18
belyx
во! что-то новенькое , вечером попробую, спасибо. :)
rw6cm писал(а): 14 май 2020, 06:30 Мат часть под учите
[ref=#ff8000]rw6cm[/ref], мы ж ,пользователи, в основной своей массе не такие ж прошаренные, вот тут мы и учимся !
будет полезно наверно для форумчан выложить скрины
[spoiler title= вашего примера]
2020_05_14_23.28.56.jpg
2020_05_14_23.29.06.jpg
[/spoiler]
Часовой пояс: UTC+03:00
Страница 3 из 3

Создано на основе phpBB® Forum Software © phpBB Limited

Русская поддержка phpBB