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

[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;
}

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

[Maximusdmc]

Serifa
после центрирования стало значительно лучше, спасибо ))
ну а как это се смотрится на форуме можно посмотреть у меня на форуме (прошу прощения за тавтологию) http://www.las-arms.ru/forum/index.php

[Serifa]

В моем браузере аватарки становятся блеклыми, и блок с кнопками слишком близко, имхо:

[Maximusdmc]

аватарки блеклые если пользователь не в сети, если в сети то нормальные, а  по поводу блока с кнопками пока думаю ))

[ALINA]

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

[Serifa]

Вопросы:
1. Как спрятать инфу под такой же блок?
2. Чтобы сделать авик побольше, нужно сделать вот это

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

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

побольше, вместо 15 - 16 или даже 17, но тогда всё ломается:
http://www.simplemachines.ru/index.php?topic=17624.msg144687#msg144687

Сейчас у меня так, на дефолте:



Новый диз пока придумываю. Надо решить вопрос с большими картинками в шапке и в блоках портала.

[Yarik]

Красиво,+

[GeorG]

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

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

ul.reset {
  padding-left: 10px;
}
Предыдущее центрирование в данном случае, нужно будет убрать.

1. Как спрятать инфу под такой же блок?

http://www.simplemachines.ru/index.php?topic=17780.0

[dron]

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

[ALINA]

,И как цвет поменять место серого другой

цвет не поменяешь .Это картинка .Перерисовывай . Хоть бы если сам не ставил то файербагом глянул

[Yworld_garry]

цвет не поменяешь .Это картинка .Перерисовывай . Хоть бы если сам не ставил то файербагом глянул

Упростим) вот эту картинку перекрасить и кстати сразу место где она лежит.
http://forum-lada.ru/pic/55.png

Можно отцентровать там где она подключается или просто сделать шире)))
В фале Display.template.php найти ее и там уже все что угодно. Искать рядом с "Для просмотра дополнительной информации жми сюда"

[karavan]

Думаю он сам делал, если б не сам не было бы вопросов таких. Учится потихоньку.

[Yworld_garry]

Учится потихоньку.

тогда немного инфы еще... вот у вас так там -  padding: 0px 0 0 0; поиграйте с отступами, только как вариант.

[GeorG]

Ребята помогите в какой строчке капать чтоб выравнять тут на скрине я показал

В файл ../Themes/whitebox_202/css/index.css

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

ul.reset, ul.reset li
{
  text-align: center;
}
Тогда будет все по центру.

[dron]

ul.reset, ul.reset li
{
  text-align: center;
}

Спасибо проблема решина

[Maximusdmc]

Экспериментировать так экспериментировать.... тут в теме говорилось об акцентации внимания на тексте, решил попробовать у себя и вот что получилось.

[dron]

Экспериментировать так экспериментировать.... тут в теме говорилось об акцентации внимания на тексте, решил попробовать у себя и вот что получилось.

у вас ссылка на Форум не работает не открывается Форум

[Maximusdmc]

у вас ссылка на Форум не работает не открывается Форум

Все работает и открывается )) только что проверил

[ALINA]

Maximusdmc и  у меня недоступен

[dron]

Maximusdmc и  у меня недоступен

Вот я про тоже

[Yarik]

Все работает и открывается

Не открывается,проверьте ссылку в профиле.

[Maximusdmc]

вот ссылка... доступно все http://www.las-arms.ru/forum/index.php

[ALINA]

Вот теперь открывается . Красиво . Только по моему вкусу я бы чуть чуть убавила тень у блока авки

[Yworld_garry]

По мне, это уже перебор, еще понял бы какие то контуры у всего поста, а не только текста и не такие крупные. Это уже не акцент, а "мельтишение" перед глазами




А если несколько цитат в подряд идущих постах и мультицитата....

[Serifa]

По мне, это уже перебор, еще понял бы какие то контуры у всего поста, а не только текста и не такие крупные. Это уже не акцент, а "мельтишение" перед глазами

Я тоже в итоге отказалась
Кстати, авики сделала совсем круглыми. Так круче выглядит.

Думаю он сам делал, если б не сам не было бы вопросов таких. Учится потихоньку.

Молодец он, далеко уйдёт)

И ещё... В разных браузера все эти красивости отображаются по-разному! Например, в опере девелопер, линукс, в блок с выставленной 15 em аватарки 150*150 не влазят! В то время как в мозилле, тоже линукс, всё прекрасно и всё помещается куда надо.  В браузере макстон, в винде, - не видно закруглённых концов, все блоки - квадратные.
Тут сказали, что макстон вообще перестали обновлять, так что с ним - дохлый номер?

[Yworld_garry]

В браузере макстон, в винде, - не видно закруглённых концов, все блоки - квадратные. Как это исправить?

Чтонить типо того

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Хм, интересно как будет в макстоне, нет его под рукой сейчас, ставить не охота

border-radius: 12px; /*(CHROM ИЕ9!!!!)*/
    -moz-border-radius: 12px; /*(Firefox)*/
-webkit-border-radius: 12px; /*(CHROM)*/
      -o-border-radius: 12px; /*(Opera)*/

[Serifa]

Всё было учтено, как бы (это на темной теме, на дефолте тоже самое почти):

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


/* poster details and list of items */
.avatar img, .avatar img {
border: 0;
   border-radius: 5px; /* CSS3 */
   -webkit-border-radius: 5px; /* Для хрома */
   -moz-border-radius: 5px; /* Для мозилы */
   -khtm-border-radius: 5px; /* Для IE */}


То есть, ещё отдельно добавить оперу? Но современная опера ушла на webkit, значит, мы её как бы уже учли?
Ладно, сейчас добавлю -o-border-radius:, гляну, что будет. Что прописать для макстона? Макстон под рукой, с него наш Верховный модератор выходит.

Пока в опере изменений нет!
Вот как выглядит в опере (темная тема). Авик 140*128:



А вот так на светлой теме( Авик 150*150:




Так выглядит код для poster. Могла и лишнего чего приписала, но вроде работает:

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

/* poster details and list of items */
.avatar img, .avatar img
{
border:0;
   border-radius: 70px; /* CSS3 */
   -webkit-border-radius: 70px; /* Для хрома */
   -moz-border-radius: 70px; /* Для мозилы */
   -khtm-border-radius: 70px; /* Для IE */;
-o-border-radius: 70px;
}
.avatar img {box-shadow: 4px 4px 5px rgba(0,0,0,.5);   
}

[Yworld_garry]

Я уже давно пришел к выводу, что самый простой вариант, это скачать и подключить к своей теме Bootstrap стиль и уже потихоньку переводить сайт или форум на него.
Тут готовые сниппеты http://bootsnipp.com/?page=1   которые легко будет внедрить уже к себе на проект.
Тут все о нем, включая примеры всего чего надо и не надо http://mybootstrap.ru/

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

Тем более вам нужны всякие скругления выделения и тд, там море уже готовых вариантов и работает во всех браузерах.

Либо использовать просто готовые сниппеты, поправленные под себя и создавать свой отдельный фал стилей. Либо комментировать в большом Bootstrap, потом его почистить от лишнего.

Что прописать для макстона?

Это в Китае он был когда то очень популярен))) Я сейчас посмотрел в сети для него просто не нашел решений ни каких.
Хотя думаю он уже поддерживать должен нормальную верстку, может ему его обновить)))
Пишут что на WebKit, хотя прочитал первую попавшуюся инфу.

[Serifa]

Тут некоторые в простом хтмл разобраться не могут, а тут ещё какой-то Bootstrap... Я видела этого зверя, когда разглядывала файлы темы реселлер, но так и не поняла, что это такое. Может, гугль что-то знает, пойду, спрошу)

[dron]

Как сделать так чтоб под каждым звание была своя кортика,Допустим пользователь набрал оределённое количество сообщение и автоматом он переходит в другую группу и менялось при этом его звание имею виду картинку

Допустим он был Новичок и у него  была такое звание


Набрал он определённое количество сообщений и перешёл в другую группу и у него поменялось звание на такое

[digger®]

Как сделать так чтоб под каждым звание была своя кортика,Допустим пользователь набрал оределённое количество сообщение и автоматом он переходит в другую группу и менялось при этом его звание имею виду картинку

Допустим он был Новичок и у него  была такое звание


Набрал он определённое количество сообщений и перешёл в другую группу и у него поменялось звание на такое

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

[dron]

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

Помогите на этот вопрос http://www.simplemachines.ru/index.php?topic=906.msg144733#msg144733

[Maximusdmc]

Господа знатоки, а не подскажете каким таким макаром можно увеличить отображение аватарок, что то ничего путного в голову пока не приходит, заранее благодарен.

[ALINA]

каким таким макаром можно увеличить отображение аватарок,

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

[Yworld_garry]

Господа знатоки, а не подскажете каким таким макаром можно увеличить отображение аватарок, что то ничего путного в голову пока не приходит, заранее благодарен.

В ваш класс добавьте пару строчек примерно так, взял у вас

avatar>p>img, .avatar>a>img {
box-shadow: 5px 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;
width: 100%;
max-width: 165px;

max-width: 165px; - на ваше усмотрение

[Maximusdmc]

Спасибо огромное, все получилось как и хотел

[Serifa]

Вот как выглядит мой poster после мода на светлой теме:

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

/* poster and postarea + moderation area underneath */
.post_wrapper
{
   float:left;
   width:99%;
}
.poster
{
   float:left;
width:16em;
}
.postarea, .moderatorbar
{
   margin: 0 0 0 16em;
}
.postarea div.flow_hidden
{
   width: 100%;
}

.moderatorbar
{
   clear: right;
}
/* poster details and list of items */
.avatar img, .avatar img
{
border:0;
   border-radius: 70px; /* CSS3 */
   -webkit-border-radius: 70px; /* Для хрома */
   -moz-border-radius: 70px; /* Для мозилы */
   -khtm-border-radius: 70px; /* Для IE */;
-o-border-radius: 70px;
}
.avatar img {box-shadow: 4px 4px 5px rgba(0,0,0,.5);   
}

.poster h4, .poster ul
{
   padding: 0;
   margin: 0 1em 0 1.5em;
}
.poster h4
{
   margin: 0.2em 0 0.4em 1.1em;
   font-size: 120%;
}
.poster h4, .poster h4 a
{
   color: #c06002;
}
.poster ul ul
{
   margin: 0.3em 1em 0 0;
   padding: 0;
}
.poster ul ul li
{
   display: inline;
   background: none;
   border: none;
}

.poster ul li, .poster h4
{
   background:#dcdfe4;
   border:10px outset #dcdfe4;
border-radius:5px;
   border-width:1px;
   text-align:center;
   padding:3px;
   margin-top:5px;
   color:#3f3f3f;
width:81%;
}
.poster ul li {
  width:94%;
}
.poster ul ul{margin:0.3em 1em 0 0;padding:0;}
.poster ul ul li{display:inline;}
.poster ul li{-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-ms-border-radius:5px 5px 5px 5px;-o-border-radius:5px 5px 5px 5px;background-color:#dcdfe4;border-width:1px;margin-top:5px;padding:3px;text-align:center;}

Обратите внимание, если 16em,

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

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

то порядок, но если делаешь 17em - то всё рушится, текстовое поле уползает вниз, под поле с аватаркой. Почему?

[Serifa]

Смотрите, это высший пилотаж!  Думаю, тут во многом проявляет себя сам ихний движок. На SMF сделать такое без танцев с бубном никак нельзя, да еще бубен не всякий подойдёт.

Кстати, форум у них закрылся, админы разбежались:
http://dominion.rolka.su/viewtopic.php?id=124&p=2#p45062

[Yarik]

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

[ALINA]

В основном графика . Я уже глянула .Кое что сперла . Пригодится для какого нибудь оформления .

[Serifa]

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

[dron]

В основном графика . Я уже глянула .Кое что сперла .

А ещё на меня говорит что я ворую,А сама Написала что Кое что Сперла,Не стыдно? А ещё на других говорит.

[ALINA]

А ещё на меня говорит что я ворую,А сама Написала что Кое что Сперла,Не стыдно? А ещё на других говорит.

а не пошел бы ты с низкого старта  в легкое эротическое трехбуквенное турне .

[dron]

а не пошел бы ты с низкого старта  в легкое эротическое трехбуквенное турне .

Нет уж, это не моё дело ходить туда,а ваше женское.

[ALINA]

Возник такой вопрос . Пилю  новый диз для раздела магии . http://alsiti.net/index.php?topic=4945.msg140507#new  Хотела придвинуть ближе к телу сообщения блок с авками . Двигается без проблем  но перестает работать цитата выделенного . Вернее она работает ,но захватывает  теги  что у блока авки . Как можно сместить левее   Или как то уменьшить сам блок этот ? Что то туплю

[Serifa]

Тут бы модерам темку почистить...

А вообще, в SMF всё не так просто двигать. Тут так или иначе, всё к чему-то прибито жёстко. Там сдвинешь - тут весь диз перекосит.

[Serifa]

Маленькое дополнение в цсс. Теперь все почти кликабельные картинки при наведении становятся полупрозрачными, включая аватарки. Вставлять в любое место цсс, там без разницы, вроде.

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

a:hover img {
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}

А теперь вопрос на засыпку: как сделать этот эффект наоборот? Чтобы они сразу были полупрозрачными, а при наведении на них становились непрозрачными?

[Taz]

Только не при нажатии, а при наведении наверно.

Найти в цсс картинки и задать им прозрачность, а ваш код убрать (ну или задать минимальную прозрачность)

[Serifa]

Только не при нажатии, а при наведении наверно.
Найти в цсс картинки и задать им прозрачность, а ваш код убрать (ну или задать минимальную прозрачность)

Исправила.

Нет, плохой вариант. Надо опционально сразу для всех картинок, как это делает приведённый код.
Ну, то есть, он не все картинки захватывает, но уж точно не надо назначать конкретную картинку.

[Taz]

Ну если я правильно понял, то в a:hover img ставим opacity: 1, а в a img (он уже есть) пишем opacity: 0.3

Зы Это все будет работать только для картинок-ссылок

[Yarik]

Зы Это все будет работать только для картинок-ссылок

Ага,для тех картинок которые кликабельны,для статики работать не будет.

[Serifa]

На версии 2.1 достаточно сделать изменение тут:

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

.user_info > li {
    margin: 3px 0 0 0;
    background: #dcdfe4;
    border: 10px outset #dcdfe4;
    text-align: center;
    padding: 3px;
    margin-top: 5px;
    border-width: 1px;
    color: #3f3f3f;
    border-radius: 5px;
}
ну и там смотреть, где фон добавить, где тень.