Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Корзина » Оформляем контент в постах


Оформляем контент в постах

Сообщений 1 страница 2 из 2

1

Таблица в сообщениях.

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

Итак, по порядку:
- Напишем

Код:
<style type="text/css">
#pun-main .topic .container .post-body .post-box .post-content table tbody tr td {...}
</style>

- Видим в скобочках три точки. Вместо них на Ваш выбор  можно вставить то, что я сейчас перечислю. Если окажется, что надо вставить несколько параметров, разделяйте их пробелами, обязательно сохраняя точку с запятой на конце каждого!!!

Задать цвет границ: border-color: red; Соответственно red - меняете на нужный Вам цвет. При необходимости, название цветов можно поглядеть тут: Таблица цветов.

Задать толщину границ: border-width: 2px; Соответственно 2 меняем на нужное Вам значение.

Задать стиль рамки: border-style: dotted; Соответственно dotted меняем на:
solid - одиночная сплошная рамка.
dashed - штрих-пунктирная рамка.
dotted - точечная рамка.
double - двойная рамка (будет видна при толшине рамки больше 3).
groove - трёхмерная рамка (будет виден при толщине рамки больше 3).
ridge - эффект выпуклой рамки (будет виден при толщине рамки больше 3).
inset - эффект вогнутой рамки (будет виден при толщине рамки больше 3).
outset - эффект "выпуклости фона" (будет видна при толщине рамки больше 3).
none - отсутствие рамки.

Задать цвет фона таблицы: background-color: red; Соответственно, red меняем на нужный нам цвет. Опять же, если Вы не помните, как называется тот или иной цвет, можете вспомнить тут: Таблица цветов.

Задать фон таблицы картинкой: background-image: url(Адрес картинки); Соответственно Адрес картинки заменяем на адрес нужной Вам картинки. Подробнее о том, как узнать адрес картинки читаем тут Инструкция.

Задать повторение фона в таблице (необходимым окажется для тех, у кого картинка меньшеразмера таблицы): background-repeat: repeat; Соответственно repeat заменяем на :
repeat - повторяется везде, полностью закрывая собой фон таблицы.
repeatx - повторяется по горизонтали.
repeaty - повторяется по вертикали.
no-repeat - не повторяется.

Задать положение фона в таблице: background-position: top center; Соответственно заменяем top cente (первое слово - положение картинки по вертикали, второе - по горизонтали) на:
left - слева.
center - по центру.
right - справа.

Задать ширину и высоту таблицы: height: 80px; width: 750px; Соответственно первое значение 80 - это ширина таблицы, второе значение 750 - её высота. Изменяем их на своё усмотрение.

Задать дополнительное украшение текста внутри ВСЕЙ таблицы (кроме того, что уже имеется в форме ответа): text-decoration: overline; Соответственно overline заменяем на:
overline - черта сверху над текстом (надчёркивание).
blink - мигание текста.

Задать выравнивание содержимого таблицы по вертикали: vertical-align: middle; Соответственно middle заменяем на:
middle - посередине.
top - относительно верхнего края.
bottom - относительно нижнего края

Запретить использование таблицы в сообщениях: display: none;

Маркер текста.
Если Вам не нравится стандартный жёлтый фон, которым Вы выделяете текст, это можно легко поправить.

- Напишем

Код:
<style type="text/css">
#pun-main .topic .altstyle .container .post-body .post-box .post-content strong .highlight-text {...}
</style>

- Видим в скобочках три точки. Вместо них ставим background-color: red; Соответственно, red меняем на нужный нам цвет. Опять же, если Вы не помните, как называется тот или иной цвет, можете вспомнить тут: Таблица цветов. Если окажется, что надо вставить несколько параметров, разделяйте их пробелами, обязательно сохраняя точку с запятой на конце каждого!!!

Секрет: если Вы будете писать на маркере тем же цветом, что и он сам, получится так сказать "скрытый" текст, который будет виден только если выделить его мышкой. Попробуйте проверить.

Запретить использование маркера в сообщениях: background-color: transparent;

Горизонтальная черта.
Можно разукрасить и её, было бы желание... :)


- Напишем

Код:
<style type="text/css">
#pun-main .topic .endpost .container .post-body .post-box .post-content hr {...}
</style>

- Видим в скобочках три точки. Вместо них на Ваш выбор  можно вставить то, что я сейчас перечислю. Если окажется, что надо вставить несколько параметров, разделяйте их пробелами, обязательно сохраняя точку с запятой на конце каждого!!!

Задать цвет: border-color: red; Соответственно red - меняете на нужный Вам цвет. При необходимости, название цветов можно поглядеть тут: Таблица цветов.

Задать толщину: border-width: 2px; Соответственно 2 меняем на нужное Вам значение.

Задать стиль: border-style: dotted; Соответственно dotted меняем на:
solid - одиночная сплошная.
dashed - штрих-пунктирная.
dotted - точечная.
double - двойная (будет видна при толшине больше 3).
groove - трёхмерная (будет виден при толщине больше 3).
ridge - эффект выпуклости (будет виден при толщине больше 3).
inset - эффект вогнутости (будет виден при толщине больше 3).
outset - эффект "выпуклости над фоном" (будет видна при толщине больше 3).
none - отсутствие рамки.

Запретить использование горизонтальной черты в сообщениях: display: none;

+2

2

В рассмотренных выше примерах изменятся сразу все таблицы, маркеры или горизонтальные линии на всём форуме. А что если надо сделать такое лишь для конкретного сообщения? Всё просто:

Вместо того кода, что мы писали выше, напишите:

Для таблицы:

Код:
<style type="text/css">
#pun-main .topic .container .post-body .post-box .post-content table tbody tr td {...}
</style>

Для маркера:

Код:
<style type="text/css">
#pun-main .topic #p1520 .container .post-body .post-box .post-content p .highlight-text{...}
</style>

Для горизонтальной линии:

Код:
<style type="text/css">
#pun-main .topic #p1520 .container .post-body .post-box .post-content hr{...}
</style>

Нам важно #p1520 - это и есть порядковый номер поста (сообщения) на форуме. Осталась последняя проблема: как узнать этот номер? Действуем по следующей схеме:
1. Наводим мышку на дату и время написания нужного нам поста.
2. Кликаем по ней правой кнопкой мыши.
3. Выбираем там нункт "Свойства".
4. Там видим ссылку на наш пост, которая и содержит его номер.

http://i061.radikal.ru/0906/01/4cd6dc59d930t.jpg

5. Копируем его (номер) и подставляем в код.

Всё, теперь мы сделали нужные нам действия лишь для конкретного поста на форуме. Прописав код ещё раз и указав номер другого поста, можно изменить другой пост. Раскрасьте хоть все посты форума - дело хозяйское.
Секрет: если вместо номера прописать .endpost , то нужное действие будет применимо к последнему посту в каждой теме. Например, можно сделать маркер в последнем посте отличного цвета от остальных, чтоб сразу отличить его. :)

+2


Вы здесь » Единый форум поддержки » Корзина » Оформляем контент в постах