[Демон Кареглазый]

Обращаю ваше внимание на то что вступать в сообщество могут только желающие стать нашими дизайнерами. Об этом написано в объявлении которое выпадает из "Добро пожаловать". Но судя по всему его мало кто читает) Добавляйте нас в избранное. А если все же намереваетесь стать дизайнером сначала пишите в умыл Кареглазого Демона

запись создана: 21.11.2017 в 20:40

@темы: Административное

---

[Изумрудный Демон]

У нас на работе есть поговорка: "Открыл фотошоп - 50р., закрыл фотошоп - 50р." Это я к тому что дешевле работа дизайнера стоить не может)
Итак. Собрал я оформление. Зимнее, легкое. С учетом большинства пожеланий из этого поста.

Помимо того что заметно на видео диз адаптируется под любую ширину экрана и подходит для смартфонов, ужимает изображения в дневнике до 700 пикселей в основной ленте и до 600 пикселей в избранном и комментариях, а любое видео до 560 на 315.

Если вас заинтересовало это оформление перечислите 100 епонов на счет сообщества и напишите умыл. Умыл лучше писать на ник Кареглазый Демон. Либо отпишитесь в комментариях к этой записи.

Вам достанутся все настройки, коды, картинки этого оформления, а также бонусом кнопочка "Установить автоматически". Чтобы оно у вас было, но, если вам не хочется ставить его вручную, вы могли начать пользоваться им сразу же.

*** СКАЧАН 3 РАЗА ***

запись создана: 12.12.2017 в 01:36

@темы: Кареглазый Демон, CSS, за умеренную плату, дизайн

---

[Изумрудный Демон]

Я тут прикинул масштабы мануала по возможностям применения CSS для дайров с примерами и понял что лучше уж в формате видео. Прошелся по своим работам, потыкал, записал. Здесь конечно не все, я старался не выкладывать те что в свободном доступе и на виду. Если вам хватит терпения досмотреть до конца вы возможно откроете для себя что то новое)
Обращаю ваше внимание на то что я специально уменьшил область записи и свернул браузер. В живую эти оформления смотрятся лучше в основной массе, особенно на широких мониторах. Градиенты не рябят, менюшки друг на друга не наезжают.
И к сожалению в большинстве этих дизайнов часть красоты не видна, а именно в тех где эпиграф перекрывает верх. В таких работах он прописывался картинкой со ссылками и гармонично вписывался в оформление. К сожалению восстановить их у меня нет возможности. И раньше я часто использовал прием уведомлений картинками. Они тоже отображаются не везде, но я запишу с ними отдельное видео.
В некоторых старых работах видны огрехи. Простите их мне пожалуйста. Я был молод и неопытен. Зато много экспериментировал) И поверьте на слово, сейчас я могу и делаю лучше.

Вопрос: Интересно?

1. Да		33	(97.06%)
2. Нет		1	(2.94%)
Всего:		34

@темы: возможности CSS, Полезное, урок, Кареглазый Демон

---

[Asteinny]

настройки

Вопрос: Нравится?

1. Да		49	(96.08%)
2. Нет		2	(3.92%)
Всего:		51

@темы: коричневое, заказ, дизайн, Новый год, Asteinny

---

[Dark Wood]

Свой Шерлок должен быть у каждого

+5

Вопрос: Нравится?

1. Да		22	(62.86%)
2. Нет		7	(20%)
3. С чайком потянет		6	(17.14%)
Всего:		35

@темы: по группам/фильмам/сериалам/играм, аватары, Спящий Эльф

---

[Dark Wood]

Всем котиков

Вопрос: Нравится?

1. Да		64	(92.75%)
2. Нет		2	(2.9%)
3. С чайком потянет		3	(4.35%)
Всего:		69

@темы: Зима, Спящий Эльф, аватары, Новый год, кошки

---

[Dark Wood]

Смотреть

Вопрос: Нравится?

1. Да		26	(74.29%)
2. Нет		2	(5.71%)
3. С чайком потянет		7	(20%)
Всего:		35

@темы: Спящий Эльф, Зима, Новый год, дизайн, нежное, песочно-бежевое

---

[Изумрудный Демон]

Ну что ж. Давайте попробуем. Про идею каталога с дизайнами за оплату за скачивание думаю все слышали. Мне интересно попробовать это в формате сообщества.
От вас потребуется самое сложное. В комментариях к этой записи договориться между собой какой диз вам нужен. Скидывайте примеры работ, пользуйтесь формами заказа, показывайте какие платные фишки вам наиболее привлекательны.
Я выберу наиболее часто повторяющиеся пожелания, соберу их вместе и сделаю оформление. (может и не одно) А может вообще не соберу, если не будет активности) Тогда сообщество продолжит работать в привычном формате. Скрин выложу в сообществе, а настройки буду выдавать в умыл по запросу.
Саму минимальную стоимость как тему болезненную вывожу на голосование.

Пока так, возможно со временем что то изменится если тема приживется)

запись создана: 03.12.2017 в 21:28

Вопрос: Возможность получить настройки CSS должна стоить

1. 50р.		23	(35.94%)
2. 100р.		15	(23.44%)
3. 150р.		13	(20.31%)
4. 200р.		13	(20.31%)
Всего:		64

@темы: Административное, Кареглазый Демон

---

[Огненный Бес]

Забирая дизайн себе, пожалуйста, не забывайте ставить баннер сообщества

Настройки

Вопрос: Нравится дизайн?

1. Да		58	(92.06%)
2. Нет		5	(7.94%)
Всего:		63

@темы: Зима, Огненный Бес, дизайн, коричневое

---

[Изумрудный Демон]

Возможность прописать кодом разделители это еще один повод подключить CSS)
Отдельного селектора, отвечающего за пространство между постами и комментариями не существует. Зато можно задавать фон самого поста.
Если бэкграунд повторяющийся получится заливка. Текстурой, полупрозрачной подложкой или просто цветом по вашему желанию.
А если прописать картинку без повторения и задать ей положение по краю поста она прилепится справа, слева, сверху или внизу. Последние два случая как раз используются для имитации разделителей.
Конечно можно и в бесплатнике исхитриться. Допустим прописав нужный код с картинкой через сервис настраиваемых кнопок. Но в этом случае вам придется жать на кнопку вручную в конце каждого поста. А если страниц в вашем дневнике много пере сохранять ранние посты вы просто замучаетесь.

Сам код очень простой. Даже не нужно прописывать ширину и высоты картинки.

 .singlePost { background:url('картинка разделителя из вашей БИ') no-repeat; background-position:bottom; padding-bottom:80px !important;padding-top:60px !important;}

Обратите внимание что вставлять нужно не весь адрес изображения из БИ, а начиная с /userdir и до конца.
Расшифровка:
каждый пост {(картинка) не повторять; позиция внизу; отступ снизу; отступ сверху}
Отступы нужны чтобы ваш разделитель вышел за сам пост и не перекрывал ссылки под постом.
Когда вы прописываете код таким образом возникает небольшой глюк, а именно двоится разделитель под эпиграфом.
Убирается это вот так:

 #epigraph .postLinksBackg, #epigraph .singlePost {background: none !important;padding: 0px !important;}
 #epigraph .header {background: none !important;padding: 0px !important;}
 #post0 {height:0px;padding: 0px !important;}

Конечный код:

.singlePost { background:url('картинка разделителя из вашей БИ') no-repeat; background-position:bottom; padding-bottom:80px !important;padding-top:60px !important;}
 #epigraph .postLinksBackg, #epigraph .singlePost {background: none !important;padding: 0px !important;}
 #epigraph .header {background: none !important;padding: 0px !important;}
 #post0 {height:0px;padding: 0px !important;}

Ну и чтобы вам было на чем тренироваться.

Авторство не мое, я только подогнал под размер. Найдено в открытых источниках.

Вопрос: Полезно?

1. Да		32	(100%)
2. Нет		0	(0%)
Всего:		32 Всего проголосовало: 32

@темы: как это сделано, возможности CSS, урок, Кареглазый Демон, CSS

---

[Изумрудный Демон]

смотреть

Вопрос: Понравилось?

1. Да		22	(75.86%)
2. Нет		7	(24.14%)
Всего:		29

@темы: заказ, дизайн, Кареглазый Демон, Зима

---

[Dark Wood]

Легкие зимние эпиграфы

Смотреть

Вопрос: Нравится?

1. Да		66	(91.67%)
2. Нет		2	(2.78%)
3. С чайком потянет		4	(5.56%)
Всего:		72

@темы: Спящий Эльф, Новый год, Зима, эпики, серое, песочно-бежевое, голубое-сине-фиолетовое

---

[Dark Wood]

И еще немного аватарочных вкусностей.
Для бесплатных дневников

Вопрос: Нравится?

1. Да		52	(86.67%)
2. Нет		2	(3.33%)
3. С чайком потянет		6	(10%)
Всего:		60

@темы: голубое-сине-фиолетовое, аватары, Новый год, Зима, Спящий Эльф

---

[Dark Wood]

Немного аватарочных вкусностей.
Для платных дневников

Вопрос: Нравится?

1. Да		51	(87.93%)
2. Нет		3	(5.17%)
3. С чайком потянет		4	(6.9%)
Всего:		58

@темы: красное, коричневое, еда, аватары, Новый год, Зима, Спящий Эльф

---

[Dark Wood]

Дизайн с возможностью замены цвета фона дневника и записей, не меняя рисунка фона. В свободное пользование.

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

Смотреть

Смотреть

Вопрос: Нравится?

1. Да		45	(84.91%)
2. Нет		3	(5.66%)
3. С чайком потянет		5	(9.43%)
Всего:		53

@темы: Зима, Спящий Эльф, дизайн, Новый год, серое

---

[Изумрудный Демон]

смотреть

Вопрос: Понравилось?

1. Да		30	(76.92%)
2. Нет		9	(23.08%)
Всего:		39 Всего проголосовало: 39

@темы: по группам/фильмам/сериалам/играм, заказ, дизайн, Кареглазый Демон

---

[Огненный Бес]

Детали

Установить автоматически

Настройки

Вопрос: Нравится дизайн?

1. Да		49	(84.48%)
2. Нет		2	(3.45%)
3. Надел		7	(12.07%)
Всего:		58 Всего проголосовало: 55

@темы: дизайн, Огненный Бес, Новый год, Зима, CSS

---

[Изумрудный Демон]

Очень радует новый пост на спирите.
А то я уже обдумывал как автоматизировать ужимание эпиграфов, которые больше 700 пикселей. Таких в сообществе большинство.
Теперь же если вы установили дизайн, а он скроллится, можете выбрать большие изображения сжимать до ширины ленты здесь.
А если вам, как и мне, милее растянутый по ширине, а не узкий дневник заходите сюда и ставьте галочку разрешить растягивать дневник по ширине.

@темы: Административное, Полезное

---

[Изумрудный Демон]

Меня так впечатлила реакция на простую кнопку «наверх» в сообществе За родной диван!, что я решил запилить полноценный туториал с основными возможными положениями этой самой кнопки. Мало ли, вдруг еще кого порадую) Опять же если вы подключили CSS спасая дайри, а зачем он вам не знаете, вот вам ответ.
Даже не вдаваясь в визуальные дебри сократите меню удалив лишнее и приведите дневник в порядок, как это описано здесь и здесь. И повесьте кнопку наверх, как вариант.
Возьмем для наглядости такой макет:

Картинка может быть абсолютно любой. Стрелка, указатель наверх или что то что подойдет по смыслу. Главное чтобы фон этой кнопки был прозрачным. Загружаете в свою БИ. И дальше в кодах строго между кавычек используете url своей картинки начиная с /usedir и до конца.
width это ширина картинки
height высота. Эти параметры прописываются индивидуально.
position: fixed !important; фиксирует кнопку на странице, чтобы она не уехала с лентой
display:block!important;line-height: 500px !important; overflow:hidden !important; помогает заменить изначальную текстовую ссылку на картинку. Кому интересны детали добро пожаловать на htmlbook.ru/
z-index: 3; это что то вроде слоев фотошопа. Чем больше цифра тем выше элемент. Лучше прописывать, чтобы кнопка точно была над лентой и записями и не перекрылась допустим меню.
#bottomNav {display: block;} просто смиритесь с тем что без этой строчки кнопка не видна)

Теперь по позициям. Если вам нужна кнопка в углу задаете ей нулевые отступы

1.

#bottomNav {display: block;}
#bottom_up a{ background: url('/userdir/2/2/2/0/2220055/83823053.gif') 0px 0px no-repeat;width:50px !important;height: 50px !important;position: fixed !important;top: 0px;left:0px; display:block!important;line-height: 500px !important; overflow:hidden !important;z-index: 3;}

2.

#bottomNav {display: block;}
#bottom_up a{ background: url('/userdir/2/2/2/0/2220055/83823053.gif') 0px 0px no-repeat;width:50px !important;height: 50px !important;position: fixed !important;top: 0px;right:0px; display:block!important;line-height: 500px !important; overflow:hidden !important;z-index: 3;}

3.

#bottomNav {display: block;}
#bottom_up a{ background: url('/userdir/2/2/2/0/2220055/83823053.gif') 0px 0px no-repeat;width:50px !important;height: 50px !important;position: fixed !important;bottom: 0px;left:0px; display:block!important;line-height: 500px !important; overflow:hidden !important;z-index: 3;}

4.

#bottomNav {display: block;}
#bottom_up a{ background: url('/userdir/2/2/2/0/2220055/83823053.gif') 0px 0px no-repeat;width:50px !important;height: 50px !important;position: fixed !important;bottom: 0px;right:0px; display:block!important;line-height: 500px !important; overflow:hidden !important;z-index: 3;}

Если же кнопка нужна вам прикрученной к краю ленты подход немного меняется. Отступы сверху и снизу прописываются также, а справа-слева в два этапа.
Сначала мы паркуем кнопку в центр благодаря left:50%;
Затем двигаем ее уже от середины. На 450 пикселей в нашем случае, то есть на половину ширины ленты.
margin-left: -450px; передвинет кнопку влево,
margin-left: 450px; соответственно вправо.

5.

#bottomNav {display: block;}
#bottom_up a{ background: url('/userdir/2/2/2/0/2220055/83823053.gif') 0px 0px no-repeat;width:50px !important;height: 50px !important;position: fixed !important; top: 0px; left:50%; margin-left: -450px; display:block!important; line-height: 500px !important; overflow:hidden !important;z-index: 3;}

6.

#bottomNav {display: block;}
#bottom_up a{ background: url('/userdir/2/2/2/0/2220055/83823053.gif') 0px 0px no-repeat;width:50px !important;height: 50px !important;position: fixed !important; top: 0px; left:50%; margin-left: 450px; display:block!important; line-height: 500px !important; overflow:hidden !important;z-index: 3;}

7.

#bottomNav {display: block;}
#bottom_up a{ background: url('/userdir/2/2/2/0/2220055/83823053.gif') 0px 0px no-repeat;width:50px !important;height: 50px !important;position: fixed !important; bottom: 0px; left:50%; margin-left: -450px; display:block!important; line-height: 500px !important; overflow:hidden !important;z-index: 3;}

8.

#bottomNav {display: block;}
#bottom_up a{ background: url('/userdir/2/2/2/0/2220055/83823053.gif') 0px 0px no-repeat;width:50px !important;height: 50px !important;position: fixed !important; bottom: 0px; left:50%; margin-left: 450px; display:block!important; line-height: 500px !important; overflow:hidden !important;z-index: 3;}

Вопрос: Полезно?

1. Да		29	(100%)
2. Нет		0	(0%)
Всего:		29 Всего проголосовало: 29

@темы: как это сделано, урок, возможности CSS, Кареглазый Демон, CSS

---

[Dark Wood]

Зимушний дизайн с анимированым эпиграфом в общее пользование

Смотреть

Вопрос: Нравится?

1. Да		30	(76.92%)
2. Нет		5	(12.82%)
3. С чайком потянет		4	(10.26%)
Всего:		39

@темы: Зима, Спящий Эльф, серое, дизайн, голубое-сине-фиолетовое