Стили иконок

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

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

Добавление стиля иконки будет рассмотрено на следующем примере.
Мы добавили ссылку на скачивание 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>

Пример 2:

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

Пример 3:

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

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

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

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. Нажать «ОК», а потом «Сохранить».