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

[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]

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

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