Стили иконок

В СMS Web-canape 2.Х используются следующие стили иконок:

Используйте <p class="t-icons-pdf">document.pdf</p>

Используйте <p class="t-icons-info">any text</p>

Используйте <p class="t-icons-zip">document.zip</p>

Используйте <p class="t-icons-warning">any text</p>

Используйте <p class="t-icons-doc">document.doc</p>

Используйте <p class="t-icons-stickynote">any text</p>

Используйте <p class="t-icons-xls">document.xls</p>

Используйте <p class="t-icons-download">any text</p>

Используйте <p class="t-icons-ppt">document.ppt</p>

Используйте <p class="t-icons-faq">any text</p>

Используйте <p class="t-icons-disk">any document</p>

Используйте <p class="t-icons-flag">any text</p>

 

Добавление стиля иконки

Добавление стиля иконки будет рассмотрено на следующем примере.
Мы добавили ссылку на скачивание pdf-файла (размещение файлов), и для того, чтобы она выглядела более наглядно, нужно добавить к ней иконку. Для этого выполняем следующие действия:

  1. В панели редактора нажать иконку «Источник» .
  2. В появившемся окне отобразится текст раздела сайта с HTML-кодом, в данном тексте нужно найти ссылку, которую необходимо оформить. Она будет выглядеть так: <p> <a href="/img/image/doc.jpg">Документ</a></p>.
  3. Выбрать нужную иконку (в нашем примере это иконка pdf) и из ее кода взять выделенную ниже часть:

              <p class="t-icons-pdf">document.pdf</p>.

  1. Добавить эту часть кода (class="t-icons-pdf") в ссылку. Выглядит это так:

             <p class="t-icons-pdf"> <a href="/img/image/doc.jpg">Документ</a></p>.

  1. Нажать снова иконку «Источник» в панели редактора, а потом кнопку «Сохранить». Теперь на сайте перед ссылкой будет иконка pdf.

Стили блоков с контентом

В СMS Web-canape 2.Х используются следующие стили блоков с контентом:

Пример блока с иконкой. Используйте <p class="t-box-info">Ваша фраза здесь!</p>

Пример блока с иконкой. Используйте <p class="t-box-warning">Ваша фраза здесь!</p>

Пример блока с иконкой. Используйте <p class="t-box-stickynote">Ваша фраза здесь!</p>

Пример блока с иконкой. Используйте <p class="t-box-download">Ваша фраза здесь!</p>

Пример блока с иконкой. Используйте <p class="t-box-faq">Ваша фраза здесь!</p>

Пример блока с иконкой. Используйте <p class="t-box-flag">Ваша фраза здесь!</p>

Пример блока с иконкой. Используйте <p class="t-box-pdf">Ваша фраза здесь!</p>

Пример блока с иконкой. Используйте <p class="t-box-doc">Ваша фраза здесь!</p>

Пример блока с иконкой. Используйте <p class="t-box-xls">Ваша фраза здесь!</p>

Пример блока с иконкой. Используйте <p class="t-box-ppt">Ваша фраза здесь!</p>

Пример блока с иконкой. Используйте <p class="t-box-zip">Ваша фраза здесь!</p>

Пример блока с иконкой. Используйте <p class="t-box-disk">Ваша фраза здесь!</p>

Добавление стиля блока

Добавление стиля блока рассмотрено на следующем примере.
Нам необходимо выделить в тексте важную фразу, чтобы клиент обратил на нее внимание.  Для этого добавим иконку восклицательного знака. Необходимо выполнить следующие действия:

  1. В панели редактора нажать иконку «Источник» .
  2. В появившемся окне отобразится текст раздела сайта с HTML-кодом, в данном тексте нужно найти выбранную фразу. Она будет выглядеть так: <p> Эта фраза важна</p>.
  3. Выбрать нужную иконку (в нашем случае это иконка восклицательного знака) и из ее кода взять следующую часть:

             <p class="t-box-info">Ваша фраза здесь!</p>.

  1. Добавить эту часть кода (class="t-box-info") к фразе. Выглядит это так:

             <p class="t-box-info"> Эта фраза важна</p>.

  1. Нажать снова иконку «Источник» в панели редактора, а потом кнопку «Сохранить». Теперь на сайте выделена фраза, и клиент обратит на нее внимание.

Стили таблиц

Пример 1:

<table class="t-plainrows">
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
</table>
Заголовок таблицы Колонка 1 Колонка 2 Колонка 3 Колонка 4
Подвал таблицы Содержимое подвала
Заголовок таблицы 1 Lorem ipsum Dolor sit amet Consectetuer Aliquam quis urna
Заголовок таблицы 2 Nullam nec odio Vivamus turpis Feugiat sit amet Class aptent
Заголовок таблицы 3 Pulvinar sed Tincidunt sit amet Massa Dolor sit amet
Заголовок таблицы 4 Vivamus turpis Feugiat sit amet Class aptent Ad litora torquent
Заголовок таблицы 5 Massa Dolor sit amet Tincidunt sit amet Pulvinar sed

Пример 2:

<table class="t-colorstripes">
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
</table>
Заголовок таблицы Колонка 1 Колонка 2 Колонка 3 Колонка 4
Подвал таблицы Содержимое подвала
Заголовок таблицы 1 Lorem ipsum Dolor sit amet Consectetuer Aliquam quis urna
Заголовок таблицы 2 Nullam nec odio Vivamus turpis Feugiat sit amet Class aptent
Заголовок таблицы 3 Pulvinar sed Tincidunt sit amet Massa Dolor sit amet
Заголовок таблицы 4 Vivamus turpis Feugiat sit amet Class aptent Ad litora torquent
Заголовок таблицы 5 Massa Dolor sit amet Tincidunt sit amet Pulvinar sed

Пример 3:

<table class="t-greystripes">
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
</table>
Заголовок таблицы Колонка 1 Колонка 2 Колонка 3 Колонка 4
Подвал таблицы Содержимое подвала
Заголовок таблицы 1 Lorem ipsum Dolor sit amet Consectetuer Aliquam quis urna
Заголовок таблицы 2 Nullam nec odio Vivamus turpis Feugiat sit amet Class aptent
Заголовок таблицы 3 Pulvinar sed Tincidunt sit amet Massa Dolor sit amet
Заголовок таблицы 4 Vivamus turpis Feugiat sit amet Class aptent Ad litora torquent
Заголовок таблицы 5 Massa Dolor sit amet Tincidunt sit amet Pulvinar sed

 

Добавление стиля таблиц

Добавление стиля таблиц будет рассмотрено на следующем примере.
Для сайта нужны красиво оформленные таблицы. Чтобы это сделать, необходимо выполнить следующие действия:

  1. В панели редактора нажать иконку «Источник» .
  2. В появившемся окне отобразится текст раздела сайта с HTML-кодом, в данном тексте нужно найти код таблицы. Код таблицы начинается вот так: <table border="1" cellpadding="1" cellspacing="1" style="width: 100%;">.
  3. Выбрать нужный стиль (в нашем примере это будет первый) и из его кода взять следующую часть:

             <table class="t-plainrows">
                 <thead>...</thead>
                 <tbody>...</tbody>
                 <tfoot>...</tfoot>
             </table>

  1. Добавить эту часть кода (class="t-plainrows") к таблице. Выглядит это так:

             <table class="t-plainrows"border="1" cellpadding="1" cellspacing="1" style="width: 100%;">.

  1. Нажать снова иконку «Источник» в панели редактора, а потом – кнопку «Сохранить».
  2. Дополнительно можно выделить заголовки таблицы, для этого в визуальном редакторе нужно нажать на таблицу правой кнопкой мыши, выбрать пункт «Свойства таблицы», и в поле «Заголовки» выбрать нужный тип заголовка.
  3. Нажать «ОК», а потом «Сохранить».

Документация

© «Копирайт», 2017

Web-canape - быстрое создание сайтов и продвижение