Доброго времени суток. Меня постоянно что-то не устраивает во внешнем виде своего ресурса, хочется что-то менять, разукрашивать, рисовать и прочее, прочее, прочее. Стоит только словить себя на мысли, что всё во внешнем виде форума устраивает, как буквально на следующий же день руки так и тянутся внести очередное изменение в оформление.
И вот сегодня утром решил поместить картинку в форму быстрого ответа на сообщение. Если кому-нибудь понадобится проделать нечто подобное, я расскажу как это сделать.
Идем в тему стиля, находим
и начинаем прописывать свое изображение.
Добавляем
background-image: url('ссылка на Вашу картинку'); - путь к изображению
background-position: center; - расположение картинки. У меня по центру, но это дело вкуса и самой картинки.
background-repeat: no-repeat; - отменяем повторение фона.
....... и получаем нечто похожее на:
Вот и всё. Если Вам понравилось то, что получилось, и Вы плюс ко всему хотите проделать подобные изменения и с полем ответа на сообщение, которое появляется при нажатии на кнопку "ОТВЕТИТЬ", идём снова в тему стиля, ищем
и проделываем практически всё то, что уже сделали до это с textarea, а именно добавляем
background-image: url('ссылка на Вашу картинку'); - если такая строка уже есть, просто замените ссылку на свою (во всех стилях содержимое .post оказалось разным)
background-repeat: no-repeat; - смотрим, чтобы стояло "не повторять фон, т.е. no-repeat".
Всё, готово.
Данная задумка, я думаю, пригодится тем, кто имеет эмблему форума, представляемой компании, любимой игры или много чего другого.
И вот сегодня утром решил поместить картинку в форму быстрого ответа на сообщение. Если кому-нибудь понадобится проделать нечто подобное, я расскажу как это сделать.
Идем в тему стиля, находим
Код: Выделить всё
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; - расположение картинки. У меня по центру, но это дело вкуса и самой картинки.
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 {
background-image: url('ссылка на Вашу картинку'); - если такая строка уже есть, просто замените ссылку на свою (во всех стилях содержимое .post оказалось разным)
background-repeat: no-repeat; - смотрим, чтобы стояло "не повторять фон, т.е. no-repeat".
Всё, готово.
Данная задумка, я думаю, пригодится тем, кто имеет эмблему форума, представляемой компании, любимой игры или много чего другого.
+РЕЗУЛЬТАТ БЕЗ ТЕКСТА
+РЕЗУЛЬТАТ С ТЕКСТОМ
Комментарии: 72
- yulchonok
- Сообщения: 445
- Зарегистрирован: 07 ноя 2008, 10:37
- Пол: Жен
Ripley так вам нужно разместить картинку на все поле ответа или прсто сделать справа, но чтобы был нормальный переход?
Если второй вариант, то нужно просто убрать фон, сделать его прозрачным, вот я вам фон белый убрала, оставила только картинку)
добавлено -- 17 июл 2009, 05:33 --
я тут подумала, если картинка светлая сильно, я могу сделать ее по-новой, правда она может быть не идеально такой же, но элемент - значкок пик и внутри звезда будет, и переход любого цвета.
Если второй вариант, то нужно просто убрать фон, сделать его прозрачным, вот я вам фон белый убрала, оставила только картинку)
добавлено -- 17 июл 2009, 05:33 --
я тут подумала, если картинка светлая сильно, я могу сделать ее по-новой, правда она может быть не идеально такой же, но элемент - значкок пик и внутри звезда будет, и переход любого цвета.
- Вложения
-
- Вставка изображения в форму ответа - lb_2.png (3.54 КБ) 1031 просмотр
Форум по психологии, консультации психологов, помощь в решении личных проблем.
http://psygorodok.ru/forum
http://psygorodok.ru/forum
- Георгия
- Сообщения: 165
- Зарегистрирован: 08 июн 2008, 19:56
- Настроение:
- Пол: Жен
- Откуда: Москва
Gold
Большое спасибо!
Сделала на своем форуме!
так классно смотрится!
Большое спасибо!
Сделала на своем форуме!
так классно смотрится!
- Gold
- Сообщения: 565
- Зарегистрирован: 08 дек 2008, 15:45
- Пол: Муж
- Откуда: Киев
Рад, что Вам нравится. Спасибо за отзывы. Оооооочень приятно.
Ripley, что там у тебя ? вышло ?
Ripley, что там у тебя ? вышло ?
- Ripley
- Сообщения: 150
- Зарегистрирован: 17 фев 2009, 13:39
- Пол: Жен
yulchonok спасибки огромное, такая пойдет, фон значит останется таким как был до изменения, картинку поставлю right
Выйдет конечноGold писал(а):Ripley, что там у тебя ? вышло ?
- yulchonok
- Сообщения: 445
- Зарегистрирован: 07 ноя 2008, 10:37
- Пол: Жен
в той картинке что я прикрепила фона нет, он прозрачный, там есть только сама картинка пик. Так что ставьте точно так же как вы делали до этого, вправо, и все будет без переходов.Ripley писал(а):yulchonok спасибки огромное, такая пойдет, фон значит останется таким как был до изменения, картинку поставлю right
Форум по психологии, консультации психологов, помощь в решении личных проблем.
http://psygorodok.ru/forum
http://psygorodok.ru/forum
- Bukovka_
- Сообщения: 165
- Зарегистрирован: 05 мар 2009, 13:01
- Пол: Жен
- Откуда: Киев
Так здорово! Вот, как вышло у меня
[spoiledhide][/spoiledhide]
Теперь меня плющит, чтобы еще куда запихнуть.
[spoiledhide][/spoiledhide]
Теперь меня плющит, чтобы еще куда запихнуть.
- Gold
- Сообщения: 565
- Зарегистрирован: 08 дек 2008, 15:45
- Пол: Муж
- Откуда: Киев
Супер.
Спасибо за скрин.
есть кое-какие наработки по вставке изображений непосредственно в темах под сообщения, но еще сыровато всё... Ну как... на 90% в принципе готово. Но есть небольшая недоработка. Не могу предоставить всем на суд предложение, которое не готово полностью.
Спасибо за скрин.
а меня думаете нет ?Bukovka_ писал(а):Теперь меня плющит, чтобы еще куда запихнуть
есть кое-какие наработки по вставке изображений непосредственно в темах под сообщения, но еще сыровато всё... Ну как... на 90% в принципе готово. Но есть небольшая недоработка. Не могу предоставить всем на суд предложение, которое не готово полностью.
а у меня нет такого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;
вот только что есть
+
Bukovka_, у тебя очень красивый форум
Последний раз редактировалось Ангелочек 18 июл 2009, 16:47, всего редактировалось 3 раза.
- Gold
- Сообщения: 565
- Зарегистрирован: 08 дек 2008, 15:45
- Пол: Муж
- Откуда: Киев
Вы всё правильно сделали.
Мы все изначально делали картинку полупрозрачной. Т.е. сама картинка так нарисована.
Ну и раз уж вы вставляете картинку такой формы, то однозначно ставьте в угол. По центру как-то не так...
а вообще отойдите от геометрических фигур. Смотрите, как здорово вышло у девчонок ;) : у Юли, у еще одной Юли, у Георгии, у Буковки (простите, землячка, не знаю Вашего имени )
Мы все изначально делали картинку полупрозрачной. Т.е. сама картинка так нарисована.
Ну и раз уж вы вставляете картинку такой формы, то однозначно ставьте в угол. По центру как-то не так...
а вообще отойдите от геометрических фигур. Смотрите, как здорово вышло у девчонок ;) : у Юли, у еще одной Юли, у Георгии, у Буковки (простите, землячка, не знаю Вашего имени )
эх..Понятно, я не умею так делать..Gold писал(а):Мы все изначально делали картинку полупрозрачной. Т.е. сама картинка так нарисована.
эта проба была, спасибо за советGold писал(а):Ну и раз уж вы вставляете картинку такой формы, то однозначно ставьте в угол. По центру как-то не так...
это проба была, просто посмотреть получиться ли у меня , меня зовут ОлечкаGold писал(а):а вообще отойдите от геометрических фигур. Смотрите, как здорово вышло у девчонок ;) : у Юли, у еще одной Юли, у Георгии, у Буковки (простите, землячка, не знаю Вашего имени
- Gold
- Сообщения: 565
- Зарегистрирован: 08 дек 2008, 15:45
- Пол: Муж
- Откуда: Киев
я немного дополнил свое предыдущее сообщение.
Если не найдете никакой другой картинки, попросите кого нибудь сделать ее полупрозрачной. Я бы прямо сейчас помог, но рабочий день на сегодня окончен. буду через пару часов.
Выложите здесь оригинал своей картинки. Уверен, что пользователи помогут. ну я если никто вдруг не увидит Вашей просьбы, вечером сегодня сделаю.
Если не найдете никакой другой картинки, попросите кого нибудь сделать ее полупрозрачной. Я бы прямо сейчас помог, но рабочий день на сегодня окончен. буду через пару часов.
Выложите здесь оригинал своей картинки. Уверен, что пользователи помогут. ну я если никто вдруг не увидит Вашей просьбы, вечером сегодня сделаю.
- Loveaction
- Сообщения: 1227
- Зарегистрирован: 07 фев 2009, 07:23
- Пол: Жен
- Откуда: Russland
Я свободна.Gold писал(а):я
Выложите здесь оригинал своей картинки. Уверен, что пользователи помогут. ну я если никто вдруг не увидит Вашей просьбы, вечером сегодня сделаю.
Оль, я тебе в личку уже написала. Давай мне, я тебе сделаю.
Кстати, хотелось бы вкратце про изменение параметра расположения (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 см сверху.
Примерно так.
Правила форума up.4admins.ru
Внимание! Оставить заявку на создание логотипа,
вы можете в разделе 4админс "Ваше творение", подфорум
"Логотип на заказ".
Migration&Kommunikation форум по Германии
Внимание! Оставить заявку на создание логотипа,
вы можете в разделе 4админс "Ваше творение", подфорум
"Логотип на заказ".
Migration&Kommunikation форум по Германии
- yulchonok
- Сообщения: 445
- Зарегистрирован: 07 ноя 2008, 10:37
- Пол: Жен
Ангелочек а мне понравилось как у вас получилось с силуетом) очень красиво и в тон форуму) Только может картинку сдвинуть чуть больше к краю, а то она плавает и не по середине вроде и не сбоку.
Форум по психологии, консультации психологов, помощь в решении личных проблем.
http://psygorodok.ru/forum
http://psygorodok.ru/forum
это огромное спасибо Loveaction , что в тон так красиво получилосьyulchonok писал(а):Ангелочек а мне понравилось как у вас получилось с силуетом) очень красиво и в тон форуму)
знаю, пыталась не получается : , выставила параметры background-position: right bottom;, но оно прям у угол не вписываетсяyulchonok писал(а):Только может картинку сдвинуть чуть больше к краю, а то она плавает и не по середине вроде и не сбоку.
- serjoga
- Сообщения: 171
- Зарегистрирован: 11 авг 2008, 12:16
- Пол: Муж
- Откуда: Ярославль
Извините, а в какой программке можно картинку сделать полупрозрачной?
Похожие темы
-
Добрый вечер.
Некоторое время назад вы сделали мне расширение для вставки плейлистов.
Всё работает как надо. Но хотелось бы что бы вместо текста -...