Изменение фона входа в административную панель — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(Актуализация статьи)
Строка 1: Строка 1:
  
'''Актуально для версии 2.9'''
+
'''Актуально для версии 20'''
 +
 
 +
== Задача ==
  
 
Очень часто хочется изменить стандартный фон входа в административную панель, причем не просто поменять картинку, а добавить что-то интересное. В качестве примера рассмотрим такую ситуацию, когда на нашу добавляемую картинку накладывается фон стандартной картинки UMI.CMS.
 
Очень часто хочется изменить стандартный фон входа в административную панель, причем не просто поменять картинку, а добавить что-то интересное. В качестве примера рассмотрим такую ситуацию, когда на нашу добавляемую картинку накладывается фон стандартной картинки UMI.CMS.
  
Нам необходимо отредактировать файл /styles/skins/mac/main_login.xsl
+
== Решение ==
 +
 
 +
=== Решение для Modern ===
 +
 
 +
Для изменения фона страницы авторизации нужно отредактировать файл /styles/skins/modern/design/css/mainLogin.css
  
 
Нас интересует следующий участок кода:
 
Нас интересует следующий участок кода:
<source lang="xml">
+
<source lang="css">
 +
body {
 +
background-image: linear-gradient(transparent 70%, #082d42 100%), radial-gradient(circle farthest-side, #0077c5 0px, #045684 70%, #082d42 100%);
 +
height: 100%;
 +
overflow: hidden;
 +
width: 100%;
 +
}
 +
</source>
 +
 
 +
По умолчанию фон задается при помощи CSS градиентов, можно поменять цвет или установить свое изображение для фона:
 +
<source lang="css">
 
body {
 
body {
    background: url(/images/cms/admin/mac/common/bg.jpg) center center;
+
background: url(/images/cms/admin/mac/common/bg.jpg) center center;
    height: 100%;  
+
height: 100%;
    margin: 0;
+
overflow: hidden;
    }
+
width: 100%;
 +
}
 
</source>
 
</source>
Тут мы задаем стандартное изображение UMI.CMS
+
 
 +
Иногда может потребоваться убрать эффект параллакса, для этого необходимо в файле /styles/skins/modern/main_login.xsl удалить или закомментировать следующий код:
 
<source lang="xml">
 
<source lang="xml">
#sub {
+
<div class="bubbles" />
    background: url(/images/cms/admin/mac/common/bg5.jpg) center center;
+
<div class="bubbles-front" />
    height: 100%;
+
</source>
    margin: 0;
+
 
    opacity: 0.50;
+
А так же в файле /styles/skins/modern/design/js/mainLogin.js удалить или закомментировать строку:
    }
+
<source lang="js">
 +
initBubbles();
 
</source>
 
</source>
Здесь мы описываем новое изображение, и указываем необходимую прозрачность.
+
 
После этого, необходимо следующий код:
+
=== Решение для Butterfly (mac) ===
<source lang="xml">
+
 
<body onload="javascript:document.getElementById('login_field').focus();">
+
Нам необходимо отредактировать файл /styles/skins/mac/main_login.xsl
<div id="main">
+
 
 +
Нас интересует следующий участок кода:
 +
<source lang="css">
 +
body {
 +
background: url(/images/cms/admin/mac/common/bg1.jpg) center center;
 +
height: 100%;
 +
margin: 0;
 +
}
 
</source>
 
</source>
Изменить на  
+
Тут мы меняем стандартное изображение UMI.CMS на альтернативное:
<source lang="xml">
+
<source lang="css">
<body onload="javascript:document.getElementById('login_field').focus();">
+
body {
<div id="sub">
+
background: url(/images/cms/admin/mac/common/bg.jpg) center center;
</div>
+
height: 100%;
<div id="main">
+
margin: 0;
 +
}
 
</source>
 
</source>
Теперь при заходе в административную панель мы сможем наслаждаться новым фоном, который объединяет наше собственное изображение и стандартный фон UMI.CMS. В данный момент все внесенные изменения исчезнут после обновления. Чтобы это не произошло, рекомендуем воспользоваться нашей статьей [[Добавление нового дизайна административной панели]]
+
 
 +
 
 +
Теперь при заходе в административную панель мы сможем наслаждаться новым фоном.  
 +
 
 +
=== Внимание ===
 +
 
 +
В данный момент все внесенные изменения исчезнут после обновления системы. Чтобы это не произошло, рекомендуем воспользоваться статьей [[Добавление нового дизайна административной панели]] или документацией [http://api.docs.umi-cms.ru/razrabotka_nestandartnogo_funkcionala/peregruzka_shablonov_administrativnogo_interfejsa/ Перегрузка шаблонов административного интерфейса]
  
 
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]]
 
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]]

Версия 09:47, 8 мая 2019

Актуально для версии 20

Задача

Очень часто хочется изменить стандартный фон входа в административную панель, причем не просто поменять картинку, а добавить что-то интересное. В качестве примера рассмотрим такую ситуацию, когда на нашу добавляемую картинку накладывается фон стандартной картинки UMI.CMS.

Решение

Решение для Modern

Для изменения фона страницы авторизации нужно отредактировать файл /styles/skins/modern/design/css/mainLogin.css

Нас интересует следующий участок кода:

body {
	background-image: linear-gradient(transparent 70%, #082d42 100%), radial-gradient(circle farthest-side, #0077c5 0px, #045684 70%, #082d42 100%);
	height: 100%;
	overflow: hidden;
	width: 100%;
}

По умолчанию фон задается при помощи CSS градиентов, можно поменять цвет или установить свое изображение для фона:

body {
	background: url(/images/cms/admin/mac/common/bg.jpg) center center;
	height: 100%;
	overflow: hidden;
	width: 100%;
}

Иногда может потребоваться убрать эффект параллакса, для этого необходимо в файле /styles/skins/modern/main_login.xsl удалить или закомментировать следующий код:

<div class="bubbles" />
<div class="bubbles-front" />

А так же в файле /styles/skins/modern/design/js/mainLogin.js удалить или закомментировать строку:

initBubbles();

Решение для Butterfly (mac)

Нам необходимо отредактировать файл /styles/skins/mac/main_login.xsl

Нас интересует следующий участок кода:

body {
	background: url(/images/cms/admin/mac/common/bg1.jpg) center center;
	height: 100%; 
	margin: 0;
}

Тут мы меняем стандартное изображение UMI.CMS на альтернативное:

body {
	background: url(/images/cms/admin/mac/common/bg.jpg) center center;
	height: 100%; 
	margin: 0;
}


Теперь при заходе в административную панель мы сможем наслаждаться новым фоном.

Внимание

В данный момент все внесенные изменения исчезнут после обновления системы. Чтобы это не произошло, рекомендуем воспользоваться статьей Добавление нового дизайна административной панели или документацией Перегрузка шаблонов административного интерфейса