Оформление ссылок на скачивание для каталога файлов (оформляем ссылки более эффектно)

При добавлении материалов в модуле "Каталог файлов" системы uCoz на странице материала и комментариев к нему появляются ссылки на скачивание "Скачать с сервера", либо "Скачать удалённо". Стандартное оформление этих ссылок весьма убого выглядит

Предлагаю немного их облагородить wink и сделать их визуально такими:

они же, при наведении на них курсора мыши:

Реализация

Я покажу реализацию на примере модуля "Каталог файлов". Но данный рецепт можно применить абсолютно для всех ссылок на сайте, в любом модуле.

Итак, заходим в шаблон "Каталог файлов - Страница материала и комментариев к нему" и находим в нём код:

Code

<?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?>[ <?if($FILE_URL$)?><a href="$FILE_URL$">Скачать с сервера</a> ($FILE_SIZE$)<?endif?>
<?if($RFILE_URL$)?> · <a href="$RFILE_URL$" target="_blank">Скачать удаленно</a> ($RFILE_SIZE$)<?endif?>
<?if($SCREEN_URL$)?> · <a href="$SCREEN_URL$" target="_blank">Скриншот</a><?endif?> ]<?endif?>

Заменяем этот код на следующий:

Code

<?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?> <?if($FILE_URL$)?>
<a href="$FILE_URL$" class="minibutton btn-download">Скачать с сервера ($FILE_SIZE$)</a>
<?endif?>
<?if($RFILE_URL$)?>
<a href="$RFILE_URL$" target="_blank" class="minibutton btn-download">Скачать удаленно ($RFILE_SIZE$)</a>
<?endif?>
<?if($SCREEN_URL$)?> <a href="$SCREEN_URL$" target="_blank" class="minibutton btn-download">Скриншот</a><?endif?><?endif?>

Теперь необходимо в своём файле стилей или таблице стилей прописать:

Code

/* button basics */
  a.minibutton {
  display:inline-block;
  height:23px;
  padding:0 0 0 3px;
  font-size:11px;
  font-weight:bold;
  color:#333;
  text-shadow:1px 1px 0 #fff;
  background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat;
  white-space:nowrap;
  border:none;
  overflow:visible;
  cursor:pointer;
  text-decoration:none;
  }

  a.minibutton>span {
  display:block;
  height:23px;
  padding:0 10px 0 8px;
  line-height:23px;
  background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat;
  }

  a.minibutton:hover, a.minibutton:focus {
  color:#fff;
  text-decoration:none;
  text-shadow:-1px -1px 0 rgba(0,0,0,0.3);
  background-position:0 -30px;
  }
  a.minibutton:hover>span, a.minibutton:focus>span {background-position:100% -30px;}

  a.minibutton.mousedown{background-position:0 -60px; }
  a.minibutton.mousedown>span{background-position:100% -60px; }

  /* with icon */
  a.btn-download .icon {
  float:left;
  margin-left:-4px;
  width:18px;
  height:22px;
  background:url(http://github.com/images/modules/buttons/minibutton_icons.png?v20100306) 0 0 no-repeat;
  }
  a.btn-download .icon {background-position:-40px 0;}
  a.btn-download:hover .icon, a.btn-download:focus .icon {background-position:-40px -25px;}

Источник
Адаптация для uCoz: PS-Studio.Info

В прикреплении архив с изображениями.

Ссылка:

BB-код:

HTML-код:

Ещё по теме:

Всего комментариев: 0

Оставь комментарий первым!

Метки

Опрос: Чего добавлять больше?

Результаты опроса

Главная » 2011 » Февраль » 25 » Оформление ссылок на скачивание для каталога файлов (оформляем ссылки более эффектно)