По умолчанию (стандартное оформление вида фотографий системы) фотографии на главной странице фотоальбома выглядят довольно скучно и уныло
<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>
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;
}
С помощью нехитрых манипуляций с 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;
}
Вот и все манипуляции
теперь вид фотографий на главной фотоальбома стал немного приятнее)
Ну и, к примеру, как можно обыграть данное решение на странице с фотографией и комментариями к ней
Адаптация для uCoz: PS-Studio.Info
Всего комментариев: 0
Оставь комментарий первым!

