ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Поисковой ресурс

Проект от команды FD

Спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Макет для сайта «Fantasy Calalogue»

Детализированный макет «Fantasy catalogue» для тёмного дизайна многостраничного сайта
Стоимость при покупке эксклюзивно: 3600р
В стоимость входит корректировка макета и доработка недостающих страничек под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Объявление о технических обновлениях в шапке форума.

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

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



Работа с дизайном "BT"

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

1

😎 Данная тема "вопрос/ответ" создана чисто для правок, плюшек и дополнений для "BT".

https://i.imgur.com/C7yOKI0.png

Собственно форум

Итак поехали.

Начнём с того что имеется идея (но воплотить без Вашей помощи ни как).
Суть вопроса:
Имеем кнопку (к примеру) выделить текст (назовём его блок macho). То-есть при клике выделеный текст оборачивается в мой (css) border.
В данный момент рабочая плюшка.....но
😉Есть моё хочу

Вопрос:
Как мне подложить свою картинку под данный текст? Чтобы получился аналог цитаты.

Собственно.... Имею картинку (к примеру эту)
https://i.imgur.com/mrznUiA.png
Я её разрезал на верх/середина/низ
https://i.imgur.com/2NWDQ7n.png
Так
https://i.imgur.com/ZKSIZP3.png
И так
https://i.imgur.com/9LdSO3N.png
Получается: верх/низ это закрывашки, а середина и есть сам блок (который растягивается на всю высоту выделеного/важного поста).

Как мне правильно написать данную плюшку? Сейчас это выглядит так
https://i.imgur.com/Wi9eQeZ.png

Код:
.macho {
    width: 96%;
border: 8px solid #40c4c8;
    padding: 1px;
    -moz-border-image: url(https://forumstatic.ru/files/001a/c0/03/99899.gif) 8 round round;
    -webkit-border-image: url(https://forumstatic.ru/files/001a/c0/03/99899.gif) 8 round round; 
    -o-border-image: url(https://forumstatic.ru/files/001a/c0/03/99899.gif) 8 round round;
    border-image: url(https://forumstatic.ru/files/001a/c0/03/99899.gif) 8 round round;
    background: #FFA07A; /* Цвет фона */
    display: inline-block;
    text-align: justify;
    text-size: 12px;
    font-family: Snell Roundhand, cursive;
    font-style: oblique;
}

Но хотелось бы именно картинкой

я думаю многим зайдёт такая фича

Отредактировано МАЧОнаДАЧЕ (08.04.22 10:10)

Подпись автора

...

+1

2

#p166588,МАЧОнаДАЧЕ написал(а):

Как мне подложить свою картинку под данный текст? Чтобы получился аналог цитаты.

Попробуй сделать по аналогии с растягивающейся рамкой для мини-профиля: https://forum.mybb.ru/viewtopic.php?id= … =3#p817425

Точно также, только не для мини-профиля, а для цитаты. Думаю должно получиться.

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+1

3

#p166588,МАЧОнаДАЧЕ написал(а):

Но хотелось бы именно картинкой

Смотрите, если у вас фиксированная ширина блока, он залит одним цветом и, допустим, не сильно резная-вычурная рамка, то можно так:

Код:
.macho {
background: 
url(https://i.imgur.com/2NWDQ7n.png) 0% 0% no-repeat border-box, /*верх*/
url(https://i.imgur.com/9LdSO3N.png) 0% 100% no-repeat border-box, /*низ*/
url(https://i.imgur.com/ZKSIZP3.png) 0% 0% repeat-y #fff padding-box; /*середина*/
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
}

Что делаем: "расставляем" фон так, чтобы верх и низ "заходили" на рамку заданной толщины, а боковушки - нет. Таким образом можно вверху и внизу сделать какие-то красивости, которые не будут мешаться боковым частям.
Если блок "резиновый", то можно попробовать то же самое, только украшение повесить еще одной фоновой картинкой, их можно много сделать )
border-box - для "влезания" на территорию границы.
padding-box - для того, чтобы оставаться в границах "контента".

* * *

Псевдоэлементы :before и :after
Если используем их, то можно основную рамку задать как цветом, так и через border-image, а украшение - навесить на псевдоблоки и позиционировать в нужное место.
Но тут лучше будет не на обстрактном примере разбираться,а  на конкретном, т.к. для того, чтобы корректно использовать позиционирование - может, потребуется куда надо довесить еще position:relative  и так далее и тому подобное...
Так что на всевдоэлементы даю только наводку, не конкретное решение )

Отредактировано Шиповник (10.04.22 13:18)

+3

4

#p166658,Automation Baby написал(а):
#p166588,МАЧОнаДАЧЕ написал(а):

Как мне подложить свою картинку под данный текст? Чтобы получился аналог цитаты.

Попробуй сделать по аналогии с растягивающейся рамкой для мини-профиля: https://forum.mybb.ru/viewtopic.php?id= … =3#p817425

Точно также, только не для мини-профиля, а для цитаты. Думаю должно получиться.

Да да... Я и искал профиль, чтобы сделать по аналогии.
Короче нашёл такое решение (важного блока)
https://i.imgur.com/0b2neD0.png

Ну а вообще на WordPress есть такой плагин  http://wordsmall.ru/bez-plagina/krasivo … okami.html
И вот если его реализовать под нашу платформу....я думаю многим зайдет такая фича (к примеру в bb панель кнопку...кликаешь....раскладка с важно/инфа/совет итд...ну и соответственно текст оборачивается в бордер).

Тогда не прийдется каждому лепить свой велосипед, а взять общий скрипт (и пользоваться)

Подпись автора

...

0

5

Шиповник
Именно before и :after и было решением (если посмотреть скрин выше) с повешаньем в блок 2 картинок 👌
Ваш же пример с css macho я опробую позже (с блоком внимание [к примеру) или чет типо того)

Отредактировано МАЧОнаДАЧЕ (10.04.22 13:57)

Подпись автора

...

0

6

Теперь вопрос к умельцам скриптописцам:
Имеется скрипт (типо портал). Так вот его надо поправить чтобы получился такой аналог
https://i.imgur.com/G6l9Joo.png

  • Уменьшить картинку с поста (типо выод превью из темы)

  • Увеличить/уменшить шрифт (это уже по ходу дела)

  • Выделить блок (автор убрать) время и название темы

  • Спозиционировать и оформить кнопку "читать подробнее". То есть так как есть переход к теме

  • Уменьшить количество вывода символов (текст пару строк)

  • Чуть подправить погинатор

Пример поставил вот:  https://blog.topbb.ru/pages/glavnaya_

Суть: инфо портал "бла бла новости/блоги" (кому надо перейдёт в тему

Кто бы мог взяться за данные правки?

Отредактировано МАЧОнаДАЧЕ (10.04.22 16:54)

Подпись автора

...

0

7

Дополнение к вышепосту:
На той же основе сообразил 3 блока для выделеной инфы
https://i.imgur.com/7S92ftx.png
Ну и какбы под каждый блок добавил кнопку в bb панель
(есле кому-то зайдёт поделюсь)

Подпись автора

...

0

8

#p166588,МАЧОнаДАЧЕ написал(а):

Собственно.... Имею картинку (к примеру эту)
https://i.imgur.com/mrznUiA.png

Насчёт цитат! Только сейчас до меня дошло что вот такое можно и кодом сделать. Посмотри вот тут примеры:

Код:
https://создание-сайта.net/news-new/8-variantov-oformleniya-tsitat-na-css.html

Там пример 3 в точности как ты нарисовал, только всё кодом.

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+1

9

Automation Baby
Да да 👍 я собственно с этого сайта и начал свою идею. На данный момент я сообразил 3 блока (то-есть 3 тега) [пост выше] и всё зэбест.

Этот вопрос закрыт.

Открыт вопрос по правкам скрипта портала

Подпись автора

...

0