Мини профиль для сайта (5 цветовых вариантов)

Уважаемый гость! Для скачивания файлов с нашего портала необходимо авторизоваться:

Понравилась статья?

Поделись с друзьями!
Стильный красивый мини профиль для сайта, имеющий 5 вариантов цветовой палитры.

Установка красного мини-профиля (Демо 1)
В самый низ таблицы стилей CSS, вставляем:
Код

.miniprofile {
  background-color: #D35400;
  position: absolute;
  bottom: 3px;
  right: 3px;
  padding: 5px;
}
.miniprofile img {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  border: 2px solid white;
}
.miniprofile a {
  color: white;
  font-weight: bold;
}
.miniprofile a:hover {
  text-decoration: none;
  color: #D2D7D3;
}


Перед , вставляем следующее:
Код

  <?if($USER_LOGGED_IN$)?>
<div class="miniprofile">
  <a href="$PERSONAL_PAGE_LINK$">$USERNAME$</a><a href="$_PM_READ_URL$"> ($UNREAD_PM$)</a>
  <img src="$USER_AVATAR_URL$" alt="$USERNAME$">
  <a href="/index/10">Выход</a>

  </div>
  <?endif?>


Установка темно-синего мини-профиля (Демо 2)
В самый низ таблицы стилей CSS, вставляем:
Код

.miniprofile {
  background-color: #1E824C;;
  position: absolute;
  bottom: 3px;
  right: 3px;
  padding: 5px;
}
.miniprofile img {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  border: 2px solid white;
}
.miniprofile a {
  color: white;
  font-weight: bold;
}
.miniprofile a:hover {
  text-decoration: none;
  color: #D2D7D3;
}


Перед , вставляем следующее:
Код

  <?if($USER_LOGGED_IN$)?>
<div class="miniprofile">
  <a href="$PERSONAL_PAGE_LINK$">$USERNAME$</a><a href="$_PM_READ_URL$"> ($UNREAD_PM$)</a>
  <img src="$USER_AVATAR_URL$" alt="$USERNAME$">
  <a href="/index/10">Выход</a>

  </div>
  <?endif?>


Установка синего мини-профиля (Демо 3)
В самый низ таблицы стилей CSS, вставляем:
Код

.miniprofile {
  background-color: #1F3A93;
  position: absolute;
  bottom: 3px;
  right: 3px;
  padding: 5px;
}
.miniprofile img {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  border: 2px solid white;
}
.miniprofile a {
  color: white;
  font-weight: bold;
}
.miniprofile a:hover {
  text-decoration: none;
  color: #D2D7D3;
}


Перед , вставляем следующее:
Код

  <?if($USER_LOGGED_IN$)?>
<div class="miniprofile">
  <a href="$PERSONAL_PAGE_LINK$">$USERNAME$</a><a href="$_PM_READ_URL$"> ($UNREAD_PM$)</a>
  <img src="$USER_AVATAR_URL$" alt="$USERNAME$">
  <a href="/index/10">Выход</a>

  </div>
  <?endif?>


Установка зеленого мини-профиля (Демо 4)
В самый низ таблицы стилей CSS, вставляем:
Код

.miniprofile {
  background-color: #2C3E50;
  position: absolute;
  bottom: 3px;
  right: 3px;
  padding: 5px;
}
.miniprofile img {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  border: 2px solid white;
}
.miniprofile a {
  color: white;
  font-weight: bold;
}
.miniprofile a:hover {
  text-decoration: none;
  color: #D2D7D3;
}


Перед , вставляем следующее:
Код

  <?if($USER_LOGGED_IN$)?>
<div class="miniprofile">
  <a href="$PERSONAL_PAGE_LINK$">$USERNAME$</a><a href="$_PM_READ_URL$"> ($UNREAD_PM$)</a>
  <img src="$USER_AVATAR_URL$" alt="$USERNAME$">
  <a href="/index/10">Выход</a>

  </div>
  <?endif?>


Установка оранжевого мини-профиля (Демо 5)
В самый низ таблицы стилей CSS, вставляем:
Код

.miniprofile {
  background-color: #CF000F;
  position: absolute;
  bottom: 3px;
  right: 3px;
  padding: 5px;
}
.miniprofile img {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  border: 2px solid white;
}
.miniprofile a {
  color: white;
  font-weight: bold;
}
.miniprofile a:hover {
  text-decoration: none;
  color: #D2D7D3;
}


Перед , вставляем следующее:
Код

  <?if($USER_LOGGED_IN$)?>
<div class="miniprofile">
  <a href="$PERSONAL_PAGE_LINK$">$USERNAME$</a><a href="$_PM_READ_URL$"> ($UNREAD_PM$)</a>
  <img src="$USER_AVATAR_URL$" alt="$USERNAME$">
  <a href="/index/10">Выход</a>

  </div>
  <?endif?>
Добавил: Admin Просмотров: 1248 Категория: Интересные решения Комментарии
avatar
1
Зачем идею дизайна у uotvet.ru взяли?
avatar
0
2
Идея и дизайн не с uotvet взята точно smile
На многих сайтах есть подобные мини-профили
avatar