Облачный сервис для Joomla сайтов
Навигация: Главная

Плагин Core Design TypoCSS
27.02.2012

Профессиональное оформление, для не Профессионалов!

 

Однажды я загорелся сделать красивые текстовые блоки на сайте, но не хотел открывать Dreamveawer и "рисовать в css". Хотел найти просто, чтобы нажал вставил и готово - текст в каком-нибудь сером овале. Во многих современных шаблонах уже есть предустановленные шаблоны типографии, но не всегда они устраивают и иногда хочется нечто большего.

Представляю Вашему вниманию плагин (мамбот) Core Design TypoCSS. Данный плагин позволяет за пару секунд придать Вашему контенту профессиональный дизайн.

 

Плагин не является бесплатным и приобретается по подписке (т.е. можно скачивать и другие расширения от данного разработчика в течении определенного промежутка времени) и стоит 30 евро/3 мес. Кто не хочет покупать, сможет найти в Яндексе и скачать.Или просто дочитать статью до конца и скачать ))))
 



1. Шаблоны иконок (по-умолчанию):

{typography icon_alert} Ваш текст {/typography}
{typography icon_browser} Ваш текст {/typography}
{typography icon_calendar} Ваш текст {/typography}
{typography icon_download} Ваш текст {/typography}
{typography icon_email} Ваш текст {/typography}
{typography icon_gonext} Ваш текст {/typography}
{typography icon_help} Ваш текст {/typography}
{typography icon_info} Ваш текст {/typography}
{typography icon_link} Ваш текст {/typography}
{typography icon_lock} Ваш текст {/typography}
{typography icon_no} Ваш текст {/typography}
{typography icon_note} Ваш текст {/typography}
{typography icon_ok} Ваш текст {/typography}
{typography icon_print} Ваш текст {/typography}
{typography icon_preferences} Ваш текст {/typography}
{typography icon_refresh} Ваш текст {/typography}
{typography icon_search} Ваш текст {/typography}
{typography icon_storno} Ваш текст {/typography}
{typography icon_user} Ваш текст {/typography}
{typography icon_volume} Ваш текст {/typography}

1a) Шаблоны иконок без границы (with "!" exclamation)

{typography icon_alert !border} Ваш текст {/typography}
{typography icon_search !border} Ваш текст {/typography}

1b) Шаблоны иконок без фона (with "!" exclamation)

{typography icon_alert !background} Ваш текст {/typography}
{typography icon_search !background} Ваш текст {/typography}

1c) Иконки без фона и без границы (with "!" exclamation)

{typography icon_alert !border !background} Ваш текст {/typography}
{typography icon_search !border !background} Ваш текст {/typography}

1d) Шаблоны иконок - плавающий бокс с заданной шириной.

Важно: Ширина должна быть задана! Разрешается использовать: units, px, %.

{typography icon_alert left=300px} Ваш текст {/typography}
{typography icon_info right=50%} Ваш текст {/typography}
{typography icon_user none=20em} Ваш текст {/typography}

2.  Боксы

Важно: Ширина по умолчанию: 100%

{typography box_white} Ваш текст {/typography}
{typography box_lightblue} Ваш текст {/typography}
{typography box_lightgreen} Ваш текст {/typography}
{typography box_lightorange} Ваш текст {/typography}
{typography box_blue} Ваш текст {/typography}
{typography box_red} Ваш текст {/typography}
{typography box_orange} Ваш текст {/typography}
{typography box_orange} Ваш текст {/typography}
{typography box_yellow} Ваш текст {/typography}
{typography box_green} Ваш текст {/typography}

2a) Box typography -  плавающий бокс с заданной шириной.

Важно: Ширина должна быть задана! Разрешается использовать: units, px, %.

{typography box_white left=300px} Ваш текст {/typography}
{typography box_lightblue right=50%} Ваш текст {/typography}
{typography box_lightgreen none=20em} Ваш текст {/typography}

3. Шаблоны Цитат

{typography quote_default} Ваш текст {/typography}
{typography quote_life} Ваш текст {/typography}
{typography quote_design} Ваш текст {/typography}

3a) Шаблоны Цитат - плавающие цитаты с заданной шириной

Важно: Ширина должна быть задана! Разрешается использовать: units, px, %.

{typography quote_default left=300px} Ваш текст {/typography}
{typography quote_life right=35%} Ваш текст {/typography}
{typography quote_design none=8em} Ваш текст {/typography}

4. Шаблоны заголовков

{typography Title_gray} Ваш текст {/typography}
{typography Title_pink} Ваш текст {/typography}
{typography Title_blue} Ваш текст {/typography}
{typography Title_yellow} Ваш текст {/typography}
{typography Title_orange} Ваш текст {/typography}
{typography Title_red} Ваш текст {/typography}
{typography Title_green} Ваш текст {/typography}

5.  Шаблоны списков
5a) Шаблоны списков - bullet

Важно: Элементы списка должны быть разделены следующими символами '||'.

{typography list_bullet_black} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_bullet_blue} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_bullet_green} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_bullet_purple} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_bullet_red} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_bullet_yellow} Ваш текст||Ваш текст||Ваш текст {/typography}

5b) Шаблоны списков - стрелка

{typography list_arrow_black} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_arrow_blue} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_arrow_green} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_arrow_purple} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_arrow_red} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_arrow_yellow} Ваш текст||Ваш текст||Ваш текст {/typography}

5c) Шаблоны списков - Плюс

{typography list_plus_black} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_plus_blue} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_plus_green} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_plus_purple} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_plus_red} Ваш текст||Ваш текст||Ваш текст {/typography}
{typography list_plus_yellow} Ваш текст||Ваш текст||Ваш текст {/typography}

6. Шаблоны нумерованных списков
6a) Шаблон - Цифры

Важно: Элементы должны быть разделены символом '||' и каждый элемент должен начинаться с цифры и точки, для примера: "1."  Разрешенные значения: 1-10.

{typography list_number_black} 1. Ваш текст|| 2. Ваш текст|| 3. Ваш текст {/typography}
{typography list_number_gray} 1. Ваш текст|| 2. Ваш текст|| 3. Ваш текст {/typography}
{typography list_number_red} 1. Ваш текст|| 2. Ваш текст|| 3. Ваш текст {/typography}
{typography list_number_blue} 1. Ваш текст|| 2. Ваш текст|| 3. Ваш текст {/typography}
{typography list_number_yellow} 1. Ваш текст|| 2. Ваш текст|| 3. Ваш текст{/typography}
{typography list_number_green} 1. Ваш текст|| 2. Ваш текст|| 3. Ваш текст {/typography}


6b) Шаблон - bullet number

{typography list_number_bullet_white} 1. Ваш текст|| 2. Ваш текст|| 3. Ваш текст{/typography}
{typography list_number_bullet_blue} 1. Ваш текст|| 2. Your text there|| 3. Ваш текст{/typography}
{typography list_number_bullet_green} 1. Ваш текст|| 2. Your tex there|| 3. Ваш текст{/typography}
{typography list_number_bullet_red} 1. Ваш текст|| 2. Your text there|| 3. Ваш текст {/typography}
{typography list_number_bullet_violet} 1. Ваш текст|| 2. Your text there|| 3. Ваш текст {/typography}

7. Форматированный шаблон

{typography pre_gray} style="color: red; width: 300px" {/typography}
{typography pre_black} style="color: red; width: 300px" {/typography}
{typography pre_blue} style="color: red; width: 300px" {/typography}
{typography pre_red} style="color: red; width: 300px" {/typography}
{typography pre_green} style="color: red; width: 300px" {/typography}
{typography pre_purple} style="color: red; width: 300px" {/typography}
{typography pre_yellow} style="color: red; width: 300px" {/typography}

8. Буквица

{typography dropcap} Ваш текст. {/typography}

9. Шаблоны форматирования "Высказывания"

Важно: Заголовок и текст следует разделять символами '||'.

{typography bubble_speech_rounded} Заголовок || Ваш текст. {/typography}
{typography bubble_speech_square} Заголовок || Ваш текст. {/typography}
{typography bubble_thinking_rounded} Заголовок || Ваш текст. {/typography}
{typography bubble_thinking_square} Заголовок || Ваш текст. {/typography}
{typography bubble_brain_rounded} Заголовок || Ваш текст. {/typography}
{typography bubble_brain_square} Заголовок || Ваш текст. {/typography}
{typography bubble_book_rounded} Заголовок || Ваш текст. {/typography}
{typography bubble_book_square} Заголовок || Ваш текст. {/typography}
{typography bubble_help_rounded} Заголовок || Ваш текст. {/typography}
{typography bubble_help_square} Заголовок || Ваш текст. {/typography}
{typography bubble_pencil_rounded} Заголовок || Ваш текст. {/typography}
{typography bubble_pencil_square} Заголовок || Ваш текст. {/typography}

9a) Bubble typography - плавающий бокс с заданной шириной

Важно: Ширина должна быть задана. Разрешается использовать: units, px, % и em.

{typography bubble_help_square left=300px} Заголовок || Ваш текст {/typography}
{typography bubble_speech_rounded right=50%} Заголовок || Ваш текст {/typography}
{typography bubble_book_square none=20em} Заголовок || Ваш текст {/typography}

10. Шаблон сведений (легенды)

Важно: Заголовок и текст следует разделять символами '||'.

{typography legend_blue} Заголовок || Ваш текст. {/typography}
{typography legend_gray} Заголовок || Ваш текст. {/typography}
{typography legend_green} Заголовок || Ваш текст. {/typography}
{typography legend_orange} Заголовок || Ваш текст. {/typography}
{typography legend_pink} Заголовок || Ваш текст. {/typography}
{typography legend_red} Заголовок || Ваш текст. {/typography}
{typography legend_violet} Заголовок || Ваш текст. {/typography} 

Демо

 Скачать


загрузка...

 
Баннер

Уважаемые пользователи! Если у Вас возникли вопросы по данному материалу - оставьте свой комментарий и мы постараемся Вам помочь. Оставайтесь с нами!

Баннер