Рейтинг: 4.0/1

Метки

вид фотографий для ucoz

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

Чего добавлять больше?
Всего ответов: 192

Главная » 2011 » Март » 8 » Вид фотографий на главной фотоальбома (Изменяем вид фотографий главной страницы фотоальбома)

По умолчанию (стандартное оформление вида фотографий системы) фотографии на главной странице фотоальбома выглядят довольно скучно и уныло

С помощью нехитрых манипуляций с CSS мы это немного подправим:

Реализация решения

1. Открываем Панель управления сайтом, заходим в редактирование шаблона "Вид фотографий" и заменяем весь имеющийся в нем код на такой:

Code

<div align="center">
<div style="padding-bottom:1px;"><?if($PHOTO_NAME$)?><a href="$PHOTO_URL$"><?if(len($PHOTO_NAME$)>25)?><?substr($PHOTO_NAME$,0,23)?>...<?else?>$PHOTO_NAME$<?endif?></a><?endif?><?else?> </div>
<a href="$PHOTO_LIGHTBOX_URL$" title="Просмотры: $REVIEWS$ | Размеры: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb">
<div class="img-desc">
$PHOTO$
<?if($CAT_NAME$)?><cite><a class="my_fotos" href="$CAT_URL$"><?if(len($CAT_NAME$)>25)?><?substr($CAT_NAME$,0,23)?>...<?else?>$CAT_NAME$ <?endif?></a></cite><?endif?>

</div>
</a>

<div style="margin-top:2px;" class="eDetails">
<?if($MODER_PANEL$)?><div style="position:absolute;z-index:30;">$MODER_PANEL$</div><?endif?>
<?if($RATING$)?><div align="center"><?$RSTARS$('12','/.s/img/stars/3/12.png','0','float')?></div><?endif?>
</div></div>

2. После этого в файл стилей CSS нужно добавить строки:

Code

a.my_fotos:link {color:white;text-decoration:none;}
a.my_fotos:visited {color:white;text-decoration:none;}
a.my_fotos:hover {color:white;text-decoration:underline;}
a.my_fotos:active {color:white;text-decoration:none;}

.img-desc {
position: relative;
display: block;
height:136px;
width: 170px;
border:4px #c4c4c4 double;
}

.img-desc cite {
background: #111;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 150px;
padding: 10px;
border-top: 1px solid #999;
}

Вот и все манипуляции smile теперь вид фотографий на главной фотоальбома стал немного приятнее)

Ну и, к примеру, как можно обыграть данное решение на странице с фотографией и комментариями к ней

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

Ссылка:
BB-код:
HTML-код:
Всего комментариев: 0
Оставь комментарий первым!
Имя *:
Email:
Код *: