Стили для компонентов

Компонент "Изображение"

Компонент "Изображение" имеет следующую структуру классов CSS под классом scs-component-content:

scs-image-container
scs-image-link
scs-image-image
scs-image-caption

Класс scs-image-image применяется к самому тегу <img>. Класс scs-image-caption используется для определения стиля надписи, если она присутствует.

Класс scs-image-link присутствует, только если к изображению прикреплена ссылка. Ни он, ни класс scs-image-container, обычно не требуют применения специальных стилей.

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

.scs-image .scs-image-caption {
 position: absolute;
 left: 0px;
 bottom: 0px;
 right: 0px;
 background-color: rgba(0, 0, 0, 0.54);
 padding: 0.5em;
 color: #FFFFFF;
}

Чтобы разместить подписи в верхней части изображения и изменить цвета, добавьте дополнительный стиль для компонента "Изображение" в файл design.json, а затем определите CSS для него в файле design.css.

.scs-image-style-17 .scs-image-caption {
 position: absolute;
 top: 0px;
 height: 35px;
 font-weight: bold;
 background-color: rgba(122, 213, 256, 0.54);
 color: #515151;
}

Компонент "Кнопка"

Компонент "Кнопка" имеет следующую структуру классов:

scs-button-button
    scs-button-text

Класс scs-button-button — это элемент <div>, который можно нажимать, в стиле кнопки. Класс scs-button-text используется для создания стиля текста внутри кнопки.

Например, протестируйте изменение внешнего вида компонента "Кнопка", добавив для него дополнительный стиль в файл design.json, а затем определите CSS для него в файле design.css.

.design-style .scs-button-button {
 background-image: linear-gradient(
  to top, #E3E7E9 0%, #E7EBED 50%, #F1F3F3 100%);
 border: 1px solid #c4ced7;
 color: #000000;
}

.design-style .scs-button-button:hover {
background: #f7f8f9;
border: 1px solid #c4ced7;
 color: #0572ce;
}

.design-style .scs-button-button:active {
background: #0572ce;
border: 1px solid #0572ce;
color: #ffffff;
}

.scs-button-style-4 .scs-button-button {
 background-image: radial-gradient(
  red, yellow, green
 );
border: 1px solid #c4ced7;
color: #000000;
}

.scs-button-style-4 .scs-button-button:hover {
 background: #f7f8f9;
 border: 1px solid #c4ced7;
 color: #0572ce;
}

.scs-button-style-4 .scs-button-button:active {
 background: #0572ce;
 border: 1px solid #0572ce;
 color: #ffffff;
}

Документ

Компонент "Документ" имеет следующую структуру классов:

scs-document-container
 scs-document-cap
  scs-document-title
  scs-document-desc

Класс scs-document-container охватывает средство просмотра документов и обычно не имеет стиля.

Галерея

Компонент "Галерея" имеет один класс, который охватывает базовый компонент ползунка JSSOR:

scs-gallery-container 

В ползунке JSSOR используется несколько классов, для которых также можно создать стили:

jssorb14 (navigator)
jssora02l (left arrow)
jssora02r (right arrow)
jssort07 (thumbnails)

Сетка галереи

Классы, используемые для компонента "Сетка галереи", зависят от макета и обрезки, выбранных на панели Настройки:

scs-gallerygrid-container scs-gallerygrid-layout
  scs-gallerygrid-cell
    scs-image (multiple)

В зависимости от настроек обрезки и макета, выбранных для сетки галереи, значение layout будет растягиваться, обрезаться, подгоняться или передаваться в потоке.

Класс scs-gallerygrid-cell присутствует только для макетов столбцов.

Социальная панель

Компонент "Социальная панель" имеет следующую структуру классов:

scs-socialbar-container
  scs-socialbar-icon

Класс scs-socialbar-icon применяется к каждому тегу <img> на социальной панели.

Абзац

Компонент "Абзац" имеет только один класс, охватывающий фактический текст абзаца:

scs-paragraph-text 

Например, чтобы текст, добавляемый вами в компонент "Абзац", выглядел как текст, гравированный на металле, добавьте дополнительный класс стилей в файл design.json, а затем определите CSS для него в файле design.css.

.scs-paragraph-style-7 {
 font-size: 24px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 700;
 padding: .3em;
 color: #000000;
 background: #666666;
 text-shadow: 0px 1px 1px #ffffff;
}

Или, если требуется сделать что-то интересное, используйте такой же пример.

.scs-paragraph-style-8 {
 padding: 20px;
 margin: 10px;
 background: #ff0030;
 color: #fff;
 font-size: 21px;
 font-weight: bold;
 line-height: 1.3em;
 border: 2px dashed #fff;
 border-radius: 10px;
 box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
 text-shadow: -1px -1px #aa3030;
 font-weight: normal;
}

Заголовок

Компонент "Заголовок" также имеет только один класс, который охватывает фактический текст:

scs-title-text 

Карта

Компонент "Карта" имеет один класс, который охватывает представление карты:

scs-map-content

У этого класса обычно нет стиля.

Локальный пользовательский компонент

Локальный пользовательский компонент имеет только один класс, охватывающий фактический компонент:

scs-custom-component-wrapper 

У вас есть полный контроль над стилями CSS, которые необходимо использовать для визуализации пользовательского представления для пользовательского локального компонента. Локальный компонент визуализируется встроенным; то есть можно напрямую применять стили CSS, определенные в теме или в файле design.css.

Удаленный пользовательский компонент

У удаленного пользовательского компонента только один класс, охватывающий его рамку:

scs-app-iframe-wrapper

Помимо применения стилей CSS, определенных в настраиваемом удаленном компоненте, Sites SDK можно использовать для извлечения файла design.css с сайта хоста.

// fetch current theme design from host site and then add it to the page
SitesSDK.getSiteProperty('theme',function(data){
 // check if we got a url back
 if ( data.url && typeof data.url === 'string' ) {
  if ( data.url !== '') {
   // theme is loaded, so dynamically inject theme
   SitesSDK.Utils.addSiteThemeDesign(data.url);
  }
 }
});

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

Разделитель

Несмотря на то, что для компонента "Разделитель" не существует классов, характерных для компонентов, к тегу <hr> можно применить стиль.

Например, можно создать разделитель с точками:

.design-style .scs-divider hr {
border-top: 1px dotted #333333;
}

Видео, YouTube, Spacer

Для компонентов "Видео", YouTube и Spacer не существует классов компонентов.