IDP. Кастомизация логотипа, фонового изображения, ссылок и иконки на странице входа
Автор Viktor Barmakov, Last modified by Denis Prokopyev на 24 февраля 2024 11:06 PM

Примечание:

Все действия выполняем на сервере с установленным и настроенным Indeed AM Identity Provider версии 8.1.5 и выше.


Оглавление

Логотип

Размер логотипа, установленного по умолчанию: 118x30. Для наилучшего качества логотипа лучше заготавливать изображение с нужным Вам размером изначально. Его можно будет поменять, в дальнейшем это будет затронуто, но изображение может плохо масштабироваться.

Изменение изображения логотипа

  1. Нужный логотип переименовываем в logo.png и копируем с заменой в папку "C:\inetpub\wwwroot\am\idp\wwwroot\images\".
    Абсолютный путь к логотипу должен быть следующим:

    "C:\inetpub\wwwroot\am\idp\wwwroot\images\logo.png".
  2. Очистить кэш браузера и перезагрузить страницу с IDP.

    Изменение размера логотипа

    Изменим размер на 300x107:

    1. По пути "C:\inetpub\wwwroot\am\idp\wwwroot\images\", открываем в любом текстовом редакторе файл "_Layout.cshtml".
    2. Находим строчку <img src="~/images/logo.png"/> и добавляем в неё атрибуты width="300" height="107".
      Должно получиться следующее:
      <img src="~/images/logo.png" width="512" height="182"/>
    3. Перезагрузить страницу с IDP и дождаться обновления логотипа. (Если не обновляется, то очистить кэш браузера и перезагрузить страницу)

      Автомасштабирование логотипа

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

      1. По пути "C:\inetpub\wwwroot\am\idp\wwwroot\images\", открываем в любом текстовом редакторе файл "_Layout.cshtml".
      2. Находим строчку <img src="~/images/logo.png"/> и добавляем в неё атрибут style="width:100%".
        Должно получиться следующее:

        <img src="~/images/logo.png" style="width:100%"/>
      3. Перезагрузить страницу с IDP и дождаться обновления логотипа. (Если не обновляется, то очистить кэш браузера и перезагрузить страницу)

        Отобразить логотип слева

        Для отображения логотипа слева применяется css стиль.

        1. По пути "C:\inetpub\wwwroot\am\idp\wwwroot\images\", открываем в любом текстовом редакторе файл "_Layout.cshtml".
        2. Находим следующие строчки кода: 
          <div class="text-right">

               <img src="~/images/logo.png"/>
          </div>
        3. Меняем в теге <div> атрибут class="text-right" на class="text-left". Должно получиться следующее:
          <div class="text-left">

               <img src="~/images/logo.png"/>
          </div>
        4. Перезагрузить страницу с IDP и дождаться обновления логотипа. (Если не обновляется, то очистить кэш браузера и перезагрузить страницу)

          Отобразить логотип по центру

          Для отображения логотипа по центру применяется css стиль.

          1. По пути "C:\inetpub\wwwroot\am\idp\wwwroot\images\", открываем в любом текстовом редакторе файл "_Layout.cshtml".
          2. Находим следующие строчки кода:
            <div class="text-right">
                 <img src="~/images/logo.png"/>
            </div>
          3. Меняем в теге <div> атрибут class="text-right" на class="text-center". Должно получиться следующее:
            <div class="text-center">
                 <img src="~/images/logo.png"/>
            </div>
          4. Перезагрузить страницу с IDP и дождаться обновления логотипа. (Если не обновляется, то очистить кэш браузера и перезагрузить страницу)

            Отобразить логотип справа

            Данная настройка выполнена по умолчанию. Поэтому её осуществлять нужно только в том случае, если до этого выполнялись какие-либо изменения для местоположения иконки на форме. Для отображения логотипа справа применяется css стиль.

            1. По пути "C:\inetpub\wwwroot\am\idp\wwwroot\images\", открываем в любом текстовом редакторе файл "_Layout.cshtml".
            2. Находим следующие строчки кода:
              <div class="ваша_текущая_настройка">

                   <img src="~/images/logo.png"/>
              </div>
            3. Меняем в теге <div> атрибут class="ваша_текущая_настройка" на class="text-right". Должно получиться следующее:
              <div class="text-right">
                   <img src="~/images/logo.png"/>

              </div>
            4. Перезагрузить страницу с IDP и дождаться обновления логотипа. (Если не обновляется, то очистить кэш браузера и перезагрузить страницу)

              Иконка

              Размер иконки, установленной по умолчанию: 16x16

              Изменение изображения иконки

              1. Нужную иконку переименовываем в favicon.icon и копируем с заменой в папку "C:\inetpub\wwwroot\am\idp\wwwroot\images\".
                Абсолютный путь к логотипу должен быть следующим:
                "C:\inetpub\wwwroot\am\idp\wwwroot\images\favicon.icon".
              2. Очистить кэш браузера и перезагрузить страницу с IDP.

                Фоновое изображение

                Размер фонового изображения, установленного по умолчанию: 4608x3456

                Изменение фонового изображения

                1. Нужный бэкграунд переименовываем в background.jpg и копируем с заменой в папку "C:\inetpub\wwwroot\am\idp\wwwroot\images\".
                  Абсолютный путь к логотипу должен быть следующим:
                  "
                  C:\inetpub\wwwroot\am\idp\wwwroot\images\background.jpg"
                2. Очистить кэш браузера и перезагрузить страницу с IDP.

                Добавление ссылок

                Добавление одной ссылки

                1. По пути "C:\inetpub\wwwroot\am\idp\Views\Home", открываем в любом текстовом редакторе файл "Index.cshtml".
                2. Находим следующую строчку кода:
                  <div class="invalid-feedback">
                3. Перед ней вставляем код следующего вида:

                  <div>
                  текст без ссылки, если нужен <a target="_blank" href="ссылка">текст ссылки</a>
                  </div>

                4. Перезагружаем страницу с IDP.

                Выравнивание ссылки

                Для выравнивания текста относительно края окна необходимо добавить атрибут align="значение" в тег <div>.

                Доступные значения: 

                1. Left - выравнивание по левому краю окна. Значение по умолчанию при отсутствии атрибута.
                2. Right - выравнивание по правому краю окна.
                3. Center - выравнивание по центру окна.

                Добавление нескольких ссылок

                Для добавления второй и последующих ссылок достаточно добавить новый тег <a> после закрывающего тега </a> предыдущей ссылки.
                Можно перенести новую ссылку на следующую строку, добавив перед её тегом <a> тег <br>.

                <div align="center">
                текст без ссылки <a target="_blank" href="ссылка">текст ссылки</a><br>
                <a target="_blank" href="ссылка2">ссылка 2</a>
                </div>

                (3 голос(а))
                Эта статья полезна
                Эта статья бесполезна

                Комментарии (0)
                Добавить новый комментарий
                 
                 
                Полное имя:
                Email:
                Комментарии: