Доброго времени суток. Меня постоянно что-то не устраивает во внешнем виде своего ресурса, хочется что-то менять, разукрашивать, рисовать и прочее, прочее, прочее. :D Стоит только словить себя на мысли, что всё во внешнем виде форума устраивает, как буквально на следующий же день руки так и тянутся внести очередное изменение в оформление.

И вот сегодня утром решил поместить картинку в форму быстрого ответа на сообщение. Если кому-нибудь понадобится проделать нечто подобное, я расскажу как это сделать.

Идем в тему стиля, находим

Код: Выделить всё

textarea {
	background-color: #FAFAFA;
	color: #333333;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1.3em; 
	line-height: 1.4em;
	font-weight: normal;
	border: 1px solid #a9a9a9;
	padding: 2px;
и начинаем прописывать свое изображение.
Добавляем
background-image: url('ссылка на Вашу картинку'); - путь к изображению
background-position: center; - расположение картинки. У меня по центру, но это дело вкуса и самой картинки. :wink:
background-repeat: no-repeat; - отменяем повторение фона.

....... и получаем нечто похожее на:

Код: Выделить всё

textarea {
	background-image: url('ссылка на Вашу картинку');
        background-position: center;
        background-repeat: no-repeat;
	color: #333333;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1.3em; 
	line-height: 1.4em;
	font-weight: normal;
	border: 1px solid #a9a9a9;
	padding: 2px;

Вот и всё. Если Вам понравилось то, что получилось, и Вы плюс ко всему хотите проделать подобные изменения и с полем ответа на сообщение, которое появляется при нажатии на кнопку "ОТВЕТИТЬ", идём снова в тему стиля, ищем

Код: Выделить всё

.post {
	
и проделываем практически всё то, что уже сделали до это с textarea, а именно добавляем
background-image: url('ссылка на Вашу картинку'); - если такая строка уже есть, просто замените ссылку на свою (во всех стилях содержимое .post оказалось разным)
background-repeat: no-repeat; - смотрим, чтобы стояло "не повторять фон, т.е. no-repeat".

Всё, готово.

Данная задумка, я думаю, пригодится тем, кто имеет эмблему форума, представляемой компании, любимой игры или много чего другого.
+РЕЗУЛЬТАТ БЕЗ ТЕКСТА
+РЕЗУЛЬТАТ С ТЕКСТОМ
Комментарии: 72

yulchonok 17 июл 2009, 05:14 Сообщение

Ripley так вам нужно разместить картинку на все поле ответа или прсто сделать справа, но чтобы был нормальный переход?

Если второй вариант, то нужно просто убрать фон, сделать его прозрачным, вот я вам фон белый убрала, оставила только картинку)

добавлено -- 17 июл 2009, 05:33 --

я тут подумала, если картинка светлая сильно, я могу сделать ее по-новой, правда она может быть не идеально такой же, но элемент - значкок пик и внутри звезда будет, и переход любого цвета.
  • 0
Вложения
Вставка изображения в форму ответа - lb_2.png
Вставка изображения в форму ответа - lb_2.png (3.54 КБ) 1031 просмотр
Форум по психологии, консультации психологов, помощь в решении личных проблем.
http://psygorodok.ru/forum

Георгия 17 июл 2009, 07:35 Сообщение

Gold
Большое спасибо!
Сделала на своем форуме!
так классно смотрится!
  • 0

Gold 17 июл 2009, 09:03 Сообщение

Рад, что Вам нравится. Спасибо за отзывы. Оооооочень приятно. :oops:

Ripley, что там у тебя ? вышло ? :wink:
  • 0

Ripley 17 июл 2009, 11:33 Сообщение

yulchonok спасибки огромное, такая пойдет, фон значит останется таким как был до изменения, картинку поставлю right :)
Gold писал(а):Ripley, что там у тебя ? вышло ?
Выйдет конечно :)
  • 0

yulchonok 17 июл 2009, 23:59 Сообщение

Ripley писал(а):yulchonok спасибки огромное, такая пойдет, фон значит останется таким как был до изменения, картинку поставлю right :)
в той картинке что я прикрепила фона нет, он прозрачный, там есть только сама картинка пик. Так что ставьте точно так же как вы делали до этого, вправо, и все будет без переходов.
  • 0
Форум по психологии, консультации психологов, помощь в решении личных проблем.
http://psygorodok.ru/forum

Bukovka_ 18 июл 2009, 16:30 Сообщение

Так здорово! :Bravo: Вот, как вышло у меня

[spoiledhide]Изображение[/spoiledhide]

Теперь меня плющит, чтобы еще куда запихнуть. :D
  • 0

Gold 18 июл 2009, 16:36 Сообщение

Супер. :Yahoo!:

Спасибо за скрин. :Rose:
Bukovka_ писал(а):Теперь меня плющит, чтобы еще куда запихнуть
а меня думаете нет ? :D
есть кое-какие наработки по вставке изображений непосредственно в темах под сообщения, но еще сыровато всё... Ну как... на 90% в принципе готово. Но есть небольшая недоработка. Не могу предоставить всем на суд предложение, которое не готово полностью.
  • 0

Ангелочек 18 июл 2009, 16:43 Сообщение

Gold писал(а):Идем в тему стиля, находим
Код:
textarea {
background-color: #FAFAFA;
color: #333333;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 1.3em;
line-height: 1.4em;
font-weight: normal;
border: 1px solid #a9a9a9;
padding: 2px;
а у меня нет такого :(
вот только что есть
+
Я попробовала вставить отображается, но у вас оно как то на заднем плане и еле видно, т.е как бы за ширмочкой, а у меня торчит по середине не красиво, не пойму почему? Может просто потому, что у меня нет таких параметров как у вас? Стиль eTech, Само расположение можно поменять и картинку тоже, но вот почему то она слишком видна у меня :unknown: ..помогите плиз :Rose:

Bukovka_, у тебя очень красивый форум :Rose:
  • 0
Последний раз редактировалось Ангелочек 18 июл 2009, 16:47, всего редактировалось 3 раза.
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/

Gold 18 июл 2009, 16:45 Сообщение

Вы всё правильно сделали.

Мы все изначально делали картинку полупрозрачной. Т.е. сама картинка так нарисована.

Ну и раз уж вы вставляете картинку такой формы, то однозначно ставьте в угол. По центру как-то не так... :)

а вообще отойдите от геометрических фигур. Смотрите, как здорово вышло у девчонок ;) : у Юли, у еще одной Юли, у Георгии, у Буковки (простите, землячка, не знаю Вашего имени :sorry: )
  • 0

Ангелочек 18 июл 2009, 16:50 Сообщение

Gold писал(а):Мы все изначально делали картинку полупрозрачной. Т.е. сама картинка так нарисована.
эх..Понятно, я не умею так делать.. :sorry:
Gold писал(а):Ну и раз уж вы вставляете картинку такой формы, то однозначно ставьте в угол. По центру как-то не так...
эта проба была, спасибо за совет :Rose:
Gold писал(а):а вообще отойдите от геометрических фигур. Смотрите, как здорово вышло у девчонок ;) : у Юли, у еще одной Юли, у Георгии, у Буковки (простите, землячка, не знаю Вашего имени
это проба была, просто посмотреть получиться ли у меня :) , меня зовут Олечка :D
  • 0
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/

Gold 18 июл 2009, 16:52 Сообщение

я немного дополнил свое предыдущее сообщение.

Если не найдете никакой другой картинки, попросите кого нибудь сделать ее полупрозрачной. Я бы прямо сейчас помог, но рабочий день на сегодня окончен. буду через пару часов.

Выложите здесь оригинал своей картинки. Уверен, что пользователи помогут. :Rose: ну я если никто вдруг не увидит Вашей просьбы, вечером сегодня сделаю.
  • 0

Loveaction 18 июл 2009, 17:29 Сообщение

Gold писал(а):я
Выложите здесь оригинал своей картинки. Уверен, что пользователи помогут. :Rose: ну я если никто вдруг не увидит Вашей просьбы, вечером сегодня сделаю.
Я свободна. :D

Оль, я тебе в личку уже написала. Давай мне, я тебе сделаю. :drink:


Кстати, хотелось бы вкратце про изменение параметра расположения (background-position: ) картинки.

по горизонтали:
background-position: left
background-position: center
background-position: right


по вертикали:
background-position: top
background-position: center
background-position: bottom


Можно использовать горизонталь и вертикаль одновременно, естественно.
Пример: background-position: right bottom; :)

Для более точного расположения можно использовать еще и пиксели (px),
сантиментры (cm), проценты (%) и т.д.
Например, в см:

background-position: 2cm 2cm; - будет означать расположение рисунка 2 см слева
и 2 см сверху.

Примерно так. :)
  • 0
Правила форума up.4admins.ru

Внимание! Оставить заявку на создание логотипа,
вы можете в разделе 4админс "Ваше творение", подфорум
"Логотип на заказ".

Migration&Kommunikation форум по Германии

yulchonok 18 июл 2009, 22:10 Сообщение

Ангелочек а мне понравилось как у вас получилось с силуетом) очень красиво и в тон форуму) Только может картинку сдвинуть чуть больше к краю, а то она плавает и не по середине вроде и не сбоку.
  • 0
Форум по психологии, консультации психологов, помощь в решении личных проблем.
http://psygorodok.ru/forum

Ангелочек 19 июл 2009, 13:09 Сообщение

yulchonok писал(а):Ангелочек а мне понравилось как у вас получилось с силуетом) очень красиво и в тон форуму)
это огромное спасибо Loveaction :Rose: , что в тон так красиво получилось
yulchonok писал(а):Только может картинку сдвинуть чуть больше к краю, а то она плавает и не по середине вроде и не сбоку.
знаю, пыталась не получается :unknown: , выставила параметры background-position: right bottom;, но оно прям у угол не вписывается :bee: :x
  • 0
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/

serjoga 19 июл 2009, 21:47 Сообщение

Извините, а в какой программке можно картинку сделать полупрозрачной?
  • 0

Похожие темы