Оформление аватара и званий в блоке

[Serifa]

Возможно ли на движке SMF сделать вот такой финт ушами, чтобы получилось не хуже, чем вот так (на скрине)?



Т.е. у них всё это поле оформлено на едином фоне, отличном от общего фона форума. А там ещё и фоновое изображение, и тень.

[Серый Лис]

Забавно ) 
У нас есть спецы которые могут все!    (а вообще то.. кто платит пиастры - тот заказывает финты с ушами)

[GeorG]

Возможно ли на движке SMF сделать вот такой финт ушами

Возможно, если перелопатить весь Display.template.php и index.css.

[Taz]

<div class="poster">
Можно попробовать воткнуть в стиль фон

UPD
проверил, в index.css ищем

Код Выделить Развернуть

.poster {
float: left;
width: 15em;
}
ну и добавляем туда background или background-image

[Фисташка]

Возможно ли на движке SMF сделать вот такой финт ушами, чтобы получилось не хуже, чем вот так (на скрине)?

.poster {
float: left;
width: 14em;
background: #99f;
margin: 0 0px 0 10px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 0 10px #339;
}

[Serifa]

Ну вот, пока я копала Инспектор в мозилле, вы уже всё придумали
Интересно, почему я раньше до такого не дотумкала? Тормоз перестройки...

У нас есть спецы которые могут все!    (а вообще то.. кто платит пиастры - тот заказывает финты с ушами)

А ты говоришь: цапу... Тут админ админу — друг, товарищ и брат

Наверное, не все браузеры с ходу осилят такую конструкцию?

[Серый Лис]

Брат - спору нет. 
Ты писала о финте ушами, но от "размера" ушного финта, порой зависит решение вопроса, да и сам финт мог оказаться весьма внушительного размера.   Впрочем, в  женской среде девушки решают подобные вопросы наверное проще.
Не забудь Фисташке сказать спасибо.

[Taz]

Наверное, не все браузеры с ходу осилят такую конструкцию?

Именно такую - только хром и опера.

Можно просто использовать

border-radius: 5px;
box-shadow: 0 0 10px #339;

Результат тот же.

[Yarik]

Именно такую - только хром и опера.

Проверил в четырёх браузерах,везде показывает.Код вставил от Фисташки,красивее получается.

[Taz]

Проверил в четырёх браузерах,везде показывает.Код вставил от Фисташки,красивее получается.

firefox не умеет webkit, потому тень и скругления не работалют. В IE скорее всего картина такая же. Если не писать -webkit, то используется css3, который поддерживается всеми современными браузерами.

[Фисташка]

.poster {
float: left;
width: 14em;
background: #99f;
margin: 0 0px 0 10px;

/* Скругление углов */
border-radius: 5px; /* CSS3 */
-webkit-border-radius: 5px; /* Для хрома */
-moz-border-radius: 5px; /* Для мозилы */
-khtm-border-radius: 5px; /* Для IE */

/* Тень блока */
box-shadow: 0 0 10px #339; /* CSS3 */
-webkit-box-shadow: 0 0 10px #339; /* Для хрома */
-moz-box-shadow: 0 0 10px #339; /* Для мозилы */
-khtm-box-shadow: 0 0 10px #339; /* Для IE */
}

[Yarik]

Лиса уже нормально отображает.IE не хочет.
Пошел перекрашивать под себя.Фисташка и Taz +

[Yarik]

А не подскажете как теперь на аватаре углы закруглить?А то всё хорошо выглядит,а вот ава квадратная не ахти...

[Taz]

А не подскажете как теперь на аватаре углы закруглить?А то всё хорошо выглядит,а вот ава квадратная не ахти...

/* No image should have a border when linked. */
a img
{
   border: 0;
   border-radius: 5px; /* CSS3 */
   -webkit-border-radius: 5px; /* Для хрома */
   -moz-border-radius: 5px; /* Для мозилы */
   -khtm-border-radius: 5px; /* Для IE */;
}

[Yarik]

Благодарю.Красота получилась....
Я ещё и тень добавил.....
А ещё обводок понаделал...Да лепота...

[Yarik]

В итоге получил вот такое

[Serifa]

В итоге получил вот такое

Класс! Надо ж всем сейчас рассказать, чтобы был у нас форум не хуже всяких мибб и прочих!))
Пусть модеры добавят в «Полезные решения»!!!

[karavan]

А еще лучше, сделайте мод с гибкими настройками 

[Yarik]

Изменения которые делал я.
Находим в своей теме в папке css файл index.css

Код Выделить Развернуть

/* No image should have a border when linked. */
a img
Я удалил оттуда всё и прописал

Код Выделить Развернуть

{
     border: 0;
   border-radius: 5px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -khtm-border-radius: 10px;

    border: 1px solid #000080;
   -webkit-border: 1px solid #000080;
   -moz-border: 1px solid #000080;
   -khtm-border: 1px solid #000080;
}
Цвет окантовки и толщину линии подбираем на свой вкус.
Далее ищем

Код Выделить Развернуть

poster h4, .poster ulИ там тоже удалил всё и прописал такое

Код Выделить Развернуть

{
float: left;
width: 15em;
background: #607b8b;
margin: 0 0px 0 5px;

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtm-border-radius: 5px;text-shadow;

box-shadow: 0 0 50px #000000;
-webkit-box-shadow: 0 0 50px #000000;
-moz-box-shadow: 0 0 50px #000000;
-khtm-box-shadow: 0 0 50px #000000;

text-shadow: -1px -1px 1px white, 1px -1px 1px white, -1px 1px 1px white, 1px 1px 1px white;
}
Цвет фона ,цвет тени а так-же оформление текста можно выбирать на свой вкус,подбирать под свою тему.


Прежде чем делать какие либо изменения в файлах сохраните бекап файла себе на компьютер.

[ALINA]

А мне почему то не нравится такой расширенный блок . У меня все скрыто под кнопкой  информация .Можно в принципе попробовать выделить этот блок . Но будет ли работать кнопка .Потом надо будет попробовать .

[ALINA]

Кнопка работает . Смотрится конечно  неплохо . Но вот как от этого избавится ? Не въеду 

[Taz]

Тема не стандартная? Дайте название, а лучше ссылку на форум, где она установлена.

[Yarik]

Но вот как от этого избавится ? Не въеду

Я вчера тоже бился над этим.Не нашел.Это видать где-то в другом месте.Там где вывод ника запостившего.Ищу дальше.


У меня тут - http://yarik-sat.ru

[ALINA]

Taz то же самое и на дефолте .  Я на тестовом это пробовала http://alsiti.besaba.com/index.php?topic=2.0   и предпросмотре на своем http://alsiti.net/  Вот на тестовом . На дефолте этот же блок так же уходит . Тема  на основе Curve . Разницы в  css нет.

[Yarik]

У меня так сильно не залазит как на последнем скрине,у меня почти норма.Надо смотреть исходный код страницы и потом поиском по файлам смотреть где этот кусок кода есть.Сейчас попробуем найти.

Искать нужно в дефолтной теме.

[ALINA]

Yarik да с размером самого блока я определилась . Но верх все равно выступает . Цвет тень я подберу потом под оформление .Это ерунда . Но вот этот аппендицит 

[Yarik]

Этот апендикс и меня бесит.Пока ищу.

[GeorG]

Смотрится конечно  неплохо . Но вот как от этого избавится ? Не въеду 

Код (Найти) Выделить Развернуть

.poster h4
{
margin: 0.2em 0 0.4em 1.1em;
font-size: 100%;
}

Код (Заменить) Выделить Развернуть

.poster h4
{
    font-size: 100%;
    margin: 0.2em 0 0.4em 0.4em;
    width: 10em;
}

[Yarik]

Георг опередил...Уже исправил.Оно рядом,под тем же текстом что вставляем,следом идёт.
Этим width: 10em; подбираем размер.

[ALINA]

GeorG я тебя обожаю  Все получилось ! . Буду играться попозже с цветом и оттенком . Спасибо .Всем спасибо за помощь !!!

[Serifa]

при прописывании в

Код Выделить Развернуть

/* No image should have a border when linked. */
    a img

вот этого

Код Выделить Развернуть

border: 1px solid #000080;
       -webkit-border: 1px solid #000080;
       -moz-border: 1px solid #000080;
       -khtm-border: 1px solid #000080;

появляются артефакты, как на картинках вверху - вокруг лого и кнопки «сообщить модератору»

Интересно, а иностранцы умеют так делать, как мы научились?) Надо сделать это в виде мода хотя хотя бы потому, чтобы показать им, какие мы тут продвинутые))

[ALINA]

появляются артефакты, как на картинках вверху - вокруг лого и кнопки «сообщить модератору»

а подобрала  цвет  там под фон . Вместо #000080; Выглядит нормально . Но вот появилась идея одна . Если  в место цвета фона  прописать путь к фоновому изображению

Код Выделить Развернуть

background:  путь здесь
Смотри как получается . Надо только картинку нормальную подготовить . Я взяла первую попавшуюся
http://alsiti.besaba.com/index.php?topic=2.0
.

[Yarik]

появляются артефакты, как на картинках вверху - вокруг лого и кнопки «сообщить модератору»

Меня эти артефакты устраивают,как раз выделяются активные кнопки.А то у меня половина слепых,постоянно в ЛС спрашивают где что находится.

а подобрала  цвет  там под фон

А вот это интересная идея,можно попробовать.

[Taz]

при прописывании в

Код Выделить Развернуть

/* No image should have a border when linked. */
    a img

вот этого

Код Выделить Развернуть

border: 1px solid #000080;
       -webkit-border: 1px solid #000080;
       -moz-border: 1px solid #000080;
       -khtm-border: 1px solid #000080;

появляются артефакты, как на картинках вверху - вокруг лого и кнопки «сообщить модератору»

Интересно, а иностранцы умеют так делать, как мы научились?) Надо сделать это в виде мода хотя хотя бы потому, чтобы показать им, какие мы тут продвинутые))

Это не артефакты, а как раз то, что хотели кодом - все картинки, которые являются ссылками обводятся рамкой в 1px цветом #000080

[Yarik]

все картинки, которые являются ссылками обводятся рамкой

Да,это именно то чего хотел...
А вот как обвести саму картинку,чтобы не было так?..Я на другой теме хочу переделать.Пока ещё не докумекал.

[Serifa]

Если  в место цвета фона  прописать путь к фоновому изображению

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


Ещё самому авику тоже можно добавить тень, будет отображаться и на панели приветствия и в темах:

Код Выделить Развернуть

/* poster details and list of items */
.avatar>p>img, .avatar>a>img {
   box-shadow: 10px 5px 5px rgba(0,0,0,.3);   
}

Это взято из мода AvatarDropShadow, сам мод ставить не нужно, там всего одну строчку изменить.

[ALINA]

Думаю,надо брать цельный рисунок и резать его, подгоняя точно под размер блока

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

Ещё самому авику тоже можно добавить тень, будет отображаться и на панели приветствия и в темах:

А если авка на на прозрачном фоне ? Как это будет выглядеть ?

[Yarik]

Serifa интересный кусок кода...Это с index.css? Просто ноута нет под рукой...Стоит его поковырять на предмет окантовки...Может получится без артефактов сделать...
Как ноут отдадут поковыряю,с планшетника не смогу,мощность проца не та.Не тянет на хостинге в С-панели редактор кода.

[Yarik]

Serifa интересный кусок кода

Спасибо за наводку.Я это сделал.Сейчас дополню сообщение и выложу куски кода.Обрамление есть,артефактов нет.Есть также и тень портрета.Отлично выглядит.Скрин сделаю тоже.Проверил на нестандартной теме,в стандартной код ещё нужно править.В стандартной тоже норма.
Ищем это

Код Выделить Развернуть

/* poster details and list of items */
И все что там есть,у меня в теме до .poster h4 я заменил на это

Код Выделить Развернуть

.avatar>p>img, .avatar>a>img {
box-shadow: 10px 5px 5px rgba(0,0,0,.3);
   
border-radius: 5px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -khtm-border-radius: 10px;
   
      border: 1px solid #000080;
   -webkit-border: 1px solid #000080;
   -moz-border: 1px solid #000080;
   -khtm-border: 1px solid #000080;

}
.poster h4, .poster ul
{     
float: left;
width: 15em;
background: #607b8b;
margin: 0 0px 0 5px;

box-shadow: 0 0 50px #000000;
-webkit-box-shadow: 0 0 50px #000000;
-moz-box-shadow: 0 0 50px #000000;
-khtm-box-shadow: 0 0 50px #000000; 

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtm-border-radius: 5px;

text-shadow: -1px -1px 1px white, 1px -1px 1px white, -1px 1px 1px white, 1px 1px 1px white;
}Потом ищем это

Код Выделить Развернуть

/* No image should have a border when linked. */
И весь кусок кода заменил на это

Код Выделить Развернуть

a img
{
     border: 0;
   border-radius: 5px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -khtm-border-radius: 10px;
}


Я так понимаю чтто можно и не править в /* No image should have a border when linked. */ достаточно последний кусок кода вставить в  * poster details and list of items * до 14 строки...Тогда получится только аватар с закруглёнными углами.Но я сделал именно так потому что у меня все картинки являющиеся ссылками автоматически стали с закруглёнными углами,что более стильно.Кому это не нужно можно попробовать воспользоватся вторым вариантом.
Ну и не забыть тут

Код Выделить Развернуть

.poster h4
{
   margin: 0.2em 0 0.4em 1.1em;
   font-size: 100%;
}

Заменить на это

Код Выделить Развернуть

.poster h4
{
    font-size: 100%;
    margin: 0.2em 0 0.4em 0.4em;
    width: 10em;
}


Как писал GeorG.Получилось вот такое.Без всяких артефактов.Цвета,радиусы закруглений,толщину окантовки и всё остальное каждый правит и выбирает на свой вкус.Вроде как всё,получилось как задумали.

[Serifa]

В итоге, решила, что подобное не соответствует общей стилистике движка SMF. Поэтому сделала по-другому: акцентировала внимание на тексте



И по аналогии с ответами выше внесла изменения в элемент .inner

Код Выделить Развернуть

.inner {
    padding: 1em 1em 10px 10px; *тут отступ слева увелич.
    margin: 0px 1em 0px 0px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;   
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    border-radius: 10px;
-webkit-border-radius: 10px; /* Для хрома */
-moz-border-radius: 10px; /* Для мозилы */
-khtm-border-radius: 10px; /* Для IE */

Для тёмного фона выбрать бордер сложнее, но там можно вместо solid попробовать dotted

[Serifa]

Смотрите, как это делают иностранцы



http://www.i30ownersclub.com/forum/index.php?topic=33578.msg349177#msg349177

[GeorG]

Смотрите, как это делают иностранцы

Minimalist User Menu - http://www.smfsimple.com/index.php?topic=7361.0

[Serifa]

ну вот, всё уже придумано до нас, а мы тут огород городим)
так, а как его получить и откуда скачать? на той странице ничего не нахожу)

[GeorG]

Там вложение в первом сообщении. Видимо они скрыты от гостей просто.

[motosimak]

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

[Yarik]

Там вложение в первом сообщении. Видимо они скрыты от гостей просто.

А я там зареген вроде как...До ноута доберусь,гляну.Если что качну.

[valek0972]

а как его получить и откуда скачать? на той странице ничего не нахожу

Вот во вложении мод.

[Maximusdmc]

Красиво у вас получается, попробовал и у мен получилось, но вот отступ аватара и текста хотелось бы больше сделать, кто поможет, где смотреть?

[Yarik]

где смотреть?

Мне думается что тут нужно смотреть стиль css конкретной темы.

[Serifa]

Красиво у вас получается, попробовал и у мен получилось, но вот отступ аватара и текста хотелось бы больше сделать, кто поможет, где смотреть?

Я, кстати, тоже пробовала исправить, не получилось. Попробуй просто отцентрировать

Код Выделить Развернуть

text-align: center;

Я после установки предыдущего мода уже не соображу, где там что. Он там наделал ul и li, даже не сразу нашла, где цвет изменить для темной темы.

Кстати, попытка чуть увеличить ширину блока, заменить 15 на 16 - приводить к диспропорциям, сектор

Код Выделить Развернуть

.poster
{
   float: left;
   width: 15em;
}


На темной теме не очень заметно, а на светлой сразу видно. Потому что вот этот сектор

Код Выделить Развернуть

.poster ul li, .poster h4
{
   background: #dcdfe4;
   border: 10px outset #dcdfe4;
   text-align: center;
   padding: 3px;
   margin-top:5px;
   border-width:1px;
   color: #3f3f3f;
width: 80%;
border-radius: 5px;
}

идёт в процентах, и как их совместить?