Стилизация проекта с помощью CSS в Pano2VR
Самые читаемые статьи за всё время

Опрос:

С каким функционалом Pano2VR у вас возникают трудности?
Всего ответов: 1

 Групповой чат для пользователей Pano2VR

В своем сообществе ВКонтакте я недавно создал беседу для пользователей Pano2VR.

Беседа создана специально для пользователей конвертера панорамных изображений Pano2VR. В ней мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.

В беседе публикуются ссылки на новые материалы моего сайта, связанные с созданием панорам и виртуальных туров, а также в автоматическом режиме работает информатор о новых материалах блога Garden Gnome Software и релизах программы Pano2VR.

Содержание статьи:

При помощи CSS-стилей можно стилизовать интерактивное оформление виртуального тура. CSS значительно расширяет дизайнерские возможности редактора оформления.

Стилизация проекта с помощью CSS в Pano2VR

Изображение

Вступление

При помощи CSS-стилей можно стилизовать интерактивное оформление виртуального тура. CSS значительно расширяет дизайнерские возможности редактора оформления.

Когда-то на заре создания виртуальных туров, используя четвертую версию Pano2VR я уже занимался стилизацией оформления с помощью CSS. Тогда в Pano2VR не существовало функционала для работы со стилями. Приходилось после экспорта открывать в редакторе файл skin.js и вставлять названия классов и встроенные стили в исходный код файла.

С пятой версии появилась полноценная поддержка работы со CSS-стилями. Об этом мой сегодняшний материал.

Подключение внешней таблицы стилей

В настройках шаблона HTML есть возможность подключить файл внешней таблицы стилей (Опция «Include external CSS file»), который заранее подготовлен и находится в определенном месте на диске ПК, например, в папке проекта. При экспорте файл будет скопирован в выходную папку и подключен в исходном коде файла index.html.

Настройки HTML-шаблона.

Классы и встроенные стили

При подключении внешней таблицы стилей предполагается, что компонентам оформления уже назначены классы. Они назначаются в редакторе оформления в группе свойств «Advanced». В свойстве «СSS Classes» необходимо перечислить, разделяя пробелами, все классы для конкретного компонента аналогично тем, что прописаны в файле style.css.

Настройка CSS классов.

В текстовом компоненте свойство «Text» может содержать произвольную html-структуру. В ней также можно указать классы и стили для каждого элемента.

Ввод произвольной html-структуры в свойстве «Text».

В этой группе настроек при необходимости можно прописать встроенные стили, которые дополнят уже предопределенные стили Pano2VR.

В свойстве «CSS Styles» указываются стили, применяемые к самому элементу, а в свойстве «CSS Styles Inner Element» стили для внутреннего элемента. Последнее свойство есть не у всех элементов.

Настройка CSS-стилей.

HTML-cтруктура большинства компонентов редактора оформления сформирована из двух div-блоков. Для текста внешний блок – прямоугольник, а внутренний блок – элемент содержащий текст. В исходном коде это выглядит следующим образом:

<div class="ggskin ggskin_text" style="/*имеющиеся стили*//*стили из свойства CSS Styles*/">
 <div style="/*имеющиеся стили*//*стили из свойства CSS Styles Inner Element*/">Введенный текст</div>
</div>

Подключение внешних стилей по URL и внедрение стилей

В группе настроек «External Files» можно подключать CSS по URL-адресу ресурса. Это могут быть таблицы стилей, лежащие по определенному адресу на вашем или другом сайте, а также локальные файлы, если проект создается для локального использования.

Подключение внешнего файла CSS-стилей.

Свойство оформления «Embedded Stylesheet» позволяет внедрить описания стилей в файл оформления skin.js, в специальную функцию, которая при открытии виртуального тура произведет вставку стилей в секцию head html-страницы. Это не свойство компонента. Нажмите на пустом месте холста, чтобы отобразились настройки оформления.

Таким образом Pano2VR дает выбор между подключением css-файла в настройках html-шаблона и внедрением содержимого css-файла в js-файл оформления.

Внедрение CSS-стилей в оформление.

Однострочное поле ввода не очень удобно для редактирования стилей. Для удобства предусмотрено окно редактора, размеры которого можно изменить. Для вызова редактора нажмите на кнопку с иконкой карандаша, расположенную справа от поля ввода.

Многострочный редактор.

Использование пользовательских шрифтов

Если вы хотите использовать в проекте необычный шрифт, то CSS позволяет это сделать двумя способами.

Способ 1. Правило @font-face

@font-face {
  font-family: customFontFamilyName;
  src: url(fonts/brusher.ttf);
}

.hotspot-title {
 font-family: customFontFamilyName;
 font-size: 20pt;
 margin: 10px 0 0 0;
 line-height: 14px;
 letter-spacing: -1px;
 text-shadow: 1px 1px 0px black;
}

В свойстве font-family определяется пользовательское имя семейства шрифтов, которое будет использоваться в аналогичном свойстве при создании стиля.

В свойстве src указывается местоположения при помощи функций url() и/или local() одного файла или нескольких файлов, разделяя запятыми.

Способ 2. Правило @import

@import url('https://fonts.googleapis.com/css?family=Roboto');

.hotspot-descr {
 font-family: 'Roboto';
 font-size: 9pt;
 margin: 10px 0 0 0;
 line-height: 14px;
 letter-spacing: -1px;
 text-shadow: 1px 1px 0px black;
 white-space: break-spaces;
}

Применив эти два способа получим результат как на изображении ниже.

Стилизованный хотспот.

Полезные ссылки

На этом у меня все. На ваши вопросы, если такие возникнут, отвечу в комментариях или в беседе Пользователей Pano2VR. Следующий материал будет о применении пользовательских скриптов в редакторе оформления.

 Редактор оформления (Skin editor) |  74 |  28.10.2021  08:50 |
Теги: Pano2VR, Pano2VR6, CSS, HTML, Pano2VR5, skin editor
Рейтинг: 0.0 / 0 | Оцените материал:

Об авторе:

Сергей Дишук, фотограф-любитель. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения. Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 5-ти лет. Имею опыт работы в программах Adobe Photoshop, Lightroom, PTGui, Pano2VR.

У Вас возникли вопросы по статье? Задайте их в комментариях ниже и получите развернутый ответ. Если данный материал не соответствует Вашему поисковому запросу, попробуйте воспользоваться поиском или найдите нужный материал в разделе статьи.

Поделиться в социальных сетях:

Возможно, вам будет интересно:

Популярные материалы за последние 3 дня:

Нет комментариев

Связь со мной и соцсети
 +375(29)738-38-38
 Telegram
 Viber
 ВКонтакте
 Одноклассники
 Instagram
 Facebook
 LinkedIn
 YouTube
 TikTok
Внешние ресурсы

Если желаете получать информацию о новых материалах сайта (статьи, новости, панорамы и туры) или следить за моим творчеством (фотография в целом), подпишитесь на мои сообщества в социальных сетях.

Сообщество на ВКонтакте
Сообщество на Одноклассники
Сообщество на Facebook

Фотографии и панорамные изображения публикую на этих ресурсах:

Профиль на 360cities.net
Профиль на 1panorama.ru
Профиль на fotokto.ru
Профиль на photocentra.ru
Профиль на photosight.ru

Ссылки на мои проекты:

Проект «Мозырь 360°»
Популярные страницы