|
Описание элементов нового вида фотоальбома uCoz
|
|
| webanet | Дата: Воскресенье, 2014-02-02, 23:15 | Сообщение # 1 |
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
|
В системе uCoz произошло обновление модуля фотоальбомы. В частности полностью изменился вид фотографий и полностью переработан и изменен код $NEAR_PHOTOS$ с помощью которого можно листать фотографии фотоальбома. Так же переработан вид фотографии на странице материала и комментария
Данная тема поможет вам разобраться с новыми элементами шаблона вида фотографий и понять что за что отвечает
По умолчанию шаблон вида фотографий выглядит так:
Код <span class="uphoto"> <span class="photo-title"><a href="$PHOTO_URL$">$PHOTO_NAME$</a></span> <span class="photo-block"> <span class="ph-wrap"> <span class="ph-tc">$PHOTO$</span> <a href="$PHOTO_LIGHTBOX_URL$" data-url="$PHOTO_URL$" title="Просмотры: $REVIEWS$ | Размеры: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb"> <span class="ph-tc"> <span class="ph-data"> <span class="ph-date">$DATE$</span> <span class="ph-descr"><?if(len($PHOTO_DESCR$)>120)?><?substr($PHOTO_DESCR$,0,117)?>...<?else?>$PHOTO_DESCR$<?endif?></span> <span class="ph-author" href="$PROFILE_URL$">$USER$</span> </span> </span> </a> </span> <span class="ph-details ph-js-details"> <?if($MODER_PANEL$)?><span style="position: absolute;z-index: 100;left: 15px;white-space: nowrap;">$MODER_PANEL$</span><?endif?> <span class="phd-views">$REVIEWS$</span> <?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$" class="phd-comments">$COMMENTS_NUM$</a><?endif?> <?if($RATING$)?> <span class="phd-rating"> <span id="entRating$ID$">$RATING$</span> </span> <span class="phd-dorating"><?$RSTARS$('14','http://sx.ucoz.net/img/photopage/rstars.png','1','float')?></span> <?endif?> </span> </span> </span>
Теперь рассмотрим каждый элемент отдельно
Список и описание стилей нового шаблона вида фотографий фотоальбома uCoz
<span class="uphoto"> отвечает за границы подложки фотографии, отвечает за размер подложки
<span class="photo-title"> отвечает за вид заголовка фотографии (название, которое выводится над фото)
<span class="photo-block"> отвечает за вид подложки фотографии за её оформление
<span class="ph-wrap"> отвечает за выравнивание фотографий на странице. приводит к общему виду
<span class="ph-tc"> выравнивает информацию о добавившем фото и о дате добавления. при удалении белая подложка при наведении исчезает, а информация спускается вниз под фотографию
class="ph-link" отвечает за вид фотографии при наведении. в частности за белую всплывающую подложку
<span class="ph-tc"> автоматически выравнивает по ширине и высоте вид информации о фотографии. в частности модер панель просмотры, количество комментариев и рейтинг
<span class="ph-data"> отвечает за вид информации о фотографии. в частности за вывод информации на белой подложке в виде даты и имени пользователя, который добавил материал
<span class="ph-date"> выводит строчку даты при наведении на картинку
<span class="ph-descr"> выводит описание фотографии при наведении, если оно есть
<span class="ph-author" href="$PROFILE_URL$"> выводит имя автора, который добавил фотографию при наведении на картинку
<span class="ph-details ph-js-details"> отвечает за вид детальной информации о картинке. отвечает за размеры блока информации. при очень мелких превьюшках часть информации вываливается из блока и путем редактирования этого класса блок с информацией можно сделать чуть выше например
<span class="phd-views"> отвечает за вид и позицию значка количества просмотров фотографии
class="phd-comments" отвечает за значок отображения комментариев
<span class="phd-rating"> отвечает за отображение значка рейтинга в виде фотографии
<span class="phd-dorating"> отвечает за вид и позицию раскрывающегося списка звезд для голосования
|
| |
|
|
| k-smolka | Дата: Воскресенье, 2014-02-02, 23:16 | Сообщение # 2 |
|
Рядовой
Группа: Пользователи
Сообщений: 4
Статус: Offline
|
Здравствуйте!:) Спасибо за информацию, я это попробовала на тестовом сайте - работает!)))
Если у вас найдётся время, не могли бы вы и про новый вид Фотомодуля написать? Многие с ним сейчас "сражаются", но как получить желаемый результат - непонятно. Я на блоге разработчика попросила что-то вроде инструкции для "чайников" сделать, только он пока не ответил.
На рабочий сайт мне старое возвращать не хочется.
На самом деле, мне понравились в принципе изменения модуля, но далеко не все, и очень хотелось бы иметь возможность допилить их под себя, а как - я не понимаю. Вообще-то я кое-что спрашивала и на сайте разработчика, но там трудно, наверное, получить подробную консультацию.
Например, у меня изменился размер шрифта в названии фото на общей странице с превьюшками - он теперь слишком мелкий. Я запустила "исследовать элемент" в Лисе; показывает, что мои настройки перекрываются значениями какой-то photopage.css, которой у меня в шаблонах нет! Я это правило просто скопировала и в свою ксс записала, изменив шрифт на мой прежний размер, вот так:
".photo-block, .photo-eblock {
font: 16px 'Sans Serif'; !important;}
.photo-title {
white-space: nowrap;
font: bold 16px 'Sans Serif'; !important;}"
И ноль эффекта! Лиса опять показала, что значения моей ксс перекрыты этой фотопэйдж. Может быть, вы подскажете, как с этим бороться?
Притом, то, что мне посоветовали на блоге разработчика, сработало же. Вот это:
".otherPhotoA img {opacity: 1 !important;filter: alpha(opacity=100) !important;}
.photoActive {-webkit-box-sizing: border-box;box-sizing: border-box;border: 3px solid #FF8C00 !important;}
.ph-data {display: none !important;}
.ph-link {background: none !important;}"
Правда, рамка вокруг фото до конца не вышла. Пойду сейчас снова на блог разработчика писать, может, объяснит, что делать? У рамки в ФФ правый край не прорисовывается, видно, граница какая-то мешает. И старая рамка за курсором ходила, когда мышкой двигаешь по линейке неарфото, а эта неподвижна. Зато в ИЕ9 эта рамка отрисована нормально, но стрелки превью не двигают уже 4 дня (в Лисе пашут). Я написала про стрелки на блог, пока глухо, но обещают разобраться.
Да и вообще, у меня слишком много вопросов повылезало по новому виду Фотольбома. Так хочется это подстроить под нужды сайта, но не могу найти в шаблонах, где это делается! Я порылась по новой таблице ксс - именно для фото, которую нам дали. Но я там не поняла ничего в переменных и их значениях. Может быть, вы знаете, где это хоть посмотреть-прочитать можно, чтобы разобраться?
Например, мне нравится новый вид лайтбокса, но совершенно не устраивает два подряд ajax-окна. Вижу, что за адрес перенаправления отвечает баттон, но где мне в шаблонах эту баттон искать? Хочется заставить, как прежде, при нажатии "Посмотреть фотографию в полном виде", получить страницу сайта с фото, его описанием, линейкой превьюшек и кнопочкой "запустить слайд-шоу", а не второе подряд окно и затемнение сайта с его меню. Мне удобно, чтобы люди могли посмотреть картинку и тут же, при желании, перейти по меню к странице с текстом, к которой иллюстрация относится. Да и надпись на кнопке я бы на свою заменила, если б знала, где и как.
Я уж молчу, что размер новых превью и старых не совпадает, что совет разработчика нажать на "перестроить демо-картинки" не помог, потому что нет у меня этой кнопки и всё придётся перезаливать вручную. А новый, увеличенный размер, конечно, лучше прежнего. Но почему всем автоматом эти демки не перестроили, раз уж новый размер выбрали, и заставляют каждого самостоятельно решать эту проблему, я не понимаю?
|
| |
|
|
| k-smolka | Дата: Воскресенье, 2014-02-02, 23:16 | Сообщение # 3 |
|
Рядовой
Группа: Пользователи
Сообщений: 4
Статус: Offline
|
"Например, у меня изменился размер шрифта в названии фото на общей странице с превьюшками" - так, тут нашла уже ошибку: лишний знак перед импортант; мне на блоге подсказали.
Только всё равно шрифт как-то мельче выглядит, чем раньше был. Впечатление, что он под какую-то рамку ужимается, что ли? Или мне уже просто кажется...
|
| |
|
|
| k-smolka | Дата: Воскресенье, 2014-02-02, 23:46 | Сообщение # 4 |
|
Рядовой
Группа: Пользователи
Сообщений: 4
Статус: Offline
|
Ой, спасибо большое, прямо огромное!:) Скопировала всё себе, буду изучать.)))
Чую, придётся во всём самостоятельно разбираться. На блоге разработчик обновки отвечает: "отключите у себя лайтбокс", "обновите браузер" и "может, не всем вашим пользователям нужны полноразмерные фото".
То есть вместо решения проблем, мне предлагается поотключать всё, что не работает, и забыть о всех плюсах нововведений.
|
| |
|
|
| webanet | Дата: Понедельник, 2014-02-03, 00:12 | Сообщение # 5 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
|
k-smolka, пока подождите чуть править все. возможно он дать файл стилей на правку и тогда уже будет полегче. на данный момент стили вида фотографий не доступны для правки их можно только переписывать и перебивать импортантом, а это не очень рационально. или вместо указанных в теме стилей прописывать свои и расписывать по-новой. это также не рационально
если дадут файл стилей вида фотографий на правку, то можно будет менять все что хотите.
|
| |
|
|
| webanet | Дата: Понедельник, 2014-02-03, 00:29 | Сообщение # 6 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
|
Если размеры подложки фотографии больше размера превью нужно зайти в панель управления - фотоальбомы - настройки модуля - Размеры демо-картинки: - уменьшить значение данного параметра - внизу сохранить
Если после уменьшения превью информация о фотографии выходит за рамки подложки нужно в таблицу стилей в любое место добавить строчку
.ph-details{ height: 30px!important;} где выделенное красным значение вы подбираете под себя.
|
| |
|
|
| k-smolka | Дата: Понедельник, 2014-02-03, 00:51 | Сообщение # 7 |
|
Рядовой
Группа: Пользователи
Сообщений: 4
Статус: Offline
|
Подожду, спасибо за совет.))) Хороший у вас сайт и форум, полдня на нём сегодня паслась.
Кое-что мне всё-таки пришлось уже импортантами, потому что было жизненно необходимо. Лайт-бокс я пока просто отключила на сайте, а там посмотрим. Но мне столько крови выпили эти изменения - я отлично запомнила, куда что вписывать понадобилось. И сохранила на компе неправленные оригиналы.
Если нам дадут стили для вида Фотомодуля, будет просто замечательно. Таким неопытным, как я, гораздо проще разобраться со стилями и слегка изменить значения в готовом, чем что-то с нуля своё изобретать, пихать эти импортанты и делать кучу ошибок.
|
| |
|
|
| lol8163 | Дата: Вторник, 2014-02-25, 17:25 | Сообщение # 8 |
|
Рядовой
Группа: Пользователи
Сообщений: 5
Статус: Offline
|
Подскажите, пожалуйста,
1) как заменить нижнюю часть шаблона 2012 на нижнюю часть шаблона 1101
2) как в новых шаблонах увеличить размер фотографий, чтобы они были как в старых шаблонах, изменение в css дало кратковременный и сомнительный эффект, фото снова маленькие или деформированные
Вопрос поставлен в эту тему, так как она о новых шаблонах
|
| |
|
|
| webanet | Дата: Вторник, 2014-02-25, 21:08 | Сообщение # 9 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
|
lol8163, Цитата 2) как в новых шаблонах увеличить размер фотографий, чтобы они были как в старых шаблонах, изменение в css дало кратковременный и сомнительный эффект, фото снова маленькие или деформированные
панель управления - фотоальбомы - управление материалами -
перестроить демо-картинки. данная функция есть не у всех
панель управления - фотоальбомы - настройки модуля - Размеры демо-картинки: -выставляете нужный размер (в сторону увеличения) - внизу сохраняете.
ответ на 1 вопрос. панель управления - дизайн - управление дизайном - глобальные блоки - нижняя часть сайта - меняете код
Код <footer> <div class="wrapper"> <div id="footer"> <div class="foot-r"> <div class="soc-box"> <a href="http://vk.com/" class="soc-vk"></a> <a href="https://www.facebook.com/" class="soc-fc"></a> <a href="https://twitter.com/" class="soc-tw"></a> <a href="http://www.odnoklassniki.ru/" class="soc-od"></a> </div> </div> <div class="foot-l"> <!-- <copy> --><!-- </copy> -->. $POWERED_BY$ </div> <div class="clr"></div> </div> </div> </footer>
на такой
Код <footer> <div id="footer"> <div class="wrapper"> <div class="foot-i"> <!-- <copy> --><!-- </copy> --> | $POWERED_BY$ </div> </div> </div> </footer>
в таблице стилей переписываете значения
#footer
.foot-i
#footer {padding:0 0 30px;}
#footer {padding-top:3px;}
.foot-i {padding:20px;color:#fff;font-size:10px;font-style:italic;background:#b12b43;}
.foot-i a {color:#fff;text-decoration:underline;}
.foot-i a:hover {text-decoration:none;}
если просто, то футеры там практически идентичные. выглядят по-разному из-за наполнения
во втором шаблоне есть глобальный блок BOTTOM
прописан в коде шаблонов так
$GLOBAL_BOTTOM$
$GLOBAL_BFOOTER$
это значит, что нужно создать глобальный блок BOTTOM вставить туда следующее содаржание
Код <div id="bottom"> <div class="wrapper"> <div class="bot-wt">More info</div> <div id="bot-w"> <div class="bot-i"> <div class="bot-t">footer links </div> <div class="inner"> <!-- <bc> --> <ul> <li><a href="">Vivamus sed bibendum</a></li> <li><a href="">Integer quis enim</a></li> <li><a href="">Cras vel justo </a></li> <li><a href="">Cras a varius ipsum</a></li> <li><a href="">Aliquam congue purus</a></li> <li><a href="">Integer dui diam</a></li> </ul> <!-- </bc> --> </div> </div> <div class="bot-i"> <div class="bot-t">second footer links</div> <div class="inner"> <!-- <bc> --> <ul> <li><a href="">Vivamus sed bibendum</a></li> <li><a href="">Integer quis enim</a></li> <li><a href="">Cras vel justo </a></li> <li><a href="">Cras a varius ipsum</a></li> <li><a href="">Aliquam congue purus</a></li> <li><a href="">Integer dui diam</a></li> </ul> <!-- </bc> --> </div> </div> <div class="bot-i"> <div class="bot-t">Image gallery</div> <div class="inner"> <!-- <bc> --> <div class="promo-w"> <div class="promo-i"><a href=""><img src="/.s/t/1101/promo1.jpg" alt=""></a></div> </div> <div class="promo-w"> <div class="promo-i"><a href=""><img src="/.s/t/1101/promo2.jpg" alt=""></a></div> </div> <div class="clr"></div> <!-- </bc> --> </div> </div> <div class="bot-i"> <div class="bot-t">contact</div> <div class="inner"> <!-- <bc> --> <span class="cont-l">Phone: +7 495 287-42-34</span> <span class="cont-l">Email: info@ucoz.com </span> <hr> <strong>CHARLES S. ANDREWS</strong><br> 3139 Brownton Road<br> Long Community, MS 38915<br> <!-- </bc> --> </div> </div> <div class="clr"></div> </div> </div> </div>
и перенести все стили, которые используются в блоке в свою таблицу стилей.
проще это будет сделать, если вы создадите тестовый сайт, установите там второй шаблон и просто перенесете с одного шаблона на другой, включая значения стилей в таблицу стилей
|
| |
|
|
| lol8163 | Дата: Среда, 2014-02-26, 08:36 | Сообщение # 10 |
|
Рядовой
Группа: Пользователи
Сообщений: 5
Статус: Offline
|
webanet, Спасибо за ответ, будем пробовать, остаётся вопрос, почему текст упрыгивает вправо, а картинка неизменно влево, что-то нужно исправить в css?
|
| |
|
|
| lol8163 | Дата: Среда, 2014-02-26, 08:39 | Сообщение # 11 |
|
Рядовой
Группа: Пользователи
Сообщений: 5
Статус: Offline
|
картинка влево, текст вправо
имеется ввиду, что настраивается по центру при редактировании материала
|
| |
|
|
| webanet | Дата: Среда, 2014-02-26, 14:12 | Сообщение # 12 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
|
lol8163, Цитата почему текст упрыгивает вправо, а картинка неизменно влево, что-то нужно исправить в css? |
| |
|
|
| Kashirina | Дата: Четверг, 2014-02-27, 03:33 | Сообщение # 13 |
Рядовой
Группа: Авто
Сообщений: 1
Статус: Offline
|
спасибо. но очень неудобно, когда этих элементов нет в таблице стилей. я не нашла
|
| |
|
|
| lol8163 | Дата: Четверг, 2014-02-27, 23:38 | Сообщение # 14 |
|
Рядовой
Группа: Пользователи
Сообщений: 5
Статус: Offline
|
webanet, По Вашей инструкции получилось всё замечательно, бордовая полоса в нижней части,
но начинки в ней нет, намекните, какие элементы нужно ставить в таблицу стилей,
может быть есть какая-то таблица названий параметров элементов css для ознакомления?
|
| |
|
|
| webanet | Дата: Пятница, 2014-02-28, 00:09 | Сообщение # 15 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
|
lol8163, переписывайте все значения таблицы стилей
#bottom
.bot-wt
#bot-w
.bot-i
.bot-t
.inner
.promo-w
.promo-i
.clr
почему начинки нет не могу угадать вслепую
|
| |
|
|
| lol8163 | Дата: Суббота, 2014-03-08, 15:56 | Сообщение # 16 |
|
Рядовой
Группа: Пользователи
Сообщений: 5
Статус: Offline
|
webanet, поздравляем Вас с праздником 8 Марта!
Спасибо за детальный ответ, получилось, но не совсем, вместо блока 8 см высотой простыня на пол страницы в 4 яруса с огромными фото
это ссылка на наше произведение (сайт совсем тестовый)
_drovadodachy.укоз.ру_
|
| |
|
|
| Vl-master | Дата: Пятница, 2014-07-25, 22:28 | Сообщение # 17 |
|
Рядовой
Группа: Пользователи
Сообщений: 1
Статус: Offline
|
Здраствуйте. Подскажите где настроить атрибуты шрифта в описании фотографии при наведении?
|
| |
|
|
| webanet | Дата: Четверг, 2014-07-31, 18:52 | Сообщение # 18 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
|
Vl-master, за описание при наведении отвечает
<span class="ph-descr"></span>
класс можно расписать в таблице стилей по-своему с помощью элемента !important
или заменить выделенное красным в виде материлов модуля фотоальбомы на свой класс и описать как вам хочется
|
| |
|
|
| photosimf | Дата: Суббота, 2014-09-27, 16:17 | Сообщение # 19 |
|
Рядовой
Группа: Пользователи
Сообщений: 2
Статус: Offline
|
ВЫРУЧАЙТЕ ЗНАТОКИ. Пишу теги при добавлении мат-ла(во время загрузки) или на странице материала. Но при просмотре кода (ctrl+u)
все альты пустые нигде и близко (crl+f ) никаких тегов нет. В чём причина. Управление дизайном модуля не трогал.
ОЧЕНЬ НАДО...СПАСИБО....
галерея
|
| |
|
|
| nor74 | Дата: Среда, 2020-07-29, 21:25 | Сообщение # 20 |
|
Рядовой
Группа: Пользователи
Сообщений: 1
Статус: Offline
|
а как убрать белый фон, который появляеться при навидение курсора на фото?
|
| |
|
|
