Нонче тут

Сейчас 85 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте


Будем добавлять симпатичную кнопку "Читать далее" в CMS UCOZ с иcпользованием css.
За вид материалов в каждом блоке отвечает отдельный пункт- мы будем редактировать все виды материалов, где у нас есть "краткий текст", но нет кнопки "Далее", а это блог, каталог статей и доска объявлений.
В новостях есть системная переменная $CUT$, так что краткий текст там не нужен особо.
Начнём с доски объявлений

  • Доска объявлений » Настройки модуля » поставте галочки напротив краткого и полного текста материала
  • Управление дизайном » Редактирование шаблонов » Вид материалов
  • Если у вас в коде стоит системная переменная $BRIEF$, то смените её на $MESSAGE$
  • Скопируйте исходный код!
  • Ваш код вcтавляйте в любое место кода после $MESSAGE$ <?endif?>
<div style="text-align:right;"> <a href='$ENTRY_URL$' title="$TITLE$" class="more-lin"> <b>Читать далее...</b></a></div> Для остальных модулей
  • Модуль » Настройки модуля » поставте галочки напротив краткого и полного текста материала
  • Управление дизайном » Редактирование шаблонов » Вид материалов
  • Скопируйте исходный код!
  • Ваш код вcтавляйте в любое место кода после $MESSAGE$ <?endif?>
Зададим кнопке класс more-lin и создадим стиль для кнопки
 
/*стиль кнопки*/
.more-lin{  background: url(export.png) no-repeat right center #F2B879; 
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif !important;
 font-size: 16px !important;
 line-height: 13pt; font-weight:400; 
font-style:italic  !important; padding: 5px 16px 5px 5px; 
 border:1px solid #EA9750;  
 border-radius: 5px; 
 box-shadow: 2px 3px 5px #BE7035;}
/*стиль при наведении*/
.more-lin:hover{ background: url(export.png) no-repeat right center #F2B777; 
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif !important;
 font-size: 16px !important;
 line-height: 13pt; font-weight:400; 
font-style:italic  !important; padding: 5px 16px 5px 5px;
 border:1px solid #A73223;  border-radius: 5px; 
 box-shadow: 2px 3px 5px #BE7035;  
 text-decoration:none;}

export.png- фоновый рисунок >>

Пример кнопочки
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.