бесплатные списки прокси
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 2
  • 1
  • 2
  • »
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Описание элементов нового вида фотоальбома uCoz (описание нового вида фотоальбома проблемы и решения)
Описание элементов нового вида фотоальбома 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>


и перенести все стили, которые используются в блоке в свою таблицу стилей.
проще это будет сделать, если вы создадите тестовый сайт, установите там второй шаблон и просто перенесете с одного шаблона на другой, включая значения стилей в таблицу стилей
Прикрепления: 7689639.png(7.7 Kb)
 
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
а как убрать белый фон, который появляеться при навидение курсора на фото?
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Описание элементов нового вида фотоальбома uCoz (описание нового вида фотоальбома проблемы и решения)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: