wmmail.ru – cервис почтовых рассылок на главную
написать письмо
карта сайта

С чего начать?РекламодательПравилаFAQСтатистикаБиржа статейTOP100ФоткиКонтакты
Логин:
Пароль: 
Регистрация   Забыли пароль?
WMLogin
Пользователей всего:

542648

Пользователей сегодня:

47

Пользователей online:

186

Выплачено ($): 7`602`736,51
Выплат: 8`111`969
Писем прочитано: 1`024`933`479

 
   
 

Запись #7 в дневнике пользователя Ryslan777

Внимание! В разделе запрещается:

  • Мат (оскорбления)
  • Откровенная реклама
  • Нарушение законодательства РФ
  • Попрошайничество и просьбы одолжить деньги или кредиты

Выделите текст и нажмите для цитирования  #  
+126   [20.06.2015 23:05] Ryslan777 Рейтинг 836.65     Стена пользователя Ryslan777 +427

Тема от пользователя Ryslan777 Руководство по оформлению на WMmail (beta)



Цвета0
При добавлении цветов можно использовать цветовую модель RGB. Используйте онлайн сайты или редакторы фото, чтобы определить подходящий цвет.

Примеры:

#FFFFFF (или white) - белый
#FF0000 (или red) - красный
#00FF00 (или green) - зеленый
#0000FF (или blue) - синий
#7D4DEB - светло-фиолетовый

Фон1
Начнем с самого малого - сделаем фон по цвету на всю стену. Для этого используем код:

<font style="display: block; background: #FF541A;">Текст</font>
Что увидим в итоге:

Текст
Текст зажатый и не по всей длине. Избавляемся от внешних отступов и добавляем отступы внутри. Меняем код:

<font style="display: block; background: #FF541A; margin: -5px; padding: 10px;">Текст</font>
Получим такой вариант, уже что-то:

Текст
Давайте сделаем текст по середине, увеличим его размер, а цвет поменяем на белый:

<font style="display: block; background: #FF541A; margin: -5px; padding: 10px; text-align: center; font-size: 18px; color: #ffffff;">Текст</font>
Получим следующее:

Текст
Теперь сделаем фон по картинке. Для этого сделайте следующее:

1) Найдите нужную вам картинку (если хотите, чтобы она была во всю длину стены, подбирайте размер от 1200px в длину).
2) Загрузите картинку на надежный фотохостинг.
3) Скопируйте прямую ссылку на картинку и добавьте в код.
4) Узнайте высоту картинки и добавьте значение в код.

Например. Ссылка на картинку - https://images.vfl.ru/ii/1513857894/3340b8ea/19872695.jpg
Ширину (width) оставим 600px, т.к если надо она сама растянется по размеру экрана пользователя.
Высота (height) - 292px. Если хотите, просто укажите меньшее значение и высота фона будет меньше.
Поэтому код примет вид:

<font style="min-width: 600px; height: 292px; display: block; padding: 10px; text-align: center; font-size: 18px; color: #ffffff; margin: -5px; background: url(//images.vfl.ru/ii/1513857894/3340b8ea/19872695.jpg) 50% 50% no-repeat;">Текст</font>
Вот что будет в итоге:

Текст
Блоки2
Перейдем к оформлению текста блоками. Допустим у нас есть текст с простой рамкой толщиной 1px черного цвета:

<font style="display: block; border: 1px solid #000000">Текст</font>
Текст
Снова добавляем отступы внутри, меняем цвет рамки, увеличиваем ее толщину и заменим вид рамки:

<font style="display: block; padding: 10px; border: 2px dashed #1494E3;">Текст</font>
Текст
Теперь скруглим углы (8px), снова поменяем вид рамки и сделаем текст по центру:

<font style="display: block; padding: 10px; border: 3px dotted #1494E3; border-radius: 10px; text-align: center;">Текст</font>
Текст
Забудем про рамки, сделаем закругленный (6px) блок с фоном, а цвет текста поменяем на белый:

<font style="display: block; background: #1494E3; padding: 10px; border-radius: 6px; text-align: center; color: #ffffff;">Текст</font>
Текст

Теперь сделаем блок, заменив цвета текста, добавив жирности, и сделав отступ от верхнего края до текста, фоном которого выступит картинка:

<font style="min-width: 450px; height: 100px; display: block; padding-top: 60px; font-weight: bold; text-align: center; font-size: 26px; color: #FFE600; text-shadow: 1px 1px 1px #292929; font-weight: bold; margin: -10px; background: url(//images.vfl.ru/ii/1513858094/876bd729/19872725.png) 50% 50% no-repeat;">Текст</font>
Текст
Позиционирование3
Помимо использования привычного тега text-align: [left, center, right], который располагает текст слева, по центру и справа соответственно, для позиционирования (слева или справа) можно использовать тег float.

Внутри обычного кода добавляем еще один с данным тегом:

<font style="display: block; padding: 10px;">Текст<font style="display: block; color: red; float: right;">Текст справа</font></font>
Получим следующее:
ТекстТекст справа
Готовые решения с иконками4
Произвольный текст пользователя 1

<font style="background-image:url(//www.wmmail.ru/img/wall24.png); background-repeat:no-repeat; padding: 0px 24px 6px 5px"></font> <font style="font-size: 15px;">Произвольный текст пользователя 1</font>
Произвольный текст пользователя 2

<font style="background-image:url(//www.wmmail.ru/icon/currency_dollar.png); background-repeat:no-repeat; padding: 0px 24px 6px 5px"></font> <font style="font-size: 15px;">Произвольный текст пользователя 2</font>
Произвольный текст пользователя 3

<font style="background-image:url(//www.wmmail.ru/icon/heart.png); background-repeat:no-repeat; padding: 0px 24px 6px 5px"></font> <font style="font-size: 15px;">Произвольный текст пользователя 3</font>
Произвольный текст пользователя 4

<font style="background-image:url(//www.wmmail.ru/icon/edit.png); background-repeat:no-repeat; padding: 0px 24px 6px 5px"></font> <font style="font-size: 15px;">Произвольный текст пользователя 4</font>
Произвольный текст пользователя 5

<font style="background-image:url(//www.wmmail.ru/img/help224.png); background-repeat:no-repeat; padding: 0px 24px 6px 5px"></font> <font style="font-size: 15px;">Произвольный текст пользователя 5</font>
Произвольный текст пользователя 6

<font style="background-image:url(//www.wmmail.ru/img/folder20.png); background-repeat:no-repeat; padding: 0px 22px 6px 5px"></font> <font style="font-size: 14px;">Произвольный текст пользователя 6</font>
Произвольный текст пользователя 7

<font style="background-image:url(//www.wmmail.ru/img/check16.png); background-repeat:no-repeat; padding: 0px 18px 6px 5px"></font> <font style="font-size: 14px;">Произвольный текст пользователя 7</font>
Произвольный текст пользователя 8

<font style="background-image:url(//www.wmmail.ru/img/star_yellow17.png); background-repeat:no-repeat; padding: 0px 18px 6px 5px"></font> <font style="font-size: 14px;">Произвольный текст пользователя 8</font>
Заголовок 1
<font style="display: block; height: 28px; padding-top: 4px; background: url(//www.wmmail.ru/img/title_fon.gif)"><font style="display: block; background: url(//www.wmmail.ru/img/title_left.gif); min-width: 30px; height: 32px; float: left; margin-top: -4px;"></font>Заголовок 1<font style="display: block; background: url(//www.wmmail.ru/img/title_right.gif); min-width: 40px; height: 32px; float: right; margin-top: -4px;"></font></font>
Заголовок 2Содержимое
<font style="display: block; width: 169px; height: 28px; background: url(//www.wmmail.ru/img/lblue_title_top.gif) no-repeat; padding: 4px 0 0 10px;">Заголовок 2</font><font style="display: block; width: 169px; background: #E3EEF3; height: 26px; border-radius: 0 0 6px 6px; padding: 4px 0 0 10px;">Содержимое</font>

Короткая ссылка - http://bit.ly/1RjS6t2© 2015 Руководство по оформлению на WMmail - стена, беседка, дневник

Проголосовали: более 50 пользователей [показать]
Комментарии
Комментариев всего: 0  автор запретил оставлять комментарии 

НОВОСТИ
21.02.2024QIWI
подробнее>>
31.12.2023С Новым 2024 Годом!
подробнее>>

© 2004-2024 «WMMAIL» Пользовательское соглашение